project-graph-mcp 2.2.6 → 2.3.1

package/vendor/symbiote-node/canvas/GraphTabs/GraphTabs.css.js

@@ -0,0 +1,97 @@
+/**
+ * GraphTabs styles
+ * @module symbiote-node/canvas/GraphTabs.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+  graph-tabs {
+    display: flex;
+    align-items: stretch;
+    height: 32px;
+    background: var(--sn-ctx-bg, #1e1e2e);
+    border-bottom: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.08));
+    font-family: var(--sn-font, 'Inter', sans-serif);
+    font-size: 12px;
+    color: var(--sn-text-dim, #a0a0a0);
+    overflow-x: auto;
+    overflow-y: hidden;
+    user-select: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  tab-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 14px;
+    cursor: pointer;
+    white-space: nowrap;
+    border-right: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.06));
+    transition: background 0.15s ease-out, color 0.15s ease-out;
+    position: relative;
+
+    &:hover {
+      background: color-mix(in srgb, currentColor 4%, transparent);
+      color: var(--sn-text, #cdd6f4);
+    }
+
+    &[data-active] {
+      background: var(--sn-node-bg, #2d2d3d);
+      color: var(--sn-text, #cdd6f4);
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: var(--sn-node-selected, #4a9eff);
+      }
+    }
+
+    & .material-symbols-outlined {
+      font-size: 14px;
+    }
+
+    & .tab-close {
+      font-size: 14px;
+      opacity: 0;
+      transition: opacity 0.15s;
+      padding: 2px;
+      border-radius: 3px;
+
+      &:hover {
+        background: color-mix(in srgb, currentColor 10%, transparent);
+      }
+    }
+
+    &:hover .tab-close {
+      opacity: 0.7;
+    }
+  }
+
+  .tab-add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    cursor: pointer;
+    color: var(--sn-text-dim, #a0a0a0);
+    transition: background 0.15s ease-out, color 0.15s ease-out;
+
+    &:hover {
+      background: color-mix(in srgb, currentColor 4%, transparent);
+      color: var(--sn-text, #cdd6f4);
+    }
+
+    & .material-symbols-outlined {
+      font-size: 16px;
+    }
+  }
+`;

package/vendor/symbiote-node/canvas/GraphTabs/GraphTabs.js

@@ -0,0 +1,176 @@
+/**
+ * GraphTabs — Tab/Page management for multi-canvas workflows
+ *
+ * Each tab represents an independent graph page with its own
+ * set of nodes and connections. Provides tab bar UI and
+ * state switching for the NodeCanvas.
+ *
+ * @module symbiote-node/canvas/GraphTabs
+ */
+
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import { template } from './GraphTabs.tpl.js';
+import { styles } from './GraphTabs.css.js';
+
+/**
+ * @typedef {Object} TabPage
+ * @property {string} id
+ * @property {string} name
+ * @property {Object} state - Serialized editor state
+ */
+
+class TabItem extends Symbiote {
+  init$ = {
+    id: '',
+    name: '',
+    isActive: false,
+    showClose: false,
+  };
+
+  renderCallback() {
+    this.sub('isActive', (val) => {
+      this.toggleAttribute('data-active', val);
+    });
+  }
+}
+
+TabItem.template = html`
+  <span class="material-symbols-outlined">description</span>
+  <span ${{ textContent: 'name' }}></span>
+  <span
+    class="tab-close material-symbols-outlined"
+    ${{ onclick: '^onCloseTab', '@hidden': '!showClose' }}
+  >close</span>
+`;
+
+TabItem.reg('tab-item');
+
+export class GraphTabs extends Symbiote {
+
+  init$ = {
+    tabItems: [],
+  };
+
+  /** @type {TabPage[]} */
+  #tabs = [];
+
+  /** @type {string} */
+  #activeTabId = '';
+
+  /** @type {function|null} */
+  #onSwitch = null;
+
+  /** @type {function|null} */
+  #onAdd = null;
+
+  /** @type {function|null} */
+  #onClose = null;
+
+  /**
+   * Set callbacks for tab events
+   * @param {object} callbacks
+   * @param {function} callbacks.onSwitch - (tabId) => void
+   * @param {function} callbacks.onAdd - () => TabPage
+   * @param {function} callbacks.onClose - (tabId) => void
+   */
+  setCallbacks(callbacks) {
+    this.#onSwitch = callbacks.onSwitch;
+    this.#onAdd = callbacks.onAdd;
+    this.#onClose = callbacks.onClose;
+  }
+
+  /**
+   * Add a tab
+   * @param {string} id
+   * @param {string} name
+   * @param {Object} [state={}]
+   */
+  addTab(id, name, state = {}) {
+    this.#tabs.push({ id, name, state });
+    this.#syncItems();
+    this.switchTo(id);
+  }
+
+  /**
+   * Switch to a tab
+   * @param {string} id
+   */
+  switchTo(id) {
+    this.#activeTabId = id;
+    this.#syncItems();
+    if (this.#onSwitch) this.#onSwitch(id);
+  }
+
+  /**
+   * Remove a tab
+   * @param {string} id
+   */
+  removeTab(id) {
+    const idx = this.#tabs.findIndex(t => t.id === id);
+    if (idx === -1) return;
+    this.#tabs.splice(idx, 1);
+    if (this.#activeTabId === id && this.#tabs.length > 0) {
+      this.switchTo(this.#tabs[Math.max(0, idx - 1)].id);
+    }
+    this.#syncItems();
+    if (this.#onClose) this.#onClose(id);
+  }
+
+  /** @returns {string} */
+  get activeTab() { return this.#activeTabId; }
+
+  /** @returns {TabPage[]} */
+  get tabs() { return [...this.#tabs]; }
+
+  /**
+   * Update tab state (for saving before switch)
+   * @param {string} id
+   * @param {Object} state
+   */
+  setTabState(id, state) {
+    const tab = this.#tabs.find(t => t.id === id);
+    if (tab) tab.state = state;
+  }
+
+  /**
+   * Get tab state
+   * @param {string} id
+   * @returns {Object|undefined}
+   */
+  getTabState(id) {
+    return this.#tabs.find(t => t.id === id)?.state;
+  }
+
+  #syncItems() {
+    const showClose = this.#tabs.length > 1;
+    this.$.tabItems = this.#tabs.map(t => ({
+      id: t.id,
+      name: t.name,
+      isActive: t.id === this.#activeTabId,
+      showClose,
+    }));
+  }
+
+  onTabClick(e) {
+    const item = e.target.closest('tab-item');
+    if (!item) return;
+    this.switchTo(item.$.id);
+  }
+
+  onCloseTab(e) {
+    e.stopPropagation();
+    const item = e.target.closest('tab-item');
+    if (item) this.removeTab(item.$.id);
+  }
+
+  onAddTab() {
+    if (this.#onAdd) {
+      const newTab = this.#onAdd();
+      if (newTab) this.addTab(newTab.id, newTab.name, newTab.state);
+    }
+  }
+}
+
+GraphTabs.template = template;
+GraphTabs.rootStyles = styles;
+GraphTabs.reg('graph-tabs');

package/vendor/symbiote-node/canvas/GraphTabs/GraphTabs.tpl.js

@@ -0,0 +1,12 @@
+/**
+ * GraphTabs template
+ * @module symbiote-node/canvas/GraphTabs.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+  <div ${{ itemize: 'tabItems', 'item-tag': 'tab-item', onclick: 'onTabClick' }}></div>
+  <div class="tab-add" title="New tab" ${{ onclick: 'onAddTab' }}>
+    <span class="material-symbols-outlined">add</span>
+  </div>
+`;

package/vendor/symbiote-node/canvas/LODManager.js

@@ -0,0 +1,88 @@
+export class LODManager {
+  /** @type {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} */
+  #canvas;
+  
+  /** @type {number} */
+  #threshold;
+
+  /** @type {string} */
+  #currentLod = 'collapsed';
+
+  /** @type {boolean} */
+  #attached = false;
+
+  #listeners = [];
+
+  /**
+   * @param {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} canvas
+   * @param {object} config
+   * @param {number} [config.threshold=0.7] - Zoom level at which LOD expands
+   */
+  constructor(canvas, { threshold = 0.7 } = {}) {
+    this.#canvas = canvas;
+    this.#threshold = threshold;
+  }
+
+  get currentLod() {
+    return this.#currentLod;
+  }
+
+  /**
+   * Attach LOD tracking to the canvas.
+   * Note: Symbiote's sub() does not return an unsubscribe handle —
+   * subscriptions are auto-cleaned when the canvas component is destroyed.
+   */
+  attach() {
+    if (this.#attached || !this.#canvas) return;
+    this.#attached = true;
+
+    const initialZoom = this.#canvas.$.zoom || 1;
+    this.#currentLod = initialZoom >= this.#threshold ? 'expanded' : 'collapsed';
+
+    this.#canvas.sub('zoom', (zoom) => {
+      if (!this.#attached) return; // guard after destroy
+      const newLod = zoom >= this.#threshold ? 'expanded' : 'collapsed';
+      if (newLod === this.#currentLod) return;
+      
+      this.#currentLod = newLod;
+      this.#emit(newLod);
+    });
+  }
+
+  /**
+   * Perform immediate LOD update evaluation (e.g. after manual navigation or fitView)
+   */
+  update() {
+    if (!this.#canvas || !this.#attached) return;
+    const zoom = this.#canvas.$.zoom || 1;
+    const newLod = zoom >= this.#threshold ? 'expanded' : 'collapsed';
+    if (newLod !== this.#currentLod) {
+      this.#currentLod = newLod;
+      this.#emit(newLod);
+    }
+  }
+
+  /**
+   * @param {Function} callback 
+   */
+  onLodChange(callback) {
+    this.#listeners.push(callback);
+    // Immediately notify new listener of current state
+    if (this.#attached) {
+      callback(this.#currentLod);
+    }
+  }
+
+  #emit(lod) {
+    for (const fn of this.#listeners) {
+      fn(lod);
+    }
+  }
+
+  destroy() {
+    // Symbiote sub() auto-cleans on component disconnect.
+    // We just disable the guard flag so the callback becomes a no-op.
+    this.#listeners = [];
+    this.#attached = false;
+  }
+}

package/vendor/symbiote-node/canvas/Minimap/Minimap.css.js

@@ -0,0 +1,71 @@
+/**
+ * Minimap styles
+ * @module symbiote-node/canvas/Minimap.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+node-minimap {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: 200px;
+  height: 140px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--sn-node-border, rgba(255,255,255,0.08));
+  box-shadow: 0 4px 16px var(--sn-shadow-color, rgba(0,0,0,0.3));
+  z-index: 90;
+  cursor: crosshair;
+  opacity: 1;
+  transition: opacity 0.4s ease;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &[data-fading] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  & canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.sn-minimap-toggle {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid var(--sn-node-border, rgba(255,255,255,0.08));
+  background: var(--sn-node-bg, #2a2a3e);
+  color: var(--sn-text-dim, #888);
+  cursor: pointer;
+  z-index: 89;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: color 0.15s, border-color 0.15s;
+
+  & .material-symbols-outlined {
+    font-size: 18px;
+  }
+
+  &:hover {
+    color: var(--sn-text, #ddd);
+    border-color: var(--sn-node-selected, #4a9eff);
+  }
+
+  &[data-active] {
+    color: var(--sn-node-selected, #4a9eff);
+    border-color: var(--sn-node-selected, #4a9eff);
+  }
+}
+`;

package/vendor/symbiote-node/canvas/Minimap/Minimap.js

@@ -0,0 +1,207 @@
+/**
+ * Minimap — small overview of the entire node graph
+ *
+ * Shows a scaled-down view of all nodes and connections.
+ * The viewport rectangle shows current visible area and can be dragged to pan.
+ * Positioned bottom-right of the canvas.
+ *
+ * @module symbiote-node/canvas/Minimap
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './Minimap.tpl.js';
+import { styles } from './Minimap.css.js';
+
+export class Minimap extends Symbiote {
+
+  init$ = {
+    visible: true,
+  };
+
+  /** @type {HTMLCanvasElement|null} */
+  #canvas2d = null;
+
+  /** @type {CanvasRenderingContext2D|null} */
+  #ctx = null;
+
+  /** @type {function|null} */
+  #getState = null;
+
+  /** @type {boolean} */
+  #isDragging = false;
+
+  /** @type {number} */
+  #rafId = 0;
+
+  renderCallback() {
+    this.#canvas2d = this.querySelector('canvas');
+    this.#ctx = this.#canvas2d?.getContext('2d');
+
+    // Pointer events for viewport drag
+    this.#canvas2d?.addEventListener('pointerdown', (e) => this.#onPointerDown(e));
+    window.addEventListener('pointermove', (e) => this.#onPointerMove(e));
+    window.addEventListener('pointerup', () => this.#onPointerUp());
+  }
+
+  /**
+   * Set state getter for reading canvas state
+   * @param {function} fn - returns { nodes, transform, containerSize }
+   */
+  setStateGetter(fn) {
+    this.#getState = fn;
+    this.#startLoop();
+  }
+
+  #startLoop() {
+    const draw = () => {
+      this.#draw();
+      this.#rafId = requestAnimationFrame(draw);
+    };
+    this.#rafId = requestAnimationFrame(draw);
+  }
+
+  #draw() {
+    const ctx = this.#ctx;
+    const canvas = this.#canvas2d;
+    if (!ctx || !canvas || !this.#getState) return;
+
+    const state = this.#getState();
+    if (!state) return;
+
+    const { nodes, transform, containerSize } = state;
+    const w = canvas.width;
+    const h = canvas.height;
+
+    // Read theme colors from CSS variables
+    const cs = getComputedStyle(this);
+    const bgColor = cs.getPropertyValue('--sn-minimap-bg').trim()
+      || cs.getPropertyValue('--sn-bg').trim()
+      || 'rgba(20, 20, 35, 0.85)';
+    const nodeColor = cs.getPropertyValue('--sn-minimap-node').trim()
+      || 'rgba(80, 130, 200, 0.6)';
+    const nodeStroke = cs.getPropertyValue('--sn-minimap-node-stroke').trim()
+      || cs.getPropertyValue('--sn-node-border').trim()
+      || 'rgba(120, 170, 255, 0.3)';
+    const vpStroke = cs.getPropertyValue('--sn-minimap-viewport').trim()
+      || 'rgba(255, 255, 255, 0.6)';
+    const vpFill = cs.getPropertyValue('--sn-minimap-viewport-fill').trim()
+      || 'rgba(255, 255, 255, 0.04)';
+
+    // Clear
+    ctx.clearRect(0, 0, w, h);
+
+    // Background
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, w, h);
+
+    if (nodes.length === 0) return;
+
+    // Calculate bounds of all nodes
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of nodes) {
+      minX = Math.min(minX, n.x);
+      minY = Math.min(minY, n.y);
+      maxX = Math.max(maxX, n.x + (n.width || 200));
+      maxY = Math.max(maxY, n.y + (n.height || 100));
+    }
+
+    // Add padding
+    const pad = 100;
+    minX -= pad; minY -= pad;
+    maxX += pad; maxY += pad;
+
+    const graphW = maxX - minX;
+    const graphH = maxY - minY;
+
+    // Scale to fit
+    const scaleX = w / graphW;
+    const scaleY = h / graphH;
+    const scale = Math.min(scaleX, scaleY);
+
+    const offsetX = (w - graphW * scale) / 2;
+    const offsetY = (h - graphH * scale) / 2;
+
+    // Store for viewport drag
+    this._mapMinX = minX;
+    this._mapMinY = minY;
+    this._mapScale = scale;
+    this._mapOffsetX = offsetX;
+    this._mapOffsetY = offsetY;
+
+    // Draw nodes as rectangles
+    for (const n of nodes) {
+      const x = (n.x - minX) * scale + offsetX;
+      const y = (n.y - minY) * scale + offsetY;
+      const nw = (n.width || 200) * scale;
+      const nh = (n.height || 80) * scale;
+
+      ctx.fillStyle = n.bypassed ? 'rgba(100, 100, 100, 0.5)' : nodeColor;
+      ctx.fillRect(x, y, nw, nh);
+      ctx.strokeStyle = nodeStroke;
+      ctx.lineWidth = 0.5;
+      ctx.strokeRect(x, y, nw, nh);
+    }
+
+    // Draw viewport rectangle
+    if (containerSize && transform) {
+      const vx = (-transform.x / transform.zoom - minX) * scale + offsetX;
+      const vy = (-transform.y / transform.zoom - minY) * scale + offsetY;
+      const vw = (containerSize.width / transform.zoom) * scale;
+      const vh = (containerSize.height / transform.zoom) * scale;
+
+      ctx.strokeStyle = vpStroke;
+      ctx.lineWidth = 1.5;
+      ctx.strokeRect(vx, vy, vw, vh);
+      ctx.fillStyle = vpFill;
+      ctx.fillRect(vx, vy, vw, vh);
+    }
+  }
+
+  #onPointerDown(e) {
+    this.#isDragging = true;
+    this.#navigateTo(e);
+    e.preventDefault();
+  }
+
+  #onPointerMove(e) {
+    if (!this.#isDragging) return;
+    this.#navigateTo(e);
+  }
+
+  #onPointerUp() {
+    this.#isDragging = false;
+  }
+
+  #navigateTo(e) {
+    if (!this.#getState || !this.#canvas2d) return;
+    const rect = this.#canvas2d.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+
+    const state = this.#getState();
+    if (!state?.containerSize || !state?.transform) return;
+
+    // Convert minimap coords to graph coords
+    const graphX = (mx - this._mapOffsetX) / this._mapScale + this._mapMinX;
+    const graphY = (my - this._mapOffsetY) / this._mapScale + this._mapMinY;
+
+    // Center the viewport on that point
+    const zoom = state.transform.zoom;
+    const newX = -(graphX * zoom - state.containerSize.width / 2);
+    const newY = -(graphY * zoom - state.containerSize.height / 2);
+
+    // Dispatch event so NodeCanvas can update its transform
+    this.dispatchEvent(new CustomEvent('minimap-navigate', {
+      detail: { x: newX, y: newY },
+      bubbles: true,
+    }));
+  }
+
+  destroyCallback() {
+    cancelAnimationFrame(this.#rafId);
+  }
+}
+
+Minimap.template = template;
+Minimap.rootStyles = styles;
+Minimap.reg('node-minimap');

package/vendor/symbiote-node/canvas/Minimap/Minimap.tpl.js

@@ -0,0 +1,9 @@
+/**
+ * Minimap template
+ * @module symbiote-node/canvas/Minimap.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<canvas width="200" height="140"></canvas>
+`;