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

package/src/css/vars.css

@@ -1,14 +1,198 @@
 :root {
-    --colors-bgCanvas: #1f1f1f;
-    --colors-bgDefault: #181818;
-    --colors-bgEmphasis: #444444;
-    --colors-bgSubtle: #373737;
-    --colors-bgSurface: #292929;
-    --colors-borderDefault: #636363;
-    --colors-borderMuted: #2e2e2e;
-    --colors-borderSubtle: #454545;
-    --colors-fg: #fff;
-    --colors-fgSubtle: #8a8a8a;
-    --colors-inputBg: red;
-    --colors-inputBorderRest: red;
-}
+    /* ───────────────────────────────────────────────────────────────────────
+       Theme bridge (--ds-*)
+
+       These are the design system's *intermediary* tokens. Every component and
+       semantic token resolves colors/fonts through this layer — nothing in the
+       flow package references `--vscode-*` directly anymore. The values here are
+       the canonical (VS Code dark) defaults, so the editor looks right when run
+       standalone (Storybook, web, tests).
+
+       Inside the VS Code extension these tokens are re-declared to point at the
+       live `--vscode-*` theme variables (see the extension's theme-bridge.css),
+       which makes the whole editor follow the user's active VS Code theme. This
+       is the ONLY file that needs to enumerate the design tokens; the extension
+       mapping overrides just this layer and everything below cascades.
+       ─────────────────────────────────────────────────────────────────────── */
+
+    /* Fonts */
+    --ds-font-ui: "Segoe UI", system-ui, sans-serif;
+    --ds-font-mono: "Consolas", "Courier New", monospace;
+    --ds-font-mono-size: 14px;
+
+    /* Foreground */
+    --ds-fg: #cccccc;
+    --ds-fg-muted: #9d9d9d;
+    --ds-icon-fg: #cccccc;
+    --ds-editor-fg: #cccccc;
+    --ds-widget-fg: #cccccc;
+
+    /* Surfaces */
+    --ds-editor-bg: #1f1f1f;
+    --ds-widget-bg: #202020;
+    --ds-sidebar-bg: #181818;
+    --ds-tabs-bg: #181818;
+    --ds-tab-inactive-bg: #181818;
+    --ds-section-header-bg: #181818;
+    --ds-section-header-fg: #cccccc;
+    --ds-section-header-border: #2b2b2b;
+
+    /* Borders / focus / sashes */
+    --ds-border: #313131;
+    --ds-border-subtle: #454545;
+    --ds-border-muted: rgba(255, 255, 255, 0.09);
+    --ds-panel-border: #2b2b2b;
+    --ds-focus-border: #0078d4;
+    --ds-sash-hover-border: #0078d4;
+    --ds-sash-border: #2b2b2b;
+
+    /* Buttons */
+    --ds-button-bg: #0078d4;
+    --ds-button-fg: #ffffff;
+    --ds-button-hover-bg: #026ec1;
+    --ds-button-secondary-bg: #313131;
+    --ds-button-border: #313131;
+
+    /* Inputs */
+    --ds-input-bg: #313131;
+    --ds-input-border: #3c3c3c;
+    --ds-input-fg: #cccccc;
+    --ds-input-option-active-bg: rgba(36, 137, 219, 0.51);
+    --ds-input-option-active-border: #2488db;
+    --ds-input-option-active-fg: #ffffff;
+
+    /* Lists */
+    --ds-list-active-bg: #04395e;
+    --ds-list-active-fg: #ffffff;
+    --ds-list-hover-bg: #2a2d2e;
+
+    /* Toolbar / badges */
+    --ds-toolbar-active-bg: rgba(99, 102, 103, 0.31);
+    --ds-toolbar-hover-bg: rgba(90, 93, 94, 0.31);
+    --ds-badge-bg: #616161;
+    --ds-badge-fg: #f8f8f8;
+
+    /* Text variants */
+    --ds-preformat-fg: #d0d0d0;
+    --ds-blockquote-bg: #2b2b2b;
+    --ds-blockquote-border: #616161;
+    --ds-code-bg: #2b2b2b;
+
+    /* Editor / status states */
+    --ds-inactive-selection-bg: #3a3d41;
+    --ds-find-match-bg: rgba(234, 92, 0, 0.33);
+    --ds-error: #f14c4c;
+    --ds-warning: #cca700;
+    --ds-success: #89d185;
+    --ds-error-bg: #5a1d1d;
+    --ds-error-border: #be1100;
+    --ds-error-fg: #cccccc;
+    --ds-info-bg: #063b49;
+    --ds-info-border: #007acc;
+
+    /* Charts / git / terminal accents */
+    --ds-chart-blue: #59a4f9;
+    --ds-git-added: #81b88b;
+    --ds-git-modified: #e2c08d;
+    --ds-terminal-cyan: #11a8cd;
+
+    /* Menus (cascade onto the surfaces above when no host value exists) */
+    --ds-menu-bg: var(--ds-widget-bg);
+    --ds-menu-fg: var(--ds-fg);
+    --ds-menu-border: var(--ds-border);
+    --ds-menu-selection-bg: var(--ds-list-hover-bg);
+    --ds-menu-selection-fg: var(--ds-fg);
+
+    /* Graph node category accents + shape (the left-edge bar on a node header,
+       keyed by category in util/colors.ts). Default values track the editor's
+       syntax-style palette; an alternate theme can recolor these to its own
+       palette without touching the node components. */
+    --ds-node-red: #d16969;
+    --ds-node-green: #89d185;
+    --ds-node-lime: #b5cea8;
+    --ds-node-purple: #c586c0;
+    --ds-node-blue: #4fc1ff;
+    --ds-node-radius: 4px;
+
+    /* ───────────────────────────────────────────────────────────────────────
+       Semantic tokens
+
+       Curated surface/text aliases consumed across the editor. They resolve
+       through the bridge layer above, so theming is handled in one place.
+       ─────────────────────────────────────────────────────────────────────── */
+    --colors-bgCanvas: var(--ds-editor-bg);
+    --colors-bgDefault: var(--ds-sidebar-bg);
+    --colors-bgPanel: var(--ds-sidebar-bg);
+    --colors-bgSecondary: var(--ds-widget-bg);
+    --colors-bgEmphasis: var(--ds-toolbar-hover-bg);
+    --colors-bgSubtle: var(--ds-widget-bg);
+    --colors-bgSurface: var(--ds-widget-bg);
+
+    --colors-border: var(--ds-border);
+    --colors-borderDefault: var(--ds-border);
+    --colors-borderMuted: var(--ds-border-muted);
+    --colors-borderSubtle: var(--ds-border-subtle);
+
+    --colors-fg: var(--ds-fg);
+    --colors-text: var(--ds-fg);
+    --colors-fgSubtle: var(--ds-fg-muted);
+
+    --colors-inputBg: var(--ds-input-bg);
+    --colors-inputBorderRest: var(--ds-input-border);
+
+    --colors-error: var(--ds-error);
+    --colors-success: var(--ds-success);
+
+    --chip-color: var(--ds-badge-bg);
+
+    /* Legacy design-system aliases referenced across many components. */
+    --color-neutral-stroke-subtle: var(--ds-border-subtle);
+    --color-neutral-stroke-default: var(--ds-border);
+    --color-neutral-canvas-subtle-bg: var(--ds-tabs-bg);
+    --color-neutral-canvas-default-bg: var(--ds-editor-bg);
+    --color-neutral-background-strong: var(--ds-code-bg);
+    --color-neutral-canvas-minimal-fg-default: var(--ds-fg);
+    --color-neutral-canvas-minimal-fg-subtle: var(--ds-fg-muted);
+    --color-neutral-canvas-subtle-fg-subtle: rgba(0, 0, 0, 0.36);
+    --color-danger-surface-default-idle-bg: var(--ds-error-bg);
+    --color-danger-surface-default-idle-fg-default: var(--ds-error);
+
+    /* ───────────────────────────────────────────────────────────────────────
+       Non-themed scale tokens (sizing/spacing/typography ramps). These are not
+       host-theme-aware, so they hold literal values.
+       ─────────────────────────────────────────────────────────────────────── */
+
+    /* Shared type scale (compact, VSCode-settings density) */
+    --fs-section: 0.7rem;   /* uppercase group headers */
+    --fs-label: 0.8rem;     /* control labels / list rows */
+    --fs-desc: 0.72rem;     /* secondary descriptions */
+    --fs-body: 0.8125rem;   /* node + general body text */
+
+    /* Shared spacing scale */
+    --space-0: 0.125rem;
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+
+    /* Component scale */
+    --component-spacing-xs: var(--space-1);
+    --component-spacing-sm: var(--space-2);
+    --component-spacing-md: var(--space-3);
+    --component-radii-sm: 4px;
+    --component-radii-md: 6px;
+    --component-border-width-md: 1px;
+
+    /* Sizes scale (N × 0.25rem) */
+    --sizes-2: 0.5rem;
+    --sizes-4: 1rem;
+
+    /* Font tokens. NOTE: --font-body-* are consumed via the `font:` shorthand,
+       so they must be complete font values, not bare sizes. */
+    --fontSizes-small: var(--fs-desc, 0.72rem);
+    --font-body-sm: 400 0.8rem/1.4 var(--ds-font-ui);
+    --font-body-xs: 400 0.72rem/1.4 var(--ds-font-ui);
+
+    /* Shadows */
+    --shadows-contextMenu: 0 2px 8px rgba(0, 0, 0, 0.36);
+    --shadows-focus: 0 0 0 1px var(--ds-focus-border);
+}

package/src/css/vscode-elements.css

@@ -0,0 +1,124 @@
+/*
+ * @vscode-elements adapter.
+ *
+ * The editor uses @vscode-elements/react-elements (VscodeButton, VscodeTextfield,
+ * VscodeCheckbox, VscodeBadge, VscodeSingleSelect, …). Those web components style
+ * themselves from `--vscode-*` custom properties — they don't know about our
+ * `--ds-*` tokens. This file feeds them: it expresses our design tokens in the
+ * `--vscode-*` vocabulary the components understand, so they follow the active
+ * theme (default or an alternate like Kiberon) instead of falling back to their
+ * built-in VS Code blue.
+ *
+ * IMPORTANT — why the selector lists every theme scope:
+ * A custom property whose value is `var(--ds-x)` is substituted at the element
+ * it's declared on, then that *resolved* value inherits. Declaring the bridge
+ * only at `:root` would bake in the default `--ds-*` values and ignore a scoped
+ * theme. So the bridge is declared on `:root` AND on each theme container (where
+ * `--ds-*` is re-declared), so it re-resolves to that scope's tokens. When you
+ * add a new theme under css/themes/, add its scope selector here too.
+ *
+ * In the real VS Code extension this is inert: VS Code injects `--vscode-*` as
+ * inline styles on <html>, which win over these :root rules — so vscode-elements
+ * track the user's actual VS Code theme there, as intended.
+ */
+:root,
+[data-flow-theme="kiberon"],
+.flow-theme-kiberon {
+    /* Type */
+    --vscode-font-family: var(--ds-font-ui);
+
+    /* Foreground / focus / chrome */
+    --vscode-foreground: var(--ds-fg);
+    --vscode-disabledForeground: var(--ds-fg-muted);
+    --vscode-descriptionForeground: var(--ds-fg-muted);
+    --vscode-icon-foreground: var(--ds-icon-fg);
+    --vscode-focusBorder: var(--ds-focus-border);
+    --vscode-widget-border: var(--ds-border);
+    --vscode-contrastBorder: var(--ds-border);
+
+    /* Buttons */
+    --vscode-button-background: var(--ds-button-bg);
+    --vscode-button-foreground: var(--ds-button-fg);
+    --vscode-button-hoverBackground: var(--ds-button-hover-bg);
+    --vscode-button-border: var(--ds-button-border);
+    --vscode-button-secondaryBackground: var(--ds-button-secondary-bg);
+    --vscode-button-secondaryForeground: var(--ds-fg);
+    --vscode-button-secondaryHoverBackground: var(--ds-list-hover-bg);
+
+    /* Text inputs / textarea */
+    --vscode-input-background: var(--ds-input-bg);
+    --vscode-input-foreground: var(--ds-input-fg);
+    --vscode-input-border: var(--ds-input-border);
+    --vscode-input-placeholderForeground: var(--ds-fg-muted);
+    --vscode-settings-textInputBackground: var(--ds-input-bg);
+    --vscode-settings-textInputForeground: var(--ds-input-fg);
+    --vscode-settings-textInputBorder: var(--ds-input-border);
+
+    /* Checkbox */
+    --vscode-checkbox-background: var(--ds-input-bg);
+    --vscode-checkbox-foreground: var(--ds-fg);
+    --vscode-checkbox-border: var(--ds-input-border);
+    --vscode-checkbox-selectBackground: var(--ds-button-bg);
+    --vscode-checkbox-selectBorder: var(--ds-button-bg);
+    --vscode-settings-checkboxBackground: var(--ds-input-bg);
+    --vscode-settings-checkboxForeground: var(--ds-fg);
+    --vscode-settings-checkboxBorder: var(--ds-input-border);
+
+    /* Dropdown / single-select */
+    --vscode-dropdown-background: var(--ds-widget-bg);
+    --vscode-dropdown-foreground: var(--ds-fg);
+    --vscode-dropdown-border: var(--ds-input-border);
+    --vscode-dropdown-listBackground: var(--ds-widget-bg);
+    --vscode-settings-dropdownBackground: var(--ds-widget-bg);
+    --vscode-settings-dropdownForeground: var(--ds-fg);
+    --vscode-settings-dropdownBorder: var(--ds-input-border);
+
+    /* Badge */
+    --vscode-badge-background: var(--ds-badge-bg);
+    --vscode-badge-foreground: var(--ds-badge-fg);
+
+    /* Lists / trees */
+    --vscode-list-activeSelectionBackground: var(--ds-list-active-bg);
+    --vscode-list-activeSelectionForeground: var(--ds-list-active-fg);
+    --vscode-list-inactiveSelectionBackground: var(--ds-list-hover-bg);
+    --vscode-list-hoverBackground: var(--ds-list-hover-bg);
+    --vscode-list-hoverForeground: var(--ds-fg);
+    --vscode-list-focusBackground: var(--ds-list-active-bg);
+    --vscode-list-focusOutline: var(--ds-focus-border);
+
+    /* Toolbar */
+    --vscode-toolbar-hoverBackground: var(--ds-toolbar-hover-bg);
+    --vscode-toolbar-activeBackground: var(--ds-toolbar-active-bg);
+
+    /* Surfaces — collapsible headers, tables, dividers, panels */
+    --vscode-editorWidget-background: var(--ds-widget-bg);
+    --vscode-editorWidget-foreground: var(--ds-widget-fg);
+    --vscode-editorWidget-border: var(--ds-border-subtle);
+    --vscode-panel-border: var(--ds-panel-border);
+    --vscode-sideBar-background: var(--ds-sidebar-bg);
+    --vscode-sideBarSectionHeader-background: var(--ds-section-header-bg);
+    --vscode-sideBarSectionHeader-foreground: var(--ds-section-header-fg);
+    --vscode-sideBarSectionHeader-border: var(--ds-section-header-border);
+    --vscode-settings-headerForeground: var(--ds-fg);
+}
+
+/*
+ * Native form controls (checkbox / range / radio) tint from `accent-color`,
+ * which is a normal property — it re-resolves `var(--ds-*)` per element, so it
+ * follows a scoped theme without extra selectors.
+ */
+input[type="checkbox"],
+input[type="radio"],
+input[type="range"] {
+    accent-color: var(--ds-button-bg);
+}
+
+/*
+ * Safety: vscode-elements form controls carry an intrinsic default width that can
+ * exceed a narrow panel and force horizontal overflow. Cap them to their container.
+ */
+vscode-textfield,
+vscode-textarea,
+vscode-single-select {
+    max-width: 100%;
+}

package/src/generators/CallSubgraphGenerator.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useStore } from 'zustand';
+import {
+  VscodeOption,
+  VscodeSingleSelect
+} from '@vscode-elements/react-elements';
+import { useGraph } from '@/system/provider';
+import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
+import type { Socket } from '@/types';
+import type { IBehaveNode } from '@/types/nodes.js';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph/Graphs/IO/NodeSpecJSON';
+import {
+  CALL_SUBGRAPH_TYPE,
+  contractToParams,
+  deriveContract,
+  paramsToSockets,
+  type ContractParam
+} from '@/transformers/contract';
+
+export function getCallSubgraphGenerator() {
+  return {
+    name: `${CALL_SUBGRAPH_TYPE}.socketGenerator`,
+    check: (spec: NodeSpecJSON) => spec?.type === CALL_SUBGRAPH_TYPE,
+    render: CallSubgraphGenerator
+  };
+}
+
+const toSockets = (params: ContractParam[] | undefined): Socket[] =>
+  paramsToSockets(params ?? []);
+
+/**
+ * Properties-panel editor for a Call Subgraph node: pick which open graph to
+ * call. Selecting one copies that graph's contract into the node configuration
+ * and mirrors it onto the node's dynamic input/output ports. The `flow` input
+ * and the `started` / `completed` flow outputs are static on the core node.
+ */
+const CallSubgraphGenerator: React.FC<SocketGeneratorRenderProps> = ({
+  node
+}) => {
+  const session = useGraph();
+  const sessions = useStore(session.editor.activeGraph, (s) => s.sessions);
+
+  const options = useMemo(
+    () =>
+      Object.values(sessions)
+        .filter((s) => s.id !== session.id)
+        .map((s) => ({ id: s.id, name: s.name })),
+    [sessions, session.id]
+  );
+
+  const config = node.data.configuration as
+    | {
+        subgraphId?: string;
+        inputs?: ContractParam[];
+        outputs?: ContractParam[];
+      }
+    | undefined;
+  const subgraphId = String(config?.subgraphId ?? '');
+  const portsKey = JSON.stringify({
+    inputs: config?.inputs ?? [],
+    outputs: config?.outputs ?? []
+  });
+
+  // Mirror the copied contract onto dynamic ports.
+  useEffect(() => {
+    const inputs = toSockets(config?.inputs);
+    const outputs = toSockets(config?.outputs);
+    session.nodeStore.getState().setNodes((prev) =>
+      prev.map((n) => {
+        if (n.id !== node.id) return n;
+        return {
+          ...n,
+          data: {
+            ...n.data,
+            dynamicPorts: { ...n.data?.dynamicPorts, inputs, outputs }
+          }
+        } as IBehaveNode;
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [portsKey, node.id, session.nodeStore]);
+
+  const select = useCallback(
+    (nextId: string) => {
+      const target = sessions[nextId];
+      const contract = target
+        ? deriveContract(target.nodeStore.getState().nodes)
+        : { graphInputs: [], graphOutputs: [] };
+      const inputs = contractToParams(contract.graphInputs);
+      const outputs = contractToParams(contract.graphOutputs);
+
+      session.nodeStore.getState().setNodes((prev) =>
+        prev.map((n) => {
+          if (n.id !== node.id) return n;
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              configuration: {
+                ...n.data?.configuration,
+                subgraphId: nextId,
+                inputs,
+                outputs
+              }
+            }
+          } as IBehaveNode;
+        })
+      );
+    },
+    [node.id, session, sessions]
+  );
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <div style={{ fontSize: 12, opacity: 0.9 }}>Subgraph</div>
+      <VscodeSingleSelect
+        value={subgraphId}
+        onChange={(e: any) => select(String(e?.target?.value ?? ''))}
+        disabled={options.length === 0}
+      >
+        {options.length === 0 ? (
+          <VscodeOption value="">No other graphs open</VscodeOption>
+        ) : (
+          <>
+            <VscodeOption value="">Select a graph...</VscodeOption>
+            {options.map((opt) => (
+              <VscodeOption key={opt.id} value={opt.id}>
+                {opt.name || opt.id}
+              </VscodeOption>
+            ))}
+          </>
+        )}
+      </VscodeSingleSelect>
+    </div>
+  );
+};

package/src/generators/CustomEventOnTriggeredGenerator.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useStore } from 'zustand';
-import { useSystem } from '@/system/provider';
+import { useGraph } from '@/system/provider';
 import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
 import type { Socket } from '@/types';
 import type { IBehaveNode } from '@/types/nodes.js';
@@ -19,7 +19,7 @@ export function getCustomEventOnTriggeredGenerator() {
 const CustomEventOnTriggeredGenerator: React.FC<SocketGeneratorRenderProps> = ({
   node
 }) => {
-  const system = useSystem();
+  const system = useGraph();
   const customEvents = useStore(system.eventsStore, (s) => s.customEvents);
 
   const customEventId = node.data.configuration?.customEventId;

package/src/generators/GraphBoundaryGenerator.module.css

@@ -0,0 +1,32 @@
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+/* One card per boundary param so the name field gets its own full-width line
+   instead of collapsing next to the type select. */
+.param {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    padding: 0.4rem;
+    border: 1px solid var(--ds-border-subtle, #454545);
+    border-radius: var(--component-radii-sm, 4px);
+    background: var(--ds-widget-bg, #202020);
+}
+
+.topRow {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.name {
+    flex: 1;
+    min-width: 0;
+}
+
+.type {
+    width: 100%;
+}