project-graph-mcp 2.2.6 → 2.3.0

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

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

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

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

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

@@ -0,0 +1,307 @@
+/**
+ * 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);
+  }
+}