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

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,
@@ -81,6 +84,7 @@ import {
   type FieldRemapDraftTransform,
   type FieldRemapSelection,
 } from './flow-ops.js';
+import { FieldRemapPreviewRail, type FieldRemapPreviewState } from './preview.js';
 import './view.css';
 
 function TypeBadge({ dataType }: { readonly dataType?: string }): JSX.Element | null {
@@ -323,6 +327,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;
@@ -330,6 +350,10 @@ export interface FieldRemapFlowMapperProps {
   readonly targetTitle?: string | undefined;
   readonly selection?: FieldRemapSelection | undefined;
   readonly onSelectionChange?: ((next: FieldRemapSelection) => void) | undefined;
+  /** Precomputed runtime-only preview. Flow never evaluates mappings itself. */
+  readonly preview?: FieldRemapPreviewState;
+  /** Explicitly hide an injected preview without reserving a splitter track. */
+  readonly showPreview?: boolean;
   /**
    * When false, MiniMap is not mounted (not CSS-hidden). Defaults to true for
    * backward compatibility with existing samples.
@@ -380,18 +404,117 @@ 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 [paletteSizeByLayout, setPaletteSizeByLayout] = useState({
+    wide: 240,
+    medium: 240,
+    narrow: 192,
+  });
+  const [detailSizeByLayout, setDetailSizeByLayout] = useState({
+    wide: 320,
+    medium: 320,
+    narrow: 220,
+  });
+  const paletteSizePx = paletteSizeByLayout[layout];
+  const detailSizePx = detailSizeByLayout[layout];
+  const canvasWithDetail = (
+    <SplitView
+      className={
+        showDetail
+          ? 'workbench-field-remap-flow__canvas-detail-split'
+          : 'workbench-field-remap-flow__canvas-detail-split ui-workbench-split-view--secondary-collapsed'
+      }
+      layoutMode="secondary-fixed"
+      maxSecondarySizePx={isNarrow ? 320 : 480}
+      minPrimarySizePx={isNarrow ? 200 : 280}
+      minSecondarySizePx={isNarrow ? 160 : 256}
+      onSecondarySizePxChange={(nextSize) => {
+        setDetailSizeByLayout((current) => ({ ...current, [layout]: nextSize }));
+      }}
+      orientation={isNarrow ? 'vertical' : 'horizontal'}
+      primary={canvas}
+      secondary={detail}
+      secondarySizePx={detailSizePx}
+    />
+  );
+
+  const content = (
+    <SplitView
+      className={
+        showConvertPalette
+          ? 'workbench-field-remap-flow__palette-split'
+          : 'workbench-field-remap-flow__palette-split ui-workbench-split-view--primary-collapsed'
+      }
+      maxPrimarySizePx={isNarrow ? 288 : 320}
+      minPrimarySizePx={isNarrow ? 160 : 192}
+      minSecondarySizePx={isNarrow ? 200 : 280}
+      onPrimarySizePxChange={(nextSize) => {
+        setPaletteSizeByLayout((current) => ({ ...current, [layout]: nextSize }));
+      }}
+      orientation={layout === 'wide' ? 'horizontal' : 'vertical'}
+      primary={palette}
+      primarySizePx={paletteSizePx}
+      primarySizeUnit="pixels"
+      secondary={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,
   targetTitle,
   selection: selectionProp,
   onSelectionChange: onSelectionChangeProp,
+  preview,
+  showPreview = true,
   showMinimap = true,
   onShowMinimapChange,
   includeHidden = false,
@@ -407,9 +530,15 @@ 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;
+  const previewVisible = showPreview && preview !== undefined && preview.status !== 'unavailable';
   const [drafts, setDrafts] = useState<readonly FieldRemapDraftTransform[]>([]);
   const [placeTransformId, setPlaceTransformId] = useState(() => {
     const first = transforms.list().find((definition) => definition.id !== 'identity');
@@ -417,6 +546,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 +898,33 @@ 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'}
+      data-preview={previewVisible ? '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 || previewVisible}
+        surface={
           selection?.kind === 'transformStep'
             ? 'convert-note'
             : selection?.kind === 'draft'
@@ -775,31 +934,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 +1093,153 @@ 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>
+        <div className="workbench-field-remap-flow__side-rail">
+          {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}
+          {previewVisible && preview ? (
+            <FieldRemapPreviewRail
+              preview={preview}
+              selection={selection}
+              edges={edges}
+              operatorExists={
+                selection?.kind === 'operator'
+                  ? operators.some((operator) => operator.id === selection.operatorId)
+                  : false
+              }
+              labels={chromeLabels}
+            />
+          ) : null}
+        </div>
+      </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>
   );
 }