@kiberon-labs/behave-graph-flow 2.0.0 → 3.0.0

package/src/store/hotKeys.tsx

@@ -1,5 +1,3 @@
-import { applyDagreLayout } from '@/layout/dagre';
-import { applyElkLayout } from '@/layout/elk';
 import type { System } from '@/system';
 import { create } from 'zustand';
 
@@ -9,284 +7,317 @@ export type HotkeyStore = {
   keymap: Record<string, string | string[]>;
   handlers: Record<string, Handler>;
   descriptions: Record<string, string>;
+  /** Reverse map: command id -> keymap action, so any UI surface that runs a
+   * command can look up its live shortcut without knowing the action name. */
+  commandToAction: Record<string, string>;
   register(val: {
     action: string;
     trigger: string | string[];
     description?: string;
     handler?: Handler;
+    /** Command id this binding invokes; enables shortcut hints in menus. */
+    command?: string;
   }): void;
   registerDescription(action: string, description: string): void;
   registerHandler(action: string, handler: Handler): void;
+  /**
+   * Formatted shortcut hint for a command id (e.g. `'Ctrl+Shift+←'`), derived
+   * live from the keymap, or undefined if the command has no bound key.
+   */
+  getCommandKeybinding(commandId: string): string | undefined;
 };
 
-export const hotKeyStoreFactory = (sys: System) =>
-  create<HotkeyStore>((set) => ({
-    keymap: {
-      SELECT_ALL: 'ctrl+a',
-      DUPLICATE: ['command+d', 'ctrl+d'],
-      GROUP: 'ctrl+g',
-      SAVE: 'ctrl+s',
-      FIND: ['ctrl+f', 'command+f'],
-      AUTO_LAYOUT: 'shift+alt+f',
-      COPY: ['command+c', 'ctrl+c'],
-      PASTE: ['command+v', 'ctrl+v'],
-      DELETE: ['delete', 'del', 'backspace'],
-      UNDO: ['command+z', 'ctrl+z'],
-      REDO: ['command+shift+z', 'ctrl+shift+z'],
-      SAVE_VIEWPORT: [
-        'command+1',
-        'command+2',
-        'command+3',
-        'command+4',
-        'command+5',
-        'command+6',
-        'command+7',
-        'command+8',
-        'command+9',
-        'ctrl+1',
-        'ctrl+2',
-        'ctrl+3',
-        'ctrl+4',
-        'ctrl+5',
-        'ctrl+6',
-        'ctrl+7',
-        'ctrl+8',
-        'ctrl+9'
-      ],
-      RECALL_VIEWPORT: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
-      ZOOM_IN: ['ctrl+plus', 'command+plus'],
-      ZOOM_OUT: ['command+-', 'ctrl+-'],
-      ZOOM_RESET: 'ctrl+0',
-      TOGGLE_GRID: ['command+shift+g', 'ctrl+shift+g'],
-      TOGGLE_MINIMAP: ['command+shift+m', 'ctrl+shift+m'],
-      TOGGLE_SNAP_GRID: ['command+shift+s', 'ctrl+shift+s'],
-      FIT_VIEW: ['f'],
-      TRACE_DOWNSTREAM: 'ctrl+shift+right',
-      TRACE_UPSTREAM: 'ctrl+shift+left'
-    },
-    descriptions: {
-      TRACE_DOWNSTREAM: 'Trace Downstream',
-      TRACE_UPSTREAM: 'Trace Upstream',
-      AUTO_LAYOUT: 'Auto Layout',
-      COPY: 'Copy',
-      PASTE: 'Paste',
-      DELETE: 'Delete',
-      UNDO: 'Undo',
-      REDO: 'Redo',
-      SELECT_ALL: 'Select All',
-      DUPLICATE: 'Duplicate',
-      GROUP: 'Group',
-      SAVE: 'Save',
-      FIND: 'Find',
-      FIT_VIEW: 'Fit View',
-      ZOOM_IN: 'Zoom In',
-      ZOOM_OUT: 'Zoom Out',
-      ZOOM_RESET: 'Zoom Reset',
-      TOGGLE_GRID: 'Toggle Grid',
-      TOGGLE_MINIMAP: 'Toggle Minimap',
-      TOGGLE_SNAP_GRID: 'Toggle Snap Grid',
-      SAVE_VIEWPORT: 'Save Viewport',
-      RECALL_VIEWPORT: 'Recall Viewport'
-    },
-    handlers: {
-      SAVE: (event) => {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-        sys.actionStore.getState().actions.save();
-      },
+const MODIFIER_LABELS: Record<string, string> = {
+  ctrl: 'Ctrl',
+  control: 'Ctrl',
+  cmd: 'Cmd',
+  command: 'Cmd',
+  meta: 'Cmd',
+  shift: 'Shift',
+  alt: 'Alt',
+  option: 'Alt'
+};
 
-      GROUP: () => {
-        sys.actionStore.getState().actions.groupNodes();
-      },
+const KEY_LABELS: Record<string, string> = {
+  left: '←',
+  right: '→',
+  up: '↑',
+  down: '↓',
+  plus: '+',
+  minus: '-',
+  esc: 'Esc',
+  escape: 'Esc',
+  del: 'Del',
+  delete: 'Del',
+  backspace: 'Backspace',
+  enter: 'Enter',
+  return: 'Enter',
+  space: 'Space',
+  tab: 'Tab'
+};
 
-      COPY: (event) => {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-        sys.actionStore.getState().actions.copySelectionToClipboard();
-      },
-      PASTE: async (event) => {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
+const formatKeyPart = (part: string): string => {
+  const lower = part.toLowerCase();
+  if (MODIFIER_LABELS[lower]) return MODIFIER_LABELS[lower];
+  if (KEY_LABELS[lower]) return KEY_LABELS[lower];
+  if (part.length === 1) return part.toUpperCase();
+  return part.charAt(0).toUpperCase() + part.slice(1);
+};
 
-        await sys.actionStore.getState().actions.pasteFromClipboard();
-      },
-      TRACE_UPSTREAM: (event) => {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
-          const selection = sys.selectionStore.getState().selectedNodeId;
-          if (!selection) {
-            return;
-          }
-          sys.actionStore.getState().actions.traceUpstream(selection);
-        }
-      },
-      TRACE_DOWNSTREAM: (event) => {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
-          const selection = sys.selectionStore.getState().selectedNodeId;
-          if (!selection) {
-            return;
-          }
-          sys.actionStore.getState().actions.traceDownstream(selection);
-        }
-      },
-      FIT_VIEW: (event) => {
-        if (event) {
-          event.preventDefault();
-          const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
-          reactFlowInstance?.fitView({
-            padding: 0.2,
-            includeHiddenNodes: true
-          });
-        }
-      },
+/**
+ * Format a keymap trigger into a human-readable hint, e.g. `'ctrl+shift+left'`
+ * -> `'Ctrl+Shift+←'`. When several triggers are bound (cross-platform), prefer
+ * the `ctrl` variant so menus show one stable shortcut. Returns undefined for an
+ * empty/unset trigger.
+ */
+export const formatTrigger = (
+  trigger: string | string[] | undefined
+): string | undefined => {
+  let chosen: string | undefined;
+  if (Array.isArray(trigger)) {
+    chosen =
+      trigger.find((t) => t.toLowerCase().includes('ctrl')) ?? trigger[0];
+  } else {
+    chosen = trigger;
+  }
+  if (!chosen) return undefined;
+  return chosen
+    .split('+')
+    .map((p) => formatKeyPart(p.trim()))
+    .join('+');
+};
 
-      TOGGLE_SNAP_GRID: (event) => {
-        if (event) {
-          event.preventDefault();
-          const settings = sys.systemSettings.getState();
-          settings.setSnapGrid(!settings.snapGrid);
-        }
-      },
-      TOGGLE_GRID: (event) => {
-        if (event) {
-          event.preventDefault();
-          const settings = sys.systemSettings.getState();
-          settings.setShowGrid(!settings.showGrid);
-        }
-      },
-      SAVE_VIEWPORT: (event) => {
-        if (event) {
-          event?.preventDefault();
-          const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
-          const graph = sys.graph;
-          if (reactFlowInstance) {
-            const currentViewport = reactFlowInstance.getViewport();
-            const key = event.key; // Get pressed key (e.g., '1', '2', etc.)
-            const viewportIndex = parseInt(key) - 1; // Calculate 0-based index
+/**
+ * Declarative default hotkey bindings. One table is the single source of truth
+ * for the keymap, descriptions, and handlers (previously three objects that had
+ * to be kept in sync). Most bindings just dispatch a registered command by id;
+ * the few that need key-specific context (the pressed node / number key) use a
+ * custom `handler`.
+ */
+type HotkeyBinding = {
+  action: string;
+  trigger: string | string[];
+  description: string;
+  /** Dispatch this command id (with preventDefault/stopPropagation). */
+  command?: string;
+  /**
+   * For handler-based bindings, the command id this key maps to. Used only to
+   * surface the shortcut hint in menus; does not affect what the key does.
+   */
+  hintCommand?: string;
+  /** Or run custom key-specific logic. */
+  handler?: (sys: System, e?: KeyboardEvent) => void;
+};
 
-            if (viewportIndex >= 0 && viewportIndex < 9) {
-              graph.setViewport(viewportIndex, currentViewport);
-              sys.notifications.info(`Saved viewport ${viewportIndex + 1}`);
-            }
-          }
-        }
-      },
-      RECALL_VIEWPORT: (event) => {
-        if (event) {
-          event.preventDefault();
-          const key = event.key;
-          const graph = sys.graph;
-          const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+const NUMBER_TRIGGERS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
 
-          const viewportIndex = parseInt(key) - 1;
+const traceFromSelection =
+  (commandId: string) => (sys: System, e?: KeyboardEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    const selection = sys.selectionStore.getState().selectedNodeId;
+    if (selection) sys.runCommand(commandId, { nodeId: selection });
+  };
 
-          if (viewportIndex >= 0 && viewportIndex < 9 && reactFlowInstance) {
-            const viewport = graph.viewports[viewportIndex];
-            if (!viewport) {
-              sys.pubsub.publish('missingViewPort', {
-                index: viewportIndex
-              });
-              return;
-            }
-            reactFlowInstance.setViewport(viewport);
-          }
-        }
-      },
-      SELECT_ALL: (event) => {
-        if (event) {
-          event.stopPropagation();
-          event.preventDefault();
-          sys.nodeStore.getState().setNodes((nodes) => {
-            return nodes.map((x) => {
-              return {
-                ...x,
-                selected: true
-              };
-            });
-          });
-        }
-      },
-      ZOOM_IN: (event) => {
-        if (event) {
-          event.stopPropagation();
-          event.preventDefault();
-          sys.refStore
-            .getState()
-            .getRef('reactflow')
-            ?.zoomIn({ duration: 300 });
-        }
-      },
-      ZOOM_OUT: (event) => {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
-          sys.refStore
-            .getState()
-            .getRef('reactflow')
-            ?.zoomOut({ duration: 300 });
-        }
-      },
-      RESET_ZOOM: (event) => {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
-          const reactflow = sys.refStore.getState().getRef('reactflow');
+const defaultBindings: HotkeyBinding[] = [
+  {
+    action: 'SAVE',
+    trigger: 'ctrl+s',
+    description: 'Save',
+    command: 'editor.save'
+  },
+  {
+    action: 'GROUP',
+    trigger: 'ctrl+g',
+    description: 'Group',
+    command: 'selection.group'
+  },
+  {
+    action: 'COPY',
+    trigger: ['command+c', 'ctrl+c'],
+    description: 'Copy',
+    command: 'selection.copy'
+  },
+  {
+    action: 'PASTE',
+    trigger: ['command+v', 'ctrl+v'],
+    description: 'Paste',
+    command: 'selection.paste'
+  },
+  {
+    action: 'SELECT_ALL',
+    trigger: 'ctrl+a',
+    description: 'Select All',
+    command: 'selection.selectAll'
+  },
+  {
+    action: 'UNDO',
+    trigger: ['command+z', 'ctrl+z'],
+    description: 'Undo',
+    command: 'editor.undo'
+  },
+  {
+    action: 'REDO',
+    trigger: ['command+shift+z', 'ctrl+shift+z'],
+    description: 'Redo',
+    command: 'editor.redo'
+  },
+  {
+    action: 'FIND',
+    trigger: ['ctrl+f', 'command+f'],
+    description: 'Find',
+    command: 'editor.find'
+  },
+  {
+    action: 'AUTO_LAYOUT',
+    trigger: 'shift+alt+f',
+    description: 'Auto Layout',
+    command: 'editor.autoLayout'
+  },
+  {
+    action: 'FIT_VIEW',
+    trigger: ['f'],
+    description: 'Fit View',
+    command: 'view.fit'
+  },
+  {
+    action: 'ZOOM_IN',
+    trigger: ['ctrl+plus', 'command+plus'],
+    description: 'Zoom In',
+    command: 'view.zoomIn'
+  },
+  {
+    action: 'ZOOM_OUT',
+    trigger: ['command+-', 'ctrl+-'],
+    description: 'Zoom Out',
+    command: 'view.zoomOut'
+  },
+  {
+    action: 'ZOOM_RESET',
+    trigger: 'ctrl+0',
+    description: 'Zoom Reset',
+    command: 'view.zoomReset'
+  },
+  {
+    action: 'TOGGLE_GRID',
+    trigger: ['command+shift+g', 'ctrl+shift+g'],
+    description: 'Toggle Grid',
+    command: 'view.toggleGrid'
+  },
+  {
+    action: 'TOGGLE_MINIMAP',
+    trigger: ['command+shift+m', 'ctrl+shift+m'],
+    description: 'Toggle Minimap',
+    command: 'view.toggleMinimap'
+  },
+  {
+    action: 'TOGGLE_SNAP_GRID',
+    trigger: ['command+shift+s', 'ctrl+shift+s'],
+    description: 'Toggle Snap Grid',
+    command: 'view.toggleSnapGrid'
+  },
+  // Bound for the keymap UI; behaviour handled elsewhere or not yet implemented.
+  {
+    action: 'DUPLICATE',
+    trigger: ['command+d', 'ctrl+d'],
+    description: 'Duplicate'
+  },
+  // Deletion is handled natively by reactflow; listed here for the keymap UI.
+  {
+    action: 'DELETE',
+    trigger: ['delete', 'del', 'backspace'],
+    description: 'Delete'
+  },
+  // Context-aware handlers.
+  {
+    action: 'TRACE_UPSTREAM',
+    trigger: 'ctrl+shift+left',
+    description: 'Trace Upstream',
+    hintCommand: 'node.traceUpstream',
+    handler: traceFromSelection('node.traceUpstream')
+  },
+  {
+    action: 'TRACE_DOWNSTREAM',
+    trigger: 'ctrl+shift+right',
+    description: 'Trace Downstream',
+    hintCommand: 'node.traceDownstream',
+    handler: traceFromSelection('node.traceDownstream')
+  },
+  {
+    action: 'SAVE_VIEWPORT',
+    trigger: [
+      ...NUMBER_TRIGGERS.map((n) => `command+${n}`),
+      ...NUMBER_TRIGGERS.map((n) => `ctrl+${n}`)
+    ],
+    description: 'Save Viewport',
+    handler: (sys, event) => {
+      event?.preventDefault();
+      const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+      if (!event || !reactFlowInstance) return;
+      const viewportIndex = parseInt(event.key) - 1;
+      if (viewportIndex >= 0 && viewportIndex < 9) {
+        sys.graph.setViewport(viewportIndex, reactFlowInstance.getViewport());
+        sys.notifications.info(`Saved viewport ${viewportIndex + 1}`);
+      }
+    }
+  },
+  {
+    action: 'RECALL_VIEWPORT',
+    trigger: NUMBER_TRIGGERS,
+    description: 'Recall Viewport',
+    handler: (sys, event) => {
+      event?.preventDefault();
+      const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+      if (!event || !reactFlowInstance) return;
+      const viewportIndex = parseInt(event.key) - 1;
+      if (viewportIndex < 0 || viewportIndex >= 9) return;
+      const viewport = sys.graph.viewports[viewportIndex];
+      if (!viewport) {
+        return;
+      }
+      reactFlowInstance.setViewport(viewport);
+    }
+  }
+];
 
-          if (!reactflow) return;
+const buildDefaults = (sys: System) => {
+  const keymap: Record<string, string | string[]> = {};
+  const descriptions: Record<string, string> = {};
+  const handlers: Record<string, Handler> = {};
+  const commandToAction: Record<string, string> = {};
 
-          const existing = reactflow.getViewport();
-          reactflow.setViewport({ ...existing, zoom: 1 });
-        }
-      },
-      AUTO_LAYOUT: (event) => {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
+  for (const binding of defaultBindings) {
+    keymap[binding.action] = binding.trigger;
+    descriptions[binding.action] = binding.description;
 
-          switch (sys.systemSettings.getState().layoutType) {
-            case 'Dagre':
-              applyDagreLayout(sys);
-              break;
-            case 'Elk - Layered':
-              applyElkLayout(sys, 'org.eclipse.elk.layered');
-              break;
-            case 'Elk - Force':
-              applyElkLayout(sys, 'org.eclipse.elk.force');
-              break;
-            case 'Elk - Rect':
-              applyElkLayout(sys, 'org.eclipse.elk.rectpacking');
-              break;
-          }
-        }
-      },
-      UNDO: (event) => {
-        if (event) {
-          event.preventDefault();
-          sys.undoManager.undo();
-        }
-      },
-      REDO: (event) => {
-        if (event) {
-          event.preventDefault();
-          sys.undoManager.redo();
-        }
-      },
-      FIND: (event) => {
-        if (event) {
-          event.preventDefault();
-          sys.tabStore.getState().openTab('find');
-        }
-      }
-    },
+    const hintTarget = binding.command ?? binding.hintCommand;
+    if (hintTarget) commandToAction[hintTarget] = binding.action;
+
+    if (binding.command) {
+      const commandId = binding.command;
+      handlers[binding.action] = (event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        void sys.runCommand(commandId);
+      };
+    } else if (binding.handler) {
+      const handler = binding.handler;
+      handlers[binding.action] = (event) => handler(sys, event);
+    }
+  }
+
+  return { keymap, descriptions, handlers, commandToAction };
+};
+
+export const hotKeyStoreFactory = (sys: System) => {
+  const { keymap, descriptions, handlers, commandToAction } =
+    buildDefaults(sys);
+
+  return create<HotkeyStore>((set, get) => ({
+    keymap,
+    descriptions,
+    handlers,
+    commandToAction,
 
     register(val) {
       set((s) => ({
@@ -301,6 +332,10 @@ export const hotKeyStoreFactory = (sys: System) =>
         descriptions: {
           ...s.descriptions,
           ...(val.description ? { [val.action]: val.description } : {})
+        },
+        commandToAction: {
+          ...s.commandToAction,
+          ...(val.command ? { [val.command]: val.action } : {})
         }
       }));
     },
@@ -319,5 +354,11 @@ export const hotKeyStoreFactory = (sys: System) =>
           [name]: desc
         }
       }));
+    },
+    getCommandKeybinding(commandId) {
+      const action = get().commandToAction[commandId];
+      if (!action) return undefined;
+      return formatTrigger(get().keymap[action]);
     }
   }));
+};

package/src/store/layers.ts

@@ -1,4 +1,4 @@
-import type { System } from '@/system';
+import type { GraphSession } from '@/system/graphSession';
 import { create } from 'zustand';
 
 const DEFAULT_LAYER_ID = 'default';
@@ -51,7 +51,7 @@ const createLayerId = (): string => {
   return `layer-${Date.now()}-${suffix}`;
 };
 
-export const layerStoreFactory = (system: System) => {
+export const layerStoreFactory = (session: GraphSession) => {
   const store = create<LayerStore>((set, get) => ({
     defaultLayerId: DEFAULT_LAYER_ID,
     layers: {
@@ -250,7 +250,7 @@ export const layerStoreFactory = (system: System) => {
     }
   }));
 
-  system.nodeStore.subscribe((nodeState) => {
+  session.nodeStore.subscribe((nodeState) => {
     const nodeIds = nodeState.nodes.map((node) => node.id);
     store.getState().pruneNodeAssignments(nodeIds);
   });

package/src/store/registry.ts

@@ -26,10 +26,18 @@ export const registryStoreFactory = () =>
     },
 
     updateRegistry: (registry: INodeRegistry) =>
-      set((x) => ({
-        values: { ...x.values, ...registry.values },
-        specs: [...registry.specs]
-      })),
+      set((x) => {
+        // Merge specs by type (additive) so layering multiple profiles/plugins
+        // (core + image + ai + ...) doesn't clobber previously-registered node
+        // types. Later registrations override an existing type. Use updateSpecs
+        // for a full replacement.
+        const byType = new Map(x.specs.map((spec) => [spec.type, spec]));
+        for (const spec of registry.specs) byType.set(spec.type, spec);
+        return {
+          values: { ...x.values, ...registry.values },
+          specs: Array.from(byType.values())
+        };
+      }),
 
     updateValues: (values: Record<string, ValueTypeMetadata>) =>
       set((x) => ({

package/src/store/selection.ts

@@ -1,4 +1,4 @@
-import type { System } from '@/system';
+import type { GraphSession } from '@/system/graphSession';
 import { create } from 'zustand';
 
 export type SelectionStore = {
@@ -6,14 +6,14 @@ export type SelectionStore = {
   setSelectedNodeId: (nodeId: string | null) => void;
 };
 
-export const selectionStoreFactory = (system: System) => {
+export const selectionStoreFactory = (session: GraphSession) => {
   const store = create<SelectionStore>((set) => ({
     selectedNodeId: null,
     setSelectedNodeId: (selectedNodeId: string | null) =>
       set(() => ({ selectedNodeId }))
   }));
   //Track side effect of selected node in the node store
-  system.nodeStore.subscribe((state) => {
+  session.nodeStore.subscribe((state) => {
     const selectedNode = state.nodes.find((n) => n.selected);
     store.getState().setSelectedNodeId(selectedNode?.id ?? null);
   });