@workbench-kit/shell-react 0.0.2-prototype.0.2.10

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

@@ -0,0 +1,74 @@
+/**
+ * Host-overridable chrome strings for Field Remap Flow / palette surfaces.
+ * Domain vocabulary (`MappingEdge`, binding runtime) stays unchanged.
+ *
+ * Resolution order per string: `labels[key]` → `t(capabilityId, default)` → English default.
+ */
+
+export type FieldRemapTranslate = (
+  key: string,
+  fallback: string,
+  params?: Readonly<Record<string, string | number>>,
+) => string;
+
+export interface FieldRemapChromeLabels {
+  /** Edge-list heading under the Flow canvas (product noun; default “Bindings”). */
+  readonly bindingsTitle: string;
+  readonly convertPaletteTitle: string;
+  readonly convertPaletteDescription: string;
+  readonly convertPaletteAriaLabel: string;
+  readonly convertsListAriaLabel: string;
+  readonly placeConvert: string;
+  readonly operatorsTitle: string;
+  readonly operatorsDescription: string;
+}
+
+export const defaultFieldRemapChromeLabels: FieldRemapChromeLabels = {
+  bindingsTitle: 'Bindings',
+  convertPaletteTitle: 'Convert palette',
+  convertPaletteDescription:
+    'Place a convert first, then wire source → draft → target. Drafts stay off the document until both ports bind.',
+  convertPaletteAriaLabel: 'Convert palette',
+  convertsListAriaLabel: 'Converts',
+  placeConvert: 'Place convert',
+  operatorsTitle: 'n→m operators',
+  operatorsDescription:
+    'Create combine (n→1) or split (1→n), then wire ports or edit in the side rail.',
+};
+
+/** Stable capability ids for optional `t()` injection (not free prose). */
+export const fieldRemapChromeLabelKeys = {
+  bindingsTitle: 'fieldRemap.bindingsTitle',
+  convertPaletteTitle: 'fieldRemap.convertPaletteTitle',
+  convertPaletteDescription: 'fieldRemap.convertPaletteDescription',
+  convertPaletteAriaLabel: 'fieldRemap.convertPaletteAriaLabel',
+  convertsListAriaLabel: 'fieldRemap.convertsListAriaLabel',
+  placeConvert: 'fieldRemap.placeConvert',
+  operatorsTitle: 'fieldRemap.operatorsTitle',
+  operatorsDescription: 'fieldRemap.operatorsDescription',
+} as const satisfies Record<keyof FieldRemapChromeLabels, string>;
+
+export function resolveFieldRemapChromeLabels(
+  labels?: Partial<FieldRemapChromeLabels> | undefined,
+  t?: FieldRemapTranslate | undefined,
+): FieldRemapChromeLabels {
+  const resolve = <K extends keyof FieldRemapChromeLabels>(key: K): string => {
+    const override = labels?.[key];
+    if (override !== undefined) {
+      return override;
+    }
+    const fallback = defaultFieldRemapChromeLabels[key];
+    return t?.(fieldRemapChromeLabelKeys[key], fallback) ?? fallback;
+  };
+
+  return {
+    bindingsTitle: resolve('bindingsTitle'),
+    convertPaletteTitle: resolve('convertPaletteTitle'),
+    convertPaletteDescription: resolve('convertPaletteDescription'),
+    convertPaletteAriaLabel: resolve('convertPaletteAriaLabel'),
+    convertsListAriaLabel: resolve('convertsListAriaLabel'),
+    placeConvert: resolve('placeConvert'),
+    operatorsTitle: resolve('operatorsTitle'),
+    operatorsDescription: resolve('operatorsDescription'),
+  };
+}

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

@@ -0,0 +1,206 @@
+import { useMemo, type JSX } from 'react';
+import { Button } from '@workbench-kit/react/primitives';
+import {
+  optionFieldsForStep,
+  resolveOptionSteps,
+  type MappingEdge,
+  type SourceField,
+  type TargetSlot,
+  type ValueTransformRegistry,
+} from '@workbench-kit/field-remap';
+
+import {
+  edgePortTypes,
+  listCompatibleTransforms,
+  removeTransformStepFromEdge,
+  replaceTransformStepOptionsOnEdge,
+  setTransformStepIdOnEdge,
+  type FieldRemapSelection,
+} from './flow-ops.js';
+import { TransformOptionsEditor } from './transform-options-editor.js';
+
+export interface ConvertNoteEditorProps {
+  readonly edge: MappingEdge;
+  readonly stepIndex: number;
+  readonly sources: readonly SourceField[];
+  readonly targets: readonly TargetSlot[];
+  readonly transforms: ValueTransformRegistry;
+  readonly onEdgesChange: (edges: readonly MappingEdge[]) => void;
+  readonly edges: readonly MappingEdge[];
+  readonly onSelectionChange: (next: FieldRemapSelection) => void;
+}
+
+/**
+ * Dedicated convert-note authoring surface for a selected `xf:*` step.
+ * Kept separate from binding / list-context chrome on the Flow detail rail.
+ */
+export function ConvertNoteEditor({
+  edge,
+  stepIndex,
+  sources,
+  targets,
+  transforms,
+  edges,
+  onEdgesChange,
+  onSelectionChange,
+}: ConvertNoteEditorProps): JSX.Element | null {
+  const chain = edge.transformIds ?? [];
+  const transformId = chain[stepIndex];
+
+  const portTypes = useMemo(() => edgePortTypes(edge, sources, targets), [edge, sources, targets]);
+
+  const optionFields = useMemo(
+    () => optionFieldsForStep(transforms, transformId),
+    [transforms, transformId],
+  );
+
+  const optionValue = useMemo(() => {
+    if (!transformId) {
+      return {};
+    }
+    return (
+      resolveOptionSteps(chain, edge.transformOptionSteps, edge.transformOptions)[stepIndex] ?? {}
+    );
+  }, [chain, edge.transformOptionSteps, edge.transformOptions, stepIndex, transformId]);
+
+  const replaceCatalog = useMemo(
+    () =>
+      listCompatibleTransforms({
+        registry: transforms,
+        edge,
+        stepIndex,
+        sourceType: portTypes.sourceType,
+        targetType: portTypes.targetType,
+        mode: 'replace',
+      }),
+    [edge, portTypes.sourceType, portTypes.targetType, stepIndex, transforms],
+  );
+
+  if (!transformId) {
+    return null;
+  }
+
+  const definition = transforms.get(transformId);
+  const stepLabel = definition?.label ?? transformId;
+
+  const applyEdge = (next: MappingEdge | null) => {
+    if (!next) {
+      return;
+    }
+    onEdgesChange(edges.map((item) => (item.id === edge.id ? next : item)));
+  };
+
+  return (
+    <aside
+      className="workbench-field-remap-convert-note"
+      data-testid="field-remap-convert-note"
+      aria-label="Convert note editor"
+    >
+      <div className="workbench-field-remap-convert-note__header">
+        <div>
+          <p className="workbench-field-remap-convert-note__eyebrow">Convert</p>
+          <h4 data-testid="field-remap-convert-note-title">{stepLabel}</h4>
+          <code
+            className="workbench-field-remap-convert-note__binding"
+            data-testid="field-remap-convert-note-binding"
+          >
+            {edge.sourceFieldId} → {edge.targetSlotId}
+          </code>
+          <p className="workbench-field-remap-convert-note__muted">
+            Step {stepIndex + 1} of {chain.length} on this binding
+          </p>
+        </div>
+        <div className="workbench-field-remap-convert-note__actions">
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-convert-note-back"
+            onClick={() => onSelectionChange({ kind: 'edge', edgeId: edge.id })}
+          >
+            Binding
+          </Button>
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-convert-note-clear"
+            onClick={() => onSelectionChange(null)}
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+
+      <section
+        className="workbench-field-remap-convert-note__section"
+        aria-labelledby="field-remap-convert-note-registry"
+        data-testid="field-remap-step-settings"
+      >
+        <h5 id="field-remap-convert-note-registry">Transform</h5>
+        <label className="workbench-field-remap-convert-note__field">
+          <span>Registry id</span>
+          <select
+            aria-label="Convert transform id"
+            data-testid="field-remap-step-id"
+            value={transformId}
+            onChange={(event) => {
+              applyEdge(
+                setTransformStepIdOnEdge(edge, stepIndex, event.target.value, {
+                  registry: transforms,
+                  sourceType: portTypes.sourceType,
+                  targetType: portTypes.targetType,
+                }),
+              );
+            }}
+          >
+            {!replaceCatalog.some((item) => item.id === transformId) ? (
+              <option value={transformId}>{transformId}</option>
+            ) : null}
+            {replaceCatalog.map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </section>
+
+      <section
+        className="workbench-field-remap-convert-note__section"
+        aria-labelledby="field-remap-convert-note-options"
+      >
+        <h5 id="field-remap-convert-note-options">Options</h5>
+        <TransformOptionsEditor
+          fields={optionFields}
+          value={optionValue}
+          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>
+    </aside>
+  );
+}

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

@@ -0,0 +1,126 @@
+import { useMemo, type JSX } from 'react';
+import { Button } from '@workbench-kit/react/primitives';
+import type { ValueTransformRegistry } from '@workbench-kit/field-remap';
+
+import { defaultFieldRemapChromeLabels, type FieldRemapChromeLabels } from './chrome-labels.js';
+
+export interface FieldRemapConvertPaletteProps {
+  readonly transforms: ValueTransformRegistry;
+  readonly selectedTransformId: string;
+  readonly onSelectedTransformIdChange: (transformId: string) => void;
+  readonly onPlaceDraft: (transformId: string) => void;
+  readonly onAddCombine?: (() => void) | undefined;
+  readonly onAddSplit?: (() => void) | undefined;
+  /** Resolved chrome labels (defaults when omitted). */
+  readonly chromeLabels?: FieldRemapChromeLabels | undefined;
+}
+
+/**
+ * Primary convert chrome for Field Remap Flow: place-then-wire drafts first,
+ * with optional combine/split authoring entry points.
+ */
+export function FieldRemapConvertPalette({
+  transforms,
+  selectedTransformId,
+  onSelectedTransformIdChange,
+  onPlaceDraft,
+  onAddCombine,
+  onAddSplit,
+  chromeLabels = defaultFieldRemapChromeLabels,
+}: FieldRemapConvertPaletteProps): JSX.Element {
+  const catalog = useMemo(
+    () => transforms.list().filter((definition) => definition.id !== 'identity'),
+    [transforms],
+  );
+
+  return (
+    <aside
+      className="workbench-field-remap-convert-palette"
+      data-testid="field-remap-convert-palette"
+      aria-label={chromeLabels.convertPaletteAriaLabel}
+    >
+      <header className="workbench-field-remap-convert-palette__header">
+        <h3>{chromeLabels.convertPaletteTitle}</h3>
+        <p>{chromeLabels.convertPaletteDescription}</p>
+      </header>
+
+      <div className="workbench-field-remap-convert-palette__place">
+        <Button
+          type="button"
+          data-testid="field-remap-place-draft"
+          disabled={!selectedTransformId}
+          onClick={() => {
+            if (!selectedTransformId) {
+              return;
+            }
+            onPlaceDraft(selectedTransformId);
+          }}
+        >
+          {chromeLabels.placeConvert}
+        </Button>
+      </div>
+
+      <ul
+        className="workbench-field-remap-convert-palette__list"
+        role="listbox"
+        aria-label={chromeLabels.convertsListAriaLabel}
+      >
+        {catalog.map((definition) => {
+          const selected = definition.id === selectedTransformId;
+          return (
+            <li key={definition.id}>
+              <button
+                type="button"
+                role="option"
+                aria-selected={selected}
+                className={
+                  selected
+                    ? 'workbench-field-remap-convert-palette__item is-selected'
+                    : 'workbench-field-remap-convert-palette__item'
+                }
+                data-testid={`field-remap-palette-item-${definition.id}`}
+                onClick={() => onSelectedTransformIdChange(definition.id)}
+                onDoubleClick={() => onPlaceDraft(definition.id)}
+              >
+                <strong>{definition.label}</strong>
+                <code>{definition.id}</code>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+
+      {onAddCombine || onAddSplit ? (
+        <div
+          className="workbench-field-remap-convert-palette__operators"
+          data-testid="field-remap-operator-palette"
+        >
+          <h4>{chromeLabels.operatorsTitle}</h4>
+          <p>{chromeLabels.operatorsDescription}</p>
+          <div className="workbench-field-remap-convert-palette__operator-actions">
+            {onAddCombine ? (
+              <Button
+                compact
+                type="button"
+                data-testid="field-remap-add-combine"
+                onClick={onAddCombine}
+              >
+                Add combine
+              </Button>
+            ) : null}
+            {onAddSplit ? (
+              <Button
+                compact
+                type="button"
+                data-testid="field-remap-add-split"
+                onClick={onAddSplit}
+              >
+                Add split
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </aside>
+  );
+}

package/src/field-remap/demo.tsx

@@ -0,0 +1,105 @@
+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 { FieldRemapIoChrome } from './io-class-browse.js';
+import { FieldRemapPanel } from './panel.js';
+import {
+  getFieldRemapBrowseDemoShapes,
+  getFieldRemapSample,
+  type FieldRemapSampleId,
+} from './samples.js';
+
+export interface SampleFieldRemapDemoProps {
+  readonly sampleId?: FieldRemapSampleId | string | undefined;
+  /** Forwarded to Flow mapper (default true). */
+  readonly showMinimap?: boolean | undefined;
+  /** When true, show host-chrome demo controls (minimap toggle + fit view). */
+  readonly showHostChromeDemo?: boolean | undefined;
+  /** Prefer `browse` for I/O class/field inspection demos. */
+  readonly ioChrome?: FieldRemapIoChrome | undefined;
+  /** When true with `ioChrome: 'browse'`, seed classRef + hidden leaf shapes. */
+  readonly browseSeedShapes?: boolean | undefined;
+  readonly labels?: Partial<FieldRemapChromeLabels> | undefined;
+  readonly t?: FieldRemapTranslate | undefined;
+}
+
+/**
+ * Sample host wrapper around {@link FieldRemapPanel}.
+ */
+export function SampleFieldRemapDemo({
+  sampleId = 'nested-ab',
+  showMinimap: showMinimapProp,
+  showHostChromeDemo = false,
+  ioChrome,
+  browseSeedShapes = false,
+  labels,
+  t,
+}: SampleFieldRemapDemoProps = {}): JSX.Element {
+  const sample = getFieldRemapSample(sampleId);
+  const browseShapes = browseSeedShapes ? getFieldRemapBrowseDemoShapes() : null;
+  const flowActionsRef = useRef<FieldRemapFlowActions | null>(null);
+  const [showMinimap, setShowMinimap] = useState(showMinimapProp ?? true);
+  const [lastPaneMenu, setLastPaneMenu] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (showMinimapProp !== undefined) {
+      setShowMinimap(showMinimapProp);
+    }
+  }, [showMinimapProp]);
+
+  return (
+    <div data-testid="field-remap-demo-host">
+      {showHostChromeDemo ? (
+        <div
+          className="workbench-field-remap-demo__host-chrome"
+          data-testid="field-remap-host-chrome"
+          style={{ display: 'flex', gap: '0.5rem', marginBottom: '0.75rem', flexWrap: 'wrap' }}
+        >
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-toggle-minimap"
+            onClick={() => setShowMinimap((current) => !current)}
+          >
+            {showMinimap ? 'Hide MiniMap' : 'Show MiniMap'}
+          </Button>
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-fit-view"
+            onClick={() => flowActionsRef.current?.fitView()}
+          >
+            Fit view
+          </Button>
+          {lastPaneMenu ? (
+            <span data-testid="field-remap-pane-menu-log" role="status">
+              Pane menu: {lastPaneMenu}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+      <FieldRemapPanel
+        key={`${sample.id}:${ioChrome ?? 'default'}:${browseSeedShapes ? 'seed' : 'plain'}`}
+        sample={sample}
+        showMinimap={showMinimap}
+        ioChrome={ioChrome}
+        editableShapes={ioChrome === 'browse' ? false : undefined}
+        sources={browseShapes?.sources}
+        targets={browseShapes?.targets}
+        labels={labels}
+        t={t}
+        flowActionsRef={showHostChromeDemo ? flowActionsRef : undefined}
+        onPaneContextMenu={
+          showHostChromeDemo
+            ? (event) => {
+                event.preventDefault();
+                setLastPaneMenu(new Date().toISOString());
+              }
+            : undefined
+        }
+      />
+    </div>
+  );
+}