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

package/README.md

@@ -120,6 +120,7 @@ import {
   FieldRemapFlowMapper,
   createJsonataValueTransform,
 } from '@workbench-kit/shell-react/field-remap';
+import type { FieldRemapDocument } from '@workbench-kit/field-remap';
 import '@workbench-kit/shell-react/field-remap/view.css';
 
 // Uncontrolled demo:
@@ -133,6 +134,44 @@ import '@workbench-kit/shell-react/field-remap/view.css';
 for Flow-only embeds and custom bundler setups. The full barrel
 `import { FieldRemapPanel } from '@workbench-kit/shell-react'` stays supported.
 
+### n→m operators in direct Flow embeds
+
+`FieldRemapFlowMapper` keeps durable edges and document-v2 combine/split operators
+controlled. A host that enables operator authoring owns both arrays and commits each
+complete next operator array through the same persistence/history boundary:
+
+```tsx
+const [document, setDocument] = useState(initialDocument);
+const commitDocumentChange = (next: FieldRemapDocument) => {
+  setDocument(next);
+  hostHistory.record(next);
+  persist(next);
+};
+
+<FieldRemapFlowMapper
+  sources={sources}
+  targets={targets}
+  transforms={registry}
+  edges={document.edges}
+  onEdgesChange={(next) => commitDocumentChange({ ...document, edges: next })}
+  operators={document.operators ?? []}
+  onOperatorsChange={(next) => commitDocumentChange({ ...document, operators: next })}
+/>;
+```
+
+The presence of `onOperatorsChange` is the operator-authoring capability signal: it
+enables the existing Add combine / Add split actions and routes operator wiring, detail,
+and deletion mutations through that callback. Omitting the callback is intentional
+inspect-only projection; supplied operators can still render and be selected, but operator
+mutation chrome is absent. Do not infer writability from operator count, sample, chrome, or
+labels. `readOnly` suppresses Flow authoring even when mutation callbacks are present.
+
+`FieldRemapPanel` already supplies this wiring for its fully uncontrolled composite
+`{ edges, operators }` state. If either durable channel is controlled, its existing
+composite `historyOwner` contract applies as described below; consumers do not add a second
+operator state layer merely to enable Panel authoring. Direct operator inventory drag/drop
+and double-click placement are deferred to [#219](https://github.com/NewChoBo/workbench-kit/issues/219).
+
 ### Semantic history ownership
 
 `FieldRemapPanel` keeps a private composite `{ edges, operators }` undo/redo stack only

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/shell-react",
-  "version": "0.0.2-prototype.0.2.43",
+  "version": "0.0.2-prototype.0.2.44",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -16,6 +16,7 @@
     "./field-remap": "./src/field-remap/index.ts",
     "./field-remap/view.css": "./src/field-remap/view.css",
     "./host-shell": "./src/shell/host-shell.tsx",
+    "./keybinding-management-settings": "./src/keybinding-management-settings.ts",
     "./layout-storage": "./src/workbench/layout-storage.ts",
     "./provider": "./src/shell/provider.tsx",
     "./shell": "./src/shell/shell.tsx"
@@ -32,14 +33,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.43",
-    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.43",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.43",
-    "@workbench-kit/react": "0.0.2-prototype.0.2.43",
-    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.43",
-    "@workbench-kit/workbench-extension-sdk": "0.0.2-prototype.0.2.43",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.43",
-    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.43"
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.44",
+    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.44",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.44",
+    "@workbench-kit/react": "0.0.2-prototype.0.2.44",
+    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.44",
+    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.44",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.44",
+    "@workbench-kit/workbench-extension-sdk": "0.0.2-prototype.0.2.44"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/editor/workspace-reconcile.tsx

@@ -1,19 +1,24 @@
 import { useEffect } from 'react';
+import type { EditorService } from '@workbench-kit/workbench-core';
 
 import { createWorkspaceFileAvailabilityChecker } from './workspace-file-availability.js';
-import { useEditorService } from './use-editor.js';
-import { useWorkbench } from '../shell/provider.js';
 import {
   isWorkspaceResourceService,
   useWorkspaceResourceState,
 } from '../workbench/workspace-view-state.js';
 
+interface EditorWorkspaceReconcilerProps {
+  readonly editorService: EditorService;
+  readonly workspaceHostService?: unknown;
+}
+
 /** Component-only module so Vite Fast Refresh can accept this boundary. */
-export function EditorWorkspaceReconciler(): null {
-  const { workspaceHostPort } = useWorkbench();
-  const editorService = useEditorService();
-  const workspaceService = isWorkspaceResourceService(workspaceHostPort?.service)
-    ? workspaceHostPort.service
+export function EditorWorkspaceReconciler({
+  editorService,
+  workspaceHostService,
+}: EditorWorkspaceReconcilerProps): null {
+  const workspaceService = isWorkspaceResourceService(workspaceHostService)
+    ? workspaceHostService
     : undefined;
   const workspaceState = useWorkspaceResourceState(workspaceService);
 

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

@@ -43,6 +43,31 @@ export interface FieldRemapChromeLabels {
   /** Additive selection-detail Modal copy. Omitted legacy label objects use English defaults. */
   readonly detailModalTitle?: string;
   readonly closeDetailModal?: string;
+  /** Additive current-v2 document import/export chrome copy. */
+  readonly exportDocumentJson?: string;
+  readonly copyDocumentJson?: string;
+  readonly exportDocumentTitle?: string;
+  readonly closeDocumentExport?: string;
+  readonly exportDocumentDescription?: string;
+  readonly exportDocumentLabel?: string;
+  readonly importDocumentJson?: string;
+  readonly importDocumentTitle?: string;
+  readonly closeDocumentImport?: string;
+  readonly importDocumentDescription?: string;
+  readonly importDocumentLabel?: string;
+  readonly importDocumentPlaceholder?: string;
+  readonly applyDocumentImport?: string;
+  readonly cancelDocumentImport?: string;
+  readonly documentCopied?: string;
+  readonly documentCopyFailed?: string;
+  readonly documentImportUnavailable?: string;
+  readonly documentImportInvalidJson?: string;
+  readonly documentImportUnsupportedVersion?: string;
+  readonly documentImportInvalidDocument?: string;
+  readonly documentImportDuplicateId?: string;
+  readonly documentImportIncompatibleSource?: string;
+  readonly documentImportIncompatibleTarget?: string;
+  readonly documentImportUnavailableTransform?: string;
   /** Additive Flow preview copy. Omitted legacy label objects use English defaults. */
   readonly previewTitle?: string;
   readonly previewLoading?: string;
@@ -86,6 +111,32 @@ export const defaultFieldRemapChromeLabels = {
   readOnlyEmptyDetailDescription: 'Select a mapping to inspect its details.',
   detailModalTitle: 'Mapping details',
   closeDetailModal: 'Close details',
+  exportDocumentJson: 'Export JSON',
+  copyDocumentJson: 'Copy JSON',
+  exportDocumentTitle: 'Export mapping document',
+  closeDocumentExport: 'Close export',
+  exportDocumentDescription:
+    'Copy the current version 2 mapping document or select the JSON manually.',
+  exportDocumentLabel: 'Current mapping document JSON',
+  importDocumentJson: 'Import JSON',
+  importDocumentTitle: 'Import mapping document',
+  closeDocumentImport: 'Close import',
+  importDocumentDescription:
+    'Paste a current version 2 mapping document. A valid import replaces the complete mapping in one step.',
+  importDocumentLabel: 'Mapping document JSON',
+  importDocumentPlaceholder: 'Paste mapping document JSON',
+  applyDocumentImport: 'Validate and import',
+  cancelDocumentImport: 'Cancel',
+  documentCopied: 'Mapping document copied.',
+  documentCopyFailed: 'The mapping document could not be copied.',
+  documentImportUnavailable: 'Import is unavailable for this mapping.',
+  documentImportInvalidJson: 'Enter valid mapping document JSON.',
+  documentImportUnsupportedVersion: 'This mapping document version is not supported.',
+  documentImportInvalidDocument: 'This mapping document is invalid.',
+  documentImportDuplicateId: 'This mapping document contains duplicate identities.',
+  documentImportIncompatibleSource: 'This mapping document uses an unavailable source field.',
+  documentImportIncompatibleTarget: 'This mapping document uses an unavailable target field.',
+  documentImportUnavailableTransform: 'This mapping document uses an unavailable convert.',
   previewTitle: 'Sample preview',
   previewLoading: 'Updating preview…',
   previewError: 'Preview failed',
@@ -128,6 +179,30 @@ export const fieldRemapChromeLabelKeys = {
   readOnlyEmptyDetailDescription: 'fieldRemap.readOnlyEmptyDetailDescription',
   detailModalTitle: 'fieldRemap.detailModalTitle',
   closeDetailModal: 'fieldRemap.closeDetailModal',
+  exportDocumentJson: 'fieldRemap.exportDocumentJson',
+  copyDocumentJson: 'fieldRemap.copyDocumentJson',
+  exportDocumentTitle: 'fieldRemap.exportDocumentTitle',
+  closeDocumentExport: 'fieldRemap.closeDocumentExport',
+  exportDocumentDescription: 'fieldRemap.exportDocumentDescription',
+  exportDocumentLabel: 'fieldRemap.exportDocumentLabel',
+  importDocumentJson: 'fieldRemap.importDocumentJson',
+  importDocumentTitle: 'fieldRemap.importDocumentTitle',
+  closeDocumentImport: 'fieldRemap.closeDocumentImport',
+  importDocumentDescription: 'fieldRemap.importDocumentDescription',
+  importDocumentLabel: 'fieldRemap.importDocumentLabel',
+  importDocumentPlaceholder: 'fieldRemap.importDocumentPlaceholder',
+  applyDocumentImport: 'fieldRemap.applyDocumentImport',
+  cancelDocumentImport: 'fieldRemap.cancelDocumentImport',
+  documentCopied: 'fieldRemap.documentCopied',
+  documentCopyFailed: 'fieldRemap.documentCopyFailed',
+  documentImportUnavailable: 'fieldRemap.documentImportUnavailable',
+  documentImportInvalidJson: 'fieldRemap.documentImportInvalidJson',
+  documentImportUnsupportedVersion: 'fieldRemap.documentImportUnsupportedVersion',
+  documentImportInvalidDocument: 'fieldRemap.documentImportInvalidDocument',
+  documentImportDuplicateId: 'fieldRemap.documentImportDuplicateId',
+  documentImportIncompatibleSource: 'fieldRemap.documentImportIncompatibleSource',
+  documentImportIncompatibleTarget: 'fieldRemap.documentImportIncompatibleTarget',
+  documentImportUnavailableTransform: 'fieldRemap.documentImportUnavailableTransform',
   previewTitle: 'fieldRemap.previewTitle',
   previewLoading: 'fieldRemap.previewLoading',
   previewError: 'fieldRemap.previewError',
@@ -180,6 +255,30 @@ export function resolveFieldRemapChromeLabels(
     readOnlyEmptyDetailDescription: resolve('readOnlyEmptyDetailDescription'),
     detailModalTitle: resolve('detailModalTitle'),
     closeDetailModal: resolve('closeDetailModal'),
+    exportDocumentJson: resolve('exportDocumentJson'),
+    copyDocumentJson: resolve('copyDocumentJson'),
+    exportDocumentTitle: resolve('exportDocumentTitle'),
+    closeDocumentExport: resolve('closeDocumentExport'),
+    exportDocumentDescription: resolve('exportDocumentDescription'),
+    exportDocumentLabel: resolve('exportDocumentLabel'),
+    importDocumentJson: resolve('importDocumentJson'),
+    importDocumentTitle: resolve('importDocumentTitle'),
+    closeDocumentImport: resolve('closeDocumentImport'),
+    importDocumentDescription: resolve('importDocumentDescription'),
+    importDocumentLabel: resolve('importDocumentLabel'),
+    importDocumentPlaceholder: resolve('importDocumentPlaceholder'),
+    applyDocumentImport: resolve('applyDocumentImport'),
+    cancelDocumentImport: resolve('cancelDocumentImport'),
+    documentCopied: resolve('documentCopied'),
+    documentCopyFailed: resolve('documentCopyFailed'),
+    documentImportUnavailable: resolve('documentImportUnavailable'),
+    documentImportInvalidJson: resolve('documentImportInvalidJson'),
+    documentImportUnsupportedVersion: resolve('documentImportUnsupportedVersion'),
+    documentImportInvalidDocument: resolve('documentImportInvalidDocument'),
+    documentImportDuplicateId: resolve('documentImportDuplicateId'),
+    documentImportIncompatibleSource: resolve('documentImportIncompatibleSource'),
+    documentImportIncompatibleTarget: resolve('documentImportIncompatibleTarget'),
+    documentImportUnavailableTransform: resolve('documentImportUnavailableTransform'),
     previewTitle: resolve('previewTitle'),
     previewLoading: resolve('previewLoading'),
     previewError: resolve('previewError'),

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

@@ -1,5 +1,12 @@
-import { useMemo, type JSX } from 'react';
-import { Button } from '@workbench-kit/react/primitives';
+import { useId, useMemo, type JSX } from 'react';
+import {
+  Button,
+  Select,
+  WorkbenchPropertyHint,
+  WorkbenchPropertyRow,
+  WorkbenchPropertySection,
+  WorkbenchPropertyStack,
+} from '@workbench-kit/react/primitives';
 import {
   optionFieldsForStep,
   resolveOptionSteps,
@@ -46,6 +53,7 @@ export function ConvertNoteEditor({
   onSelectionChange,
   readOnly = false,
 }: ConvertNoteEditorProps): JSX.Element | null {
+  const transformSelectId = useId();
   const chain = edge.transformIds ?? [];
   const transformId = chain[stepIndex];
 
@@ -91,115 +99,116 @@ export function ConvertNoteEditor({
       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">
+      <WorkbenchPropertyStack gap="sm">
+        <WorkbenchPropertySection
+          title="Convert"
+          actions={
+            <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>
+          }
+        >
+          <WorkbenchPropertyRow label="Transform">
+            <strong data-testid="field-remap-convert-note-title">{stepLabel}</strong>
+          </WorkbenchPropertyRow>
+          <WorkbenchPropertyRow label="Binding">
+            <code
+              className="workbench-field-remap-convert-note__binding"
+              data-testid="field-remap-convert-note-binding"
+            >
+              {edge.sourceFieldId} → {edge.targetSlotId}
+            </code>
+          </WorkbenchPropertyRow>
+          <WorkbenchPropertyHint 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>
+          </WorkbenchPropertyHint>
+        </WorkbenchPropertySection>
+
+        <WorkbenchPropertySection title="Transform" data-testid="field-remap-step-settings">
+          <WorkbenchPropertyRow htmlFor={transformSelectId} label="Registry id">
+            <Select
+              id={transformSelectId}
+              aria-label="Convert transform id"
+              controlWidth="full"
+              data-testid="field-remap-step-id"
+              value={transformId}
+              disabled={readOnly}
+              onValueChange={(nextTransformId) => {
+                applyEdge(
+                  setTransformStepIdOnEdge(edge, stepIndex, nextTransformId, {
+                    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>
+          </WorkbenchPropertyRow>
+        </WorkbenchPropertySection>
 
-      <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}
+        <WorkbenchPropertySection title="Options">
+          <TransformOptionsEditor
+            fields={optionFields}
+            value={optionValue}
             disabled={readOnly}
-            onChange={(event) => {
-              applyEdge(
-                setTransformStepIdOnEdge(edge, stepIndex, event.target.value, {
-                  registry: transforms,
-                  sourceType: portTypes.sourceType,
-                  targetType: portTypes.targetType,
-                }),
-              );
+            onChange={(nextOptions) => {
+              applyEdge(replaceTransformStepOptionsOnEdge(edge, stepIndex, nextOptions));
             }}
-          >
-            {!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>
+          />
+        </WorkbenchPropertySection>
 
-      <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}
-          disabled={readOnly}
-          onChange={(nextOptions) => {
-            applyEdge(replaceTransformStepOptionsOnEdge(edge, stepIndex, nextOptions));
-          }}
-        />
-      </section>
-
-      {!readOnly ? (
-        <div className="workbench-field-remap-convert-note__footer">
-          <Button
-            compact
-            type="button"
-            data-testid="field-remap-convert-note-remove"
-            onClick={() => {
-              const next = removeTransformStepFromEdge(edge, stepIndex);
-              applyEdge(next);
-              const nextLen = next.transformIds?.length ?? 0;
-              if (nextLen === 0) {
-                onSelectionChange({ kind: 'edge', edgeId: edge.id });
-              } else {
-                onSelectionChange({
-                  kind: 'transformStep',
-                  edgeId: edge.id,
-                  stepIndex: Math.min(stepIndex, nextLen - 1),
-                });
-              }
-            }}
-          >
-            Remove convert
-          </Button>
-        </div>
-      ) : null}
+        {!readOnly ? (
+          <WorkbenchPropertySection title="Actions">
+            <WorkbenchPropertyRow label="Convert step">
+              <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>
+            </WorkbenchPropertyRow>
+          </WorkbenchPropertySection>
+        ) : null}
+      </WorkbenchPropertyStack>
     </aside>
   );
 }