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

package/src/field-remap/panel.tsx

@@ -10,12 +10,18 @@ import {
 } from 'react';
 import {
   createBuiltinValueTransformRegistry,
+  createFieldRemapDocument,
+  deserializeFieldRemapImport,
+  FieldRemapImportAdmissionError,
   findParentChildMappingConflicts,
   projectSourceFields,
   projectTargetSlots,
   pruneMappingEdgesForShapes,
+  serializeFieldRemapDocument,
   sourceFieldsFromPlainObject,
   targetSlotsFromPlainObject,
+  UnsupportedFieldRemapDocumentVersionError,
+  type FieldRemapDocument,
   type MappingEdge,
   type MappingOperator,
   type SourceField,
@@ -52,6 +58,7 @@ import {
 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';
@@ -111,6 +118,11 @@ 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.
@@ -264,6 +276,7 @@ export function FieldRemapPanel({
   onEdgesChange,
   operators: operatorsProp,
   onOperatorsChange,
+  onDocumentReplace,
   historyOwner,
   historyActionsRef,
   onHistoryAvailabilityChange,
@@ -437,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));
@@ -693,6 +740,19 @@ export function FieldRemapPanel({
       <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' ? (

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,69 +235,71 @@ export function TransformOptionsEditor({
   };
 
   return (
-    <div
+    <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}
@@ -297,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>
   );
 }

package/src/field-remap/view.css

@@ -53,6 +53,50 @@
   font-size: 0.8em;
 }
 
+.workbench-field-remap-document-io {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  margin-top: 0.25rem;
+}
+
+.workbench-field-remap-document-io__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.workbench-field-remap-document-io__availability,
+.workbench-field-remap-document-io__status {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-document-io__status[data-status='error'],
+.workbench-field-remap-document-import__error {
+  color: var(--vscode-errorForeground, var(--color-danger));
+}
+
+.workbench-field-remap-document-export__description,
+.workbench-field-remap-document-import__description,
+.workbench-field-remap-document-import__error {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+.workbench-field-remap-document-export__label,
+.workbench-field-remap-document-import__label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.workbench-field-remap-document-export__body textarea,
+.workbench-field-remap-document-import__body textarea {
+  min-height: 14rem;
+}
+
 .workbench-field-remap-demo__error {
   margin: 0;
   color: var(--vscode-errorForeground, var(--color-danger));
@@ -486,22 +530,6 @@
   gap: 0.35rem;
 }
 
-.workbench-field-remap-detail__draft-ports {
-  display: grid;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-.workbench-field-remap-detail__draft-ports dt {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-}
-
-.workbench-field-remap-detail__draft-ports dd {
-  margin: 0;
-}
-
 .workbench-field-remap-flow__canvas {
   height: min(40rem, 70vh);
   min-height: 26rem;
@@ -864,39 +892,6 @@
   background: var(--vscode-editor-background, var(--color-bg));
 }
 
-.workbench-field-remap-convert-note__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.workbench-field-remap-convert-note__eyebrow {
-  margin: 0 0 0.2rem;
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
-}
-
-.workbench-field-remap-convert-note__header h4,
-.workbench-field-remap-convert-note__section h5 {
-  margin: 0 0 0.35rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-}
-
-.workbench-field-remap-convert-note__header h4 {
-  font-size: 1rem;
-  text-transform: none;
-  letter-spacing: normal;
-  color: var(--vscode-foreground, var(--color-text));
-}
-
 .workbench-field-remap-convert-note__binding,
 .workbench-field-remap-convert-note__muted {
   display: block;
@@ -912,68 +907,15 @@
   gap: 0.35rem;
 }
 
-.workbench-field-remap-convert-note__section,
-.workbench-field-remap-convert-note__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.workbench-field-remap-convert-note__field {
-  gap: 0.2rem;
-}
-
-.workbench-field-remap-convert-note select {
-  box-sizing: border-box;
-  width: 100%;
-  margin-top: 0.2rem;
-  padding: 0.3rem 0.4rem;
-  border: 1px solid var(--vscode-panel-border, var(--color-border));
-  border-radius: 0.25rem;
-  background: var(--vscode-input-background, var(--color-bg));
-  color: var(--vscode-input-foreground, var(--color-text));
-  font: inherit;
-}
-
-.workbench-field-remap-convert-note__footer {
-  margin-top: auto;
-  padding-top: 0.5rem;
-  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
-}
-
 .workbench-field-remap-detail--empty {
   color: var(--vscode-descriptionForeground, var(--color-text-muted));
 }
 
-.workbench-field-remap-detail__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.workbench-field-remap-detail__header h4,
-.workbench-field-remap-detail__section h5 {
-  margin: 0 0 0.35rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-}
-
-.workbench-field-remap-detail__header code,
 .workbench-field-remap-detail__steps code {
   font-size: 0.75rem;
   word-break: break-all;
 }
 
-.workbench-field-remap-detail__section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
 .workbench-field-remap-detail__muted {
   margin: 0;
   color: var(--vscode-descriptionForeground, var(--color-text-muted));
@@ -1020,31 +962,12 @@
   color: var(--vscode-descriptionForeground, var(--color-text-muted));
 }
 
-.workbench-field-remap-detail__palette,
-.workbench-field-remap-detail__item-pickers,
-.workbench-field-remap-detail__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
 .workbench-field-remap-detail__palette {
-  flex-direction: row;
   flex-wrap: wrap;
-  align-items: flex-end;
-}
-
-.workbench-field-remap-detail__palette label,
-.workbench-field-remap-detail__item-pickers label,
-.workbench-field-remap-detail__field {
-  flex: 1 1 10rem;
-  min-width: 0;
 }
 
-.workbench-field-remap-detail select,
-.workbench-field-remap-options input[type='text'],
-.workbench-field-remap-options input[type='number'],
-.workbench-field-remap-options textarea {
+.workbench-field-remap-options__string-map input[type='text'],
+.workbench-field-remap-options__json textarea {
   box-sizing: border-box;
   width: 100%;
   margin-top: 0.2rem;
@@ -1056,13 +979,6 @@
   font: inherit;
 }
 
-.workbench-field-remap-detail__list-context-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
 .workbench-field-remap-detail__item-edges {
   list-style: none;
   margin: 0;
@@ -1079,23 +995,6 @@
   gap: 0.35rem;
 }
 
-.workbench-field-remap-options {
-  display: flex;
-  flex-direction: column;
-  gap: 0.55rem;
-}
-
-.workbench-field-remap-options__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-
-.workbench-field-remap-options__label {
-  font-size: 0.75rem;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-}
-
 .workbench-field-remap-options__empty,
 .workbench-field-remap-options__error {
   margin: 0;

package/src/keybinding-management-settings.ts

@@ -0,0 +1,4 @@
+export {
+  WorkbenchKeybindingManagementSettingsView,
+  type WorkbenchKeybindingManagementSettingsViewProps,
+} from './management/keybinding-settings-view.js';

package/src/management/keybinding-settings-view.tsx

@@ -0,0 +1,31 @@
+import type { KeybindingManagementEntry, WorkbenchShortcutPlatform } from '@workbench-kit/platform';
+import { KeybindingManagementPanel } from '@workbench-kit/react/workbench/management';
+
+export interface WorkbenchKeybindingManagementSettingsViewProps {
+  readonly editingDisabledReason?: string | undefined;
+  readonly entries: readonly KeybindingManagementEntry[];
+  readonly overrideCount: number;
+  readonly platform: WorkbenchShortcutPlatform;
+  readonly resetKeybinding: (commandId: string) => void;
+  readonly setKeybinding: (commandId: string, key: string | undefined) => void;
+}
+
+export function WorkbenchKeybindingManagementSettingsView({
+  editingDisabledReason,
+  entries,
+  overrideCount,
+  platform,
+  resetKeybinding,
+  setKeybinding,
+}: WorkbenchKeybindingManagementSettingsViewProps) {
+  return (
+    <KeybindingManagementPanel
+      editingDisabledReason={editingDisabledReason}
+      entries={entries}
+      platform={platform}
+      summaryLabel={`${entries.length} command${entries.length === 1 ? '' : 's'} · ${overrideCount} user override${overrideCount === 1 ? '' : 's'}`}
+      onResetKeybinding={resetKeybinding}
+      onSetKeybinding={setKeybinding}
+    />
+  );
+}

package/src/management/keybinding-settings.tsx

@@ -1,25 +1,8 @@
-import { KeybindingManagementPanel } from '@workbench-kit/react/workbench/management';
-
-import { useKeybindingManagementModel } from './use-keybinding-management.js';
+import { useWorkbenchKeybindingManagementBinding } from '../shell/provider.js';
+import { WorkbenchKeybindingManagementSettingsView } from './keybinding-settings-view.js';
 
 export function WorkbenchKeybindingManagementSettings() {
-  const {
-    editingDisabledReason,
-    entries,
-    overrideCount,
-    platform,
-    resetKeybinding,
-    setKeybinding,
-  } = useKeybindingManagementModel();
+  const binding = useWorkbenchKeybindingManagementBinding();
 
-  return (
-    <KeybindingManagementPanel
-      editingDisabledReason={editingDisabledReason}
-      entries={entries}
-      platform={platform}
-      summaryLabel={`${entries.length} command${entries.length === 1 ? '' : 's'} · ${overrideCount} user override${overrideCount === 1 ? '' : 's'}`}
-      onResetKeybinding={resetKeybinding}
-      onSetKeybinding={setKeybinding}
-    />
-  );
+  return <WorkbenchKeybindingManagementSettingsView {...binding} />;
 }

package/src/management/use-keybinding-management.ts

@@ -1,12 +1,12 @@
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { createKeybindingManagementModel } from '@workbench-kit/platform';
-import { createWorkbenchShellCommands } from '@workbench-kit/react/workbench';
+import { createWorkbenchShellCommands } from '@workbench-kit/react/workbench/commands';
 
-import { useWorkbench, type WorkbenchContextValue } from '../shell/provider.js';
+import type { WorkbenchContextValue } from '../shell/provider.js';
 import { resolveShellCommandActivities } from '../workbench/command-palette.js';
 import { normalizeExtensionKeybindingCandidates } from '../workbench/keybinding-bridge.js';
 
-export function useKeybindingManagementModel() {
+export function useKeybindingManagementModel(context: WorkbenchContextValue) {
   const {
     activities,
     commands,
@@ -19,7 +19,7 @@ export function useKeybindingManagementModel() {
     resetCommandKeybindingOverride,
     setCommandKeybindingOverride,
     views,
-  } = useWorkbench();
+  } = context;
 
   const [keybindingRevision, setKeybindingRevision] = useState(() => keybindings.revision);
   useLayoutEffect(() => {

package/src/shell/provider.tsx

@@ -9,6 +9,8 @@ import {
   useState,
   type ReactNode,
 } from 'react';
+import type { WorkbenchKeybindingManagementSettingsViewProps } from '../management/keybinding-settings-view.js';
+import { useKeybindingManagementModel } from '../management/use-keybinding-management.js';
 import {
   collectConfigurationDefaults,
   createEditorService,
@@ -1048,7 +1050,10 @@ export function WorkbenchProvider({
     <WorkbenchPersistenceDiagnosticContext.Provider value={onPersistenceDiagnostic}>
       <WorkbenchContext.Provider value={value}>
         <ExtensionEnablementContext.Provider value={services.extensionEnablement}>
-          <EditorWorkspaceReconciler />
+          <EditorWorkspaceReconciler
+            editorService={services.editorService}
+            workspaceHostService={services.workspaceHostPort?.service}
+          />
           {children}
         </ExtensionEnablementContext.Provider>
       </WorkbenchContext.Provider>
@@ -1064,3 +1069,7 @@ export function useWorkbench(): WorkbenchContextValue {
 
   return value;
 }
+
+export function useWorkbenchKeybindingManagementBinding(): WorkbenchKeybindingManagementSettingsViewProps {
+  return useKeybindingManagementModel(useWorkbench());
+}