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

package/src/field-remap/index.ts

@@ -16,6 +16,8 @@ export {
 } from './panel.js';
 export {
   FieldRemapFlowMapper,
+  type FieldRemapConnectionFeedback,
+  type FieldRemapConnectionFeedbackReason,
   type FieldRemapFlowActions,
   type FieldRemapFlowMapperProps,
 } from './flow.js';

package/src/field-remap/io-class-browse.tsx

@@ -5,6 +5,8 @@ import {
   type SourceField,
   type TargetSlot,
 } from '@workbench-kit/field-remap';
+import { SideBarRow } from '@workbench-kit/react/layout';
+import { Badge } from '@workbench-kit/react/primitives';
 
 export type FieldRemapIoChrome = 'browse' | 'edit' | 'none';
 
@@ -56,25 +58,30 @@ function FieldTree({
     <ul className="workbench-field-remap-io-browse__fields">
       {nodes.map((node) => (
         <li key={node.id}>
-          <div className="workbench-field-remap-io-browse__row">
+          <SideBarRow className="workbench-field-remap-io-browse__row" data-static="true">
             <code className="workbench-field-remap-io-browse__path">{node.path ?? node.label}</code>
             <span className="workbench-field-remap-io-browse__meta">
               {node.dataType ? <span>{node.dataType}</span> : null}
               {node.classRef ? (
-                <span
+                <Badge
                   className="workbench-field-remap-io-browse__badge"
                   title={labels?.classRefTitle ?? 'classRef'}
+                  variant="muted"
                 >
                   {formatClassRef(node.classRef)}
-                </span>
+                </Badge>
               ) : null}
               {node.hidden === true ? (
-                <span className="workbench-field-remap-io-browse__badge" title="hidden">
+                <Badge
+                  className="workbench-field-remap-io-browse__badge"
+                  title="hidden"
+                  variant="muted"
+                >
                   {labels?.hiddenBadge ?? 'Hidden'}
-                </span>
+                </Badge>
               ) : null}
             </span>
-          </div>
+          </SideBarRow>
           {node.children?.length ? (
             <FieldTree emptyLabel={emptyLabel} labels={labels} nodes={node.children} />
           ) : null}
@@ -101,22 +108,27 @@ function PortSection({
       {nodes.length === 0 ? (
         <p className="workbench-field-remap-io-browse__empty">{emptyLabel}</p>
       ) : (
-        nodes.map((node) => (
-          <div className="workbench-field-remap-io-browse__port" key={node.id}>
-            <p className="workbench-field-remap-io-browse__port-title">
-              <span className="workbench-field-remap-io-browse__port-id">{node.label}</span>
-              <span className="workbench-field-remap-io-browse__port-meta">
-                {node.classRef ? formatClassRef(node.classRef) : node.id}
-                {node.hidden === true ? ` · ${labels?.hiddenBadge ?? 'Hidden'}` : ''}
-              </span>
-            </p>
-            <FieldTree
-              emptyLabel={emptyLabel}
-              labels={labels}
-              nodes={node.children?.length ? node.children : [node]}
-            />
-          </div>
-        ))
+        <ul className="workbench-field-remap-io-browse__ports">
+          {nodes.map((node) => (
+            <li className="workbench-field-remap-io-browse__port" key={node.id}>
+              <SideBarRow
+                className="workbench-field-remap-io-browse__port-title"
+                data-static="true"
+              >
+                <span className="workbench-field-remap-io-browse__port-id">{node.label}</span>
+                <span className="workbench-field-remap-io-browse__port-meta">
+                  {node.classRef ? formatClassRef(node.classRef) : node.id}
+                  {node.hidden === true ? ` · ${labels?.hiddenBadge ?? 'Hidden'}` : ''}
+                </span>
+              </SideBarRow>
+              <FieldTree
+                emptyLabel={emptyLabel}
+                labels={labels}
+                nodes={node.children?.length ? node.children : [node]}
+              />
+            </li>
+          ))}
+        </ul>
       )}
     </section>
   );

package/src/field-remap/keyboard.ts

@@ -0,0 +1,16 @@
+const EDITABLE_SHORTCUT_TARGET = [
+  'input',
+  'textarea',
+  'select',
+  '[contenteditable]:not([contenteditable="false"])',
+  '[role="textbox"]',
+  '[data-field-remap-shortcuts="ignore"]',
+].join(', ');
+
+export function isFieldRemapEditableShortcutTarget(target: EventTarget | null): boolean {
+  return (
+    typeof Element !== 'undefined' &&
+    target instanceof Element &&
+    target.closest(EDITABLE_SHORTCUT_TARGET) !== null
+  );
+}

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

@@ -0,0 +1,34 @@
+import type { JSX, ReactNode } from 'react';
+import { Modal } from '@workbench-kit/react/modal';
+import { WorkbenchModalPortal } from '@workbench-kit/react/workbench/modal-portal';
+
+export interface FieldRemapModalDetailProps {
+  readonly children: ReactNode;
+  readonly closeLabel: string;
+  readonly onClose: () => void;
+  readonly title: string;
+}
+
+export function FieldRemapModalDetail({
+  children,
+  closeLabel,
+  onClose,
+  title,
+}: FieldRemapModalDetailProps): JSX.Element {
+  return (
+    <WorkbenchModalPortal>
+      <Modal
+        bodyClassName="workbench-field-remap-detail-modal__body"
+        bodyPadding="none"
+        bodyScroll="auto"
+        className="workbench-field-remap-detail-modal"
+        closeLabel={closeLabel}
+        closeOnEscape={false}
+        title={title}
+        onClose={onClose}
+      >
+        {children}
+      </Modal>
+    </WorkbenchModalPortal>
+  );
+}

package/src/field-remap/panel.tsx

@@ -5,16 +5,23 @@ import {
   useRef,
   useState,
   type JSX,
+  type KeyboardEvent,
   type Ref,
 } from 'react';
 import {
   createBuiltinValueTransformRegistry,
+  createFieldRemapDocument,
+  deserializeFieldRemapImport,
+  FieldRemapImportAdmissionError,
   findParentChildMappingConflicts,
   projectSourceFields,
   projectTargetSlots,
   pruneMappingEdgesForShapes,
+  serializeFieldRemapDocument,
   sourceFieldsFromPlainObject,
   targetSlotsFromPlainObject,
+  UnsupportedFieldRemapDocumentVersionError,
+  type FieldRemapDocument,
   type MappingEdge,
   type MappingOperator,
   type SourceField,
@@ -50,6 +57,8 @@ import {
 } from './shape-io-editor.js';
 import { createFieldRemapPreviewController } from './preview-controller.js';
 import type { FieldRemapPreviewState } from './preview.js';
+import { isFieldRemapEditableShortcutTarget } from './keyboard.js';
+import { FieldRemapDocumentIo, type FieldRemapDocumentImportActionResult } from './document-io.js';
 import './view.css';
 
 export type { FieldRemapHistorySnapshot } from './history.js';
@@ -80,6 +89,8 @@ export interface FieldRemapPanelProps {
   readonly sample?: FieldRemapSampleId | FieldRemapSampleDefinition | undefined;
   /** Optional host-owned transform registry (defaults to builtins + JSONata). */
   readonly transforms?: ValueTransformRegistry | undefined;
+  /** View-only authoring guard forwarded to Flow; this is not an authorization boundary. */
+  readonly readOnly?: boolean | undefined;
   /**
    * When true (default), show paste-JSON / type editors for host-owned shapes.
    * Prefer {@link FieldRemapPanelProps.ioChrome} for browse-first hosts; when
@@ -107,12 +118,17 @@ export interface FieldRemapPanelProps {
   /** Optional controlled n→m operators (document v2). */
   readonly operators?: readonly MappingOperator[] | undefined;
   readonly onOperatorsChange?: ((operators: readonly MappingOperator[]) => void) | undefined;
+  /**
+   * Atomic whole-document replacement proposal for controlled or mixed-control imports.
+   * Incremental edge/operator callbacks remain unchanged.
+   */
+  readonly onDocumentReplace?: ((document: FieldRemapDocument) => void) | undefined;
   /**
    * Composite history owner for controlled or mixed-control mapping state. When either durable
    * channel is controlled, the Panel never creates a partial private history.
    */
   readonly historyOwner?: FieldRemapHistoryOwner | undefined;
-  /** Imperative semantic undo/redo actions for host chrome. Keyboard routing remains host-owned. */
+  /** Imperative semantic undo/redo actions for host chrome. */
   readonly historyActionsRef?: Ref<FieldRemapHistoryActions | null> | undefined;
   /** Reports the active history owner's current undo/redo availability. */
   readonly onHistoryAvailabilityChange?:
@@ -136,6 +152,7 @@ export interface FieldRemapPanelProps {
   readonly showBindingsList?: FieldRemapFlowMapperProps['showBindingsList'];
   readonly showConvertPalette?: FieldRemapFlowMapperProps['showConvertPalette'];
   readonly emptyDetail?: FieldRemapFlowMapperProps['emptyDetail'];
+  readonly detailPresentation?: FieldRemapFlowMapperProps['detailPresentation'];
   /** Show the controller-owned preview snapshot in the nested Flow rail. */
   readonly showFlowPreview?: boolean;
   /** Forwarded to {@link FieldRemapFlowMapper} Controls MiniMap toggle. */
@@ -249,6 +266,7 @@ function createFieldRemapPreviewSignature(): (value: unknown) => string {
 export function FieldRemapPanel({
   sample: sampleProp,
   transforms: transformsProp,
+  readOnly = false,
   editableShapes = true,
   ioChrome: ioChromeProp,
   includeHidden: includeHiddenProp,
@@ -258,6 +276,7 @@ export function FieldRemapPanel({
   onEdgesChange,
   operators: operatorsProp,
   onOperatorsChange,
+  onDocumentReplace,
   historyOwner,
   historyActionsRef,
   onHistoryAvailabilityChange,
@@ -273,6 +292,7 @@ export function FieldRemapPanel({
   showBindingsList,
   showConvertPalette,
   emptyDetail,
+  detailPresentation,
   showFlowPreview,
   onShowMinimapChange,
   onPaneContextMenu,
@@ -282,7 +302,8 @@ export function FieldRemapPanel({
   labels,
   t,
 }: FieldRemapPanelProps): JSX.Element {
-  const ioChrome = resolveFieldRemapIoChrome(ioChromeProp, editableShapes);
+  const configuredIoChrome = resolveFieldRemapIoChrome(ioChromeProp, editableShapes);
+  const ioChrome = readOnly && configuredIoChrome === 'edit' ? 'browse' : configuredIoChrome;
   const [uncontrolledIncludeHidden, setUncontrolledIncludeHidden] = useState(false);
   const includeHiddenControlled = includeHiddenProp !== undefined;
   const includeHidden = includeHiddenControlled ? includeHiddenProp : uncontrolledIncludeHidden;
@@ -429,6 +450,40 @@ export function FieldRemapPanel({
     applyHistorySnapshot(next);
   };
 
+  const documentImportAvailable =
+    !readOnly && (historyOwnedByPanel || onDocumentReplace !== undefined);
+
+  const importDocumentText = (text: string): FieldRemapDocumentImportActionResult => {
+    let document: FieldRemapDocument;
+    try {
+      document = deserializeFieldRemapImport(text, {
+        sources: sourceFields,
+        targets: targetSlots,
+        transforms: registry,
+      });
+    } catch (error) {
+      if (error instanceof UnsupportedFieldRemapDocumentVersionError) {
+        return { status: 'rejected', code: 'unsupported-version' };
+      }
+      if (error instanceof FieldRemapImportAdmissionError) {
+        return { status: 'rejected', code: error.code };
+      }
+      return { status: 'rejected', code: 'invalid-document' };
+    }
+
+    if (historyOwnedByPanel) {
+      recordSemanticSnapshot(
+        createFieldRemapHistorySnapshot(document.edges, document.operators ?? []),
+      );
+      return { status: 'accepted' };
+    }
+    if (!onDocumentReplace) {
+      return { status: 'rejected', code: 'invalid-document' };
+    }
+    onDocumentReplace(document);
+    return { status: 'accepted' };
+  };
+
   const commitFlowEdges = (next: readonly MappingEdge[]) => {
     if (includeHidden) {
       recordSemanticSnapshot(createFieldRemapHistorySnapshot(next, operators));
@@ -503,6 +558,41 @@ export function FieldRemapPanel({
       : (historyOwner?.canRedo ?? false),
   };
 
+  const handleHistoryKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (readOnly) {
+      return;
+    }
+    if (
+      event.defaultPrevented ||
+      event.altKey ||
+      (!event.ctrlKey && !event.metaKey) ||
+      isFieldRemapEditableShortcutTarget(event.target)
+    ) {
+      return;
+    }
+
+    const key = event.key.toLowerCase();
+    const requestsUndo = key === 'z' && !event.shiftKey;
+    const requestsRedo =
+      (key === 'z' && event.shiftKey) ||
+      (key === 'y' && event.ctrlKey && !event.metaKey && !event.shiftKey);
+    if (
+      (!requestsUndo && !requestsRedo) ||
+      (requestsUndo && !historyAvailability.canUndo) ||
+      (requestsRedo && !historyAvailability.canRedo)
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    if (requestsUndo) {
+      undo();
+    } else {
+      redo();
+    }
+  };
+
   useImperativeHandle(historyActionsRef, () => ({ ...historyAvailability, undo, redo }), [
     historyAvailability.canRedo,
     historyAvailability.canUndo,
@@ -644,10 +734,25 @@ export function FieldRemapPanel({
       data-testid="field-remap-demo"
       data-sample-id={sample.id}
       data-edges-mode={edgesControlled ? 'controlled' : 'uncontrolled'}
+      data-read-only={readOnly ? 'true' : 'false'}
+      onKeyDown={handleHistoryKeyDown}
     >
       <header className="workbench-field-remap-demo__header">
         <h2 className="workbench-field-remap-demo__title">{sample.title}</h2>
         <p className="workbench-field-remap-demo__intro">{sample.description}</p>
+        <FieldRemapDocumentIo
+          getDocumentJson={() =>
+            serializeFieldRemapDocument(
+              createFieldRemapDocument(edges, {
+                ...(operators.length > 0 ? { operators } : {}),
+              }),
+            )
+          }
+          importAvailable={documentImportAvailable}
+          labels={labels}
+          t={t}
+          onImportText={importDocumentText}
+        />
       </header>
 
       {ioChrome === 'edit' ? (
@@ -691,9 +796,11 @@ export function FieldRemapPanel({
       ) : null}
 
       <FieldRemapFlowMapper
+        readOnly={readOnly}
         sources={flowSources}
         targets={flowTargets}
         edges={flowEdges}
+        parentChildConflicts={conflicts}
         transforms={registry}
         onEdgesChange={commitFlowEdges}
         operators={operators}
@@ -708,6 +815,7 @@ export function FieldRemapPanel({
         showBindingsList={showBindingsList}
         showConvertPalette={showConvertPalette}
         emptyDetail={emptyDetail}
+        detailPresentation={detailPresentation}
         {...(showFlowPreview ? { preview, showPreview: true } : {})}
         onShowMinimapChange={onShowMinimapChange}
         includeHidden={includeHidden}
@@ -720,18 +828,6 @@ export function FieldRemapPanel({
         t={t}
       />
 
-      {conflicts.length > 0 ? (
-        <p
-          className="workbench-field-remap-demo__warn"
-          role="status"
-          data-testid="field-remap-conflicts"
-        >
-          Warning: parent and child fields are both mapped (
-          {conflicts.map((item) => `${item.parentId} / ${item.childId}`).join('; ')}). Prefer one
-          level.
-        </p>
-      ) : null}
-
       {preview.status === 'error' ? (
         <p className="workbench-field-remap-demo__error" role="alert">
           {preview.message}

package/src/field-remap/transform-options-editor.tsx

@@ -1,5 +1,12 @@
 import { useEffect, useId, useState, type JSX } from 'react';
-import { Button } from '@workbench-kit/react/primitives';
+import {
+  Button,
+  Checkbox,
+  NumberInput,
+  TextInput,
+  WorkbenchPropertyRow,
+  WorkbenchPropertyStack,
+} from '@workbench-kit/react/primitives';
 import type { TransformOptionField } from '@workbench-kit/field-remap';
 
 export interface TransformOptionsEditorProps {
@@ -128,12 +135,14 @@ function StringMapEditor({
 }
 
 function JsonOptionEditor({
+  controlId,
   field,
   value,
   disabled,
   onChange,
   testId,
 }: {
+  readonly controlId: string;
   readonly field: TransformOptionField;
   readonly value: unknown;
   readonly disabled: boolean;
@@ -153,6 +162,7 @@ function JsonOptionEditor({
   return (
     <div className="workbench-field-remap-options__json">
       <textarea
+        id={controlId}
         aria-label={field.label}
         data-testid={testId}
         disabled={disabled}
@@ -225,65 +235,71 @@ export function TransformOptionsEditor({
   };
 
   return (
-    <div className="workbench-field-remap-options" data-testid={`${testIdPrefix}-editor`}>
+    <WorkbenchPropertyStack
+      className="workbench-field-remap-options"
+      data-field-remap-shortcuts="ignore"
+      data-testid={`${testIdPrefix}-editor`}
+      gap="sm"
+    >
       {fields.map((field) => {
         const controlId = `${baseId}-${field.key}`;
         const testId = `${testIdPrefix}-${field.key}`;
         const current = value[field.key];
 
-        return (
-          <label
-            key={field.key}
-            className="workbench-field-remap-options__field"
-            htmlFor={field.kind === 'boolean' ? controlId : undefined}
-          >
-            <span className="workbench-field-remap-options__label">{field.label}</span>
-            {field.kind === 'string' ? (
-              <input
+        if (field.kind === 'string') {
+          return (
+            <WorkbenchPropertyRow key={field.key} htmlFor={controlId} label={field.label}>
+              <TextInput
                 id={controlId}
-                type="text"
+                controlWidth="full"
                 data-testid={testId}
                 disabled={disabled}
                 aria-label={field.label}
                 value={
                   typeof current === 'string' ? current : current == null ? '' : String(current)
                 }
-                onChange={(event) => setKey(field.key, event.target.value)}
+                onValueChange={(next) => setKey(field.key, next)}
               />
-            ) : null}
-            {field.kind === 'number' ? (
-              <input
+            </WorkbenchPropertyRow>
+          );
+        }
+
+        if (field.kind === 'number') {
+          return (
+            <WorkbenchPropertyRow key={field.key} htmlFor={controlId} label={field.label}>
+              <NumberInput
                 id={controlId}
-                type="number"
+                controlWidth="full"
                 data-testid={testId}
                 disabled={disabled}
                 aria-label={field.label}
-                value={typeof current === 'number' ? current : ''}
-                onChange={(event) => {
-                  const raw = event.target.value;
-                  if (raw === '') {
-                    setKey(field.key, undefined);
-                    return;
-                  }
-                  const parsed = Number(raw);
-                  if (Number.isFinite(parsed)) {
-                    setKey(field.key, parsed);
-                  }
-                }}
+                nullable
+                value={typeof current === 'number' ? current : undefined}
+                onEmptyValue={() => setKey(field.key, undefined)}
+                onValueChange={(next) => setKey(field.key, next)}
               />
-            ) : null}
-            {field.kind === 'boolean' ? (
-              <input
+            </WorkbenchPropertyRow>
+          );
+        }
+
+        if (field.kind === 'boolean') {
+          return (
+            <WorkbenchPropertyRow key={field.key} htmlFor={controlId} label={field.label}>
+              <Checkbox
                 id={controlId}
-                type="checkbox"
                 data-testid={testId}
                 disabled={disabled}
                 aria-label={field.label}
                 checked={Boolean(current)}
-                onChange={(event) => setKey(field.key, event.target.checked)}
+                onCheckedChange={(next) => setKey(field.key, next)}
               />
-            ) : null}
-            {field.kind === 'stringMap' ? (
+            </WorkbenchPropertyRow>
+          );
+        }
+
+        if (field.kind === 'stringMap') {
+          return (
+            <WorkbenchPropertyRow key={field.key} label={field.label}>
               <StringMapEditor
                 field={field}
                 value={current}
@@ -293,19 +309,23 @@ export function TransformOptionsEditor({
                   setKey(field.key, Object.keys(next).length > 0 ? next : undefined)
                 }
               />
-            ) : null}
-            {field.kind === 'json' ? (
-              <JsonOptionEditor
-                field={field}
-                value={current}
-                disabled={disabled}
-                testId={testId}
-                onChange={(next) => setKey(field.key, next)}
-              />
-            ) : null}
-          </label>
+            </WorkbenchPropertyRow>
+          );
+        }
+
+        return (
+          <WorkbenchPropertyRow key={field.key} htmlFor={controlId} label={field.label}>
+            <JsonOptionEditor
+              controlId={controlId}
+              field={field}
+              value={current}
+              disabled={disabled}
+              testId={testId}
+              onChange={(next) => setKey(field.key, next)}
+            />
+          </WorkbenchPropertyRow>
         );
       })}
-    </div>
+    </WorkbenchPropertyStack>
   );
 }