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

package/src/field-remap/demo.tsx

@@ -4,7 +4,11 @@ import { Button } from '@workbench-kit/react/primitives';
 import type { FieldRemapChromeLabels, FieldRemapTranslate } from './chrome-labels.js';
 import type { FieldRemapFlowActions, FieldRemapFlowMapperProps } from './flow.js';
 import type { FieldRemapIoChrome } from './io-class-browse.js';
-import { FieldRemapPanel } from './panel.js';
+import {
+  FieldRemapPanel,
+  type FieldRemapHistoryActions,
+  type FieldRemapHistoryAvailability,
+} from './panel.js';
 import {
   getFieldRemapBrowseDemoShapes,
   getFieldRemapSample,
@@ -21,7 +25,7 @@ export interface SampleFieldRemapDemoProps {
   readonly showBindingsList?: FieldRemapFlowMapperProps['showBindingsList'];
   readonly showConvertPalette?: FieldRemapFlowMapperProps['showConvertPalette'];
   readonly emptyDetail?: FieldRemapFlowMapperProps['emptyDetail'];
-  /** When true, show host-chrome demo controls (minimap toggle + fit view). */
+  /** When true, show host-chrome demo controls (history + fit view). */
   readonly showHostChromeDemo?: boolean | undefined;
   /** Prefer `browse` for I/O class/field inspection demos. */
   readonly ioChrome?: FieldRemapIoChrome | undefined;
@@ -51,7 +55,12 @@ export function SampleFieldRemapDemo({
   const sample = getFieldRemapSample(sampleId);
   const browseShapes = browseSeedShapes ? getFieldRemapBrowseDemoShapes() : null;
   const flowActionsRef = useRef<FieldRemapFlowActions | null>(null);
+  const historyActionsRef = useRef<FieldRemapHistoryActions | null>(null);
   const [showMinimap, setShowMinimap] = useState(showMinimapProp ?? true);
+  const [historyAvailability, setHistoryAvailability] = useState<FieldRemapHistoryAvailability>({
+    canUndo: false,
+    canRedo: false,
+  });
   const [lastPaneMenu, setLastPaneMenu] = useState<string | null>(null);
 
   useEffect(() => {
@@ -76,6 +85,24 @@ export function SampleFieldRemapDemo({
           >
             Fit view
           </Button>
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-undo"
+            disabled={!historyAvailability.canUndo}
+            onClick={() => historyActionsRef.current?.undo()}
+          >
+            Undo
+          </Button>
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-redo"
+            disabled={!historyAvailability.canRedo}
+            onClick={() => historyActionsRef.current?.redo()}
+          >
+            Redo
+          </Button>
           {lastPaneMenu ? (
             <span data-testid="field-remap-pane-menu-log" role="status">
               Pane menu: {lastPaneMenu}
@@ -100,6 +127,8 @@ export function SampleFieldRemapDemo({
         labels={labels}
         t={t}
         flowActionsRef={showHostChromeDemo ? flowActionsRef : undefined}
+        historyActionsRef={showHostChromeDemo ? historyActionsRef : undefined}
+        onHistoryAvailabilityChange={showHostChromeDemo ? setHistoryAvailability : undefined}
         onPaneContextMenu={
           showHostChromeDemo
             ? (event) => {

package/src/field-remap/flow.tsx

@@ -84,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 {
@@ -349,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.
@@ -421,36 +426,58 @@ function FieldRemapSplitWorkspace({
 }: FieldRemapSplitWorkspaceProps): JSX.Element {
   const [palette, canvas, detail] = Children.toArray(children);
   const isNarrow = layout === 'narrow';
-  const canvasWithDetail = showDetail ? (
+  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="workbench-field-remap-flow__canvas-detail-split"
-      defaultSecondarySizePx={isNarrow ? 220 : 320}
+      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}
     />
-  ) : (
-    canvas
   );
 
-  const content = showConvertPalette ? (
+  const content = (
     <SplitView
-      className="workbench-field-remap-flow__palette-split"
-      defaultPrimarySizePx={isNarrow ? 192 : 240}
+      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}
     />
-  ) : (
-    canvasWithDetail
   );
 
   return (
@@ -486,6 +513,8 @@ function FieldRemapFlowCanvas({
   targetTitle,
   selection: selectionProp,
   onSelectionChange: onSelectionChangeProp,
+  preview,
+  showPreview = true,
   showMinimap = true,
   onShowMinimapChange,
   includeHidden = false,
@@ -509,6 +538,7 @@ function FieldRemapFlowCanvas({
   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');
@@ -878,6 +908,7 @@ function FieldRemapFlowCanvas({
       data-empty-detail={emptyDetail}
       data-minimap={showMinimap ? 'on' : 'off'}
       data-hidden-fields={includeHidden ? 'on' : 'off'}
+      data-preview={previewVisible ? 'on' : 'off'}
       onKeyDown={onKeyDown}
     >
       {showFlowHint ? (
@@ -892,7 +923,7 @@ function FieldRemapFlowCanvas({
       <FieldRemapSplitWorkspace
         layout={workspaceLayout}
         showConvertPalette={showConvertPalette}
-        showDetail={emptyDetail === 'hint' || selection !== null}
+        showDetail={emptyDetail === 'hint' || selection !== null || previewVisible}
         surface={
           selection?.kind === 'transformStep'
             ? 'convert-note'
@@ -1062,7 +1093,7 @@ function FieldRemapFlowCanvas({
           </ReactFlow>
         </div>
 
-        <>
+        <div className="workbench-field-remap-flow__side-rail">
           {emptyDetail === 'hint' || selection !== null ? (
             <FieldRemapDetailPanel
               selection={selection}
@@ -1082,7 +1113,20 @@ function FieldRemapFlowCanvas({
               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>
 
       {showBindingsList ? (

package/src/field-remap/history.ts

@@ -0,0 +1,99 @@
+import type { MappingEdge, MappingOperator } from '@workbench-kit/field-remap';
+
+export interface FieldRemapHistorySnapshot {
+  readonly edges: readonly MappingEdge[];
+  readonly operators: readonly MappingOperator[];
+}
+
+export interface FieldRemapHistoryState {
+  readonly past: readonly FieldRemapHistorySnapshot[];
+  readonly future: readonly FieldRemapHistorySnapshot[];
+}
+
+const FIELD_REMAP_HISTORY_LIMIT = 100;
+
+export function createFieldRemapHistorySnapshot(
+  edges: readonly MappingEdge[],
+  operators: readonly MappingOperator[],
+): FieldRemapHistorySnapshot {
+  return Object.freeze({
+    edges: Object.freeze([...edges]),
+    operators: Object.freeze([...operators]),
+  });
+}
+
+export function createFieldRemapHistoryState(): FieldRemapHistoryState {
+  return { past: [], future: [] };
+}
+
+function sameItems<T>(left: readonly T[], right: readonly T[]): boolean {
+  return left.length === right.length && left.every((item, index) => item === right[index]);
+}
+
+export function areFieldRemapHistorySnapshotsEqual(
+  left: FieldRemapHistorySnapshot,
+  right: FieldRemapHistorySnapshot,
+): boolean {
+  return sameItems(left.edges, right.edges) && sameItems(left.operators, right.operators);
+}
+
+function appendBounded(
+  snapshots: readonly FieldRemapHistorySnapshot[],
+  snapshot: FieldRemapHistorySnapshot,
+): readonly FieldRemapHistorySnapshot[] {
+  return [...snapshots.slice(-(FIELD_REMAP_HISTORY_LIMIT - 1)), snapshot];
+}
+
+export function recordFieldRemapHistory(
+  state: FieldRemapHistoryState,
+  current: FieldRemapHistorySnapshot,
+  next: FieldRemapHistorySnapshot,
+): FieldRemapHistoryState {
+  if (areFieldRemapHistorySnapshotsEqual(current, next)) {
+    return state;
+  }
+  return {
+    past: appendBounded(
+      state.past,
+      createFieldRemapHistorySnapshot(current.edges, current.operators),
+    ),
+    future: [],
+  };
+}
+
+export function undoFieldRemapHistory(
+  state: FieldRemapHistoryState,
+  current: FieldRemapHistorySnapshot,
+): { readonly state: FieldRemapHistoryState; readonly snapshot: FieldRemapHistorySnapshot } | null {
+  const snapshot = state.past[state.past.length - 1];
+  if (!snapshot) {
+    return null;
+  }
+  return {
+    state: {
+      past: state.past.slice(0, -1),
+      future: [createFieldRemapHistorySnapshot(current.edges, current.operators), ...state.future],
+    },
+    snapshot,
+  };
+}
+
+export function redoFieldRemapHistory(
+  state: FieldRemapHistoryState,
+  current: FieldRemapHistorySnapshot,
+): { readonly state: FieldRemapHistoryState; readonly snapshot: FieldRemapHistorySnapshot } | null {
+  const snapshot = state.future[0];
+  if (!snapshot) {
+    return null;
+  }
+  return {
+    state: {
+      past: appendBounded(
+        state.past,
+        createFieldRemapHistorySnapshot(current.edges, current.operators),
+      ),
+      future: state.future.slice(1),
+    },
+    snapshot,
+  };
+}

package/src/field-remap/index.ts

@@ -6,12 +6,20 @@
  * (Flow also side-imports the same stylesheet).
  */
 
-export { FieldRemapPanel, type FieldRemapPanelProps } from './panel.js';
+export {
+  FieldRemapPanel,
+  type FieldRemapHistoryActions,
+  type FieldRemapHistoryAvailability,
+  type FieldRemapHistoryOwner,
+  type FieldRemapHistorySnapshot,
+  type FieldRemapPanelProps,
+} from './panel.js';
 export {
   FieldRemapFlowMapper,
   type FieldRemapFlowActions,
   type FieldRemapFlowMapperProps,
 } from './flow.js';
+export type { FieldRemapPreviewState } from './preview.js';
 export {
   defaultFieldRemapChromeLabels,
   fieldRemapChromeLabelKeys,