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

package/stories/apex/layoutController/example-graph.worker.ts

@@ -0,0 +1,39 @@
+/**
+ * Example Web Worker for executing behavior graphs
+ *
+ * This shows the SIMPLEST way to create a custom worker:
+ * 1. Set up your registry
+ * 2. Import the reference implementation
+ * 3. That's it!
+ */
+
+import {
+  registerCoreProfile,
+  type IRegistry
+} from '@kiberon-labs/behave-graph';
+import { initializeGraphWorker } from '@/plugin/graphrunner-webworker/graph-executor.worker.js';
+import type { ValueType } from '@kiberon-labs/behave-graph';
+
+// ============================================================================
+// STEP 1: Set up your registry with your custom nodes
+// ============================================================================
+
+const ColorValue: ValueType = {
+  name: 'color',
+  creator: () => '#000000',
+  deserialize: (value: string) => value,
+  serialize: (value: string) => value,
+  lerp: (start: string, end: string, t: number) => (t < 0.5 ? start : end),
+  equals: (a: string, b: string) => a === b,
+  clone: (value: string) => value
+};
+
+const registry: IRegistry = registerCoreProfile({
+  nodes: {},
+  values: {
+    color: ColorValue
+  },
+  dependencies: {}
+});
+
+initializeGraphWorker({ registry });

package/stories/apex/layoutController/index.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LayoutController } from '@/components/layoutController';
+import {
+  DefaultSystemProvider,
+  systemGenerator
+} from '~/defaults/defaultStoryProvider';
+import { SystemProvider } from '@/system';
+
+const meta: Meta<typeof LayoutController> = {
+  component: LayoutController,
+  title: 'Apex/Layout Controller',
+  decorators: [(Story) => <Story />],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div className="h-dvh">
+        <DefaultSystemProvider>
+          <LayoutController />
+        </DefaultSystemProvider>
+      </div>
+    );
+  },
+  args: {}
+};
+
+const emptySystem = systemGenerator();
+
+export const Empty: Story = {
+  render: () => {
+    return (
+      <div className="h-dvh">
+        <SystemProvider value={emptySystem}>
+          <LayoutController />
+        </SystemProvider>
+      </div>
+    );
+  },
+  args: {}
+};

package/stories/apex/layoutController/webworker.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LayoutController } from '@/components/layoutController';
+import { SystemProvider } from '@/system';
+import { webWorkerGraphRunnerPlugin } from '@/plugin/graphrunner-webworker';
+import { systemGenerator } from '~/defaults/systemGenerator';
+import { useMemo } from 'react';
+
+const meta: Meta<typeof LayoutController> = {
+  component: LayoutController,
+  title: 'Apex/Layout Controller (Web worker)',
+  decorators: [(Story) => <Story />],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Webworker: Story = {
+  render: () => {
+    const webworkerSystem = useMemo(() => {
+      const webworkerSystem = systemGenerator();
+
+      // Create worker instance from the example worker file
+      // The example-graph.worker.ts file shows how to:
+      // 1. Import and set up your registry with custom nodes
+      // 2. Import the message handling scaffold from graph-executor.worker.ts
+      // 3. Handle graph execution in the worker thread
+      const graphWorker = new Worker(
+        new URL('./example-graph.worker.ts', import.meta.url),
+        { type: 'module' }
+      );
+
+      // Register the webworker plugin
+      // No registry needed - it's defined inside the worker
+      webworkerSystem.registerPlugin(webWorkerGraphRunnerPlugin, {
+        worker: graphWorker,
+        events: [
+          {
+            id: '0',
+            name: 'Example Event',
+            parameters: [
+              {
+                name: 'exampleParam',
+                valueTypeName: 'string',
+                defaultValue: 'Foo'
+              }
+            ],
+            description: 'An example event for demonstration purposes.',
+            readonly: true
+          }
+        ],
+        variables: [
+          {
+            id: '0',
+            name: 'Example Variable',
+            valueTypeName: 'string',
+            initialValue: 'Hello, World!',
+            description: 'An example variable for demonstration purposes.',
+            readonly: true
+          }
+        ]
+      });
+
+      // Set up a sample graph
+      webworkerSystem.flowStore.getState().setGraph({
+        nodes: [
+          {
+            type: 'lifecycle/onStart',
+            id: '0',
+            flows: {
+              flow: {
+                nodeId: '1',
+                socket: 'flow'
+              }
+            }
+          },
+          {
+            type: 'debug/log',
+            id: '1',
+            parameters: {
+              text: {
+                value: 'Hello from Web Worker!'
+              }
+            }
+          }
+        ]
+      });
+      return webworkerSystem;
+    }, []);
+
+    return (
+      <div className="h-dvh">
+        <SystemProvider value={webworkerSystem}>
+          <LayoutController />
+        </SystemProvider>
+      </div>
+    );
+  },
+  args: {}
+};

package/stories/apex/menubar/menubar.stories.tsx

@@ -0,0 +1,19 @@
+import { MenuBar } from '../../../src/components/menubar/index.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider.js';
+
+const meta: Meta<typeof MenuBar> = {
+  title: 'Apex/MenuBar',
+  component: MenuBar
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuBar>;
+export const Default: Story = {
+  render: () => (
+    <DefaultSystemProvider>
+      <MenuBar />
+    </DefaultSystemProvider>
+  ),
+  args: {}
+};

package/stories/components/colorpicker/index.stories.tsx

@@ -0,0 +1,20 @@
+import { ColorPickerPopover } from '@/components/controls/colorPicker/index';
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof ColorPickerPopover> = {
+  title: 'Components/Controls/Color Picker Popover',
+  component: ColorPickerPopover
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPickerPopover>;
+export const Default: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState('#232312');
+
+    return <ColorPickerPopover value={value} onChange={setValue} />;
+  },
+  args: {}
+};

package/stories/components/contextMenus/edge.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ReactFlowProvider } from 'reactflow';
+import { EdgeContextMenu } from '@/components/contextMenus/edge';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof EdgeContextMenu> = {
+  title: 'Components/ContextMenus/Edge',
+  component: EdgeContextMenu
+};
+
+export default meta;
+type Story = StoryObj<typeof EdgeContextMenu>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <DefaultSystemProvider>
+        <ReactFlowProvider>
+          <div style={{ position: 'relative', width: 320, height: 180 }}>
+            <EdgeContextMenu
+              edgeID="edge-0"
+              sourceID="0"
+              targetID="1"
+              top={16}
+              left={16}
+            />
+          </div>
+        </ReactFlowProvider>
+      </DefaultSystemProvider>
+    );
+  }
+};

package/stories/components/contextMenus/node.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ReactFlowProvider } from 'reactflow';
+import { NodeContextMenu } from '@/components/contextMenus/node';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof NodeContextMenu> = {
+  title: 'Components/ContextMenus/Node',
+  component: NodeContextMenu
+};
+
+export default meta;
+type Story = StoryObj<typeof NodeContextMenu>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <DefaultSystemProvider>
+        <ReactFlowProvider>
+          <div style={{ position: 'relative', width: 320, height: 180 }}>
+            <NodeContextMenu nodeID="1" top={16} left={16} />
+          </div>
+        </ReactFlowProvider>
+      </DefaultSystemProvider>
+    );
+  }
+};

package/stories/components/contextMenus/nodePicker.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import React from 'react';
+import { ReactFlow } from 'reactflow';
+
+import { NodePicker } from '@/components/contextMenus/NodePicker';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const demoSpecs: NodeSpecJSON[] = [
+  {
+    type: 'lifecycle/onStart',
+    label: 'On Start',
+    category: 'Event',
+    inputs: [],
+    outputs: [{ name: 'flow', valueType: 'flow' }],
+    configuration: []
+  },
+  {
+    type: 'flow/branch',
+    label: 'Branch',
+    category: 'Flow',
+    inputs: [
+      { name: 'flow', valueType: 'flow' },
+      {
+        name: 'condition',
+        valueType: 'boolean',
+        defaultValue: false
+      }
+    ],
+    outputs: [
+      { name: 'true', valueType: 'flow' },
+      { name: 'false', valueType: 'flow' }
+    ],
+    configuration: []
+  },
+  {
+    type: 'time/delay',
+    label: 'Delay',
+    category: 'Time',
+    inputs: [
+      { name: 'flow', valueType: 'flow' },
+      { name: 'seconds', valueType: 'number', defaultValue: 1 }
+    ],
+    outputs: [{ name: 'flow', valueType: 'flow' }],
+    configuration: []
+  },
+  {
+    type: 'debug/log',
+    label: 'Log',
+    category: 'Action',
+    inputs: [
+      { name: 'flow', valueType: 'flow' },
+      { name: 'text', valueType: 'string', defaultValue: 'Hello' }
+    ],
+    outputs: [{ name: 'flow', valueType: 'flow' }],
+    configuration: []
+  }
+];
+
+const getDemoImage = (spec: NodeSpecJSON) => {
+  // small inline SVG thumbnail per category
+  const cat = String(spec.category ?? 'Other');
+  const label = String(spec.label ?? spec.type);
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
+    <rect width="96" height="96" rx="10" ry="10" fill="var(--vscode-editorWidget-background, #2b2b2b)" />
+    <text x="12" y="38" font-family="sans-serif" font-size="12" fill="var(--vscode-foreground, #ddd)">${cat}</text>
+    <text x="12" y="62" font-family="sans-serif" font-size="18" fill="var(--vscode-foreground, #ddd)">${label.slice(
+      0,
+      10
+    )}</text>
+  </svg>`;
+
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+
+function Demo({ filters }: { filters?: any }) {
+  return (
+    <div style={{ width: 980, height: 680 }}>
+      <ReactFlow nodes={[]} edges={[]} fitView>
+        <NodePicker
+          position={{ x: 24, y: 24 }}
+          specJSON={demoSpecs}
+          filters={filters}
+          getNodeImage={getDemoImage}
+          onClose={() => undefined}
+          onPickNode={() => undefined}
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+
+const meta: Meta<typeof Demo> = {
+  title: 'Components/ContextMenus/NodePicker',
+  component: Demo
+};
+
+export default meta;
+type Story = StoryObj<typeof Demo>;
+
+export const Default: Story = {
+  render: () => (
+    <DefaultSystemProvider>
+      <Demo />
+    </DefaultSystemProvider>
+  )
+};
+
+export const FilteredToBooleanInputs: Story = {
+  render: () => (
+    <DefaultSystemProvider>
+      <Demo filters={{ handleType: 'target', valueType: 'boolean' }} />
+    </DefaultSystemProvider>
+  )
+};

package/stories/components/controls/any/index.stories.tsx

@@ -0,0 +1,19 @@
+import { AnyControl } from '@/components/controls/any';
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof AnyControl> = {
+  title: 'Components/Controls/AnyControl',
+  component: AnyControl
+};
+
+export default meta;
+type Story = StoryObj<typeof AnyControl>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState({ key: 'value' });
+    return <AnyControl value={value} onChange={setValue} />;
+  },
+  args: {}
+};

package/stories/components/controls/boolean/index.stories.tsx

@@ -0,0 +1,19 @@
+import { BooleanControl } from '@/components/controls/boolean';
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof BooleanControl> = {
+  title: 'Components/Controls/BooleanControl',
+  component: BooleanControl
+};
+
+export default meta;
+type Story = StoryObj<typeof BooleanControl>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState(false);
+    return <BooleanControl value={value} onChange={setValue} />;
+  },
+  args: {}
+};

package/stories/components/controls/colorPicker/index.stories.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColorControl } from '@/components/controls/colorPicker';
+
+const meta: Meta<typeof ColorControl> = {
+  title: 'Components/Controls/ColorControl',
+  component: ColorControl,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'ColorPicker control for selecting colors. Supports different color values and states.'
+      }
+    }
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof ColorControl>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState('#ff0000');
+    return <ColorControl value={value} onChange={setValue} />;
+  },
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default ColorControl with a red color.'
+      }
+    }
+  }
+};
+
+export const Green: Story = {
+  render: () => {
+    const [value, setValue] = useState('#00ff00');
+    return <ColorControl value={value} onChange={setValue} />;
+  },
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'ColorControl with a green color.'
+      }
+    }
+  }
+};

package/stories/components/controls/number/index.stories.tsx

@@ -0,0 +1,19 @@
+import { NumberControl } from '@/components/controls/number';
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof NumberControl> = {
+  title: 'Components/Controls/NumberControl',
+  component: NumberControl
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberControl>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState(0);
+    return <NumberControl value={value} onChange={setValue} />;
+  },
+  args: {}
+};

package/stories/components/controls/string/index.stories.tsx

@@ -0,0 +1,19 @@
+import { StringControl } from '@/components/controls/string';
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof StringControl> = {
+  title: 'Components/Controls/StringControl',
+  component: StringControl
+};
+
+export default meta;
+type Story = StoryObj<typeof StringControl>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState('Hello');
+    return <StringControl value={value} onChange={setValue} />;
+  },
+  args: {}
+};

package/stories/components/nodes/behaveNode.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Background,
+  BackgroundVariant,
+  ReactFlow,
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState
+} from 'reactflow';
+import React, { useMemo } from 'react';
+import { useStore } from 'zustand';
+
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+import { useSystem } from '@/system/provider';
+import { Node as BehaveNode } from '@/components/nodes/behave/Node';
+import { Flow } from '@/components/Flow';
+
+function Canvas({ selectedId }: { selectedId?: string }) {
+  const sys = useSystem();
+  const allSpecs = useStore(sys.specStore, (s) => s.specs);
+
+  const specDict = useMemo(() => {
+    const dict: Record<string, (typeof allSpecs)[number]> = {};
+    for (const spec of allSpecs) {
+      dict[spec.type] = spec;
+    }
+    return dict;
+  }, [allSpecs]);
+
+  const nodeTypes = useMemo(() => {
+    return {
+      behaveNode: (props: any) => {
+        const spec = specDict[props.data?.type];
+        if (!spec) {
+          return (
+            <div style={{ padding: 8 }}>
+              Missing spec for type: {String(props.data?.type)}
+            </div>
+          );
+        }
+
+        return <BehaveNode {...props} spec={spec} allSpecs={allSpecs} />;
+      }
+    };
+  }, [allSpecs, specDict]);
+
+  const [nodes, , onNodesChange] = useNodesState([
+    {
+      id: '0',
+      type: 'behaveNode',
+      position: { x: 0, y: 0 },
+      selected: selectedId === '0',
+      data: {
+        annotations: {},
+        configuration: {},
+        type: 'lifecycle/onStart',
+        ports: {}
+      }
+    }
+  ]);
+
+  const [edges, , onEdgesChange] = useEdgesState([
+    {
+      id: 'e0-1',
+      source: '0',
+      sourceHandle: 'flow',
+      target: '1',
+      targetHandle: 'flow'
+    }
+  ]);
+
+  return (
+    <div style={{ width: 900, height: 520 }}>
+      <ReactFlow
+        nodeTypes={nodeTypes}
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        fitView
+      >
+        <Background
+          variant={BackgroundVariant.Lines}
+          color="#373737"
+          style={{ backgroundColor: 'var(--colors-bgCanvas)' }}
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+
+const meta: Meta<typeof Canvas> = {
+  title: 'Components/Nodes/BehaveNode',
+  component: Canvas
+};
+
+export default meta;
+type Story = StoryObj<typeof Canvas>;
+
+export const Default: Story = {
+  render: () => (
+    <DefaultSystemProvider>
+      <ReactFlowProvider>
+        <Canvas />
+      </ReactFlowProvider>
+    </DefaultSystemProvider>
+  )
+};

package/stories/components/panels/alignment.stories.tsx

@@ -0,0 +1,24 @@
+import { AlignmentPanel } from '@/components/panels/alignment';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof AlignmentPanel> = {
+  title: 'Components/Panels/Alignment',
+  component: AlignmentPanel,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof AlignmentPanel>;
+export const Default: Story = {
+  render: () => {
+    return (
+      <DefaultSystemProvider>
+        <AlignmentPanel />
+      </DefaultSystemProvider>
+    );
+  },
+  args: {}
+};