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

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,
@@ -28,6 +35,7 @@ export interface ConvertNoteEditorProps {
   readonly onEdgesChange: (edges: readonly MappingEdge[]) => void;
   readonly edges: readonly MappingEdge[];
   readonly onSelectionChange: (next: FieldRemapSelection) => void;
+  readonly readOnly?: boolean | undefined;
 }
 
 /**
@@ -43,7 +51,9 @@ export function ConvertNoteEditor({
   edges,
   onEdgesChange,
   onSelectionChange,
+  readOnly = false,
 }: ConvertNoteEditorProps): JSX.Element | null {
+  const transformSelectId = useId();
   const chain = edge.transformIds ?? [];
   const transformId = chain[stepIndex];
 
@@ -77,7 +87,7 @@ export function ConvertNoteEditor({
   const stepLabel = definition?.label ?? transformId;
 
   const applyEdge = (next: MappingEdge | null) => {
-    if (!next) {
+    if (readOnly || !next) {
       return;
     }
     onEdgesChange(edges.map((item) => (item.id === edge.id ? next : item)));
@@ -89,111 +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>
 
-      <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>
+        <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-options"
-      >
-        <h5 id="field-remap-convert-note-options">Options</h5>
-        <TransformOptionsEditor
-          fields={optionFields}
-          value={optionValue}
-          onChange={(nextOptions) => {
-            applyEdge(replaceTransformStepOptionsOnEdge(edge, stepIndex, nextOptions));
-          }}
-        />
-      </section>
+        <WorkbenchPropertySection title="Options">
+          <TransformOptionsEditor
+            fields={optionFields}
+            value={optionValue}
+            disabled={readOnly}
+            onChange={(nextOptions) => {
+              applyEdge(replaceTransformStepOptionsOnEdge(edge, stepIndex, nextOptions));
+            }}
+          />
+        </WorkbenchPropertySection>
 
-      <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>
+        {!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>
   );
 }

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

@@ -4,6 +4,7 @@ import { ClearableTextInput, IconButton } from '@workbench-kit/react/primitives'
 import type { ValueTransformRegistry } from '@workbench-kit/field-remap';
 
 import { defaultFieldRemapChromeLabels, type FieldRemapChromeLabels } from './chrome-labels.js';
+import { writeFieldRemapTransformDragData } from './drag-payload.js';
 
 export interface FieldRemapConvertPaletteProps {
   readonly transforms: ValueTransformRegistry;
@@ -207,6 +208,7 @@ export function FieldRemapConvertPalette({
               key={definition.id}
               aria-selected={selected}
               data-testid={`field-remap-palette-item-${definition.id}`}
+              draggable
               role="option"
               selected={selected}
               tabIndex={definition.id === rovingTransformId ? 0 : -1}
@@ -217,6 +219,10 @@ export function FieldRemapConvertPalette({
                 onSelectedTransformIdChange(definition.id);
               }}
               onDoubleClick={() => onPlaceDraft(definition.id)}
+              onDragStart={(event) => {
+                event.dataTransfer.effectAllowed = 'copy';
+                writeFieldRemapTransformDragData(event.dataTransfer, definition.id);
+              }}
               onFocus={() => setRequestedRovingTransformId(definition.id)}
               onKeyDown={(event) => handleOptionKeyDown(event, definition.id)}
             >

package/src/field-remap/demo.tsx

@@ -25,6 +25,8 @@ export interface SampleFieldRemapDemoProps {
   readonly showBindingsList?: FieldRemapFlowMapperProps['showBindingsList'];
   readonly showConvertPalette?: FieldRemapFlowMapperProps['showConvertPalette'];
   readonly emptyDetail?: FieldRemapFlowMapperProps['emptyDetail'];
+  readonly detailPresentation?: FieldRemapFlowMapperProps['detailPresentation'];
+  readonly readOnly?: FieldRemapFlowMapperProps['readOnly'];
   /** When true, show host-chrome demo controls (history + fit view). */
   readonly showHostChromeDemo?: boolean | undefined;
   /** Prefer `browse` for I/O class/field inspection demos. */
@@ -46,6 +48,8 @@ export function SampleFieldRemapDemo({
   showBindingsList,
   showConvertPalette,
   emptyDetail,
+  detailPresentation,
+  readOnly,
   showHostChromeDemo = false,
   ioChrome,
   browseSeedShapes = false,
@@ -89,7 +93,7 @@ export function SampleFieldRemapDemo({
             compact
             type="button"
             data-testid="field-remap-undo"
-            disabled={!historyAvailability.canUndo}
+            disabled={readOnly || !historyAvailability.canUndo}
             onClick={() => historyActionsRef.current?.undo()}
           >
             Undo
@@ -98,7 +102,7 @@ export function SampleFieldRemapDemo({
             compact
             type="button"
             data-testid="field-remap-redo"
-            disabled={!historyAvailability.canRedo}
+            disabled={readOnly || !historyAvailability.canRedo}
             onClick={() => historyActionsRef.current?.redo()}
           >
             Redo
@@ -119,6 +123,8 @@ export function SampleFieldRemapDemo({
         showBindingsList={showBindingsList}
         showConvertPalette={showConvertPalette}
         emptyDetail={emptyDetail}
+        detailPresentation={detailPresentation}
+        readOnly={readOnly}
         onShowMinimapChange={setShowMinimap}
         ioChrome={ioChrome}
         editableShapes={ioChrome === 'browse' ? false : undefined}