@workbench-kit/shell-react 0.0.2-prototype.0.2.41 → 0.0.2-prototype.0.2.43

package/README.md

@@ -51,6 +51,28 @@ registry can use `registry-command-descriptors` without importing Provider
 context into that leaf bundle. The root barrel remains the discovery surface,
 not the default runtime import graph.
 
+### Provider-free command host
+
+Hosts that already own command descriptors and execution can compose the canonical
+Command Palette and Quick Open without `WorkbenchProvider`:
+
+```tsx
+import { WorkbenchCommandHostController } from '@workbench-kit/shell-react/command-host-controller';
+
+<WorkbenchCommandHostController
+  commands={commands}
+  executeCommand={executeCommand}
+  quickOpenProviders={quickOpenProviders}
+/>;
+```
+
+`commands` is the complete palette descriptor set. The controller owns only overlay
+state, hard Palette/Quick Open shortcuts, selection routing, and completion-driven
+closing. Hosts continue to own command registration, descriptor projection, Quick Open
+provider construction, persistence, and error reporting. Pass `shortcutBridge` only
+when the host also wants the generic keybinding bridge; omit it or pass `false` to keep
+that routing host-owned.
+
 ### Focused extension context migration
 
 `WorkbenchContextValue` no longer exposes the aggregate `ExtensionRegistry`.
@@ -117,8 +139,19 @@ for Flow-only embeds and custom bundler setups. The full barrel
 when both durable channels are uncontrolled. If either channel is controlled, pass one
 `historyOwner` for the complete composite state; the Panel never creates a partial stack.
 `historyActionsRef` exposes host-chrome actions and
-`onHistoryAvailabilityChange` reports whether those actions are available. Keyboard
-routing remains host-owned.
+`onHistoryAvailabilityChange` reports whether those actions are available. The Panel routes
+available undo/redo chords through that same owner; direct `FieldRemapFlowMapper` consumers
+remain responsible for host-owned history routing.
+
+| Surface | Shortcut                     | Behavior                                                                                                                                     |
+| ------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| Flow    | `Escape`                     | Clears the active selection and unfinished drafts. If collapsed detail chrome owned focus, focus moves to the programmatic-only mapper root. |
+| Flow    | `Delete` / `Backspace`       | Removes the eligible selected edge, convert step, operator, or draft through the existing mutation path.                                     |
+| Panel   | `Ctrl/Cmd+Z`                 | Invokes the existing composite history owner's available undo action.                                                                        |
+| Panel   | `Ctrl/Cmd+Shift+Z`, `Ctrl+Y` | Invokes the existing composite history owner's available redo action.                                                                        |
+
+Editable inputs, textareas, selects, contenteditable elements, and transform option editors
+retain their native key behavior. Unavailable or read-only actions leave the event unconsumed.
 
 Only semantic edits coming from the Flow mapper create entries. Hidden mappings are
 reconstructed before an entry is recorded, so undo does not discard filtered state.
@@ -140,6 +173,13 @@ hooks so hosts avoid CSS/DOM workarounds:
 | `flowActionsRef`                                                | `{ fitView(options?) }` using the same defaults as Controls fit-view.                                 |
 | `labels` / `t`                                                  | Override edge-list / Convert palette chrome (e.g. “Field maps”).                                      |
 | `ioChrome` (Panel)                                              | `'browse' \| 'edit' \| 'none'` — prefer browse for inspect-only I/O.                                  |
+| `rewirePolicy` (Flow)                                           | `'replace'` by default; `'reject'` preserves prior edges and reports impacted edge IDs.               |
+| `onConnectionFeedback` (Flow)                                   | Receives one structured result at connection-attempt completion; hover validation stays silent.       |
+| `parentChildConflicts` (Flow)                                   | Optional authoritative conflict projection; `undefined` derives from the supplied Flow inputs.        |
+
+Rejected attempts render one compact `role="status"` message. Standalone Flow embeds derive
+parent/child conflicts with the domain detector; Panel computes the same conflicts from full shapes
+before hidden-field projection and supplies that authoritative result, so it renders only once.
 
 ```tsx
 const flowActionsRef = useRef<FieldRemapFlowActions | null>(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/shell-react",
-  "version": "0.0.2-prototype.0.2.41",
+  "version": "0.0.2-prototype.0.2.43",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -11,6 +11,7 @@
     "./command-descriptors": "./src/commands/use-command-descriptors.ts",
     "./registry-command-descriptors": "./src/commands/use-extension-registry-command-descriptors.ts",
     "./command-host": "./src/workbench/command-host.tsx",
+    "./command-host-controller": "./src/workbench/command-host-controller.tsx",
     "./command-palette": "./src/workbench/command-palette.ts",
     "./field-remap": "./src/field-remap/index.ts",
     "./field-remap/view.css": "./src/field-remap/view.css",
@@ -31,14 +32,14 @@
     "@radix-ui/react-slot": "^1.3.0",
     "@xyflow/react": "^12.11.2",
     "jsonata": "^2.2.0",
-    "@workbench-kit/platform": "0.0.2-prototype.0.2.41",
-    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.41",
-    "@workbench-kit/workbench-extension-sdk": "0.0.2-prototype.0.2.41",
-    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.41",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.41",
-    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.41",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.41",
-    "@workbench-kit/react": "0.0.2-prototype.0.2.41"
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.43",
+    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.43",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.43",
+    "@workbench-kit/react": "0.0.2-prototype.0.2.43",
+    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.43",
+    "@workbench-kit/workbench-extension-sdk": "0.0.2-prototype.0.2.43",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.43",
+    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.43"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -57,6 +58,8 @@
   },
   "scripts": {
     "test": "vitest run --config vitest.config.ts src",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "typecheck:exact-optional": "pnpm --filter @workbench-kit/react exec tsc -p typecheck-exact-optional/tsconfig.emit.json && pnpm typecheck:exact-optional:consumer",
+    "typecheck:exact-optional:consumer": "tsc -p typecheck-exact-optional/tsconfig.emit.json && tsc -p typecheck-exact-optional/tsconfig.json --noEmit"
   }
 }

package/src/extensions/extension-enablement-controller.ts

@@ -76,7 +76,11 @@ export class ExtensionEnablementController implements DisposableLike {
   private readonly storage: WorkbenchStorageAdapter | undefined;
   private readonly storageKey: string;
   private installedRecords: readonly InstalledExtensionRecord[];
-  private themeSelectionProtection: ThemeSelectionProtectionSnapshot | undefined;
+  private readonly themeSelectionProtectionOwners = new Map<
+    number,
+    ThemeSelectionProtectionSnapshot
+  >();
+  private themeSelectionProtectionGeneration = 0;
   private disposed = false;
 
   constructor({
@@ -123,11 +127,27 @@ export class ExtensionEnablementController implements DisposableLike {
     };
   };
 
-  setThemeSelectionProtection(snapshot: ThemeSelectionProtectionSnapshot | undefined): void {
-    this.themeSelectionProtection =
-      snapshot?.kind === 'known'
+  setThemeSelectionProtection(snapshot: ThemeSelectionProtectionSnapshot | undefined): () => void {
+    const generation = ++this.themeSelectionProtectionGeneration;
+    if (snapshot === undefined) {
+      this.themeSelectionProtectionOwners.clear();
+      return () => undefined;
+    }
+
+    this.themeSelectionProtectionOwners.set(
+      generation,
+      snapshot.kind === 'known'
         ? { ...snapshot, protectedThemeIds: [...snapshot.protectedThemeIds] }
-        : snapshot;
+        : snapshot,
+    );
+    let disposed = false;
+    return () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      this.themeSelectionProtectionOwners.delete(generation);
+    };
   }
 
   commitInstalledRecords(
@@ -228,6 +248,7 @@ export class ExtensionEnablementController implements DisposableLike {
     this.disposed = true;
     this.listeners.clear();
     this.registrationHandles.clear();
+    this.themeSelectionProtectionOwners.clear();
     this.registrationLifetime.dispose();
   }
 
@@ -345,15 +366,25 @@ export class ExtensionEnablementController implements DisposableLike {
       return { commitRequestedState: true, eligible: false, kind: 'reloadRequired' };
     }
 
-    const selectionProtection = this.themeSelectionProtection;
+    const selectionProtections = [...this.themeSelectionProtectionOwners.values()];
+    const themeRegistryRevision = this.registry.themes.getRevision();
     if (
-      selectionProtection?.kind !== 'known' ||
-      selectionProtection.themeRegistryRevision !== this.registry.themes.getRevision()
+      selectionProtections.length === 0 ||
+      selectionProtections.some(
+        (selectionProtection) =>
+          selectionProtection.kind !== 'known' ||
+          selectionProtection.themeRegistryRevision !== themeRegistryRevision ||
+          !selectionProtection.isCurrent(),
+      )
     ) {
       return { commitRequestedState: false, eligible: false, kind: 'reloadRequired' };
     }
 
-    const protectedThemeIds = new Set(selectionProtection.protectedThemeIds);
+    const protectedThemeIds = new Set(
+      selectionProtections.flatMap((selectionProtection) =>
+        selectionProtection.kind === 'known' ? selectionProtection.protectedThemeIds : [],
+      ),
+    );
 
     const themes = description.manifest.contributes?.themes ?? [];
     if (themes.some((theme) => protectedThemeIds.has(theme.id))) {

package/src/extensions/theme-selection-protection.ts

@@ -1,98 +1,123 @@
-import {
-  DARK_THEME_PRESET_OPTIONS,
-  LIGHT_THEME_PRESET_OPTIONS,
-  WORKBENCH_COLOR_SCHEME_OPTIONS,
-} from '@workbench-kit/react/workbench';
 import type { ThemeRegistry } from '@workbench-kit/workbench-core';
 
-interface ThemeOptionLike {
-  readonly id: string;
+import {
+  createWorkbenchAppearanceCatalogSnapshot,
+  resolveWorkbenchAppearanceSelection,
+  type WorkbenchAppearanceCatalogSnapshot,
+  type WorkbenchAppearanceHostOptionInput,
+} from '../shell/appearance-catalog.js';
+import { classifyWorkbenchAppearanceThemeSelection } from '../shell/appearance-presentation.js';
+
+interface ThemeSelectionProtectionBase {
+  readonly isCurrent: () => boolean;
+  readonly sourceFingerprint: string;
+  readonly themeRegistryRevision: number;
 }
 
 export type ThemeSelectionProtectionSnapshot =
-  | {
+  | (ThemeSelectionProtectionBase & {
       readonly kind: 'known';
       readonly protectedThemeIds: readonly string[];
-      readonly themeRegistryRevision: number;
-    }
-  | {
+    })
+  | (ThemeSelectionProtectionBase & {
       readonly kind: 'unknown';
-      readonly themeRegistryRevision: number;
-    };
+    });
 
 export interface ThemeSelectionProtectionInput {
+  readonly catalog?: WorkbenchAppearanceCatalogSnapshot | undefined;
   readonly darkPreset: string | undefined;
   readonly lightPreset: string | undefined;
   readonly theme: string | undefined;
-  readonly themeOptions: readonly ThemeOptionLike[] | undefined;
+  readonly themeOptions: readonly WorkbenchAppearanceHostOptionInput[] | undefined;
   readonly themes: ThemeRegistry;
 }
 
 /**
- * Captures only selections that resolve to exactly one current option source.
- * Unknown values deliberately do not resolve to the first rendered option: the
- * soft lifecycle must fail closed instead of guessing which fallback is active.
+ * Captures only selections that resolve to exactly one eligible catalog row. The action guard
+ * reconstructs current own data and compares both revision and the canonical source fingerprint,
+ * so writable public contributions cannot reuse stale lifecycle protection.
  */
 export function createThemeSelectionProtectionSnapshot({
+  catalog: suppliedCatalog,
   darkPreset,
   lightPreset,
   theme,
   themeOptions,
   themes,
 }: ThemeSelectionProtectionInput): ThemeSelectionProtectionSnapshot {
-  const themeRegistryRevision = themes.getRevision();
-  const contributedThemes = themes.getThemes();
+  const catalog =
+    suppliedCatalog ??
+    createWorkbenchAppearanceCatalogSnapshot({ hostOptions: themeOptions, themes });
+  const base: ThemeSelectionProtectionBase = {
+    isCurrent: () => isCatalogCurrent(catalog, themes, themeOptions),
+    sourceFingerprint: catalog.sourceFingerprint,
+    themeRegistryRevision: catalog.themeRegistryRevision,
+  };
   const hasLightPreset = lightPreset !== undefined;
   const hasDarkPreset = darkPreset !== undefined;
-
-  if (hasLightPreset !== hasDarkPreset) {
-    return { kind: 'unknown', themeRegistryRevision };
-  }
+  const themeSelection = classifyWorkbenchAppearanceThemeSelection(theme);
 
   if (hasLightPreset && hasDarkPreset) {
-    const lightOptions = [
-      ...LIGHT_THEME_PRESET_OPTIONS,
-      ...contributedThemes.filter((candidate) => candidate.mode === 'light'),
-    ];
-    const darkOptions = [
-      ...DARK_THEME_PRESET_OPTIONS,
-      ...contributedThemes.filter((candidate) => candidate.mode === 'dark'),
-    ];
+    if (themeSelection.kind !== 'base-preference') {
+      return Object.freeze({ ...base, kind: 'unknown' });
+    }
+
+    const lightResolution = resolveWorkbenchAppearanceSelection(
+      catalog,
+      'light-preset',
+      lightPreset,
+    );
+    const darkResolution = resolveWorkbenchAppearanceSelection(catalog, 'dark-preset', darkPreset);
 
-    if (
-      !hasExactlyOneOption(theme, WORKBENCH_COLOR_SCHEME_OPTIONS) ||
-      !hasExactlyOneOption(lightPreset, lightOptions) ||
-      !hasExactlyOneOption(darkPreset, darkOptions)
-    ) {
-      return { kind: 'unknown', themeRegistryRevision };
+    if (lightResolution.status !== 'resolved' || darkResolution.status !== 'resolved') {
+      return Object.freeze({ ...base, kind: 'unknown' });
     }
 
-    return {
+    return Object.freeze({
+      ...base,
       kind: 'known',
-      protectedThemeIds: [theme, lightPreset, darkPreset],
-      themeRegistryRevision,
-    };
+      protectedThemeIds: Object.freeze([lightPreset, darkPreset]),
+    });
   }
 
-  const themeSources = [...(themeOptions ?? []), ...contributedThemes];
-  if (!hasExactlyOneOption(theme, themeSources)) {
-    return { kind: 'unknown', themeRegistryRevision };
+  if (themeSelection.kind === 'base-preference') {
+    return Object.freeze({
+      ...base,
+      kind: 'known',
+      protectedThemeIds: Object.freeze([]),
+    });
+  }
+  const themeResolution = resolveWorkbenchAppearanceSelection(
+    catalog,
+    'flat-theme',
+    themeSelection.rawTheme,
+  );
+  if (themeResolution.status !== 'resolved') {
+    return Object.freeze({ ...base, kind: 'unknown' });
   }
 
-  return {
+  return Object.freeze({
+    ...base,
     kind: 'known',
-    protectedThemeIds: [theme],
-    themeRegistryRevision,
-  };
+    protectedThemeIds: Object.freeze([themeSelection.rawTheme]),
+  });
 }
 
-function hasExactlyOneOption(
-  selection: string | undefined,
-  options: readonly ThemeOptionLike[],
-): selection is string {
-  if (!selection) {
+function isCatalogCurrent(
+  captured: WorkbenchAppearanceCatalogSnapshot,
+  themes: ThemeRegistry,
+  themeOptions: readonly WorkbenchAppearanceHostOptionInput[] | undefined,
+): boolean {
+  try {
+    const current = createWorkbenchAppearanceCatalogSnapshot({
+      hostOptions: themeOptions,
+      themes,
+    });
+    return (
+      current.themeRegistryRevision === captured.themeRegistryRevision &&
+      current.sourceFingerprint === captured.sourceFingerprint
+    );
+  } catch {
     return false;
   }
-
-  return options.filter((option) => option.id === selection).length === 1;
 }

package/src/field-remap/chrome-labels.ts

@@ -37,6 +37,12 @@ export interface FieldRemapChromeLabels {
   readonly hideHiddenFields: string;
   readonly emptyDetailTitle: string;
   readonly emptyDetailDescription: string;
+  /** Additive inspection-only empty-detail copy. Omitted hosts use the English defaults. */
+  readonly readOnlyEmptyDetailTitle?: string;
+  readonly readOnlyEmptyDetailDescription?: string;
+  /** Additive selection-detail Modal copy. Omitted legacy label objects use English defaults. */
+  readonly detailModalTitle?: string;
+  readonly closeDetailModal?: string;
   /** Additive Flow preview copy. Omitted legacy label objects use English defaults. */
   readonly previewTitle?: string;
   readonly previewLoading?: string;
@@ -76,6 +82,10 @@ export const defaultFieldRemapChromeLabels = {
   emptyDetailTitle: 'Start with a convert',
   emptyDetailDescription:
     'Use the Convert palette to place a convert, then wire source → draft → target. Or select an existing binding / convert note on the canvas.',
+  readOnlyEmptyDetailTitle: 'Inspect mappings',
+  readOnlyEmptyDetailDescription: 'Select a mapping to inspect its details.',
+  detailModalTitle: 'Mapping details',
+  closeDetailModal: 'Close details',
   previewTitle: 'Sample preview',
   previewLoading: 'Updating preview…',
   previewError: 'Preview failed',
@@ -114,6 +124,10 @@ export const fieldRemapChromeLabelKeys = {
   hideHiddenFields: 'fieldRemap.hideHiddenFields',
   emptyDetailTitle: 'fieldRemap.emptyDetailTitle',
   emptyDetailDescription: 'fieldRemap.emptyDetailDescription',
+  readOnlyEmptyDetailTitle: 'fieldRemap.readOnlyEmptyDetailTitle',
+  readOnlyEmptyDetailDescription: 'fieldRemap.readOnlyEmptyDetailDescription',
+  detailModalTitle: 'fieldRemap.detailModalTitle',
+  closeDetailModal: 'fieldRemap.closeDetailModal',
   previewTitle: 'fieldRemap.previewTitle',
   previewLoading: 'fieldRemap.previewLoading',
   previewError: 'fieldRemap.previewError',
@@ -162,6 +176,10 @@ export function resolveFieldRemapChromeLabels(
     hideHiddenFields: resolve('hideHiddenFields'),
     emptyDetailTitle: resolve('emptyDetailTitle'),
     emptyDetailDescription: resolve('emptyDetailDescription'),
+    readOnlyEmptyDetailTitle: resolve('readOnlyEmptyDetailTitle'),
+    readOnlyEmptyDetailDescription: resolve('readOnlyEmptyDetailDescription'),
+    detailModalTitle: resolve('detailModalTitle'),
+    closeDetailModal: resolve('closeDetailModal'),
     previewTitle: resolve('previewTitle'),
     previewLoading: resolve('previewLoading'),
     previewError: resolve('previewError'),

package/src/field-remap/convert-note-editor.tsx

@@ -28,6 +28,7 @@ export interface ConvertNoteEditorProps {
   readonly onEdgesChange: (edges: readonly MappingEdge[]) => void;
   readonly edges: readonly MappingEdge[];
   readonly onSelectionChange: (next: FieldRemapSelection) => void;
+  readonly readOnly?: boolean | undefined;
 }
 
 /**
@@ -43,6 +44,7 @@ export function ConvertNoteEditor({
   edges,
   onEdgesChange,
   onSelectionChange,
+  readOnly = false,
 }: ConvertNoteEditorProps): JSX.Element | null {
   const chain = edge.transformIds ?? [];
   const transformId = chain[stepIndex];
@@ -77,7 +79,7 @@ export function ConvertNoteEditor({
   const stepLabel = definition?.label ?? transformId;
 
   const applyEdge = (next: MappingEdge | null) => {
-    if (!next) {
+    if (readOnly || !next) {
       return;
     }
     onEdgesChange(edges.map((item) => (item.id === edge.id ? next : item)));
@@ -135,6 +137,7 @@ export function ConvertNoteEditor({
             aria-label="Convert transform id"
             data-testid="field-remap-step-id"
             value={transformId}
+            disabled={readOnly}
             onChange={(event) => {
               applyEdge(
                 setTransformStepIdOnEdge(edge, stepIndex, event.target.value, {
@@ -165,35 +168,38 @@ export function ConvertNoteEditor({
         <TransformOptionsEditor
           fields={optionFields}
           value={optionValue}
+          disabled={readOnly}
           onChange={(nextOptions) => {
             applyEdge(replaceTransformStepOptionsOnEdge(edge, stepIndex, nextOptions));
           }}
         />
       </section>
 
-      <div className="workbench-field-remap-convert-note__footer">
-        <Button
-          compact
-          type="button"
-          data-testid="field-remap-convert-note-remove"
-          onClick={() => {
-            const next = removeTransformStepFromEdge(edge, stepIndex);
-            applyEdge(next);
-            const nextLen = next.transformIds?.length ?? 0;
-            if (nextLen === 0) {
-              onSelectionChange({ kind: 'edge', edgeId: edge.id });
-            } else {
-              onSelectionChange({
-                kind: 'transformStep',
-                edgeId: edge.id,
-                stepIndex: Math.min(stepIndex, nextLen - 1),
-              });
-            }
-          }}
-        >
-          Remove convert
-        </Button>
-      </div>
+      {!readOnly ? (
+        <div className="workbench-field-remap-convert-note__footer">
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-convert-note-remove"
+            onClick={() => {
+              const next = removeTransformStepFromEdge(edge, stepIndex);
+              applyEdge(next);
+              const nextLen = next.transformIds?.length ?? 0;
+              if (nextLen === 0) {
+                onSelectionChange({ kind: 'edge', edgeId: edge.id });
+              } else {
+                onSelectionChange({
+                  kind: 'transformStep',
+                  edgeId: edge.id,
+                  stepIndex: Math.min(stepIndex, nextLen - 1),
+                });
+              }
+            }}
+          >
+            Remove convert
+          </Button>
+        </div>
+      ) : null}
     </aside>
   );
 }

package/src/field-remap/convert-palette.tsx

@@ -4,6 +4,7 @@ import { ClearableTextInput, IconButton } from '@workbench-kit/react/primitives'
 import type { ValueTransformRegistry } from '@workbench-kit/field-remap';
 
 import { defaultFieldRemapChromeLabels, type FieldRemapChromeLabels } from './chrome-labels.js';
+import { writeFieldRemapTransformDragData } from './drag-payload.js';
 
 export interface FieldRemapConvertPaletteProps {
   readonly transforms: ValueTransformRegistry;
@@ -207,6 +208,7 @@ export function FieldRemapConvertPalette({
               key={definition.id}
               aria-selected={selected}
               data-testid={`field-remap-palette-item-${definition.id}`}
+              draggable
               role="option"
               selected={selected}
               tabIndex={definition.id === rovingTransformId ? 0 : -1}
@@ -217,6 +219,10 @@ export function FieldRemapConvertPalette({
                 onSelectedTransformIdChange(definition.id);
               }}
               onDoubleClick={() => onPlaceDraft(definition.id)}
+              onDragStart={(event) => {
+                event.dataTransfer.effectAllowed = 'copy';
+                writeFieldRemapTransformDragData(event.dataTransfer, definition.id);
+              }}
               onFocus={() => setRequestedRovingTransformId(definition.id)}
               onKeyDown={(event) => handleOptionKeyDown(event, definition.id)}
             >

package/src/field-remap/demo.tsx

@@ -25,6 +25,8 @@ export interface SampleFieldRemapDemoProps {
   readonly showBindingsList?: FieldRemapFlowMapperProps['showBindingsList'];
   readonly showConvertPalette?: FieldRemapFlowMapperProps['showConvertPalette'];
   readonly emptyDetail?: FieldRemapFlowMapperProps['emptyDetail'];
+  readonly detailPresentation?: FieldRemapFlowMapperProps['detailPresentation'];
+  readonly readOnly?: FieldRemapFlowMapperProps['readOnly'];
   /** When true, show host-chrome demo controls (history + fit view). */
   readonly showHostChromeDemo?: boolean | undefined;
   /** Prefer `browse` for I/O class/field inspection demos. */
@@ -46,6 +48,8 @@ export function SampleFieldRemapDemo({
   showBindingsList,
   showConvertPalette,
   emptyDetail,
+  detailPresentation,
+  readOnly,
   showHostChromeDemo = false,
   ioChrome,
   browseSeedShapes = false,
@@ -89,7 +93,7 @@ export function SampleFieldRemapDemo({
             compact
             type="button"
             data-testid="field-remap-undo"
-            disabled={!historyAvailability.canUndo}
+            disabled={readOnly || !historyAvailability.canUndo}
             onClick={() => historyActionsRef.current?.undo()}
           >
             Undo
@@ -98,7 +102,7 @@ export function SampleFieldRemapDemo({
             compact
             type="button"
             data-testid="field-remap-redo"
-            disabled={!historyAvailability.canRedo}
+            disabled={readOnly || !historyAvailability.canRedo}
             onClick={() => historyActionsRef.current?.redo()}
           >
             Redo
@@ -119,6 +123,8 @@ export function SampleFieldRemapDemo({
         showBindingsList={showBindingsList}
         showConvertPalette={showConvertPalette}
         emptyDetail={emptyDetail}
+        detailPresentation={detailPresentation}
+        readOnly={readOnly}
         onShowMinimapChange={setShowMinimap}
         ioChrome={ioChrome}
         editableShapes={ioChrome === 'browse' ? false : undefined}