@workbench-kit/shell-react 0.0.2-prototype.0.2.32 → 0.0.2-prototype.0.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/shell-react",
-  "version": "0.0.2-prototype.0.2.32",
+  "version": "0.0.2-prototype.0.2.33",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -31,14 +31,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.32",
-    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.32",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.32",
-    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.32",
-    "@workbench-kit/workbench-extension-sdk": "0.0.2-prototype.0.2.32",
-    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.32",
-    "@workbench-kit/react": "0.0.2-prototype.0.2.32",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.32"
+    "@workbench-kit/react": "0.0.2-prototype.0.2.33",
+    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.33",
+    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.33",
+    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.33",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.33",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.33",
+    "@workbench-kit/workbench-extension-sdk": "0.0.2-prototype.0.2.33",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.33"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -19,12 +19,19 @@ export interface FieldRemapChromeLabels {
   readonly convertPaletteAriaLabel: string;
   readonly convertsListAriaLabel: string;
   readonly placeConvert: string;
+  readonly addCombine: string;
+  readonly addSplit: string;
   readonly operatorsTitle: string;
   readonly operatorsDescription: string;
+  readonly addTransform: string;
+  readonly editItems: string;
+  readonly removeBinding: string;
   readonly showMinimap: string;
   readonly hideMinimap: string;
   readonly showHiddenFields: string;
   readonly hideHiddenFields: string;
+  readonly emptyDetailTitle: string;
+  readonly emptyDetailDescription: string;
 }
 
 export const defaultFieldRemapChromeLabels: FieldRemapChromeLabels = {
@@ -35,13 +42,21 @@ export const defaultFieldRemapChromeLabels: FieldRemapChromeLabels = {
   convertPaletteAriaLabel: 'Convert palette',
   convertsListAriaLabel: 'Converts',
   placeConvert: 'Place convert',
+  addCombine: 'Add combine',
+  addSplit: 'Add split',
   operatorsTitle: 'n→m operators',
   operatorsDescription:
     'Create combine (n→1) or split (1→n), then wire ports or edit in the side rail.',
+  addTransform: 'Add convert',
+  editItems: 'Edit items',
+  removeBinding: 'Remove binding',
   showMinimap: 'Show minimap',
   hideMinimap: 'Hide minimap',
   showHiddenFields: 'Show hidden fields',
   hideHiddenFields: 'Hide hidden fields',
+  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.',
 };
 
 /** Stable capability ids for optional `t()` injection (not free prose). */
@@ -52,12 +67,19 @@ export const fieldRemapChromeLabelKeys = {
   convertPaletteAriaLabel: 'fieldRemap.convertPaletteAriaLabel',
   convertsListAriaLabel: 'fieldRemap.convertsListAriaLabel',
   placeConvert: 'fieldRemap.placeConvert',
+  addCombine: 'fieldRemap.addCombine',
+  addSplit: 'fieldRemap.addSplit',
   operatorsTitle: 'fieldRemap.operatorsTitle',
   operatorsDescription: 'fieldRemap.operatorsDescription',
+  addTransform: 'fieldRemap.addTransform',
+  editItems: 'fieldRemap.editItems',
+  removeBinding: 'fieldRemap.removeBinding',
   showMinimap: 'fieldRemap.showMinimap',
   hideMinimap: 'fieldRemap.hideMinimap',
   showHiddenFields: 'fieldRemap.showHiddenFields',
   hideHiddenFields: 'fieldRemap.hideHiddenFields',
+  emptyDetailTitle: 'fieldRemap.emptyDetailTitle',
+  emptyDetailDescription: 'fieldRemap.emptyDetailDescription',
 } as const satisfies Record<keyof FieldRemapChromeLabels, string>;
 
 export function resolveFieldRemapChromeLabels(
@@ -80,11 +102,18 @@ export function resolveFieldRemapChromeLabels(
     convertPaletteAriaLabel: resolve('convertPaletteAriaLabel'),
     convertsListAriaLabel: resolve('convertsListAriaLabel'),
     placeConvert: resolve('placeConvert'),
+    addCombine: resolve('addCombine'),
+    addSplit: resolve('addSplit'),
     operatorsTitle: resolve('operatorsTitle'),
     operatorsDescription: resolve('operatorsDescription'),
+    addTransform: resolve('addTransform'),
+    editItems: resolve('editItems'),
+    removeBinding: resolve('removeBinding'),
     showMinimap: resolve('showMinimap'),
     hideMinimap: resolve('hideMinimap'),
     showHiddenFields: resolve('showHiddenFields'),
     hideHiddenFields: resolve('hideHiddenFields'),
+    emptyDetailTitle: resolve('emptyDetailTitle'),
+    emptyDetailDescription: resolve('emptyDetailDescription'),
   };
 }

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

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
 import { SideBarList, SideBarListItem } from '@workbench-kit/react/layout';
-import { Button } from '@workbench-kit/react/primitives';
+import { IconButton } from '@workbench-kit/react/primitives';
 import type { ValueTransformRegistry } from '@workbench-kit/field-remap';
 
 import { defaultFieldRemapChromeLabels, type FieldRemapChromeLabels } from './chrome-labels.js';
@@ -45,19 +45,20 @@ export function FieldRemapConvertPalette({
       </header>
 
       <div className="workbench-field-remap-convert-palette__place">
-        <Button
+        <IconButton
+          compact
           type="button"
           data-testid="field-remap-place-draft"
           disabled={!selectedTransformId}
+          icon="codicon-add"
+          label={chromeLabels.placeConvert}
           onClick={() => {
             if (!selectedTransformId) {
               return;
             }
             onPlaceDraft(selectedTransformId);
           }}
-        >
-          {chromeLabels.placeConvert}
-        </Button>
+        />
       </div>
 
       <SideBarList
@@ -95,24 +96,24 @@ export function FieldRemapConvertPalette({
           <p>{chromeLabels.operatorsDescription}</p>
           <div className="workbench-field-remap-convert-palette__operator-actions">
             {onAddCombine ? (
-              <Button
+              <IconButton
                 compact
                 type="button"
                 data-testid="field-remap-add-combine"
+                icon="codicon-git-merge"
+                label={chromeLabels.addCombine}
                 onClick={onAddCombine}
-              >
-                Add combine
-              </Button>
+              />
             ) : null}
             {onAddSplit ? (
-              <Button
+              <IconButton
                 compact
                 type="button"
                 data-testid="field-remap-add-split"
+                icon="codicon-split-horizontal"
+                label={chromeLabels.addSplit}
                 onClick={onAddSplit}
-              >
-                Add split
-              </Button>
+              />
             ) : null}
           </div>
         </div>

package/src/field-remap/demo.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, type JSX } from 'react';
 import { Button } from '@workbench-kit/react/primitives';
 
 import type { FieldRemapChromeLabels, FieldRemapTranslate } from './chrome-labels.js';
-import type { FieldRemapFlowActions } from './flow.js';
+import type { FieldRemapFlowActions, FieldRemapFlowMapperProps } from './flow.js';
 import type { FieldRemapIoChrome } from './io-class-browse.js';
 import { FieldRemapPanel } from './panel.js';
 import {
@@ -15,6 +15,12 @@ export interface SampleFieldRemapDemoProps {
   readonly sampleId?: FieldRemapSampleId | string | undefined;
   /** Forwarded to Flow mapper (default true). */
   readonly showMinimap?: boolean | undefined;
+  /** Forwarded Flow chrome preset. */
+  readonly chrome?: FieldRemapFlowMapperProps['chrome'];
+  readonly showFlowHint?: FieldRemapFlowMapperProps['showFlowHint'];
+  readonly showBindingsList?: FieldRemapFlowMapperProps['showBindingsList'];
+  readonly showConvertPalette?: FieldRemapFlowMapperProps['showConvertPalette'];
+  readonly emptyDetail?: FieldRemapFlowMapperProps['emptyDetail'];
   /** When true, show host-chrome demo controls (minimap toggle + fit view). */
   readonly showHostChromeDemo?: boolean | undefined;
   /** Prefer `browse` for I/O class/field inspection demos. */
@@ -31,6 +37,11 @@ export interface SampleFieldRemapDemoProps {
 export function SampleFieldRemapDemo({
   sampleId = 'nested-ab',
   showMinimap: showMinimapProp,
+  chrome,
+  showFlowHint,
+  showBindingsList,
+  showConvertPalette,
+  emptyDetail,
   showHostChromeDemo = false,
   ioChrome,
   browseSeedShapes = false,
@@ -76,6 +87,11 @@ export function SampleFieldRemapDemo({
         key={`${sample.id}:${ioChrome ?? 'default'}:${browseSeedShapes ? 'seed' : 'plain'}`}
         sample={sample}
         showMinimap={showMinimap}
+        chrome={chrome}
+        showFlowHint={showFlowHint}
+        showBindingsList={showBindingsList}
+        showConvertPalette={showConvertPalette}
+        emptyDetail={emptyDetail}
         onShowMinimapChange={setShowMinimap}
         ioChrome={ioChrome}
         editableShapes={ioChrome === 'browse' ? false : undefined}

package/src/field-remap/detail-panel.tsx

@@ -45,6 +45,8 @@ export interface FieldRemapDetailPanelProps {
   readonly onDiscardDraft?: ((localId: string) => void) | undefined;
   readonly operators?: readonly MappingOperator[] | undefined;
   readonly onOperatorsChange?: ((operators: readonly MappingOperator[]) => void) | undefined;
+  readonly emptyDetailTitle?: string | undefined;
+  readonly emptyDetailDescription?: string | undefined;
 }
 
 function fieldLabel(
@@ -77,6 +79,8 @@ export function FieldRemapDetailPanel({
   onDiscardDraft,
   operators = [],
   onOperatorsChange,
+  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.',
 }: FieldRemapDetailPanelProps): JSX.Element | null {
   const edge = useMemo(() => {
     if (!selection || (selection.kind !== 'edge' && selection.kind !== 'transformStep')) {
@@ -113,11 +117,8 @@ export function FieldRemapDetailPanel({
         data-testid="field-remap-detail"
         aria-label="Binding details"
       >
-        <h4>Start with a convert</h4>
-        <p data-testid="field-remap-detail-empty-hint">
-          Use the Convert palette to place a convert, then wire source → draft → target. Or select
-          an existing binding / convert note on the canvas.
-        </p>
+        <h4>{emptyDetailTitle}</h4>
+        <p data-testid="field-remap-detail-empty-hint">{emptyDetailDescription}</p>
       </aside>
     );
   }

package/src/field-remap/flow.tsx

@@ -1,4 +1,5 @@
 import {
+  Children,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -9,6 +10,7 @@ import {
   type KeyboardEvent,
   type MouseEvent,
   type Ref,
+  type ReactNode,
 } from 'react';
 import {
   Background,
@@ -28,7 +30,8 @@ import {
   type NodeProps,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { Badge, Button } from '@workbench-kit/react/primitives';
+import { Badge, IconButton } from '@workbench-kit/react/primitives';
+import { SplitView } from '@workbench-kit/react/workbench/split-view';
 import {
   MAX_TRANSFORM_CHAIN,
   type MappingEdge,
@@ -323,6 +326,22 @@ export interface FieldRemapFlowMapperProps {
   readonly edges: readonly MappingEdge[];
   readonly transforms: ValueTransformRegistry;
   readonly onEdgesChange: (edges: readonly MappingEdge[]) => void;
+  /**
+   * `card` preserves the demo chrome. `embed` omits the flow hint and binding list;
+   * explicit `show*` props below take precedence.
+   */
+  readonly chrome?: 'card' | 'embed' | undefined;
+  /** Show the empty-selection detail hint, or collapse that rail until a selection exists. */
+  readonly emptyDetail?: 'hint' | 'collapse' | undefined;
+  /** Show the convert-first hint. Defaults to true for `card`, false for `embed`. */
+  readonly showFlowHint?: boolean | undefined;
+  /** Show the bottom binding list. Defaults to true for `card`, false for `embed`. */
+  readonly showBindingsList?: boolean | undefined;
+  /**
+   * Mount the primary Convert palette. Defaults to true for both chrome modes; when false,
+   * the workspace expands without leaving an empty grid track.
+   */
+  readonly showConvertPalette?: boolean | undefined;
   /** Document v2 n→m operators (display + authoring when onOperatorsChange is set). */
   readonly operators?: readonly MappingOperator[] | undefined;
   readonly onOperatorsChange?: ((operators: readonly MappingOperator[]) => void) | undefined;
@@ -380,12 +399,87 @@ export interface FieldRemapFlowMapperProps {
   readonly t?: FieldRemapTranslate | undefined;
 }
 
+interface FieldRemapSplitWorkspaceProps {
+  readonly children: ReactNode;
+  readonly layout: 'wide' | 'medium' | 'narrow';
+  readonly showConvertPalette: boolean;
+  readonly showDetail: boolean;
+  readonly surface: 'binding' | 'convert-note' | 'draft-convert' | 'operator';
+}
+
+/**
+ * The Flow rails are deliberately composed from the shared SplitView primitive so keyboard and
+ * pointer resizing stay consistent with the rest of the workbench. At narrower host widths the
+ * palette and/or detail move above or below the canvas rather than squeezing its usable width.
+ */
+function FieldRemapSplitWorkspace({
+  children,
+  layout,
+  showConvertPalette,
+  showDetail,
+  surface,
+}: FieldRemapSplitWorkspaceProps): JSX.Element {
+  const [palette, canvas, detail] = Children.toArray(children);
+  const isNarrow = layout === 'narrow';
+  const canvasWithDetail = showDetail ? (
+    <SplitView
+      className="workbench-field-remap-flow__canvas-detail-split"
+      defaultSecondarySizePx={isNarrow ? 220 : 320}
+      layoutMode="secondary-fixed"
+      maxSecondarySizePx={isNarrow ? 320 : 480}
+      minPrimarySizePx={isNarrow ? 200 : 280}
+      minSecondarySizePx={isNarrow ? 160 : 256}
+      orientation={isNarrow ? 'vertical' : 'horizontal'}
+      primary={canvas}
+      secondary={detail}
+    />
+  ) : (
+    canvas
+  );
+
+  const content = showConvertPalette ? (
+    <SplitView
+      className="workbench-field-remap-flow__palette-split"
+      defaultPrimarySizePx={isNarrow ? 192 : 240}
+      maxPrimarySizePx={isNarrow ? 288 : 320}
+      minPrimarySizePx={isNarrow ? 160 : 192}
+      minSecondarySizePx={isNarrow ? 200 : 280}
+      orientation={layout === 'wide' ? 'horizontal' : 'vertical'}
+      primary={palette}
+      primarySizeUnit="pixels"
+      secondary={canvasWithDetail}
+    />
+  ) : (
+    canvasWithDetail
+  );
+
+  return (
+    <div
+      className={
+        showConvertPalette
+          ? 'workbench-field-remap-flow__workspace workbench-field-remap-flow__workspace--split'
+          : 'workbench-field-remap-flow__workspace workbench-field-remap-flow__workspace--split workbench-field-remap-flow__workspace--without-palette'
+      }
+      data-layout={layout}
+      data-surface={surface}
+      data-testid="field-remap-workspace"
+    >
+      {content}
+    </div>
+  );
+}
+
 function FieldRemapFlowCanvas({
   sources,
   targets,
   edges,
   transforms,
   onEdgesChange,
+  chrome = 'card',
+  emptyDetail: emptyDetailProp,
+  showFlowHint: showFlowHintProp,
+  showBindingsList: showBindingsListProp,
+  showConvertPalette = true,
   operators = [],
   onOperatorsChange,
   sourceTitle,
@@ -407,6 +501,11 @@ function FieldRemapFlowCanvas({
     () => resolveFieldRemapChromeLabels(labelOverrides, t),
     [labelOverrides, t],
   );
+  const showFlowHint = showFlowHintProp ?? chrome !== 'embed';
+  const showBindingsList = showBindingsListProp ?? chrome !== 'embed';
+  const emptyDetail = emptyDetailProp ?? (chrome === 'embed' ? 'collapse' : 'hint');
+  const mapperRef = useRef<HTMLDivElement>(null);
+  const [workspaceLayout, setWorkspaceLayout] = useState<'wide' | 'medium' | 'narrow'>('wide');
   const [internalSelection, setInternalSelection] = useState<FieldRemapSelection>(null);
   const selection = selectionProp !== undefined ? selectionProp : internalSelection;
   const setSelection = onSelectionChangeProp ?? setInternalSelection;
@@ -417,6 +516,29 @@ function FieldRemapFlowCanvas({
   });
   const transformRegistrySignature = createTransformRegistrySignature(transforms);
 
+  useEffect(() => {
+    const element = mapperRef.current;
+    if (!element || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    const updateLayout = () => {
+      const remSize = Number.parseFloat(getComputedStyle(element).fontSize) || 16;
+      const width = element.getBoundingClientRect().width;
+      if (width <= 0) {
+        return;
+      }
+      const nextLayout =
+        width <= 60 * remSize ? 'narrow' : width <= 68.75 * remSize ? 'medium' : 'wide';
+      setWorkspaceLayout((current) => (current === nextLayout ? current : nextLayout));
+    };
+
+    updateLayout();
+    const observer = new ResizeObserver(updateLayout);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
   const graph = useMemo(
     () =>
       mappingToFlowGraph({
@@ -746,26 +868,32 @@ function FieldRemapFlowCanvas({
 
   return (
     <div
+      ref={mapperRef}
       className="workbench-field-remap-flow"
       data-testid="field-remap-mapper"
+      data-chrome={chrome}
+      data-flow-hint={showFlowHint ? 'on' : 'off'}
+      data-bindings-list={showBindingsList ? 'on' : 'off'}
+      data-convert-palette={showConvertPalette ? 'on' : 'off'}
+      data-empty-detail={emptyDetail}
       data-minimap={showMinimap ? 'on' : 'off'}
       data-hidden-fields={includeHidden ? 'on' : 'off'}
       onKeyDown={onKeyDown}
     >
-      <p className="workbench-field-remap-mapper__hint" data-testid="field-remap-hint">
-        Convert-first: pick a convert in the palette, place it, then wire source → draft → target.
-        Select a convert note for the Convert editor; select a binding for lighter mapping detail.
-        Use n→m actions to author combine/split. Alt-click removes a convert step or operator.
-        Escape clears selection and unfinished drafts.
-      </p>
+      {showFlowHint ? (
+        <p className="workbench-field-remap-mapper__hint" data-testid="field-remap-hint">
+          Convert-first: pick a convert in the palette, place it, then wire source → draft → target.
+          Select a convert note for the Convert editor; select a binding for lighter mapping detail.
+          Use n→m actions to author combine/split. Alt-click removes a convert step or operator.
+          Escape clears selection and unfinished drafts.
+        </p>
+      ) : null}
 
-      <div
-        className={
-          selection?.kind === 'transformStep'
-            ? 'workbench-field-remap-flow__workspace workbench-field-remap-flow__workspace--convert'
-            : 'workbench-field-remap-flow__workspace'
-        }
-        data-surface={
+      <FieldRemapSplitWorkspace
+        layout={workspaceLayout}
+        showConvertPalette={showConvertPalette}
+        showDetail={emptyDetail === 'hint' || selection !== null}
+        surface={
           selection?.kind === 'transformStep'
             ? 'convert-note'
             : selection?.kind === 'draft'
@@ -775,31 +903,35 @@ function FieldRemapFlowCanvas({
                 : 'binding'
         }
       >
-        <FieldRemapConvertPalette
-          transforms={transforms}
-          selectedTransformId={placeTransformId}
-          onSelectedTransformIdChange={setPlaceTransformId}
-          onPlaceDraft={placeDraft}
-          chromeLabels={chromeLabels}
-          onAddCombine={
-            onOperatorsChange
-              ? () => {
-                  const next = createCombineOperator();
-                  onOperatorsChange([...operators, next]);
-                  setSelection({ kind: 'operator', operatorId: next.id });
-                }
-              : undefined
-          }
-          onAddSplit={
-            onOperatorsChange
-              ? () => {
-                  const next = createSplitOperator();
-                  onOperatorsChange([...operators, next]);
-                  setSelection({ kind: 'operator', operatorId: next.id });
-                }
-              : undefined
-          }
-        />
+        <>
+          {showConvertPalette ? (
+            <FieldRemapConvertPalette
+              transforms={transforms}
+              selectedTransformId={placeTransformId}
+              onSelectedTransformIdChange={setPlaceTransformId}
+              onPlaceDraft={placeDraft}
+              chromeLabels={chromeLabels}
+              onAddCombine={
+                onOperatorsChange
+                  ? () => {
+                      const next = createCombineOperator();
+                      onOperatorsChange([...operators, next]);
+                      setSelection({ kind: 'operator', operatorId: next.id });
+                    }
+                  : undefined
+              }
+              onAddSplit={
+                onOperatorsChange
+                  ? () => {
+                      const next = createSplitOperator();
+                      onOperatorsChange([...operators, next]);
+                      setSelection({ kind: 'operator', operatorId: next.id });
+                    }
+                  : undefined
+              }
+            />
+          ) : null}
+        </>
 
         <div className="workbench-field-remap-flow__canvas" data-testid="field-remap-flow">
           <ReactFlow
@@ -930,130 +1062,140 @@ function FieldRemapFlowCanvas({
           </ReactFlow>
         </div>
 
-        <FieldRemapDetailPanel
-          selection={selection}
-          edges={edges}
-          sources={sources}
-          targets={targets}
-          transforms={transforms}
-          onEdgesChange={onEdgesChange}
-          onSelectionChange={setSelection}
-          drafts={drafts}
-          onDiscardDraft={(localId) => {
-            setDrafts((current) => current.filter((item) => item.localId !== localId));
-          }}
-          operators={operators}
-          onOperatorsChange={onOperatorsChange}
-        />
-      </div>
+        <>
+          {emptyDetail === 'hint' || selection !== null ? (
+            <FieldRemapDetailPanel
+              selection={selection}
+              edges={edges}
+              sources={sources}
+              targets={targets}
+              transforms={transforms}
+              onEdgesChange={onEdgesChange}
+              onSelectionChange={setSelection}
+              drafts={drafts}
+              onDiscardDraft={(localId) => {
+                setDrafts((current) => current.filter((item) => item.localId !== localId));
+              }}
+              operators={operators}
+              onOperatorsChange={onOperatorsChange}
+              emptyDetailTitle={chromeLabels.emptyDetailTitle}
+              emptyDetailDescription={chromeLabels.emptyDetailDescription}
+            />
+          ) : null}
+        </>
+      </FieldRemapSplitWorkspace>
 
-      <div className="workbench-field-remap-flow__bindings" data-testid="field-remap-edges">
-        <h4>{chromeLabels.bindingsTitle}</h4>
-        <ul>
-          {edges.map((edge) => {
-            const portTypes = edgePortTypes(edge, sources, targets);
-            const appendCatalog = listCompatibleTransforms({
-              registry: transforms,
-              edge,
-              stepIndex: edge.transformIds?.length ?? 0,
-              sourceType: portTypes.sourceType,
-              targetType: portTypes.targetType,
-              mode: 'append',
-            });
-            const defaultAddId = appendCatalog[0]?.id;
-            const listContext = canEditListContext(edge, sources, targets);
-            const selected =
-              (selection?.kind === 'edge' || selection?.kind === 'transformStep') &&
-              selection.edgeId === edge.id;
+      {showBindingsList ? (
+        <div className="workbench-field-remap-flow__bindings" data-testid="field-remap-edges">
+          <h4>{chromeLabels.bindingsTitle}</h4>
+          <ul>
+            {edges.map((edge) => {
+              const portTypes = edgePortTypes(edge, sources, targets);
+              const appendCatalog = listCompatibleTransforms({
+                registry: transforms,
+                edge,
+                stepIndex: edge.transformIds?.length ?? 0,
+                sourceType: portTypes.sourceType,
+                targetType: portTypes.targetType,
+                mode: 'append',
+              });
+              const defaultAddId = appendCatalog[0]?.id;
+              const listContext = canEditListContext(edge, sources, targets);
+              const selected =
+                (selection?.kind === 'edge' || selection?.kind === 'transformStep') &&
+                selection.edgeId === edge.id;
 
-            return (
-              <li
-                key={edge.id}
-                className={selected ? 'is-selected' : undefined}
-                data-testid={`field-remap-lane-${edge.id}`}
-              >
-                <button
-                  type="button"
-                  className="workbench-field-remap-flow__binding-select"
-                  data-testid={`field-remap-select-edge-${edge.id}`}
-                  onClick={() => setSelection({ kind: 'edge', edgeId: edge.id })}
+              return (
+                <li
+                  key={edge.id}
+                  className={selected ? 'is-selected' : undefined}
+                  data-testid={`field-remap-lane-${edge.id}`}
                 >
-                  <code>
-                    {edge.sourceFieldId} →{' '}
-                    {(edge.transformIds ?? []).length > 0
-                      ? `${(edge.transformIds ?? []).join(' → ')} → `
-                      : ''}
-                    {edge.targetSlotId}
-                    {edge.itemEdges ? ` · ${edge.itemEdges.length} item fields` : ''}
-                  </code>
-                </button>
-                <span className="workbench-field-remap-mapper__edge-actions">
-                  {(edge.transformIds?.length ?? 0) < MAX_TRANSFORM_CHAIN && defaultAddId ? (
-                    <Button
-                      compact
-                      type="button"
-                      data-testid={`field-remap-add-node-${edge.id}`}
-                      onClick={() => {
-                        const next = addTransformStepToEdge(edge, defaultAddId, {
-                          registry: transforms,
-                          sourceType: portTypes.sourceType,
-                          targetType: portTypes.targetType,
-                        });
-                        if (!next) {
-                          return;
-                        }
-                        onEdgesChange(edges.map((item) => (item.id === edge.id ? next : item)));
-                        setSelection({
-                          kind: 'transformStep',
-                          edgeId: edge.id,
-                          stepIndex: (next.transformIds?.length ?? 1) - 1,
-                        });
-                      }}
-                    >
-                      + node
-                    </Button>
-                  ) : null}
-                  {listContext ? (
-                    <Button
+                  <button
+                    type="button"
+                    className="workbench-field-remap-flow__binding-select"
+                    data-testid={`field-remap-select-edge-${edge.id}`}
+                    onClick={() => setSelection({ kind: 'edge', edgeId: edge.id })}
+                  >
+                    <code>
+                      {edge.sourceFieldId} →{' '}
+                      {(edge.transformIds ?? []).length > 0
+                        ? `${(edge.transformIds ?? []).join(' → ')} → `
+                        : ''}
+                      {edge.targetSlotId}
+                      {edge.itemEdges ? ` · ${edge.itemEdges.length} item fields` : ''}
+                    </code>
+                  </button>
+                  <span className="workbench-field-remap-mapper__edge-actions">
+                    {(edge.transformIds?.length ?? 0) < MAX_TRANSFORM_CHAIN && defaultAddId ? (
+                      <IconButton
+                        compact
+                        type="button"
+                        data-testid={`field-remap-add-node-${edge.id}`}
+                        icon="codicon-add"
+                        label={chromeLabels.addTransform}
+                        onClick={() => {
+                          const next = addTransformStepToEdge(edge, defaultAddId, {
+                            registry: transforms,
+                            sourceType: portTypes.sourceType,
+                            targetType: portTypes.targetType,
+                          });
+                          if (!next) {
+                            return;
+                          }
+                          onEdgesChange(edges.map((item) => (item.id === edge.id ? next : item)));
+                          setSelection({
+                            kind: 'transformStep',
+                            edgeId: edge.id,
+                            stepIndex: (next.transformIds?.length ?? 1) - 1,
+                          });
+                        }}
+                      />
+                    ) : null}
+                    {listContext ? (
+                      <IconButton
+                        compact
+                        type="button"
+                        data-testid={`field-remap-edit-items-${edge.id}`}
+                        icon="codicon-edit"
+                        label={chromeLabels.editItems}
+                        onClick={() => {
+                          if (!edge.itemEdges) {
+                            onEdgesChange(
+                              edges.map((item) =>
+                                item.id === edge.id ? enableListContextOnEdge(item) : item,
+                              ),
+                            );
+                          }
+                          setSelection({ kind: 'edge', edgeId: edge.id });
+                        }}
+                      />
+                    ) : null}
+                    <IconButton
                       compact
                       type="button"
-                      data-testid={`field-remap-edit-items-${edge.id}`}
+                      data-testid={`field-remap-remove-edge-${edge.id}`}
+                      icon="codicon-trash"
+                      label={chromeLabels.removeBinding}
+                      variant="danger"
                       onClick={() => {
-                        if (!edge.itemEdges) {
-                          onEdgesChange(
-                            edges.map((item) =>
-                              item.id === edge.id ? enableListContextOnEdge(item) : item,
-                            ),
-                          );
+                        onEdgesChange(edges.filter((item) => item.id !== edge.id));
+                        if (
+                          selection &&
+                          (selection.kind === 'edge' || selection.kind === 'transformStep') &&
+                          selection.edgeId === edge.id
+                        ) {
+                          setSelection(null);
                         }
-                        setSelection({ kind: 'edge', edgeId: edge.id });
                       }}
-                    >
-                      Edit items
-                    </Button>
-                  ) : null}
-                  <Button
-                    compact
-                    type="button"
-                    onClick={() => {
-                      onEdgesChange(edges.filter((item) => item.id !== edge.id));
-                      if (
-                        selection &&
-                        (selection.kind === 'edge' || selection.kind === 'transformStep') &&
-                        selection.edgeId === edge.id
-                      ) {
-                        setSelection(null);
-                      }
-                    }}
-                  >
-                    Remove
-                  </Button>
-                </span>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+                    />
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ) : null}
     </div>
   );
 }

package/src/field-remap/panel.tsx

@@ -83,6 +83,13 @@ export interface FieldRemapPanelProps {
   readonly targetShape?: unknown;
   /** Forwarded to {@link FieldRemapFlowMapper} (default true). */
   readonly showMinimap?: boolean | undefined;
+  /** Forwarded Flow chrome preset. `embed` hides the hint and binding list by default. */
+  readonly chrome?: FieldRemapFlowMapperProps['chrome'];
+  /** Explicit Flow chrome overrides take precedence over {@link FieldRemapPanelProps.chrome}. */
+  readonly showFlowHint?: FieldRemapFlowMapperProps['showFlowHint'];
+  readonly showBindingsList?: FieldRemapFlowMapperProps['showBindingsList'];
+  readonly showConvertPalette?: FieldRemapFlowMapperProps['showConvertPalette'];
+  readonly emptyDetail?: FieldRemapFlowMapperProps['emptyDetail'];
   /** Forwarded to {@link FieldRemapFlowMapper} Controls MiniMap toggle. */
   readonly onShowMinimapChange?: FieldRemapFlowMapperProps['onShowMinimapChange'];
   readonly onPaneContextMenu?: FieldRemapFlowMapperProps['onPaneContextMenu'];
@@ -138,6 +145,11 @@ export function FieldRemapPanel({
   sourceSample: sourceSampleProp,
   targetShape: targetShapeProp,
   showMinimap,
+  chrome,
+  showFlowHint,
+  showBindingsList,
+  showConvertPalette,
+  emptyDetail,
   onShowMinimapChange,
   onPaneContextMenu,
   onNodeContextMenu,
@@ -420,6 +432,11 @@ export function FieldRemapPanel({
         sourceTitle={sample.sourceLabel}
         targetTitle={sample.targetLabel}
         showMinimap={showMinimap}
+        chrome={chrome}
+        showFlowHint={showFlowHint}
+        showBindingsList={showBindingsList}
+        showConvertPalette={showConvertPalette}
+        emptyDetail={emptyDetail}
         onShowMinimapChange={onShowMinimapChange}
         includeHidden={includeHidden}
         onIncludeHiddenChange={setIncludeHidden}

package/src/field-remap/view.css

@@ -301,6 +301,8 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  container-name: field-remap-flow;
+  container-type: inline-size;
 }
 
 .workbench-field-remap-flow__workspace {
@@ -311,7 +313,74 @@
   align-items: stretch;
 }
 
-@media (max-width: 1100px) {
+.workbench-field-remap-flow__workspace--without-palette {
+  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
+}
+
+.workbench-field-remap-flow__workspace--split {
+  display: flex;
+  height: min(40rem, 70vh);
+  min-height: 26rem;
+  gap: 0;
+}
+
+.workbench-field-remap-flow__workspace--split > .ui-workbench-split-view,
+.workbench-field-remap-flow__workspace--split
+  .ui-workbench-split-view__secondary
+  > .ui-workbench-split-view {
+  width: 100%;
+  height: 100%;
+}
+
+.workbench-field-remap-flow__workspace--split .workbench-field-remap-flow__canvas {
+  height: auto;
+  min-height: 0;
+}
+
+/* Embed hosts own the outer pane. Keep Flow rails flat and separate them with dividers only. */
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-flow__workspace {
+  gap: 0;
+}
+
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-convert-palette,
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-flow__canvas,
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-detail,
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-convert-note {
+  border-radius: 0;
+}
+
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-convert-palette {
+  border: 0;
+  border-inline-end: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-flow__canvas {
+  border: 0;
+}
+
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-detail,
+.workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-convert-note {
+  border: 0;
+  border-inline-start: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+/* SplitView supplies the shared rail divider in embed mode, avoiding a doubled border. */
+.workbench-field-remap-flow[data-chrome='embed']
+  .workbench-field-remap-flow__workspace--split
+  .workbench-field-remap-convert-palette,
+.workbench-field-remap-flow[data-chrome='embed']
+  .workbench-field-remap-flow__workspace--split
+  .workbench-field-remap-flow__canvas,
+.workbench-field-remap-flow[data-chrome='embed']
+  .workbench-field-remap-flow__workspace--split
+  .workbench-field-remap-detail,
+.workbench-field-remap-flow[data-chrome='embed']
+  .workbench-field-remap-flow__workspace--split
+  .workbench-field-remap-convert-note {
+  border: 0;
+}
+
+@container field-remap-flow (max-width: 68.75rem) {
   .workbench-field-remap-flow__workspace {
     grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
   }
@@ -319,12 +388,23 @@
   .workbench-field-remap-convert-palette {
     grid-column: 1 / -1;
   }
+
+  .workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-convert-palette {
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--vscode-panel-border, var(--color-border));
+  }
 }
 
-@media (max-width: 960px) {
+@container field-remap-flow (max-width: 60rem) {
   .workbench-field-remap-flow__workspace {
     grid-template-columns: 1fr;
   }
+
+  .workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-detail,
+  .workbench-field-remap-flow[data-chrome='embed'] .workbench-field-remap-convert-note {
+    border-inline-start: 0;
+    border-block-start: 1px solid var(--vscode-panel-border, var(--color-border));
+  }
 }
 
 .workbench-field-remap-convert-palette {