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

package/src/components/menubar/defaults.tsx

@@ -53,18 +53,21 @@ export interface IWindowButton {
   name: string;
   icon?: JSX.Element;
   content: JSX.Element;
+  /** Command id whose shortcut is shown next to this item. */
+  commandId?: string;
 }
 /**
  * A simple button that toggles a window panel
  * @param param0
  * @returns
  */
-export const windowButton = ({
+const windowButton = ({
   name,
   id,
   title,
   icon,
-  content
+  content,
+  commandId
 }: IWindowButton): IMenuItem => ({
   name: name,
   render: function Toggle() {
@@ -99,7 +102,12 @@ export const windowButton = ({
       }
     };
     return (
-      <MenuItemElement onClick={onToggle} key={title} icon={icon}>
+      <MenuItemElement
+        onClick={onToggle}
+        key={title}
+        icon={icon}
+        commandId={commandId}
+      >
         {title}
       </MenuItemElement>
     );
@@ -114,9 +122,15 @@ export const defaultMenuDataFactory = (): IMenu => ({
       items: [
         {
           name: 'newGraph',
-          render: (rest) => {
+          render: function NewGraph(rest) {
+            const system = useSystem();
             return (
-              <MenuItemElement key="new" icon={<PagePlusIn />} {...rest}>
+              <MenuItemElement
+                key="new"
+                icon={<PagePlusIn />}
+                onClick={() => system.newGraph()}
+                {...rest}
+              >
                 New Graph
               </MenuItemElement>
             );
@@ -194,7 +208,7 @@ export const defaultMenuDataFactory = (): IMenu => ({
             const system = useSystem();
 
             const onSave = () => {
-              system.actionStore.getState().actions.save();
+              void system.runCommand('editor.save');
             };
 
             return (
@@ -202,6 +216,7 @@ export const defaultMenuDataFactory = (): IMenu => ({
                 key={'saveUI'}
                 icon={<Download />}
                 onClick={onSave}
+                commandId="editor.save"
                 {...rest}
               >
                 Save Graph
@@ -285,10 +300,11 @@ export const defaultMenuDataFactory = (): IMenu => ({
             const canUndo = useStore(sys.undoManager.store, (s) => s.canUndo);
             return (
               <MenuItemElement
-                onClick={() => canUndo && sys.undoManager.undo()}
+                onClick={() => canUndo && sys.runCommand('editor.undo')}
                 disabled={!canUndo}
                 key={key}
                 icon={<Undo />}
+                commandId="editor.undo"
                 {...rest}
               >
                 Undo
@@ -304,10 +320,11 @@ export const defaultMenuDataFactory = (): IMenu => ({
             const canRedo = useStore(sys.undoManager.store, (s) => s.canRedo);
             return (
               <MenuItemElement
-                onClick={() => canRedo && sys.undoManager.redo()}
+                onClick={() => canRedo && sys.runCommand('editor.redo')}
                 disabled={!canRedo}
                 key={key}
                 icon={<Redo />}
+                commandId="editor.redo"
                 {...rest}
               >
                 Redo
@@ -326,26 +343,45 @@ export const defaultMenuDataFactory = (): IMenu => ({
         },
         {
           name: 'copy',
-          render: ({ key, ...rest }) => (
-            <MenuItemElement key={key} icon={<Redo />} {...rest}>
-              Copy
-            </MenuItemElement>
-          )
+          render: function Copy({ key, ...rest }) {
+            const sys = useSystem();
+            return (
+              <MenuItemElement
+                key={key}
+                icon={<Redo />}
+                onClick={() => sys.runCommand('selection.copy')}
+                commandId="selection.copy"
+                {...rest}
+              >
+                Copy
+              </MenuItemElement>
+            );
+          }
         },
         {
           name: 'paste',
-          render: ({ key, ...rest }) => (
-            <MenuItemElement key={key} icon={<Redo />} {...rest}>
-              Paste
-            </MenuItemElement>
-          )
+          render: function Paste({ key, ...rest }) {
+            const sys = useSystem();
+            return (
+              <MenuItemElement
+                key={key}
+                icon={<Redo />}
+                onClick={() => void sys.runCommand('selection.paste')}
+                commandId="selection.paste"
+                {...rest}
+              >
+                Paste
+              </MenuItemElement>
+            );
+          }
         },
         new Seperator(),
         windowButton({
           name: 'find',
           id: 'find',
           title: 'Find',
-          content: <SearchPanel />
+          content: <SearchPanel />,
+          commandId: 'editor.find'
         })
       ]
     },

package/src/components/menubar/menuItem.module.css

@@ -7,10 +7,25 @@
 }
 
 .inner {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding: 0.25rem;
+    padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
     width: 100%;
     min-width: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+}
+
+.label {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.keybinding {
+    flex: 0 0 auto;
+    font-size: 0.85em;
+    opacity: 0.6;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
 }

package/src/components/menubar/menuItem.tsx

@@ -1,30 +1,63 @@
 import { Item } from 'rc-menu';
 import React from 'react';
+import { useStore } from 'zustand';
+import { useSystem } from '@/system';
 
 import styles from './menuItem.module.css';
 
 export type IMenuItemElement = React.ComponentProps<typeof Item> & {
   icon?: React.ReactNode;
+  /**
+   * Explicit shortcut hint (e.g. `'Ctrl+S'`). Overrides the auto-detected one.
+   */
+  keybinding?: string;
+  /**
+   * Command id this item runs. When provided, the shortcut hint is detected
+   * automatically from the live keymap, so a menu item shows its shortcut just
+   * by naming the command it dispatches.
+   */
+  commandId?: string;
   /**
    * Needed to hack into the inner part of the menu item
    */
   inner?: (children: React.ReactNode) => React.ReactNode;
 };
 
+/** Right-aligned shortcut hint resolved live from the command's keymap binding. */
+const KeybindingHint = ({ commandId }: { commandId: string }) => {
+  const sys = useSystem();
+  const hint = useStore(sys.hotKeyStore, (s) =>
+    s.getCommandKeybinding(commandId)
+  );
+  if (!hint) return null;
+  return <span className={styles.keybinding}>{hint}</span>;
+};
+
 /**
  * You must provide a unique key for each item
  */
 export const MenuItemElement = ({
   inner = (children: React.ReactNode) => children,
   children,
+  keybinding,
+  commandId,
   ...rest
 }: IMenuItemElement) => {
+  const hint = keybinding ? (
+    <span className={styles.keybinding}>{keybinding}</span>
+  ) : commandId ? (
+    <KeybindingHint commandId={commandId} />
+  ) : null;
+
   return (
     // @ts-expect-error This is the correct attribute
     <Item selectable={'false'} {...rest}>
       {inner(
         <div className={styles.root}>
-          <div className={styles.inner}>{children}</div>
+          <div className={styles.inner}>
+            <span className={styles.label}>{children}</span>
+            {hint}
+          </div>
         </div>
       )}
     </Item>

package/src/components/nodes/behave/NodeContainer.module.css

@@ -1,35 +1,35 @@
 .container {
     min-width: 120px;
-    border-radius: 4px;
+    border-radius: var(--ds-node-radius, 4px);
 
-    color: var(--vscode-editorWidget-foreground, var(--vscode-foreground));
-    font-size: 0.8125rem;
-    background-color: #2b2b2b;
+    color: var(--ds-widget-fg, var(--ds-fg));
+    font-size: var(--fs-body, 0.8125rem);
+    background-color: var(--ds-widget-bg, #2b2b2b);
 
-    border: 1px solid var(--vscode-editorWidget-border, var(--vscode-input-border, rgba(128, 128, 128, 0.35)));
+    border: 1px solid var(--ds-border-subtle, var(--ds-input-border, rgba(128, 128, 128, 0.35)));
     box-sizing: border-box;
 
-    --node-accent: var(--vscode-focusBorder, #0078d4);
+    --node-accent: var(--ds-focus-border, #0078d4);
 }
 
 .selected {
-    box-shadow: 0 0 0 1px var(--vscode-focusBorder, #0078d4);
+    box-shadow: 0 0 0 1px var(--ds-focus-border, #0078d4);
 }
 
 .header {
     display: flex;
     align-items: center;
-    min-height: 24px;
+    min-height: 22px;
 
-    padding: 4px 8px;
+    padding: 3px 8px;
 
-    background-color: var(--vscode-sideBarSectionHeader-background, var(--vscode-editorWidget-background, var(--vscode-editor-background)));
-    border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-input-border, rgba(128, 128, 128, 0.35)));
+    background-color: var(--ds-section-header-bg, var(--ds-widget-bg, var(--ds-editor-bg)));
+    border-bottom: 1px solid var(--ds-border-subtle, var(--ds-input-border, rgba(128, 128, 128, 0.35)));
 
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+    border-top-left-radius: var(--ds-node-radius, 4px);
+    border-top-right-radius: var(--ds-node-radius, 4px);
 
-    border-left: 5px solid var(--node-accent);
+    border-left: 3px solid var(--node-accent);
 }
 
 .title {
@@ -37,7 +37,7 @@
     min-width: 0;
     font-weight: 600;
     letter-spacing: 0.01em;
-    color: var(--vscode-foreground);
+    color: var(--ds-fg);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -48,40 +48,41 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    margin-left: 5em;
+    margin-left: auto;
+    padding-left: 8px;
 }
 
 .content {
     display: flex;
     flex-direction: column;
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding-top: 4px;
+    padding-bottom: 4px;
 }
 
 .red {
-    --node-accent: #d16969;
+    --node-accent: var(--ds-node-red, #d16969);
 }
 
 .green {
-    --node-accent: #89d185;
+    --node-accent: var(--ds-node-green, #89d185);
 }
 
 .lime {
-    --node-accent: #b5cea8;
+    --node-accent: var(--ds-node-lime, #b5cea8);
 }
 
 .purple {
-    --node-accent: #c586c0;
+    --node-accent: var(--ds-node-purple, #c586c0);
 }
 
 .blue {
-    --node-accent: #4fc1ff;
+    --node-accent: var(--ds-node-blue, #4fc1ff);
 }
 
 .gray {
-    --node-accent: var(--vscode-descriptionForeground, #cccccc);
+    --node-accent: var(--ds-fg-muted, #cccccc);
 }
 
 .white {
-    --node-accent: var(--vscode-foreground, #cccccc);
+    --node-accent: var(--ds-fg, #cccccc);
 }

package/src/components/nodes/group/index.tsx

@@ -7,7 +7,7 @@ import {
 import { NodeResizer } from '@reactflow/node-resizer';
 import { useCallback, type ComponentType } from 'react';
 import { VscodeButton } from '@vscode-elements/react-elements';
-import { useSystem } from '@/system/provider';
+import { useGraph } from '@/system/provider';
 import type { IGroupNode } from '@/types/nodes';
 
 const lineStyle = { borderColor: 'white' };
@@ -15,7 +15,7 @@ const padding = 25;
 
 function GroupNode(props: NodeProps<IGroupNode['data']>) {
   const { id, data } = props;
-  const system = useSystem();
+  const system = useGraph();
   const { minWidth, minHeight, hasChildNodes } = useStore((store) => {
     const childNodes = Array.from(store.nodeInternals.values()).filter(
       (n) => n.parentId === id
@@ -70,7 +70,7 @@ function GroupNode(props: NodeProps<IGroupNode['data']>) {
             style={{
               width: '32px',
               height: '28px',
-              border: '1px solid var(--vscode-input-border)',
+              border: '1px solid var(--ds-input-border)',
               borderRadius: '4px',
               cursor: 'pointer',
               backgroundColor: 'transparent'

package/src/components/nodes/wrapper/styles.module.css

@@ -1,20 +1,9 @@
-.collapserContainer {
-    height: 0;
-    overflow: hidden;
-}
-
-.collapserContent {
-    position: relative;
-    padding: var(--component-spacing-xs);
-    padding-bottom: var(--component-spacing-md);
-}
-
 .nodeWrapper {
     position: relative;
     box-shadow: var(--shadows-contextMenu);
     border-radius: var(--component-radii-md);
     background: var(--color-neutral-canvas-default-bg);
-    border: 2px solid var(--color-neutral-stroke-subtle);
+    border: 1px solid var(--color-neutral-stroke-subtle);
     flex: 1;
     display: flex;
 }
@@ -26,8 +15,8 @@
 }
 
 .nodeWrapper.executing {
-    border-color: var(--vscode-focusBorder);
-    box-shadow: 0 0 8px var(--vscode-focusBorder);
+    border-color: var(--ds-focus-border);
+    box-shadow: 0 0 8px var(--ds-focus-border);
     animation: pulse-border 1s ease-in-out infinite;
 }
 
@@ -37,7 +26,7 @@
 
 .nodeWrapper.pinned {
     cursor: not-allowed;
-    border-color: var(--vscode-editorWarning-foreground);
+    border-color: var(--ds-warning);
 }
 
 .smallIcon {
@@ -49,18 +38,14 @@
 
     0%,
     100% {
-        box-shadow: 0 0 8px var(--vscode-focusBorder);
+        box-shadow: 0 0 8px var(--ds-focus-border);
     }
 
     50% {
-        box-shadow: 0 0 16px var(--vscode-focusBorder);
+        box-shadow: 0 0 16px var(--ds-focus-border);
     }
 }
 
-.nodeContent {
-    flex: 1;
-}
-
 .icons {
     display: flex;
 }
@@ -100,14 +85,3 @@
     color: var(--color-neutral-canvas-minimal-fg-subtle);
 }
 
-.descriptionIcon {
-    display: flex;
-    align-items: center;
-    color: var(--vscode-descriptionForeground);
-    opacity: 0.7;
-    cursor: help;
-}
-
-.descriptionIcon:hover {
-    opacity: 1;
-}

package/src/components/panels/alignment/index.module.css

@@ -1,13 +1,3 @@
-.root {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-    width: 100%;
-    padding: 0.25rem;
-    overflow: auto;
-}
-
 .content {
     display: flex;
     flex-direction: column;

package/src/components/panels/alignment/index.tsx

@@ -14,8 +14,8 @@ import {
   CompAlignTopSolid
 } from 'iconoir-react';
 import { VscodeButton } from '@vscode-elements/react-elements';
-import { useSystem } from '@/system/provider';
-import type { System } from '@/system';
+import { useActiveGraph } from '@/system/provider';
+import type { GraphSession } from '@/system';
 import styles from './index.module.css';
 import { BasePanel } from '../base';
 
@@ -38,7 +38,7 @@ const partitionSelectedNodes = (nodes: Node[]) => {
 };
 
 const handleChange =
-  (system: System) => (updater: (selectedNodes: Node[]) => void) => {
+  (system: GraphSession) => (updater: (selectedNodes: Node[]) => void) => {
     const { nodes, setNodes } = system.nodeStore.getState();
 
     const { selectedNodes, unselectedNodes } = partitionSelectedNodes(nodes);
@@ -130,7 +130,7 @@ export const distribute =
   };
 
 export function AlignmentPanel() {
-  const graphEditor = useSystem();
+  const graphEditor = useActiveGraph()!;
   const updateNodes = handleChange(graphEditor);
 
   return (

package/src/components/panels/base/styles.module.css

@@ -7,6 +7,6 @@
     padding: 0.5rem;
     gap: 0.25rem;
     overflow: auto;
-    background-color: var(--vscode-tab-inactiveBackground,#181818);
-    color: var(--vscode-editor-foreground);
+    background-color: var(--ds-tab-inactive-bg,#181818);
+    color: var(--ds-editor-fg);
 }

package/src/components/panels/common/PanelHeader.module.css

@@ -0,0 +1,24 @@
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    flex-shrink: 0;
+}
+
+.title {
+    font-size: var(--fs-section, 0.7rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ds-fg);
+    opacity: 0.65;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+}

package/src/components/panels/common/PanelHeader.tsx

@@ -0,0 +1,22 @@
+import type React from 'react';
+import styles from './PanelHeader.module.css';
+
+/**
+ * A panel section header row: a compact uppercase title (matching SectionTitle)
+ * on the left with an optional actions slot (e.g. a "+" button) on the right.
+ * Shared so Variables, Events and similar panels render identical chrome.
+ */
+export const PanelHeader = ({
+  title,
+  actions
+}: {
+  title: React.ReactNode;
+  actions?: React.ReactNode;
+}) => {
+  return (
+    <div className={styles.header}>
+      <span className={styles.title}>{title}</span>
+      {actions ? <div className={styles.actions}>{actions}</div> : null}
+    </div>
+  );
+};

package/src/components/panels/common/SectionTitle.module.css

@@ -0,0 +1,13 @@
+.title {
+    font-size: var(--fs-section, 0.7rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ds-fg);
+    opacity: 0.65;
+    margin: var(--space-3, 0.75rem) 0 var(--space-1, 0.25rem);
+}
+
+.title:first-child {
+    margin-top: 0;
+}

package/src/components/panels/common/SectionTitle.tsx

@@ -0,0 +1,10 @@
+import type React from 'react';
+import styles from './SectionTitle.module.css';
+
+/**
+ * Compact uppercase section header, shared across panels so every panel renders
+ * its groups with the same VSCode-settings-style chrome.
+ */
+export const SectionTitle = ({ children }: { children: React.ReactNode }) => {
+  return <div className={styles.title}>{children}</div>;
+};

package/src/components/panels/events/EditEventPanel.tsx

@@ -8,7 +8,7 @@ import {
   VscodeTextfield
 } from '@vscode-elements/react-elements';
 
-import { useSystem } from '@/system';
+import { useActiveGraph } from '@/system';
 import { BasePanel } from '../base';
 import styles from './styles.module.css';
 import type { ExtendedCustomEventJSON } from '@/store/events';
@@ -28,13 +28,13 @@ export const EditEventPanel: React.FC<EditEventPanelProps> = ({
   eventUiId,
   onBack
 }) => {
-  const system = useSystem();
+  const system = useActiveGraph()!;
 
   const rawEvents = useStore(system.eventsStore, (s) => s.customEvents);
 
   const controls = useStore(system.controlStore, (s) => s.controls);
   const defaultControl = useStore(system.controlStore, (s) => s.defaultControl);
-  const registry = useStore(system.registry);
+  const registry = useStore(system.editor.registry);
 
   const valueTypeOptions = useMemo(
     () => Object.keys(controls).sort((a, b) => a.localeCompare(b)),
@@ -138,8 +138,17 @@ export const EditEventPanel: React.FC<EditEventPanelProps> = ({
   if (!draftEvent) {
     return (
       <BasePanel>
-        <div className="h-full w-full flex items-center justify-center p-4">
-          <div className="text-gray-500 text-center">
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '16px'
+          }}
+        >
+          <div style={{ color: 'var(--ds-fg-muted)', textAlign: 'center' }}>
             Select an event to edit
           </div>
         </div>

package/src/components/panels/events/ManageEventsPanel.tsx

@@ -7,11 +7,12 @@ import {
 } from '@vscode-elements/react-elements';
 import { Plus, Edit } from 'iconoir-react';
 
-import { useSystem } from '@/system';
+import { useActiveGraph } from '@/system';
 import styles from './styles.module.css';
 import { BasePanel } from '../base';
 import type { GraphJSON } from '@kiberon-labs/behave-graph';
 import { Icon } from '@/components/primitives/icon';
+import { PanelHeader } from '../common/PanelHeader';
 
 type CustomEventJSON = NonNullable<GraphJSON['customEvents']>[number];
 
@@ -29,7 +30,7 @@ interface ManageEventsPanelProps {
 export const ManageEventsPanel: React.FC<ManageEventsPanelProps> = ({
   onSelectEvent
 }) => {
-  const system = useSystem();
+  const system = useActiveGraph()!;
   const rawEvents = useStore(system.eventsStore, (s) => s.customEvents);
 
   const persistedEvents = useMemo(() => Object.values(rawEvents), [rawEvents]);
@@ -49,12 +50,14 @@ export const ManageEventsPanel: React.FC<ManageEventsPanelProps> = ({
   return (
     <BasePanel>
       <div className={styles.root}>
-        <div className={styles.header}>
-          <h2 className={styles.headerTitle}>Custom Events</h2>
-          <Icon title="New event" onClick={addNewEvent}>
-            <Plus />
-          </Icon>
-        </div>
+        <PanelHeader
+          title="Custom Events"
+          actions={
+            <Icon title="New event" onClick={addNewEvent}>
+              <Plus />
+            </Icon>
+          }
+        />
         <VscodeDivider />
         <div className={styles.content}>
           {persistedEvents.length === 0 ? (