@workbench-kit/shell-react 0.0.2-prototype.0.2.11 → 0.0.2-prototype.0.2.13

package/README.md

@@ -63,13 +63,15 @@ for Flow-only embeds and custom bundler setups. The full barrel
 `FieldRemapFlowMapper` (and `FieldRemapPanel` pass-through) accept optional chrome
 hooks so hosts avoid CSS/DOM workarounds:
 
-| Prop                                                            | Behavior                                                              |
-| --------------------------------------------------------------- | --------------------------------------------------------------------- |
-| `showMinimap`                                                   | Default `true`. When `false`, MiniMap is not mounted.                 |
-| `onPaneContextMenu` / `onNodeContextMenu` / `onEdgeContextMenu` | Native event + selection payload; host owns menu UI.                  |
-| `flowActionsRef`                                                | `{ fitView(options?) }` using the same defaults as Controls fit-view. |
-| `labels` / `t`                                                  | Override edge-list / Convert palette chrome (e.g. “Field maps”).      |
-| `ioChrome` (Panel)                                              | `'browse' \| 'edit' \| 'none'` — prefer browse for inspect-only I/O.  |
+| Prop                                                            | Behavior                                                                                              |
+| --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `showMinimap`                                                   | Default `true`. When `false`, MiniMap is not mounted.                                                 |
+| `onShowMinimapChange`                                           | When set, adds a MiniMap toggle inside Flow Controls (+/−/fit).                                       |
+| `includeHidden` / `onIncludeHiddenChange`                       | When callback set, adds a hidden-fields toggle in the same Controls. Host/Panel still project shapes. |
+| `onPaneContextMenu` / `onNodeContextMenu` / `onEdgeContextMenu` | Native event + selection payload; host owns menu UI.                                                  |
+| `flowActionsRef`                                                | `{ fitView(options?) }` using the same defaults as Controls fit-view.                                 |
+| `labels` / `t`                                                  | Override edge-list / Convert palette chrome (e.g. “Field maps”).                                      |
+| `ioChrome` (Panel)                                              | `'browse' \| 'edit' \| 'none'` — prefer browse for inspect-only I/O.                                  |
 
 ```tsx
 const flowActionsRef = useRef<FieldRemapFlowActions | null>(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/shell-react",
-  "version": "0.0.2-prototype.0.2.11",
+  "version": "0.0.2-prototype.0.2.13",
   "private": false,
   "type": "module",
   "exports": {
@@ -21,13 +21,13 @@
     "@xyflow/react": "^12.11.2",
     "jsonata": "^2.2.0",
     "react-table-mapping": "^1.0.3",
-    "@workbench-kit/platform": "0.0.2-prototype.0.2.11",
-    "@workbench-kit/react": "0.0.2-prototype.0.2.11",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.11",
-    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.11",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.11",
-    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.11",
-    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.11"
+    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.13",
+    "@workbench-kit/react": "0.0.2-prototype.0.2.13",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.13",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.13",
+    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.13",
+    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.13",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.13"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/field-remap/chrome-labels.ts

@@ -21,6 +21,10 @@ export interface FieldRemapChromeLabels {
   readonly placeConvert: string;
   readonly operatorsTitle: string;
   readonly operatorsDescription: string;
+  readonly showMinimap: string;
+  readonly hideMinimap: string;
+  readonly showHiddenFields: string;
+  readonly hideHiddenFields: string;
 }
 
 export const defaultFieldRemapChromeLabels: FieldRemapChromeLabels = {
@@ -34,6 +38,10 @@ export const defaultFieldRemapChromeLabels: FieldRemapChromeLabels = {
   operatorsTitle: 'n→m operators',
   operatorsDescription:
     'Create combine (n→1) or split (1→n), then wire ports or edit in the side rail.',
+  showMinimap: 'Show minimap',
+  hideMinimap: 'Hide minimap',
+  showHiddenFields: 'Show hidden fields',
+  hideHiddenFields: 'Hide hidden fields',
 };
 
 /** Stable capability ids for optional `t()` injection (not free prose). */
@@ -46,6 +54,10 @@ export const fieldRemapChromeLabelKeys = {
   placeConvert: 'fieldRemap.placeConvert',
   operatorsTitle: 'fieldRemap.operatorsTitle',
   operatorsDescription: 'fieldRemap.operatorsDescription',
+  showMinimap: 'fieldRemap.showMinimap',
+  hideMinimap: 'fieldRemap.hideMinimap',
+  showHiddenFields: 'fieldRemap.showHiddenFields',
+  hideHiddenFields: 'fieldRemap.hideHiddenFields',
 } as const satisfies Record<keyof FieldRemapChromeLabels, string>;
 
 export function resolveFieldRemapChromeLabels(
@@ -70,5 +82,9 @@ export function resolveFieldRemapChromeLabels(
     placeConvert: resolve('placeConvert'),
     operatorsTitle: resolve('operatorsTitle'),
     operatorsDescription: resolve('operatorsDescription'),
+    showMinimap: resolve('showMinimap'),
+    hideMinimap: resolve('hideMinimap'),
+    showHiddenFields: resolve('showHiddenFields'),
+    hideHiddenFields: resolve('hideHiddenFields'),
   };
 }

package/src/field-remap/demo.tsx

@@ -57,14 +57,6 @@ export function SampleFieldRemapDemo({
           data-testid="field-remap-host-chrome"
           style={{ display: 'flex', gap: '0.5rem', marginBottom: '0.75rem', flexWrap: 'wrap' }}
         >
-          <Button
-            compact
-            type="button"
-            data-testid="field-remap-toggle-minimap"
-            onClick={() => setShowMinimap((current) => !current)}
-          >
-            {showMinimap ? 'Hide MiniMap' : 'Show MiniMap'}
-          </Button>
           <Button
             compact
             type="button"
@@ -84,6 +76,7 @@ export function SampleFieldRemapDemo({
         key={`${sample.id}:${ioChrome ?? 'default'}:${browseSeedShapes ? 'seed' : 'plain'}`}
         sample={sample}
         showMinimap={showMinimap}
+        onShowMinimapChange={setShowMinimap}
         ioChrome={ioChrome}
         editableShapes={ioChrome === 'browse' ? false : undefined}
         sources={browseShapes?.sources}

package/src/field-remap/flow.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react';
 import {
   Background,
+  ControlButton,
   Controls,
   Handle,
   MiniMap,
@@ -333,6 +334,22 @@ export interface FieldRemapFlowMapperProps {
    * backward compatibility with existing samples.
    */
   readonly showMinimap?: boolean | undefined;
+  /**
+   * When set, Flow Controls (+/−/fit) include a MiniMap toggle button in the same
+   * panel. Hosts should prefer this over a separate toolbar control.
+   */
+  readonly onShowMinimapChange?: ((show: boolean) => void) | undefined;
+  /**
+   * When false (default), hosts should project shapes with hidden fields omitted
+   * before passing `sources` / `targets`. Flow itself does not filter — this flag
+   * drives the Controls toggle pressed state only.
+   */
+  readonly includeHidden?: boolean | undefined;
+  /**
+   * When set, Flow Controls include a hidden-fields toggle next to zoom / MiniMap.
+   * Pair with host (or Panel) shape projection on `includeHidden`.
+   */
+  readonly onIncludeHiddenChange?: ((includeHidden: boolean) => void) | undefined;
   /** Pane context menu; host owns menu UI. Receives current Field Remap selection. */
   readonly onPaneContextMenu?:
     | ((event: MouseEvent | globalThis.MouseEvent, ctx: { selection: FieldRemapSelection }) => void)
@@ -375,6 +392,9 @@ function FieldRemapFlowCanvas({
   selection: selectionProp,
   onSelectionChange: onSelectionChangeProp,
   showMinimap = true,
+  onShowMinimapChange,
+  includeHidden = false,
+  onIncludeHiddenChange,
   onPaneContextMenu,
   onNodeContextMenu,
   onEdgeContextMenu,
@@ -713,6 +733,7 @@ function FieldRemapFlowCanvas({
       className="workbench-field-remap-flow"
       data-testid="field-remap-mapper"
       data-minimap={showMinimap ? 'on' : 'off'}
+      data-hidden-fields={includeHidden ? 'on' : 'off'}
       onKeyDown={onKeyDown}
     >
       <p className="workbench-field-remap-mapper__hint" data-testid="field-remap-hint">
@@ -784,7 +805,93 @@ function FieldRemapFlowCanvas({
           >
             <FieldRemapFlowActionsBridge flowActionsRef={flowActionsRef} />
             <Background gap={16} color="var(--xy-background-pattern-color)" />
-            <Controls showInteractive={false} fitViewOptions={DEFAULT_FIT_VIEW_OPTIONS} />
+            <Controls showInteractive={false} fitViewOptions={DEFAULT_FIT_VIEW_OPTIONS}>
+              {onShowMinimapChange ? (
+                <ControlButton
+                  aria-label={showMinimap ? chromeLabels.hideMinimap : chromeLabels.showMinimap}
+                  className={
+                    showMinimap
+                      ? 'workbench-field-remap-flow__minimap-toggle is-active'
+                      : 'workbench-field-remap-flow__minimap-toggle'
+                  }
+                  data-testid="field-remap-toggle-minimap"
+                  title={showMinimap ? chromeLabels.hideMinimap : chromeLabels.showMinimap}
+                  onClick={() => {
+                    onShowMinimapChange(!showMinimap);
+                  }}
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    height="16"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.75"
+                    viewBox="0 0 24 24"
+                    width="16"
+                  >
+                    <path d="M3 6.5 9 4l6 2.5L21 4v13.5L15 20l-6-2.5L3 20z" />
+                    <path d="M9 4v13.5" />
+                    <path d="M15 6.5V20" />
+                  </svg>
+                </ControlButton>
+              ) : null}
+              {onIncludeHiddenChange ? (
+                <ControlButton
+                  aria-label={
+                    includeHidden ? chromeLabels.hideHiddenFields : chromeLabels.showHiddenFields
+                  }
+                  aria-pressed={includeHidden}
+                  className={
+                    includeHidden
+                      ? 'workbench-field-remap-flow__hidden-toggle is-active'
+                      : 'workbench-field-remap-flow__hidden-toggle'
+                  }
+                  data-testid="field-remap-toggle-hidden-fields"
+                  title={
+                    includeHidden ? chromeLabels.hideHiddenFields : chromeLabels.showHiddenFields
+                  }
+                  onClick={() => {
+                    onIncludeHiddenChange(!includeHidden);
+                  }}
+                >
+                  {includeHidden ? (
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      height="16"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="1.75"
+                      viewBox="0 0 24 24"
+                      width="16"
+                    >
+                      <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
+                      <circle cx="12" cy="12" r="3" />
+                    </svg>
+                  ) : (
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      height="16"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="1.75"
+                      viewBox="0 0 24 24"
+                      width="16"
+                    >
+                      <path d="M3 3l18 18" />
+                      <path d="M10.6 10.6a3 3 0 0 0 4.2 4.2" />
+                      <path d="M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.4 17.4 0 0 1-3.2 4.4" />
+                      <path d="M6.1 6.1C3.9 7.7 2 12 2 12s3.5 7 10 7a10.4 10.4 0 0 0 4.2-.9" />
+                    </svg>
+                  )}
+                </ControlButton>
+              ) : null}
+            </Controls>
             {showMinimap ? (
               <MiniMap
                 pannable

package/src/field-remap/panel.tsx

@@ -83,6 +83,8 @@ export interface FieldRemapPanelProps {
   readonly targetShape?: unknown;
   /** Forwarded to {@link FieldRemapFlowMapper} (default true). */
   readonly showMinimap?: boolean | undefined;
+  /** Forwarded to {@link FieldRemapFlowMapper} Controls MiniMap toggle. */
+  readonly onShowMinimapChange?: FieldRemapFlowMapperProps['onShowMinimapChange'];
   readonly onPaneContextMenu?: FieldRemapFlowMapperProps['onPaneContextMenu'];
   readonly onNodeContextMenu?: FieldRemapFlowMapperProps['onNodeContextMenu'];
   readonly onEdgeContextMenu?: FieldRemapFlowMapperProps['onEdgeContextMenu'];
@@ -136,6 +138,7 @@ export function FieldRemapPanel({
   sourceSample: sourceSampleProp,
   targetShape: targetShapeProp,
   showMinimap,
+  onShowMinimapChange,
   onPaneContextMenu,
   onNodeContextMenu,
   onEdgeContextMenu,
@@ -396,14 +399,6 @@ export function FieldRemapPanel({
           className="workbench-field-remap-demo__shapes"
           data-testid="field-remap-io-browse-wrap"
         >
-          <label className="workbench-field-remap-io-browse__toggle">
-            <input
-              checked={includeHidden}
-              onChange={(event) => setIncludeHidden(event.target.checked)}
-              type="checkbox"
-            />
-            Show hidden fields
-          </label>
           <FieldRemapIoClassBrowse
             includeHidden={includeHidden}
             sources={sourceFields}
@@ -425,6 +420,9 @@ export function FieldRemapPanel({
         sourceTitle={sample.sourceLabel}
         targetTitle={sample.targetLabel}
         showMinimap={showMinimap}
+        onShowMinimapChange={onShowMinimapChange}
+        includeHidden={includeHidden}
+        onIncludeHiddenChange={setIncludeHidden}
         onPaneContextMenu={onPaneContextMenu}
         onNodeContextMenu={onNodeContextMenu}
         onEdgeContextMenu={onEdgeContextMenu}

package/src/field-remap/view.css

@@ -483,6 +483,23 @@
   max-height: 12px;
 }
 
+.workbench-field-remap-flow__canvas
+  .react-flow__controls-button.workbench-field-remap-flow__minimap-toggle
+  svg,
+.workbench-field-remap-flow__canvas
+  .react-flow__controls-button.workbench-field-remap-flow__hidden-toggle
+  svg {
+  fill: none;
+  stroke: currentColor;
+}
+
+.workbench-field-remap-flow__canvas
+  .react-flow__controls-button.workbench-field-remap-flow__minimap-toggle.is-active,
+.workbench-field-remap-flow__canvas
+  .react-flow__controls-button.workbench-field-remap-flow__hidden-toggle.is-active {
+  color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
+}
+
 .workbench-field-remap-flow__canvas .react-flow__minimap {
   margin: 0.5rem;
   border: 1px solid var(--vscode-panel-border, var(--color-border));