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

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

@@ -1,16 +1,11 @@
 import type { GraphJSON, NodeSpecJSON } from '@kiberon-labs/behave-graph';
 import { useCallback, useEffect, useState } from 'react';
-import { useEdgesState, useNodesState } from 'reactflow';
-
 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 { useCustomNodeTypes } from './useCustomNodeTypes.js';
-
-export const fetchBehaviorGraphJson = async (url: string) =>
-  // eslint-disable-next-line unicorn/no-await-expression-member
-  (await (await fetch(url)).json()) as GraphJSON;
+import { useGraph } from '@/system/provider.js';
+import { useStore } from 'zustand';
 
 /**
  * Hook that returns the nodes and edges for react-flow, and the graphJson for the behave-graph.
@@ -27,8 +22,19 @@ export const useBehaveGraphFlow = ({
   specJson: NodeSpecJSON[] | undefined;
 }) => {
   const [graphJson, setStoredGraphJson] = useState<GraphJSON | undefined>();
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const sys = useGraph();
+
+  const {
+    nodes,
+    setNodes,
+    applyNodeChanges: onNodesChange
+  } = useStore(sys.nodeStore);
+
+  const {
+    edges,
+    setEdges,
+    applyEdgeChanges: onEdgesChange
+  } = useStore(sys.edgeStore);
 
   const setGraphJson = useCallback(
     (graphJson: GraphJSON) => {
@@ -55,21 +61,16 @@ export const useBehaveGraphFlow = ({
   useEffect(() => {
     if (!specJson) return;
     // when nodes and edges are updated, update the graph json with the flow to behave behavior
-    const graphJson = flowToBehave(nodes, edges, specJson);
+    const graphJson = flowToBehave(sys, nodes, edges, specJson);
     setStoredGraphJson(graphJson);
   }, [nodes, edges, specJson]);
 
-  const nodeTypes = useCustomNodeTypes({
-    specJson
-  });
-
   return {
     nodes,
     edges,
     onEdgesChange,
     onNodesChange,
     setGraphJson,
-    graphJson,
-    nodeTypes
+    graphJson
   };
 };

package/src/hooks/useFlowHandlers.ts

@@ -7,6 +7,7 @@ import {
 } from 'react';
 import type {
   Connection,
+  ConnectionStatus,
   Node,
   OnConnectStartParams,
   XYPosition
@@ -14,8 +15,16 @@ 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 { useGraph } from '@/system/provider.js';
+import type { ExtendedNodeSpecJSON } from '@/components/contextMenus/NodePicker.js';
+import {
+  addFloatingTab,
+  findTabInLayout,
+  removeTabFromLayout
+} from '@/components/layoutController/utils.js';
 
 type BehaveGraphFlow = ReturnType<typeof useBehaveGraphFlow>;
 
@@ -48,16 +57,53 @@ export const useFlowHandlers = ({
   nodes: Node[];
   specJSON: NodeSpecJSON[] | undefined;
 }) => {
+  const sys = useGraph();
   const [lastConnectStart, setLastConnectStart] =
     useState<OnConnectStartParams>();
   const [nodePickerVisibility, setNodePickerVisibility] =
     useState<XYPosition>();
-
   const onConnect = useCallback(
     (connection: Connection) => {
       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,
@@ -65,6 +111,7 @@ export const useFlowHandlers = ({
         sourceHandle: connection.sourceHandle,
         targetHandle: connection.targetHandle
       };
+      sys.pubsub.publish('edge:added', newEdge);
       onEdgesChange([
         {
           type: 'add',
@@ -72,29 +119,46 @@ export const useFlowHandlers = ({
         }
       ]);
     },
-    [onEdgesChange]
+    [onEdgesChange, sys, specJSON]
   );
 
   const closeNodePicker = useCallback(() => {
     setLastConnectStart(undefined);
     setNodePickerVisibility(undefined);
-  }, []);
+
+    // Close the nodepicker panel from rc-dock
+    const currentLayout = sys.editor.tabStore.getState().layout;
+    const newLayout = removeTabFromLayout(currentLayout, 'nodepicker');
+    sys.editor.tabStore.getState().setLayout(newLayout);
+  }, [sys]);
 
   const handleAddNode = useCallback(
-    (nodeType: string, position: XYPosition) => {
+    (spec: ExtendedNodeSpecJSON, position: XYPosition) => {
       closeNodePicker();
       const newNode = {
         id: uuidv4(),
-        type: nodeType,
+        type: spec.nodeType ?? 'behaveNode',
         position,
-        data: {}
+        data: {
+          configuration: {},
+          type: spec.type,
+          ports: {}
+        }
       };
-      onNodesChange([
-        {
-          type: 'add',
-          item: newNode
+
+      sys.undoManager.execute({
+        name: `Add node (${spec.type})`,
+        execute: () => {
+          sys.nodeStore.getState().addNode(newNode);
+        },
+        undo: () => {
+          sys.nodeStore
+            .getState()
+            .setNodes((existing) =>
+              existing.filter((n) => n.id !== newNode.id)
+            );
         }
-      ]);
+      });
 
       if (lastConnectStart === undefined) return;
 
@@ -109,7 +173,7 @@ export const useFlowHandlers = ({
           type: 'add',
           item: calculateNewEdge(
             originNode,
-            nodeType,
+            spec.type,
             newNode.id,
             lastConnectStart,
             specJSON
@@ -134,30 +198,90 @@ export const useFlowHandlers = ({
     []
   );
 
-  const handleStopConnect = useCallback((e: MouseEvent) => {
-    const element = e.target as HTMLElement;
-    console.log(
-      'here',
-      element.classList,
-      element.classList.contains('react-flow__pane')
-    );
-    if (element.classList.contains('react-flow__pane')) {
-      console.log('setting node picker');
-      setNodePickerVisibility({ x: e.clientX, y: e.clientY });
-    } else {
-      setLastConnectStart(undefined);
-    }
-  }, []);
+  const handleStopConnect = useCallback(
+    (e: MouseEvent, _connectionState: ConnectionStatus) => {
+      const element = e.target as HTMLElement;
+      if (element.classList.contains('react-flow__pane')) {
+        const screenPos = { x: e.clientX, y: e.clientY };
+        setNodePickerVisibility(screenPos);
+
+        // Store screen position for NodePickerPanel to use
+        sys.refStore.getState().setRef('nodePickerPosition', screenPos);
+
+        // Open as floating rc-dock panel
+        const currentLayout = sys.editor.tabStore.getState().layout;
+
+        // Close existing nodepicker if open
+        const existingPanel = findTabInLayout(currentLayout, 'nodepicker');
+        let layoutToUse = currentLayout;
+        if (existingPanel) {
+          layoutToUse = removeTabFromLayout(currentLayout, 'nodepicker');
+        }
+
+        // Create new floating panel with minimal tab data
+        // The actual content will be loaded by tabLoader
+        const tabData = {
+          id: 'nodepicker',
+          group: 'headless'
+        };
+
+        const newLayout = addFloatingTab(layoutToUse, tabData, {
+          left: e.clientX,
+          top: e.clientY,
+          width: 600,
+          height: 500
+        });
+
+        sys.editor.tabStore.getState().setLayout(newLayout);
+      } else {
+        setLastConnectStart(undefined);
+      }
+    },
+    [sys]
+  );
 
   const handlePaneClick = useCallback(
     () => closeNodePicker(),
     [closeNodePicker]
   );
 
-  const handlePaneContextMenu = useCallback((e: ReactMouseEvent) => {
-    e.preventDefault();
-    setNodePickerVisibility({ x: e.clientX, y: e.clientY });
-  }, []);
+  const handlePaneContextMenu = useCallback(
+    (e: ReactMouseEvent) => {
+      e.preventDefault();
+      const screenPos = { x: e.clientX, y: e.clientY };
+      setNodePickerVisibility(screenPos);
+
+      // Store screen position for NodePickerPanel to use
+      sys.refStore.getState().setRef('nodePickerPosition', screenPos);
+
+      // Open as floating rc-dock panel
+      const currentLayout = sys.editor.tabStore.getState().layout;
+
+      // Close existing nodepicker if open
+      const existingPanel = findTabInLayout(currentLayout, 'nodepicker');
+      let layoutToUse = currentLayout;
+      if (existingPanel) {
+        layoutToUse = removeTabFromLayout(currentLayout, 'nodepicker');
+      }
+
+      // Create new floating panel with minimal tab data
+      // The actual content will be loaded by tabLoader
+      const tabData = {
+        id: 'nodepicker',
+        group: 'headless'
+      };
+
+      const newLayout = addFloatingTab(layoutToUse, tabData, {
+        left: e.clientX,
+        top: e.clientY,
+        width: 600,
+        height: 500
+      });
+
+      sys.editor.tabStore.getState().setLayout(newLayout);
+    },
+    [sys]
+  );
 
   const nodePickFilters = useNodePickFilters({
     nodes,

package/src/hooks/useWasdPan.ts

@@ -0,0 +1,210 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { ReactFlowInstance } from 'reactflow';
+
+export type UseWasdPanOptions = {
+  getReactFlowInstance: () => ReactFlowInstance | undefined;
+  speed?: number;
+  speedWithShift?: number;
+  dtCapSeconds?: number;
+  enabled?: boolean;
+};
+
+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;
+  if (!target) return false;
+  return isEditableElement(target);
+};
+
+export const useWasdPan = ({
+  getReactFlowInstance,
+  speed = 650,
+  speedWithShift = 1400,
+  dtCapSeconds = 0.05,
+  enabled = true
+}: UseWasdPanOptions) => {
+  const wasdRef = useRef({
+    w: false,
+    a: false,
+    s: false,
+    d: false,
+    shift: false
+  });
+  const rafRef = useRef<number | null>(null);
+  const lastFrameRef = useRef<number | null>(null);
+
+  const cancelPanLoop = useCallback(() => {
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    lastFrameRef.current = null;
+  }, []);
+
+  const startPanLoop = useCallback(() => {
+    if (rafRef.current != null) return;
+
+    const tick = (now: number) => {
+      const last = lastFrameRef.current;
+      lastFrameRef.current = now;
+      const dtMs = last == null ? 0 : now - last;
+      const dt = Math.min(dtCapSeconds, dtMs / 1000);
+
+      const state = wasdRef.current;
+      const any = state.w || state.a || state.s || state.d;
+      const reactFlowInstance = getReactFlowInstance();
+
+      if (!enabled || !any) {
+        cancelPanLoop();
+        return;
+      }
+
+      // The reactflow ref can be temporarily unavailable during re-mounts.
+      // If we cancel here while the user is still holding a key, we might never
+      // restart because we ignore keydown repeats.
+      if (!reactFlowInstance) {
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+
+      const appliedSpeed = state.shift ? speedWithShift : speed;
+      const step = appliedSpeed * dt;
+
+      let dx = 0;
+      let dy = 0;
+      if (state.a) dx += step;
+      if (state.d) dx -= step;
+      if (state.w) dy += step;
+      if (state.s) dy -= step;
+
+      if (dx !== 0 || dy !== 0) {
+        const viewport = reactFlowInstance.getViewport();
+        reactFlowInstance.setViewport({
+          ...viewport,
+          x: viewport.x + dx,
+          y: viewport.y + dy
+        });
+      }
+
+      rafRef.current = requestAnimationFrame(tick);
+    };
+
+    rafRef.current = requestAnimationFrame(tick);
+  }, [
+    cancelPanLoop,
+    dtCapSeconds,
+    enabled,
+    getReactFlowInstance,
+    speed,
+    speedWithShift
+  ]);
+
+  useEffect(() => {
+    if (!enabled) {
+      wasdRef.current = {
+        w: false,
+        a: false,
+        s: false,
+        d: false,
+        shift: false
+      };
+      cancelPanLoop();
+      return;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isEventFromEditable(event)) return;
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+
+      const key = event.key?.toLowerCase();
+      if (
+        key !== 'w' &&
+        key !== 'a' &&
+        key !== 's' &&
+        key !== 'd' &&
+        key !== 'shift'
+      ) {
+        return;
+      }
+
+      if (key === 'shift') {
+        wasdRef.current.shift = true;
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (key === 'w') wasdRef.current.w = true;
+      if (key === 'a') wasdRef.current.a = true;
+      if (key === 's') wasdRef.current.s = true;
+      if (key === 'd') wasdRef.current.d = true;
+
+      startPanLoop();
+    };
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      const key = event.key?.toLowerCase();
+      if (key === 'shift') {
+        wasdRef.current.shift = false;
+        return;
+      }
+
+      if (key === 'w') wasdRef.current.w = false;
+      if (key === 'a') wasdRef.current.a = false;
+      if (key === 's') wasdRef.current.s = false;
+      if (key === 'd') wasdRef.current.d = false;
+
+      const state = wasdRef.current;
+      if (!(state.w || state.a || state.s || state.d)) {
+        cancelPanLoop();
+      }
+    };
+
+    const onBlur = () => {
+      wasdRef.current = {
+        w: false,
+        a: false,
+        s: false,
+        d: false,
+        shift: false
+      };
+      cancelPanLoop();
+    };
+
+    window.addEventListener('keydown', onKeyDown, { capture: true });
+    window.addEventListener('keyup', onKeyUp, { capture: true });
+    window.addEventListener('blur', onBlur);
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown, {
+        capture: true
+      });
+      window.removeEventListener('keyup', onKeyUp, { capture: true });
+      window.removeEventListener('blur', onBlur);
+      cancelPanLoop();
+    };
+  }, [cancelPanLoop, enabled, startPanLoop]);
+};

package/src/index.css

@@ -0,0 +1,134 @@
+@import "reactflow/dist/style.css";
+@import 'rc-menu/assets/index.css';
+@import "rc-dock/dist/rc-dock-dark.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;
+}
+
+.reactflow {
+    background: #262626;
+    color: var(--colors-fg);
+    position: static !important;
+}
+
+
+.react-flow__node {
+    display: flex;
+
+    &.filtered {
+        opacity: 0.25 !important;
+    }
+}
+
+.react-flow__edge-default {
+    fill: none;
+}
+
+.react-flow__handle>* {
+    /* Don't allow blocking of the handle */
+    user-select: none;
+    pointer-events: none;
+    flex: 1;
+}
+
+.react-flow__handle {
+    display: flex;
+    align-items: center;
+    font-size: 8px;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+}
+
+.react-flow__handle-left {
+
+    left: -12px;
+}
+
+.react-flow__handle-right {
+
+    right: -12px;
+}
+
+.dock-content-holder {
+    color: var(--colors-fg);
+}
+
+/* rc-menu styling lives in css/rc-menu.css */
+
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 2rem;
+    position: relative;
+    padding: 0 0.5rem;
+}
+
+
+.dock-tab {
+    display: flex;
+    align-items: center;
+}
+
+.dock-top .dock-bar {
+    border-bottom: none;
+}
+
+.dock-panel.dock-style-main .dock-bar {
+    border-bottom-color: var(--color-neutral-stroke-subtle);
+}
+
+.dock-content-holder {
+    scrollbar-color: var(--color-neutral-canvas-subtle-bg) transparent;
+    scrollbar-width: thin;
+    border-bottom: var(--component-border-width-md) solid var(--color-neutral-stroke-subtle);
+}
+
+.dock-top .dock-ink-bar {
+    background: var(--colors-bgCanvas);
+    z-index: 0;
+    height: 100%;
+    border-radius: var(--component-radii-sm);
+}
+
+
+/* Dark scrollbars for all elements */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #4a4a4a #262626;
+}
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+    background: #262626;
+    border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: #4a4a4a;
+    border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background: #5a5a5a;
+}
+
+*::-webkit-scrollbar-corner {
+    background: #262626;
+}