symbiote-ui 0.3.0-alpha.4

package/canvas/PinExpansion.js

@@ -0,0 +1,134 @@
+/* eslint-env browser */
+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);
+    let el = this.#canvas.getNodeView?.(nodeId);
+    if (!el) return;
+    let 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) {
+      let el = this.#canvas.getNodeView?.(nodeId);
+      if (!el) continue;
+
+      if (lod === 'expanded') {
+        this.#renderPinsForNode(el, pins);
+      } else {
+        let 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
+   * @returns {void}
+   */
+  #renderPinsForNode(el, pins) {
+    if (!pins || pins.length === 0) return;
+
+
+    let overlay = el.querySelector('.pcb-pin-overlay');
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.className = 'pcb-pin-overlay';
+      el.appendChild(overlay);
+    }
+
+
+    if (overlay.children.length === 0) {
+      let maxPins = Math.min(pins.length, 12);
+      let half = Math.ceil(maxPins / 2);
+      let nodeId = el.getAttribute('node-id');
+
+      let createPinEl = (pin, side, yPct) => {
+        let pinEl = document.createElement('span');
+        pinEl.className = 'pcb-pin';
+        pinEl.setAttribute('data-side', side);
+        if (pin.kind) pinEl.setAttribute('data-kind', pin.kind);
+
+        let suffix = pin.line ? ` :${pin.line}` : '';
+        let 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;
+      };
+
+
+      for (let i = 0; i < half; i++) {
+        let yPct = ((i + 1) / (half + 1)) * 100;
+        overlay.appendChild(createPinEl(pins[i], 'right', yPct));
+      }
+
+
+      for (let i = half; i < maxPins; i++) {
+        let yPct = ((i - half + 1) / (maxPins - half + 1)) * 100;
+        overlay.appendChild(createPinEl(pins[i], 'left', yPct));
+      }
+    }
+
+
+    requestAnimationFrame(() => overlay.setAttribute('data-visible', ''));
+  }
+}

package/canvas/PseudoConnection.js

@@ -0,0 +1,84 @@
+/* eslint-env browser */
+/**
+ * PseudoConnection — temporary connection line during drag
+ *
+ * Renders dashed Bézier path + plus indicator at endpoint.
+ * Extracted from NodeCanvas to reduce complexity.
+ *
+ * @module symbiote-node/canvas/PseudoConnection
+ */
+
+export class PseudoConnection {
+  /** @type {SVGPathElement|null} */
+  #path = null;
+
+  /** @type {SVGGElement|null} */
+  #plusIndicator = null;
+
+  /** @type {SVGElement} */
+  #svg;
+
+  /**
+   * @param {SVGElement} svgLayer - pseudo SVG overlay
+   */
+  constructor(svgLayer) {
+    this.#svg = svgLayer;
+  }
+
+  /**
+   * Show pseudo-connection between two world-space points.
+   * pseudo-svg is inside .content which applies CSS transform (zoom+pan),
+   * so coordinates must be in world-space (same as ConnectionRenderer dots).
+   * @param {number} sx - Start X (world space)
+   * @param {number} sy - Start Y (world space)
+   * @param {number} ex - End X (world space)
+   * @param {number} ey - End Y (world space)
+   */
+  show(sx, sy, ex, ey) {
+    if (!this.#path) {
+      this.#path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      this.#path.setAttribute('class', 'pseudo-path');
+      this.#svg.appendChild(this.#path);
+    }
+
+    let dx = Math.abs(ex - sx) * 0.5;
+    let d = `M ${sx} ${sy} C ${sx + dx} ${sy}, ${ex - dx} ${ey}, ${ex} ${ey}`;
+    this.#path.setAttribute('d', d);
+
+
+    if (!this.#plusIndicator) {
+      let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      g.setAttribute('class', 'plus-indicator');
+      let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+      circle.setAttribute('r', '8');
+      let h = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      h.setAttribute('x1', '-4');
+      h.setAttribute('y1', '0');
+      h.setAttribute('x2', '4');
+      h.setAttribute('y2', '0');
+      let v = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      v.setAttribute('x1', '0');
+      v.setAttribute('y1', '-4');
+      v.setAttribute('x2', '0');
+      v.setAttribute('y2', '4');
+      g.appendChild(circle);
+      g.appendChild(h);
+      g.appendChild(v);
+      this.#svg.appendChild(g);
+      this.#plusIndicator = g;
+    }
+    this.#plusIndicator.setAttribute('transform', `translate(${ex}, ${ey})`);
+  }
+
+  /** Hide and clean up pseudo-connection */
+  hide() {
+    if (this.#path) {
+      this.#path.remove();
+      this.#path = null;
+    }
+    if (this.#plusIndicator) {
+      this.#plusIndicator.remove();
+      this.#plusIndicator = null;
+    }
+  }
+}

package/canvas/SelectionSync.js

@@ -0,0 +1,163 @@
+/**
+ * SelectionSync.js
+ *
+ * Synchronizes the canvas DOM state (nodes, connections, inspector, toolbar)
+ * with the internal Selector state.
+ *
+ * @module symbiote-node/canvas/SelectionSync
+ */
+
+export class SelectionSync {
+  /** @type {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} */
+  #canvas;
+  /** @type {function(): import('../core/Editor.js').NodeEditor} */
+  #getEditor;
+  /** @type {Map<string, HTMLElement>} */
+  #nodeViews;
+  /** @type {function(): import('./ConnectionRenderer.js').ConnectionRenderer} */
+  #getConnRenderer;
+
+  #zCounter = 0;
+  #connPathCache = new Map();
+
+  /**
+   * @param {object} options
+   * @param {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} options.canvas
+   * @param {function(): import('../core/Editor.js').NodeEditor} options.getEditor
+   * @param {Map<string, HTMLElement>} options.nodeViews
+   * @param {function(): import('./ConnectionRenderer.js').ConnectionRenderer} options.getConnRenderer
+   */
+  constructor({ canvas, getEditor, nodeViews, getConnRenderer }) {
+    this.#canvas = canvas;
+    this.#getEditor = getEditor;
+    this.#nodeViews = nodeViews;
+    this.#getConnRenderer = getConnRenderer;
+  }
+
+  /**
+   * Synchronize DOM when selection changes
+   * @param {Set<string>} selectedNodes
+   * @param {Set<string>} selectedConnections
+   */
+  sync(selectedNodes, selectedConnections) {
+    this.#zCounter++;
+    let editor = this.#getEditor();
+
+
+    let neighbors = new Set();
+    if (editor && selectedNodes.size > 0) {
+      for (const conn of editor.getConnections()) {
+        if (selectedNodes.has(conn.from)) neighbors.add(conn.to);
+        if (selectedNodes.has(conn.to)) neighbors.add(conn.from);
+      }
+    }
+
+
+    for (const [id, el] of this.#nodeViews) {
+      let shouldSelect = selectedNodes.has(id);
+      let isSelected = el.hasAttribute('data-selected');
+      if (shouldSelect && !isSelected) {
+        el.setAttribute('data-selected', '');
+        el.style.zIndex = this.#zCounter;
+      } else if (!shouldSelect && isSelected) {
+        el.removeAttribute('data-selected');
+      }
+
+      let shouldNeighbor = neighbors.has(id) && !shouldSelect;
+      let isNeighbor = el.hasAttribute('data-neighbor-focused');
+      if (shouldNeighbor && !isNeighbor) {
+        el.setAttribute('data-neighbor-focused', '');
+      } else if (!shouldNeighbor && isNeighbor) {
+        el.removeAttribute('data-neighbor-focused');
+      }
+    }
+
+
+    let activeConnIds = new Set();
+    if (editor && selectedNodes.size > 0) {
+      for (const conn of editor.getConnections()) {
+        if (selectedNodes.has(conn.from) || selectedNodes.has(conn.to)) {
+          activeConnIds.add(conn.id);
+        }
+      }
+    }
+
+
+    let connSvg = this.#canvas.ref.connections;
+    let connRenderer = this.#getConnRenderer();
+    if (!this.#connPathCache) this.#connPathCache = new Map();
+    for (const [id] of connRenderer?.data || []) {
+      let path = this.#connPathCache.get(id);
+      if (!path || !path.isConnected) {
+        path = connSvg.querySelector(`[data-conn-id="${id}"]`);
+        if (path) this.#connPathCache.set(id, path);
+      }
+      if (!path) continue;
+
+
+      let shouldSelectConn = selectedConnections.has(id);
+      if (shouldSelectConn !== path.hasAttribute('data-selected')) {
+        shouldSelectConn
+          ? path.setAttribute('data-selected', '')
+          : path.removeAttribute('data-selected');
+      }
+
+
+      let isActive = activeConnIds.has(id);
+      if (isActive !== path.hasAttribute('data-active-conn')) {
+        isActive
+          ? path.setAttribute('data-active-conn', '')
+          : path.removeAttribute('data-active-conn');
+      }
+
+
+      let shouldDim = !isActive && selectedNodes.size > 0;
+      if (shouldDim !== path.hasAttribute('data-dimmed')) {
+        shouldDim ? path.setAttribute('data-dimmed', '') : path.removeAttribute('data-dimmed');
+      }
+    }
+
+
+    if (connRenderer && typeof connRenderer.setSelectionState === 'function') {
+      connRenderer.setSelectionState(selectedNodes.size > 0, activeConnIds);
+    }
+
+
+    let toolbar = this.#canvas.ref.quickToolbar;
+    if (toolbar) {
+      if (selectedNodes.size === 1) {
+        let nodeId = [...selectedNodes][0];
+        let nodeEl = this.#nodeViews.get(nodeId);
+        if (nodeEl) toolbar.show(nodeId, nodeEl, { sticky: true });
+      } else {
+        toolbar.hide();
+      }
+    }
+
+
+    let inspector = this.#canvas.ref.inspector;
+    if (inspector) {
+      inspector._canvas = this.#canvas;
+      if (selectedNodes.size === 1) {
+        let nodeId = [...selectedNodes][0];
+        let node = editor?.getNode(nodeId);
+        if (node) {
+          inspector.inspect(node);
+          inspector.hidden = false;
+        }
+      } else {
+        inspector.clear();
+        inspector.hidden = true;
+      }
+    }
+
+
+    this.#canvas.dispatchEvent(
+      new CustomEvent('selection-changed', {
+        detail: { nodes: [...selectedNodes], connections: [...selectedConnections] },
+      })
+    );
+  }
+}
+
+export { SelectionSync as default };

package/canvas/SubgraphManager.js

@@ -0,0 +1,203 @@
+/**
+ * SubgraphManager — Navigation stack for subgraph drill-down
+ *
+ * Manages a stack of editor contexts. When drilling into a subgraph,
+ * the current state is saved and the inner editor is loaded.
+ * Breadcrumb navigation allows jumping back to any level.
+ *
+ * @module symbiote-node/canvas/SubgraphManager
+ */
+
+/**
+ * @typedef {Object} NavEntry
+ * @property {import('../core/Editor.js').NodeEditor} editor
+ * @property {Object<string, { x: number, y: number }>} positions
+ * @property {{ panX: number, panY: number, zoom: number }} transform
+ * @property {string} label - Display label for breadcrumb
+ * @property {string|null} subgraphNodeId - SubgraphNode ID in parent (null for root)
+ */
+
+export class SubgraphManager {
+  /** @type {NavEntry[]} */
+  #stack = [];
+
+  /** @type {import('./NodeCanvas.js').NodeCanvas|null} */
+  #canvas = null;
+
+  /** @type {function|null} */
+  #onNavigate = null;
+
+  /**
+   * Initialize with canvas and root editor
+   * @param {*} canvas - NodeCanvas element
+   * @param {import('../core/Editor.js').NodeEditor} rootEditor
+   */
+  initialize(canvas, rootEditor) {
+    this.#canvas = canvas;
+    this.#stack = [
+      {
+        editor: rootEditor,
+        positions: {},
+        transform: { panX: 0, panY: 0, zoom: 1 },
+        label: 'Root',
+        subgraphNodeId: null,
+      },
+    ];
+  }
+
+  /**
+   * Set navigation callback (for breadcrumb updates)
+   * @param {function} callback - (path: string[]) => void
+   */
+  onNavigate(callback) {
+    this.#onNavigate = callback;
+  }
+
+  /**
+   * Drill down into a SubgraphNode
+   * @param {import('../core/SubgraphNode.js').SubgraphNode} subgraphNode
+   */
+  drillDown(subgraphNode) {
+    if (!subgraphNode?._isSubgraph || !this.#canvas) return;
+
+
+    let current = this.#stack[this.#stack.length - 1];
+    current.positions = this.#capturePositions(current.editor, current.positions);
+    current.transform = this.#captureTransform();
+
+
+    this.#stack.push({
+      editor: subgraphNode.getInnerEditor(),
+      positions: subgraphNode.innerPositions,
+      transform: subgraphNode.innerTransform,
+      label: subgraphNode.label,
+      subgraphNodeId: subgraphNode.id,
+    });
+
+
+    this.#applyLevel(this.#stack.length - 1);
+    this.#notifyNavigate();
+  }
+
+  /**
+   * Navigate up to a specific level
+   * @param {number} level - 0 = root
+   */
+  drillUp(level) {
+    if (level === undefined) level = this.#stack.length - 2;
+    if (level < 0 || level >= this.#stack.length || !this.#canvas) return;
+
+
+    for (let i = this.#stack.length - 1; i > level; i--) {
+      let entry = this.#stack[i];
+      let parentEntry = this.#stack[i - 1];
+      if (entry.subgraphNodeId) {
+        let subNode = parentEntry.editor.getNode(entry.subgraphNodeId);
+        if (subNode?._isSubgraph) {
+          subNode.setInnerPositions(this.#capturePositions(entry.editor, entry.positions));
+          subNode.setInnerTransform(entry.transform);
+        }
+      }
+    }
+
+
+    let currentEntry = this.#stack[this.#stack.length - 1];
+    currentEntry.positions = this.#capturePositions(currentEntry.editor, currentEntry.positions);
+    currentEntry.transform = this.#captureTransform();
+
+
+    this.#stack.length = level + 1;
+
+
+    this.#applyLevel(level);
+    this.#notifyNavigate();
+  }
+
+  /**
+   * Get current breadcrumb path
+   * @returns {Array<{ label: string, level: number }>}
+   */
+  getPath() {
+    return this.#stack.map((entry, i) => ({
+      label: entry.label,
+      level: i,
+    }));
+  }
+
+  /**
+   * Get current depth (0 = root)
+   * @returns {number}
+   */
+  get depth() {
+    return this.#stack.length - 1;
+  }
+
+  /**
+   * Get current editor
+   * @returns {import('../core/Editor.js').NodeEditor}
+   */
+  get currentEditor() {
+    return this.#stack[this.#stack.length - 1].editor;
+  }
+
+  /**
+   * Apply a stack level to the canvas
+   * @param {number} level
+   */
+  #applyLevel(level) {
+    let entry = this.#stack[level];
+    if (!entry || !this.#canvas) return;
+
+
+    this.#canvas.setEditor(entry.editor);
+
+
+    for (const [nodeId, pos] of Object.entries(entry.positions)) {
+      this.#canvas.setNodePosition(nodeId, pos.x, pos.y);
+    }
+
+
+    this.#canvas.$.panX = entry.transform.panX;
+    this.#canvas.$.panY = entry.transform.panY;
+    this.#canvas.$.zoom = entry.transform.zoom;
+  }
+
+  /**
+   * Capture current node positions from editor.
+   * Falls back to existing entry positions when DOM elements
+   * have already been cleared (e.g. during setEditor transitions).
+   * @param {import('../core/Editor.js').NodeEditor} editor
+   * @param {Object<string, { x: number, y: number }>} [fallback={}]
+   * @returns {Object<string, { x: number, y: number }>}
+   */
+  #capturePositions(editor, fallback = {}) {
+    let positions = { ...fallback };
+    if (!this.#canvas) return positions;
+    for (const node of editor.getNodes()) {
+      let el = this.#canvas.getNodeView?.(node.id);
+      if (el?._position) {
+        positions[node.id] = { ...el._position };
+      }
+    }
+    return positions;
+  }
+
+  /**
+   * Capture current viewport transform
+   * @returns {{ panX: number, panY: number, zoom: number }}
+   */
+  #captureTransform() {
+    if (!this.#canvas) return { panX: 0, panY: 0, zoom: 1 };
+    return {
+      panX: this.#canvas.$.panX ?? 0,
+      panY: this.#canvas.$.panY ?? 0,
+      zoom: this.#canvas.$.zoom ?? 1,
+    };
+  }
+
+  #notifyNavigate() {
+    if (this.#onNavigate) {
+      this.#onNavigate(this.getPath());
+    }
+  }
+}