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

package/tests/util/getSocketsByNodeTypeAndHandleType.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { getSocketsByNodeTypeAndHandleType } from '@/util/getSocketsByNodeTypeAndHandleType';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+
+const specs = [
+  {
+    type: 'math/add',
+    inputs: [{ name: 'a', valueType: 'float' }],
+    outputs: [{ name: 'result', valueType: 'float' }]
+  }
+] as unknown as NodeSpecJSON[];
+
+describe('getSocketsByNodeTypeAndHandleType', () => {
+  it('returns the output sockets for a source handle', () => {
+    expect(
+      getSocketsByNodeTypeAndHandleType(specs, 'math/add', 'source')
+    ).toEqual([{ name: 'result', valueType: 'float' }]);
+  });
+
+  it('returns the input sockets for a target handle', () => {
+    expect(
+      getSocketsByNodeTypeAndHandleType(specs, 'math/add', 'target')
+    ).toEqual([{ name: 'a', valueType: 'float' }]);
+  });
+
+  it('returns undefined for an unknown node type', () => {
+    expect(
+      getSocketsByNodeTypeAndHandleType(specs, 'does/not/exist', 'source')
+    ).toBeUndefined();
+  });
+});

package/tests/util/hasPositionMetaData.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { hasPositionMetaData } from '@/util/hasPositionMetaData';
+import type { GraphJSON } from '@kiberon-labs/behave-graph';
+
+const graph = (nodes: unknown): GraphJSON => ({ nodes }) as GraphJSON;
+
+describe('hasPositionMetaData', () => {
+  it('returns true when any node carries position metadata', () => {
+    expect(
+      hasPositionMetaData(
+        graph([
+          { type: 'a', id: '1' },
+          { type: 'b', id: '2', metadata: { positionX: '10', positionY: '20' } }
+        ])
+      )
+    ).toBe(true);
+  });
+
+  it('returns false when no node carries position metadata', () => {
+    expect(
+      hasPositionMetaData(
+        graph([
+          { type: 'a', id: '1' },
+          { type: 'b', id: '2', metadata: { label: 'hi' } }
+        ])
+      )
+    ).toBe(false);
+  });
+
+  it('returns false when there are no nodes', () => {
+    expect(hasPositionMetaData(graph(undefined))).toBe(false);
+  });
+});

package/tests/util/isBehaveNode.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { isBehaveNode } from '@/util/isBehaveNode';
+import type { Node } from 'reactflow';
+
+const node = (type: unknown): Node =>
+  ({ id: 'n', position: { x: 0, y: 0 }, data: {}, type }) as Node;
+
+describe('isBehaveNode', () => {
+  it('returns true for node types starting with "behaveNode"', () => {
+    expect(isBehaveNode(node('behaveNode'))).toBe(true);
+    expect(isBehaveNode(node('behaveNode-flow'))).toBe(true);
+  });
+
+  it('returns false for other node types', () => {
+    expect(isBehaveNode(node('comment'))).toBe(false);
+    expect(isBehaveNode(node('group'))).toBe(false);
+  });
+
+  it('returns false when the type is missing', () => {
+    expect(isBehaveNode(node(undefined))).toBe(false);
+  });
+});

package/tests/util/isHandleConnected.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+import { isHandleConnected } from '@/util/isHandleConnected';
+import type { Edge } from 'reactflow';
+
+const edge = (over: Partial<Edge>): Edge =>
+  ({ id: 'e', source: 's', target: 't', ...over }) as Edge;
+
+describe('isHandleConnected', () => {
+  const edges: Edge[] = [
+    edge({
+      source: 'n1',
+      sourceHandle: 'out',
+      target: 'n2',
+      targetHandle: 'in'
+    })
+  ];
+
+  it('detects a connected source handle', () => {
+    expect(isHandleConnected(edges, 'n1', 'out', 'source')).toBe(true);
+  });
+
+  it('detects a connected target handle', () => {
+    expect(isHandleConnected(edges, 'n2', 'in', 'target')).toBe(true);
+  });
+
+  it('returns false when the node id does not match', () => {
+    expect(isHandleConnected(edges, 'other', 'out', 'source')).toBe(false);
+  });
+
+  it('returns false when the handle id does not match', () => {
+    expect(isHandleConnected(edges, 'n1', 'wrong', 'source')).toBe(false);
+  });
+
+  it('returns false for an empty edge list', () => {
+    expect(isHandleConnected([], 'n1', 'out', 'source')).toBe(false);
+  });
+});

package/tests/util/mergeSockets.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { mergeSockets } from '@/util/mergeSockets';
+
+const specSocket = (name: string, valueType: string) =>
+  ({ name, valueType }) as any;
+
+describe('mergeSockets', () => {
+  it('maps spec sockets to socket-base objects keyed by name', () => {
+    const result = mergeSockets([
+      specSocket('a', 'flow'),
+      specSocket('b', 'string')
+    ]);
+
+    expect(result).toHaveLength(2);
+    expect(result.map((s) => s.key)).toEqual(['a', 'b']);
+    expect(result[0]).toMatchObject({ key: 'a', name: 'a', valueType: 'flow' });
+  });
+
+  it('returns spec sockets unchanged when no dynamic ports are given', () => {
+    const result = mergeSockets([specSocket('a', 'flow')], undefined);
+    expect(result).toEqual([{ key: 'a', name: 'a', valueType: 'flow' }]);
+  });
+
+  it('lets a dynamic port override a spec socket with the same key', () => {
+    const result = mergeSockets(
+      [specSocket('a', 'flow'), specSocket('b', 'string')],
+      [{ key: 'b', name: 'b', valueType: 'integer' } as any]
+    );
+
+    expect(result).toHaveLength(2);
+    const b = result.find((s) => s.key === 'b');
+    expect(b?.valueType).toBe('integer');
+  });
+
+  it('appends dynamic ports that do not match any spec socket', () => {
+    const result = mergeSockets(
+      [specSocket('a', 'flow')],
+      [{ key: 'extra', name: 'extra', valueType: 'boolean' } as any]
+    );
+
+    expect(result.map((s) => s.key)).toEqual(['a', 'extra']);
+  });
+});

package/tests/visual/README.md

@@ -0,0 +1,64 @@
+# Visual (pixel) regression tests
+
+These tests render React components in a **real browser** (Chromium via Playwright)
+and compare a screenshot against a committed baseline using Vitest's built-in
+[`toMatchScreenshot`](https://vitest.dev/guide/browser/visual-regression-testing)
+assertion. They catch unintended rendering regressions that DOM-only unit tests
+miss.
+
+## Scope
+
+Coverage is deliberately minimal and panel-focused: **one snapshot per editor
+panel** (see [`panels.visual.test.tsx`](./panels.visual.test.tsx)), since the
+panels are the composed, regression-prone surfaces. Each panel is rendered
+through the same [`DefaultSystemProvider`](../../stories/defaults/defaultStoryProvider.tsx)
+the Storybook stories use, so it shows representative content.
+
+They are intentionally **separate** from the default `pnpm test` run (which uses
+happy-dom) so the heavier browser runner only starts when explicitly requested.
+
+## Running
+
+```bash
+# one-time: install the Chromium binary Playwright drives
+npx playwright install chromium
+
+# verify components against the committed baselines
+pnpm test:visual
+
+# create/refresh baselines (after an intentional visual change)
+pnpm test:visual:update
+```
+
+## How it works
+
+- Config: [`vitest.visual.config.ts`](../../vitest.visual.config.ts) , browser
+  mode, Playwright/Chromium, headless, fixed `900x700` viewport.
+- Test files: `tests/visual/**/*.visual.test.tsx`.
+- Each panel is rendered inside a fixed-size `640x480` frame on the editor
+  background so screenshots are bounded and stable. The full app stylesheet
+  (`@/index.css`) is imported so `--vscode-*` theme tokens resolve.
+- Baselines live in `__screenshots__/` and are committed. Vitest names them per
+  platform (e.g. `*-chromium-win32.png`), because font rendering and
+  anti-aliasing differ across operating systems.
+
+## Important: baselines are platform-specific
+
+Generate and verify baselines on the **same OS / CI image**. A baseline captured
+on Windows will not match one rendered on Linux. For CI, run
+`pnpm test:visual:update` on the CI platform once (or in a container that matches
+CI) and commit those baselines. The comparator is configured with a small
+`allowedMismatchedPixelRatio` to tolerate negligible anti-aliasing noise.
+
+## Adding a panel
+
+When a new panel is added under `src/components/panels`, add one entry to the
+`panels` array in [`panels.visual.test.tsx`](./panels.visual.test.tsx):
+
+```tsx
+['myPanel', <MyPanel />],
+```
+
+Then run `pnpm test:visual:update` to create the baseline, eyeball the generated
+PNG, and commit it. Keep it to a single representative snapshot per panel , the
+unit tests under `tests/util` and `tests/components` cover finer-grained logic.

package/tests/visual/panels.visual.test.tsx

@@ -0,0 +1,76 @@
+// Full editor stylesheet (vscode theme vars, rc-dock, reactflow, etc.) so the
+// panels render the way they do in the real app.
+import '@/index.css';
+
+import type { ReactElement } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { page } from 'vitest/browser';
+import { cleanup, render } from 'vitest-browser-react';
+import { DefaultSystemProvider } from '../../stories/defaults/defaultStoryProvider';
+
+import { AlignmentPanel } from '@/components/panels/alignment';
+import { EventsPanel } from '@/components/panels/events';
+import { HistoryPanel } from '@/components/panels/history';
+import { KeymapsPanel } from '@/components/panels/keymaps';
+import { LayersPanel } from '@/components/panels/layers';
+import { LegendPanel } from '@/components/panels/legend';
+import { LogsPanel } from '@/components/panels/logs';
+import { NodeInputsPanel } from '@/components/panels/nodeInputs';
+import { NodePickerPanel } from '@/components/panels/nodePicker';
+import { PanelPanel } from '@/components/panels/panel';
+import { SearchPanel } from '@/components/panels/search';
+import { Settings } from '@/components/panels/systemSettings';
+import { TracesPanel } from '@/components/panels/traces';
+import { VariablesPanel } from '@/components/panels/variables';
+import { LocalGraphRunnerPanel } from '@/plugin/graphrunner-local';
+
+/**
+ * One pixel-snapshot per panel. The shared {@link DefaultSystemProvider} (the
+ * same provider the Storybook stories use) supplies a populated System so each
+ * panel renders representative content.
+ */
+const panels: ReadonlyArray<readonly [name: string, element: ReactElement]> = [
+  ['alignment', <AlignmentPanel />],
+  ['events', <EventsPanel />],
+  ['history', <HistoryPanel />],
+  ['keymaps', <KeymapsPanel />],
+  ['layers', <LayersPanel />],
+  ['legend', <LegendPanel />],
+  ['logs', <LogsPanel />],
+  ['nodeInputs', <NodeInputsPanel />],
+  ['nodePicker', <NodePickerPanel />],
+  ['panel', <PanelPanel />],
+  ['search', <SearchPanel />],
+  ['systemSettings', <Settings />],
+  ['traces', <TracesPanel />],
+  ['variables', <VariablesPanel />],
+  ['localGraphRunner', <LocalGraphRunnerPanel />]
+];
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('panels (visual)', () => {
+  it.each(panels)('renders the %s panel', async (name, element) => {
+    render(
+      <DefaultSystemProvider>
+        <div
+          data-testid="panel-frame"
+          style={{
+            width: 640,
+            height: 480,
+            overflow: 'auto',
+            background: 'var(--vscode-editor-background, #1f1f1f)'
+          }}
+        >
+          {element}
+        </div>
+      </DefaultSystemProvider>
+    );
+
+    await expect(page.getByTestId('panel-frame')).toMatchScreenshot(
+      `panel-${name}`
+    );
+  });
+});

package/tests/wasdPan.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import { isEventFromEditable } from '../src/hooks/useWasdPan.js';
+
+const keydownOn = (element: HTMLElement): KeyboardEvent => {
+  document.body.appendChild(element);
+  let captured: KeyboardEvent | undefined;
+  element.addEventListener('keydown', (e) => {
+    captured = e;
+  });
+  element.dispatchEvent(
+    new KeyboardEvent('keydown', { key: 'w', bubbles: true })
+  );
+  element.remove();
+  if (!captured) throw new Error('keydown was not captured');
+  return captured;
+};
+
+describe('WASD pan editable guard', () => {
+  it('treats form fields as editable (no pan)', () => {
+    expect(
+      isEventFromEditable(keydownOn(document.createElement('input')))
+    ).toBe(true);
+    expect(
+      isEventFromEditable(keydownOn(document.createElement('textarea')))
+    ).toBe(true);
+    expect(
+      isEventFromEditable(keydownOn(document.createElement('select')))
+    ).toBe(true);
+  });
+
+  it('treats contenteditable divs (e.g. the note editor) as editable', () => {
+    const editor = document.createElement('div');
+    editor.contentEditable = 'true';
+    expect(isEventFromEditable(keydownOn(editor))).toBe(true);
+  });
+
+  it('treats inputs inside shadow DOM (e.g. vscode-textfield) as editable', () => {
+    // The conversation panel's chat input is a web component; at a window-level
+    // listener the event is retargeted to the host element, so the guard must
+    // look through composedPath. Simulate that with a shadow-DOM input and a
+    // document-level capture listener (composedPath is only populated during
+    // dispatch).
+    const host = document.createElement('x-textfield');
+    const shadow = host.attachShadow({ mode: 'open' });
+    const inner = document.createElement('input');
+    shadow.appendChild(inner);
+    document.body.appendChild(host);
+
+    let result: boolean | undefined;
+    const listener = (e: Event) => {
+      result = isEventFromEditable(e as KeyboardEvent);
+    };
+    document.addEventListener('keydown', listener, { capture: true });
+    inner.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'w', bubbles: true, composed: true })
+    );
+    document.removeEventListener('keydown', listener, { capture: true });
+    host.remove();
+
+    expect(result).toBe(true);
+  });
+
+  it('does not treat plain elements as editable (pan proceeds)', () => {
+    expect(isEventFromEditable(keydownOn(document.createElement('div')))).toBe(
+      false
+    );
+    expect(isEventFromEditable(keydownOn(document.createElement('span')))).toBe(
+      false
+    );
+  });
+});

package/tsconfig.base.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Monorepo shared library – base (no references)",
+  "compilerOptions": {
+    /* Base Options: */
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "esnext",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "erasableSyntaxOnly": true,
+    /* Opinion */
+    "module": "preserve",
+    "outDir": "./dist",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "~/*": [
+        "./stories/*"
+      ]
+    },
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+  },
+}

package/tsconfig.json

@@ -1,60 +1,19 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "display": "Monorepo shared library",
-  "compilerOptions": {
-    /* Base Options: */
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "target": "esnext",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "moduleDetection": "force",
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    /* Strictness */
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
-    "erasableSyntaxOnly": true,
-    /* Opinion */
-    "incremental": true,
-    "tsBuildInfoFile": "./tsconfig.tsbuildinfo",
-    "module": "preserve",
-    "outDir": "./dist",
-    "baseUrl": ".",
-    "rootDir": "./src",
-    "paths": {
-      "~/*": [
-        "./src/*"
-      ],
-      "@/*": [
-        "./src/*"
-      ]
-    },
-    /* Required for project references, which provide go-to-definition in your
-    IDE without first having to build the module, which is essential during development. */
-    "composite": true,
-    /* Assuming your bundler will output everything, but we can not have noEmit
-    enabled because it is not compatible with composite  / project references. Also declaration might be required for references to work fully. Not sure yet... */
-    "declaration": true,
-    "declarationMap": true,
-    "jsx": "react-jsx",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-  },
-  "include": [
-    "./src",
-    "./src/**/*.json",
-  ],
-  "exclude": [
-    "!./src/**"
-  ],
-  "references": [
-    {
-      "path": "../core"
-    }
-  ],
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Monorepo shared library",
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    /* Required for project references, which provide go-to-definition in your
+    IDE without first having to build the module, which is essential during development. */
+    "composite": true,
+    "incremental": true,
+    "tsBuildInfoFile": "./tsconfig.tsbuildinfo",
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "./**/*.json",
+  ],
+  "exclude": []
 }

package/tsconfig.prod.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "composite": false,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "~/*": [
+        "./stories/*"
+      ],
+      "@kiberon-labs/behave-graph": [
+        "../core/dist/index.d.ts"
+      ]
+    },
+  },
+  "include": [
+    "./src",
+    "./src/**/*.json",
+  ],
+  "exclude": [],
+}

package/tsdown.config.ts

@@ -1,15 +1,27 @@
 import { defineConfig } from 'tsdown';
+import LightningCSS from 'unplugin-lightningcss/rolldown';
 
 export default defineConfig({
-  entry: ['./src/index.ts'],
+  entry: {
+    index: './src/index.ts'
+  },
+
   outDir: 'dist',
   target: 'es2022',
   sourcemap: true,
+  tsconfig: 'tsconfig.prod.json',
   skipNodeModulesBundle: true,
-  external: ['@kiberon-labs/behave-graph'],
+  copy: [{ from: 'src/entry.css', to: 'dist/entry.css' }],
+  plugins: [LightningCSS({ options: { minify: true } })],
+  external: [
+    '@kiberon-labs/behave-graph',
+    '@vscode-elements/react-elements',
+    'rc-dock',
+    'rc-menu'
+  ],
   format: ['esm'],
   dts: true,
+  // unbundle: true,
   logLevel: 'warn',
-  unbundle: true,
   platform: 'neutral'
 });

package/typedoc.json

@@ -1,8 +1,8 @@
-{
-    "extends": [
-        "../../typedoc.base.jsonc"
-    ],
-    "entryPoints": [
-        "src/index.ts"
-    ]
+{
+    "extends": [
+        "../../typedoc.base.jsonc"
+    ],
+    "entryPoints": [
+        "src/index.ts"
+    ]
 }

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [tsconfigPaths()]
+});

package/vitest.config.ts

@@ -3,8 +3,11 @@ import { configDefaults, defineConfig } from 'vitest/config';
 
 export default defineConfig({
   test: {
-    exclude: [...configDefaults.exclude],
-    watch: false
+    // Visual/pixel regression tests run in a real browser via the dedicated
+    // vitest.visual.config.ts , keep them out of the happy-dom unit run.
+    exclude: [...configDefaults.exclude, '**/*.visual.test.{ts,tsx}'],
+    watch: false,
+    environment: 'happy-dom'
   },
   resolve: {
     alias: {