@workbench-kit/shell-react 0.0.2-prototype.0.2.32 → 0.0.2-prototype.0.2.34

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

@@ -1,6 +1,6 @@
-import type { JSX } from 'react';
+import { useRef, useState, type JSX, type KeyboardEvent } from 'react';
 import { SideBarList, SideBarListItem } from '@workbench-kit/react/layout';
-import { Button } from '@workbench-kit/react/primitives';
+import { ClearableTextInput, IconButton } from '@workbench-kit/react/primitives';
 import type { ValueTransformRegistry } from '@workbench-kit/field-remap';
 
 import { defaultFieldRemapChromeLabels, type FieldRemapChromeLabels } from './chrome-labels.js';
@@ -32,6 +32,120 @@ export function FieldRemapConvertPalette({
   // The registry supports replacing definitions through `register`; resolve
   // display metadata on each host render even when the registry object is stable.
   const catalog = transforms.list().filter((definition) => definition.id !== 'identity');
+  const [filterQuery, setFilterQuery] = useState('');
+  const [requestedRovingTransformId, setRequestedRovingTransformId] = useState(() =>
+    catalog.some((definition) => definition.id === selectedTransformId)
+      ? selectedTransformId
+      : (catalog[0]?.id ?? ''),
+  );
+  const optionRefs = useRef(new Map<string, HTMLButtonElement>());
+  const normalizedFilterQuery = filterQuery.trim().toLowerCase();
+  const visibleCatalog = catalog.filter((definition) => {
+    if (!normalizedFilterQuery) {
+      return true;
+    }
+    return (
+      definition.id.toLowerCase().includes(normalizedFilterQuery) ||
+      definition.label.toLowerCase().includes(normalizedFilterQuery)
+    );
+  });
+  const visibleTransformIds = visibleCatalog.map((definition) => definition.id);
+  const selectedTransformIsVisible = visibleTransformIds.includes(selectedTransformId);
+  const rovingTransformId = visibleTransformIds.includes(requestedRovingTransformId)
+    ? requestedRovingTransformId
+    : selectedTransformIsVisible
+      ? selectedTransformId
+      : (visibleTransformIds[0] ?? '');
+  const filterLabel =
+    chromeLabels.convertFilterLabel ?? defaultFieldRemapChromeLabels.convertFilterLabel;
+  const filterPlaceholder =
+    chromeLabels.convertFilterPlaceholder ?? defaultFieldRemapChromeLabels.convertFilterPlaceholder;
+  const clearFilterLabel =
+    chromeLabels.clearConvertFilter ?? defaultFieldRemapChromeLabels.clearConvertFilter;
+  const noMatchingConverts =
+    chromeLabels.noMatchingConverts ?? defaultFieldRemapChromeLabels.noMatchingConverts;
+
+  const updateFilterQuery = (nextQuery: string) => {
+    const normalizedNextQuery = nextQuery.trim().toLowerCase();
+    const nextVisibleIds = catalog
+      .filter(
+        (definition) =>
+          !normalizedNextQuery ||
+          definition.id.toLowerCase().includes(normalizedNextQuery) ||
+          definition.label.toLowerCase().includes(normalizedNextQuery),
+      )
+      .map((definition) => definition.id);
+    setFilterQuery(nextQuery);
+    setRequestedRovingTransformId(
+      nextVisibleIds.includes(selectedTransformId)
+        ? selectedTransformId
+        : (nextVisibleIds[0] ?? ''),
+    );
+  };
+
+  const focusVisibleTransform = (transformId: string) => {
+    setRequestedRovingTransformId(transformId);
+    optionRefs.current.get(transformId)?.focus();
+  };
+
+  const handleFilterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+      return;
+    }
+    const targetId = selectedTransformIsVisible
+      ? selectedTransformId
+      : event.key === 'ArrowDown'
+        ? visibleTransformIds[0]
+        : visibleTransformIds[visibleTransformIds.length - 1];
+    if (!targetId) {
+      return;
+    }
+    event.preventDefault();
+    focusVisibleTransform(targetId);
+  };
+
+  const handleOptionKeyDown = (event: KeyboardEvent<HTMLButtonElement>, transformId: string) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (transformId !== selectedTransformId) {
+        onSelectedTransformIdChange(transformId);
+      }
+      onPlaceDraft(transformId);
+      return;
+    }
+
+    const currentIndex = visibleTransformIds.indexOf(transformId);
+    if (currentIndex < 0) {
+      return;
+    }
+    let nextIndex: number | undefined;
+    switch (event.key) {
+      case 'ArrowDown':
+        nextIndex = Math.min(currentIndex + 1, visibleTransformIds.length - 1);
+        break;
+      case 'ArrowUp':
+        nextIndex = Math.max(currentIndex - 1, 0);
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = visibleTransformIds.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    const nextTransformId = visibleTransformIds[nextIndex];
+    if (!nextTransformId) {
+      return;
+    }
+    event.preventDefault();
+    focusVisibleTransform(nextTransformId);
+    if (nextTransformId !== selectedTransformId) {
+      onSelectedTransformIdChange(nextTransformId);
+    }
+  };
 
   return (
     <aside
@@ -45,39 +159,66 @@ export function FieldRemapConvertPalette({
       </header>
 
       <div className="workbench-field-remap-convert-palette__place">
-        <Button
+        <IconButton
+          compact
           type="button"
           data-testid="field-remap-place-draft"
-          disabled={!selectedTransformId}
+          disabled={!selectedTransformId || !selectedTransformIsVisible}
+          icon="codicon-add"
+          label={chromeLabels.placeConvert}
           onClick={() => {
-            if (!selectedTransformId) {
+            if (!selectedTransformId || !selectedTransformIsVisible) {
               return;
             }
             onPlaceDraft(selectedTransformId);
           }}
-        >
-          {chromeLabels.placeConvert}
-        </Button>
+        />
       </div>
 
+      <ClearableTextInput
+        aria-label={filterLabel}
+        className="workbench-field-remap-convert-palette__filter"
+        clearLabel={clearFilterLabel}
+        controlWidth="full"
+        placeholder={filterPlaceholder}
+        type="search"
+        value={filterQuery}
+        onClear={() => updateFilterQuery('')}
+        onKeyDown={handleFilterKeyDown}
+        onValueChange={updateFilterQuery}
+      />
+
       <SideBarList
         className="workbench-field-remap-convert-palette__list"
         role="listbox"
         aria-label={chromeLabels.convertsListAriaLabel}
       >
-        {catalog.map((definition) => {
+        {visibleCatalog.map((definition) => {
           const selected = definition.id === selectedTransformId;
           return (
             <SideBarListItem
+              ref={(element) => {
+                if (element) {
+                  optionRefs.current.set(definition.id, element);
+                } else {
+                  optionRefs.current.delete(definition.id);
+                }
+              }}
               key={definition.id}
               aria-selected={selected}
               data-testid={`field-remap-palette-item-${definition.id}`}
               role="option"
               selected={selected}
+              tabIndex={definition.id === rovingTransformId ? 0 : -1}
               variant="stacked"
               wrapperProps={{ role: 'presentation' }}
-              onClick={() => onSelectedTransformIdChange(definition.id)}
+              onClick={() => {
+                setRequestedRovingTransformId(definition.id);
+                onSelectedTransformIdChange(definition.id);
+              }}
               onDoubleClick={() => onPlaceDraft(definition.id)}
+              onFocus={() => setRequestedRovingTransformId(definition.id)}
+              onKeyDown={(event) => handleOptionKeyDown(event, definition.id)}
             >
               <strong>{definition.label}</strong>
               <code title={definition.id}>{definition.id}</code>
@@ -85,6 +226,11 @@ export function FieldRemapConvertPalette({
           );
         })}
       </SideBarList>
+      {visibleCatalog.length === 0 ? (
+        <p className="workbench-field-remap-convert-palette__empty" role="status">
+          {noMatchingConverts}
+        </p>
+      ) : null}
 
       {onAddCombine || onAddSplit ? (
         <div
@@ -95,24 +241,24 @@ export function FieldRemapConvertPalette({
           <p>{chromeLabels.operatorsDescription}</p>
           <div className="workbench-field-remap-convert-palette__operator-actions">
             {onAddCombine ? (
-              <Button
+              <IconButton
                 compact
                 type="button"
                 data-testid="field-remap-add-combine"
+                icon="codicon-git-merge"
+                label={chromeLabels.addCombine}
                 onClick={onAddCombine}
-              >
-                Add combine
-              </Button>
+              />
             ) : null}
             {onAddSplit ? (
-              <Button
+              <IconButton
                 compact
                 type="button"
                 data-testid="field-remap-add-split"
+                icon="codicon-split-horizontal"
+                label={chromeLabels.addSplit}
                 onClick={onAddSplit}
-              >
-                Add split
-              </Button>
+              />
             ) : null}
           </div>
         </div>

package/src/field-remap/demo.tsx

@@ -2,9 +2,13 @@ import { useEffect, useRef, useState, type JSX } from 'react';
 import { Button } from '@workbench-kit/react/primitives';
 
 import type { FieldRemapChromeLabels, FieldRemapTranslate } from './chrome-labels.js';
-import type { FieldRemapFlowActions } from './flow.js';
+import type { FieldRemapFlowActions, FieldRemapFlowMapperProps } from './flow.js';
 import type { FieldRemapIoChrome } from './io-class-browse.js';
-import { FieldRemapPanel } from './panel.js';
+import {
+  FieldRemapPanel,
+  type FieldRemapHistoryActions,
+  type FieldRemapHistoryAvailability,
+} from './panel.js';
 import {
   getFieldRemapBrowseDemoShapes,
   getFieldRemapSample,
@@ -15,7 +19,13 @@ export interface SampleFieldRemapDemoProps {
   readonly sampleId?: FieldRemapSampleId | string | undefined;
   /** Forwarded to Flow mapper (default true). */
   readonly showMinimap?: boolean | undefined;
-  /** When true, show host-chrome demo controls (minimap toggle + fit view). */
+  /** Forwarded Flow chrome preset. */
+  readonly chrome?: FieldRemapFlowMapperProps['chrome'];
+  readonly showFlowHint?: FieldRemapFlowMapperProps['showFlowHint'];
+  readonly showBindingsList?: FieldRemapFlowMapperProps['showBindingsList'];
+  readonly showConvertPalette?: FieldRemapFlowMapperProps['showConvertPalette'];
+  readonly emptyDetail?: FieldRemapFlowMapperProps['emptyDetail'];
+  /** When true, show host-chrome demo controls (history + fit view). */
   readonly showHostChromeDemo?: boolean | undefined;
   /** Prefer `browse` for I/O class/field inspection demos. */
   readonly ioChrome?: FieldRemapIoChrome | undefined;
@@ -31,6 +41,11 @@ export interface SampleFieldRemapDemoProps {
 export function SampleFieldRemapDemo({
   sampleId = 'nested-ab',
   showMinimap: showMinimapProp,
+  chrome,
+  showFlowHint,
+  showBindingsList,
+  showConvertPalette,
+  emptyDetail,
   showHostChromeDemo = false,
   ioChrome,
   browseSeedShapes = false,
@@ -40,7 +55,12 @@ export function SampleFieldRemapDemo({
   const sample = getFieldRemapSample(sampleId);
   const browseShapes = browseSeedShapes ? getFieldRemapBrowseDemoShapes() : null;
   const flowActionsRef = useRef<FieldRemapFlowActions | null>(null);
+  const historyActionsRef = useRef<FieldRemapHistoryActions | null>(null);
   const [showMinimap, setShowMinimap] = useState(showMinimapProp ?? true);
+  const [historyAvailability, setHistoryAvailability] = useState<FieldRemapHistoryAvailability>({
+    canUndo: false,
+    canRedo: false,
+  });
   const [lastPaneMenu, setLastPaneMenu] = useState<string | null>(null);
 
   useEffect(() => {
@@ -65,6 +85,24 @@ export function SampleFieldRemapDemo({
           >
             Fit view
           </Button>
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-undo"
+            disabled={!historyAvailability.canUndo}
+            onClick={() => historyActionsRef.current?.undo()}
+          >
+            Undo
+          </Button>
+          <Button
+            compact
+            type="button"
+            data-testid="field-remap-redo"
+            disabled={!historyAvailability.canRedo}
+            onClick={() => historyActionsRef.current?.redo()}
+          >
+            Redo
+          </Button>
           {lastPaneMenu ? (
             <span data-testid="field-remap-pane-menu-log" role="status">
               Pane menu: {lastPaneMenu}
@@ -76,6 +114,11 @@ export function SampleFieldRemapDemo({
         key={`${sample.id}:${ioChrome ?? 'default'}:${browseSeedShapes ? 'seed' : 'plain'}`}
         sample={sample}
         showMinimap={showMinimap}
+        chrome={chrome}
+        showFlowHint={showFlowHint}
+        showBindingsList={showBindingsList}
+        showConvertPalette={showConvertPalette}
+        emptyDetail={emptyDetail}
         onShowMinimapChange={setShowMinimap}
         ioChrome={ioChrome}
         editableShapes={ioChrome === 'browse' ? false : undefined}
@@ -84,6 +127,8 @@ export function SampleFieldRemapDemo({
         labels={labels}
         t={t}
         flowActionsRef={showHostChromeDemo ? flowActionsRef : undefined}
+        historyActionsRef={showHostChromeDemo ? historyActionsRef : undefined}
+        onHistoryAvailabilityChange={showHostChromeDemo ? setHistoryAvailability : undefined}
         onPaneContextMenu={
           showHostChromeDemo
             ? (event) => {

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

@@ -45,6 +45,8 @@ export interface FieldRemapDetailPanelProps {
   readonly onDiscardDraft?: ((localId: string) => void) | undefined;
   readonly operators?: readonly MappingOperator[] | undefined;
   readonly onOperatorsChange?: ((operators: readonly MappingOperator[]) => void) | undefined;
+  readonly emptyDetailTitle?: string | undefined;
+  readonly emptyDetailDescription?: string | undefined;
 }
 
 function fieldLabel(
@@ -77,6 +79,8 @@ export function FieldRemapDetailPanel({
   onDiscardDraft,
   operators = [],
   onOperatorsChange,
+  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 {
   const edge = useMemo(() => {
     if (!selection || (selection.kind !== 'edge' && selection.kind !== 'transformStep')) {
@@ -113,11 +117,8 @@ export function FieldRemapDetailPanel({
         data-testid="field-remap-detail"
         aria-label="Binding details"
       >
-        <h4>Start with a convert</h4>
-        <p data-testid="field-remap-detail-empty-hint">
-          Use the Convert palette to place a convert, then wire source → draft → target. Or select
-          an existing binding / convert note on the canvas.
-        </p>
+        <h4>{emptyDetailTitle}</h4>
+        <p data-testid="field-remap-detail-empty-hint">{emptyDetailDescription}</p>
       </aside>
     );
   }