datocms-plugin-sdk 2.0.15 → 2.0.17

package/dist/types/connect.d.ts

@@ -27,6 +27,8 @@ import type { OverrideFieldExtensionsHook } from './hooks/overrideFieldExtension
 import { RenderAssetSourceHook } from './hooks/renderAssetSource';
 import { RenderConfigScreenHook } from './hooks/renderConfigScreen';
 import { RenderFieldExtensionHook } from './hooks/renderFieldExtension';
+import { RenderInspectorHook } from './hooks/renderInspector';
+import { RenderInspectorPanelHook } from './hooks/renderInspectorPanel';
 import { RenderItemCollectionOutletHook } from './hooks/renderItemCollectionOutlet';
 import { RenderItemFormOutletHook } from './hooks/renderItemFormOutlet';
 import { RenderItemFormSidebarHook } from './hooks/renderItemFormSidebar';
@@ -43,5 +45,5 @@ import { UploadSidebarsHook } from './hooks/uploadSidebars';
 import type { UploadsDropdownActionsHook } from './hooks/uploadsDropdownActions';
 import type { ValidateManualFieldExtensionParametersHook } from './hooks/validateManualFieldExtensionParameters';
 /** The full options you can pass to the `connect` function */
-export type FullConnectParameters = AssetSourcesHook & BuildItemPresentationInfoHook & ContentAreaSidebarItemsHook & CustomBlockStylesForStructuredTextFieldHook & CustomMarksForStructuredTextFieldHook & ExecuteFieldDropdownActionHook & ExecuteItemFormDropdownActionHook & ExecuteItemsDropdownActionHook & ExecuteSchemaItemTypeDropdownActionHook & ExecuteUploadsDropdownActionHook & FieldDropdownActionsHook & InitialLocationQueryForItemSelectorHook & ItemCollectionOutletsHook & ItemFormDropdownActionsHook & ItemFormOutletsHook & ItemFormSidebarPanelsHook & ItemFormSidebarsHook & ItemsDropdownActionsHook & MainNavigationTabsHook & ManualFieldExtensionsHook & OnBeforeItemsDestroyHook & OnBeforeItemsPublishHook & OnBeforeItemsUnpublishHook & OnBeforeItemUpsertHook & OnBootHook & OverrideFieldExtensionsHook & RenderAssetSourceHook & RenderConfigScreenHook & RenderFieldExtensionHook & RenderItemCollectionOutletHook & RenderItemFormOutletHook & RenderItemFormSidebarHook & RenderItemFormSidebarPanelHook & RenderManualFieldExtensionConfigScreenHook & RenderModalHook & RenderPageHook & RenderUploadSidebarHook & RenderUploadSidebarPanelHook & SchemaItemTypeDropdownActionsHook & SettingsAreaSidebarItemGroupsHook & UploadsDropdownActionsHook & UploadSidebarPanelsHook & UploadSidebarsHook & ValidateManualFieldExtensionParametersHook;
+export type FullConnectParameters = AssetSourcesHook & BuildItemPresentationInfoHook & ContentAreaSidebarItemsHook & CustomBlockStylesForStructuredTextFieldHook & CustomMarksForStructuredTextFieldHook & ExecuteFieldDropdownActionHook & ExecuteItemFormDropdownActionHook & ExecuteItemsDropdownActionHook & ExecuteSchemaItemTypeDropdownActionHook & ExecuteUploadsDropdownActionHook & FieldDropdownActionsHook & InitialLocationQueryForItemSelectorHook & ItemCollectionOutletsHook & ItemFormDropdownActionsHook & ItemFormOutletsHook & ItemFormSidebarPanelsHook & ItemFormSidebarsHook & ItemsDropdownActionsHook & MainNavigationTabsHook & ManualFieldExtensionsHook & OnBeforeItemsDestroyHook & OnBeforeItemsPublishHook & OnBeforeItemsUnpublishHook & OnBeforeItemUpsertHook & OnBootHook & OverrideFieldExtensionsHook & RenderAssetSourceHook & RenderConfigScreenHook & RenderFieldExtensionHook & RenderItemCollectionOutletHook & RenderItemFormOutletHook & RenderItemFormSidebarHook & RenderItemFormSidebarPanelHook & RenderManualFieldExtensionConfigScreenHook & RenderModalHook & RenderPageHook & RenderInspectorHook & RenderInspectorPanelHook & RenderUploadSidebarHook & RenderUploadSidebarPanelHook & SchemaItemTypeDropdownActionsHook & SettingsAreaSidebarItemGroupsHook & UploadsDropdownActionsHook & UploadSidebarPanelsHook & UploadSidebarsHook & ValidateManualFieldExtensionParametersHook;
 export declare function connect(rawConfiguration?: Partial<FullConnectParameters>): Promise<void>;

package/dist/types/hooks/mainNavigationTabs.d.ts

@@ -28,6 +28,10 @@ export type MainNavigationTab = {
     /** ID of the page linked to the tab */
     pointsTo: {
         pageId: string;
+    } | {
+        inspectorId: string;
+        /** The preferred width for the sidebar */
+        preferredWidth?: number;
     };
     /**
      * Expresses where you want to place the tab in the top-bar. If not specified,

package/dist/types/hooks/renderInspector.d.ts

@@ -0,0 +1,147 @@
+import { ImposedSizePluginFrameCtx } from '../ctx/pluginFrame';
+/**
+ * Defines the different modes in which an inspector can be displayed
+ */
+export type InspectorMode = {
+    /** Display a list of records in the inspector */
+    type: 'itemList';
+} | {
+    /** Display a single record editor in the inspector */
+    type: 'itemEditor';
+    /** The ID of the record to edit */
+    itemId: string;
+    /** Optional field path to highlight/focus within the record editor */
+    fieldPath?: string;
+} | {
+    /** Display a custom panel in the inspector */
+    type: 'customPanel';
+    /** ID of the inspector panel to render */
+    panelId: string;
+    /**
+     * An arbitrary configuration object that will be passed as the `parameters`
+     * property of the second argument of the `renderInspectorPanel` function
+     */
+    parameters?: Record<string, unknown>;
+};
+/**
+ * Options for configuring inspector mode changes
+ */
+export type SetInspectorModeOptions = {
+    /**
+     * When true, the mode change will be ignored if there are unsaved changes
+     * in the current inspector. Useful for "low intent" mode changes that
+     * shouldn't interrupt active editing sessions.
+     * @default false
+     */
+    ignoreIfUnsavedChanges?: boolean;
+};
+export type RenderInspectorHook = {
+    /**
+     * This function will be called when the plugin needs to render a specific
+     * inspector. Inspectors provide a side panel interface for displaying and
+     * interacting with content alongside a custom interface.
+     *
+     * @tag inspector
+     *
+     * @example
+     *
+     * ```js
+     * connect({
+     *   renderInspector(inspectorId, ctx) {
+     *     render(
+     *       <div>
+     *         <h1>Inspector: {inspectorId}</h1>
+     *         <button onClick={() => ctx.setInspectorMode({
+     *           type: 'itemEditor',
+     *           itemId: 'some-item-id'
+     *         })}>
+     *           Show Item Editor
+     *         </button>
+     *       </div>
+     *     );
+     *   }
+     * });
+     * ```
+     */
+    renderInspector: (inspectorId: string, ctx: RenderInspectorCtx) => void;
+};
+export type RenderInspectorCtx = ImposedSizePluginFrameCtx<'renderInspector', {
+    /** The ID of the inspector that needs to be rendered */
+    inspectorId: string;
+    /** The ID of the record the currently is highlighted by the user */
+    highlightedItemId: string | undefined;
+    /** Current page location */
+    location: {
+        pathname: string;
+        search: string;
+        hash: string;
+    };
+}, {
+    /**
+     * Changes the current display mode of the inspector. This allows the plugin
+     * to dynamically switch between showing a record list, record editor, or custom
+     * panel within the inspector interface.
+     *
+     * @param mode - The inspector mode to switch to
+     * @param options - Optional configuration for the mode change
+     * @param options.ignoreIfUnsavedChanges - When true, the mode change request will be
+     * ignored if the current inspector is in itemEditor mode and has unsaved changes.
+     * This allows for "low intent" mode changes that shouldn't interrupt active editing.
+     * Default is false, meaning mode changes will proceed regardless of unsaved changes.
+     *
+     * @example
+     *
+     * ```js
+     * // Switch to record editor mode
+     * await ctx.setInspectorMode({
+     *   type: 'itemEditor',
+     *   itemId: 'item-123',
+     *   fieldPath: 'title'
+     * });
+     *
+     * // Switch to record list mode
+     * await ctx.setInspectorMode({ type: 'itemList' });
+     * await ctx.setInspectorItemListData({
+     *   title: 'Related Records',
+     *   itemIds: ['item-1', 'item-2', 'item-3']
+     * });
+     *
+     * // Switch to custom panel mode
+     * await ctx.setInspectorMode({
+     *   type: 'customPanel',
+     *   panelId: 'my-custom-panel',
+     *   parameters: { filter: 'active' }
+     * });
+     *
+     * // Low intent mode change - won't interrupt editing with unsaved changes
+     * await ctx.setInspectorMode(
+     *   { type: 'itemList' },
+     *   { ignoreIfUnsavedChanges: true }
+     * );
+     * ```
+     */
+    setInspectorMode: (mode: InspectorMode, options?: SetInspectorModeOptions) => Promise<void>;
+    /**
+     * Sets the data for the item list inspector mode.
+     *
+     * @example
+     *
+     * ```js
+     * // Set the item list data
+     * await ctx.setInspectorItemListData({
+     *   title: 'Related Records',
+     *   itemIds: ['item-1', 'item-2', 'item-3']
+     * });
+     *
+     * // Switch to item list mode
+     * await ctx.setInspectorMode({ type: 'itemList' });
+     * ```
+     */
+    setInspectorItemListData: (data: {
+        /** The title to show in the inspector header */
+        title: string;
+        /** Array of record IDs to display in the list */
+        itemIds: string[];
+    }) => Promise<void>;
+}>;
+export declare const renderInspectorBootstrapper: import("../utils").Bootstrapper<"renderInspector">;

package/dist/types/hooks/renderInspectorPanel.d.ts

@@ -0,0 +1,20 @@
+import { ImposedSizePluginFrameCtx } from '../ctx/pluginFrame';
+export type RenderInspectorPanelHook = {
+    /**
+     * This function will be called when an inspector needs to render a specific
+     * panel (see the `renderInspector` and `setInspectorMode` functions)
+     *
+     * @tag inspector
+     */
+    renderInspectorPanel: (panelId: string, ctx: RenderInspectorPanelCtx) => void;
+};
+export type RenderInspectorPanelCtx = ImposedSizePluginFrameCtx<'renderInspectorPanel', {
+    /** The ID of the inspector panel that needs to be rendered */
+    panelId: string;
+    /**
+     * The arbitrary `parameters` of the modal declared in the `setInspectorMode`
+     * function
+     */
+    parameters: Record<string, unknown>;
+}>;
+export declare const renderInspectorPanelBootstrapper: import("../utils").Bootstrapper<"renderInspectorPanel">;

package/dist/types/index.d.ts

@@ -51,6 +51,8 @@ export * from './hooks/renderItemFormSidebarPanel';
 export * from './hooks/renderManualFieldExtensionConfigScreen';
 export * from './hooks/renderModal';
 export * from './hooks/renderPage';
+export * from './hooks/renderInspector';
+export * from './hooks/renderInspectorPanel';
 export * from './hooks/renderUploadSidebar';
 export * from './hooks/renderUploadSidebarPanel';
 export * from './hooks/schemaItemTypeDropdownActions';

package/manifest.json

@@ -1139,6 +1139,140 @@
         "lineNumber": 14
       }
     },
+    "renderInspectorPanel": {
+      "name": "renderInspectorPanel",
+      "comment": {
+        "markdownText": "This function will be called when an inspector needs to render a specific\npanel (see the `renderInspector` and `setInspectorMode` functions).",
+        "tag": "inspector"
+      },
+      "nonCtxArguments": [
+        {
+          "name": "panelId",
+          "typeName": "string"
+        }
+      ],
+      "ctxArgument": {
+        "type": "ImposedSizePluginFrameCtx",
+        "additionalProperties": [
+          {
+            "items": {
+              "panelId": {
+                "comment": {
+                  "markdownText": "The ID of the inspector panel that needs to be rendered."
+                },
+                "location": {
+                  "filePath": "src/hooks/renderInspectorPanel.ts",
+                  "lineNumber": 18
+                },
+                "type": "string"
+              },
+              "parameters": {
+                "comment": {
+                  "markdownText": "The arbitrary `parameters` of the modal declared in the `setInspectorMode`\nfunction."
+                },
+                "location": {
+                  "filePath": "src/hooks/renderInspectorPanel.ts",
+                  "lineNumber": 24
+                },
+                "type": "Record<string, unknown>"
+              }
+            }
+          }
+        ],
+        "additionalMethods": []
+      },
+      "returnType": "void",
+      "location": {
+        "filePath": "src/hooks/renderInspectorPanel.ts",
+        "lineNumber": 11
+      }
+    },
+    "renderInspector": {
+      "name": "renderInspector",
+      "comment": {
+        "markdownText": "This function will be called when the plugin needs to render a specific\ninspector. Inspectors provide a side panel interface for displaying and\ninteracting with content alongside a custom interface.",
+        "tag": "inspector",
+        "example": "connect({\n  renderInspector(inspectorId, ctx) {\n    render(\n      <div>\n        <h1>Inspector: {inspectorId}</h1>\n        <button onClick={() => ctx.setInspectorMode({\n          type: 'itemEditor',\n          itemId: 'some-item-id'\n        })}>\n          Show Item Editor\n        </button>\n      </div>\n    );\n  }\n});"
+      },
+      "nonCtxArguments": [
+        {
+          "name": "inspectorId",
+          "typeName": "string"
+        }
+      ],
+      "ctxArgument": {
+        "type": "ImposedSizePluginFrameCtx",
+        "additionalProperties": [
+          {
+            "items": {
+              "inspectorId": {
+                "comment": {
+                  "markdownText": "The ID of the inspector that needs to be rendered."
+                },
+                "location": {
+                  "filePath": "src/hooks/renderInspector.ts",
+                  "lineNumber": 80
+                },
+                "type": "string"
+              },
+              "highlightedItemId": {
+                "comment": {
+                  "markdownText": "The ID of the record the currently is highlighted by the user."
+                },
+                "location": {
+                  "filePath": "src/hooks/renderInspector.ts",
+                  "lineNumber": 83
+                },
+                "type": "string | undefined"
+              },
+              "location": {
+                "comment": {
+                  "markdownText": "Current page location."
+                },
+                "location": {
+                  "filePath": "src/hooks/renderInspector.ts",
+                  "lineNumber": 86
+                },
+                "type": "{\n      pathname: string;\n      search: string;\n      hash: string;\n    }"
+              }
+            }
+          }
+        ],
+        "additionalMethods": [
+          {
+            "items": {
+              "setInspectorMode": {
+                "comment": {
+                  "markdownText": "Changes the current display mode of the inspector. This allows the plugin\nto dynamically switch between showing a record list, record editor, or custom\npanel within the inspector interface.",
+                  "example": "// Switch to record editor mode\nawait ctx.setInspectorMode({\n  type: 'itemEditor',\n  itemId: 'item-123',\n  fieldPath: 'title'\n});\n\n// Switch to record list mode\nawait ctx.setInspectorMode({ type: 'itemList' });\nawait ctx.setInspectorItemListData({\n  title: 'Related Records',\n  itemIds: ['item-1', 'item-2', 'item-3']\n});\n\n// Switch to custom panel mode\nawait ctx.setInspectorMode({\n  type: 'customPanel',\n  panelId: 'my-custom-panel',\n  parameters: { filter: 'active' }\n});\n\n// Low intent mode change - won't interrupt editing with unsaved changes\nawait ctx.setInspectorMode(\n  { type: 'itemList' },\n  { ignoreIfUnsavedChanges: true }\n);"
+                },
+                "location": {
+                  "filePath": "src/hooks/renderInspector.ts",
+                  "lineNumber": 136
+                },
+                "type": "(\n      mode: InspectorMode,\n      options?: SetInspectorModeOptions,\n    ) => Promise<void>"
+              },
+              "setInspectorItemListData": {
+                "comment": {
+                  "markdownText": "Sets the data for the item list inspector mode.",
+                  "example": "// Set the item list data\nawait ctx.setInspectorItemListData({\n  title: 'Related Records',\n  itemIds: ['item-1', 'item-2', 'item-3']\n});\n\n// Switch to item list mode\nawait ctx.setInspectorMode({ type: 'itemList' });"
+                },
+                "location": {
+                  "filePath": "src/hooks/renderInspector.ts",
+                  "lineNumber": 157
+                },
+                "type": "(data: {\n      /** The title to show in the inspector header */\n      title: string;\n      /** Array of record IDs to display in the list */\n      itemIds: string[];\n    }) => Promise<void>"
+              }
+            }
+          }
+        ]
+      },
+      "returnType": "void",
+      "location": {
+        "filePath": "src/hooks/renderInspector.ts",
+        "lineNumber": 73
+      }
+    },
     "renderFieldExtension": {
       "name": "renderFieldExtension",
       "comment": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-plugin-sdk",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "description": "DatoCMS Plugin SDK",
   "keywords": [
     "datocms",
@@ -45,5 +45,5 @@
     "glob": "^11.0.0",
     "typescript": "^5.6.2"
   },
-  "gitHead": "6698d6f38549b0487ee4721862483d811512bf73"
+  "gitHead": "ce4d1125e8f52a499965e5aad358ffd78d9cc8fd"
 }

package/src/connect.ts

@@ -37,6 +37,14 @@ import {
   RenderFieldExtensionHook,
   renderFieldExtensionBootstrapper,
 } from './hooks/renderFieldExtension';
+import {
+  RenderInspectorHook,
+  renderInspectorBootstrapper,
+} from './hooks/renderInspector';
+import {
+  RenderInspectorPanelHook,
+  renderInspectorPanelBootstrapper,
+} from './hooks/renderInspectorPanel';
 import {
   RenderItemCollectionOutletHook,
   renderItemCollectionOutletBootstrapper,
@@ -117,6 +125,8 @@ export type FullConnectParameters = AssetSourcesHook &
   RenderManualFieldExtensionConfigScreenHook &
   RenderModalHook &
   RenderPageHook &
+  RenderInspectorHook &
+  RenderInspectorPanelHook &
   RenderUploadSidebarHook &
   RenderUploadSidebarPanelHook &
   SchemaItemTypeDropdownActionsHook &
@@ -264,6 +274,8 @@ export async function connect(
       renderManualFieldExtensionConfigScreenBootstrapper,
     renderModal: renderModalBootstrapper,
     renderPage: renderPageBootstrapper,
+    renderInspector: renderInspectorBootstrapper,
+    renderInspectorPanel: renderInspectorPanelBootstrapper,
     renderUploadSidebar: renderUploadSidebarBootstrapper,
     renderUploadSidebarPanel: renderUploadSidebarPanelBootstrapper,
   };

package/src/hooks/mainNavigationTabs.ts

@@ -37,9 +37,15 @@ export type MainNavigationTab = {
    */
   icon: Icon;
   /** ID of the page linked to the tab */
-  pointsTo: {
-    pageId: string;
-  };
+  pointsTo:
+    | {
+        pageId: string;
+      }
+    | {
+        inspectorId: string;
+        /** The preferred width for the sidebar */
+        preferredWidth?: number;
+      };
   /**
    * Expresses where you want to place the tab in the top-bar. If not specified,
    * the tab will be placed after the standard tabs provided by DatoCMS itself.
@@ -66,7 +72,10 @@ export function isMainNavigationTab(
     isString(value.label) &&
     isIcon(value.icon) &&
     isRecord(value.pointsTo) &&
-    isString(value.pointsTo.pageId) &&
+    (isString(value.pointsTo.pageId) ||
+      (isString(value.pointsTo.inspectorId) &&
+        (isNullish(value.pointsTo.preferredWidth) ||
+          isNumber(value.pointsTo.preferredWidth)))) &&
     (isNullish(value.placement) || isPlacement(value.placement)) &&
     (isNullish(value.rank) || isNumber(value.rank))
   );

package/src/hooks/renderInspector.ts

@@ -0,0 +1,176 @@
+import { ImposedSizePluginFrameCtx } from '../ctx/pluginFrame';
+import { fullScreenRenderModeBootstrapper } from '../utils';
+
+/**
+ * Defines the different modes in which an inspector can be displayed
+ */
+export type InspectorMode =
+  | {
+      /** Display a list of records in the inspector */
+      type: 'itemList';
+    }
+  | {
+      /** Display a single record editor in the inspector */
+      type: 'itemEditor';
+      /** The ID of the record to edit */
+      itemId: string;
+      /** Optional field path to highlight/focus within the record editor */
+      fieldPath?: string;
+    }
+  | {
+      /** Display a custom panel in the inspector */
+      type: 'customPanel';
+      /** ID of the inspector panel to render */
+      panelId: string;
+      /**
+       * An arbitrary configuration object that will be passed as the `parameters`
+       * property of the second argument of the `renderInspectorPanel` function
+       */
+      parameters?: Record<string, unknown>;
+    };
+
+/**
+ * Options for configuring inspector mode changes
+ */
+export type SetInspectorModeOptions = {
+  /**
+   * When true, the mode change will be ignored if there are unsaved changes
+   * in the current inspector. Useful for "low intent" mode changes that
+   * shouldn't interrupt active editing sessions.
+   * @default false
+   */
+  ignoreIfUnsavedChanges?: boolean;
+};
+
+export type RenderInspectorHook = {
+  /**
+   * This function will be called when the plugin needs to render a specific
+   * inspector. Inspectors provide a side panel interface for displaying and
+   * interacting with content alongside a custom interface.
+   *
+   * @tag inspector
+   *
+   * @example
+   *
+   * ```js
+   * connect({
+   *   renderInspector(inspectorId, ctx) {
+   *     render(
+   *       <div>
+   *         <h1>Inspector: {inspectorId}</h1>
+   *         <button onClick={() => ctx.setInspectorMode({
+   *           type: 'itemEditor',
+   *           itemId: 'some-item-id'
+   *         })}>
+   *           Show Item Editor
+   *         </button>
+   *       </div>
+   *     );
+   *   }
+   * });
+   * ```
+   */
+  renderInspector: (inspectorId: string, ctx: RenderInspectorCtx) => void;
+};
+
+export type RenderInspectorCtx = ImposedSizePluginFrameCtx<
+  'renderInspector',
+  {
+    /** The ID of the inspector that needs to be rendered */
+    inspectorId: string;
+
+    /** The ID of the record the currently is highlighted by the user */
+    highlightedItemId: string | undefined;
+
+    /** Current page location */
+    location: {
+      pathname: string;
+      search: string;
+      hash: string;
+    };
+  },
+  {
+    /**
+     * Changes the current display mode of the inspector. This allows the plugin
+     * to dynamically switch between showing a record list, record editor, or custom
+     * panel within the inspector interface.
+     *
+     * @param mode - The inspector mode to switch to
+     * @param options - Optional configuration for the mode change
+     * @param options.ignoreIfUnsavedChanges - When true, the mode change request will be
+     * ignored if the current inspector is in itemEditor mode and has unsaved changes.
+     * This allows for "low intent" mode changes that shouldn't interrupt active editing.
+     * Default is false, meaning mode changes will proceed regardless of unsaved changes.
+     *
+     * @example
+     *
+     * ```js
+     * // Switch to record editor mode
+     * await ctx.setInspectorMode({
+     *   type: 'itemEditor',
+     *   itemId: 'item-123',
+     *   fieldPath: 'title'
+     * });
+     *
+     * // Switch to record list mode
+     * await ctx.setInspectorMode({ type: 'itemList' });
+     * await ctx.setInspectorItemListData({
+     *   title: 'Related Records',
+     *   itemIds: ['item-1', 'item-2', 'item-3']
+     * });
+     *
+     * // Switch to custom panel mode
+     * await ctx.setInspectorMode({
+     *   type: 'customPanel',
+     *   panelId: 'my-custom-panel',
+     *   parameters: { filter: 'active' }
+     * });
+     *
+     * // Low intent mode change - won't interrupt editing with unsaved changes
+     * await ctx.setInspectorMode(
+     *   { type: 'itemList' },
+     *   { ignoreIfUnsavedChanges: true }
+     * );
+     * ```
+     */
+    setInspectorMode: (
+      mode: InspectorMode,
+      options?: SetInspectorModeOptions,
+    ) => Promise<void>;
+
+    /**
+     * Sets the data for the item list inspector mode.
+     *
+     * @example
+     *
+     * ```js
+     * // Set the item list data
+     * await ctx.setInspectorItemListData({
+     *   title: 'Related Records',
+     *   itemIds: ['item-1', 'item-2', 'item-3']
+     * });
+     *
+     * // Switch to item list mode
+     * await ctx.setInspectorMode({ type: 'itemList' });
+     * ```
+     */
+    setInspectorItemListData: (data: {
+      /** The title to show in the inspector header */
+      title: string;
+      /** Array of record IDs to display in the list */
+      itemIds: string[];
+    }) => Promise<void>;
+  }
+>;
+
+export const renderInspectorBootstrapper =
+  fullScreenRenderModeBootstrapper<RenderInspectorCtx>(
+    'renderInspector',
+    (configuration, ctx) => {
+      if (!configuration.renderInspector) {
+        return;
+      }
+
+      configuration.renderInspector(ctx.inspectorId, ctx);
+    },
+  );

package/src/hooks/renderInspectorPanel.ts

@@ -0,0 +1,38 @@
+import { ImposedSizePluginFrameCtx } from '../ctx/pluginFrame';
+import { fullScreenRenderModeBootstrapper } from '../utils';
+
+export type RenderInspectorPanelHook = {
+  /**
+   * This function will be called when an inspector needs to render a specific
+   * panel (see the `renderInspector` and `setInspectorMode` functions)
+   *
+   * @tag inspector
+   */
+  renderInspectorPanel: (panelId: string, ctx: RenderInspectorPanelCtx) => void;
+};
+
+export type RenderInspectorPanelCtx = ImposedSizePluginFrameCtx<
+  'renderInspectorPanel',
+  {
+    /** The ID of the inspector panel that needs to be rendered */
+    panelId: string;
+
+    /**
+     * The arbitrary `parameters` of the modal declared in the `setInspectorMode`
+     * function
+     */
+    parameters: Record<string, unknown>;
+  }
+>;
+
+export const renderInspectorPanelBootstrapper =
+  fullScreenRenderModeBootstrapper<RenderInspectorPanelCtx>(
+    'renderInspectorPanel',
+    (configuration, ctx) => {
+      if (!configuration.renderInspectorPanel) {
+        return;
+      }
+
+      configuration.renderInspectorPanel(ctx.panelId, ctx);
+    },
+  );

package/src/index.ts

@@ -53,6 +53,8 @@ export * from './hooks/renderItemFormSidebarPanel';
 export * from './hooks/renderManualFieldExtensionConfigScreen';
 export * from './hooks/renderModal';
 export * from './hooks/renderPage';
+export * from './hooks/renderInspector';
+export * from './hooks/renderInspectorPanel';
 export * from './hooks/renderUploadSidebar';
 export * from './hooks/renderUploadSidebarPanel';
 export * from './hooks/schemaItemTypeDropdownActions';