project-graph-mcp 2.2.6 → 2.3.1

package/vendor/symbiote-node/node/GraphNode/GraphNode.js

@@ -0,0 +1,92 @@
+/**
+ * GraphNode — visual node card component
+ *
+ * Renders node header, input/output ports with sockets,
+ * and embedded controls. Receives data via _nodeData property.
+ *
+ * @module symbiote-node/components/GraphNode
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './GraphNode.tpl.js';
+import { styles } from './GraphNode.css.js';
+import '../PortItem/PortItem.js';
+import '../CtrlItem/CtrlItem.js';
+
+/** @type {Object<string, string>} */
+const CATEGORY_ICONS = {
+  server: 'dns',
+  instance: 'memory',
+  control: 'tune',
+  data: 'database',
+  // Codebase-specific
+  directory: 'folder',
+  file: 'description',
+  function: 'functions',
+  class: 'class',
+  module: 'package_2',
+  default: 'radio_button_checked',
+};
+
+export class GraphNode extends Symbiote {
+  destructionDelay = 200;
+
+  init$ = {
+    '@node-label': '',
+    '@node-category': 'default',
+    nodeLabel: '',
+    nodeIcon: 'radio_button_checked',
+    inputPorts: [],
+    outputPorts: [],
+    controlsList: [],
+  };
+
+  renderCallback() {
+    this.sub('@node-label', (val) => {
+      this.$.nodeLabel = val || '';
+    });
+    this.sub('@node-category', (val) => {
+      this.$.nodeIcon = CATEGORY_ICONS[val] || CATEGORY_ICONS.default;
+    });
+
+    // Populate ports from node data
+    if (this._nodeData) {
+      this.#populateFromNodeData(this._nodeData);
+    }
+  }
+
+  /**
+   * Populate ports and controls from Node instance
+   * @param {import('../core/Node.js').Node} node
+   */
+  #populateFromNodeData(node) {
+    this.set$({
+      inputPorts: Object.entries(node.inputs).map(([key, input]) => ({
+        key,
+        label: input.label || key,
+        socketColor: input.socket?.color || 'var(--sn-node-accent)',
+        socketName: input.socket?.name || 'any',
+        side: 'input',
+      })),
+      outputPorts: Object.entries(node.outputs).map(([key, output]) => ({
+        key,
+        label: output.label || key,
+        socketColor: output.socket?.color || 'var(--sn-node-accent)',
+        socketName: output.socket?.name || 'any',
+        side: 'output',
+      })),
+      controlsList: Object.entries(node.controls).map(([key, ctrl]) => ({
+        key,
+        label: key,
+        inputType: ctrl.type || 'text',
+        value: ctrl.value !== undefined ? String(ctrl.value) : '',
+        isReadonly: ctrl.readonly || false,
+      })),
+    });
+  }
+}
+
+GraphNode.template = template;
+GraphNode.rootStyles = styles;
+
+GraphNode.reg('graph-node');

package/vendor/symbiote-node/node/GraphNode/GraphNode.tpl.js

@@ -0,0 +1,17 @@
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div class="sn-node-header">
+  <span class="sn-node-icon material-symbols-outlined">{{nodeIcon}}</span>
+  <span class="sn-node-label">{{nodeLabel}}</span>
+</div>
+<div class="sn-node-body">
+  <div class="inputs" ${{ itemize: 'inputPorts', 'item-tag': 'port-item' }}>
+  </div>
+  <div class="controls" ${{ itemize: 'controlsList', 'item-tag': 'ctrl-item' }}>
+  </div>
+  <div class="outputs" ${{ itemize: 'outputPorts', 'item-tag': 'port-item' }}>
+  </div>
+</div>
+<div ref="previewArea" class="sn-preview" hidden></div>
+`;

package/vendor/symbiote-node/node/NodeSocket/NodeSocket.js

@@ -0,0 +1,25 @@
+/**
+ * NodeSocket — connection endpoint circle
+ *
+ * Visual socket indicator for node ports.
+ * Changes color via socket data attribute.
+ *
+ * @module symbiote-node/components/NodeSocket
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './NodeSocket.tpl.js';
+
+export class NodeSocket extends Symbiote {
+
+  renderCallback() {
+    this.sub('@data-socket-color', (val) => {
+      if (val) {
+        this.style.setProperty('--socket-color', val);
+      }
+    });
+  }
+}
+
+NodeSocket.template = template;
+NodeSocket.reg('node-socket');

package/vendor/symbiote-node/node/NodeSocket/NodeSocket.tpl.js

@@ -0,0 +1,7 @@
+/**
+ * NodeSocket template
+ * @module symbiote-node/node/NodeSocket.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`<slot></slot>`;

package/vendor/symbiote-node/node/PortItem/PortItem.css.js

@@ -0,0 +1,90 @@
+/**
+ * PortItem styles
+ * @module symbiote-node/node/PortItem.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+port-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 12px;
+  min-height: 28px;
+
+  &[data-side="input"] {
+    flex-direction: row;
+
+    & .sn-socket {
+      margin-left: -22px;
+    }
+  }
+
+  &[data-side="output"] {
+    flex-direction: row-reverse;
+
+    & .sn-socket {
+      margin-right: -22px;
+    }
+  }
+
+  & .sn-socket {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: transparent;
+    cursor: crosshair;
+    flex-shrink: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+      content: '';
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--socket-color, var(--sn-node-accent, #4a9eff));
+      border: 2px solid var(--sn-node-bg, #16213e);
+      transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+      pointer-events: none;
+    }
+
+    &[data-socket-shape="square"]::after {
+      border-radius: 2px;
+    }
+
+    &[data-socket-shape="diamond"]::after {
+      border-radius: 1px;
+      transform: rotate(45deg) scale(0.85);
+    }
+
+    &[data-socket-shape="diamond"]:hover::after {
+      transform: rotate(45deg) scale(1.1);
+    }
+
+    &[data-socket-shape="triangle"]::after {
+      border-radius: 0;
+      background: transparent;
+      width: 0;
+      height: 0;
+      border: 6px solid transparent;
+      border-left: 10px solid var(--socket-color, var(--sn-node-accent));
+      border-right: none;
+    }
+
+    &:hover::after {
+      transform: scale(1.3);
+      box-shadow: 0 0 8px var(--socket-color, var(--sn-node-accent));
+    }
+  }
+
+  & .port-label {
+    color: var(--sn-text-dim, #94a3b8);
+    font-size: 12px;
+    white-space: nowrap;
+  }
+}
+`;

package/vendor/symbiote-node/node/PortItem/PortItem.js

@@ -0,0 +1,87 @@
+/**
+ * PortItem — itemize item for node ports (input/output)
+ *
+ * Rendered by GraphNode via itemize API.
+ * Registers socket with ConnectFlow for interactive connecting.
+ *
+ * @module symbiote-node/components/PortItem
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './PortItem.tpl.js';
+import { styles } from './PortItem.css.js';
+
+export class PortItem extends Symbiote {
+  key = '';
+  label = '';
+  socketColor = '';
+  socketName = 'any';
+  side = 'input';
+
+  renderCallback() {
+    this.sub('socketColor', (val) => {
+      if (val) this.style.setProperty('--socket-color', val);
+    });
+    this.sub('side', (val) => {
+      if (val) this.setAttribute('data-side', val);
+    });
+    this.sub('socketName', (val) => {
+      const shape = PortItem.SOCKET_SHAPES[val] || 'circle';
+      const socketEl = this.ref.socket;
+      if (socketEl) socketEl.setAttribute('data-socket-shape', shape);
+    });
+
+    // Deferred socket registration — _canvas may not be set yet
+    this.#deferRegisterSocket(0);
+  }
+
+  /**
+   * Retry registration until graph-node._canvas is available
+   * @param {number} attempt
+   */
+  #deferRegisterSocket(attempt) {
+    if (attempt > 10) return;
+
+    const socketEl = this.ref.socket;
+    if (!socketEl) return;
+
+    const graphNode = this.closest('graph-node');
+    if (!graphNode || !graphNode._canvas) {
+      requestAnimationFrame(() => this.#deferRegisterSocket(attempt + 1));
+      return;
+    }
+
+    const connectFlow = graphNode._canvas.getConnectFlow();
+    if (!connectFlow) return;
+
+    const nodeId = graphNode.getAttribute('node-id');
+    const key = this.$.key;
+    const side = this.$.side;
+
+    /** @type {import('../interactions/ConnectFlow.js').SocketData} */
+    const socketData = { nodeId, key, side, element: socketEl };
+    socketEl._socketData = socketData;
+
+    connectFlow.registerSocket(socketEl, socketData);
+  }
+}
+
+PortItem.template = template;
+PortItem.rootStyles = styles;
+PortItem.reg('port-item');
+
+/** @type {Object<string, string>} - Socket type name to visual shape */
+PortItem.SOCKET_SHAPES = {
+  number: 'circle',
+  string: 'circle',
+  boolean: 'circle',
+  any: 'circle',
+  array: 'square',
+  object: 'square',
+  json: 'square',
+  exec: 'diamond',
+  execution: 'diamond',
+  trigger: 'diamond',
+  event: 'triangle',
+  signal: 'triangle',
+};

package/vendor/symbiote-node/node/PortItem/PortItem.tpl.js

@@ -0,0 +1,10 @@
+/**
+ * PortItem template
+ * @module symbiote-node/node/PortItem.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div ref="socket" class="sn-socket" ${{ '@data-key': 'key' }}></div>
+<span class="port-label">{{label}}</span>
+`;

package/vendor/symbiote-node/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "symbiote-node",
+  "version": "0.3.0-alpha.1",
+  "type": "module",
+  "description": "Visual Node Graph Editor + Execution Engine — extensible, themeable graph editor and runtime built on Symbiote.js",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./engine": "./engine/index.js",
+    "./engine/*": "./engine/*",
+    "./themes/*": "./themes/*",
+    "./canvas/*": "./canvas/*",
+    "./layout/*": "./layout/*",
+    "./interactions/*": "./interactions/*",
+    "./node/*": "./node/*",
+    "./shapes/*": "./shapes/*",
+    "./plugins/*": "./plugins/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "node --test tests/*.test.js",
+    "demo": "npx -y serve -l 3000 .",
+    "release:alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha",
+    "release:minor": "npm version minor && npm publish",
+    "release:patch": "npm version patch && npm publish"
+  },
+  "keywords": [
+    "node-editor",
+    "graph-editor",
+    "visual-programming",
+    "node-graph",
+    "symbiote",
+    "web-components",
+    "data-flow",
+    "dag",
+    "workflow-engine",
+    "execution-engine"
+  ],
+  "peerDependencies": {
+    "@symbiotejs/symbiote": ">=3.0.0",
+    "ws": ">=8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "ws": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RND-PRO/symbiote-node"
+  },
+  "author": "RND-PRO <nicothin@gmail.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/vendor/symbiote-node/palette/PaletteBrowser/PaletteBrowser.css.js

@@ -0,0 +1,143 @@
+/**
+ * PaletteBrowser styles
+ * @module symbiote-node/palette/PaletteBrowser.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+  palette-browser {
+    display: flex;
+    flex-direction: column;
+    width: 260px;
+    height: 100%;
+    background: var(--sn-ctx-bg, #1e1e2e);
+    border-left: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.08));
+    font-family: var(--sn-font, 'Inter', sans-serif);
+    font-size: 13px;
+    color: var(--sn-text, #cdd6f4);
+    overflow: hidden;
+    user-select: none;
+  }
+
+  .pal-header {
+    padding: 10px 14px;
+    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--sn-text-dim, #a0a0a0);
+    border-bottom: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.08));
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    & .material-symbols-outlined {
+      font-size: 16px;
+    }
+  }
+
+  .pal-search {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.06));
+
+    & input {
+      width: 100%;
+      padding: 6px 10px;
+      background: rgba(0, 0, 0, 0.25);
+      border: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.08));
+      border-radius: 4px;
+      color: var(--sn-text, #cdd6f4);
+      font-family: inherit;
+      font-size: 12px;
+      outline: none;
+      transition: border-color 0.2s ease-out;
+
+      &:focus {
+        border-color: var(--sn-node-selected, #4a9eff);
+      }
+
+      &::placeholder {
+        color: var(--sn-text-dim, #a0a0a0);
+      }
+    }
+  }
+
+  .pal-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+
+  pal-category {
+    & .pal-cat-header {
+      padding: 6px 14px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--sn-text-dim, #a0a0a0);
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      & .material-symbols-outlined {
+        font-size: 14px;
+        transition: transform 0.2s ease-out;
+      }
+
+      &:hover {
+        color: var(--sn-text, #cdd6f4);
+      }
+    }
+
+    &[data-collapsed] .pal-cat-items {
+      display: none;
+    }
+
+    &[data-collapsed] .pal-cat-header .material-symbols-outlined {
+      transform: rotate(-90deg);
+    }
+  }
+
+  pal-item {
+    padding: 6px 14px 6px 28px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: grab;
+    border-radius: 4px;
+    margin: 1px 6px;
+    transition: background 0.15s ease-out;
+
+    &:hover {
+      background: var(--sn-ctx-hover, rgba(90, 159, 212, 0.12));
+    }
+
+    &:active {
+      cursor: grabbing;
+      background: var(--sn-ctx-hover, rgba(90, 159, 212, 0.2));
+    }
+
+    & .pal-item-icon {
+      font-size: 16px;
+      width: 20px;
+      text-align: center;
+      color: var(--item-color, var(--sn-text-dim, #a0a0a0));
+    }
+
+    & .pal-item-label {
+      flex: 1;
+      font-size: 12px;
+    }
+
+    & .pal-item-desc {
+      font-size: 10px;
+      color: var(--sn-text-dim, #a0a0a0);
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+`;

package/vendor/symbiote-node/palette/PaletteBrowser/PaletteBrowser.js

@@ -0,0 +1,131 @@
+/**
+ * PaletteBrowser — Component library browser panel
+ *
+ * Displays categorized node types that can be dragged onto the canvas.
+ * Similar to TouchDesigner's Component Palette concept.
+ * Shows grouped node templates with icons, descriptions, and drag support.
+ *
+ * @module symbiote-node/palette/PaletteBrowser
+ */
+
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import { template } from './PaletteBrowser.tpl.js';
+import { styles } from './PaletteBrowser.css.js';
+
+class PalItem extends Symbiote {
+  init$ = {
+    name: '',
+    icon: 'radio_button_checked',
+    desc: '',
+    type: '',
+    color: '',
+    category: '',
+    isHeader: false,
+  };
+}
+
+PalItem.template = html`
+  <span class="pal-item-icon material-symbols-outlined" ${{ textContent: 'icon' }}></span>
+  <span class="pal-item-label" ${{ textContent: 'name' }}></span>
+  <span class="pal-item-desc" ${{ textContent: 'desc' }}></span>
+`;
+
+PalItem.reg('pal-item');
+
+class PalCategory extends Symbiote {
+  init$ = {
+    category: '',
+    catItems: [],
+  };
+
+  onToggle() {
+    this.toggleAttribute('data-collapsed');
+  }
+}
+
+PalCategory.template = html`
+  <div class="pal-cat-header" ${{ onclick: 'onToggle' }}>
+    <span class="material-symbols-outlined">expand_more</span>
+    <span ${{ textContent: 'category' }}></span>
+  </div>
+  <div class="pal-cat-items" ${{ itemize: 'catItems', 'item-tag': 'pal-item' }}></div>
+`;
+
+PalCategory.reg('pal-category');
+
+export class PaletteBrowser extends Symbiote {
+
+  init$ = {
+    categories: [],
+  };
+
+  /** @type {Array<{ category: string, color: string, items: Array<{ name: string, icon: string, type: string, desc: string, factory: function }> }>} */
+  #rawCategories = [];
+
+  /** @type {function|null} */
+  #onSelect = null;
+
+  /** @type {Map<string, function>} */
+  #factoryMap = new Map();
+
+  /**
+   * Register palette categories and items
+   * @param {Array<{ category: string, color: string, items: Array<{ name: string, icon: string, type: string, desc: string, factory: function }> }>} categories
+   */
+  setCategories(categories) {
+    this.#rawCategories = categories;
+    this.#syncList();
+  }
+
+  /**
+   * Set callback for item selection
+   * @param {function} callback - (factory, name) => void
+   */
+  onSelect(callback) {
+    this.#onSelect = callback;
+  }
+
+  #syncList(filter = '') {
+    const lowerFilter = filter.toLowerCase();
+    this.#factoryMap.clear();
+
+    this.$.categories = this.#rawCategories
+      .map(cat => {
+        const filtered = lowerFilter
+          ? cat.items.filter(it => it.name.toLowerCase().includes(lowerFilter) || it.desc.toLowerCase().includes(lowerFilter))
+          : cat.items;
+
+        if (filtered.length === 0) return null;
+
+        const catItems = filtered.map(it => {
+          this.#factoryMap.set(it.name, it.factory);
+          return {
+            name: it.name,
+            icon: it.icon,
+            desc: it.desc,
+            type: it.type,
+            color: cat.color,
+          };
+        });
+
+        return { category: cat.category, catItems };
+      })
+      .filter(Boolean);
+  }
+
+  onSearchInput(e) {
+    this.#syncList(e.target.value);
+  }
+
+  onItemClick(e) {
+    const item = e.target.closest('pal-item');
+    if (!item) return;
+    const name = item.$.name;
+    const factory = this.#factoryMap.get(name);
+    if (this.#onSelect && factory) this.#onSelect(factory, name);
+  }
+}
+
+PaletteBrowser.template = template;
+PaletteBrowser.rootStyles = styles;
+PaletteBrowser.reg('palette-browser');

package/vendor/symbiote-node/palette/PaletteBrowser/PaletteBrowser.tpl.js

@@ -0,0 +1,16 @@
+/**
+ * PaletteBrowser template
+ * @module symbiote-node/palette/PaletteBrowser.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+  <div class="pal-header">
+    <span class="material-symbols-outlined">widgets</span>
+    Components
+  </div>
+  <div class="pal-search">
+    <input ref="palSearch" type="text" placeholder="Search components..." ${{ oninput: 'onSearchInput' }} />
+  </div>
+  <div class="pal-list" ${{ itemize: 'categories', 'item-tag': 'pal-category', onclick: 'onItemClick' }}></div>
+`;