project-graph-mcp 2.2.6 → 2.3.0

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

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

@@ -0,0 +1,131 @@
+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', ''));
+  }
+}