project-graph-mcp 2.3.1 → 2.4.0

package/vendor/symbiote-node/inspector/InspectorPanel/InspectorPanel.tpl.js

@@ -1,96 +0,0 @@
-/**
- * InspectorPanel template
- * @module symbiote-node/inspector/InspectorPanel.tpl
- */
-import { html } from '@symbiotejs/symbiote';
-
-export const template = html`
-<div class="insp-resize-handle"></div>
-
-<div class="insp-body">
-  <div class="insp-empty">
-    <span class="material-symbols-outlined">touch_app</span>
-    <span>Select a node</span>
-  </div>
-
-  <div class="insp-content" hidden>
-    <div class="insp-field">
-      <label>Label</label>
-      <div class="insp-value">{{nodeLabel}}</div>
-    </div>
-    <div class="insp-field">
-      <label>Type</label>
-      <div class="insp-value insp-tag">{{nodeType}}</div>
-    </div>
-    <div class="insp-field">
-      <label>Category</label>
-      <div class="insp-value insp-tag">{{nodeCategory}}</div>
-    </div>
-    <div class="insp-field">
-      <label>ID</label>
-      <div class="insp-value insp-mono">{{nodeId}}</div>
-    </div>
-
-    <div class="insp-section">
-      <div class="insp-section-title">
-        <span class="material-symbols-outlined">input</span> Inputs
-      </div>
-      <div ${{ itemize: 'inputsList', 'item-tag': 'insp-port-item' }}></div>
-    </div>
-
-    <div class="insp-section">
-      <div class="insp-section-title">
-        <span class="material-symbols-outlined">output</span> Outputs
-      </div>
-      <div ${{ itemize: 'outputsList', 'item-tag': 'insp-port-item' }}></div>
-    </div>
-
-    <div class="insp-section">
-      <div class="insp-section-title">
-        <span class="material-symbols-outlined">tune</span> Controls
-      </div>
-      <div ${{ itemize: 'controlsList', 'item-tag': 'insp-ctrl-item' }}></div>
-    </div>
-
-    <div class="insp-template-preview" ${{ '@hidden': '!isTemplateBuilder' }}>
-      <template-preview></template-preview>
-    </div>
-
-    <div class="insp-fire" ${{ '@hidden': '!isFireable' }}>
-      <button class="insp-fire-btn" ${{ onclick: 'onFire' }}>
-        <span class="material-symbols-outlined">play_arrow</span>
-        Fire
-      </button>
-    </div>
-
-    <div class="insp-subgraph" hidden>
-      <div class="insp-section-title">
-        <span class="material-symbols-outlined">account_tree</span> Subgraph
-      </div>
-      <div class="insp-field">
-        <label>Inner Nodes</label>
-        <div class="insp-value">{{innerNodeCount}}</div>
-      </div>
-      <button class="insp-enter-btn" ${{ onclick: 'onEnterSubgraph' }}>
-        <span class="material-symbols-outlined">login</span>
-        Enter Subgraph
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-export const inspPortItemTemplate = html`
-<div class="insp-port">
-  <span class="insp-port-dot"></span>
-  <span class="insp-port-label">{{label}}</span>
-  <span class="insp-port-type">{{socketType}}</span>
-</div>
-`;
-
-export const inspCtrlItemTemplate = html`
-<div class="insp-ctrl">
-  <label class="insp-ctrl-label">{{label}}</label>
-  <div class="insp-ctrl-input"></div>
-</div>
-`;

package/vendor/symbiote-node/inspector/TemplatePreview/TemplatePreview.css.js

@@ -1,104 +0,0 @@
-/**
- * TemplatePreview styles
- * @module symbiote-node/inspector/TemplatePreview.css
- */
-import { css } from '@symbiotejs/symbiote';
-
-export const styles = css`
-template-preview {
-  display: block;
-  padding-top: 8px;
-
-  & .tpl-preview-section {
-    margin-bottom: 10px;
-  }
-
-  & .tpl-chips-label,
-  & .tpl-preview-label {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--sn-text-dim, #888);
-    margin-bottom: 4px;
-    letter-spacing: 0.5px;
-  }
-
-  & .tpl-chips-label .material-symbols-outlined,
-  & .tpl-preview-label .material-symbols-outlined {
-    font-size: 14px;
-    opacity: 0.6;
-  }
-
-  & .tpl-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-
-  & .tpl-chips-empty {
-    font-size: 11px;
-    color: var(--sn-text-dim, #666);
-    font-style: italic;
-    padding: 4px 0;
-
-    &[hidden] {
-      display: none;
-    }
-  }
-
-  & .tpl-test-data {
-    width: 100%;
-    padding: 6px 8px;
-    font-size: 11px;
-    font-family: 'SF Mono', 'Fira Code', monospace;
-    color: var(--sn-text, #d4d4d4);
-    background: color-mix(in srgb, currentColor 6%, transparent);
-    border: 1px solid rgba(255,255,255,0.06);
-    border-radius: 4px;
-    outline: none;
-    resize: vertical;
-    min-height: 50px;
-    box-sizing: border-box;
-    line-height: 1.4;
-    transition: border-color 0.15s;
-
-    &:focus {
-      border-color: var(--sn-node-selected, #4a9eff);
-    }
-  }
-
-  & .tpl-preview-result {
-    font-size: 12px;
-    font-family: 'SF Mono', 'Fira Code', monospace;
-    color: var(--sn-text, #d4d4d4);
-    background: color-mix(in srgb, currentColor 4%, transparent);
-    border: 1px solid rgba(255,255,255,0.04);
-    border-radius: 4px;
-    padding: 8px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    min-height: 30px;
-    line-height: 1.4;
-  }
-}
-
-.tpl-chip {
-  display: inline-block;
-  padding: 2px 8px;
-  font-size: 11px;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  border-radius: 10px;
-  background: color-mix(in srgb, #4caf50 20%, transparent);
-  color: #81c784;
-  border: 1px solid rgba(76, 175, 80, 0.3);
-
-  &[data-missing] {
-    background: color-mix(in srgb, #f44336 20%, transparent);
-    color: #ef9a9a;
-    border-color: rgba(244, 67, 54, 0.3);
-  }
-}
-`;

package/vendor/symbiote-node/inspector/TemplatePreview/TemplatePreview.js

@@ -1,133 +0,0 @@
-/**
- * TemplatePreview — live preview for template-builder node
- *
- * Shows placeholder chips (resolved/missing), test data input,
- * and interpolated preview text. Updates reactively.
- *
- * @module symbiote-node/inspector/TemplatePreview
- */
-
-import Symbiote from '@symbiotejs/symbiote';
-import { template } from './TemplatePreview.tpl.js';
-import { styles } from './TemplatePreview.css.js';
-import { extractPlaceholders } from '../../engine/packs/transform/template-builder.handler.js';
-
-const DEFAULT_TEST_DATA = JSON.stringify({
-  status: 'created',
-  region: 'RU',
-  jobUid: '00c3b879-example',
-  details: 'Test delivery',
-  timestamp: new Date().toISOString(),
-}, null, 2);
-
-export class TemplatePreview extends Symbiote {
-  init$ = {
-    template: '',
-    testData: DEFAULT_TEST_DATA,
-    placeholderChips: [],
-    previewText: '',
-    noPlaceholders: true,
-  };
-
-  renderCallback() {
-    // Bind textarea to testData
-    /** @type {HTMLTextAreaElement|null} */
-    const textarea = this.querySelector('.tpl-test-data');
-    if (textarea) {
-      textarea.value = this.$.testData;
-      textarea.addEventListener('input', () => {
-        this.$.testData = textarea.value;
-      });
-    }
-
-    // React to template changes
-    this.sub('template', () => this._updatePreview());
-    this.sub('testData', () => this._updatePreview());
-  }
-
-  /**
-   * Extract placeholders, interpolate template, update chips + preview.
-   */
-  _updatePreview() {
-    const tpl = this.$.template;
-    const placeholders = extractPlaceholders(tpl);
-
-    this.$.noPlaceholders = placeholders.length === 0;
-
-    // Parse test data
-    let data = {};
-    try {
-      data = JSON.parse(this.$.testData);
-    } catch {
-      this.$.previewText = '⚠️ Invalid JSON in test data';
-      this.$.placeholderChips = placeholders.map((name) => ({ name }));
-      this._applyChipColors([]);
-      return;
-    }
-
-    // Build chips with resolved status
-    const resolved = [];
-    const chips = placeholders.map((name) => {
-      const val = this._resolvePath(data, name);
-      const isResolved = val !== undefined;
-      if (isResolved) resolved.push(name);
-      return { name };
-    });
-
-    this.$.placeholderChips = chips;
-
-    // Apply chip colors after itemize renders
-    requestAnimationFrame(() => this._applyChipColors(resolved));
-
-    // Interpolate
-    if (!tpl) {
-      this.$.previewText = '';
-      return;
-    }
-
-    const text = tpl.replace(/\{\{?([^{}]+)\}?\}/g, (match, key) => {
-      const trimmed = key.trim();
-      const value = this._resolvePath(data, trimmed);
-      if (value === undefined) return match;
-      if (typeof value === 'object') return JSON.stringify(value);
-      return String(value);
-    });
-
-    this.$.previewText = text;
-  }
-
-  /**
-   * Apply data-missing attribute to chip elements based on resolved status.
-   *
-   * @param {string[]} resolved - Names of resolved placeholders
-   */
-  _applyChipColors(resolved) {
-    const chipEls = this.querySelectorAll('.tpl-chip');
-    chipEls.forEach((el) => {
-      const name = el.textContent?.trim();
-      if (name && !resolved.includes(name)) {
-        el.setAttribute('data-missing', '');
-      } else {
-        el.removeAttribute('data-missing');
-      }
-    });
-  }
-
-  /**
-   * Resolve a dot-notation path in an object.
-   *
-   * @param {Object} obj - Data object
-   * @param {string} path - Dot-separated path
-   * @returns {*} Resolved value or undefined
-   */
-  _resolvePath(obj, path) {
-    return path.split('.').reduce((o, k) => {
-      if (o === null || o === undefined) return undefined;
-      return o[k];
-    }, obj);
-  }
-}
-
-TemplatePreview.template = template;
-TemplatePreview.rootStyles = styles;
-TemplatePreview.reg('template-preview');

package/vendor/symbiote-node/inspector/TemplatePreview/TemplatePreview.tpl.js

@@ -1,33 +0,0 @@
-/**
- * TemplatePreview template
- * @module symbiote-node/inspector/TemplatePreview.tpl
- */
-import { html } from '@symbiotejs/symbiote';
-
-export const template = html`
-<div class="tpl-preview-section">
-  <div class="tpl-chips-label">
-    <span class="material-symbols-outlined">sell</span> Placeholders
-  </div>
-  <div class="tpl-chips" itemize="placeholderChips">
-    <template>
-      <span class="tpl-chip">{{name}}</span>
-    </template>
-  </div>
-  <div class="tpl-chips-empty" ${{ '@hidden': '!noPlaceholders' }}>
-    Type {field} in template to add placeholders
-  </div>
-</div>
-<div class="tpl-preview-section">
-  <div class="tpl-preview-label">
-    <span class="material-symbols-outlined">data_object</span> Test Data (JSON)
-  </div>
-  <textarea class="tpl-test-data" rows="3" spellcheck="false"></textarea>
-</div>
-<div class="tpl-preview-section">
-  <div class="tpl-preview-label">
-    <span class="material-symbols-outlined">visibility</span> Preview
-  </div>
-  <div class="tpl-preview-result" ${{ textContent: 'previewText' }}></div>
-</div>
-`;

package/vendor/symbiote-node/interactions/ConnectFlow.js

@@ -1,307 +0,0 @@
-/**
- * ConnectFlow — interactive socket-to-socket connection creation
- *
- * Simplified version of Rete.js ClassicFlow.
- * Handles: pointerdown on socket → drag pseudo-line → pointerup on target socket → create connection.
- *
- * @module symbiote-node/interactions/ConnectFlow
- */
-
-import { Connection } from '../core/Connection.js';
-
-/**
- * @typedef {object} SocketData
- * @property {string} nodeId - Node ID
- * @property {string} key - Port key
- * @property {'input'|'output'} side - Port side
- * @property {HTMLElement} element - Socket DOM element
- */
-
-export class ConnectFlow {
-
-  /** @type {SocketData|null} */
-  #picked = null;
-
-  /** @type {import('../core/Editor.js').NodeEditor} */
-  #editor;
-
-  /** @type {function} */
-  #getNodePosition;
-
-  /** @type {function} */
-  #getNodeSize;
-
-  /** @type {function} */
-  #getTransform;
-
-  /** @type {function|null} */
-  #onPseudoStart = null;
-
-  /** @type {function|null} */
-  #onPseudoMove = null;
-
-  /** @type {function|null} */
-  #onPseudoEnd = null;
-
-  /** @type {function|null} */
-  #onDropEmpty = null;
-
-  /** @type {function|null} - called during drag with world XY + picked socket */
-  #onCompatibleMove = null;
-
-  /** @type {function|null} - find nearest SVG dot as drop target */
-  #findNearestDot = null;
-
-  /** @type {number} - last time compatible move was emitted (ms) */
-  #lastMoveTime = 0;
-
-  /** @type {{ x: number, y: number }|null} - cached start position from pick */
-  #pickedStartPos = null;
-
-  /** @type {Set<SocketData>} */
-  #sockets = new Set();
-
-  /**
-   * @param {import('../core/Editor.js').NodeEditor} editor
-   * @param {object} callbacks
-   * @param {function} callbacks.getNodePosition
-   * @param {function} callbacks.getNodeSize
-   * @param {function} callbacks.getTransform - Returns { x, y, k, rect }
-   * @param {function} callbacks.onPseudoStart
-   * @param {function} callbacks.onPseudoMove
-   * @param {function} callbacks.onPseudoEnd
-   * @param {function} [callbacks.onDropEmpty] - Called when connection dropped in empty space
-   */
-  constructor(editor, callbacks) {
-    this.#editor = editor;
-    this.#getNodePosition = callbacks.getNodePosition;
-    this.#getNodeSize = callbacks.getNodeSize;
-    this.#getTransform = callbacks.getTransform;
-    this.#onPseudoStart = callbacks.onPseudoStart;
-    this.#onPseudoMove = callbacks.onPseudoMove;
-    this.#onPseudoEnd = callbacks.onPseudoEnd;
-    this.#onDropEmpty = callbacks.onDropEmpty || null;
-    this.#onCompatibleMove = callbacks.onCompatibleMove || null;
-    this.#findNearestDot = callbacks.findNearestDot || null;
-
-    window.addEventListener('pointermove', this.#onMove);
-    window.addEventListener('pointerup', this.#onUp);
-  }
-
-  /**
-   * Register a socket element for connection interaction
-   * @param {HTMLElement} socketEl
-   * @param {SocketData} data
-   */
-  registerSocket(socketEl, data) {
-    this.#sockets.add(data);
-    socketEl.addEventListener('pointerdown', (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      this.#pick(data);
-    });
-  }
-
-  /**
-   * Whether a connection drag is in progress
-   * @returns {boolean}
-   */
-  isPicking() {
-    return this.#picked !== null;
-  }
-
-  /**
-   * Get the currently picked socket data (during drag)
-   * @returns {SocketData|null}
-   */
-  getPickedSocket() {
-    return this.#picked;
-  }
-
-  /**
-   * Externally initiate a connection drag from socket data
-   * @param {SocketData} data
-   */
-  pickSocket(data) {
-    // Ensure this socket is in the registry for snap targeting
-    if (!this.#sockets.has(data)) {
-      this.#sockets.add(data);
-    }
-    this.#pick(data);
-  }
-
-  #pick(data) {
-    this.#picked = data;
-    const pos = this.#getSocketWorldPosition(data);
-    if (this.#onPseudoStart) this.#onPseudoStart(pos.x, pos.y, data);
-  }
-
-  #onMove = (e) => {
-    if (!this.#picked) return;
-    e.preventDefault();
-
-    const startPos = this.#getSocketWorldPosition(this.#picked);
-    const t = this.#getTransform();
-    // Use clientX/Y minus container rect for accurate positioning
-    const endX = (e.clientX - t.rect.left - t.x) / t.k;
-    const endY = (e.clientY - t.rect.top - t.y) / t.k;
-
-    if (this.#onPseudoMove) this.#onPseudoMove(startPos.x, startPos.y, endX, endY);
-
-    // Throttle to ~60fps
-    const now = performance.now();
-    if (this.#onCompatibleMove && now - this.#lastMoveTime > 16) {
-      this.#lastMoveTime = now;
-      this.#onCompatibleMove(endX, endY, this.#picked);
-    }
-  };
-
-  #onUp = (e) => {
-    if (!this.#picked) return;
-
-    // Find nearest compatible socket within snap distance
-    const t = this.#getTransform();
-    const pointerX = (e.clientX - t.rect.left - t.x) / t.k;
-    const pointerY = (e.clientY - t.rect.top - t.y) / t.k;
-    const target = this.#findNearestSocket(pointerX, pointerY);
-
-    if (target && this.#canConnect(this.#picked, target)) {
-      this.#makeConnection(this.#picked, target);
-    } else if (this.#findNearestDot) {
-      // Fallback: check SVG dots as drop target
-      const dotTarget = this.#findNearestDot(pointerX, pointerY);
-      if (dotTarget) {
-        const dotSocket = { nodeId: dotTarget.nodeId, key: dotTarget.key, side: dotTarget.side };
-        if (this.#canConnect(this.#picked, dotSocket)) {
-          this.#makeConnection(this.#picked, dotSocket);
-        } else if (this.#onDropEmpty) {
-          this.#onDropEmpty(pointerX, pointerY, this.#picked);
-        }
-      } else if (this.#onDropEmpty) {
-        this.#onDropEmpty(pointerX, pointerY, this.#picked);
-      }
-    } else if (this.#onDropEmpty) {
-      // No target found — emit drop-in-empty event
-      this.#onDropEmpty(pointerX, pointerY, this.#picked);
-    }
-
-    this.#picked = null;
-    if (this.#onPseudoEnd) this.#onPseudoEnd();
-  };
-  /**
-   * Get socket position in graph coordinate space
-   * Uses getBoundingClientRect with zoom compensation
-   * @param {SocketData} data
-   * @returns {{ x: number, y: number }}
-   */
-  #getSocketWorldPosition(data) {
-    // Direct world coordinates (from overlay dot drag)
-    if (data.worldX !== undefined && data.worldY !== undefined) {
-      return { x: data.worldX, y: data.worldY };
-    }
-
-    const pos = this.#getNodePosition(data.nodeId);
-    if (!pos) return { x: 0, y: 0 };
-
-    if (data.element) {
-      const graphNode = data.element.closest('graph-node');
-      if (graphNode) {
-        const t = this.#getTransform();
-        const nodeRect = graphNode.getBoundingClientRect();
-        const socketRect = data.element.getBoundingClientRect();
-        // Divide by zoom to get unscaled offset within the node
-        const offsetX = (socketRect.left - nodeRect.left + socketRect.width / 2) / t.k;
-        const offsetY = (socketRect.top - nodeRect.top + socketRect.height / 2) / t.k;
-        return { x: pos.x + offsetX, y: pos.y + offsetY };
-      }
-    }
-
-    // Fallback: edge center
-    const size = this.#getNodeSize(data.nodeId);
-    if (!size) return { x: 0, y: 0 };
-    return {
-      x: data.side === 'output' ? pos.x + size.width : pos.x,
-      y: pos.y + size.height / 2,
-    };
-  }
-
-  /**
-   * Find nearest registered socket within snap distance
-   * Uses registered socket collection instead of DOM hit-testing
-   * @param {number} worldX - Pointer X in graph coordinates
-   * @param {number} worldY - Pointer Y in graph coordinates
-   * @returns {SocketData|null}
-   */
-  #findNearestSocket(worldX, worldY) {
-    const SNAP_DISTANCE = 30; // pixels in graph space
-    let nearest = null;
-    let nearestDist = SNAP_DISTANCE;
-
-    for (const socket of this.#sockets) {
-      // Skip same socket as picked
-      if (socket === this.#picked) continue;
-
-      const pos = this.#getSocketWorldPosition(socket);
-      const dx = worldX - pos.x;
-      const dy = worldY - pos.y;
-      const dist = Math.sqrt(dx * dx + dy * dy);
-
-      if (dist < nearestDist) {
-        nearestDist = dist;
-        nearest = socket;
-      }
-    }
-
-    return nearest;
-  }
-
-  /**
-   * Check if two sockets can be connected
-   * @param {SocketData} from
-   * @param {SocketData} to
-   * @returns {boolean}
-   */
-  #canConnect(from, to) {
-    if (from.side === to.side) return false;
-    if (from.nodeId === to.nodeId) return false;
-
-    const fromNode = this.#editor.getNode(from.nodeId);
-    const toNode = this.#editor.getNode(to.nodeId);
-    if (!fromNode || !toNode) return false;
-
-    const isFromOutput = from.side === 'output';
-    const output = isFromOutput
-      ? fromNode.outputs[from.key]
-      : toNode.outputs[to.key];
-    const input = isFromOutput
-      ? toNode.inputs[to.key]
-      : fromNode.inputs[from.key];
-
-    if (!output || !input) return false;
-
-    return output.socket.isCompatibleWith(input.socket);
-  }
-
-  /**
-   * Create the connection
-   * @param {SocketData} from
-   * @param {SocketData} to
-   */
-  #makeConnection(from, to) {
-    let sourceData = from.side === 'output' ? from : to;
-    let targetData = from.side === 'input' ? from : to;
-
-    const sourceNode = this.#editor.getNode(sourceData.nodeId);
-    const targetNode = this.#editor.getNode(targetData.nodeId);
-    if (!sourceNode || !targetNode) return;
-
-    const conn = new Connection(sourceNode, sourceData.key, targetNode, targetData.key);
-    this.#editor.addConnection(conn);
-  }
-
-  /** Cleanup */
-  destroy() {
-    window.removeEventListener('pointermove', this.#onMove);
-    window.removeEventListener('pointerup', this.#onUp);
-  }
-}