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

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

@@ -1,5 +1,13 @@
-import { useMemo, useState, type JSX } from 'react';
-import { Button } from '@workbench-kit/react/primitives';
+import { useId, useMemo, useState, type JSX } from 'react';
+import { WorkbenchPropertyInline } from '@workbench-kit/react/layout';
+import {
+  Button,
+  Select,
+  WorkbenchPropertyHint,
+  WorkbenchPropertyRow,
+  WorkbenchPropertySection,
+  WorkbenchPropertyStack,
+} from '@workbench-kit/react/primitives';
 import {
   MAX_TRANSFORM_CHAIN,
   findSourceField,
@@ -45,6 +53,7 @@ export interface FieldRemapDetailPanelProps {
   readonly onDiscardDraft?: ((localId: string) => void) | undefined;
   readonly operators?: readonly MappingOperator[] | undefined;
   readonly onOperatorsChange?: ((operators: readonly MappingOperator[]) => void) | undefined;
+  readonly readOnly?: boolean | undefined;
   readonly emptyDetailTitle?: string | undefined;
   readonly emptyDetailDescription?: string | undefined;
 }
@@ -79,6 +88,7 @@ export function FieldRemapDetailPanel({
   onDiscardDraft,
   operators = [],
   onOperatorsChange,
+  readOnly = false,
   emptyDetailTitle = 'Start with a convert',
   emptyDetailDescription = 'Use the Convert palette to place a convert, then wire source → draft → target. Or select an existing binding / convert note on the canvas.',
 }: FieldRemapDetailPanelProps): JSX.Element | null {
@@ -107,8 +117,22 @@ export function FieldRemapDetailPanel({
   const [paletteId, setPaletteId] = useState<string>('');
   const [pendingOperatorFieldId, setPendingOperatorFieldId] = useState('');
   const [pendingOperatorSlotId, setPendingOperatorSlotId] = useState('');
+  const propertyId = useId();
+  const operatorAddInputId = `${propertyId}-operator-add-input`;
+  const operatorOutputId = `${propertyId}-operator-output`;
+  const operatorInputId = `${propertyId}-operator-input`;
+  const operatorAddOutputId = `${propertyId}-operator-add-output`;
+  const paletteSelectId = `${propertyId}-palette-select`;
+  const itemSourceId = `${propertyId}-item-source`;
+  const itemTargetId = `${propertyId}-item-target`;
   const flatSources = useMemo(() => flattenSourceFields(sources), [sources]);
   const flatTargets = useMemo(() => flattenTargetSlots(targets), [targets]);
+  const commitOperators = (next: readonly MappingOperator[]) => {
+    if (readOnly) {
+      return;
+    }
+    onOperatorsChange?.(next);
+  };
 
   if (!selection) {
     return (
@@ -117,8 +141,16 @@ export function FieldRemapDetailPanel({
         data-testid="field-remap-detail"
         aria-label="Binding details"
       >
-        <h4>{emptyDetailTitle}</h4>
-        <p data-testid="field-remap-detail-empty-hint">{emptyDetailDescription}</p>
+        <WorkbenchPropertyStack gap="sm">
+          <WorkbenchPropertySection title={emptyDetailTitle}>
+            <WorkbenchPropertyHint
+              className="workbench-field-remap-detail__muted"
+              data-testid="field-remap-detail-empty-hint"
+            >
+              {emptyDetailDescription}
+            </WorkbenchPropertyHint>
+          </WorkbenchPropertySection>
+        </WorkbenchPropertyStack>
       </aside>
     );
   }
@@ -131,58 +163,71 @@ export function FieldRemapDetailPanel({
         data-testid="field-remap-detail"
         aria-label="Draft convert"
       >
-        <div className="workbench-field-remap-detail__header">
-          <div>
-            <h4>Draft convert</h4>
-            <code data-testid="field-remap-detail-draft-id">
-              {definition?.label ?? draft?.transformId ?? selection.localId}
-            </code>
-          </div>
-          <Button
-            compact
-            type="button"
-            data-testid="field-remap-detail-discard-draft"
-            onClick={() => {
-              onDiscardDraft?.(selection.localId);
-              onSelectionChange(null);
-            }}
+        <WorkbenchPropertyStack gap="sm">
+          <WorkbenchPropertySection
+            title="Draft convert"
+            actions={
+              !readOnly ? (
+                <Button
+                  compact
+                  type="button"
+                  data-testid="field-remap-detail-discard-draft"
+                  onClick={() => {
+                    onDiscardDraft?.(selection.localId);
+                    onSelectionChange(null);
+                  }}
+                >
+                  Discard
+                </Button>
+              ) : null
+            }
           >
-            Discard
-          </Button>
-        </div>
-        <p className="workbench-field-remap-detail__muted">
-          Wire source then target ports. When both bind, the convert note editor opens.
-        </p>
-        <dl
-          className="workbench-field-remap-detail__draft-ports"
-          data-testid="field-remap-detail-draft-ports"
-        >
-          <div>
-            <dt>Source</dt>
-            <dd>
-              <code>{draft?.sourceFieldId ?? 'Unwired'}</code>
-            </dd>
-          </div>
-          <div>
-            <dt>Target</dt>
-            <dd>
-              <code>{draft?.targetSlotId ?? 'Unwired'}</code>
-            </dd>
-          </div>
-        </dl>
+            <WorkbenchPropertyStack gap="sm">
+              <WorkbenchPropertyRow label="Convert">
+                <code data-testid="field-remap-detail-draft-id">
+                  {definition?.label ?? draft?.transformId ?? selection.localId}
+                </code>
+              </WorkbenchPropertyRow>
+              <WorkbenchPropertyHint className="workbench-field-remap-detail__muted">
+                Wire source then target ports. When both bind, the convert note editor opens.
+              </WorkbenchPropertyHint>
+            </WorkbenchPropertyStack>
+          </WorkbenchPropertySection>
+          <WorkbenchPropertySection
+            level="group"
+            title="Ports"
+            data-testid="field-remap-detail-draft-ports"
+          >
+            <WorkbenchPropertyStack gap="xs">
+              <WorkbenchPropertyRow label="Source">
+                <code>{draft?.sourceFieldId ?? 'Unwired'}</code>
+              </WorkbenchPropertyRow>
+              <WorkbenchPropertyRow label="Target">
+                <code>{draft?.targetSlotId ?? 'Unwired'}</code>
+              </WorkbenchPropertyRow>
+            </WorkbenchPropertyStack>
+          </WorkbenchPropertySection>
+        </WorkbenchPropertyStack>
       </aside>
     );
   }
 
   if (selection.kind === 'operator') {
-    if (!operator || !onOperatorsChange) {
+    if (!operator || (!readOnly && !onOperatorsChange)) {
       return (
         <aside className="workbench-field-remap-detail" data-testid="field-remap-detail">
-          <h4>Operator</h4>
-          <code data-testid="field-remap-detail-operator-id">{selection.operatorId}</code>
-          <p className="workbench-field-remap-detail__muted">
-            Host must wire onOperatorsChange for authoring.
-          </p>
+          <WorkbenchPropertyStack gap="sm">
+            <WorkbenchPropertySection title="Operator">
+              <WorkbenchPropertyStack gap="sm">
+                <WorkbenchPropertyRow label="Identifier">
+                  <code data-testid="field-remap-detail-operator-id">{selection.operatorId}</code>
+                </WorkbenchPropertyRow>
+                <WorkbenchPropertyHint className="workbench-field-remap-detail__muted">
+                  Host must wire onOperatorsChange for authoring.
+                </WorkbenchPropertyHint>
+              </WorkbenchPropertyStack>
+            </WorkbenchPropertySection>
+          </WorkbenchPropertyStack>
         </aside>
       );
     }
@@ -192,192 +237,217 @@ export function FieldRemapDetailPanel({
         data-testid="field-remap-detail"
         aria-label="Operator details"
       >
-        <div className="workbench-field-remap-detail__header">
-          <div>
-            <h4>{operator.kind === 'combine' ? 'Combine (n→1)' : 'Split (1→n)'}</h4>
-            <code data-testid="field-remap-detail-operator-id">{operator.id}</code>
-          </div>
-          <Button
-            compact
-            type="button"
-            data-testid="field-remap-detail-delete-operator"
-            onClick={() => {
-              onOperatorsChange(removeMappingOperator(operators, operator.id));
-              onSelectionChange(null);
-            }}
+        <WorkbenchPropertyStack gap="sm">
+          <WorkbenchPropertySection
+            title={operator.kind === 'combine' ? 'Combine (n→1)' : 'Split (1→n)'}
+            actions={
+              !readOnly ? (
+                <Button
+                  compact
+                  type="button"
+                  data-testid="field-remap-detail-delete-operator"
+                  onClick={() => {
+                    commitOperators(removeMappingOperator(operators, operator.id));
+                    onSelectionChange(null);
+                  }}
+                >
+                  Delete
+                </Button>
+              ) : null
+            }
           >
-            Delete
-          </Button>
-        </div>
-        {operator.kind === 'combine' ? (
-          <section className="workbench-field-remap-detail__section">
-            <h5>Inputs</h5>
-            <ul className="workbench-field-remap-detail__item-edges">
-              {operator.inputFieldIds.map((fieldId) => (
-                <li key={fieldId}>
-                  <code>{fieldLabel(fieldId, sources, targets)}</code>
-                  <Button
-                    compact
-                    type="button"
-                    onClick={() =>
-                      onOperatorsChange(
+            <WorkbenchPropertyRow label="Identifier">
+              <code data-testid="field-remap-detail-operator-id">{operator.id}</code>
+            </WorkbenchPropertyRow>
+          </WorkbenchPropertySection>
+          {operator.kind === 'combine' ? (
+            <WorkbenchPropertySection level="group" title="Inputs">
+              <WorkbenchPropertyStack gap="sm">
+                <ul className="workbench-field-remap-detail__item-edges">
+                  {operator.inputFieldIds.map((fieldId) => (
+                    <li key={fieldId}>
+                      <WorkbenchPropertyInline justify="between">
+                        <code>{fieldLabel(fieldId, sources, targets)}</code>
+                        {!readOnly ? (
+                          <Button
+                            compact
+                            type="button"
+                            onClick={() =>
+                              commitOperators(
+                                updateMappingOperator(operators, operator.id, (current) =>
+                                  removeOperatorInput(current, fieldId),
+                                ),
+                              )
+                            }
+                          >
+                            Remove
+                          </Button>
+                        ) : null}
+                      </WorkbenchPropertyInline>
+                    </li>
+                  ))}
+                </ul>
+                {!readOnly ? (
+                  <WorkbenchPropertyRow label="Add input" htmlFor={operatorAddInputId}>
+                    <WorkbenchPropertyInline>
+                      <Select
+                        id={operatorAddInputId}
+                        aria-label="Add input"
+                        controlWidth="full"
+                        data-testid="field-remap-operator-add-input"
+                        value={pendingOperatorFieldId}
+                        onValueChange={setPendingOperatorFieldId}
+                      >
+                        <option value="">Select…</option>
+                        {flatSources.map((field) => (
+                          <option key={field.id} value={field.id}>
+                            {field.path ?? field.label}
+                          </option>
+                        ))}
+                      </Select>
+                      <Button
+                        compact
+                        type="button"
+                        data-testid="field-remap-operator-bind-input"
+                        disabled={!pendingOperatorFieldId}
+                        onClick={() => {
+                          if (!pendingOperatorFieldId) return;
+                          commitOperators(
+                            updateMappingOperator(operators, operator.id, (current) =>
+                              bindOperatorInput(current, pendingOperatorFieldId),
+                            ),
+                          );
+                          setPendingOperatorFieldId('');
+                        }}
+                      >
+                        Add
+                      </Button>
+                    </WorkbenchPropertyInline>
+                  </WorkbenchPropertyRow>
+                ) : null}
+                <WorkbenchPropertyRow label="Output slot" htmlFor={operatorOutputId}>
+                  <Select
+                    id={operatorOutputId}
+                    aria-label="Output slot"
+                    controlWidth="full"
+                    data-testid="field-remap-operator-output"
+                    value={operator.outputSlotId}
+                    disabled={readOnly}
+                    onValueChange={(slotId) => {
+                      commitOperators(
                         updateMappingOperator(operators, operator.id, (current) =>
-                          removeOperatorInput(current, fieldId),
+                          slotId
+                            ? bindOperatorOutput(current, slotId)
+                            : removeOperatorOutput(current, operator.outputSlotId),
                         ),
-                      )
-                    }
+                      );
+                    }}
                   >
-                    Remove
-                  </Button>
-                </li>
-              ))}
-            </ul>
-            <div className="workbench-field-remap-detail__field">
-              <label>
-                <span>Add input</span>
-                <select
-                  data-testid="field-remap-operator-add-input"
-                  value={pendingOperatorFieldId}
-                  onChange={(event) => setPendingOperatorFieldId(event.target.value)}
-                >
-                  <option value="">Select…</option>
-                  {flatSources.map((field) => (
-                    <option key={field.id} value={field.id}>
-                      {field.path ?? field.label}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <Button
-                compact
-                type="button"
-                data-testid="field-remap-operator-bind-input"
-                disabled={!pendingOperatorFieldId}
-                onClick={() => {
-                  if (!pendingOperatorFieldId) return;
-                  onOperatorsChange(
-                    updateMappingOperator(operators, operator.id, (current) =>
-                      bindOperatorInput(current, pendingOperatorFieldId),
-                    ),
-                  );
-                  setPendingOperatorFieldId('');
-                }}
-              >
-                Add
-              </Button>
-            </div>
-            <div className="workbench-field-remap-detail__field">
-              <label>
-                <span>Output slot</span>
-                <select
-                  data-testid="field-remap-operator-output"
-                  value={operator.outputSlotId}
-                  onChange={(event) => {
-                    const slotId = event.target.value;
-                    onOperatorsChange(
-                      updateMappingOperator(operators, operator.id, (current) =>
-                        slotId
-                          ? bindOperatorOutput(current, slotId)
-                          : removeOperatorOutput(current, operator.outputSlotId),
-                      ),
-                    );
-                  }}
-                >
-                  <option value="">Unwired…</option>
-                  {flatTargets.map((slot) => (
-                    <option key={slot.id} value={slot.id}>
-                      {slot.path ?? slot.label}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            </div>
-          </section>
-        ) : (
-          <section className="workbench-field-remap-detail__section">
-            <div className="workbench-field-remap-detail__field">
-              <label>
-                <span>Input field</span>
-                <select
-                  data-testid="field-remap-operator-input"
-                  value={operator.inputFieldId}
-                  onChange={(event) => {
-                    const fieldId = event.target.value;
-                    onOperatorsChange(
-                      updateMappingOperator(operators, operator.id, (current) =>
-                        fieldId
-                          ? bindOperatorInput(current, fieldId)
-                          : removeOperatorInput(current, operator.inputFieldId),
-                      ),
-                    );
-                  }}
-                >
-                  <option value="">Unwired…</option>
-                  {flatSources.map((field) => (
-                    <option key={field.id} value={field.id}>
-                      {field.path ?? field.label}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            </div>
-            <h5>Outputs</h5>
-            <ul className="workbench-field-remap-detail__item-edges">
-              {operator.outputSlotIds.map((slotId) => (
-                <li key={slotId}>
-                  <code>{fieldLabel(slotId, sources, targets)}</code>
-                  <Button
-                    compact
-                    type="button"
-                    onClick={() =>
-                      onOperatorsChange(
+                    <option value="">Unwired…</option>
+                    {flatTargets.map((slot) => (
+                      <option key={slot.id} value={slot.id}>
+                        {slot.path ?? slot.label}
+                      </option>
+                    ))}
+                  </Select>
+                </WorkbenchPropertyRow>
+              </WorkbenchPropertyStack>
+            </WorkbenchPropertySection>
+          ) : (
+            <WorkbenchPropertySection level="group" title="Outputs">
+              <WorkbenchPropertyStack gap="sm">
+                <WorkbenchPropertyRow label="Input field" htmlFor={operatorInputId}>
+                  <Select
+                    id={operatorInputId}
+                    aria-label="Input field"
+                    controlWidth="full"
+                    data-testid="field-remap-operator-input"
+                    value={operator.inputFieldId}
+                    disabled={readOnly}
+                    onValueChange={(fieldId) => {
+                      commitOperators(
                         updateMappingOperator(operators, operator.id, (current) =>
-                          removeOperatorOutput(current, slotId),
+                          fieldId
+                            ? bindOperatorInput(current, fieldId)
+                            : removeOperatorInput(current, operator.inputFieldId),
                         ),
-                      )
-                    }
+                      );
+                    }}
                   >
-                    Remove
-                  </Button>
-                </li>
-              ))}
-            </ul>
-            <div className="workbench-field-remap-detail__field">
-              <label>
-                <span>Add output</span>
-                <select
-                  data-testid="field-remap-operator-add-output"
-                  value={pendingOperatorSlotId}
-                  onChange={(event) => setPendingOperatorSlotId(event.target.value)}
-                >
-                  <option value="">Select…</option>
-                  {flatTargets.map((slot) => (
-                    <option key={slot.id} value={slot.id}>
-                      {slot.path ?? slot.label}
-                    </option>
+                    <option value="">Unwired…</option>
+                    {flatSources.map((field) => (
+                      <option key={field.id} value={field.id}>
+                        {field.path ?? field.label}
+                      </option>
+                    ))}
+                  </Select>
+                </WorkbenchPropertyRow>
+                <ul className="workbench-field-remap-detail__item-edges">
+                  {operator.outputSlotIds.map((slotId) => (
+                    <li key={slotId}>
+                      <WorkbenchPropertyInline justify="between">
+                        <code>{fieldLabel(slotId, sources, targets)}</code>
+                        {!readOnly ? (
+                          <Button
+                            compact
+                            type="button"
+                            onClick={() =>
+                              commitOperators(
+                                updateMappingOperator(operators, operator.id, (current) =>
+                                  removeOperatorOutput(current, slotId),
+                                ),
+                              )
+                            }
+                          >
+                            Remove
+                          </Button>
+                        ) : null}
+                      </WorkbenchPropertyInline>
+                    </li>
                   ))}
-                </select>
-              </label>
-              <Button
-                compact
-                type="button"
-                data-testid="field-remap-operator-bind-output"
-                disabled={!pendingOperatorSlotId}
-                onClick={() => {
-                  if (!pendingOperatorSlotId) return;
-                  onOperatorsChange(
-                    updateMappingOperator(operators, operator.id, (current) =>
-                      bindOperatorOutput(current, pendingOperatorSlotId),
-                    ),
-                  );
-                  setPendingOperatorSlotId('');
-                }}
-              >
-                Add
-              </Button>
-            </div>
-          </section>
-        )}
+                </ul>
+                {!readOnly ? (
+                  <WorkbenchPropertyRow label="Add output" htmlFor={operatorAddOutputId}>
+                    <WorkbenchPropertyInline>
+                      <Select
+                        id={operatorAddOutputId}
+                        aria-label="Add output"
+                        controlWidth="full"
+                        data-testid="field-remap-operator-add-output"
+                        value={pendingOperatorSlotId}
+                        onValueChange={setPendingOperatorSlotId}
+                      >
+                        <option value="">Select…</option>
+                        {flatTargets.map((slot) => (
+                          <option key={slot.id} value={slot.id}>
+                            {slot.path ?? slot.label}
+                          </option>
+                        ))}
+                      </Select>
+                      <Button
+                        compact
+                        type="button"
+                        data-testid="field-remap-operator-bind-output"
+                        disabled={!pendingOperatorSlotId}
+                        onClick={() => {
+                          if (!pendingOperatorSlotId) return;
+                          commitOperators(
+                            updateMappingOperator(operators, operator.id, (current) =>
+                              bindOperatorOutput(current, pendingOperatorSlotId),
+                            ),
+                          );
+                          setPendingOperatorSlotId('');
+                        }}
+                      >
+                        Add
+                      </Button>
+                    </WorkbenchPropertyInline>
+                  </WorkbenchPropertyRow>
+                ) : null}
+              </WorkbenchPropertyStack>
+            </WorkbenchPropertySection>
+          )}
+        </WorkbenchPropertyStack>
       </aside>
     );
   }
@@ -389,23 +459,32 @@ export function FieldRemapDetailPanel({
         data-testid="field-remap-detail"
         aria-label="Binding details"
       >
-        <p>Select a binding for mapping details, or a convert node to open the convert editor.</p>
+        <WorkbenchPropertyStack gap="sm">
+          <WorkbenchPropertySection title="Binding">
+            <WorkbenchPropertyHint className="workbench-field-remap-detail__muted">
+              Select a binding for mapping details, or a convert node to open the convert editor.
+            </WorkbenchPropertyHint>
+          </WorkbenchPropertySection>
+        </WorkbenchPropertyStack>
       </aside>
     );
   }
 
   if (selection.kind === 'transformStep') {
     return (
-      <ConvertNoteEditor
-        edge={edge}
-        stepIndex={selection.stepIndex}
-        sources={sources}
-        targets={targets}
-        transforms={transforms}
-        edges={edges}
-        onEdgesChange={onEdgesChange}
-        onSelectionChange={onSelectionChange}
-      />
+      <div data-testid="field-remap-detail-transform-step">
+        <ConvertNoteEditor
+          edge={edge}
+          stepIndex={selection.stepIndex}
+          sources={sources}
+          targets={targets}
+          transforms={transforms}
+          edges={edges}
+          onEdgesChange={onEdgesChange}
+          onSelectionChange={onSelectionChange}
+          readOnly={readOnly}
+        />
+      </div>
     );
   }
 
@@ -432,7 +511,7 @@ export function FieldRemapDetailPanel({
   const itemTargetChildren = targetSlot?.children ?? [];
 
   const applyEdge = (next: MappingEdge | null) => {
-    if (!next) {
+    if (readOnly || !next) {
       return;
     }
     onEdgesChange(edges.map((item) => (item.id === edge.id ? next : item)));
@@ -444,217 +523,239 @@ export function FieldRemapDetailPanel({
       data-testid="field-remap-detail"
       aria-label="Binding details"
     >
-      <div className="workbench-field-remap-detail__header">
-        <div>
-          <h4>Binding</h4>
-          <code data-testid="field-remap-detail-binding">
-            {edge.sourceFieldId} → {edge.targetSlotId}
-          </code>
-        </div>
-        <Button
-          compact
-          type="button"
-          data-testid="field-remap-detail-clear"
-          onClick={() => onSelectionChange(null)}
+      <WorkbenchPropertyStack gap="sm">
+        <WorkbenchPropertySection
+          title="Binding"
+          actions={
+            <Button
+              compact
+              type="button"
+              data-testid="field-remap-detail-clear"
+              onClick={() => onSelectionChange(null)}
+            >
+              Clear
+            </Button>
+          }
         >
-          Clear
-        </Button>
-      </div>
+          <WorkbenchPropertyRow label="Route">
+            <code data-testid="field-remap-detail-binding">
+              {edge.sourceFieldId} → {edge.targetSlotId}
+            </code>
+          </WorkbenchPropertyRow>
+        </WorkbenchPropertySection>
 
-      <section
-        className="workbench-field-remap-detail__section"
-        aria-labelledby="field-remap-detail-chain"
-      >
-        <h5 id="field-remap-detail-chain">Convert chain</h5>
-        {chain.length === 0 ? (
-          <p className="workbench-field-remap-detail__muted">Direct (no convert)</p>
-        ) : (
-          <ol className="workbench-field-remap-detail__steps">
-            {chain.map((transformId, index) => {
-              const definition = transforms.get(transformId);
-              return (
-                <li key={`${edge.id}-${index}-${transformId}`}>
-                  <button
-                    type="button"
-                    className="workbench-field-remap-detail__step"
-                    data-testid={`field-remap-detail-step-${index}`}
-                    onClick={() =>
-                      onSelectionChange({
-                        kind: 'transformStep',
-                        edgeId: edge.id,
-                        stepIndex: index,
-                      })
-                    }
+        <WorkbenchPropertySection level="group" title="Convert chain">
+          <WorkbenchPropertyStack gap="sm">
+            {chain.length === 0 ? (
+              <WorkbenchPropertyHint className="workbench-field-remap-detail__muted">
+                Direct (no convert)
+              </WorkbenchPropertyHint>
+            ) : (
+              <ol className="workbench-field-remap-detail__steps">
+                {chain.map((transformId, index) => {
+                  const definition = transforms.get(transformId);
+                  return (
+                    <li key={`${edge.id}-${index}-${transformId}`}>
+                      <WorkbenchPropertyInline justify="between">
+                        <button
+                          type="button"
+                          className="workbench-field-remap-detail__step"
+                          data-testid={`field-remap-detail-step-${index}`}
+                          onClick={() =>
+                            onSelectionChange({
+                              kind: 'transformStep',
+                              edgeId: edge.id,
+                              stepIndex: index,
+                            })
+                          }
+                        >
+                          <strong>{definition?.label ?? transformId}</strong>
+                          <code>{transformId}</code>
+                          <WorkbenchPropertyHint className="workbench-field-remap-detail__step-hint">
+                            {readOnly ? 'Inspect convert' : 'Edit convert'}
+                          </WorkbenchPropertyHint>
+                        </button>
+                        {!readOnly ? (
+                          <Button
+                            compact
+                            type="button"
+                            aria-label={`Remove convert step ${index + 1}`}
+                            data-testid={`field-remap-detail-remove-step-${index}`}
+                            onClick={() => {
+                              const next = removeTransformStepFromEdge(edge, index);
+                              applyEdge(next);
+                            }}
+                          >
+                            ×
+                          </Button>
+                        ) : null}
+                      </WorkbenchPropertyInline>
+                    </li>
+                  );
+                })}
+              </ol>
+            )}
+
+            {!readOnly && chain.length < MAX_TRANSFORM_CHAIN ? (
+              <WorkbenchPropertyRow label="Add convert" htmlFor={paletteSelectId}>
+                <WorkbenchPropertyInline
+                  className="workbench-field-remap-detail__palette"
+                  data-testid="field-remap-transform-palette"
+                >
+                  <Select
+                    id={paletteSelectId}
+                    aria-label="Convert palette"
+                    controlWidth="full"
+                    data-testid="field-remap-palette-select"
+                    value={effectivePaletteId}
+                    disabled={appendCatalog.length === 0}
+                    onValueChange={setPaletteId}
                   >
-                    <strong>{definition?.label ?? transformId}</strong>
-                    <code>{transformId}</code>
-                    <span className="workbench-field-remap-detail__step-hint">Edit convert</span>
-                  </button>
+                    {appendCatalog.length === 0 ? (
+                      <option value="">No compatible converts</option>
+                    ) : null}
+                    {appendCatalog.map((item) => (
+                      <option key={item.id} value={item.id}>
+                        {item.label}
+                      </option>
+                    ))}
+                  </Select>
                   <Button
                     compact
                     type="button"
-                    aria-label={`Remove convert step ${index + 1}`}
-                    data-testid={`field-remap-detail-remove-step-${index}`}
+                    data-testid="field-remap-palette-add"
+                    disabled={!effectivePaletteId}
                     onClick={() => {
-                      const next = removeTransformStepFromEdge(edge, index);
+                      const next = addTransformStepToEdge(edge, effectivePaletteId, {
+                        registry: transforms,
+                        sourceType: portTypes.sourceType,
+                        targetType: portTypes.targetType,
+                      });
+                      if (!next) {
+                        return;
+                      }
                       applyEdge(next);
+                      onSelectionChange({
+                        kind: 'transformStep',
+                        edgeId: edge.id,
+                        stepIndex: (next.transformIds?.length ?? 1) - 1,
+                      });
                     }}
                   >
-                    ×
+                    Add
                   </Button>
-                </li>
-              );
-            })}
-          </ol>
-        )}
+                </WorkbenchPropertyInline>
+              </WorkbenchPropertyRow>
+            ) : null}
+          </WorkbenchPropertyStack>
+        </WorkbenchPropertySection>
 
-        {chain.length < MAX_TRANSFORM_CHAIN ? (
-          <div
-            className="workbench-field-remap-detail__palette"
-            data-testid="field-remap-transform-palette"
+        {listContextEnabled ? (
+          <WorkbenchPropertySection
+            level="group"
+            title="List context"
+            data-testid="field-remap-list-context"
+            actions={
+              !readOnly && !edge.itemEdges ? (
+                <Button
+                  compact
+                  type="button"
+                  data-testid="field-remap-enable-list-context"
+                  onClick={() => applyEdge(enableListContextOnEdge(edge))}
+                >
+                  Enable item fields
+                </Button>
+              ) : null
+            }
           >
-            <label>
-              <span>Add convert</span>
-              <select
-                aria-label="Convert palette"
-                data-testid="field-remap-palette-select"
-                value={effectivePaletteId}
-                disabled={appendCatalog.length === 0}
-                onChange={(event) => setPaletteId(event.target.value)}
-              >
-                {appendCatalog.length === 0 ? (
-                  <option value="">No compatible converts</option>
+            {edge.itemEdges ? (
+              <WorkbenchPropertyStack gap="sm">
+                {!readOnly ? (
+                  <WorkbenchPropertyHint className="workbench-field-remap-detail__muted">
+                    {pendingItemSourceId
+                      ? 'Select a target item field to complete the item binding.'
+                      : 'Select a source item field, then a target item field.'}
+                  </WorkbenchPropertyHint>
                 ) : null}
-                {appendCatalog.map((item) => (
-                  <option key={item.id} value={item.id}>
-                    {item.label}
-                  </option>
-                ))}
-              </select>
-            </label>
-            <Button
-              compact
-              type="button"
-              data-testid="field-remap-palette-add"
-              disabled={!effectivePaletteId}
-              onClick={() => {
-                const next = addTransformStepToEdge(edge, effectivePaletteId, {
-                  registry: transforms,
-                  sourceType: portTypes.sourceType,
-                  targetType: portTypes.targetType,
-                });
-                if (!next) {
-                  return;
-                }
-                applyEdge(next);
-                onSelectionChange({
-                  kind: 'transformStep',
-                  edgeId: edge.id,
-                  stepIndex: (next.transformIds?.length ?? 1) - 1,
-                });
-              }}
-            >
-              Add
-            </Button>
-          </div>
-        ) : null}
-      </section>
-
-      {listContextEnabled ? (
-        <section
-          className="workbench-field-remap-detail__section"
-          aria-labelledby="field-remap-detail-list-context"
-          data-testid="field-remap-list-context"
-        >
-          <div className="workbench-field-remap-detail__list-context-bar">
-            <h5 id="field-remap-detail-list-context">List context</h5>
-            {!edge.itemEdges ? (
-              <Button
-                compact
-                type="button"
-                data-testid="field-remap-enable-list-context"
-                onClick={() => applyEdge(enableListContextOnEdge(edge))}
-              >
-                Enable item fields
-              </Button>
-            ) : null}
-          </div>
-
-          {edge.itemEdges ? (
-            <>
-              <p className="workbench-field-remap-detail__muted">
-                {pendingItemSourceId
-                  ? 'Select a target item field to complete the item binding.'
-                  : 'Select a source item field, then a target item field.'}
-              </p>
-              <div className="workbench-field-remap-detail__item-pickers">
-                <label>
-                  <span>Source item field</span>
-                  <select
-                    aria-label="Source item field"
-                    data-testid="field-remap-item-source"
-                    value={pendingItemSourceId ?? ''}
-                    onChange={(event) => setPendingItemSourceId(event.target.value || null)}
+                {!readOnly ? (
+                  <WorkbenchPropertyStack
+                    className="workbench-field-remap-detail__item-pickers"
+                    gap="xs"
                   >
-                    <option value="">Select…</option>
-                    {itemSourceChildren.map((child) => (
-                      <option key={child.id} value={child.id}>
-                        {child.path ?? child.label}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <label>
-                  <span>Target item field</span>
-                  <select
-                    aria-label="Target item field"
-                    data-testid="field-remap-item-target"
-                    value=""
-                    disabled={!pendingItemSourceId}
-                    onChange={(event) => {
-                      const targetId = event.target.value;
-                      if (!pendingItemSourceId || !targetId) {
-                        return;
-                      }
-                      const itemEdge: MappingEdge = {
-                        id: `ie-${pendingItemSourceId}-${targetId}-${Date.now()}`,
-                        sourceFieldId: pendingItemSourceId,
-                        targetSlotId: targetId,
-                      };
-                      applyEdge(upsertItemEdgeOnParent(edge, itemEdge));
-                      setPendingItemSourceId(null);
-                    }}
-                  >
-                    <option value="">Select…</option>
-                    {itemTargetChildren.map((child) => (
-                      <option key={child.id} value={child.id}>
-                        {child.path ?? child.label}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-              </div>
-              <ul className="workbench-field-remap-detail__item-edges">
-                {(edge.itemEdges ?? []).map((itemEdge) => (
-                  <li key={itemEdge.id} data-testid={`field-remap-item-edge-${itemEdge.id}`}>
-                    <code>
-                      {fieldLabel(itemEdge.sourceFieldId, sources, targets)} →{' '}
-                      {fieldLabel(itemEdge.targetSlotId, sources, targets)}
-                    </code>
-                    <Button
-                      compact
-                      type="button"
-                      onClick={() => applyEdge(removeItemEdgeFromParent(edge, itemEdge.id))}
-                    >
-                      Remove
-                    </Button>
-                  </li>
-                ))}
-              </ul>
-            </>
-          ) : null}
-        </section>
-      ) : null}
+                    <WorkbenchPropertyRow label="Source item field" htmlFor={itemSourceId}>
+                      <Select
+                        id={itemSourceId}
+                        aria-label="Source item field"
+                        controlWidth="full"
+                        data-testid="field-remap-item-source"
+                        value={pendingItemSourceId ?? ''}
+                        onValueChange={(sourceId) => setPendingItemSourceId(sourceId || null)}
+                      >
+                        <option value="">Select…</option>
+                        {itemSourceChildren.map((child) => (
+                          <option key={child.id} value={child.id}>
+                            {child.path ?? child.label}
+                          </option>
+                        ))}
+                      </Select>
+                    </WorkbenchPropertyRow>
+                    <WorkbenchPropertyRow label="Target item field" htmlFor={itemTargetId}>
+                      <Select
+                        id={itemTargetId}
+                        aria-label="Target item field"
+                        controlWidth="full"
+                        data-testid="field-remap-item-target"
+                        value=""
+                        disabled={!pendingItemSourceId}
+                        onValueChange={(targetId) => {
+                          if (!pendingItemSourceId || !targetId) {
+                            return;
+                          }
+                          const itemEdge: MappingEdge = {
+                            id: `ie-${pendingItemSourceId}-${targetId}-${Date.now()}`,
+                            sourceFieldId: pendingItemSourceId,
+                            targetSlotId: targetId,
+                          };
+                          applyEdge(upsertItemEdgeOnParent(edge, itemEdge));
+                          setPendingItemSourceId(null);
+                        }}
+                      >
+                        <option value="">Select…</option>
+                        {itemTargetChildren.map((child) => (
+                          <option key={child.id} value={child.id}>
+                            {child.path ?? child.label}
+                          </option>
+                        ))}
+                      </Select>
+                    </WorkbenchPropertyRow>
+                  </WorkbenchPropertyStack>
+                ) : null}
+                <ul className="workbench-field-remap-detail__item-edges">
+                  {(edge.itemEdges ?? []).map((itemEdge) => (
+                    <li key={itemEdge.id} data-testid={`field-remap-item-edge-${itemEdge.id}`}>
+                      <WorkbenchPropertyInline justify="between">
+                        <code>
+                          {fieldLabel(itemEdge.sourceFieldId, sources, targets)} →{' '}
+                          {fieldLabel(itemEdge.targetSlotId, sources, targets)}
+                        </code>
+                        {!readOnly ? (
+                          <Button
+                            compact
+                            type="button"
+                            onClick={() => applyEdge(removeItemEdgeFromParent(edge, itemEdge.id))}
+                          >
+                            Remove
+                          </Button>
+                        ) : null}
+                      </WorkbenchPropertyInline>
+                    </li>
+                  ))}
+                </ul>
+              </WorkbenchPropertyStack>
+            ) : null}
+          </WorkbenchPropertySection>
+        ) : null}
+      </WorkbenchPropertyStack>
     </aside>
   );
 }