project-graph-mcp 2.3.1 → 2.4.0

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

@@ -1,584 +0,0 @@
-/**
- * NodeViewManager — creates/destroys graph-node elements with group drag
- *
- * Handles DOM creation, drag initialization with snap-to-grid,
- * group drag for multi-selected nodes, and twitch click detection.
- * Extracted from NodeCanvas to reduce complexity (was 27 cyclomatic).
- *
- * @module symbiote-node/canvas/NodeViewManager
- */
-
-import { Drag } from '../interactions/Drag.js';
-import { Selector } from '../interactions/Selector.js';
-import { animateOut } from '@symbiotejs/symbiote';
-import { getShape } from '../shapes/index.js';
-
-export class NodeViewManager {
-
-  /** @type {Map<string, HTMLElement>} */
-  #nodeViews;
-
-  /** @type {import('../core/Editor.js').NodeEditor} */
-  #editor;
-
-  /** @type {import('../interactions/Selector.js').Selector} */
-  #selector;
-
-  /** @type {import('../interactions/SnapGrid.js').SnapGrid} */
-  #snapGrid;
-
-  /** @type {function} */
-  #getZoom;
-
-  /** @type {function} */
-  #setNodePosition;
-
-  /** @type {function} */
-  #animateNodeToPosition;
-
-  /** @type {function} */
-  #onNodeClick;
-
-  /** @type {Object} */
-  #canvas;
-
-  /** @type {function|null} */
-  #onSvgShapeReady = null;
-
-  /** @type {boolean} */
-  #readonly = false;
-
-  /** @type {boolean} */
-  #snapEnabled = false;
-
-  /** @type {HTMLElement} */
-  #nodesLayer;
-
-  /** @type {number} Z-index counter: increments on each select/drag */
-  #zCounter = 1;
-
-  /**
-   * @param {object} config
-   * @param {Map<string, HTMLElement>} config.nodeViews - shared Map
-   * @param {import('../core/Editor.js').NodeEditor} config.editor
-   * @param {import('../interactions/Selector.js').Selector} config.selector
-   * @param {import('../interactions/SnapGrid.js').SnapGrid} config.snapGrid
-   * @param {function} config.getZoom
-   * @param {function} config.setNodePosition
-   * @param {function} config.animateNodeToPosition
-   * @param {function} config.onNodeClick
-   * @param {HTMLElement} config.nodesLayer
-   * @param {Object} config.canvas - NodeCanvas reference for socket registration
-   */
-  constructor({ nodeViews, editor, selector, snapGrid, getZoom, setNodePosition, animateNodeToPosition, onNodeClick, nodesLayer, canvas, onSvgShapeReady }) {
-    this.#nodeViews = nodeViews;
-    this.#editor = editor;
-    this.#selector = selector;
-    this.#snapGrid = snapGrid;
-    this.#getZoom = getZoom;
-    this.#setNodePosition = setNodePosition;
-    this.#animateNodeToPosition = animateNodeToPosition;
-    this.#onNodeClick = onNodeClick;
-    this.#nodesLayer = nodesLayer;
-    this.#canvas = canvas;
-    this.#onSvgShapeReady = onSvgShapeReady || null;
-  }
-
-  /** @param {boolean} readonly */
-  setReadonly(readonly) {
-    this.#readonly = readonly;
-  }
-
-  /** @param {boolean} enabled */
-  setSnapEnabled(enabled) {
-    this.#snapEnabled = enabled;
-  }
-
-  /**
-   * Create and append multiple node views in a single DOM batch.
-   * This prevents layout thrashing and O(N) mutation overhead during graph inflation.
-   * @param {import('../core/Node.js').Node[]} nodes
-   */
-  addViews(nodes) {
-    if (!nodes || nodes.length === 0) return;
-
-    const fragment = document.createDocumentFragment();
-    
-    // 1. Create all elements and bind them (no DOM append yet)
-    for (const node of nodes) {
-      const el = this.#createNodeElement(node);
-      fragment.appendChild(el);
-      this.#nodeViews.set(node.id, el);
-    }
-
-    // 2. Single batch insert into live DOM
-    this.#nodesLayer.appendChild(fragment);
-
-    // 3. Post-processing (SVG injection, preview canvas) requires elements to be in DOM
-    for (const node of nodes) {
-      const el = this.#nodeViews.get(node.id);
-      if (el) this.#postProcessNodeView(node, el);
-    }
-  }
-
-  /**
-   * Create a graph-node element for a Node
-   * @param {import('../core/Node.js').Node} node
-   */
-  addView(node) {
-    const el = this.#createNodeElement(node);
-    this.#nodesLayer.appendChild(el);
-    this.#nodeViews.set(node.id, el);
-    this.#postProcessNodeView(node, el);
-  }
-
-  /**
-   * Creates the HTMLElement for a node with its drag behavior initialized.
-   * Does NOT append to the live DOM layer.
-   * @private
-   * @param {import('../core/Node.js').Node} node
-   * @returns {HTMLElement}
-   */
-  #createNodeElement(node) {
-    const el = document.createElement('graph-node');
-    el.style.position = 'absolute';
-    el.style.transform = 'translate(0px, 0px)';
-    el._position = { x: 0, y: 0 };
-    el._nodeData = node;
-    el.setAttribute('node-id', node.id);
-    el.setAttribute('node-label', node.label);
-    el.setAttribute('node-category', node.category);
-    el.setAttribute('node-shape', node.shape);
-    el.setAttribute('node-type', node.type || 'default');
-    el._canvas = this.#canvas;
-
-    const drag = new Drag();
-    let dragStart = null;
-
-    drag.initialize(
-      el,
-      {
-        getPosition: () => el._position,
-        getZoom: this.#getZoom,
-      },
-      {
-        shouldStart: (e) => {
-          // SVG shapes: only start drag if click is inside the SVG path
-          const svgPath = el.querySelector('svg > path');
-          if (!svgPath) return true; // not an SVG shape node
-          const svg = svgPath.ownerSVGElement;
-          const rect = svg.getBoundingClientRect();
-          const vb = svg.viewBox.baseVal;
-          // Convert page coords to SVG viewBox coords
-          const sx = (e.clientX - rect.left) / rect.width * vb.width + vb.x;
-          const sy = (e.clientY - rect.top) / rect.height * vb.height + vb.y;
-          const pt = new DOMPoint(sx, sy);
-          return svgPath.isPointInFill(pt);
-        },
-        onStart: (e) => {
-          dragStart = { x: e.pageX, y: e.pageY };
-          this.#autoSelectOnDragStart(node.id, e);
-          this.#captureDragStartPositions();
-          this.#bringToFront(node.id);
-          this.#applyLift(el);
-          this.#editor.emit('nodepicked', node);
-        },
-        onTranslate: (x, y) => {
-          this.#handleGroupTranslate(node.id, el, x, y);
-        },
-        onDrop: (e) => {
-          this.#handleDrop(node.id, el, e, dragStart);
-          dragStart = null;
-        },
-      }
-    );
-    el._drag = drag;
-    
-    return el;
-  }
-
-  /**
-   * Applies SVG shaping or subgraph previews after the element is in the live DOM.
-   * @private
-   * @param {import('../core/Node.js').Node} node
-   * @param {HTMLElement} el
-   */
-  #postProcessNodeView(node, el) {
-    // Apply shape visuals: SVG background layer instead of clip-path
-    // Clip-path clips content (labels, ports). SVG bg preserves them.
-    const shape = getShape(node.shape);
-    if (shape && shape.pathData) {
-      // Set explicit element dimensions to match SVG viewBox aspect ratio
-      // This ensures correct proportions and reliable offsetWidth/Height
-      const vb = shape.viewBox.split(' ').map(Number);
-      const vbW = vb[2];
-      const vbH = vb[3];
-      const baseSize = 120; // base dimension
-      const aspect = vbW / vbH;
-      const nodeW = aspect >= 1 ? baseSize : Math.round(baseSize * aspect);
-      const nodeH = aspect >= 1 ? Math.round(baseSize / aspect) : baseSize;
-      el.style.width = nodeW + 'px';
-      el.style.height = nodeH + 'px';
-      el.style.minWidth = nodeW + 'px';
-      el.style.minHeight = nodeH + 'px';
-    }
-
-    requestAnimationFrame(() => {
-      if (shape && shape.pathData) {
-        const size = { width: el.offsetWidth, height: el.offsetHeight };
-
-        // 1. Inject SVG background — element is properly proportioned
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('viewBox', shape.viewBox);
-        svg.setAttribute('preserveAspectRatio', 'none');
-        svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible;';
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', shape.pathData);
-        path.setAttribute('fill', `var(--sn-shape-${shape.name}-fill, var(--sn-shape-fill, var(--sn-node-bg, #16213e)))`);
-        path.setAttribute('stroke', `var(--sn-shape-${shape.name}-stroke, var(--sn-shape-stroke, var(--sn-node-border, #2a2a4a)))`);
-        path.setAttribute('stroke-width', 'var(--sn-shape-stroke-width, 0.4)');
-        path.setAttribute('stroke-linejoin', 'round');
-        svg.appendChild(path);
-        el.prepend(svg);
-        el.setAttribute('data-svg-shape', shape.name);
-
-        // Make node background transparent — SVG provides the shape
-        el.style.background = 'transparent';
-        el.style.border = 'none';
-        el.style.boxShadow = 'none';
-        el.style.borderRadius = '0';
-        el.style.overflow = 'visible';
-
-        // Elevate content above SVG layer
-        for (const child of el.children) {
-          if (child !== svg) child.style.position = 'relative';
-        }
-
-        // Watermark icon — large pale category icon centered inside shape
-        const iconEl = el.querySelector('.sn-node-icon');
-        if (iconEl) {
-          const watermark = document.createElement('span');
-          watermark.className = 'sn-shape-watermark material-symbols-outlined';
-          watermark.textContent = iconEl.textContent;
-          el.appendChild(watermark);
-        }
-
-        // Notify canvas to render free dots for this SVG node
-        if (this.#onSvgShapeReady) this.#onSvgShapeReady(node.id);
-
-
-      } else if (shape) {
-        // Standard shapes: apply border-radius
-        const size = { width: el.offsetWidth || 180, height: el.offsetHeight || 60 };
-        const radius = shape.getBorderRadius(size);
-        if (radius && radius !== 'var(--sn-node-radius, 10px)') {
-          el.style.borderRadius = radius;
-        }
-      }
-    });
-
-    // Subgraph preview canvas — inject DOM element synchronously so
-    // measureNodeSizes() includes the 80px canvas in offsetHeight.
-    // Only the drawing is deferred to rAF (needs inner editor data).
-    if (node._isSubgraph) {
-      const body = el.querySelector('.sn-node-body');
-      if (body) {
-        const canvas = document.createElement('canvas');
-        canvas.className = 'sn-subgraph-preview';
-        canvas.width = 200;
-        canvas.height = 80;
-        body.appendChild(canvas);
-        el._previewCanvas = canvas;
-        requestAnimationFrame(() => {
-          this.#initSubgraphPreview(el, node, canvas);
-        });
-      }
-    }
-  }
-
-  /**
-   * Remove a graph-node element
-   * @param {import('../core/Node.js').Node} node
-   */
-  removeView(node) {
-    const el = this.#nodeViews.get(node.id);
-    if (!el) return;
-    if (el._previewRaf) clearTimeout(el._previewRaf);
-    el._previewRaf = null;
-    if (el._drag) el._drag.destroy();
-    animateOut(el);
-    this.#nodeViews.delete(node.id);
-    this.#selector.getSelectedNodes().delete(node.id);
-  }
-
-  /**
-   * Remove a node view instantly (no animation) for virtualization demote.
-   * Returns captured position/size for phantom conversion.
-   * @param {string} nodeId
-   * @returns {{ x: number, y: number, w: number, h: number } | null}
-   */
-  removeViewInstant(nodeId) {
-    const el = this.#nodeViews.get(nodeId);
-    if (!el) return null;
-    const pos = el._position || { x: 0, y: 0 };
-    const w = el._cachedW || el.offsetWidth || 180;
-    const h = el._cachedH || el.offsetHeight || 60;
-    if (el._previewRaf) clearTimeout(el._previewRaf);
-    if (el._drag) el._drag.destroy();
-    el.remove();
-    this.#nodeViews.delete(nodeId);
-    this.#selector.getSelectedNodes().delete(nodeId);
-    return { x: pos.x, y: pos.y, w, h };
-  }
-
-  // --- Private helpers ---
-
-
-
-
-  #autoSelectOnDragStart(nodeId, e) {
-    if (!this.#selector.isNodeSelected(nodeId)) {
-      const accumulate = e.ctrlKey || e.metaKey;
-      this.#selector.selectNode(nodeId, accumulate);
-    }
-    this.#bringToFront(nodeId);
-  }
-
-  /**
-   * Bring a node to front by setting highest z-index
-   * @param {string} nodeId
-   */
-  #bringToFront(nodeId) {
-    const el = this.#nodeViews.get(nodeId);
-    if (el) {
-      el.style.zIndex = ++this.#zCounter;
-    }
-  }
-
-  /**
-   * Apply lift effect: scale up + shadow + parallax offset
-   * @param {HTMLElement} el
-   */
-  #applyLift(el) {
-    el.classList.add('sn-node-lifted');
-  }
-
-  /**
-   * Remove lift effect on drop
-   * @param {HTMLElement} el
-   */
-  #removeLift(el) {
-    el.classList.remove('sn-node-lifted');
-  }
-
-  #captureDragStartPositions() {
-    const selected = this.#selector.getSelectedNodes();
-    for (const id of selected) {
-      const nodeEl = this.#nodeViews.get(id);
-      if (nodeEl) nodeEl._dragStartPos = { ...nodeEl._position };
-    }
-  }
-
-  #handleGroupTranslate(nodeId, el, x, y) {
-    let finalX = x;
-    let finalY = y;
-
-    if (this.#snapEnabled && this.#snapGrid.isDynamic) {
-      const snapped = this.#snapGrid.snap(x, y);
-      finalX = snapped.x;
-      finalY = snapped.y;
-    }
-
-    const prev = el._dragStartPos || el._position;
-    const dx = finalX - prev.x;
-    const dy = finalY - prev.y;
-
-    const selected = this.#selector.getSelectedNodes();
-    if (selected.size > 1 && selected.has(nodeId)) {
-      for (const id of selected) {
-        const nodeEl = this.#nodeViews.get(id);
-        if (!nodeEl?._dragStartPos) continue;
-        let nx = nodeEl._dragStartPos.x + dx;
-        let ny = nodeEl._dragStartPos.y + dy;
-        if (this.#snapEnabled && this.#snapGrid.isDynamic) {
-          const snapped = this.#snapGrid.snap(nx, ny);
-          nx = snapped.x;
-          ny = snapped.y;
-        }
-        this.#setNodePosition(id, nx, ny);
-      }
-    } else {
-      this.#setNodePosition(nodeId, finalX, finalY);
-    }
-
-    this.#editor.emit('nodetranslated', { id: nodeId, position: { x: finalX, y: finalY } });
-  }
-
-  #handleDrop(nodeId, el, e, dragStart) {
-    // Static snap on drop
-    if (this.#snapEnabled && !this.#snapGrid.isDynamic) {
-      const selected = this.#selector.getSelectedNodes();
-      const targets = selected.size > 0 && selected.has(nodeId) ? selected : new Set([nodeId]);
-      for (const id of targets) {
-        const nodeEl = this.#nodeViews.get(id);
-        if (!nodeEl) continue;
-        const snapped = this.#snapGrid.snap(nodeEl._position.x, nodeEl._position.y);
-        this.#animateNodeToPosition(id, snapped.x, snapped.y);
-      }
-    }
-
-    // Clean up start positions
-    for (const [, nodeEl] of this.#nodeViews) {
-      delete nodeEl._dragStartPos;
-    }
-
-    // Remove lift effect
-    this.#removeLift(el);
-
-    // Click vs drag detection
-    if (dragStart && e && Selector.isTwitch(dragStart, { x: e.pageX, y: e.pageY })) {
-      this.#onNodeClick(nodeId, e);
-    }
-
-    this.#editor.emit('nodedragged', { id: nodeId });
-  }
-
-  /**
-   * Initialize subgraph preview canvas inside a graph-node
-   * @param {HTMLElement} el - graph-node element
-   * @param {import('../core/SubgraphNode.js').SubgraphNode} node
-   * @param {HTMLCanvasElement} canvas - pre-created canvas element (already in DOM)
-   */
-  #initSubgraphPreview(el, node, canvas) {
-    const ctx = canvas.getContext('2d');
-
-    const drawPreview = () => {
-      if (!el.isConnected) return;
-
-      const w = canvas.width;
-      const h = canvas.height;
-      ctx.clearRect(0, 0, w, h);
-
-      const innerEditor = node.innerEditor;
-      if (!innerEditor) return;
-
-      const nodes = innerEditor.getNodes();
-      if (nodes.length === 0) return;
-
-      // Get positions (from saved or auto-grid)
-      const positions = node.innerPositions;
-      const nodeRects = [];
-
-      for (const n of nodes) {
-        const pos = positions[n.id];
-        const x = pos ? pos.x : 0;
-        const y = pos ? pos.y : 0;
-        nodeRects.push({ x, y, w: 160, h: 60, id: n.id });
-      }
-
-      // Calculate bounds
-      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-      for (const r of nodeRects) {
-        minX = Math.min(minX, r.x);
-        minY = Math.min(minY, r.y);
-        maxX = Math.max(maxX, r.x + r.w);
-        maxY = Math.max(maxY, r.y + r.h);
-      }
-
-      const pad = 30;
-      minX -= pad; minY -= pad;
-      maxX += pad; maxY += pad;
-
-      const graphW = maxX - minX;
-      const graphH = maxY - minY;
-      const scale = Math.min(w / graphW, h / graphH);
-      const offsetX = (w - graphW * scale) / 2;
-      const offsetY = (h - graphH * scale) / 2;
-
-      // Flow state map: nodeId -> 'processing' | 'completed'
-      const states = el._innerFlowStates || {};
-
-      // Draw connections as lines
-      const conns = innerEditor.getConnections();
-      for (const conn of conns) {
-        const src = nodeRects.find(r => r.id === conn.from);
-        const tgt = nodeRects.find(r => r.id === conn.to);
-        if (src && tgt) {
-          const sx = (src.x + src.w - minX) * scale + offsetX;
-          const sy = (src.y + src.h / 2 - minY) * scale + offsetY;
-          const tx = (tgt.x - minX) * scale + offsetX;
-          const ty = (tgt.y + tgt.h / 2 - minY) * scale + offsetY;
-
-          // Flowing connection: source completed
-          const srcState = states[conn.from];
-          if (srcState === 'completed') {
-            ctx.strokeStyle = 'rgba(92, 216, 122, 0.5)';
-            ctx.lineWidth = 2;
-          } else {
-            ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
-            ctx.lineWidth = 1;
-          }
-
-          ctx.beginPath();
-          ctx.moveTo(sx, sy);
-          ctx.lineTo(tx, ty);
-          ctx.stroke();
-        }
-      }
-
-      // Draw node rectangles with flow state
-      for (const r of nodeRects) {
-        const rx = (r.x - minX) * scale + offsetX;
-        const ry = (r.y - minY) * scale + offsetY;
-        const rw = r.w * scale;
-        const rh = r.h * scale;
-        const state = states[r.id];
-        const radius = 4;
-
-        // Rounded rect helper
-        ctx.beginPath();
-        ctx.moveTo(rx + radius, ry);
-        ctx.lineTo(rx + rw - radius, ry);
-        ctx.quadraticCurveTo(rx + rw, ry, rx + rw, ry + radius);
-        ctx.lineTo(rx + rw, ry + rh - radius);
-        ctx.quadraticCurveTo(rx + rw, ry + rh, rx + rw - radius, ry + rh);
-        ctx.lineTo(rx + radius, ry + rh);
-        ctx.quadraticCurveTo(rx, ry + rh, rx, ry + rh - radius);
-        ctx.lineTo(rx, ry + radius);
-        ctx.quadraticCurveTo(rx, ry, rx + radius, ry);
-        ctx.closePath();
-
-        if (state === 'processing') {
-          ctx.fillStyle = 'rgba(74, 158, 255, 0.25)';
-          ctx.fill();
-          ctx.strokeStyle = 'rgba(74, 158, 255, 0.8)';
-          ctx.lineWidth = 1.5;
-          ctx.stroke();
-          // Glow effect
-          ctx.shadowColor = 'rgba(74, 158, 255, 0.6)';
-          ctx.shadowBlur = 8;
-          ctx.stroke();
-          ctx.shadowBlur = 0;
-        } else if (state === 'completed') {
-          ctx.fillStyle = 'rgba(92, 216, 122, 0.2)';
-          ctx.fill();
-          ctx.strokeStyle = 'rgba(92, 216, 122, 0.7)';
-          ctx.lineWidth = 1;
-          ctx.stroke();
-        } else {
-          ctx.fillStyle = 'rgba(255, 255, 255, 0.08)';
-          ctx.fill();
-          ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
-          ctx.lineWidth = 0.5;
-          ctx.stroke();
-        }
-      }
-    };
-
-    // Expose redraw for external triggering (FlowSimulator)
-    el._redrawPreview = drawPreview;
-
-    // Draw once. Re-draw on demand via el._redrawPreview().
-    drawPreview();
-  }
-}

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

@@ -1,131 +0,0 @@
-export class PinExpansion {
-  /** @type {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} */
-  #canvas;
-  
-  /** @type {Map<string, Array<object>>} Cache of pins per nodeId */
-  #pinCache = new Map();
-
-  /** @type {Function} Callback when a pin is clicked */
-  #onPinClick;
-
-  /**
-   * @param {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} canvas
-   * @param {object} config
-   * @param {Function} [config.onPinClick]
-   */
-  constructor(canvas, { onPinClick } = {}) {
-    this.#canvas = canvas;
-    this.#onPinClick = onPinClick || (() => {});
-  }
-
-  /**
-   * Add pins data for a specific node
-   * @param {string} nodeId 
-   * @param {Array<object>} pins 
-   */
-  setPins(nodeId, pins) {
-    if (pins && pins.length > 0) {
-      this.#pinCache.set(nodeId, pins);
-    } else {
-      this.#pinCache.delete(nodeId);
-    }
-  }
-
-  clearPins() {
-    this.#pinCache.clear();
-  }
-
-  /**
-   * Remove pins and overlay for a node
-   * @param {string} nodeId 
-   */
-  removePins(nodeId) {
-    this.#pinCache.delete(nodeId);
-    const el = this.#canvas.getNodeView?.(nodeId);
-    if (!el) return;
-    const overlay = el.querySelector('.pcb-pin-overlay');
-    if (overlay) overlay.remove();
-  }
-
-  /**
-   * Apply LOD state to render or hide pins
-   * @param {'expanded'|'collapsed'} lod 
-   */
-  applyLOD(lod) {
-    if (!this.#canvas) return;
-
-    for (const [nodeId, pins] of this.#pinCache) {
-      const el = this.#canvas.getNodeView?.(nodeId);
-      if (!el) continue;
-
-      if (lod === 'expanded') {
-        this.#renderPinsForNode(el, pins);
-      } else {
-        const overlay = el.querySelector('.pcb-pin-overlay');
-        if (overlay) overlay.removeAttribute('data-visible');
-      }
-    }
-  }
-
-  /**
-   * Render pin labels around a node element's border
-   * @param {HTMLElement} el 
-   * @param {Array<object>} pins 
-   */
-  #renderPinsForNode(el, pins) {
-    if (!pins || pins.length === 0) return;
-
-    // Create or reuse pin overlay
-    let overlay = el.querySelector('.pcb-pin-overlay');
-    if (!overlay) {
-      overlay = document.createElement('div');
-      overlay.className = 'pcb-pin-overlay';
-      el.appendChild(overlay);
-    }
-
-    // Prepare pins if they are empty
-    if (overlay.children.length === 0) {
-      const maxPins = Math.min(pins.length, 12);
-      const half = Math.ceil(maxPins / 2);
-      const nodeId = el.getAttribute('node-id');
-
-      const createPinEl = (pin, side, yPct) => {
-        const pinEl = document.createElement('span');
-        pinEl.className = 'pcb-pin';
-        pinEl.setAttribute('data-side', side);
-        if (pin.kind) pinEl.setAttribute('data-kind', pin.kind);
-
-        const suffix = pin.line ? ` :${pin.line}` : '';
-        const label = pin.label || pin.name || '';
-        pinEl.textContent = label + suffix;
-        pinEl.style.top = `${yPct}%`;
-
-        if (pin.interactable !== false) {
-          pinEl.style.cursor = 'pointer';
-          pinEl.title = pin.tooltip || (pin.line ? `${pin.file || ''}:${pin.line}` : (pin.file || ''));
-          pinEl.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.#onPinClick(pin, nodeId);
-          });
-        }
-
-        return pinEl;
-      };
-
-      // Right side: first half
-      for (let i = 0; i < half; i++) {
-        const yPct = ((i + 1) / (half + 1)) * 100;
-        overlay.appendChild(createPinEl(pins[i], 'right', yPct));
-      }
-
-      // Left side: remaining
-      for (let i = half; i < maxPins; i++) {
-        const yPct = ((i - half + 1) / (maxPins - half + 1)) * 100;
-        overlay.appendChild(createPinEl(pins[i], 'left', yPct));
-      }
-    }
-
-    // Animate in
-    requestAnimationFrame(() => overlay.setAttribute('data-visible', ''));
-  }
-}