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

package/src/generators/GraphBoundaryGenerator.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useStore } from 'zustand';
+import {
+  VscodeButton,
+  VscodeOption,
+  VscodeSingleSelect,
+  VscodeTextfield
+} from '@vscode-elements/react-elements';
+import { Trash } from 'iconoir-react';
+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 { v4 as uuidv4 } from 'uuid';
+import {
+  GRAPH_INPUT_TYPE,
+  GRAPH_OUTPUT_TYPE,
+  paramId,
+  type ContractParam
+} from '@/transformers/contract';
+import styles from './GraphBoundaryGenerator.module.css';
+
+type BoundaryKind = 'input' | 'output';
+
+export function getGraphInputGenerator() {
+  return {
+    name: `${GRAPH_INPUT_TYPE}.socketGenerator`,
+    check: (spec: NodeSpecJSON) => spec?.type === GRAPH_INPUT_TYPE,
+    render: (props: SocketGeneratorRenderProps) => (
+      <GraphBoundaryGenerator {...props} kind="input" />
+    )
+  };
+}
+
+export function getGraphOutputGenerator() {
+  return {
+    name: `${GRAPH_OUTPUT_TYPE}.socketGenerator`,
+    check: (spec: NodeSpecJSON) => spec?.type === GRAPH_OUTPUT_TYPE,
+    render: (props: SocketGeneratorRenderProps) => (
+      <GraphBoundaryGenerator {...props} kind="output" />
+    )
+  };
+}
+
+/**
+ * Properties-panel editor for a subgraph boundary node's contract: add / name /
+ * type the inputs (`graph/input`) or outputs (`graph/output`). The configured
+ * params are mirrored onto the node's dynamic ports , `graph/input` exposes them
+ * as outputs, `graph/output` as inputs (the `flow` socket is static on the core
+ * node).
+ */
+const GraphBoundaryGenerator: React.FC<
+  SocketGeneratorRenderProps & { kind: BoundaryKind }
+> = ({ node, kind }) => {
+  const session = useGraph();
+  // Select the stable `values` object then derive , a freshly built array inside
+  // the selector would change identity every render and loop.
+  const values = useStore(session.editor.registry, (s) => s.values);
+  const valueTypes = useMemo(
+    () => Object.keys(values).filter((t) => t !== 'flow'),
+    [values]
+  );
+
+  const params: ContractParam[] = useMemo(
+    () =>
+      Array.isArray(node.data.configuration?.parameters)
+        ? (node.data.configuration!.parameters as ContractParam[])
+        : [],
+    [node.data]
+  );
+  const paramsKey = JSON.stringify(params);
+
+  // Mirror params onto dynamic ports. The socket identity (name/key/handle id)
+  // is the stable param id; the display label is the editable name.
+  useEffect(() => {
+    const sockets: Socket[] = params.map((param) => {
+      const id = paramId(param);
+      return {
+        name: id,
+        key: id,
+        label: param.name || id,
+        valueType: param.valueTypeName || 'string'
+      };
+    });
+    session.nodeStore.getState().setNodes((prev) =>
+      prev.map((n) => {
+        if (n.id !== node.id) return n;
+        return {
+          ...n,
+          data: {
+            ...n.data,
+            dynamicPorts: {
+              ...n.data?.dynamicPorts,
+              ...(kind === 'input' ? { outputs: sockets } : { inputs: sockets })
+            }
+          }
+        } as IBehaveNode;
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paramsKey, kind, node.id, session.nodeStore]);
+
+  const update = useCallback(
+    (next: ContractParam[]) => {
+      session.nodeStore.getState().setNodes((prev) =>
+        prev.map((n) => {
+          if (n.id !== node.id) return n;
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              configuration: { ...n.data?.configuration, parameters: next }
+            }
+          } as IBehaveNode;
+        })
+      );
+    },
+    [node.id, session]
+  );
+
+  const addParam = useCallback(() => {
+    const base = kind === 'input' ? 'in' : 'out';
+    const existing = new Set(params.map((p) => p.name));
+    let i = params.length + 1;
+    let name = `${base}${i}`;
+    while (existing.has(name)) name = `${base}${++i}`;
+    update([
+      ...params,
+      { id: uuidv4(), name, valueTypeName: valueTypes[0] ?? 'string' }
+    ]);
+  }, [kind, params, update, valueTypes]);
+
+  const setName = useCallback(
+    (index: number, name: string) =>
+      update(params.map((p, i) => (i === index ? { ...p, name } : p))),
+    [params, update]
+  );
+
+  const setType = useCallback(
+    (index: number, valueTypeName: string) =>
+      update(params.map((p, i) => (i === index ? { ...p, valueTypeName } : p))),
+    [params, update]
+  );
+
+  const remove = useCallback(
+    (index: number) => update(params.filter((_, i) => i !== index)),
+    [params, update]
+  );
+
+  return (
+    <div className={styles.list}>
+      {params.map((param, index) => (
+        <div key={param.id ?? index} className={styles.param}>
+          <div className={styles.topRow}>
+            <VscodeTextfield
+              className={styles.name}
+              value={param.name}
+              placeholder={`${kind} name`}
+              onChange={(e: any) =>
+                setName(index, String(e?.target?.value ?? ''))
+              }
+            />
+            <VscodeButton
+              secondary
+              iconOnly
+              title={`Remove ${kind}`}
+              onClick={() => remove(index)}
+            >
+              <Trash />
+            </VscodeButton>
+          </div>
+          <VscodeSingleSelect
+            className={styles.type}
+            value={param.valueTypeName}
+            onChange={(e: any) =>
+              setType(index, String(e?.target?.value ?? 'string'))
+            }
+          >
+            {valueTypes.map((t) => (
+              <VscodeOption key={t} value={t}>
+                {t}
+              </VscodeOption>
+            ))}
+          </VscodeSingleSelect>
+        </div>
+      ))}
+      <VscodeButton secondary onClick={addParam}>
+        + Add {kind}
+      </VscodeButton>
+    </div>
+  );
+};

package/src/generators/SequenceGenerator.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { VscodeButton } from '@vscode-elements/react-elements';
 import { Plus, Minus } from 'iconoir-react';
 
-import { useSystem } from '@/system/provider';
+import { useGraph } from '@/system/provider';
 import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
 import type { NodeSpecJSON } from '@kiberon-labs/behave-graph/Graphs/IO/NodeSpecJSON';
 
@@ -18,7 +18,7 @@ export function getSequenceGenerator() {
 }
 
 const SequenceGenerator: React.FC<SocketGeneratorRenderProps> = ({ node }) => {
-  const system = useSystem();
+  const system = useGraph();
 
   const numOutputs = node.data.configuration?.numOutputs ?? 0;
 

package/src/generators/SwitchOnIntegerGenerator.tsx

@@ -7,7 +7,7 @@ import {
 } from '@vscode-elements/react-elements';
 import { Plus, Minus } from 'iconoir-react';
 
-import { useSystem } from '@/system/provider';
+import { useGraph } from '@/system/provider';
 import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
 import type { NodeSpecJSON } from '@kiberon-labs/behave-graph/Graphs/IO/NodeSpecJSON';
 
@@ -24,7 +24,7 @@ export function getSwitchOnIntegerGenerator() {
 const SwitchOnIntegerGenerator: React.FC<SocketGeneratorRenderProps> = ({
   node
 }) => {
-  const system = useSystem();
+  const system = useGraph();
 
   const numCases = node.data.configuration?.numCases ?? 0;
   const caseLabels = node.data.configuration?.caseLabels ?? {};

package/src/generators/SwitchOnStringGenerator.tsx

@@ -7,7 +7,7 @@ import {
 } from '@vscode-elements/react-elements';
 import { Plus, Minus } from 'iconoir-react';
 
-import { useSystem } from '@/system/provider';
+import { useGraph } from '@/system/provider';
 import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
 import type { NodeSpecJSON } from '@kiberon-labs/behave-graph/Graphs/IO/NodeSpecJSON';
 
@@ -24,7 +24,7 @@ export function getSwitchOnStringGenerator() {
 const SwitchOnStringGenerator: React.FC<SocketGeneratorRenderProps> = ({
   node
 }) => {
-  const system = useSystem();
+  const system = useGraph();
 
   const numCases = node.data.configuration?.numCases ?? 0;
   const caseLabels = node.data.configuration?.caseLabels ?? {};

package/src/generators/callSubgraphSync.ts

@@ -0,0 +1,126 @@
+import type { System } from '@/system/system';
+import type { GraphSession } from '@/system/graphSession';
+import type { IBehaveNode } from '@/types/nodes';
+import {
+  CALL_SUBGRAPH_TYPE,
+  contractToParams,
+  deriveContract,
+  paramsToSockets,
+  type ContractParam
+} from '@/transformers/contract';
+
+/**
+ * Stable string key for a session's contract (its graph/input + graph/output
+ * params). Used to detect *contract* changes and ignore unrelated node edits
+ * (e.g. dragging), so we only repropagate when the boundary actually changes.
+ */
+const contractKey = (session: GraphSession): string =>
+  JSON.stringify(deriveContract(session.nodeStore.getState().nodes));
+
+/**
+ * Reconcile every Call Subgraph node in every open graph with the *current*
+ * contract of the subgraph it references. Idempotent: a node is only rewritten
+ * when its stored contract/ports actually differ, so this converges and never
+ * loops (rewriting a call node does not change its host graph's contract).
+ */
+const resyncAllCallNodes = (editor: System): void => {
+  const sessions = editor.activeGraph.getState().sessions;
+
+  for (const target of Object.values(sessions)) {
+    let mutated = false;
+
+    const nextNodes = target.nodeStore.getState().nodes.map((node) => {
+      if (node.data?.type !== CALL_SUBGRAPH_TYPE) return node;
+
+      const subgraphId = String(node.data?.configuration?.subgraphId ?? '');
+      const subgraph = subgraphId ? sessions[subgraphId] : undefined;
+      // Referenced graph not open (e.g. its tab was closed): leave the last
+      // known contract in place rather than wiping the node's ports.
+      if (!subgraph) return node;
+
+      const contract = deriveContract(subgraph.nodeStore.getState().nodes);
+      const inputs: ContractParam[] = contractToParams(contract.graphInputs);
+      const outputs: ContractParam[] = contractToParams(contract.graphOutputs);
+      const inputSockets = paramsToSockets(inputs);
+      const outputSockets = paramsToSockets(outputs);
+
+      const currentConfig = {
+        inputs: node.data?.configuration?.inputs ?? [],
+        outputs: node.data?.configuration?.outputs ?? []
+      };
+      const currentPorts = {
+        inputs: node.data?.dynamicPorts?.inputs ?? [],
+        outputs: node.data?.dynamicPorts?.outputs ?? []
+      };
+
+      if (
+        JSON.stringify(currentConfig) === JSON.stringify({ inputs, outputs }) &&
+        JSON.stringify(currentPorts) ===
+          JSON.stringify({ inputs: inputSockets, outputs: outputSockets })
+      ) {
+        return node;
+      }
+
+      mutated = true;
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          configuration: {
+            ...node.data?.configuration,
+            inputs,
+            outputs
+          },
+          dynamicPorts: {
+            ...node.data?.dynamicPorts,
+            inputs: inputSockets,
+            outputs: outputSockets
+          }
+        }
+      } as IBehaveNode;
+    });
+
+    if (mutated) target.nodeStore.getState().setNodes(() => nextNodes);
+  }
+};
+
+/**
+ * Keep Call Subgraph nodes live with the graphs they reference. Without this a
+ * call node only captures the subgraph's contract at selection time; editing the
+ * subgraph's inputs/outputs afterwards would leave callers stale.
+ *
+ * Implemented as an editor session extension: every open graph (existing and
+ * future) watches its own contract, and when it changes we repropagate to all
+ * call nodes referencing it across every graph. Returns a disposer.
+ */
+export function setupCallSubgraphSync(editor: System): () => void {
+  const unsubscribes = new Map<string, () => void>();
+
+  const watch = (session: GraphSession) => {
+    if (unsubscribes.has(session.id)) return;
+
+    let last = contractKey(session);
+    const unsub = session.nodeStore.subscribe(() => {
+      const next = contractKey(session);
+      if (next === last) return; // ignore non-contract edits (drags, etc.)
+      last = next;
+      resyncAllCallNodes(editor);
+    });
+
+    unsubscribes.set(session.id, unsub);
+    session.onDispose(() => {
+      unsubscribes.get(session.id)?.();
+      unsubscribes.delete(session.id);
+    });
+  };
+
+  const unregister = editor.registerSessionExtension(watch);
+  // Reconcile graphs already open (e.g. a project loaded from disk) once.
+  resyncAllCallNodes(editor);
+
+  return () => {
+    unregister();
+    for (const unsub of unsubscribes.values()) unsub();
+    unsubscribes.clear();
+  };
+}

package/src/generators/registerDefaultGenerators.ts

@@ -3,6 +3,11 @@ import { getSwitchOnStringGenerator } from '../generators/SwitchOnStringGenerato
 import { getSwitchOnIntegerGenerator } from '../generators/SwitchOnIntegerGenerator';
 import { getCustomEventOnTriggeredGenerator } from '../generators/CustomEventOnTriggeredGenerator';
 import { getSequenceGenerator } from '../generators/SequenceGenerator';
+import {
+  getGraphInputGenerator,
+  getGraphOutputGenerator
+} from '../generators/GraphBoundaryGenerator';
+import { getCallSubgraphGenerator } from '../generators/CallSubgraphGenerator';
 
 export function registerDefaultSocketGenerators(system: System): () => void {
   const store = system.socketGeneratorStore.getState();
@@ -19,6 +24,15 @@ export function registerDefaultSocketGenerators(system: System): () => void {
   const sequence = getSequenceGenerator();
   store.registerGenerator(sequence);
 
+  const graphInput = getGraphInputGenerator();
+  store.registerGenerator(graphInput);
+
+  const graphOutput = getGraphOutputGenerator();
+  store.registerGenerator(graphOutput);
+
+  const callSubgraph = getCallSubgraphGenerator();
+  store.registerGenerator(callSubgraph);
+
   return () => {
     system.socketGeneratorStore
       .getState()
@@ -30,5 +44,12 @@ export function registerDefaultSocketGenerators(system: System): () => void {
       .getState()
       .unregisterGenerator(customEventOnTriggered.name);
     system.socketGeneratorStore.getState().unregisterGenerator(sequence.name);
+    system.socketGeneratorStore.getState().unregisterGenerator(graphInput.name);
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(graphOutput.name);
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(callSubgraph.name);
   };
 }

package/src/generators/registerDefaults.ts

@@ -0,0 +1,26 @@
+import type { System } from '@/system/system';
+import { registerDefaultSocketGenerators } from './registerDefaultGenerators';
+import { setupCallSubgraphSync } from './callSubgraphSync';
+
+/** Editors that already had their built-in content registered. */
+const initialized = new WeakSet<System>();
+
+/**
+ * Register the editor's built-in content , the default socket generators and the
+ * call-subgraph contract sync , on an editor instance.
+ *
+ * Idempotent per editor: safe to call from every graph-canvas mount (multiple
+ * tabs) without double-registering. The default content is editor-lifetime; the
+ * subgraph sync's per-session subscriptions clean themselves up on session
+ * dispose.
+ *
+ * A host that wants a blank or fully custom editor can simply not rely on the
+ * canvas's auto-call and register its own content instead.
+ */
+export function registerDefaults(editor: System): void {
+  if (initialized.has(editor)) return;
+  initialized.add(editor);
+
+  registerDefaultSocketGenerators(editor);
+  setupCallSubgraphSync(editor);
+}

package/src/hooks/useBehaveGraphFlow.ts

@@ -4,7 +4,7 @@ import { behaveToFlow } from '../transformers/behaveToFlow.js';
 import { flowToBehave } from '../transformers/flowToBehave.js';
 import { autoLayout } from '../util/autoLayout.js';
 import { hasPositionMetaData } from '../util/hasPositionMetaData.js';
-import { useSystem } from '@/system/provider.js';
+import { useGraph } from '@/system/provider.js';
 import { useStore } from 'zustand';
 
 /**
@@ -22,7 +22,7 @@ export const useBehaveGraphFlow = ({
   specJson: NodeSpecJSON[] | undefined;
 }) => {
   const [graphJson, setStoredGraphJson] = useState<GraphJSON | undefined>();
-  const sys = useSystem();
+  const sys = useGraph();
 
   const {
     nodes,

package/src/hooks/useFlowHandlers.ts

@@ -15,9 +15,10 @@ import type {
 import { v4 as uuidv4 } from 'uuid';
 
 import { calculateNewEdge } from '../util/calculateNewEdge.js';
+import { buildConverterInsertion } from '../util/autoConvert.js';
 import { getNodePickerFilters } from '../util/getPickerFilters.js';
 import { useBehaveGraphFlow } from './useBehaveGraphFlow.js';
-import { useSystem } from '@/system/provider.js';
+import { useGraph } from '@/system/provider.js';
 import type { ExtendedNodeSpecJSON } from '@/components/contextMenus/NodePicker.js';
 import {
   addFloatingTab,
@@ -56,7 +57,7 @@ export const useFlowHandlers = ({
   nodes: Node[];
   specJSON: NodeSpecJSON[] | undefined;
 }) => {
-  const sys = useSystem();
+  const sys = useGraph();
   const [lastConnectStart, setLastConnectStart] =
     useState<OnConnectStartParams>();
   const [nodePickerVisibility, setNodePickerVisibility] =
@@ -66,6 +67,43 @@ export const useFlowHandlers = ({
       if (connection.source === null) return;
       if (connection.target === null) return;
 
+      // Auto-convert: if the value types differ but a converter node exists,
+      // splice the converter in between instead of a direct edge.
+      const autoConvert = sys.editor.systemSettings.getState().autoConvert;
+      if (autoConvert && specJSON) {
+        const insertion = buildConverterInsertion(
+          connection,
+          sys.nodeStore.getState().nodes,
+          specJSON,
+          sys.editor.conversionStore.getState().conversions
+        );
+        if (insertion) {
+          const { node, edges: convEdges } = insertion;
+          sys.undoManager.execute({
+            name: 'Auto-convert connection',
+            execute: () => {
+              sys.nodeStore.getState().addNode(node);
+              sys.edgeStore
+                .getState()
+                .setEdges([...sys.edgeStore.getState().edges, ...convEdges]);
+              convEdges.forEach((e) => sys.pubsub.publish('edge:added', e));
+            },
+            undo: () => {
+              const ids = new Set(convEdges.map((e) => e.id));
+              sys.nodeStore
+                .getState()
+                .setNodes((ns) => ns.filter((n) => n.id !== node.id));
+              sys.edgeStore
+                .getState()
+                .setEdges(
+                  sys.edgeStore.getState().edges.filter((e) => !ids.has(e.id))
+                );
+            }
+          });
+          return;
+        }
+      }
+
       const newEdge = {
         id: uuidv4(),
         source: connection.source,
@@ -81,7 +119,7 @@ export const useFlowHandlers = ({
         }
       ]);
     },
-    [onEdgesChange]
+    [onEdgesChange, sys, specJSON]
   );
 
   const closeNodePicker = useCallback(() => {
@@ -89,9 +127,9 @@ export const useFlowHandlers = ({
     setNodePickerVisibility(undefined);
 
     // Close the nodepicker panel from rc-dock
-    const currentLayout = sys.tabStore.getState().layout;
+    const currentLayout = sys.editor.tabStore.getState().layout;
     const newLayout = removeTabFromLayout(currentLayout, 'nodepicker');
-    sys.tabStore.getState().setLayout(newLayout);
+    sys.editor.tabStore.getState().setLayout(newLayout);
   }, [sys]);
 
   const handleAddNode = useCallback(
@@ -171,7 +209,7 @@ export const useFlowHandlers = ({
         sys.refStore.getState().setRef('nodePickerPosition', screenPos);
 
         // Open as floating rc-dock panel
-        const currentLayout = sys.tabStore.getState().layout;
+        const currentLayout = sys.editor.tabStore.getState().layout;
 
         // Close existing nodepicker if open
         const existingPanel = findTabInLayout(currentLayout, 'nodepicker');
@@ -194,7 +232,7 @@ export const useFlowHandlers = ({
           height: 500
         });
 
-        sys.tabStore.getState().setLayout(newLayout);
+        sys.editor.tabStore.getState().setLayout(newLayout);
       } else {
         setLastConnectStart(undefined);
       }
@@ -217,7 +255,7 @@ export const useFlowHandlers = ({
       sys.refStore.getState().setRef('nodePickerPosition', screenPos);
 
       // Open as floating rc-dock panel
-      const currentLayout = sys.tabStore.getState().layout;
+      const currentLayout = sys.editor.tabStore.getState().layout;
 
       // Close existing nodepicker if open
       const existingPanel = findTabInLayout(currentLayout, 'nodepicker');
@@ -240,7 +278,7 @@ export const useFlowHandlers = ({
         height: 500
       });
 
-      sys.tabStore.getState().setLayout(newLayout);
+      sys.editor.tabStore.getState().setLayout(newLayout);
     },
     [sys]
   );

package/src/hooks/useWasdPan.ts

@@ -9,11 +9,33 @@ export type UseWasdPanOptions = {
   enabled?: boolean;
 };
 
-const isEventFromEditable = (event: KeyboardEvent) => {
+const isEditableElement = (element: HTMLElement): boolean => {
+  const tag = element.tagName?.toLowerCase();
+  // Contenteditable surfaces (e.g. the notes plugin's prosemirror editor) are
+  // divs, so checking the tag alone is not enough — WASD must type, not pan.
+  return (
+    tag === 'input' ||
+    tag === 'textarea' ||
+    tag === 'select' ||
+    element.isContentEditable
+  );
+};
+
+export const isEventFromEditable = (event: KeyboardEvent) => {
+  // Events from inside a web component are retargeted: at the window listener
+  // `event.target` is the custom-element host (e.g. the conversation panel's
+  // <vscode-textfield>), not the <input> in its shadow DOM. composedPath()
+  // exposes the real target chain, so walk it and check every element.
+  const path =
+    typeof event.composedPath === 'function' ? event.composedPath() : [];
+  if (path.length > 0) {
+    return path.some(
+      (node) => node instanceof HTMLElement && isEditableElement(node)
+    );
+  }
   const target = event.target as HTMLElement | null;
-  const tag = target?.tagName?.toLowerCase();
-  //Just a patch to avoid pan when focus is in input/textarea or contenteditable element
-  return tag !== 'div';
+  if (!target) return false;
+  return isEditableElement(target);
 };
 
 export const useWasdPan = ({

package/src/index.css

@@ -2,11 +2,13 @@
 @import 'rc-menu/assets/index.css';
 @import "rc-dock/dist/rc-dock-dark.css";
 
-@import "./css/vscode.css";
 @import "./css/vars.css";
+@import "./css/themes/kiberon.css";
+@import "./css/vscode-elements.css";
 @import "./css/rc-dock.css";
 @import "./css/rc-menu.css";
 @import "./css/prosemirror.css";
+@import "./css/notes.css";
 
 *{
     box-sizing: border-box;
@@ -61,21 +63,7 @@
     color: var(--colors-fg);
 }
 
-.rc-menu-sub .rc-menu-item {
-    padding: 0.1em !important;
-}
-
-.rc-menu-item {
-    color: var(--colors-fg);
-    padding: 0 1em !important;
-}
-
-
-.rc-menu-horizontal {
-    padding: 0.2em;
-    display: flex;
-    gap: 0.4em;
-}
+/* rc-menu styling lives in css/rc-menu.css */
 
 
 .container {