project-graph-mcp 2.3.1 → 2.4.0

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

@@ -1,97 +0,0 @@
-/**
- * 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

@@ -1,176 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-/**
- * 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

@@ -1,88 +0,0 @@
-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

@@ -1,71 +0,0 @@
-/**
- * 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

@@ -1,207 +0,0 @@
-/**
- * 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

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