feat(frontend): expose inline render helpers (#11917)

* expose RenderInlineModel

* expose Thumbnail

* add changelog / lib entry

* move thumbnail back; use context

* move to context

* reduce diff

* add better type

* reduce diff more

src/frontend/CHANGELOG.md

@@ -8,11 +8,14 @@ Adds additional functions in the plugin context related to form rendering and AP
 - `useInstance`
 - `renderRemoteInstance`
 - `EditApiForm`
+- `RenderInlineModel`
+- `Thumbnail`
 
 Exposes sub-components related to DetailDrawer rendering:
 - `DetailDrawerComponent`
 - `useLocalLibState`
 
+
 ### 0.11.3 - April 2026
 
 Exposes additional type definitions related to rendering drawers from tables:

src/frontend/lib/types/Plugins.tsx

@@ -2,6 +2,7 @@ import type { I18n } from '@lingui/core';
 import type { MantineColorScheme, MantineTheme } from '@mantine/core';
 import type { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance } from 'axios';
+import type { JSX } from 'react';
 import type { NavigateFunction } from 'react-router-dom';
 import type { ModelDict } from '../enums/ModelInformation';
 import type { ModelType } from '../enums/ModelType';
@@ -12,7 +13,12 @@ import type {
   StockOperationProps
 } from './Forms';
 import type { UseModalReturn } from './Modals';
-import type { RemoteInstanceProps, RenderInstanceProps } from './Rendering';
+import type {
+  RemoteInstanceProps,
+  RenderInlineModelProps,
+  RenderInstanceProps,
+  ThumbnailProps
+} from './Rendering';
 import type { SettingsStateProps } from './Settings';
 import type { InvenTreeTableRenderProps } from './Tables';
 import type { UserStateProps } from './User';
@@ -102,6 +108,10 @@ export type InvenTreePluginContext = {
   renderRemoteInstance: (
     props: Readonly<RemoteInstanceProps>
   ) => React.ReactNode;
+  renderInlineModel: (
+    props: Readonly<RenderInlineModelProps>
+  ) => React.ReactNode;
+  thumbnail: (props: Readonly<ThumbnailProps>) => JSX.Element;
   host: string;
   i18n: I18n;
   locale: string;

src/frontend/lib/types/Rendering.tsx

@@ -60,3 +60,26 @@ export interface RemoteInstanceProps {
   modelRenderer?: (instance: any) => ReactNode;
   pk: number;
 }
+export interface ThumbnailProps {
+  src?: string;
+  alt?: string;
+  size?: number;
+  text?: ReactNode;
+  align?: string;
+  link?: string;
+  hover?: boolean;
+  hoverSize?: number;
+}
+
+export interface RenderInlineModelProps {
+  primary: ReactNode;
+  secondary?: ReactNode;
+  showSecondary?: boolean;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  image?: string;
+  labels?: string[];
+  url?: string;
+  navigate?: any;
+  tooltip?: string;
+}

src/frontend/src/components/images/Thumbnail.tsx

@@ -1,7 +1,8 @@
 import { t } from '@lingui/core/macro';
 import { Anchor, Group, HoverCard, Image } from '@mantine/core';
-import { type ReactNode, useMemo } from 'react';
+import { useMemo } from 'react';
 
+import type { ThumbnailProps } from '@lib/types/Rendering';
 import { ApiImage } from './ApiImage';
 
 /*
@@ -16,16 +17,7 @@ export function Thumbnail({
   align,
   hover,
   hoverSize = 128
-}: Readonly<{
-  src?: string;
-  alt?: string;
-  size?: number;
-  text?: ReactNode;
-  align?: string;
-  link?: string;
-  hover?: boolean;
-  hoverSize?: number;
-}>) {
+}: Readonly<ThumbnailProps>) {
   const backup_image = '/static/img/blank_image.png';
 
   const inner = useMemo(() => {

src/frontend/src/components/plugins/PluginContext.tsx

@@ -48,7 +48,9 @@ import {
 import { useServerApiState } from '../../states/ServerApiState';
 import { InvenTreeTableInternal } from '../../tables/InvenTreeTable';
 import { EditApiForm } from '../forms/ApiForm';
+import { Thumbnail } from '../images/Thumbnail';
 import { RenderInstance, RenderRemoteInstance } from '../render/Instance';
+import { RenderInlineModel } from '../render/Instance';
 
 export const useInvenTreeContext = () => {
   const [locale, host] = useLocalState(useShallow((s) => [s.language, s.host]));
@@ -82,6 +84,8 @@ export const useInvenTreeContext = () => {
       useInstance: useInstance,
       renderInstance: RenderInstance,
       renderRemoteInstance: RenderRemoteInstance,
+      renderInlineModel: RenderInlineModel,
+      thumbnail: Thumbnail,
       theme: theme,
       colorScheme: colorScheme,
       importer: {

src/frontend/src/components/render/Instance.tsx

@@ -15,14 +15,15 @@ import { type ReactNode, useCallback } from 'react';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import { ModelType } from '@lib/enums/ModelType';
 import { apiUrl } from '@lib/functions/Api';
-import { getBaseUrl, navigateToLink } from '@lib/functions/Navigation';
 import type {
   ModelRendererDict,
   RemoteInstanceProps,
+  RenderInlineModelProps,
   RenderInstanceProps
 } from '@lib/types/Rendering';
+
 export type { InstanceRenderInterface } from '@lib/types/Rendering';
-import { shortenString } from '@lib/functions/String';
+import { getBaseUrl, navigateToLink, shortenString } from '@lib/index';
 import { useApi } from '../../contexts/ApiContext';
 import { Thumbnail } from '../images/Thumbnail';
 import { RenderBuildItem, RenderBuildLine, RenderBuildOrder } from './Build';
@@ -172,20 +173,8 @@ export function RenderInlineModel({
   navigate,
   showSecondary = true,
   tooltip
-}: Readonly<{
-  primary: ReactNode;
-  secondary?: ReactNode;
-  showSecondary?: boolean;
-  prefix?: ReactNode;
-  suffix?: ReactNode;
-  image?: string;
-  labels?: string[];
-  url?: string;
-  navigate?: any;
-  tooltip?: string;
-}>): ReactNode {
+}: Readonly<RenderInlineModelProps>): ReactNode {
   // TODO: Handle labels
-
   const onClick = useCallback(
     (event: any) => {
       if (url && navigate) {