@luispm/zflow-graph 0.1.0

package/dist/zflow.umd.js

@@ -0,0 +1,4375 @@
+/*! @luispm/zflow-graph v0.1.0 | MIT | (c) 2026 */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ZFlow = {}));
+})(this, (function (exports) { 'use strict';
+
+  // zflow — node-edge graph editor library (full version).
+  //
+  // Single ES module. Consumers do:
+  //   import { ZFlow } from './dist/zflow.js';
+  //   const flow = await ZFlow.create({ container, wasmUrl });
+  //
+  // Wraps a Zig WASM core (~200 KB) and a Canvas2D renderer. JS holds typed-
+  // array views over WASM linear memory for zero-copy reads. The memory
+  // contract: WASM allocates everything at init time and never grows again,
+  // so the views remain valid for the life of the instance.
+
+  // ── Default kinds shipped with the library ─────────────────────────────────
+  // Minimal flow primitives. Consumers extend with registerKind() for domain-
+  // specific kinds (service, database, queue, etc.).
+  const DEFAULT_KINDS = [
+    { name: 'input',      color: '#5b8def', badge: 'I', w: 140, h: 60,  nin: 0, nout: 1, shape: 'rect' },
+    { name: 'process',    color: '#e8b04b', badge: 'P', w: 160, h: 80,  nin: 1, nout: 1, shape: 'rect' },
+    { name: 'filter',     color: '#5be0d0', badge: 'F', w: 160, h: 80,  nin: 1, nout: 1, shape: 'rect' },
+    { name: 'decision',   color: '#c062e8', badge: 'D', w: 130, h: 130, nin: 1, nout: 2, shape: 'diamond' },
+    { name: 'output',     color: '#5bd17a', badge: 'O', w: 140, h: 60,  nin: 1, nout: 0, shape: 'rect' },
+    { name: 'aggregator', color: '#f0b93a', badge: '∑', w: 160, h: 120, nin: 3, nout: 1, shape: 'hexagon' },
+    { name: 'branch',     color: '#e8462b', badge: 'B', w: 130, h: 130, nin: 1, nout: 3, shape: 'ellipse' },
+    // Built-in control-flow kinds (execute-enabled).
+    { name: 'if', color: '#c062e8', badge: '?', w: 150, h: 70, nin: 1, nout: 2, shape: 'diamond',
+      portIn: ['value'], portOut: ['true', 'false'],
+      execute: (ctx, ins) => {
+        const v = ins.value ?? ins[0];
+        const cond = ctx.params?.condition;
+        let ok;
+        if (typeof cond === 'function') ok = cond(v);
+        else if (typeof cond === 'string') {
+          // Serializable: condition is a JS expression where `value` and `v` are bound.
+          try { ok = Function('value', 'v', `"use strict"; return (${cond});`)(v, v); }
+          catch { ok = false; }
+        } else ok = Boolean(v);
+        return ok ? { true: v } : { false: v };
+      },
+    },
+    { name: 'forEach', color: '#5be0d0', badge: '↻', w: 160, h: 70, nin: 1, nout: 1, shape: 'rect',
+      portIn: ['array'], portOut: ['item'],
+      execute: async (ctx, ins) => {
+        const arr = ins.array ?? ins[0] ?? [];
+        if (!Array.isArray(arr) || arr.length === 0) return null;
+        for (let i = 0; i < arr.length; i++) {
+          if (ctx.signal.aborted) return;
+          ctx.setProgress((i + 1) / arr.length);
+          ctx.emit({ item: arr[i] });
+          await new Promise((r) => setTimeout(r, 30));
+        }
+        return { item: arr[arr.length - 1] };
+      },
+    },
+    { name: 'const', color: '#8b95a7', badge: 'K', w: 130, h: 56, nin: 0, nout: 1, shape: 'rect',
+      portOut: ['value'],
+      execute: (ctx) => ({ value: ctx.params?.value ?? 0 }),
+    },
+    { name: 'log', color: '#5b8def', badge: '◷', w: 160, h: 60, nin: 1, nout: 0, shape: 'rect',
+      portIn: ['value'],
+      execute: (ctx, ins) => { ctx.log(ins.value ?? ins[0]); return { received: ins.value ?? ins[0] }; },
+    },
+  ];
+
+  const DARK_THEME = {
+    bg: '#07090f', panel: 'rgba(20,28,40,0.92)', border: 'rgba(255,255,255,0.10)',
+    fg: '#e6edf3', muted: '#8b95a7', accent: '#f0b93a', hi: 'rgba(240,185,58,0.10)',
+    grid: 'rgba(255,255,255,0.04)', gridDot: 'rgba(255,255,255,0.10)',
+  };
+  const LIGHT_THEME = {
+    bg: '#f6f8fb', panel: 'rgba(255,255,255,0.96)', border: 'rgba(0,0,0,0.10)',
+    fg: '#1d2330', muted: '#5a6577', accent: '#b8860b', hi: 'rgba(184,134,11,0.12)',
+    grid: 'rgba(0,0,0,0.04)', gridDot: 'rgba(0,0,0,0.16)',
+  };
+
+  const HANDLE_CORNERS = ['tl', 't', 'tr', 'r', 'br', 'b', 'bl', 'l'];
+  const HANDLE_LEFTS  = new Set(['l', 'tl', 'bl']);
+  const HANDLE_RIGHTS = new Set(['r', 'tr', 'br']);
+  const HANDLE_TOPS   = new Set(['t', 'tl', 'tr']);
+  const HANDLE_BOTS   = new Set(['b', 'bl', 'br']);
+  const HANDLE_CURSOR = {
+    tl: 'nwse-resize', br: 'nwse-resize',
+    tr: 'nesw-resize', bl: 'nesw-resize',
+    t:  'ns-resize',   b:  'ns-resize',
+    l:  'ew-resize',   r:  'ew-resize',
+  };
+
+  class ZFlow {
+    /** Async constructor — loads the WASM and prepares the canvas. */
+    static async create(opts) {
+      const flow = new ZFlow();
+      await flow._init(opts);
+      return flow;
+    }
+
+    // ── Lifecycle ─────────────────────────────────────────────────────────
+    async _init(opts) {
+      if (!opts || !opts.container) throw new Error('zflow: container is required');
+      this.container = opts.container;
+      this.options = Object.assign({
+        theme: 'dark', background: '#07090f',
+        edgeStyle: 'bezier', snapToGrid: false, gridSize: 20,
+        contextMenu: true, keyboard: true,
+        minimap: false, animateEdges: false, edgeFlowSpeed: 60,
+        commandPalette: true, search: true, inlineMarkdown: true,
+      }, opts);
+      this._theme = this.options.theme === 'light' ? LIGHT_THEME : DARK_THEME;
+      if (this.options.theme === 'light') this.options.background = this._theme.bg;
+
+      // Load WASM bytes.
+      let wasmBytes;
+      if (opts.wasmBytes) {
+        wasmBytes = opts.wasmBytes instanceof Uint8Array ? opts.wasmBytes : new Uint8Array(opts.wasmBytes);
+      } else if (opts.wasmUrl) {
+        wasmBytes = new Uint8Array(await (await fetch(opts.wasmUrl)).arrayBuffer());
+      } else {
+        throw new Error('zflow: pass either { wasmUrl } or { wasmBytes }');
+      }
+      const { instance } = await WebAssembly.instantiate(wasmBytes, {});
+      this.w = instance.exports;
+      if (this.w.init() === 0) throw new Error('zflow: WASM init OOM');
+
+      const cap = this.w.nodeCap();
+      const ecap = this.w.edgeCap();
+      this.V = {
+        posX:      new Float32Array(this.w.memory.buffer, this.w.posXPtr(),         cap),
+        posY:      new Float32Array(this.w.memory.buffer, this.w.posYPtr(),         cap),
+        sizeW:     new Float32Array(this.w.memory.buffer, this.w.sizeWPtr(),        cap),
+        sizeH:     new Float32Array(this.w.memory.buffer, this.w.sizeHPtr(),        cap),
+        kind:      new Uint8Array  (this.w.memory.buffer, this.w.kindPtr(),         cap),
+        nIn:       new Uint8Array  (this.w.memory.buffer, this.w.nInPtr(),          cap),
+        nOut:      new Uint8Array  (this.w.memory.buffer, this.w.nOutPtr(),         cap),
+        selected:  new Uint8Array  (this.w.memory.buffer, this.w.selectedPtr(),     cap),
+        edgeFromN: new Uint32Array (this.w.memory.buffer, this.w.edgeFromNodePtr(), ecap),
+        edgeToN:   new Uint32Array (this.w.memory.buffer, this.w.edgeToNodePtr(),   ecap),
+        edgeFromP: new Uint8Array  (this.w.memory.buffer, this.w.edgeFromPortPtr(), ecap),
+        edgeToP:   new Uint8Array  (this.w.memory.buffer, this.w.edgeToPortPtr(),   ecap),
+        edgeSel:   new Uint8Array  (this.w.memory.buffer, this.w.edgeSelectedPtr(), ecap),
+        queryRes:  new Uint32Array (this.w.memory.buffer, this.w.queryResultsPtr(), cap),
+      };
+
+      // Kinds + per-node JS overlays.
+      this.kinds = DEFAULT_KINDS.map((k) => ({ ...k }));
+      this.kindByName = new Map();
+      this.kinds.forEach((k, i) => this.kindByName.set(k.name, i));
+      this.titles = new Map();
+      this.colors = new Map();
+      this.descriptions = new Map();
+      this.tags = new Map();
+      this.status = new Map();
+      this.progress = new Map();
+      this.image = new Map();        // nodeId -> image url
+      this.checked = new Map();      // nodeId -> bool (optional checkbox)
+      this.tasks = new Map();        // nodeId -> [{text, done}]
+      this.icon = new Map();         // nodeId -> emoji/glyph
+      this.links = new Map();        // nodeId -> [{ url, label? }]
+      this.portIn = new Map();       // nodeId -> string[] (in port labels)
+      this.portOut = new Map();      // nodeId -> string[] (out port labels)
+      this.zOrder = new Map();       // nodeId -> z (default 0)
+      this.bookmarks = new Map();    // slot 1..9 -> nodeId
+      this.edgeLabels = new Map();
+      this._imageCache = new Map();  // url -> { img, ready }
+      this._nodeAddedAt = new Map(); // nodeId -> timestamp (pop animation)
+      this._dyingNodes = [];         // [{ x,y,w,h,kind,color,t0 }] for fade-out
+      this._dyingEdges = [];
+
+      // Notes (sticky annotations) — JS-only entities.
+      this.notes = [];               // [{ id, x, y, w, h, text, color }]
+      this._noteSeq = 0;
+      // Frames (groups) — JS-only entities.
+      this.frames = [];              // [{ id, x, y, w, h, label, color }]
+      this._frameSeq = 0;
+
+      // Canvas + camera.
+      this.canvas = document.createElement('canvas');
+      this.canvas.style.cssText = `display:block;width:100%;height:100%;background:${this.options.background};cursor:default;outline:none;touch-action:none;user-select:none;`;
+      this.canvas.tabIndex = 0;
+      this.container.style.position = this.container.style.position || 'relative';
+      this.container.appendChild(this.canvas);
+      this.ctx = this.canvas.getContext('2d', { alpha: false });
+      this.cam = { x: 0, y: 0, zoom: 1 };
+      this._panVel = { x: 0, y: 0, lastTs: 0 };
+      this._clipboard = null;
+      this._nudgeTimer = null;
+
+      // Interaction state.
+      this.listeners = new Map();
+      this._mode = 'idle';
+      this._dragStart = null;
+      this._dragLast = null;
+      this._hoveredNode = -1;
+      this._hoveredEdge = -1;
+      this._hoveredNodeSince = 0;
+      this._previewedNode = -1;
+      this._resizingHandle = null;
+      this._marquee = null;
+      this._lasso = null;
+      this._alignGuides = null;
+      this._edgeStart = null;
+      this._edgeCursor = null;
+      this._draggingNote = -1;
+      this._noteDragLast = null;
+      this._draggingFrame = -1;
+      this._frameDragLast = null;
+      this._resizingFrame = null;
+      this._editingNote = -1;
+      this._editingNoteEl = null;
+      this._editingTitle = -1;
+      this._editingTitleEl = null;
+      this._focusFrame = -1;          // subflow focus
+      this._htmlOverlays = new Map(); // nodeId -> DOM element
+      this._previewEl = null;
+      this._pathHighlightEnabled = false;
+      this._focusedSet = null;
+      this._lastFocusComputed = -2;
+
+      // Right-click menu element (lazy, removed on dispose).
+      this._menuEl = null;
+
+      // ── New: locks, read-only, snap, reachable, presence, palette ─────
+      this.locked = new Set();             // nodeId set — drag/resize blocked
+      this.readOnly = false;
+      this.snapToNodes = true;             // edge-alignment magnet to other nodes
+      this._reachableSet = null;           // Set<nodeId> from setReachableFrom
+      this.remoteCursors = new Map();      // userId -> { x, y, name, color, t }
+      this._edgeWaypoints = new Map();     // edgeIdx -> [{ x, y }] mid-bends
+      this._draggingWaypoint = null;       // { edgeIdx, wpIdx }
+      this.frameCollapsed = new Set();     // frameIdx set
+      this._paletteGhost = null;           // DOM element shown while dragging
+
+      // ── live metrics, animation, search, templates, validation ─────────
+      this.metrics = new Map();           // nodeId -> Float32Array rolling window
+      this.metricMax = new Map();         // nodeId -> max for normalization
+      this._metricCap = 32;
+      this.animatedEdges = new Set();     // edgeIdx set for per-edge animation
+      this._edgePhase = 0;                // global phase for flow particles
+      this._connValidator = null;         // fn(fromN, fromP, toN, toP) -> bool
+      this._templates = new Map();        // name -> { build(flow,x,y) }
+      this._searchEl = null; this._searchQuery = ''; this._searchHits = [];
+      this._cmdPaletteEl = null;
+      this._minimapEl = null;             // canvas overlay
+      this._minimapCtx = null;
+      this._historyThumbs = [];           // [{ png, t }] (best-effort)
+      if (this.options.minimap) this._setupMinimap();
+
+      // ── Plugin system ───────────────────────────────────────────────
+      this._plugins = [];
+      this._hooks = {
+        beforeRender: [], afterRender: [],
+        onNodeAdd: [], onNodeDelete: [], onEdgeAdd: [],
+        onBeforeExec: [], onAfterExec: [],
+        onConnect: [], onSelectionChange: [], onChange: [],
+      };
+
+      // ── Graph runtime (opt-in, dormant until first run) ───────────────
+      this._values = new Map();          // nodeId -> last output object
+      this._running = false;
+      this._runAbort = null;             // AbortController
+      this._runSeq = 0;
+      this._runOrder = null;             // cached topo order
+      this._execHooks = new Map();       // kindIdx -> execute fn
+      this._streamSrc = new Map();       // nodeId -> cancel fn
+      this._runStepDelay = 250;          // ms pause between nodes (visible by default)
+      this._valueBubbles = [];           // [{ nodeId, text, t0, dur }]
+      this._activeEdges = new Map();     // edgeIdx -> expiry timestamp
+      this._memoize = false;             // skip nodes whose inputs hash unchanged
+      this._memoKeys = new Map();        // nodeId -> last hash
+      this._retryStats = new Map();      // nodeId -> attempt count for current run
+      this.breakpoints = new Set();      // nodeId set — pause before exec
+      this._paused = false;              // step-through paused state
+      this._resumeNext = null;           // resolver to continue from paused state
+      this._stepMode = false;            // true → pause after each node
+      this._subflows = new Map();        // kindName -> { nodes, edges, inputs, outputs }
+
+      this._resize();
+      this._resizeObs = new ResizeObserver(() => this._resize());
+      this._resizeObs.observe(this.container);
+      this._attachEvents();
+      if (this.options.keyboard) this._attachKeyboard();
+      this._loop();
+    }
+
+    dispose() {
+      cancelAnimationFrame(this._raf);
+      this._resizeObs?.disconnect();
+      this.canvas?.remove();
+      this._menuEl?.remove();
+      if (this._keyHandler) window.removeEventListener('keydown', this._keyHandler);
+      this.listeners.clear();
+    }
+
+    // ── Public mutation API ───────────────────────────────────────────────
+    addNode(spec = {}) {
+      if (this.readOnly) return -1;
+      this._runOrder = null;
+      const k = this._resolveKind(spec.kind ?? 'process');
+      const cat = this.kinds[k];
+      const id = this.w.addNode(
+        spec.x ?? 0, spec.y ?? 0,
+        spec.w ?? cat.w, spec.h ?? cat.h,
+        k, spec.nin ?? cat.nin, spec.nout ?? cat.nout,
+      );
+      if (id < 0) return -1;
+      if (spec.title)       this.titles.set(id, spec.title);
+      if (spec.color)       this.colors.set(id, spec.color);
+      if (spec.description) this.descriptions.set(id, spec.description);
+      if (spec.tags)        this.tags.set(id, spec.tags.slice());
+      if (spec.status)      this.status.set(id, spec.status);
+      if (spec.progress !== undefined) this.progress.set(id, spec.progress);
+      if (spec.image)       this.image.set(id, spec.image);
+      if (spec.checked !== undefined) this.checked.set(id, !!spec.checked);
+      if (spec.tasks)       this.tasks.set(id, spec.tasks.map((t) => ({ ...t })));
+      if (spec.icon)        this.icon.set(id, spec.icon);
+      if (spec.links)       this.links.set(id, spec.links.map((l) => ({ ...l })));
+      if (spec.portIn)      this.portIn.set(id, spec.portIn.slice());
+      if (spec.portOut)     this.portOut.set(id, spec.portOut.slice());
+      if (spec.animate !== false) this._nodeAddedAt.set(id, performance.now());
+      if (this._hooks) this._runHook('onNodeAdd', id, spec);
+      this._emit('change');
+      return id;
+    }
+
+    /** Insert many nodes at once. Skips per-node emit/hook overhead; emits once at end. */
+    addNodesBulk(specs) {
+      if (this.readOnly) return [];
+      this._runOrder = null;
+      const ids = new Array(specs.length);
+      const wasSilent = this._suspendEvents; this._suspendEvents = true;
+      for (let i = 0; i < specs.length; i++) {
+        const s = specs[i];
+        const k = this._resolveKind(s.kind);
+        const id = this.w.addNode(k, s.x ?? 0, s.y ?? 0);
+        if (id < 0) { ids[i] = -1; continue; }
+        if (s.w !== undefined) this.V.sizeW[id] = s.w;
+        if (s.h !== undefined) this.V.sizeH[id] = s.h;
+        if (s.title) this.titles.set(id, s.title);
+        if (s.color) this.colors.set(id, s.color);
+        ids[i] = id;
+      }
+      this._suspendEvents = wasSilent;
+      if (this._gl) this._gl.markAllDirty();
+      this._emit('change');
+      return ids;
+    }
+
+    /** Insert many edges at once. */
+    addEdgesBulk(specs) {
+      if (this.readOnly) return [];
+      this._runOrder = null;
+      const ids = new Array(specs.length);
+      const wasSilent = this._suspendEvents; this._suspendEvents = true;
+      for (let i = 0; i < specs.length; i++) {
+        const s = specs[i];
+        ids[i] = this.w.addEdge(s.from, s.fp ?? 0, s.to, s.tp ?? 0);
+        if (s.label && ids[i] >= 0) this.edgeLabels.set(ids[i], s.label);
+      }
+      this._suspendEvents = wasSilent;
+      if (this._gl) this._gl.markAllDirty();
+      this._adjDirty = true;
+      this._emit('change');
+      return ids;
+    }
+
+    addEdge(spec = {}) {
+      if (this.readOnly) return -1;
+      this._runOrder = null;
+      this._adjDirty = true;
+      const eid = this.w.addEdge(spec.from, spec.fp ?? 0, spec.to, spec.tp ?? 0);
+      if (eid >= 0) {
+        if (spec.label) this.edgeLabels.set(eid, spec.label);
+        if (this._hooks) this._runHook('onEdgeAdd', eid, spec);
+        this._emit('change');
+      }
+      return eid;
+    }
+
+    moveNode(id, x, y) { this.w.moveNode(id, x, y); this._emit('change'); }
+    _guardWrite() { return !this.readOnly; }
+
+    deleteSelection() {
+      if (this.readOnly) return;
+      this._runOrder = null;
+      // Capture dying entities for fade-out before WASM compacts the arrays.
+      this._captureDying();
+      const n = this.w.deleteSelected();
+      if (n > 0) { this.w.snapshot(); this._emit('change'); }
+      return n;
+    }
+    _captureDying() {
+      const now = performance.now();
+      const nodeWillDie = new Uint8Array(this.w.nodeCount_());
+      for (let i = 0; i < this.w.nodeCount_(); i++) if (this.V.selected[i]) nodeWillDie[i] = 1;
+      for (let i = 0; i < this.w.nodeCount_(); i++) {
+        if (!nodeWillDie[i]) continue;
+        const cat = this.kinds[this.V.kind[i]];
+        this._dyingNodes.push({
+          x: this.V.posX[i], y: this.V.posY[i],
+          w: this.V.sizeW[i], h: this.V.sizeH[i],
+          shape: cat.shape, color: this.colors.get(i) || cat.color, t0: now,
+        });
+      }
+      for (let e = 0; e < this.w.edgeCount_(); e++) {
+        const a = this.V.edgeFromN[e], b = this.V.edgeToN[e];
+        if (!this.V.edgeSel[e] && !nodeWillDie[a] && !nodeWillDie[b]) continue;
+        const ap = this._portWorld(a, 1, this.V.edgeFromP[e]);
+        const bp = this._portWorld(b, 0, this.V.edgeToP[e]);
+        this._dyingEdges.push({
+          ap, bp,
+          colA: this.colors.get(a) || this.kinds[this.V.kind[a]].color,
+          colB: this.colors.get(b) || this.kinds[this.V.kind[b]].color,
+          t0: now,
+        });
+      }
+    }
+    duplicateSelection(dx = 40, dy = 40) {
+      const n = this.w.duplicateSelected(dx, dy);
+      if (n > 0) { this.w.snapshot(); this._emit('change'); }
+      return n;
+    }
+    setSelected(id, on) { this.w.setSelected(id, on ? 1 : 0); this._emit('select', this.getSelection()); }
+    toggleSelected(id) { this.w.toggleSelected(id); this._emit('select', this.getSelection()); }
+    clearSelection()   { this.w.clearSelection(); this._emit('select', []); }
+    selectAll()        { this.w.selectAll(); this._emit('select', this.getSelection()); }
+    getSelection() {
+      const out = [];
+      const n = this.w.nodeCount_();
+      for (let i = 0; i < n; i++) if (this.V.selected[i]) out.push(i);
+      return out;
+    }
+    nodeCount() { return this.w.nodeCount_(); }
+    edgeCount() { return this.w.edgeCount_(); }
+
+    // ── Per-node setters (public API) ─────────────────────────────────────
+    setNodeTitle(id, t)       { t ? this.titles.set(id, t)       : this.titles.delete(id);       this._emit('change'); }
+    setNodeColor(id, c)       { c ? this.colors.set(id, c)       : this.colors.delete(id);       this._emit('change'); }
+    setNodeDescription(id, d) { d ? this.descriptions.set(id, d) : this.descriptions.delete(id); this._emit('change'); }
+    setNodeTags(id, tags)     { (tags && tags.length) ? this.tags.set(id, tags.slice()) : this.tags.delete(id); this._emit('change'); }
+    setNodeStatus(id, s)      { s ? this.status.set(id, s)       : this.status.delete(id);       this._emit('change'); }
+    setNodeProgress(id, p)    { (p !== undefined && p !== null) ? this.progress.set(id, p) : this.progress.delete(id); this._emit('change'); }
+    setEdgeLabel(eid, label)  { label ? this.edgeLabels.set(eid, label) : this.edgeLabels.delete(eid); this._emit('change'); }
+    setEdgeStyle(style)       { this.options.edgeStyle = style === 'orthogonal' ? 'orthogonal' : 'bezier'; }
+    setSnapToGrid(on)         { this.options.snapToGrid = !!on; }
+    setNodeImage(id, url)     { url ? this.image.set(id, url) : this.image.delete(id); this._emit('change'); }
+    setNodeChecked(id, on)    { on === null || on === undefined ? this.checked.delete(id) : this.checked.set(id, !!on); this._emit('change'); }
+    setNodeTasks(id, list)    { (list && list.length) ? this.tasks.set(id, list.map((t) => ({ ...t }))) : this.tasks.delete(id); this._emit('change'); }
+    setNodeIcon(id, glyph)    { glyph ? this.icon.set(id, glyph) : this.icon.delete(id); this._emit('change'); }
+    setNodeLinks(id, links)   { (links && links.length) ? this.links.set(id, links.map((l) => ({ ...l }))) : this.links.delete(id); this._emit('change'); }
+    setPortInLabels(id, arr)  { (arr && arr.some(Boolean)) ? this.portIn.set(id, arr.slice()) : this.portIn.delete(id); this._emit('change'); }
+    setPortOutLabels(id, arr) { (arr && arr.some(Boolean)) ? this.portOut.set(id, arr.slice()) : this.portOut.delete(id); this._emit('change'); }
+
+    // ── Z-order ───────────────────────────────────────────────────────────
+    _nextZ = 0;
+    bringToFront(ids) {
+      const sel = ids || this.getSelection();
+      for (const i of sel) this.zOrder.set(i, ++this._nextZ);
+    }
+    sendToBack(ids) {
+      const sel = ids || this.getSelection();
+      for (const i of sel) this.zOrder.set(i, --this._nextZ);
+    }
+
+    // ── Bookmarks (slots 1..9) ───────────────────────────────────────────
+    setBookmark(slot, nodeId) { this.bookmarks.set(slot, nodeId ?? (this.getSelection()[0])); }
+    jumpBookmark(slot) {
+      const id = this.bookmarks.get(slot);
+      if (id === undefined || id >= this.w.nodeCount_()) return;
+      this.clearSelection(); this.w.setSelected(id, 1);
+      this.panTo(this.V.posX[id], this.V.posY[id]);
+      this._emit('select', this.getSelection());
+    }
+
+    // ── Hover preview popover (consumer toggles via options.hoverPreview) ──
+    setHoverPreview(on) { this.options.hoverPreview = !!on; if (!on) this._hidePreview(); }
+
+    // ── Plugin API ──────────────────────────────────────────────────────
+    /** Install a plugin object with optional lifecycle hooks. Returns dispose fn. */
+    use(plugin) {
+      if (!plugin) throw new Error('use(plugin): plugin required');
+      if (typeof plugin === 'function') plugin = plugin(this) || {};
+      this._plugins.push(plugin);
+      for (const name of Object.keys(this._hooks)) {
+        if (typeof plugin[name] === 'function') this._hooks[name].push(plugin[name]);
+      }
+      if (typeof plugin.extendAPI === 'function') plugin.extendAPI(this);
+      if (typeof plugin.init === 'function') plugin.init(this);
+      if (Array.isArray(plugin.kinds)) for (const k of plugin.kinds) this.registerKind(k);
+      if (Array.isArray(plugin.commands)) {
+        this._extraCommands = (this._extraCommands || []).concat(plugin.commands);
+      }
+      this._emit('plugin:installed', plugin.name || plugin);
+      return () => this._removePlugin(plugin);
+    }
+    _removePlugin(plugin) {
+      const i = this._plugins.indexOf(plugin); if (i === -1) return;
+      this._plugins.splice(i, 1);
+      for (const name of Object.keys(this._hooks)) {
+        if (typeof plugin[name] === 'function') {
+          const arr = this._hooks[name];
+          const j = arr.indexOf(plugin[name]);
+          if (j !== -1) arr.splice(j, 1);
+        }
+      }
+      if (typeof plugin.dispose === 'function') plugin.dispose(this);
+    }
+    _runHook(name, ...args) {
+      const arr = this._hooks[name]; if (!arr || !arr.length) return null;
+      let result;
+      for (const fn of arr) {
+        try { const r = fn(this, ...args); if (r === false) return false; if (r !== undefined) result = r; }
+        catch (e) { console.error(`plugin ${name} hook error`, e); }
+      }
+      return result;
+    }
+
+    // ── WebGL renderer (opt-in, hybrid: GL bodies + Canvas2D text overlay) ─
+    async enableWebGL(force = false) {
+      if (this._gl) return true;
+      if (!force && this.w.nodeCount_() < (this.options.webglThreshold || 2000)) return false;
+      try {
+        const mod = await Promise.resolve().then(function () { return webglRenderer; });
+        this._gl = new mod.WebGLRenderer(this);
+        if (this._gl.disabled) { this._gl = null; return false; }
+        this.options.renderer = 'webgl';
+        this._emit('renderer', 'webgl');
+        return true;
+      } catch (e) {
+        console.warn('zflow: WebGL renderer failed', e);
+        return false;
+      }
+    }
+    disableWebGL() {
+      if (!this._gl) return;
+      this._gl.dispose();
+      this._gl = null;
+      this.canvas.style.background = this.options.background;
+      this.canvas.style.zIndex = '';
+      this.canvas.style.position = '';
+      this.options.renderer = 'canvas2d';
+      this._emit('renderer', 'canvas2d');
+    }
+
+    // ── Graph execution runtime ──────────────────────────────────────────
+    // Each kind may register an `execute(ctx, inputs) -> outputs | Promise`.
+    // The scheduler walks the graph in topological order, gathering inputs
+    // from upstream outputs via the edge connectivity. Status / progress /
+    // sparkline are updated automatically so the UI shows the run live.
+
+    /** Set how long the runtime pauses between nodes so propagation is visible. */
+    setRunStepDelay(ms) { this._runStepDelay = Math.max(0, ms|0); }
+
+    /** Enable input memoization globally — re-runs skip nodes whose inputs match the previous tick. */
+    setMemoization(on) { this._memoize = !!on; if (!on) this._memoKeys?.clear(); }
+
+    /** Evaluate an expression like "{{node_3.value}} * 2" against current runtime values. */
+    // ── Schema / type validation ────────────────────────────────────────
+    /** Returns null if the connection is OK, or a string reason if not. */
+    validateConnection(fromN, fromP, toN, toP) {
+      if (fromN === toN) return 'self-loop';
+      const fromCat = this.kinds[this.V.kind[fromN]];
+      const toCat   = this.kinds[this.V.kind[toN]];
+      const outSchema = fromCat.outputs?.[fromP];
+      const inSchema  = toCat.inputs?.[toP];
+      if (outSchema && inSchema) {
+        if (!isCompatibleType(outSchema.type, inSchema.type)) {
+          return `type mismatch: ${outSchema.type} → ${inSchema.type}`;
+        }
+      }
+      if (this._connValidator) {
+        const v = this._connValidator(fromN, fromP, toN, toP);
+        if (v === false) return 'rejected by validator';
+      }
+      return null;
+    }
+
+    // ── Inline expression editor with autocomplete ────────────────────
+    /** Open an inline editor that accepts {{node_X.field}} expressions with live preview. */
+    editNodeExpression(nodeId, field = 'title') {
+      if (this._exprEditorEl) this._closeExprEditor();
+      const cur = field === 'title' ? (this.titles.get(nodeId) || '')
+                : field === 'desc'  ? (this.descriptions.get(nodeId) || '')
+                : '';
+      const wrap = document.createElement('div');
+      wrap.style.cssText = `position:absolute;z-index:600;background:#161b27;border:1px solid #f0b93a;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.5);font-family:Inter, ui-sans-serif;font-size:12px;color:#e6edf3;width:280px;`;
+      wrap.innerHTML = `
+      <input id="zf-expr" type="text" style="width:260px;padding:8px 10px;background:transparent;border:0;color:#e6edf3;outline:none;font-family:ui-monospace,Consolas,monospace;font-size:12px;">
+      <div id="zf-expr-preview" style="padding:4px 10px;border-top:1px solid rgba(255,255,255,0.08);color:#5be0d0;font-family:ui-monospace,Consolas,monospace;font-size:11px;min-height:14px;"></div>
+      <div id="zf-expr-list" style="max-height:160px;overflow:auto;border-top:1px solid rgba(255,255,255,0.08);display:none;"></div>`;
+      this.container.appendChild(wrap);
+      this._exprEditorEl = wrap;
+      const cx = this.V.posX[nodeId], cy = this.V.posY[nodeId];
+      const hh = this.V.sizeH[nodeId] * 0.5;
+      const tl = this._w2s(cx - this.V.sizeW[nodeId] * 0.5, cy - hh);
+      const dpr = window.devicePixelRatio || 1;
+      wrap.style.left = (tl.x / dpr) + 'px';
+      wrap.style.top  = Math.max(8, tl.y / dpr - 110) + 'px';
+      const input = wrap.querySelector('#zf-expr');
+      const list  = wrap.querySelector('#zf-expr-list');
+      const prev  = wrap.querySelector('#zf-expr-preview');
+      input.value = cur;
+      const refreshPreview = () => {
+        try { const r = this.evalExpression(input.value); prev.style.color = '#5be0d0'; prev.textContent = '= ' + formatRuntimeValue(r); }
+        catch (e) { prev.style.color = '#e8462b'; prev.textContent = String(e.message || e); }
+      };
+      const refreshSuggestions = () => {
+        const pos = input.selectionStart;
+        const m = input.value.slice(0, pos).match(/\{\{\s*([\w_.]*)$/);
+        if (!m) { list.style.display = 'none'; return; }
+        const prefix = m[1].toLowerCase();
+        const candidates = [];
+        for (let i = 0; i < this.w.nodeCount_(); i++) {
+          if (i === nodeId) continue;
+          const title = this.titles.get(i) || this.kinds[this.V.kind[i]].name;
+          const val = this._values.get(i);
+          const expansions = (val && typeof val === 'object') ? Object.keys(val).map((k) => `node_${i}.${k}`) : [`node_${i}`];
+          for (const c of expansions) if (c.toLowerCase().startsWith(prefix)) candidates.push({ text: c, label: `${c}  ·  ${title}` });
+        }
+        if (!candidates.length) { list.style.display = 'none'; return; }
+        list.style.display = 'block';
+        list._items = candidates.slice(0, 8);
+        list._cursor = 0;
+        list.innerHTML = list._items.map((c, i) =>
+          `<div data-i="${i}" data-text="${escapeHtml(c.text)}" style="padding:6px 10px;cursor:pointer;${i === 0 ? 'background:rgba(240,185,58,0.18);' : ''}">${escapeHtml(c.label)}</div>`).join('');
+      };
+      const insert = (txt) => {
+        const pos = input.selectionStart;
+        const before = input.value.slice(0, pos).replace(/\{\{\s*[\w_.]*$/, '{{') + txt + '}}';
+        input.value = before + input.value.slice(pos);
+        input.selectionStart = input.selectionEnd = before.length;
+        refreshPreview(); list.style.display = 'none';
+      };
+      const updateHi = () => list.querySelectorAll('[data-i]').forEach((r, i) =>
+        r.style.background = i === list._cursor ? 'rgba(240,185,58,0.18)' : 'transparent');
+      input.addEventListener('input', () => { refreshPreview(); refreshSuggestions(); });
+      input.addEventListener('keydown', (e) => {
+        const open = list.style.display !== 'none' && list._items;
+        if (open && e.code === 'ArrowDown') { list._cursor = (list._cursor + 1) % list._items.length; updateHi(); e.preventDefault(); return; }
+        if (open && e.code === 'ArrowUp')   { list._cursor = (list._cursor - 1 + list._items.length) % list._items.length; updateHi(); e.preventDefault(); return; }
+        if (open && (e.code === 'Tab' || e.code === 'Enter')) { insert(list._items[list._cursor].text); e.preventDefault(); return; }
+        if (e.code === 'Enter')  {
+          if (field === 'title') this.setNodeTitle(nodeId, input.value);
+          else if (field === 'desc') this.setNodeDescription(nodeId, input.value);
+          this._closeExprEditor();
+        }
+        if (e.code === 'Escape') this._closeExprEditor();
+      });
+      list.addEventListener('mousedown', (e) => {
+        const r = e.target.closest('[data-i]'); if (!r) return;
+        insert(r.dataset.text); input.focus(); e.preventDefault();
+      });
+      setTimeout(() => { input.focus(); input.select(); refreshPreview(); }, 10);
+      // Click outside closes the editor.
+      const closeOnOutside = (e) => {
+        if (this._exprEditorEl && !this._exprEditorEl.contains(e.target)) { this._closeExprEditor(); }
+      };
+      setTimeout(() => document.addEventListener('mousedown', closeOnOutside, { once: false }), 60);
+      this._exprEditorEl._cleanup = () => document.removeEventListener('mousedown', closeOnOutside);
+    }
+    _closeExprEditor() {
+      if (this._exprEditorEl) {
+        this._exprEditorEl._cleanup?.();
+        this._exprEditorEl.remove();
+        this._exprEditorEl = null;
+      }
+    }
+
+    evalExpression(expr, extraScope = {}) {
+      if (typeof expr !== 'string') return expr;
+      const interp = expr.replace(/\{\{\s*([^}]+?)\s*\}\}/g, (_, path) => {
+        const [head, ...rest] = path.split('.');
+        let v;
+        if (/^node_(\d+)$/.test(head)) v = this._values.get(parseInt(head.slice(5), 10));
+        else if (head in extraScope) v = extraScope[head];
+        else return 'null';
+        for (const seg of rest) v = (v == null) ? undefined : v[seg];
+        return JSON.stringify(v ?? null);
+      });
+      if (interp === expr) return expr;
+      try { return Function(`"use strict"; return (${interp})`)(); }
+      catch { return interp; }
+    }
+
+    /** Inject or replace the execute fn for a kind. Returns the previous fn. */
+    setKindExecutor(kindName, fn) {
+      const k = this.kindByName.get(kindName);
+      if (k === undefined) throw new Error(`unknown kind: ${kindName}`);
+      const prev = this.kinds[k].execute;
+      this.kinds[k].execute = fn;
+      this._runOrder = null;
+      return prev;
+    }
+    /** Force a specific input value for a node (useful for source nodes). */
+    setNodeInput(nodeId, outputs) {
+      this._values.set(nodeId, outputs);
+      this.setNodeStatus(nodeId, 'ok');
+    }
+    getNodeValue(nodeId) { return this._values.get(nodeId); }
+    clearRuntimeState() {
+      this._values.clear();
+      for (const sc of this._streamSrc.values()) try { sc(); } catch {}
+      this._streamSrc.clear();
+      const n = this.w.nodeCount_();
+      for (let i = 0; i < n; i++) { this.status.delete(i); this.progress.delete(i); }
+      this._emit('change');
+    }
+
+    /** Returns [nodeIds] in topological order, ignoring cycles. */
+    _topoOrder() {
+      if (this._runOrder) return this._runOrder;
+      const n = this.w.nodeCount_(), m = this.w.edgeCount_();
+      const indeg = new Int32Array(n);
+      const out = Array.from({ length: n }, () => []);
+      for (let i = 0; i < m; i++) {
+        const a = this.V.edgeFromN[i], b = this.V.edgeToN[i];
+        if (a !== b) { indeg[b]++; out[a].push({ to: b, fp: this.V.edgeFromP[i], tp: this.V.edgeToP[i], idx: i }); }
+      }
+      const q = [];
+      for (let i = 0; i < n; i++) if (indeg[i] === 0) q.push(i);
+      const order = [];
+      while (q.length) {
+        const u = q.shift();
+        order.push(u);
+        for (const e of out[u]) if (--indeg[e.to] === 0) q.push(e.to);
+      }
+      // Cycle nodes: append in id order so they still get a chance to run once.
+      if (order.length < n) {
+        const seen = new Set(order);
+        for (let i = 0; i < n; i++) if (!seen.has(i)) order.push(i);
+      }
+      this._runOrder = order;
+      this._runOut = out;
+      return order;
+    }
+
+    /** Gather inputs for a node by reading upstream node outputs through edges. */
+    _gatherInputs(nodeId) {
+      const inputs = {};
+      const cat = this.kinds[this.V.kind[nodeId]];
+      const portLabels = this.portIn.get(nodeId) || cat.portIn || [];
+      const m = this.w.edgeCount_();
+      for (let i = 0; i < m; i++) {
+        if (this.V.edgeToN[i] !== nodeId) continue;
+        const tp = this.V.edgeToP[i];
+        const src = this.V.edgeFromN[i], sp = this.V.edgeFromP[i];
+        const srcOut = this._values.get(src);
+        if (srcOut === undefined) continue;
+        let val;
+        if (srcOut && typeof srcOut === 'object' && !Array.isArray(srcOut)) {
+          const srcCat = this.kinds[this.V.kind[src]];
+          const srcPortLabels = this.portOut.get(src) || srcCat.portOut || [];
+          const key = srcPortLabels[sp];
+          // Conditional routing: if the source declared labeled outputs and THIS
+          // branch's labeled key isn't present, the branch didn't fire — skip.
+          if (key) {
+            if (!(key in srcOut)) continue;
+            val = srcOut[key];
+          } else if (sp in srcOut) val = srcOut[sp];
+          else if ('value' in srcOut) val = srcOut.value;
+          else if ('out' in srcOut) val = srcOut.out;
+          else val = srcOut;
+          if (val === undefined) continue;
+        } else val = srcOut;
+        const tkey = portLabels[tp] || `in${tp}`;
+        inputs[tkey] = val;
+        inputs[tp] = val;
+      }
+      return inputs;
+    }
+
+    /** All transitive successors of nodeId in topological order. */
+    _collectDownstream(nodeId) {
+      const m = this.w.edgeCount_();
+      const out = [];
+      const seen = new Set();
+      const order = this._topoOrder();
+      const indexOf = new Map(order.map((id, i) => [id, i]));
+      const stack = [nodeId];
+      while (stack.length) {
+        const u = stack.pop();
+        for (let i = 0; i < m; i++) {
+          if (this.V.edgeFromN[i] === u && !seen.has(this.V.edgeToN[i])) {
+            seen.add(this.V.edgeToN[i]); out.push(this.V.edgeToN[i]); stack.push(this.V.edgeToN[i]);
+          }
+        }
+      }
+      out.sort((a, b) => indexOf.get(a) - indexOf.get(b));
+      return out;
+    }
+
+    /** Topological run of the whole graph (or from a starting subgraph). */
+    async run({ from = null, signal = null, filter = null } = {}) {
+      if (this._running) return;
+      this._running = true;
+      const mySeq = ++this._runSeq;
+      const ac = new AbortController();
+      this._runAbort = ac;
+      if (signal) signal.addEventListener('abort', () => ac.abort());
+
+      this._topoOrder();
+      let order = this._runOrder;
+      if (from !== null) {
+        const reach = new Set([from]); const q = [from];
+        while (q.length) {
+          const u = q.shift();
+          for (const e of this._runOut[u]) if (!reach.has(e.to)) { reach.add(e.to); q.push(e.to); }
+        }
+        order = order.filter((id) => reach.has(id));
+      }
+      if (typeof filter === 'function') order = order.filter(filter);
+
+      const result = { executed: 0, errors: [], values: new Map() };
+      this._emit('run:start', { order });
+
+      for (const id of order) {
+        if (ac.signal.aborted || mySeq !== this._runSeq) break;
+        const cat = this.kinds[this.V.kind[id]];
+        const exec = cat.execute;
+        if (typeof exec !== 'function') {
+          if (!this._values.has(id)) continue;
+          result.values.set(id, this._values.get(id));
+          continue;
+        }
+        const inputs = this._gatherInputs(id);
+        // Conditional-routing skip: if this node has declared inputs but no
+        // upstream supplied any (because the parent emitted on a different branch),
+        // skip exec entirely — the dead branch shouldn't fire.
+        if (cat.nin > 0 && Object.keys(inputs).length === 0) {
+          // Only skip if there is at least one incoming edge in the graph (else
+          // it's just a disconnected node and should still run if explicitly invoked).
+          let hasIncoming = false;
+          const m2 = this.w.edgeCount_();
+          for (let e = 0; e < m2; e++) if (this.V.edgeToN[e] === id) { hasIncoming = true; break; }
+          if (hasIncoming) continue;
+        }
+        // Memoization — skip if inputs hash unchanged (FNV-1a 32-bit, no JSON cost).
+        if (this._memoize) {
+          const hash = fnvHash(inputs);
+          if (this._memoKeys.get(id) === hash && this._values.has(id)) {
+            result.executed++;
+            this._emit('node:cached', { id });
+            continue;
+          }
+          this._memoKeys.set(id, hash);
+        }
+        // Light up the incoming edges so the user sees the data path.
+        const m2 = this.w.edgeCount_();
+        for (let e = 0; e < m2; e++) {
+          if (this.V.edgeToN[e] === id && this._values.has(this.V.edgeFromN[e])) {
+            this._activeEdges.set(e, performance.now() + 800);
+          }
+        }
+        this.setNodeStatus(id, 'running');
+        this.setNodeProgress(id, 0);
+        this._emit('node:exec', { id, inputs });
+        if (this._hooks) {
+          const r = this._runHook('onBeforeExec', id, inputs);
+          if (r === false) { this.setNodeStatus(id, 'idle'); continue; }
+        }
+        // Breakpoint / step pause.
+        if (this.breakpoints.has(id) || this._stepMode) {
+          await this._awaitContinue(id);
+          if (ac.signal.aborted || mySeq !== this._runSeq) break;
+        }
+        if (this._runStepDelay > 0) {
+          await new Promise((r) => setTimeout(r, this._runStepDelay));
+          if (ac.signal.aborted || mySeq !== this._runSeq) break;
+        }
+        const ctx = {
+          nodeId: id,
+          signal: ac.signal,
+          params: this._nodeParams?.get(id) || {},
+          emit: (out) => { this._values.set(id, out); this._emit('node:emit', { id, outputs: out }); if (typeof out === 'number') this.pushNodeMetric(id, out); },
+          log: (...args) => this._emit('node:log', { id, args }),
+          setProgress: (p) => this.setNodeProgress(id, p),
+          metric: (v) => this.pushNodeMetric(id, v),
+          get: (otherId) => this._values.get(otherId),
+        };
+        const retryCfg = cat.retry || null;
+        const maxAttempts = retryCfg ? (retryCfg.n ?? 3) : 1;
+        const retryDelay = retryCfg ? (retryCfg.delay ?? 100) : 0;
+        let attempt = 0, out, lastErr = null, succeeded = false;
+        while (attempt < maxAttempts) {
+          attempt++;
+          this._retryStats.set(id, attempt);
+          try {
+            const outRaw = exec(ctx, inputs);
+            // Async generator → stream multiple emissions.
+            if (outRaw && typeof outRaw[Symbol.asyncIterator] === 'function') {
+              // For each emission, propagate through downstream chain synchronously
+              // before yielding the next. That way "stream → double → sink" really
+              // shows 5 ticks down the pipe instead of one.
+              let lastEmission;
+              const downstream = this._collectDownstream(id);
+              for await (const emission of outRaw) {
+                if (ac.signal.aborted) break;
+                lastEmission = emission;
+                this._values.set(id, emission);
+                this._emit('node:emit', { id, outputs: emission });
+                if (typeof emission === 'number') this.pushNodeMetric(id, emission);
+                this._valueBubbles.push({ nodeId: id, text: bubbleSummary(emission), t0: performance.now(), dur: 700 });
+                // Propagate through downstream nodes (skip if they have their own execute that should wait for full stream).
+                for (const dId of downstream) {
+                  if (ac.signal.aborted) break;
+                  const dCat = this.kinds[this.V.kind[dId]];
+                  if (typeof dCat.execute !== 'function') continue;
+                  if (dCat.execute.constructor.name === 'AsyncGeneratorFunction') continue;
+                  const dIns = this._gatherInputs(dId);
+                  // Light up the edge feeding this downstream node.
+                  const m2b = this.w.edgeCount_();
+                  for (let e = 0; e < m2b; e++) {
+                    if (this.V.edgeToN[e] === dId && this.V.edgeFromN[e] === id) {
+                      this._activeEdges.set(e, performance.now() + 500);
+                    }
+                  }
+                  this.setNodeStatus(dId, 'running');
+                  try {
+                    const dRaw = dCat.execute({ ...ctx, nodeId: dId, params: this._nodeParams?.get(dId) || {} }, dIns);
+                    const dOut = (dRaw && typeof dRaw.then === 'function') ? await dRaw : dRaw;
+                    if (dOut !== undefined && dOut !== null) {
+                      this._values.set(dId, dOut);
+                      this._emit('node:emit', { id: dId, outputs: dOut });
+                      this._valueBubbles.push({ nodeId: dId, text: bubbleSummary(dOut), t0: performance.now(), dur: 700 });
+                      if (typeof dOut === 'number') this.pushNodeMetric(dId, dOut);
+                    }
+                    this.setNodeStatus(dId, 'ok');
+                  } catch (e) { this.setNodeStatus(dId, 'error'); }
+                }
+                await new Promise((r) => setTimeout(r, 60));
+              }
+              out = lastEmission;
+            } else {
+              out = (outRaw && typeof outRaw.then === 'function') ? await outRaw : outRaw;
+            }
+            if (ac.signal.aborted || mySeq !== this._runSeq) break;
+            succeeded = true; lastErr = null; break;
+          } catch (err) {
+            lastErr = err;
+            this._emit('node:retry', { id, attempt, error: err });
+            if (attempt < maxAttempts) await new Promise((r) => setTimeout(r, retryDelay));
+          }
+        }
+        try {
+          if (!succeeded) throw lastErr;
+          if (ac.signal.aborted || mySeq !== this._runSeq) break;
+          if (out !== undefined && out !== null) {
+            this._values.set(id, out);
+            result.values.set(id, out);
+            // Show a floating value bubble above the node.
+            let summary;
+            if (typeof out === 'number')  summary = formatRuntimeValue(out);
+            else if (out && typeof out === 'object') {
+              const entries = Object.entries(out).filter(([, v]) => v !== undefined && v !== null);
+              summary = entries.map(([k, v]) => `${k}: ${formatRuntimeValue(v)}`).join('  ');
+            } else summary = formatRuntimeValue(out);
+            this._valueBubbles.push({ nodeId: id, text: summary, t0: performance.now(), dur: 1400 });
+            if (typeof out === 'number') this.pushNodeMetric(id, out);
+            else if (out && typeof out === 'object') {
+              for (const v of Object.values(out)) if (typeof v === 'number') { this.pushNodeMetric(id, v); break; }
+            }
+          }
+          this.setNodeStatus(id, 'ok');
+          this.setNodeProgress(id, 1);
+          result.executed++;
+          if (this._hooks) this._runHook('onAfterExec', id, out);
+          this._emit('node:done', { id, outputs: out });
+        } catch (err) {
+          this.setNodeStatus(id, 'error');
+          result.errors.push({ id, error: err });
+          this._emit('node:error', { id, error: err });
+          if (this.options.stopOnError) break;
+        }
+      }
+
+      this._running = false;
+      this._runAbort = null;
+      this._emit('run:done', result);
+      return result;
+    }
+    runFrom(nodeId) { return this.run({ from: nodeId }); }
+
+    // ── Debug: breakpoints + step-through ──────────────────────────────
+    setBreakpoint(nodeId, on = true) {
+      if (on) this.breakpoints.add(nodeId); else this.breakpoints.delete(nodeId);
+    }
+    toggleBreakpoint(nodeId) {
+      if (this.breakpoints.has(nodeId)) this.breakpoints.delete(nodeId);
+      else this.breakpoints.add(nodeId);
+    }
+    clearBreakpoints() { this.breakpoints.clear(); }
+    setStepMode(on) { this._stepMode = !!on; }
+    /** When paused at a breakpoint, advance one node. */
+    stepOver() {
+      if (this._resumeNext) { const r = this._resumeNext; this._resumeNext = null; r(); }
+    }
+    /** Resume normal execution. */
+    resume() {
+      this._paused = false; this._stepMode = false;
+      if (this._resumeNext) { const r = this._resumeNext; this._resumeNext = null; r(); }
+    }
+    isPaused() { return this._paused; }
+    _awaitContinue(nodeId) {
+      return new Promise((resolve) => {
+        this._paused = true;
+        this._emit('run:paused', { nodeId });
+        this._resumeNext = resolve;
+      });
+    }
+
+    // ── Sub-flows: turn a frame into a reusable kind ───────────────────
+    /** Snapshot a frame's contents as a callable kind. Returns the new kind name. */
+    registerSubflowFromFrame(frameId, opts = {}) {
+      const f = this.frames.find((ff) => ff.id === frameId);
+      if (!f) throw new Error('frame not found');
+      const inside = [];
+      const n = this.w.nodeCount_();
+      for (let i = 0; i < n; i++) {
+        if (this.V.posX[i] >= f.x && this.V.posX[i] <= f.x + f.w &&
+            this.V.posY[i] >= f.y && this.V.posY[i] <= f.y + f.h) inside.push(i);
+      }
+      if (!inside.length) throw new Error('frame is empty');
+      const setIn = new Set(inside);
+      // Capture node specs by current state.
+      const localToSnap = new Map();
+      const nodes = inside.map((id, i) => {
+        localToSnap.set(id, i);
+        return {
+          kind: this.kinds[this.V.kind[id]].name,
+          x: this.V.posX[id] - f.x, y: this.V.posY[id] - f.y,
+          w: this.V.sizeW[id], h: this.V.sizeH[id],
+          title: this.titles.get(id), color: this.colors.get(id),
+          params: this._nodeParams?.get(id),
+        };
+      });
+      const edges = [];
+      const m = this.w.edgeCount_();
+      for (let e = 0; e < m; e++) {
+        if (setIn.has(this.V.edgeFromN[e]) && setIn.has(this.V.edgeToN[e])) {
+          edges.push({
+            from: localToSnap.get(this.V.edgeFromN[e]),
+            to:   localToSnap.get(this.V.edgeToN[e]),
+            fp: this.V.edgeFromP[e], tp: this.V.edgeToP[e],
+          });
+        }
+      }
+      // Boundary detection: nodes with no inside-predecessor are inputs;
+      // nodes with no inside-successor are outputs.
+      const hasIncoming = new Set(), hasOutgoing = new Set();
+      for (const ed of edges) { hasIncoming.add(ed.to); hasOutgoing.add(ed.from); }
+      const inputs = inside.map((_, i) => i).filter((i) => !hasIncoming.has(i));
+      const outputs = inside.map((_, i) => i).filter((i) => !hasOutgoing.has(i));
+
+      const kindName = opts.name || `subflow_${f.label || frameId}`.replace(/\s+/g, '_');
+      // Surface inputs/outputs with the label from the node's title or kind.
+      const inputLabels = inputs.map((idx) => {
+        const local = inside[idx];
+        const t = this.titles.get(local);
+        return t || this.kinds[this.V.kind[local]].name;
+      });
+      const outputLabels = outputs.map((idx) => {
+        const local = inside[idx];
+        const t = this.titles.get(local);
+        return t || this.kinds[this.V.kind[local]].name;
+      });
+      this._subflows.set(kindName, { nodes, edges, inputs, outputs, inputLabels, outputLabels });
+      const self = this;
+      this.registerKind({
+        name: kindName, color: opts.color || '#5be0d0', badge: opts.badge || 'Σ',
+        w: 180, h: 90, nin: Math.max(1, inputs.length), nout: Math.max(1, outputs.length),
+        shape: 'rect',
+        portIn:  inputLabels,
+        portOut: outputLabels,
+        inputs:  inputLabels.map((n) => ({ name: n, type: 'any' })),
+        outputs: outputLabels.map((n) => ({ name: n, type: 'any' })),
+        execute: async (ctx, ins) => {
+          // Spawn ephemeral nodes for execution? Cheap path: rebuild a transient
+          // value map inside this call using the snapshot's adjacency.
+          const sf = self._subflows.get(kindName);
+          const tmpVals = new Map();
+          for (let i = 0; i < sf.inputs.length; i++) {
+            const val = ins[i] ?? ins[`in${i}`] ?? ins[sf.inputLabels[i]];
+            tmpVals.set(sf.inputs[i], val);
+          }
+          // Walk in topo order over snapshot edges.
+          const indeg = sf.nodes.map(() => 0);
+          const out = sf.nodes.map(() => []);
+          for (const e of sf.edges) { indeg[e.to]++; out[e.from].push(e); }
+          const q = [];
+          for (let i = 0; i < sf.nodes.length; i++) if (indeg[i] === 0) q.push(i);
+          while (q.length) {
+            const u = q.shift();
+            const node = sf.nodes[u];
+            const cat = self.kinds[self.kindByName.get(node.kind)];
+            let val;
+            if (!tmpVals.has(u) && typeof cat?.execute === 'function') {
+              const localIns = {};
+              for (const e of sf.edges) {
+                if (e.to === u && tmpVals.has(e.from)) {
+                  const srcVal = tmpVals.get(e.from);
+                  const v = (srcVal && typeof srcVal === 'object') ? (srcVal.value ?? srcVal[e.fp] ?? srcVal) : srcVal;
+                  localIns[`in${e.tp}`] = v;
+                  localIns[e.tp] = v;
+                }
+              }
+              val = await cat.execute({ ...ctx, params: node.params || {} }, localIns);
+              tmpVals.set(u, val);
+            } else val = tmpVals.get(u);
+            for (const e of out[u]) if (--indeg[e.to] === 0) q.push(e.to);
+          }
+          // Aggregated output keyed by BOTH index and label.
+          const result = {};
+          for (let i = 0; i < sf.outputs.length; i++) {
+            const v = tmpVals.get(sf.outputs[i]);
+            const unwrapped = (v && typeof v === 'object' && 'value' in v) ? v.value : v;
+            result[i] = unwrapped;
+            result[sf.outputLabels[i]] = unwrapped;
+          }
+          return result;
+        },
+      });
+      return kindName;
+    }
+    runFrame(frameId) {
+      const f = this.frames.find((ff) => ff.id === frameId);
+      if (!f) return Promise.resolve({ executed: 0, errors: [] });
+      const inside = new Set();
+      const n = this.w.nodeCount_();
+      for (let i = 0; i < n; i++) {
+        if (this.V.posX[i] >= f.x && this.V.posX[i] <= f.x + f.w &&
+            this.V.posY[i] >= f.y && this.V.posY[i] <= f.y + f.h) inside.add(i);
+      }
+      return this.run({ filter: (id) => inside.has(id) });
+    }
+    stop() { if (this._runAbort) this._runAbort.abort(); this._running = false; }
+    isRunning() { return this._running; }
+
+    /** Set per-node runtime parameters (used by built-in kinds: const, if). */
+    setNodeParams(nodeId, params) {
+      if (!this._nodeParams) this._nodeParams = new Map();
+      this._nodeParams.set(nodeId, params);
+    }
+    getNodeParams(nodeId) { return this._nodeParams?.get(nodeId); }
+
+    /** Long-running loop: re-run every `interval` ms until stopped. */
+    startLoop(interval = 500) {
+      this._loopStop = false;
+      const tick = async () => {
+        if (this._loopStop) return;
+        await this.run();
+        if (this._loopStop) return;
+        setTimeout(tick, interval);
+      };
+      tick();
+    }
+    stopLoop() { this._loopStop = true; this.stop(); }
+
+    // ── Locks + read-only ────────────────────────────────────────────────
+    lockNode(id, on = true) { if (on) this.locked.add(id); else this.locked.delete(id); }
+    isLocked(id) { return this.locked.has(id); }
+    setReadOnly(on) { this.readOnly = !!on; }
+
+    // ── Reachable highlight ──────────────────────────────────────────────
+    setReachableFrom(nodeId) {
+      if (nodeId === null || nodeId === undefined || nodeId < 0) { this._reachableSet = null; return; }
+      const reach = new Set([nodeId]);
+      const q = [nodeId];
+      const m = this.w.edgeCount_();
+      while (q.length) {
+        const u = q.shift();
+        for (let i = 0; i < m; i++) {
+          if (this.V.edgeFromN[i] === u && !reach.has(this.V.edgeToN[i])) {
+            reach.add(this.V.edgeToN[i]); q.push(this.V.edgeToN[i]);
+          }
+        }
+      }
+      this._reachableSet = reach;
+    }
+    clearReachable() { this._reachableSet = null; }
+
+    // ── Remote cursor presence (collaboration UI primitive) ───────────────
+    setRemoteCursor(userId, x, y, name = userId, color = '#5be0d0') {
+      if (x === null) { this.remoteCursors.delete(userId); return; }
+      this.remoteCursors.set(userId, { x, y, name, color, t: performance.now() });
+    }
+    clearRemoteCursors() { this.remoteCursors.clear(); }
+
+    // ── Edge waypoints ───────────────────────────────────────────────────
+    setEdgeWaypoints(edgeIdx, points) {
+      if (!points || !points.length) this._edgeWaypoints.delete(edgeIdx);
+      else this._edgeWaypoints.set(edgeIdx, points.map((p) => ({ x: p.x, y: p.y })));
+    }
+    clearEdgeWaypoints(edgeIdx) { this._edgeWaypoints.delete(edgeIdx); }
+
+    // ── Frame collapse ───────────────────────────────────────────────────
+    toggleFrameCollapse(frameIdx) {
+      if (this.frameCollapsed.has(frameIdx)) this.frameCollapsed.delete(frameIdx);
+      else this.frameCollapsed.add(frameIdx);
+      this._emit('change');
+    }
+    isFrameCollapsed(idx) { return this.frameCollapsed.has(idx); }
+    _nodeHiddenByCollapse(nodeId) {
+      if (!this.frameCollapsed.size) return false;
+      for (const fidx of this.frameCollapsed) {
+        const f = this.frames[fidx]; if (!f) continue;
+        if (this.V.posX[nodeId] >= f.x && this.V.posX[nodeId] <= f.x + f.w &&
+            this.V.posY[nodeId] >= f.y + 26 && this.V.posY[nodeId] <= f.y + f.h) return true;
+      }
+      return false;
+    }
+
+    // ── Palette: any DOM element can drag-drop into the canvas ───────────
+    makeDraggable(el, spec) {
+      if (!el || !spec || !spec.kind) throw new Error('makeDraggable: spec.kind required');
+      el.style.cursor = 'grab';
+      el.addEventListener('mousedown', (ev) => {
+        ev.preventDefault();
+        if (this.readOnly) return;
+        const ghost = el.cloneNode(true);
+        Object.assign(ghost.style, { position: 'fixed', pointerEvents: 'none', opacity: '0.75', zIndex: '900', transform: 'translate(-50%,-50%) scale(1.02)' });
+        document.body.appendChild(ghost);
+        const move = (e) => { ghost.style.left = e.clientX + 'px'; ghost.style.top = e.clientY + 'px'; };
+        move(ev);
+        const up = (e) => {
+          window.removeEventListener('mousemove', move);
+          window.removeEventListener('mouseup', up);
+          ghost.remove();
+          const r = this.canvas.getBoundingClientRect();
+          if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) return;
+          const wp = this._s2w(e.clientX, e.clientY);
+          const nodeSpec = { ...spec, x: wp.x, y: wp.y };
+          delete nodeSpec.element;
+          const id = this.addNode(nodeSpec);
+          this._emit('palette:drop', { id, x: wp.x, y: wp.y, spec });
+        };
+        window.addEventListener('mousemove', move);
+        window.addEventListener('mouseup', up);
+      });
+    }
+
+    // ── Theme ─────────────────────────────────────────────────────────────
+    setTheme(name) {
+      this._theme = name === 'light' ? LIGHT_THEME : DARK_THEME;
+      this.options.theme = name;
+      this.options.background = this._theme.bg;
+      this.canvas.style.background = this._theme.bg;
+      this._emit('theme', name);
+    }
+    toggleTheme() { this.setTheme(this.options.theme === 'light' ? 'dark' : 'light'); }
+
+    // ── Live metrics (sparkline) ──────────────────────────────────────────
+    pushNodeMetric(id, value) {
+      let buf = this.metrics.get(id);
+      if (!buf) {
+        buf = { data: new Float32Array(this._metricCap), idx: 0, count: 0 };
+        this.metrics.set(id, buf);
+      }
+      buf.data[buf.idx] = value;
+      buf.idx = (buf.idx + 1) % this._metricCap;
+      if (buf.count < this._metricCap) buf.count++;
+      const prev = this.metricMax.get(id) || 1;
+      this.metricMax.set(id, Math.max(prev * 0.99, Math.abs(value), 1));
+    }
+    clearNodeMetric(id) { this.metrics.delete(id); this.metricMax.delete(id); }
+
+    // ── Edge animation ────────────────────────────────────────────────────
+    setEdgeAnimated(edgeIdx, on) {
+      if (on) this.animatedEdges.add(edgeIdx); else this.animatedEdges.delete(edgeIdx);
+    }
+    setAllEdgesAnimated(on) {
+      if (!on) { this.animatedEdges.clear(); return; }
+      const m = this.w.edgeCount_();
+      for (let i = 0; i < m; i++) this.animatedEdges.add(i);
+    }
+
+    // ── Connection validation ─────────────────────────────────────────────
+    setConnectionValidator(fn) { this._connValidator = typeof fn === 'function' ? fn : null; }
+
+    // ── Templates ─────────────────────────────────────────────────────────
+    registerTemplate(name, builder) { this._templates.set(name, builder); }
+    insertTemplate(name, x = 0, y = 0) {
+      const b = this._templates.get(name);
+      if (!b) return -1;
+      return b(this, x, y);
+    }
+    listTemplates() { return [...this._templates.keys()]; }
+
+    // ── Search ────────────────────────────────────────────────────────────
+    search(query) {
+      this._searchQuery = (query || '').toLowerCase();
+      this._searchHits = [];
+      if (!this._searchQuery) return [];
+      const n = this.w.nodeCount_();
+      for (let i = 0; i < n; i++) {
+        const title = (this.titles.get(i) || '').toLowerCase();
+        const desc = (this.descriptions.get(i) || '').toLowerCase();
+        const kind = this.kinds[this.V.kind[i]].name.toLowerCase();
+        const tagStr = (this.tags.get(i) || []).join(' ').toLowerCase();
+        if (title.includes(this._searchQuery) || desc.includes(this._searchQuery) ||
+            kind.includes(this._searchQuery)  || tagStr.includes(this._searchQuery)) {
+          this._searchHits.push(i);
+        }
+      }
+      return this._searchHits.slice();
+    }
+    jumpToSearchHit(idx) {
+      if (!this._searchHits.length) return;
+      const i = this._searchHits[((idx % this._searchHits.length) + this._searchHits.length) % this._searchHits.length];
+      this.clearSelection();
+      this.w.setSelected(i, 1);
+      this.panTo(this.V.posX[i], this.V.posY[i]);
+    }
+    clearSearch() { this._searchQuery = ''; this._searchHits = []; }
+
+    // ── Command palette ───────────────────────────────────────────────────
+    openCommandPalette() {
+      if (this._cmdPaletteEl) { this._cmdPaletteEl.remove(); this._cmdPaletteEl = null; return; }
+      const cmds = this._builtinCommands();
+      const el = document.createElement('div');
+      el.style.cssText = `position:absolute;top:80px;left:50%;transform:translateX(-50%);width:480px;max-height:60vh;overflow:hidden;background:${this._theme.panel};border:1px solid ${this._theme.border};border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,0.6);z-index:500;color:${this._theme.fg};font-family:Inter, ui-sans-serif;`;
+      el.innerHTML = `
+      <input id="zf-cmd-q" type="text" placeholder="Type a command…" style="width:100%;padding:14px 16px;background:transparent;color:${this._theme.fg};border:0;border-bottom:1px solid ${this._theme.border};outline:none;font-size:14px;">
+      <div id="zf-cmd-list" style="max-height:46vh;overflow:auto;"></div>`;
+      this.container.appendChild(el);
+      this._cmdPaletteEl = el;
+      const input = el.querySelector('#zf-cmd-q'), list = el.querySelector('#zf-cmd-list');
+      let cursor = 0, filtered = cmds;
+      const render = () => {
+        list.innerHTML = filtered.map((c, i) => `
+        <div data-i="${i}" style="padding:9px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:${i === cursor ? this._theme.hi : 'transparent'};">
+          <span>${escapeHtml(c.label)}</span>
+          <span style="color:${this._theme.muted};font-family:ui-monospace,Consolas,monospace;font-size:11px;">${c.hotkey || ''}</span>
+        </div>`).join('');
+      };
+      render();
+      const run = (i) => { const cmd = filtered[i]; if (cmd) cmd.run(); this.openCommandPalette(); };
+      list.addEventListener('mousedown', (e) => {
+        const row = e.target.closest('[data-i]'); if (!row) return;
+        run(parseInt(row.dataset.i, 10));
+      });
+      input.addEventListener('input', () => {
+        const q = input.value.toLowerCase();
+        filtered = q ? cmds.filter((c) => c.label.toLowerCase().includes(q)) : cmds;
+        cursor = 0; render();
+      });
+      input.addEventListener('keydown', (e) => {
+        if (e.code === 'ArrowDown') { cursor = Math.min(filtered.length - 1, cursor + 1); render(); e.preventDefault(); }
+        if (e.code === 'ArrowUp')   { cursor = Math.max(0, cursor - 1); render(); e.preventDefault(); }
+        if (e.code === 'Enter')     { run(cursor); }
+        if (e.code === 'Escape')    { this.openCommandPalette(); }
+      });
+      input.focus();
+    }
+    _builtinCommands() {
+      return [
+        { label: 'Auto layout (Sugiyama)',     hotkey: 'L',          run: () => this.runAutoLayout() },
+        { label: 'Force layout',               hotkey: 'F',          run: () => this.runForceLayout() },
+        { label: 'Fit view',                   hotkey: '0',          run: () => this.fitView() },
+        { label: 'Toggle theme (light/dark)',  hotkey: 'Ctrl+T',     run: () => this.toggleTheme() },
+        { label: 'Toggle minimap',             hotkey: 'Ctrl+M',     run: () => this.setMinimap(!this.options.minimap) },
+        { label: 'Toggle edge animation',      hotkey: 'Ctrl+E',     run: () => this.setAllEdgesAnimated(this.animatedEdges.size === 0) },
+        { label: 'Toggle edge style',          hotkey: '',           run: () => this.setEdgeStyle(this.options.edgeStyle === 'bezier' ? 'orthogonal' : 'bezier') },
+        { label: 'Toggle snap-to-grid',        hotkey: 'G',          run: () => this.setSnapToGrid(!this.options.snapToGrid) },
+        { label: 'Toggle path highlight',      hotkey: '',           run: () => this.setPathHighlight(!this._pathHighlightEnabled) },
+        { label: 'Toggle hover preview',       hotkey: '',           run: () => this.setHoverPreview(!this.options.hoverPreview) },
+        { label: 'Find…',                      hotkey: 'Ctrl+F',     run: () => this.openSearch() },
+        { label: 'Highlight critical path',    hotkey: '',           run: () => { const e = this.criticalPath(); for (const i of e) this.w.setEdgeSelected_(i, 1); } },
+        { label: 'Find SCCs (cycle groups)',   hotkey: '',           run: () => { const sccs = this.findSCCs(); for (const g of sccs) for (const n of g) this.w.setSelected(n, 1); } },
+        { label: 'Color nodes by degree',      hotkey: '',           run: () => this.colorByDegree() },
+        { label: 'Clear node colors',          hotkey: '',           run: () => this.clearNodeColors() },
+        { label: 'Group selection',            hotkey: 'Ctrl+G',     run: () => this.groupSelection() },
+        { label: 'Add sticky note',            hotkey: '',           run: () => this.addNote(-this.cam.x, -this.cam.y) },
+        { label: 'Select all',                 hotkey: 'Ctrl+A',     run: () => this.selectAll() },
+        { label: 'Duplicate selection',        hotkey: 'Ctrl+D',     run: () => this.duplicateSelection() },
+        { label: 'Delete selection',           hotkey: 'Del',        run: () => this.deleteSelection() },
+        { label: 'Export PNG',                 hotkey: '',           run: async () => { const b = await this.exportPNG(); window.open(URL.createObjectURL(b)); } },
+        { label: 'Export SVG',                 hotkey: '',           run: () => { const blob = new Blob([this.exportSVG()], { type: 'image/svg+xml' }); window.open(URL.createObjectURL(blob)); } },
+        { label: 'Export JSON',                hotkey: '',           run: () => { const blob = new Blob([JSON.stringify(this.toJSON(), null, 2)], { type: 'application/json' }); window.open(URL.createObjectURL(blob)); } },
+        { label: 'Undo',                       hotkey: 'Ctrl+Z',     run: () => this.undo() },
+        { label: 'Redo',                       hotkey: 'Ctrl+Y',     run: () => this.redo() },
+        { label: 'Run graph',                  hotkey: 'F5',         run: () => this.run() },
+        { label: 'Stop run',                   hotkey: 'Shift+F5',   run: () => this.stop() },
+        { label: 'Clear runtime state',        hotkey: '',           run: () => this.clearRuntimeState() },
+        ...[...this._templates.keys()].map((name) => ({
+          label: `Insert template: ${name}`, hotkey: '',
+          run: () => this.insertTemplate(name, -this.cam.x, -this.cam.y),
+        })),
+        ...((this._extraCommands || []).map((c) => ({ label: c.label, hotkey: c.hotkey || '', run: c.run }))),
+      ];
+    }
+
+    // ── Search UI ─────────────────────────────────────────────────────────
+    openSearch() {
+      if (this._searchEl) { this._searchEl.remove(); this._searchEl = null; this.clearSearch(); return; }
+      const el = document.createElement('div');
+      el.style.cssText = `position:absolute;top:14px;left:50%;transform:translateX(-50%);background:${this._theme.panel};color:${this._theme.fg};border:1px solid ${this._theme.border};border-radius:8px;padding:6px 10px;display:flex;align-items:center;gap:8px;z-index:500;font-family:Inter, ui-sans-serif;box-shadow:0 8px 24px rgba(0,0,0,0.4);`;
+      el.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="${this._theme.muted}" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+      <input id="zf-s" type="text" placeholder="Find nodes…" style="background:transparent;border:0;outline:none;color:${this._theme.fg};font-size:13px;width:240px;">
+      <span id="zf-sn" style="color:${this._theme.muted};font-size:11px;font-family:ui-monospace,Consolas,monospace;"></span>`;
+      this.container.appendChild(el);
+      this._searchEl = el;
+      const input = el.querySelector('#zf-s'), counter = el.querySelector('#zf-sn');
+      let idx = 0;
+      const onChange = () => {
+        const hits = this.search(input.value);
+        counter.textContent = hits.length ? `${idx + 1}/${hits.length}` : (input.value ? '0' : '');
+        if (hits.length) this.jumpToSearchHit(idx);
+      };
+      input.addEventListener('input', () => { idx = 0; onChange(); });
+      input.addEventListener('keydown', (e) => {
+        if (e.code === 'Enter')  { idx = (idx + (e.shiftKey ? -1 : 1) + this._searchHits.length) % Math.max(this._searchHits.length, 1); onChange(); e.preventDefault(); }
+        if (e.code === 'Escape') { this.openSearch(); }
+      });
+      input.focus();
+    }
+
+    // ── Minimap ───────────────────────────────────────────────────────────
+    setMinimap(on) {
+      this.options.minimap = !!on;
+      if (on) this._setupMinimap();
+      else if (this._minimapEl) { this._minimapEl.remove(); this._minimapEl = null; this._minimapCtx = null; }
+    }
+    _setupMinimap() {
+      if (this._minimapEl) return;
+      const el = document.createElement('canvas');
+      el.width = 200 * (window.devicePixelRatio || 1);
+      el.height = 140 * (window.devicePixelRatio || 1);
+      el.style.cssText = `position:absolute;right:14px;bottom:14px;width:200px;height:140px;background:${this._theme.panel};border:1px solid ${this._theme.border};border-radius:8px;cursor:pointer;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,0.4);`;
+      this.container.appendChild(el);
+      el.addEventListener('mousedown', (e) => {
+        const r = el.getBoundingClientRect();
+        const px = (e.clientX - r.left) / r.width, py = (e.clientY - r.top) / r.height;
+        const bb = this._graphBounds(); if (!bb) return;
+        this.cam.x = -(bb.minX + px * (bb.maxX - bb.minX));
+        this.cam.y = -(bb.minY + py * (bb.maxY - bb.minY));
+      });
+      this._minimapEl = el;
+      this._minimapCtx = el.getContext('2d', { alpha: false });
+    }
+    _graphBounds() {
+      const n = this.w.nodeCount_(); if (n === 0) return null;
+      let mnx = Infinity, mxx = -Infinity, mny = Infinity, mxy = -Infinity;
+      for (let i = 0; i < n; i++) {
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        if (this.V.posX[i] - hw < mnx) mnx = this.V.posX[i] - hw;
+        if (this.V.posX[i] + hw > mxx) mxx = this.V.posX[i] + hw;
+        if (this.V.posY[i] - hh < mny) mny = this.V.posY[i] - hh;
+        if (this.V.posY[i] + hh > mxy) mxy = this.V.posY[i] + hh;
+      }
+      const padX = (mxx - mnx) * 0.1 + 40, padY = (mxy - mny) * 0.1 + 40;
+      return { minX: mnx - padX, maxX: mxx + padX, minY: mny - padY, maxY: mxy + padY };
+    }
+    _drawValueBubbles() {
+      if (!this._valueBubbles.length) return;
+      const now = performance.now();
+      const ctx = this.ctx;
+      for (let i = this._valueBubbles.length - 1; i >= 0; i--) {
+        const b = this._valueBubbles[i];
+        const t = (now - b.t0) / b.dur;
+        if (t >= 1) { this._valueBubbles.splice(i, 1); continue; }
+        const alpha = t < 0.15 ? t / 0.15 : t > 0.7 ? (1 - t) / 0.3 : 1;
+        const rise = t * 30;
+        const id = b.nodeId;
+        if (id >= this.w.nodeCount_()) continue;
+        const cx = this.V.posX[id], cy = this.V.posY[id];
+        const hh = this.V.sizeH[id] * 0.5;
+        const sp = this._w2s(cx, cy - hh);
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.font = `600 12px ui-monospace, Consolas, monospace`;
+        const tw = ctx.measureText(b.text).width;
+        const padX = 8;
+        const bw = tw + padX * 2, bh = 22;
+        const bx = sp.x - bw / 2, by = sp.y - bh - 10 - rise;
+        ctx.shadowColor = 'rgba(0,0,0,0.5)';
+        ctx.shadowBlur = 8;
+        ctx.fillStyle = '#161b27';
+        this._roundRect(bx, by, bw, bh, 5); ctx.fill();
+        ctx.shadowBlur = 0;
+        ctx.strokeStyle = '#5b8def'; ctx.lineWidth = 1.4;
+        this._roundRect(bx, by, bw, bh, 5); ctx.stroke();
+        ctx.fillStyle = '#5be0d0';
+        ctx.textBaseline = 'middle'; ctx.textAlign = 'center';
+        ctx.fillText(b.text, sp.x, by + bh / 2);
+        // Tail.
+        ctx.fillStyle = '#161b27';
+        ctx.strokeStyle = '#5b8def';
+        ctx.beginPath();
+        ctx.moveTo(sp.x - 5, by + bh);
+        ctx.lineTo(sp.x + 5, by + bh);
+        ctx.lineTo(sp.x, by + bh + 6);
+        ctx.closePath(); ctx.fill(); ctx.stroke();
+        ctx.restore();
+      }
+    }
+
+    _drawWaypoints() {
+      for (const [edgeIdx, list] of this._edgeWaypoints) {
+        for (const p of list) {
+          const sp = this._w2s(p.x, p.y);
+          this.ctx.fillStyle = '#f0b93a';
+          this.ctx.beginPath(); this.ctx.arc(sp.x, sp.y, 5, 0, Math.PI * 2); this.ctx.fill();
+          this.ctx.strokeStyle = '#0b0f17'; this.ctx.lineWidth = 1.2; this.ctx.stroke();
+        }
+      }
+    }
+
+    _hitWaypoint(qx, qy) {
+      const tol = 8 / this.cam.zoom;
+      for (const [edgeIdx, list] of this._edgeWaypoints) {
+        for (let i = 0; i < list.length; i++) {
+          if (Math.hypot(list[i].x - qx, list[i].y - qy) < tol) return { edgeIdx, wpIdx: i };
+        }
+      }
+      return null;
+    }
+
+    _drawRemoteCursors() {
+      if (!this.remoteCursors.size) return;
+      const now = performance.now();
+      for (const [id, c] of this.remoteCursors) {
+        if (now - c.t > 30000) { this.remoteCursors.delete(id); continue; }
+        const sp = this._w2s(c.x, c.y);
+        const ctx = this.ctx;
+        ctx.save();
+        // Arrow.
+        ctx.fillStyle = c.color;
+        ctx.beginPath();
+        ctx.moveTo(sp.x, sp.y);
+        ctx.lineTo(sp.x + 12, sp.y + 4);
+        ctx.lineTo(sp.x + 5,  sp.y + 6);
+        ctx.lineTo(sp.x + 4,  sp.y + 13);
+        ctx.closePath(); ctx.fill();
+        // Name tag.
+        ctx.font = '600 11px Inter, ui-sans-serif';
+        const tw = ctx.measureText(c.name).width;
+        ctx.fillStyle = c.color;
+        this._roundRect(sp.x + 12, sp.y + 12, tw + 12, 16, 4); ctx.fill();
+        ctx.fillStyle = '#0b0f17';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(c.name, sp.x + 18, sp.y + 20);
+        ctx.restore();
+      }
+    }
+
+    _getImage(url) {
+      let entry = this._imageCache.get(url);
+      if (!entry) {
+        entry = { img: new Image(), ready: false };
+        entry.img.crossOrigin = 'anonymous';
+        entry.img.onload = () => { entry.ready = true; };
+        entry.img.onerror = () => { entry.ready = false; };
+        entry.img.src = url;
+        this._imageCache.set(url, entry);
+      }
+      return entry;
+    }
+
+    _drawMinimap() {
+      if (!this._minimapEl || !this._minimapCtx) return;
+      const m = this._minimapCtx;
+      const W = this._minimapEl.width, H = this._minimapEl.height;
+      m.fillStyle = this._theme.panel;
+      m.fillRect(0, 0, W, H);
+      const bb = this._graphBounds();
+      if (!bb) return;
+      const sx = W / (bb.maxX - bb.minX), sy = H / (bb.maxY - bb.minY);
+      const s = Math.min(sx, sy);
+      const ox = (W - s * (bb.maxX - bb.minX)) * 0.5;
+      const oy = (H - s * (bb.maxY - bb.minY)) * 0.5;
+      const n = this.w.nodeCount_();
+      for (let i = 0; i < n; i++) {
+        const cat = this.kinds[this.V.kind[i]];
+        const hw = this.V.sizeW[i] * 0.5 * s, hh = this.V.sizeH[i] * 0.5 * s;
+        const x = ox + (this.V.posX[i] - bb.minX) * s, y = oy + (this.V.posY[i] - bb.minY) * s;
+        m.fillStyle = this.colors.get(i) || cat.color;
+        m.fillRect(x - hw, y - hh, Math.max(2, hw * 2), Math.max(2, hh * 2));
+      }
+      // Viewport rect.
+      const dpr = window.devicePixelRatio || 1;
+      const cw = this.canvas.width / dpr / this.cam.zoom;
+      const ch = this.canvas.height / dpr / this.cam.zoom;
+      const vx = ox + (-this.cam.x - cw * 0.5 - bb.minX) * s;
+      const vy = oy + (-this.cam.y - ch * 0.5 - bb.minY) * s;
+      m.strokeStyle = this._theme.accent;
+      m.lineWidth = 2;
+      m.strokeRect(vx, vy, cw * s, ch * s);
+    }
+    // Path-highlight on hover (Obsidian-style fade).
+    setPathHighlight(on) { this._pathHighlightEnabled = !!on; if (!on) this._focusedSet = null; }
+
+    // ── Plugin API ────────────────────────────────────────────────────────
+    registerKind(spec) {
+      const idx = this.kinds.length;
+      const cat = {
+        name:    spec.name  ?? `custom${idx}`,
+        color:   spec.color ?? '#94a3b8',
+        badge:   spec.badge ?? 'C',
+        w:       spec.w     ?? 140,
+        h:       spec.h     ?? 60,
+        nin:     spec.nin   ?? 1,
+        nout:    spec.nout  ?? 1,
+        shape:   spec.shape ?? 'rect',
+        html:    spec.html === true,
+        template: spec.template || null,
+        execute: typeof spec.execute === 'function' ? spec.execute : null,
+        portIn:  Array.isArray(spec.portIn)  ? spec.portIn.slice()  : null,
+        portOut: Array.isArray(spec.portOut) ? spec.portOut.slice() : null,
+        // Schema declarations — each entry: { name, type, required?, default? }
+        // Type is a string used by isCompatibleType(). Special: 'any' matches everything.
+        inputs:  Array.isArray(spec.inputs)  ? spec.inputs.slice()  : null,
+        outputs: Array.isArray(spec.outputs) ? spec.outputs.slice() : null,
+        retry:   spec.retry || null,
+      };
+      this.kinds.push(cat);
+      this.kindByName.set(cat.name, idx);
+      this._runOrder = null;
+      return idx;
+    }
+
+    // ── Sticky notes ──────────────────────────────────────────────────────
+    addNote(x, y, text = '', opts = {}) {
+      const palette = [
+        { fill: 'rgba(254,249,195,0.94)', text: '#5b3d12', border: '#caa54a' },
+        { fill: 'rgba(252,231,243,0.94)', text: '#831843', border: '#db5895' },
+        { fill: 'rgba(220,252,231,0.94)', text: '#14532d', border: '#5cad75' },
+        { fill: 'rgba(219,234,254,0.94)', text: '#1e3a8a', border: '#5b8def' },
+      ];
+      const color = opts.color || palette[this.notes.length % palette.length];
+      const note = { id: ++this._noteSeq, x, y, w: opts.w || 220, h: opts.h || 130, text, color };
+      this.notes.push(note);
+      this._emit('change');
+      return note.id;
+    }
+    deleteNote(id) { this.notes = this.notes.filter((n) => n.id !== id); this._emit('change'); }
+
+    // ── Frames (groups) ───────────────────────────────────────────────────
+    addFrame(x, y, w, h, label = 'Group', color = '#5b8def') {
+      const f = { id: ++this._frameSeq, x, y, w, h, label, color };
+      this.frames.push(f);
+      this._emit('change');
+      return f.id;
+    }
+    groupSelection(label) {
+      const sel = this.getSelection();
+      if (sel.length === 0) return -1;
+      let mnx = Infinity, mxx = -Infinity, mny = Infinity, mxy = -Infinity;
+      for (const i of sel) {
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        if (this.V.posX[i] - hw < mnx) mnx = this.V.posX[i] - hw;
+        if (this.V.posX[i] + hw > mxx) mxx = this.V.posX[i] + hw;
+        if (this.V.posY[i] - hh < mny) mny = this.V.posY[i] - hh;
+        if (this.V.posY[i] + hh > mxy) mxy = this.V.posY[i] + hh;
+      }
+      const pad = 30;
+      return this.addFrame(mnx - pad, mny - pad - 26, mxx - mnx + pad * 2, mxy - mny + pad * 2 + 26, label || `Group ${this.frames.length + 1}`);
+    }
+    deleteFrame(id) { this.frames = this.frames.filter((f) => f.id !== id); this._emit('change'); }
+
+    // Subflow drill-in: focus on a frame.
+    enterSubflow(fid) {
+      const idx = this.frames.findIndex((f) => f.id === fid);
+      if (idx === -1) return;
+      this._focusFrame = idx;
+      const f = this.frames[idx];
+      this.cam.x = -(f.x + f.w / 2); this.cam.y = -(f.y + f.h / 2);
+      this.cam.zoom = Math.min(this.canvas.width / (f.w + 80), this.canvas.height / (f.h + 80)) * 0.9;
+      this._emit('subflow', f.id);
+    }
+    exitSubflow() {
+      if (this._focusFrame === -1) return;
+      this._focusFrame = -1;
+      this.fitView();
+      this._emit('subflow', null);
+    }
+    _isInsideFocusFrame(nodeId) {
+      if (this._focusFrame === -1) return true;
+      const f = this.frames[this._focusFrame];
+      return this.V.posX[nodeId] >= f.x && this.V.posX[nodeId] <= f.x + f.w &&
+             this.V.posY[nodeId] >= f.y && this.V.posY[nodeId] <= f.y + f.h;
+    }
+
+    _resolveKind(k) {
+      if (typeof k === 'number') return k;
+      const idx = this.kindByName.get(k);
+      if (idx === undefined) throw new Error(`zflow: unknown kind "${k}"`);
+      return idx;
+    }
+
+    // ── Layout / view ─────────────────────────────────────────────────────
+    runAutoLayout() {
+      const layers = this.w.autoLayout();
+      this.w.snapshot();
+      this._emit('change');
+      return layers;
+    }
+    runForceLayout(maxFrames = 220) {
+      if (this._forceRaf) cancelAnimationFrame(this._forceRaf);
+      this.w.forceLayoutReset();
+      let i = 0;
+      const tick = () => {
+        this.w.forceLayoutTick(0.05);
+        i++;
+        if (i < maxFrames) this._forceRaf = requestAnimationFrame(tick);
+        else { this._forceRaf = null; this.w.snapshot(); this._emit('change'); }
+      };
+      this._forceRaf = requestAnimationFrame(tick);
+    }
+    fitView(padding = 80) {
+      const n = this.w.nodeCount_();
+      if (n === 0) return;
+      let mnx = Infinity, mxx = -Infinity, mny = Infinity, mxy = -Infinity;
+      for (let i = 0; i < n; i++) {
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        if (this.V.posX[i] - hw < mnx) mnx = this.V.posX[i] - hw;
+        if (this.V.posX[i] + hw > mxx) mxx = this.V.posX[i] + hw;
+        if (this.V.posY[i] - hh < mny) mny = this.V.posY[i] - hh;
+        if (this.V.posY[i] + hh > mxy) mxy = this.V.posY[i] + hh;
+      }
+      const bw = mxx - mnx + padding * 2, bh = mxy - mny + padding * 2;
+      this.cam.x = -(mnx + (mxx - mnx) / 2);
+      this.cam.y = -(mny + (mxy - mny) / 2);
+      this.cam.zoom = Math.min(this.canvas.width / bw, this.canvas.height / bh) * 0.85;
+    }
+    zoomTo(zoom) { this.cam.zoom = Math.max(0.2, Math.min(3.0, zoom)); }
+    panTo(x, y)  { this.cam.x = -x; this.cam.y = -y; }
+
+    // ── History ───────────────────────────────────────────────────────────
+    undo()     { if (this.w.undo()) this._emit('change'); }
+    redo()     { if (this.w.redo()) this._emit('change'); }
+    snapshot() { this.w.snapshot(); }
+
+    // ── Algorithms ────────────────────────────────────────────────────────
+    /** Longest path in the DAG via topo-sort + DP. Returns [edgeIds] or []. */
+    criticalPath() {
+      const n = this.w.nodeCount_(), m = this.w.edgeCount_();
+      if (n === 0) return [];
+      const inDeg = new Uint32Array(n);
+      for (let i = 0; i < m; i++) inDeg[this.V.edgeToN[i]]++;
+      const queue = [];
+      for (let i = 0; i < n; i++) if (inDeg[i] === 0) queue.push(i);
+      const dist = new Int32Array(n);
+      const predEdge = new Int32Array(n); predEdge.fill(-1);
+      const adj = this._buildAdj();
+      let head = 0;
+      while (head < queue.length) {
+        const u = queue[head++];
+        for (const e of (adj.get(u) || [])) {
+          if (dist[u] + 1 > dist[e.to]) { dist[e.to] = dist[u] + 1; predEdge[e.to] = e.edge; }
+          inDeg[e.to]--;
+          if (inDeg[e.to] === 0) queue.push(e.to);
+        }
+      }
+      let best = 0;
+      for (let i = 1; i < n; i++) if (dist[i] > dist[best]) best = i;
+      if (dist[best] === 0) return [];
+      const path = [];
+      let cur = best;
+      while (predEdge[cur] !== -1) { path.push(predEdge[cur]); cur = this.V.edgeFromN[predEdge[cur]]; }
+      return path;
+    }
+
+    /** Tarjan's SCC. Returns array of arrays (each non-trivial SCC's node ids). */
+    findSCCs() {
+      const n = this.w.nodeCount_();
+      const adj = this._buildAdj();
+      const index = new Int32Array(n).fill(-1);
+      const lowlink = new Int32Array(n);
+      const onStack = new Uint8Array(n);
+      const stack = [];
+      const sccs = [];
+      let counter = 0;
+      for (let start = 0; start < n; start++) {
+        if (index[start] !== -1) continue;
+        const work = [{ v: start, child: 0 }];
+        index[start] = counter; lowlink[start] = counter++;
+        stack.push(start); onStack[start] = 1;
+        while (work.length) {
+          const top = work[work.length - 1];
+          const out = adj.get(top.v) || [];
+          if (top.child < out.length) {
+            const wto = out[top.child++].to;
+            if (index[wto] === -1) {
+              index[wto] = counter; lowlink[wto] = counter++;
+              stack.push(wto); onStack[wto] = 1;
+              work.push({ v: wto, child: 0 });
+            } else if (onStack[wto]) {
+              if (index[wto] < lowlink[top.v]) lowlink[top.v] = index[wto];
+            }
+          } else {
+            if (lowlink[top.v] === index[top.v]) {
+              const scc = [];
+              while (stack.length) {
+                const x = stack.pop(); onStack[x] = 0; scc.push(x);
+                if (x === top.v) break;
+              }
+              if (scc.length >= 2) sccs.push(scc);
+            }
+            const finished = top.v;
+            work.pop();
+            if (work.length && lowlink[finished] < lowlink[work[work.length - 1].v]) {
+              lowlink[work[work.length - 1].v] = lowlink[finished];
+            }
+          }
+        }
+      }
+      return sccs;
+    }
+
+    /** Heatmap: color every node by its in+out degree. Pass null to clear. */
+    colorByDegree() {
+      const n = this.w.nodeCount_(), m = this.w.edgeCount_();
+      const deg = new Uint16Array(n);
+      for (let i = 0; i < m; i++) { deg[this.V.edgeFromN[i]]++; deg[this.V.edgeToN[i]]++; }
+      let max = 1;
+      for (let i = 0; i < n; i++) if (deg[i] > max) max = deg[i];
+      const ramp = ['#3b5fc4', '#5b8def', '#5be0d0', '#5bd17a', '#f0b93a', '#fb923c', '#e8462b'];
+      const lerp = (t) => {
+        if (t <= 0) return ramp[0]; if (t >= 1) return ramp[ramp.length - 1];
+        const idx = t * (ramp.length - 1), i0 = Math.floor(idx), i1 = Math.min(ramp.length - 1, i0 + 1);
+        const f = idx - i0; const a = parseHex$1(ramp[i0]), b = parseHex$1(ramp[i1]);
+        return `rgb(${Math.round(a[0]*(1-f)+b[0]*f)},${Math.round(a[1]*(1-f)+b[1]*f)},${Math.round(a[2]*(1-f)+b[2]*f)})`;
+      };
+      for (let i = 0; i < n; i++) this.colors.set(i, lerp(deg[i] / max));
+      this._emit('change');
+    }
+    clearNodeColors() {
+      this.colors.clear();
+      this._emit('change');
+    }
+
+    // ── Imports (Mermaid + DOT) ───────────────────────────────────────────
+    importMermaid(text) {
+      const parsed = parseMermaid(text);
+      if (!parsed || parsed.nodes.size === 0) return 0;
+      const shapeMap = { rect: 'process', rhombus: 'decision', circle: 'branch', round: 'process', subroutine: 'aggregator', default: 'process' };
+      const idMap = new Map();
+      let drop = 0;
+      for (const [mid, def] of parsed.nodes) {
+        const id = this.addNode({
+          kind: shapeMap[def.shape] || 'process',
+          x: (drop % 8) * 200 - 700, y: Math.floor(drop / 8) * 110,
+          title: def.label,
+        });
+        if (id < 0) break;
+        idMap.set(mid, id); drop++;
+      }
+      for (const e of parsed.edges) {
+        const a = idMap.get(e.from), b = idMap.get(e.to);
+        if (a === undefined || b === undefined) continue;
+        this.addEdge({ from: a, to: b, label: e.label });
+      }
+      this.runAutoLayout();
+      this.fitView();
+      return parsed.nodes.size;
+    }
+    importDot(text) {
+      const parsed = parseDot(text);
+      if (!parsed || parsed.nodes.size === 0) return 0;
+      const idMap = new Map();
+      let drop = 0;
+      for (const [mid, def] of parsed.nodes) {
+        const id = this.addNode({ kind: 'process', x: (drop % 8) * 200 - 700, y: Math.floor(drop / 8) * 110, title: def.label });
+        if (id < 0) break;
+        idMap.set(mid, id); drop++;
+      }
+      for (const e of parsed.edges) {
+        const a = idMap.get(e.from), b = idMap.get(e.to);
+        if (a === undefined || b === undefined) continue;
+        const eid = this.addEdge({ from: a, to: b });
+        if (eid >= 0 && e.label) this.setEdgeLabel(eid, e.label);
+      }
+      this.runAutoLayout();
+      this.fitView();
+      return parsed.nodes.size;
+    }
+
+    /** Returns an array of edge indices forming the shortest path, or [] if unreachable. */
+    shortestPathSafe(from, to) { return this.shortestPath(from, to) || []; }
+    shortestPath(from, to) {
+      const adj = this._buildAdj();
+      const prev = new Map(); prev.set(from, null);
+      const queue = [from];
+      while (queue.length) {
+        const u = queue.shift();
+        if (u === to) break;
+        for (const e of (adj.get(u) || [])) {
+          if (!prev.has(e.to)) { prev.set(e.to, { from: u, edgeIdx: e.edge }); queue.push(e.to); }
+        }
+      }
+      if (!prev.has(to)) return [];
+      const path = [];
+      let cur = to;
+      while (prev.get(cur)) { path.push(prev.get(cur).edgeIdx); cur = prev.get(cur).from; }
+      return path.reverse();
+    }
+    findCycles() {
+      const n = this.w.nodeCount_();
+      const color = new Uint8Array(n);
+      const result = new Set();
+      const adj = this._buildAdj();
+      for (let start = 0; start < n; start++) {
+        if (color[start] !== 0) continue;
+        const stack = [{ u: start, iter: (adj.get(start) || [])[Symbol.iterator]() }];
+        color[start] = 1;
+        while (stack.length) {
+          const top = stack[stack.length - 1];
+          const next = top.iter.next();
+          if (next.done) { color[top.u] = 2; stack.pop(); continue; }
+          const e = next.value;
+          if (color[e.to] === 1) result.add(e.edge);
+          else if (color[e.to] === 0) {
+            color[e.to] = 1;
+            stack.push({ u: e.to, iter: (adj.get(e.to) || [])[Symbol.iterator]() });
+          }
+        }
+      }
+      return [...result];
+    }
+    /** Build per-node edge-id adjacency for fast dirty-marking. */
+    _ensureAdj() {
+      if (!this._adjDirty && this._nodeAdj) return;
+      const n = this.w.nodeCount_(), m = this.w.edgeCount_();
+      const adj = new Array(n);
+      for (let i = 0; i < n; i++) adj[i] = [];
+      for (let e = 0; e < m; e++) {
+        const a = this.V.edgeFromN[e], b = this.V.edgeToN[e];
+        if (a < n) adj[a].push(e);
+        if (b < n && a !== b) adj[b].push(e);
+      }
+      this._nodeAdj = adj;
+      this._adjDirty = false;
+    }
+
+    _buildAdj() {
+      const m = this.w.edgeCount_();
+      const adj = new Map();
+      for (let i = 0; i < m; i++) {
+        const a = this.V.edgeFromN[i];
+        if (!adj.has(a)) adj.set(a, []);
+        adj.get(a).push({ to: this.V.edgeToN[i], edge: i });
+      }
+      return adj;
+    }
+
+    // ── Persistence ───────────────────────────────────────────────────────
+    toJSON() {
+      const n = this.w.nodeCount_(), m = this.w.edgeCount_();
+      const nodes = [];
+      for (let i = 0; i < n; i++) {
+        const node = {
+          id: i, kind: this.kinds[this.V.kind[i]].name,
+          x: this.V.posX[i], y: this.V.posY[i],
+          w: this.V.sizeW[i], h: this.V.sizeH[i],
+          nin: this.V.nIn[i], nout: this.V.nOut[i],
+        };
+        if (this.titles.has(i))       node.title = this.titles.get(i);
+        if (this.colors.has(i))       node.color = this.colors.get(i);
+        if (this.descriptions.has(i)) node.description = this.descriptions.get(i);
+        if (this.tags.has(i))         node.tags = this.tags.get(i);
+        if (this.status.has(i))       node.status = this.status.get(i);
+        if (this.progress.has(i))     node.progress = this.progress.get(i);
+        nodes.push(node);
+      }
+      const edges = [];
+      for (let i = 0; i < m; i++) {
+        const edge = { from: this.V.edgeFromN[i], fp: this.V.edgeFromP[i],
+                       to:   this.V.edgeToN[i],   tp: this.V.edgeToP[i] };
+        if (this.edgeLabels.has(i)) edge.label = this.edgeLabels.get(i);
+        edges.push(edge);
+      }
+      return {
+        version: 1, nodes, edges,
+        camera: { ...this.cam },
+        edgeStyle: this.options.edgeStyle,
+      };
+    }
+    loadJSON(data) {
+      this.w.reset();
+      this.titles.clear(); this.colors.clear(); this.descriptions.clear();
+      this.tags.clear(); this.status.clear(); this.progress.clear();
+      this.edgeLabels.clear();
+      const idMap = new Map();
+      for (const node of (data.nodes || [])) {
+        const id = this.addNode({
+          kind: node.kind, x: node.x, y: node.y, w: node.w, h: node.h,
+          title: node.title, color: node.color, description: node.description,
+          tags: node.tags, status: node.status, progress: node.progress,
+        });
+        idMap.set(node.id ?? id, id);
+      }
+      for (const edge of (data.edges || [])) {
+        this.addEdge({
+          from: idMap.get(edge.from) ?? edge.from, fp: edge.fp,
+          to:   idMap.get(edge.to)   ?? edge.to,   tp: edge.tp,
+          label: edge.label,
+        });
+      }
+      if (data.camera) Object.assign(this.cam, data.camera);
+      if (data.edgeStyle) this.options.edgeStyle = data.edgeStyle;
+      this.w.snapshot();
+      this._emit('change');
+    }
+    async exportPNG() {
+      return new Promise((resolve) => this.canvas.toBlob(resolve, 'image/png'));
+    }
+
+    /** Build a standalone SVG document representing the current graph. */
+    exportSVG() {
+      const n = this.w.nodeCount_(), m = this.w.edgeCount_();
+      if (n === 0) return '<svg xmlns="http://www.w3.org/2000/svg"/>';
+      let mnx = Infinity, mxx = -Infinity, mny = Infinity, mxy = -Infinity;
+      for (let i = 0; i < n; i++) {
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        if (this.V.posX[i] - hw < mnx) mnx = this.V.posX[i] - hw;
+        if (this.V.posX[i] + hw > mxx) mxx = this.V.posX[i] + hw;
+        if (this.V.posY[i] - hh < mny) mny = this.V.posY[i] - hh;
+        if (this.V.posY[i] + hh > mxy) mxy = this.V.posY[i] + hh;
+      }
+      const pad = 40;
+      const bw = mxx - mnx + pad * 2, bh = mxy - mny + pad * 2;
+      const out = [`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${mnx - pad} ${mny - pad} ${bw} ${bh}" width="${bw}" height="${bh}" style="background:${this.options.background}">`];
+      for (let i = 0; i < m; i++) {
+        const a = this.V.edgeFromN[i], b = this.V.edgeToN[i];
+        const ap = this._portWorld(a, 1, this.V.edgeFromP[i]);
+        const bp = this._portWorld(b, 0, this.V.edgeToP[i]);
+        const cA = this.colors.get(a) || this.kinds[this.V.kind[a]].color;
+        const cB = this.colors.get(b) || this.kinds[this.V.kind[b]].color;
+        const gid = `g${i}`;
+        out.push(`<defs><linearGradient id="${gid}" x1="${ap.x}" y1="${ap.y}" x2="${bp.x}" y2="${bp.y}" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="${cA}"/><stop offset="100%" stop-color="${cB}"/></linearGradient></defs>`);
+        if (this.options.edgeStyle === 'orthogonal') {
+          const path = this._orthoPath(ap, bp);
+          const d = `M ${path[0].x} ${path[0].y} ` + path.slice(1).map((p) => `L ${p.x} ${p.y}`).join(' ');
+          out.push(`<path d="${d}" stroke="url(#${gid})" stroke-width="1.7" fill="none" stroke-linejoin="round"/>`);
+        } else {
+          const dx = bp.x - ap.x, dy = bp.y - ap.y;
+          const off = Math.max(50, Math.abs(dx) * 0.5 + Math.abs(dy) * 0.4);
+          out.push(`<path d="M ${ap.x} ${ap.y} C ${ap.x + off} ${ap.y} ${bp.x - off} ${bp.y} ${bp.x} ${bp.y}" stroke="url(#${gid})" stroke-width="1.7" fill="none"/>`);
+        }
+      }
+      for (let i = 0; i < n; i++) {
+        const cat = this.kinds[this.V.kind[i]];
+        const color = this.colors.get(i) || cat.color;
+        const x = this.V.posX[i] - this.V.sizeW[i] / 2;
+        const y = this.V.posY[i] - this.V.sizeH[i] / 2;
+        const w = this.V.sizeW[i], h = this.V.sizeH[i];
+        if (cat.shape === 'diamond') {
+          const cx = this.V.posX[i], cy = this.V.posY[i];
+          out.push(`<polygon points="${cx},${y} ${x+w},${cy} ${cx},${y+h} ${x},${cy}" fill="#161b27" stroke="${color}" stroke-width="1.4"/>`);
+        } else if (cat.shape === 'ellipse') {
+          out.push(`<ellipse cx="${this.V.posX[i]}" cy="${this.V.posY[i]}" rx="${w/2}" ry="${h/2}" fill="#161b27" stroke="${color}" stroke-width="1.4"/>`);
+        } else {
+          out.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="8" fill="#161b27" stroke="${color}" stroke-width="1.4"/>`);
+          if (cat.shape === 'rect') out.push(`<rect x="${x}" y="${y}" width="${w}" height="22" rx="8" fill="${color}"/>`);
+        }
+        const title = this.titles.get(i) || `${cat.name} #${i}`;
+        out.push(`<text x="${this.V.posX[i]}" y="${y + (cat.shape === 'rect' ? 14 : h/2)}" font-family="Inter, system-ui, sans-serif" font-size="11" font-weight="600" text-anchor="middle" fill="${cat.shape === 'rect' ? '#0b0f17' : color}">${escapeXml(title)}</text>`);
+      }
+      out.push('</svg>');
+      return out.join('\n');
+    }
+
+    // ── Events ────────────────────────────────────────────────────────────
+    on(event, fn) {
+      if (!this.listeners.has(event)) this.listeners.set(event, []);
+      this.listeners.get(event).push(fn);
+      return () => { const arr = this.listeners.get(event); const i = arr.indexOf(fn); if (i >= 0) arr.splice(i, 1); };
+    }
+    _emit(event, ...args) {
+      if (this._suspendEvents && event !== 'change') return;
+      const arr = this.listeners.get(event);
+      if (!arr) return;
+      for (const fn of arr.slice()) try { fn(...args); } catch (e) { console.error(e); }
+    }
+
+    // ── Coordinate helpers ────────────────────────────────────────────────
+    _resize() {
+      const dpr = window.devicePixelRatio || 1;
+      const r = this.container.getBoundingClientRect();
+      this.canvas.width = Math.floor(r.width * dpr);
+      this.canvas.height = Math.floor(r.height * dpr);
+      this.canvas.style.width = r.width + 'px';
+      this.canvas.style.height = r.height + 'px';
+    }
+    _w2s(wx, wy) {
+      return { x: this.canvas.width / 2 + (wx + this.cam.x) * this.cam.zoom,
+               y: this.canvas.height / 2 + (wy + this.cam.y) * this.cam.zoom };
+    }
+    _s2w(cx, cy) {
+      const dpr = window.devicePixelRatio || 1;
+      const r = this.canvas.getBoundingClientRect();
+      const sx = (cx - r.left) * dpr, sy = (cy - r.top) * dpr;
+      return { x: (sx - this.canvas.width / 2) / this.cam.zoom - this.cam.x,
+               y: (sy - this.canvas.height / 2) / this.cam.zoom - this.cam.y };
+    }
+
+    // ── Interactions ──────────────────────────────────────────────────────
+    _attachEvents() {
+      const c = this.canvas;
+      c.addEventListener('contextmenu', (e) => e.preventDefault());
+
+      c.addEventListener('mousedown', (e) => {
+        this._hideMenu();
+        if (this._editingNoteEl && this._editingNote !== -1) this._editingNoteEl.blur();
+        if (this._editingTitleEl && this._editingTitle !== -1) this._editingTitleEl.blur();
+        const wp = this._s2w(e.clientX, e.clientY);
+        if (e.button === 2) { this._onRightClick(e, wp); return; }
+        if (e.button === 1) { this._startPan(e); return; }
+        // Port? (bidirectional)
+        const ph = this.w.hitTestPort(wp.x, wp.y, 11);
+        if (ph !== -1) {
+          const side = (ph >>> 24) & 0xFF, idx = (ph >>> 16) & 0xFF, nid = ph & 0xFFFF;
+          this._mode = 'connecting';
+          this._edgeStart = { nodeId: nid, side, idx };
+          this._edgeCursor = wp;
+          this.canvas.style.cursor = 'crosshair';
+          return;
+        }
+        // Resize handle?
+        const handle = this._hitHandle(wp.x, wp.y);
+        if (handle && !this.readOnly && !this.locked.has(handle.nodeId)) {
+          this._mode = 'resize';
+          this._resizingHandle = { ...handle, lastX: wp.x, lastY: wp.y };
+          return;
+        }
+        // Edge waypoint drag?
+        const wpHit = this._hitWaypoint(wp.x, wp.y);
+        if (wpHit && !this.readOnly) {
+          this._draggingWaypoint = wpHit;
+          this._mode = 'drag-waypoint';
+          return;
+        }
+        // Frame corner resize?
+        const fc = this._hitFrameCorner(wp.x, wp.y);
+        if (fc) {
+          this._mode = 'resize-frame';
+          this._resizingFrame = { ...fc, lastX: wp.x, lastY: wp.y };
+          return;
+        }
+        // Frame header drag?
+        const fh = this._hitFrameHeader(wp.x, wp.y);
+        if (fh !== -1) {
+          this._mode = 'drag-frame';
+          this._draggingFrame = fh;
+          this._frameDragLast = wp;
+          return;
+        }
+        // Sticky note drag?
+        const nh = this._hitNote(wp.x, wp.y);
+        if (nh !== -1) {
+          this._mode = 'drag-note';
+          this._draggingNote = nh;
+          this._noteDragLast = wp;
+          return;
+        }
+        // Sub-task checkbox click?
+        const taskHit = this._hitTaskCheckbox(wp.x, wp.y);
+        if (taskHit) {
+          const list = this.tasks.get(taskHit.nodeId);
+          if (list && list[taskHit.taskIdx]) {
+            list[taskHit.taskIdx].done = !list[taskHit.taskIdx].done;
+            const done = list.filter((t) => t.done).length;
+            this.progress.set(taskHit.nodeId, done / list.length);
+            this._emit('change');
+          }
+          return;
+        }
+        // Node?
+        const nid = this.w.hitTestNode(wp.x, wp.y);
+        if (nid !== -1) {
+          if (!e.shiftKey && this.V.selected[nid] === 0) { this.w.clearSelection(); this.w.setSelected(nid, 1); }
+          else if (e.shiftKey) this.w.toggleSelected(nid);
+          // Locked / read-only → select but do not drag.
+          if (!this.readOnly && !this.locked.has(nid)) {
+            this._mode = 'drag';
+            this._dragLast = wp;
+          }
+          this._emit('select', this.getSelection());
+          return;
+        }
+        // Edge click → select.
+        const eid = this._hitTestEdge(wp.x, wp.y, 6 / this.cam.zoom);
+        if (eid !== -1) {
+          if (!e.shiftKey) this.w.clearSelection();
+          this.w.setEdgeSelected(eid, 1);
+          this._emit('select', this.getSelection());
+          return;
+        }
+        // Alt-drag empty → lasso.
+        if (e.altKey) {
+          if (!e.shiftKey) this.w.clearSelection();
+          this._mode = 'lasso';
+          this._lasso = [{ x: wp.x, y: wp.y }];
+          return;
+        }
+        // Empty space → marquee.
+        if (!e.shiftKey) this.w.clearSelection();
+        this._mode = 'marquee';
+        this._marquee = { x0: wp.x, y0: wp.y, x1: wp.x, y1: wp.y };
+      });
+
+      c.addEventListener('mousemove', (e) => {
+        const wp = this._s2w(e.clientX, e.clientY);
+        if (this._mode === 'pan') {
+          const dpr = window.devicePixelRatio || 1;
+          const dxW = (e.clientX - this._dragStart.sx) * dpr / this.cam.zoom;
+          const dyW = (e.clientY - this._dragStart.sy) * dpr / this.cam.zoom;
+          this.cam.x += dxW; this.cam.y += dyW;
+          const now = performance.now();
+          const dt = Math.max(1, now - (this._panVel.lastTs || now)) / 1000;
+          this._panVel.x = dxW / dt; this._panVel.y = dyW / dt; this._panVel.lastTs = now;
+          this._dragStart.sx = e.clientX; this._dragStart.sy = e.clientY;
+          return;
+        }
+        if (this._mode === 'resize' && this._resizingHandle) {
+          const dx = wp.x - this._resizingHandle.lastX, dy = wp.y - this._resizingHandle.lastY;
+          this._applyResize(this._resizingHandle.corner, dx, dy);
+          this._resizingHandle.lastX = wp.x; this._resizingHandle.lastY = wp.y;
+          return;
+        }
+        if (this._mode === 'drag-waypoint' && this._draggingWaypoint) {
+          const { edgeIdx, wpIdx } = this._draggingWaypoint;
+          const list = this._edgeWaypoints.get(edgeIdx);
+          if (list && list[wpIdx]) { list[wpIdx].x = wp.x; list[wpIdx].y = wp.y; }
+          return;
+        }
+        if (this._mode === 'drag') {
+          if (this._gl) {
+            this._ensureAdj();
+            for (let i = 0; i < this.w.nodeCount_(); i++) if (this.V.selected[i]) {
+              this._gl.markNodeDirty(i);
+              const edges = this._nodeAdj[i];
+              if (edges) for (let k = 0; k < edges.length; k++) this._gl.markEdgeDirty(edges[k]);
+            }
+          }
+          let dx = wp.x - this._dragLast.x, dy = wp.y - this._dragLast.y;
+          if (this.options.snapToGrid) {
+            // Snap by the first selected node.
+            for (let i = 0; i < this.w.nodeCount_(); i++) {
+              if (this.V.selected[i]) {
+                const grid = this.options.gridSize;
+                const nx = Math.round((this.V.posX[i] + dx) / grid) * grid;
+                const ny = Math.round((this.V.posY[i] + dy) / grid) * grid;
+                dx = nx - this.V.posX[i]; dy = ny - this.V.posY[i]; break;
+              }
+            }
+            this._alignGuides = null;
+          } else {
+            const sa = this._computeAlignSnap(dx, dy);
+            dx += sa.dx; dy += sa.dy;
+            this._alignGuides = { v: sa.guideX !== null ? [sa.guideX] : [],
+                                  h: sa.guideY !== null ? [sa.guideY] : [] };
+          }
+          this.w.moveSelectedBy(dx, dy);
+          this._dragLast = { x: this._dragLast.x + dx, y: this._dragLast.y + dy };
+          return;
+        }
+        if (this._mode === 'drag-frame') {
+          const dx = wp.x - this._frameDragLast.x, dy = wp.y - this._frameDragLast.y;
+          const f = this.frames[this._draggingFrame];
+          f.x += dx; f.y += dy;
+          for (let i = 0; i < this.w.nodeCount_(); i++) {
+            if (this.V.posX[i] >= f.x && this.V.posX[i] <= f.x + f.w &&
+                this.V.posY[i] >= f.y && this.V.posY[i] <= f.y + f.h) {
+              this.V.posX[i] += dx; this.V.posY[i] += dy;
+            }
+          }
+          this._frameDragLast = wp;
+          return;
+        }
+        if (this._mode === 'resize-frame' && this._resizingFrame) {
+          const dx = wp.x - this._resizingFrame.lastX, dy = wp.y - this._resizingFrame.lastY;
+          this._applyFrameResize(this._resizingFrame.idx, this._resizingFrame.corner, dx, dy);
+          this._resizingFrame.lastX = wp.x; this._resizingFrame.lastY = wp.y;
+          return;
+        }
+        if (this._mode === 'drag-note') {
+          const dx = wp.x - this._noteDragLast.x, dy = wp.y - this._noteDragLast.y;
+          const n = this.notes[this._draggingNote];
+          n.x += dx; n.y += dy;
+          this._noteDragLast = wp;
+          return;
+        }
+        if (this._mode === 'connecting') {
+          this._edgeCursor = wp;
+          return;
+        }
+        if (this._mode === 'lasso' && this._lasso) {
+          const last = this._lasso[this._lasso.length - 1];
+          if (Math.hypot(wp.x - last.x, wp.y - last.y) > 6 / this.cam.zoom) {
+            this._lasso.push({ x: wp.x, y: wp.y });
+          }
+          return;
+        }
+        if (this._mode === 'marquee') {
+          this._marquee.x1 = wp.x; this._marquee.y1 = wp.y;
+          this.w.selectInRect(this._marquee.x0, this._marquee.y0, this._marquee.x1, this._marquee.y1, 1);
+          return;
+        }
+        // Idle hover.
+        const newHover = this.w.hitTestNode(wp.x, wp.y);
+        if (newHover !== this._hoveredNode) {
+          this._hoveredNode = newHover;
+          this._hoveredNodeSince = performance.now();
+          this._lastFocusComputed = -2;
+        }
+        this._hoveredEdge = newHover === -1 ? this._hitTestEdge(wp.x, wp.y, 6 / this.cam.zoom) : -1;
+        const handle = this._hitHandle(wp.x, wp.y);
+        c.style.cursor = handle ? HANDLE_CURSOR[handle.corner] : '';
+      });
+
+      c.addEventListener('mouseup', () => {
+        if (this._mode === 'connecting' && this._edgeCursor) {
+          // Bidirectional: accept either output→input or input→output drop.
+          const ph = this.w.hitTestPort(this._edgeCursor.x, this._edgeCursor.y, 14);
+          if (ph !== -1) {
+            const ts = (ph >>> 24) & 0xFF, ti = (ph >>> 16) & 0xFF, tn = ph & 0xFFFF;
+            if (ts !== this._edgeStart.side && tn !== this._edgeStart.nodeId) {
+              const fromN = this._edgeStart.side === 1 ? this._edgeStart.nodeId : tn;
+              const fromP = this._edgeStart.side === 1 ? this._edgeStart.idx    : ti;
+              const toN   = this._edgeStart.side === 0 ? this._edgeStart.nodeId : tn;
+              const toP   = this._edgeStart.side === 0 ? this._edgeStart.idx    : ti;
+              const reason = this.validateConnection(fromN, fromP, toN, toP);
+              if (reason === null) {
+                this.addEdge({ from: fromN, fp: fromP, to: toN, tp: toP });
+              } else {
+                this._emit('connection:rejected', { fromN, fromP, toN, toP, reason });
+                this._flashReject = { x: this._edgeCursor.x, y: this._edgeCursor.y, msg: reason, t0: performance.now() };
+              }
+            }
+          }
+        } else if (this._mode === 'lasso' && this._lasso && this._lasso.length > 2) {
+          for (let i = 0; i < this.w.nodeCount_(); i++) {
+            if (pointInPolygon(this.V.posX[i], this.V.posY[i], this._lasso)) this.w.setSelected(i, 1);
+          }
+          this._emit('select', this.getSelection());
+        } else if (this._mode === 'drag-waypoint') {
+          this._draggingWaypoint = null;
+          this._emit('change');
+        } else if (this._mode === 'drag' || this._mode === 'resize' ||
+                   this._mode === 'drag-frame' || this._mode === 'resize-frame' || this._mode === 'drag-note' ||
+                   this._mode === 'marquee') {
+          if (this._mode !== 'marquee') { this.w.snapshot(); this._emit('change'); }
+          this._emit('select', this.getSelection());
+        }
+        this._mode = 'idle';
+        this._edgeStart = null; this._edgeCursor = null;
+        this._marquee = null; this._lasso = null; this._alignGuides = null;
+        this._resizingHandle = null; this._resizingFrame = null;
+        this._draggingFrame = -1; this._draggingNote = -1;
+        this.canvas.classList.remove('panning');
+        this.canvas.style.cursor = '';
+      });
+
+      // ── Touch: pinch zoom + two-finger pan ────────────────────────────
+      const pointers = new Map(); // pointerId -> { x, y }
+      let pinchPrev = null;       // { dist, mid }
+      let longPressTimer = null;
+      // Track which mouse events came synthesized from pointer to suppress double-firing.
+      this._pointerSynthesizing = false;
+      c.addEventListener('pointerdown', (e) => {
+        if (e.pointerType === 'mouse') return;          // mouse already handled
+        c.setPointerCapture(e.pointerId);
+        pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+        if (pointers.size === 2) {
+          pinchPrev = pinchInfo(pointers);
+          this._mode = 'pinch';
+        } else if (pointers.size === 1) {
+          // Start long-press timer for context menu.
+          const x = e.clientX, y = e.clientY;
+          longPressTimer = setTimeout(() => {
+            longPressTimer = null;
+            const wp = this._s2w(x, y);
+            this._onRightClick({ clientX: x, clientY: y, preventDefault() {} }, wp);
+          }, 550);
+          // Simulate a left mousedown for taps.
+          this._pointerSynthesizing = true;
+          c.dispatchEvent(new MouseEvent('mousedown', { clientX: x, clientY: y, button: 0, bubbles: true }));
+          this._pointerSynthesizing = false;
+        }
+      });
+      c.addEventListener('pointermove', (e) => {
+        if (e.pointerType === 'mouse') return;
+        if (!pointers.has(e.pointerId)) return;
+        pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+        if (pointers.size === 2 && pinchPrev) {
+          const cur = pinchInfo(pointers);
+          const zoomFactor = cur.dist / pinchPrev.dist;
+          const before = this._s2w(cur.mid.x, cur.mid.y);
+          this.cam.zoom = Math.max(0.2, Math.min(3.0, this.cam.zoom * zoomFactor));
+          const after  = this._s2w(cur.mid.x, cur.mid.y);
+          this.cam.x += after.x - before.x; this.cam.y += after.y - before.y;
+          const dpr = window.devicePixelRatio || 1;
+          this.cam.x += (cur.mid.x - pinchPrev.mid.x) * dpr / this.cam.zoom;
+          this.cam.y += (cur.mid.y - pinchPrev.mid.y) * dpr / this.cam.zoom;
+          pinchPrev = cur;
+        } else if (pointers.size === 1) {
+          if (longPressTimer && Math.hypot(e.movementX || 0, e.movementY || 0) > 4) {
+            clearTimeout(longPressTimer); longPressTimer = null;
+          }
+          this._pointerSynthesizing = true;
+          c.dispatchEvent(new MouseEvent('mousemove', { clientX: e.clientX, clientY: e.clientY, button: 0, bubbles: true }));
+          this._pointerSynthesizing = false;
+        }
+      });
+      const endPointer = (e) => {
+        if (e.pointerType === 'mouse') return;
+        pointers.delete(e.pointerId);
+        if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
+        if (pointers.size < 2) { pinchPrev = null; if (this._mode === 'pinch') this._mode = 'idle'; }
+        if (pointers.size === 0) {
+          this._pointerSynthesizing = true;
+          c.dispatchEvent(new MouseEvent('mouseup', { clientX: e.clientX, clientY: e.clientY, button: 0, bubbles: true }));
+          this._pointerSynthesizing = false;
+        }
+      };
+      c.addEventListener('pointerup', endPointer);
+      c.addEventListener('pointercancel', endPointer);
+
+      c.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const isPinch = e.ctrlKey;
+        if (isPinch || e.deltaMode === 1) {
+          const before = this._s2w(e.clientX, e.clientY);
+          this.cam.zoom = Math.max(0.2, Math.min(3.0,
+            this.cam.zoom * Math.exp(-e.deltaY * (isPinch ? 0.012 : 0.05))));
+          const after = this._s2w(e.clientX, e.clientY);
+          this.cam.x += after.x - before.x; this.cam.y += after.y - before.y;
+          return;
+        }
+        // Trackpad two-finger pan.
+        const dpr = window.devicePixelRatio || 1;
+        this.cam.x -= e.deltaX * dpr / this.cam.zoom;
+        this.cam.y -= e.deltaY * dpr / this.cam.zoom;
+      }, { passive: false });
+
+      c.addEventListener('dblclick', (e) => {
+        const wp = this._s2w(e.clientX, e.clientY);
+        // Frame header → drill into subflow.
+        const fh = this._hitFrameHeader(wp.x, wp.y);
+        if (fh !== -1) { this.enterSubflow(this.frames[fh].id); return; }
+        // Note → edit text.
+        const nh = this._hitNote(wp.x, wp.y);
+        if (nh !== -1) { this._startEditingNote(nh); return; }
+        const nid = this.w.hitTestNode(wp.x, wp.y);
+        if (nid !== -1) {
+          if (this.options.dblclickEditsTitle !== false) this._startEditingTitle(nid);
+          this._emit('node:dblclick', nid);
+          return;
+        }
+        const eid = this._hitTestEdge(wp.x, wp.y, 6 / this.cam.zoom);
+        if (eid !== -1) { this._emit('edge:dblclick', eid); return; }
+        this._emit('canvas:dblclick', wp);
+      });
+    }
+
+    _startPan(e) {
+      this._mode = 'pan';
+      this._dragStart = { sx: e.clientX, sy: e.clientY };
+      this._panVel.x = 0; this._panVel.y = 0; this._panVel.lastTs = performance.now();
+      this.canvas.style.cursor = 'grabbing';
+    }
+
+    _attachKeyboard() {
+      const handler = (e) => {
+        // Only handle when our container has focus (or the canvas).
+        const inOwn = this.container.contains(document.activeElement) || document.activeElement === document.body;
+        if (!inOwn) return;
+        // Don't steal typing in inputs/textareas.
+        const t = document.activeElement;
+        if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
+        const ctrl = e.ctrlKey || e.metaKey;
+
+        if (e.code === 'Delete' || e.code === 'Backspace') {
+          if (this.deleteSelection() > 0) e.preventDefault();
+          return;
+        }
+        if (ctrl && e.code === 'KeyZ' && !e.shiftKey) { this.undo(); e.preventDefault(); return; }
+        if (ctrl && (e.code === 'KeyY' || (e.code === 'KeyZ' && e.shiftKey))) { this.redo(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyA') { this.selectAll(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyD') { this.duplicateSelection(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyC') { this._copy(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyV') { this._paste(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyG') { this.groupSelection(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'BracketRight') { this.bringToFront(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'BracketLeft')  { this.sendToBack();   e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyK')         { this.openCommandPalette(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyF' && this.options.search) { this.openSearch(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyT')         { this.toggleTheme(); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyM')         { this.setMinimap(!this.options.minimap); e.preventDefault(); return; }
+        if (ctrl && e.code === 'KeyE')         { this.setAllEdgesAnimated(this.animatedEdges.size === 0); e.preventDefault(); return; }
+        if (!ctrl && e.code === 'Digit0')      { this.fitView(); e.preventDefault(); return; }
+        if (!ctrl && e.code === 'KeyL' && !this._editingTitle && this._editingNote === -1) { this.runAutoLayout(); e.preventDefault(); return; }
+        if (e.code === 'F5' && !e.shiftKey)    { this.run(); e.preventDefault(); return; }
+        if (e.code === 'F5' && e.shiftKey)     { this.stop(); e.preventDefault(); return; }
+        if (e.code === 'Tab' && !ctrl) {
+          const n = this.w.nodeCount_();
+          if (n === 0) return;
+          let cur = this.getSelection()[0] ?? -1;
+          let next = e.shiftKey ? cur - 1 : cur + 1;
+          if (cur === -1) next = 0;
+          if (next < 0)   next = n - 1;
+          if (next >= n)  next = 0;
+          this.clearSelection(); this.w.setSelected(next, 1);
+          this.panTo(this.V.posX[next], this.V.posY[next]);
+          e.preventDefault();
+          return;
+        }
+        if (!ctrl && /^Digit[1-9]$/.test(e.code)) {
+          const slot = parseInt(e.code.slice(5), 10);
+          if (e.altKey) this.jumpBookmark(slot);
+          else          this.setBookmark(slot);
+          e.preventDefault();
+          return;
+        }
+        if (e.code === 'Escape') {
+          // Cancel an in-progress edge or exit subflow before falling through.
+          if (this._mode === 'connecting') {
+            this._mode = 'idle'; this._edgeStart = null; this._edgeCursor = null;
+            this.canvas.style.cursor = '';
+            return;
+          }
+          if (this._focusFrame !== -1) { this.exitSubflow(); return; }
+          this.clearSelection(); this._hideMenu(); return;
+        }
+        if (e.code.startsWith('Arrow')) {
+          const d = e.shiftKey ? 1 : 10;
+          const dx = e.code === 'ArrowLeft' ? -d : e.code === 'ArrowRight' ? d : 0;
+          const dy = e.code === 'ArrowUp'   ? -d : e.code === 'ArrowDown'  ? d : 0;
+          if (this.getSelection().length > 0) {
+            this.w.moveSelectedBy(dx, dy);
+            if (this._nudgeTimer) clearTimeout(this._nudgeTimer);
+            this._nudgeTimer = setTimeout(() => { this.w.snapshot(); this._emit('change'); }, 400);
+            e.preventDefault();
+          }
+        }
+      };
+      window.addEventListener('keydown', handler);
+      this._keyHandler = handler;
+    }
+
+    // ── Clipboard ─────────────────────────────────────────────────────────
+    _copy() {
+      const sel = this.getSelection();
+      if (sel.length === 0) return;
+      const selSet = new Set(sel);
+      const nodes = sel.map((i) => ({
+        origId: i,
+        kind: this.kinds[this.V.kind[i]].name,
+        x: this.V.posX[i], y: this.V.posY[i], w: this.V.sizeW[i], h: this.V.sizeH[i],
+        title: this.titles.get(i), color: this.colors.get(i),
+        description: this.descriptions.get(i), tags: this.tags.get(i),
+        status: this.status.get(i), progress: this.progress.get(i),
+      }));
+      const edges = [];
+      for (let e = 0; e < this.w.edgeCount_(); e++) {
+        if (selSet.has(this.V.edgeFromN[e]) && selSet.has(this.V.edgeToN[e])) {
+          edges.push({ from: this.V.edgeFromN[e], fp: this.V.edgeFromP[e],
+                       to:   this.V.edgeToN[e],   tp: this.V.edgeToP[e],
+                       label: this.edgeLabels.get(e) });
+        }
+      }
+      let minX = Infinity, minY = Infinity;
+      for (const n of nodes) { if (n.x < minX) minX = n.x; if (n.y < minY) minY = n.y; }
+      this._clipboard = { nodes, edges, anchor: { x: minX, y: minY } };
+    }
+    _paste() {
+      if (!this._clipboard) return;
+      const c = this._clipboard;
+      const px = -this.cam.x, py = -this.cam.y;
+      const dx = px - c.anchor.x, dy = py - c.anchor.y;
+      const idMap = new Map();
+      this.clearSelection();
+      for (const n of c.nodes) {
+        const id = this.addNode({
+          kind: n.kind, x: n.x + dx, y: n.y + dy, w: n.w, h: n.h,
+          title: n.title, color: n.color, description: n.description,
+          tags: n.tags, status: n.status, progress: n.progress,
+        });
+        idMap.set(n.origId, id);
+        this.w.setSelected(id, 1);
+      }
+      for (const e of c.edges) {
+        const a = idMap.get(e.from), b = idMap.get(e.to);
+        if (a !== undefined && b !== undefined) this.addEdge({ from: a, fp: e.fp, to: b, tp: e.tp, label: e.label });
+      }
+      this._clipboard = { ...c, anchor: { x: c.anchor.x - 24, y: c.anchor.y - 24 } };
+      this.w.snapshot();
+      this._emit('change');
+    }
+
+    // ── Resize handles ────────────────────────────────────────────────────
+    // ── Frame hit-tests + resize ──────────────────────────────────────────
+    _hitFrameHeader(qx, qy) {
+      for (let i = this.frames.length - 1; i >= 0; i--) {
+        const f = this.frames[i];
+        if (qx < f.x || qx > f.x + f.w) continue;
+        if (qy < f.y || qy > f.y + 26) continue;
+        return i;
+      }
+      return -1;
+    }
+    _hitFrameCorner(qx, qy) {
+      const tol = 14 / this.cam.zoom;
+      for (let i = this.frames.length - 1; i >= 0; i--) {
+        const f = this.frames[i];
+        const corners = {
+          tl: { x: f.x, y: f.y }, tr: { x: f.x + f.w, y: f.y },
+          bl: { x: f.x, y: f.y + f.h }, br: { x: f.x + f.w, y: f.y + f.h },
+        };
+        for (const c of ['br', 'bl', 'tr', 'tl']) {
+          const p = corners[c];
+          if (Math.abs(qx - p.x) < tol && Math.abs(qy - p.y) < tol) return { idx: i, corner: c };
+        }
+      }
+      return null;
+    }
+    _applyFrameResize(idx, corner, dx, dy) {
+      const f = this.frames[idx], MIN_W = 120, MIN_H = 80;
+      if (corner === 'br') { f.w += dx; f.h += dy; }
+      if (corner === 'bl') { f.x += dx; f.w -= dx; f.h += dy; }
+      if (corner === 'tr') { f.w += dx; f.y += dy; f.h -= dy; }
+      if (corner === 'tl') { f.x += dx; f.w -= dx; f.y += dy; f.h -= dy; }
+      if (f.w < MIN_W) { if (corner === 'bl' || corner === 'tl') f.x -= (MIN_W - f.w); f.w = MIN_W; }
+      if (f.h < MIN_H) { if (corner === 'tl' || corner === 'tr') f.y -= (MIN_H - f.h); f.h = MIN_H; }
+    }
+    _hitNote(qx, qy) {
+      for (let i = this.notes.length - 1; i >= 0; i--) {
+        const n = this.notes[i];
+        if (qx >= n.x && qx <= n.x + n.w && qy >= n.y && qy <= n.y + n.h) return i;
+      }
+      return -1;
+    }
+    _hitTaskCheckbox(qx, qy) {
+      const n = this.w.nodeCount_();
+      for (let i = n - 1; i >= 0; i--) {
+        const list = this.tasks.get(i);
+        if (!list || !list.length) continue;
+        const cx = this.V.posX[i], cy = this.V.posY[i];
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        if (qx < cx - hw || qx > cx + hw || qy < cy - hh || qy > cy + hh) continue;
+        // Rough layout: each row 14 world-units tall, starting ~30 from top.
+        const innerLeft = cx - hw + 8;
+        let curY = cy - hh + 32;
+        if (this.descriptions.get(i)) curY += 30;
+        const rowH = 14, boxS = 10;
+        for (let t = 0; t < list.length; t++) {
+          if (qx >= innerLeft && qx <= innerLeft + boxS && qy >= curY && qy <= curY + boxS) {
+            return { nodeId: i, taskIdx: t };
+          }
+          curY += rowH;
+          if (curY > cy + hh - 6) break;
+        }
+      }
+      return null;
+    }
+
+    _hitHandle(qx, qy) {
+      // Only when exactly 1 node selected.
+      const sel = this.getSelection();
+      if (sel.length !== 1) return null;
+      const id = sel[0];
+      const cx = this.V.posX[id], cy = this.V.posY[id];
+      const hw = this.V.sizeW[id] * 0.5, hh = this.V.sizeH[id] * 0.5;
+      const tol = 6 / this.cam.zoom;
+      const pts = {
+        tl: {x: cx-hw, y: cy-hh}, t: {x: cx, y: cy-hh}, tr: {x: cx+hw, y: cy-hh},
+        r:  {x: cx+hw, y: cy},
+        br: {x: cx+hw, y: cy+hh}, b: {x: cx, y: cy+hh}, bl: {x: cx-hw, y: cy+hh},
+        l:  {x: cx-hw, y: cy},
+      };
+      for (const c of HANDLE_CORNERS) {
+        const p = pts[c];
+        if (Math.abs(qx - p.x) < tol && Math.abs(qy - p.y) < tol) return { nodeId: id, corner: c };
+      }
+      return null;
+    }
+    _applyResize(corner, dx, dy) {
+      const id = this._resizingHandle.nodeId;
+      const MIN = 60;
+      let nw = this.V.sizeW[id], nh = this.V.sizeH[id];
+      let dcx = 0, dcy = 0;
+      if (HANDLE_LEFTS.has(corner))  { nw -= dx; dcx = dx * 0.5; }
+      if (HANDLE_RIGHTS.has(corner)) { nw += dx; dcx = dx * 0.5; }
+      if (HANDLE_TOPS.has(corner))   { nh -= dy; dcy = dy * 0.5; }
+      if (HANDLE_BOTS.has(corner))   { nh += dy; dcy = dy * 0.5; }
+      if (nw < MIN) { nw = MIN; dcx = 0; }
+      if (nh < MIN) { nh = MIN; dcy = 0; }
+      this.V.sizeW[id] = nw; this.V.sizeH[id] = nh;
+      this.V.posX[id] += dcx; this.V.posY[id] += dcy;
+    }
+
+    // ── Alignment guides (during drag) ────────────────────────────────────
+    _computeAlignSnap(deltaX, deltaY) {
+      const ALIGN_EPS = 6;
+      const n = this.w.nodeCount_();
+      const xs = [], ys = [];
+      for (let i = 0; i < n; i++) {
+        if (this.V.selected[i]) continue;
+        const cx = this.V.posX[i], cy = this.V.posY[i];
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        xs.push(cx, cx - hw, cx + hw);
+        ys.push(cy, cy - hh, cy + hh);
+      }
+      let bestDX = 0, bestDY = 0, foundX = null, foundY = null;
+      let bestX = ALIGN_EPS + 1, bestY = ALIGN_EPS + 1;
+      for (let i = 0; i < n; i++) {
+        if (!this.V.selected[i]) continue;
+        const tcx = this.V.posX[i] + deltaX, tcy = this.V.posY[i] + deltaY;
+        for (const x of xs) {
+          const d = tcx - x;
+          if (Math.abs(d) < bestX) { bestX = Math.abs(d); bestDX = -d; foundX = x; }
+        }
+        for (const y of ys) {
+          const d = tcy - y;
+          if (Math.abs(d) < bestY) { bestY = Math.abs(d); bestDY = -d; foundY = y; }
+        }
+      }
+      return { dx: bestX <= ALIGN_EPS ? bestDX : 0, dy: bestY <= ALIGN_EPS ? bestDY : 0,
+               guideX: foundX, guideY: foundY };
+    }
+
+    // ── Edge hit-test (JS-side, samples bezier or polyline) ──────────────
+    _hitTestEdge(qx, qy, tolWorld) {
+      const tol2 = tolWorld * tolWorld;
+      const m = this.w.edgeCount_();
+      let bestIdx = -1, bestDist = tol2;
+      for (let i = 0; i < m; i++) {
+        const ap = this._portWorld(this.V.edgeFromN[i], 1, this.V.edgeFromP[i]);
+        const bp = this._portWorld(this.V.edgeToN[i],   0, this.V.edgeToP[i]);
+        const minx = Math.min(ap.x, bp.x) - tolWorld, maxx = Math.max(ap.x, bp.x) + tolWorld;
+        const miny = Math.min(ap.y, bp.y) - tolWorld - 80, maxy = Math.max(ap.y, bp.y) + tolWorld + 80;
+        if (qx < minx || qx > maxx || qy < miny || qy > maxy) continue;
+        if (this.options.edgeStyle === 'orthogonal') {
+          const path = this._orthoPath(ap, bp);
+          for (let s = 0; s < path.length - 1; s++) {
+            const d2 = distSeg2(qx, qy, path[s].x, path[s].y, path[s+1].x, path[s+1].y);
+            if (d2 < bestDist) { bestDist = d2; bestIdx = i; }
+          }
+        } else {
+          const dxe = bp.x - ap.x, dye = bp.y - ap.y;
+          const off = Math.max(50, Math.abs(dxe) * 0.5 + Math.abs(dye) * 0.4);
+          for (let s = 0; s <= 16; s++) {
+            const t = s / 16;
+            const pt = bezPt$1(t, ap.x, ap.y, ap.x + off, ap.y, bp.x - off, bp.y, bp.x, bp.y);
+            const ddx = pt.x - qx, ddy = pt.y - qy;
+            const d2 = ddx*ddx + ddy*ddy;
+            if (d2 < bestDist) { bestDist = d2; bestIdx = i; }
+          }
+        }
+      }
+      return bestIdx;
+    }
+
+    // ── Right-click menu ──────────────────────────────────────────────────
+    _onRightClick(e, wp) {
+      if (!this.options.contextMenu) return;
+      const nid = this.w.hitTestNode(wp.x, wp.y);
+      const eid = nid === -1 ? this._hitTestEdge(wp.x, wp.y, 6 / this.cam.zoom) : -1;
+      let items;
+      if (nid !== -1) {
+        if (this.V.selected[nid] === 0) { this.w.clearSelection(); this.w.setSelected(nid, 1); }
+        items = [
+          { label: 'Duplicate',      kbd: 'Ctrl+D', fn: () => this.duplicateSelection() },
+          { label: 'Delete',         kbd: 'Del',   danger: true, fn: () => this.deleteSelection() },
+          { sep: true },
+          { label: 'Deselect',       kbd: 'Esc',   fn: () => this.clearSelection() },
+        ];
+      } else if (eid !== -1) {
+        const a = this.V.edgeFromN[eid], b = this.V.edgeToN[eid];
+        items = [
+          { label: 'Select endpoints', fn: () => { this.clearSelection(); this.w.setSelected(a,1); this.w.setSelected(b,1); this._emit('select', this.getSelection()); } },
+          { label: 'Set label…',       fn: () => { const v = prompt('Edge label', this.edgeLabels.get(eid) || ''); if (v !== null) this.setEdgeLabel(eid, v); } },
+          { sep: true },
+          { label: 'Delete edge', danger: true, fn: () => { this.w.deleteEdge(eid); this.edgeLabels.delete(eid); this.w.snapshot(); this._emit('change'); } },
+        ];
+      } else {
+        items = [
+          { label: 'Add Process node here', fn: () => this.addNode({ kind: 'process', x: wp.x, y: wp.y }) },
+          { sep: true },
+          { label: 'Select all', kbd: 'Ctrl+A', fn: () => this.selectAll() },
+          { label: 'Auto-layout',            fn: () => this.runAutoLayout() },
+          { label: 'Fit view',               fn: () => this.fitView() },
+        ];
+      }
+      this._showMenu(e.clientX, e.clientY, items);
+    }
+    // ── Inline editors (title + note) ─────────────────────────────────────
+    _startEditingTitle(nodeId) {
+      this._editingTitle = nodeId;
+      if (!this._editingTitleEl) {
+        const el = document.createElement('input');
+        el.type = 'text';
+        Object.assign(el.style, {
+          position: 'absolute', background: '#161b27', color: '#e6edf3',
+          border: '1px solid #f0b93a', borderRadius: '4px',
+          fontFamily: 'Inter, ui-sans-serif', fontSize: '12px', fontWeight: '600',
+          padding: '4px 8px', outline: 'none', zIndex: '300',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.35)',
+        });
+        this.container.appendChild(el);
+        el.addEventListener('blur', () => this._stopEditingTitle());
+        el.addEventListener('keydown', (e) => { if (e.code === 'Enter' || e.code === 'Escape') el.blur(); });
+        this._editingTitleEl = el;
+      }
+      this._positionTitleEditor();
+      this._editingTitleEl.value = this.titles.get(nodeId) || '';
+      this._editingTitleEl.placeholder = `${this.kinds[this.V.kind[nodeId]].name} #${nodeId}`;
+      this._editingTitleEl.style.display = 'block';
+      setTimeout(() => { this._editingTitleEl.focus(); this._editingTitleEl.select(); }, 20);
+    }
+    _positionTitleEditor() {
+      if (this._editingTitle === -1 || !this._editingTitleEl) return;
+      const i = this._editingTitle;
+      const cx = this.V.posX[i], cy = this.V.posY[i];
+      const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+      const tl = this._w2s(cx - hw, cy - hh);
+      const dpr = window.devicePixelRatio || 1;
+      this._editingTitleEl.style.left  = (tl.x / dpr) + 'px';
+      this._editingTitleEl.style.top   = (tl.y / dpr - 32) + 'px';
+      this._editingTitleEl.style.width = Math.max(120, this.V.sizeW[i] * this.cam.zoom / dpr) + 'px';
+    }
+    _stopEditingTitle() {
+      if (this._editingTitle === -1) return;
+      const v = this._editingTitleEl.value.trim();
+      if (v) this.titles.set(this._editingTitle, v);
+      else   this.titles.delete(this._editingTitle);
+      this._editingTitleEl.style.display = 'none';
+      this._editingTitle = -1;
+      this._emit('change');
+    }
+    _startEditingNote(idx) {
+      this._editingNote = idx;
+      if (!this._editingNoteEl) {
+        const el = document.createElement('textarea');
+        el.spellcheck = false;
+        Object.assign(el.style, {
+          position: 'absolute', resize: 'none', outline: 'none',
+          border: '1px solid #f0b93a', borderRadius: '4px',
+          padding: '8px 10px', fontFamily: 'Inter, ui-sans-serif',
+          fontSize: '12px', lineHeight: '16px', zIndex: '300',
+        });
+        this.container.appendChild(el);
+        el.addEventListener('blur', () => this._stopEditingNote());
+        el.addEventListener('keydown', (e) => { if (e.code === 'Escape') el.blur(); });
+        this._editingNoteEl = el;
+      }
+      this._positionNoteEditor();
+      const n = this.notes[idx];
+      this._editingNoteEl.style.background = n.color.fill;
+      this._editingNoteEl.style.color = n.color.text;
+      this._editingNoteEl.value = n.text;
+      this._editingNoteEl.style.display = 'block';
+      setTimeout(() => this._editingNoteEl.focus(), 20);
+    }
+    _positionNoteEditor() {
+      if (this._editingNote === -1 || !this._editingNoteEl) return;
+      const n = this.notes[this._editingNote];
+      const tl = this._w2s(n.x, n.y);
+      const dpr = window.devicePixelRatio || 1;
+      this._editingNoteEl.style.left  = (tl.x / dpr) + 'px';
+      this._editingNoteEl.style.top   = (tl.y / dpr) + 'px';
+      this._editingNoteEl.style.width  = (n.w * this.cam.zoom / dpr) + 'px';
+      this._editingNoteEl.style.height = (n.h * this.cam.zoom / dpr) + 'px';
+    }
+    _stopEditingNote() {
+      if (this._editingNote === -1) return;
+      this.notes[this._editingNote].text = this._editingNoteEl.value;
+      this._editingNoteEl.style.display = 'none';
+      this._editingNote = -1;
+      this._emit('change');
+    }
+
+    _showMenu(x, y, items) {
+      this._hideMenu();
+      const m = document.createElement('div');
+      m.style.cssText = 'position:fixed;min-width:200px;padding:4px;background:#161b27;border:1px solid rgba(255,255,255,0.16);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,0.45);z-index:99999;color:#e6edf3;font:13px/1.45 ui-sans-serif, system-ui, sans-serif;';
+      for (const it of items) {
+        if (it.sep) { const d = document.createElement('div'); d.style.cssText = 'height:1px;background:rgba(255,255,255,0.08);margin:4px;'; m.appendChild(d); continue; }
+        const d = document.createElement('div');
+        d.style.cssText = `padding:6px 10px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;${it.danger ? 'color:#ffb4a4;' : ''}`;
+        d.innerHTML = `<span>${escapeHtml(it.label)}</span>${it.kbd ? `<span style="color:#5a6577;font-family:ui-monospace,Consolas,monospace;font-size:11px;">${escapeHtml(it.kbd)}</span>` : ''}`;
+        d.onmouseenter = () => d.style.background = it.danger ? 'rgba(232,70,43,0.18)' : 'rgba(255,255,255,0.04)';
+        d.onmouseleave = () => d.style.background = '';
+        d.onclick = () => { it.fn(); this._hideMenu(); };
+        m.appendChild(d);
+      }
+      m.style.left = Math.min(x, window.innerWidth - 220) + 'px';
+      m.style.top  = Math.min(y, window.innerHeight - 280) + 'px';
+      document.body.appendChild(m);
+      this._menuEl = m;
+      setTimeout(() => {
+        const off = (ev) => { if (!m.contains(ev.target)) { this._hideMenu(); document.removeEventListener('mousedown', off, true); } };
+        document.addEventListener('mousedown', off, true);
+      }, 0);
+    }
+    _hideMenu() { if (this._menuEl) { this._menuEl.remove(); this._menuEl = null; } }
+
+    // ── Render loop ───────────────────────────────────────────────────────
+    _loop() { this._render(); this._raf = requestAnimationFrame(() => this._loop()); }
+
+    _render() {
+      // Pan inertia.
+      if (this._mode !== 'pan') {
+        const v2 = this._panVel.x * this._panVel.x + this._panVel.y * this._panVel.y;
+        if (v2 < 16) { this._panVel.x = 0; this._panVel.y = 0; }
+        else {
+          this.cam.x += this._panVel.x * (1/60); this.cam.y += this._panVel.y * (1/60);
+          this._panVel.x *= 0.91; this._panVel.y *= 0.91;
+        }
+      }
+
+      const ctx = this.ctx;
+      if (this._hooks?.beforeRender?.length) this._runHook('beforeRender', ctx);
+      if (this._gl) {
+        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this._gl.render();
+      } else {
+        ctx.fillStyle = this.options.background;
+        ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+      }
+      this._drawGrid();
+      this._drawFrames();
+      this._drawNotes();
+      this._refreshFocus();
+      this._refreshPreview();
+      this._positionTitleEditor();
+      this._positionNoteEditor();
+      this._drawDying();
+      this._drawWaypoints();
+      this._drawRemoteCursors();
+      this._drawValueBubbles();
+      if (this.options.minimap) this._drawMinimap();
+
+      const n = this.w.nodeCount_(), m = this.w.edgeCount_();
+      // Edges first.
+      this._edgePhase = (this._edgePhase + (this.options.edgeFlowSpeed || 60) * (1 / 60)) % 1000;
+      for (let i = 0; i < m; i++) {
+        const a = this.V.edgeFromN[i], b = this.V.edgeToN[i];
+        const ap = this._portWorld(a, 1, this.V.edgeFromP[i]);
+        const bp = this._portWorld(b, 0, this.V.edgeToP[i]);
+        let dim = false;
+        if (this._focusedSet && (!this._focusedSet.has(a) || !this._focusedSet.has(b))) dim = true;
+        if (this._hoveredEdge !== -1 && this._hoveredEdge !== i) dim = true;
+        if (this._focusFrame !== -1 && !(this._isInsideFocusFrame(a) && this._isInsideFocusFrame(b))) dim = true;
+        if (dim) ctx.globalAlpha = 0.18;
+        this._currentEdgeIdx = i;
+        this._drawEdge(ap, bp,
+          this.colors.get(a) || this.kinds[this.V.kind[a]].color,
+          this.colors.get(b) || this.kinds[this.V.kind[b]].color,
+          this.V.edgeSel[i] !== 0, false, this.edgeLabels.get(i));
+        ctx.globalAlpha = 1;
+      }
+      this._currentEdgeIdx = undefined;
+      // Edge in-flight preview.
+      // Show rejection toast briefly (auto-clear after expiry).
+      if (this._flashReject && performance.now() - this._flashReject.t0 >= 1400) {
+        this._flashReject = null;
+      }
+      if (this._flashReject && performance.now() - this._flashReject.t0 < 1400) {
+        const r = this._flashReject;
+        const sp = this._w2s(r.x, r.y);
+        const ctx = this.ctx;
+        const alpha = 1 - (performance.now() - r.t0) / 1400;
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = '#e8462b'; ctx.font = '600 12px Inter, ui-sans-serif';
+        const tw = ctx.measureText(r.msg).width;
+        const bx = sp.x - tw / 2 - 8, by = sp.y - 36, bw = tw + 16, bh = 22;
+        ctx.fillStyle = '#1a0e0e';
+        this._roundRect(bx, by, bw, bh, 4); ctx.fill();
+        ctx.strokeStyle = '#e8462b'; ctx.lineWidth = 1.4;
+        this._roundRect(bx, by, bw, bh, 4); ctx.stroke();
+        ctx.fillStyle = '#e8462b';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+        ctx.fillText(r.msg, sp.x, by + bh / 2);
+        ctx.restore();
+      }
+      if (this._mode === 'connecting' && this._edgeStart && this._edgeCursor) {
+        const ap = this._portWorld(this._edgeStart.nodeId, 1, this._edgeStart.idx);
+        this._drawEdge(ap, this._edgeCursor, '#8b95a7', '#8b95a7', false, true);
+      }
+      const halfW = this.canvas.width / (2 * this.cam.zoom);
+      const halfH = this.canvas.height / (2 * this.cam.zoom);
+      const viewMinX = -this.cam.x - halfW - 80, viewMaxX = -this.cam.x + halfW + 80;
+      const viewMinY = -this.cam.y - halfH - 80, viewMaxY = -this.cam.y + halfH + 80;
+      let order;
+      if (n > 300) {
+        const c = this.w.queryRect(viewMinX, viewMinY, viewMaxX, viewMaxY);
+        order = Array.from(this.V.queryRes.subarray(0, c));
+      } else {
+        order = [];
+        for (let i = 0; i < n; i++) order.push(i);
+      }
+      // Sort by z-order so bringToFront'd nodes paint last.
+      order.sort((a, b) => {
+        const za = this.zOrder.get(a) || 0, zb = this.zOrder.get(b) || 0;
+        return za === zb ? a - b : za - zb;
+      });
+      for (const i of order) {
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        if (this.V.posX[i] + hw < viewMinX || this.V.posX[i] - hw > viewMaxX) continue;
+        if (this.V.posY[i] + hh < viewMinY || this.V.posY[i] - hh > viewMaxY) continue;
+        // Skip canvas render for HTML-overlay kinds (DOM handled separately).
+        if (this.kinds[this.V.kind[i]].html) continue;
+        if (this._nodeHiddenByCollapse(i)) continue;
+        // Subflow / hovered-edge / focusedSet / reachable dimming.
+        let dim = false;
+        if (this._focusedSet && !this._focusedSet.has(i)) dim = true;
+        if (this._reachableSet && !this._reachableSet.has(i)) dim = true;
+        if (this._hoveredEdge !== -1) {
+          const a = this.V.edgeFromN[this._hoveredEdge], b = this.V.edgeToN[this._hoveredEdge];
+          if (i !== a && i !== b) dim = true;
+        }
+        if (this._focusFrame !== -1 && !this._isInsideFocusFrame(i)) dim = true;
+        if (dim) ctx.globalAlpha = 0.22;
+        // Pop-in animation.
+        const popped = this._openPopAnim(i);
+        if (this._gl) this._drawNodeOverlay(i);   // GL handled body+border; only paint text/badges/ports/etc
+        else          this._drawNode(i);
+        if (popped) ctx.restore();
+        if (dim) ctx.globalAlpha = 1;
+      }
+      this._syncHTMLOverlays();
+      this._drawMultiSelectBBox();
+      this._drawMarquee();
+      this._drawLasso();
+      this._drawAlignGuides();
+      this._drawResizeHandles();
+      this._drawFrameHandles();
+    }
+
+    _openPopAnim(i) {
+      const at = this._nodeAddedAt.get(i);
+      if (at === undefined) return false;
+      const t = (performance.now() - at) / 280;
+      if (t >= 1) { this._nodeAddedAt.delete(i); return false; }
+      const e = 1 - Math.pow(1 - t, 3);
+      const sp = this._w2s(this.V.posX[i], this.V.posY[i]);
+      this.ctx.save();
+      this.ctx.globalAlpha = e;
+      this.ctx.translate(sp.x, sp.y);
+      this.ctx.scale(0.85 + e * 0.15, 0.85 + e * 0.15);
+      this.ctx.translate(-sp.x, -sp.y);
+      return true;
+    }
+
+    _drawDying() {
+      const now = performance.now();
+      for (let i = this._dyingEdges.length - 1; i >= 0; i--) {
+        const d = this._dyingEdges[i];
+        const t = (now - d.t0) / 220;
+        if (t >= 1) { this._dyingEdges.splice(i, 1); continue; }
+        this.ctx.save();
+        this.ctx.globalAlpha = (1 - t) * 0.7;
+        this._drawEdge(d.ap, d.bp, d.colA, d.colB, false, true);
+        this.ctx.restore();
+      }
+      for (let i = this._dyingNodes.length - 1; i >= 0; i--) {
+        const d = this._dyingNodes[i];
+        const t = (now - d.t0) / 220;
+        if (t >= 1) { this._dyingNodes.splice(i, 1); continue; }
+        const ease = 1 - Math.pow(1 - t, 3);
+        const alpha = 1 - ease, scale = 1 - ease * 0.18;
+        const hw = d.w * 0.5 * scale, hh = d.h * 0.5 * scale;
+        const tl = this._w2s(d.x - hw, d.y - hh);
+        const sw = d.w * scale * this.cam.zoom, sh = d.h * scale * this.cam.zoom;
+        this.ctx.save();
+        this.ctx.globalAlpha = alpha;
+        this.ctx.fillStyle = '#161b27';
+        this._shapePath(d.shape, tl.x, tl.y, sw, sh);
+        this.ctx.fill();
+        this.ctx.strokeStyle = alphaize(d.color, 0.6);
+        this.ctx.lineWidth = 1.4 * this.cam.zoom;
+        this._shapePath(d.shape, tl.x, tl.y, sw, sh);
+        this.ctx.stroke();
+        this.ctx.restore();
+      }
+    }
+
+    _drawMultiSelectBBox() {
+      if (this._mode !== 'idle') return;
+      const sel = this.getSelection();
+      if (sel.length < 2) return;
+      let mnx = Infinity, mxx = -Infinity, mny = Infinity, mxy = -Infinity;
+      for (const i of sel) {
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        if (this.V.posX[i] - hw < mnx) mnx = this.V.posX[i] - hw;
+        if (this.V.posX[i] + hw > mxx) mxx = this.V.posX[i] + hw;
+        if (this.V.posY[i] - hh < mny) mny = this.V.posY[i] - hh;
+        if (this.V.posY[i] + hh > mxy) mxy = this.V.posY[i] + hh;
+      }
+      const pad = 10;
+      const a = this._w2s(mnx - pad, mny - pad), b = this._w2s(mxx + pad, mxy + pad);
+      this.ctx.strokeStyle = 'rgba(240,185,58,0.55)';
+      this.ctx.lineWidth = 1.2;
+      this.ctx.setLineDash([5, 4]);
+      this.ctx.strokeRect(a.x, a.y, b.x - a.x, b.y - a.y);
+      this.ctx.setLineDash([]);
+    }
+
+    _drawLasso() {
+      if (!this._lasso || this._lasso.length < 2) return;
+      this.ctx.strokeStyle = 'rgba(192,98,232,0.85)';
+      this.ctx.fillStyle   = 'rgba(192,98,232,0.10)';
+      this.ctx.lineWidth = 1.4;
+      this.ctx.setLineDash([4, 4]);
+      this.ctx.beginPath();
+      const first = this._w2s(this._lasso[0].x, this._lasso[0].y);
+      this.ctx.moveTo(first.x, first.y);
+      for (let i = 1; i < this._lasso.length; i++) {
+        const p = this._w2s(this._lasso[i].x, this._lasso[i].y);
+        this.ctx.lineTo(p.x, p.y);
+      }
+      this.ctx.closePath();
+      this.ctx.fill(); this.ctx.stroke();
+      this.ctx.setLineDash([]);
+    }
+
+    _drawFrames() {
+      for (let fi = 0; fi < this.frames.length; fi++) {
+        const f = this.frames[fi];
+        const collapsed = this.frameCollapsed.has(fi);
+        const tl = this._w2s(f.x, f.y);
+        const sw = f.w * this.cam.zoom;
+        const sh = (collapsed ? 26 : f.h) * this.cam.zoom;
+        this.ctx.fillStyle = alphaize(f.color, 0.05);
+        this._roundRect(tl.x, tl.y, sw, sh, 12 * this.cam.zoom);
+        this.ctx.fill();
+        this.ctx.strokeStyle = alphaize(f.color, 0.45);
+        this.ctx.lineWidth = 1.4 * this.cam.zoom;
+        this.ctx.setLineDash([8 * this.cam.zoom, 4 * this.cam.zoom]);
+        this._roundRect(tl.x, tl.y, sw, sh, 12 * this.cam.zoom);
+        this.ctx.stroke();
+        this.ctx.setLineDash([]);
+        const hH = 26 * this.cam.zoom;
+        this.ctx.save();
+        this._roundRect(tl.x, tl.y, sw, sh, 12 * this.cam.zoom);
+        this.ctx.clip();
+        this.ctx.fillStyle = alphaize(f.color, 0.16);
+        this.ctx.fillRect(tl.x, tl.y, sw, hH);
+        this.ctx.restore();
+        if (this.cam.zoom > 0.4) {
+          this.ctx.fillStyle = f.color;
+          this.ctx.font = `600 ${12 * this.cam.zoom}px Inter, ui-sans-serif`;
+          this.ctx.textBaseline = 'middle';
+          this.ctx.textAlign = 'left';
+          const chev = collapsed ? '▸' : '▾';
+          this.ctx.fillText(`${chev}  ${f.label}`, tl.x + 10 * this.cam.zoom, tl.y + hH * 0.5);
+        }
+      }
+    }
+    _drawFrameHandles() {
+      for (const f of this.frames) {
+        const tl = this._w2s(f.x, f.y);
+        const br = this._w2s(f.x + f.w, f.y + f.h);
+        const s = 6 * this.cam.zoom;
+        this.ctx.fillStyle = f.color;
+        for (const [x, y] of [[tl.x, tl.y], [br.x, tl.y], [tl.x, br.y], [br.x, br.y]]) {
+          this.ctx.fillRect(x - s / 2, y - s / 2, s, s);
+        }
+      }
+    }
+
+    _drawNotes() {
+      for (const n of this.notes) {
+        const tl = this._w2s(n.x, n.y);
+        const sw = n.w * this.cam.zoom, sh = n.h * this.cam.zoom;
+        this.ctx.save();
+        this.ctx.shadowColor = 'rgba(0,0,0,0.4)';
+        this.ctx.shadowBlur = 12 * this.cam.zoom;
+        this.ctx.shadowOffsetY = 4 * this.cam.zoom;
+        this.ctx.fillStyle = n.color.fill;
+        this._roundRect(tl.x, tl.y, sw, sh, 4 * this.cam.zoom);
+        this.ctx.fill();
+        this.ctx.restore();
+        this.ctx.strokeStyle = n.color.border;
+        this.ctx.lineWidth = 1 * this.cam.zoom;
+        this._roundRect(tl.x, tl.y, sw, sh, 4 * this.cam.zoom);
+        this.ctx.stroke();
+        if (this.cam.zoom > 0.4 && n.text) {
+          this.ctx.fillStyle = n.color.text;
+          this.ctx.font = `500 ${12 * this.cam.zoom}px Inter, ui-sans-serif`;
+          this.ctx.textBaseline = 'top';
+          this.ctx.textAlign = 'left';
+          const lineH = 16 * this.cam.zoom;
+          const padX = 10 * this.cam.zoom, padY = 8 * this.cam.zoom;
+          const maxW = sw - padX * 2;
+          let ty = tl.y + padY;
+          for (const para of n.text.split('\n')) {
+            const words = para.split(/\s+/);
+            let line = '';
+            for (const word of words) {
+              const test = line ? line + ' ' + word : word;
+              if (this.ctx.measureText(test).width > maxW && line) {
+                this.ctx.fillText(line, tl.x + padX, ty); ty += lineH; line = word;
+                if (ty > tl.y + sh - lineH) break;
+              } else line = test;
+            }
+            if (line && ty < tl.y + sh - lineH * 0.5) { this.ctx.fillText(line, tl.x + padX, ty); ty += lineH; }
+          }
+        }
+      }
+    }
+
+    // ── Path-highlight focus ──────────────────────────────────────────────
+    _refreshFocus() {
+      if (!this._pathHighlightEnabled) { this._focusedSet = null; return; }
+      if (this._mode !== 'idle' || this._hoveredNode < 0) { this._focusedSet = null; this._lastFocusComputed = -2; return; }
+      if (performance.now() - this._hoveredNodeSince < 200) return;
+      if (this._hoveredNode === this._lastFocusComputed) return;
+      const reach = new Set([this._hoveredNode]);
+      const queue = [this._hoveredNode];
+      const m = this.w.edgeCount_();
+      while (queue.length) {
+        const u = queue.shift();
+        for (let i = 0; i < m; i++) {
+          if (this.V.edgeFromN[i] === u && !reach.has(this.V.edgeToN[i])) { reach.add(this.V.edgeToN[i]); queue.push(this.V.edgeToN[i]); }
+          if (this.V.edgeToN[i] === u && !reach.has(this.V.edgeFromN[i])) { reach.add(this.V.edgeFromN[i]); queue.push(this.V.edgeFromN[i]); }
+        }
+      }
+      this._focusedSet = reach;
+      this._lastFocusComputed = this._hoveredNode;
+    }
+
+    // ── Hover preview popover ────────────────────────────────────────────
+    _refreshPreview() {
+      if (!this.options.hoverPreview) { this._hidePreview(); return; }
+      if (this._mode !== 'idle' || this._hoveredNode < 0) { this._hidePreview(); return; }
+      if (performance.now() - this._hoveredNodeSince < 600) return;
+      if (this._previewedNode === this._hoveredNode) { this._positionPreview(this._hoveredNode); return; }
+      this._showPreview(this._hoveredNode);
+      this._previewedNode = this._hoveredNode;
+    }
+    _showPreview(id) {
+      if (!this._previewEl) {
+        const el = document.createElement('div');
+        el.style.cssText = 'position:absolute;width:260px;padding:12px 14px;background:#161b27;border:1px solid rgba(255,255,255,0.16);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,0.45);color:#e6edf3;font:13px/1.45 ui-sans-serif, system-ui, sans-serif;pointer-events:none;opacity:0;transition:opacity 140ms;z-index:200;';
+        this.container.appendChild(el);
+        this._previewEl = el;
+      }
+      const cat = this.kinds[this.V.kind[id]];
+      const title = this.titles.get(id) || cat.name;
+      const desc = this.descriptions.get(id);
+      const tags = this.tags.get(id) || [];
+      const status = this.status.get(id);
+      const progress = this.progress.get(id);
+      const parts = [
+        `<div style="display:flex;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.08);">
+         <span style="width:24px;height:24px;border-radius:5px;background:${alphaize(cat.color, 0.18)};color:${cat.color};display:grid;place-items:center;font:700 12px Inter">${this.icon.get(id) || cat.badge}</span>
+         <div><div style="font-weight:600">${escapeHtml(title)}</div><div style="color:#8b95a7;font-family:ui-monospace,Consolas,monospace;font-size:11px;">#${id} · ${cat.name}</div></div>
+       </div>`,
+      ];
+      if (desc) parts.push(`<div style="font-size:12px;color:#8b95a7;margin-bottom:8px;">${escapeHtml(desc)}</div>`);
+      if (status || progress !== undefined) {
+        const bits = [];
+        if (status) bits.push(`<span style="padding:2px 7px;border-radius:10px;background:rgba(255,255,255,0.06);">${status}</span>`);
+        if (progress !== undefined) bits.push(`<span style="padding:2px 7px;border-radius:10px;background:rgba(255,255,255,0.06);">${Math.round(progress * 100)}%</span>`);
+        parts.push(`<div style="display:flex;gap:6px;margin-bottom:8px;font-size:11px;">${bits.join('')}</div>`);
+      }
+      if (tags.length) parts.push(`<div style="display:flex;flex-wrap:wrap;gap:4px;">${tags.map((t) => `<span style="font-size:10.5px;padding:2px 7px;border-radius:3px;background:${alphaize(cat.color, 0.18)};color:${cat.color};">${escapeHtml(t)}</span>`).join('')}</div>`);
+      this._previewEl.innerHTML = parts.join('');
+      this._positionPreview(id);
+      this._previewEl.style.opacity = '1';
+    }
+    _positionPreview(id) {
+      if (!this._previewEl) return;
+      const cx = this.V.posX[id], cy = this.V.posY[id];
+      const hw = this.V.sizeW[id] * 0.5, hh = this.V.sizeH[id] * 0.5;
+      const tr = this._w2s(cx + hw, cy - hh), tl = this._w2s(cx - hw, cy - hh);
+      const cr = this.container.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      let lx = tr.x / dpr + 12, ty = tr.y / dpr;
+      if (lx + 280 > cr.width) lx = tl.x / dpr - 280 - 12;
+      if (lx < 8) lx = 8;
+      this._previewEl.style.left = lx + 'px';
+      this._previewEl.style.top  = Math.max(8, ty) + 'px';
+    }
+    _hidePreview() {
+      if (this._previewEl) this._previewEl.style.opacity = '0';
+      this._previewedNode = -1;
+    }
+
+    // ── HTML overlay nodes ────────────────────────────────────────────────
+    _syncHTMLOverlays() {
+      const seen = new Set();
+      const n = this.w.nodeCount_();
+      for (let i = 0; i < n; i++) {
+        const cat = this.kinds[this.V.kind[i]];
+        if (!cat.html) continue;
+        seen.add(i);
+        let el = this._htmlOverlays.get(i);
+        if (!el) {
+          el = document.createElement('div');
+          el.className = 'zflow-html-node';
+          el.style.cssText = 'position:absolute;border:1px solid rgba(255,255,255,0.16);border-radius:8px;background:#161b27;color:#e6edf3;overflow:hidden;font-family:Inter, ui-sans-serif;font-size:12px;transform-origin:top left;';
+          // cat.template comes from the plugin author who registered the kind —
+          // treat as trusted. cat.name passes through escape to be safe.
+          el.innerHTML = cat.template || `<div style="padding:8px;">${escapeHtml(cat.name)} #${i}</div>`;
+          this.container.appendChild(el);
+          this._htmlOverlays.set(i, el);
+        }
+        const cx = this.V.posX[i], cy = this.V.posY[i];
+        const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+        const tl = this._w2s(cx - hw, cy - hh);
+        const dpr = window.devicePixelRatio || 1;
+        el.style.left   = (tl.x / dpr) + 'px';
+        el.style.top    = (tl.y / dpr) + 'px';
+        el.style.width  = (this.V.sizeW[i] * this.cam.zoom / dpr) + 'px';
+        el.style.height = (this.V.sizeH[i] * this.cam.zoom / dpr) + 'px';
+      }
+      for (const [id, el] of this._htmlOverlays) {
+        if (!seen.has(id)) { el.remove(); this._htmlOverlays.delete(id); }
+      }
+    }
+
+    _drawGrid() {
+      const ctx = this.ctx;
+      const step = 40 * this.cam.zoom;
+      if (step < 6) return;
+      const cx = this.canvas.width / 2 + this.cam.x * this.cam.zoom;
+      const cy = this.canvas.height / 2 + this.cam.y * this.cam.zoom;
+      const startX = cx - Math.ceil(cx / step) * step;
+      const startY = cy - Math.ceil(cy / step) * step;
+      ctx.fillStyle = this.options.snapToGrid ? 'rgba(240,185,58,0.10)' : 'rgba(255,255,255,0.045)';
+      const dpr = window.devicePixelRatio || 1;
+      for (let x = startX; x < this.canvas.width; x += step) {
+        for (let y = startY; y < this.canvas.height; y += step) {
+          ctx.fillRect(x, y, 1.4 * dpr, 1.4 * dpr);
+        }
+      }
+    }
+
+    _drawMarquee() {
+      if (!this._marquee) return;
+      const a = this._w2s(this._marquee.x0, this._marquee.y0);
+      const b = this._w2s(this._marquee.x1, this._marquee.y1);
+      const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y);
+      const w = Math.abs(b.x - a.x), h = Math.abs(b.y - a.y);
+      const ctx = this.ctx;
+      ctx.fillStyle = 'rgba(240,185,58,0.10)';
+      ctx.fillRect(x, y, w, h);
+      ctx.strokeStyle = 'rgba(240,185,58,0.7)';
+      ctx.setLineDash([4, 4]);
+      ctx.lineWidth = 1.2;
+      ctx.strokeRect(x, y, w, h);
+      ctx.setLineDash([]);
+    }
+
+    _drawAlignGuides() {
+      if (!this._alignGuides) return;
+      const ctx = this.ctx;
+      ctx.strokeStyle = 'rgba(192,98,232,0.85)';
+      ctx.lineWidth = 1.2;
+      ctx.setLineDash([2, 4]);
+      for (const g of this._alignGuides.v) {
+        const x = this._w2s(g, 0).x;
+        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, this.canvas.height); ctx.stroke();
+      }
+      for (const g of this._alignGuides.h) {
+        const y = this._w2s(0, g).y;
+        ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(this.canvas.width, y); ctx.stroke();
+      }
+      ctx.setLineDash([]);
+    }
+
+    _drawResizeHandles() {
+      if (this._mode !== 'idle') return;
+      const sel = this.getSelection();
+      if (sel.length !== 1) return;
+      const id = sel[0];
+      const cx = this.V.posX[id], cy = this.V.posY[id];
+      const hw = this.V.sizeW[id] * 0.5, hh = this.V.sizeH[id] * 0.5;
+      const pts = {
+        tl: {x: cx-hw, y: cy-hh}, t: {x: cx, y: cy-hh}, tr: {x: cx+hw, y: cy-hh},
+        r:  {x: cx+hw, y: cy},
+        br: {x: cx+hw, y: cy+hh}, b: {x: cx, y: cy+hh}, bl: {x: cx-hw, y: cy+hh},
+        l:  {x: cx-hw, y: cy},
+      };
+      const ctx = this.ctx;
+      const s = 4 * this.cam.zoom;
+      ctx.fillStyle = '#f0b93a';
+      ctx.strokeStyle = '#07090f';
+      ctx.lineWidth = 1 * this.cam.zoom;
+      for (const c of HANDLE_CORNERS) {
+        const sp = this._w2s(pts[c].x, pts[c].y);
+        ctx.beginPath();
+        ctx.rect(sp.x - s, sp.y - s, s * 2, s * 2);
+        ctx.fill(); ctx.stroke();
+      }
+    }
+
+    _portWorld(nodeId, side, idx) {
+      const cx = this.V.posX[nodeId], cy = this.V.posY[nodeId];
+      const hw = this.V.sizeW[nodeId] * 0.5, hh = this.V.sizeH[nodeId] * 0.5;
+      const total = side === 0 ? this.V.nIn[nodeId] : this.V.nOut[nodeId];
+      const t = (idx + 1) / (total + 1);
+      const py = cy - hh + this.V.sizeH[nodeId] * t;
+      return { x: side === 0 ? cx - hw : cx + hw, y: py };
+    }
+
+    _orthoPath(p1, p2) {
+      const minOff = 30, dx = p2.x - p1.x;
+      if (dx > 2 * minOff) {
+        const midX = (p1.x + p2.x) / 2;
+        return [p1, { x: midX, y: p1.y }, { x: midX, y: p2.y }, p2];
+      }
+      const midY = (p1.y + p2.y) / 2;
+      return [p1, { x: p1.x + minOff, y: p1.y }, { x: p1.x + minOff, y: midY },
+              { x: p2.x - minOff, y: midY }, { x: p2.x - minOff, y: p2.y }, p2];
+    }
+
+    _drawEdge(ap, bp, colA, colB, selected, preview, label) {
+      const as = this._w2s(ap.x, ap.y), bs = this._w2s(bp.x, bp.y);
+      const ctx = this.ctx;
+      const grad = ctx.createLinearGradient(as.x, as.y, bs.x, bs.y);
+      grad.addColorStop(0, colA); grad.addColorStop(1, colB);
+      const isActive = this._currentEdgeIdx !== undefined && this._activeEdges.has(this._currentEdgeIdx) &&
+                       this._activeEdges.get(this._currentEdgeIdx) > performance.now();
+      ctx.strokeStyle = selected ? '#f0b93a' : isActive ? '#5b8def' : (preview ? '#8b95a7' : grad);
+      ctx.lineWidth = (selected ? 2.4 : isActive ? 3.0 : 1.6) * this.cam.zoom;
+      if (isActive) { ctx.shadowColor = '#5b8def'; ctx.shadowBlur = 10 * this.cam.zoom; }
+      ctx.lineJoin = 'round';
+      let midPt;
+      if (this.options.edgeStyle === 'orthogonal') {
+        const path = this._orthoPath(as, bs);
+        ctx.beginPath();
+        ctx.moveTo(path[0].x, path[0].y);
+        for (let i = 1; i < path.length; i++) ctx.lineTo(path[i].x, path[i].y);
+        ctx.stroke();
+        midPt = path[Math.floor(path.length / 2)];
+      } else {
+        const dxe = bs.x - as.x, dye = bs.y - as.y;
+        const off = Math.max(50, Math.abs(dxe) * 0.5 + Math.abs(dye) * 0.4);
+        ctx.beginPath();
+        ctx.moveTo(as.x, as.y);
+        ctx.bezierCurveTo(as.x + off, as.y, bs.x - off, bs.y, bs.x, bs.y);
+        ctx.stroke();
+        midPt = bezPt$1(0.5, as.x, as.y, as.x + off, as.y, bs.x - off, bs.y, bs.x, bs.y);
+      }
+      // Flow particles (set per-edge via setEdgeAnimated or globally).
+      if (!preview && this._currentEdgeIdx !== undefined && this.animatedEdges.has(this._currentEdgeIdx)) {
+        const N = 4;
+        for (let k = 0; k < N; k++) {
+          const t = ((this._edgePhase / 1000) + k / N) % 1;
+          let p;
+          if (this.options.edgeStyle === 'orthogonal') {
+            const dxe = bs.x - as.x, dye = bs.y - as.y;
+            const off = Math.max(50, Math.abs(dxe) * 0.5 + Math.abs(dye) * 0.4);
+            p = bezPt$1(t, as.x, as.y, as.x + off, as.y, bs.x - off, bs.y, bs.x, bs.y);
+          } else {
+            const dxe = bs.x - as.x, dye = bs.y - as.y;
+            const off = Math.max(50, Math.abs(dxe) * 0.5 + Math.abs(dye) * 0.4);
+            p = bezPt$1(t, as.x, as.y, as.x + off, as.y, bs.x - off, bs.y, bs.x, bs.y);
+          }
+          ctx.fillStyle = colB;
+          ctx.beginPath(); ctx.arc(p.x, p.y, 3.2 * this.cam.zoom, 0, Math.PI * 2); ctx.fill();
+        }
+      }
+      // Edge label badge.
+      if (!preview && label && this.cam.zoom > 0.45) {
+        ctx.font = `600 ${10.5 * this.cam.zoom}px ui-monospace, Consolas, monospace`;
+        const tw = ctx.measureText(label).width;
+        const pad = 5 * this.cam.zoom;
+        const bw = tw + pad * 2;
+        const bh = 16 * this.cam.zoom;
+        ctx.fillStyle = '#0b0f17';
+        this._roundRect(midPt.x - bw / 2, midPt.y - bh / 2, bw, bh, 5 * this.cam.zoom);
+        ctx.fill();
+        ctx.strokeStyle = selected ? '#f0b93a' : alphaize(colA, 0.6);
+        ctx.lineWidth = 1 * this.cam.zoom;
+        ctx.stroke();
+        ctx.fillStyle = '#e6edf3';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+        ctx.fillText(label, midPt.x, midPt.y);
+      }
+    }
+
+    /** Slim overlay: only paints what WebGL didn't, with LOD gating. */
+    _drawNodeOverlay(i) {
+      const z = this.cam.zoom;
+      // LOD: below 0.3 zoom (or with >5k nodes far out) skip text + ports entirely.
+      if (z < 0.25) return;
+      if (this.w.nodeCount_() > 5000 && z < 0.55) return;
+      const cx = this.V.posX[i], cy = this.V.posY[i];
+      const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+      const tl = this._w2s(cx - hw, cy - hh);
+      const sw = this.V.sizeW[i] * z;
+      const sh = this.V.sizeH[i] * z;
+      const cat = this.kinds[this.V.kind[i]];
+      const color = this.colors.get(i) || cat.color;
+      const ctx = this.ctx;
+      if (z > 0.4) {
+        const title = this.titles.get(i) || cat.name;
+        ctx.font = `600 ${12 * z}px Inter, ui-sans-serif`;
+        ctx.fillStyle = '#0b0f17';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+        ctx.fillText(title, tl.x + sw / 2, tl.y + 11 * z);
+      }
+      // Ports only when zoom is decent.
+      if (z > 0.35) {
+        for (let s = 0; s < 2; s++) {
+          const count = s === 0 ? this.V.nIn[i] : this.V.nOut[i];
+          for (let p = 0; p < count; p++) {
+            const wp = this._portWorld(i, s, p);
+            const sp = this._w2s(wp.x, wp.y);
+            ctx.fillStyle = color;
+            ctx.strokeStyle = '#07090f';
+            ctx.lineWidth = 1.5 * z;
+            ctx.beginPath(); ctx.arc(sp.x, sp.y, 4.5 * z, 0, Math.PI * 2);
+            ctx.fill(); ctx.stroke();
+          }
+        }
+      }
+      if (this.breakpoints.has(i)) {
+        ctx.fillStyle = '#e8462b';
+        ctx.beginPath(); ctx.arc(tl.x - 4 * z, tl.y + sh / 2, 4.5 * z, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+
+    _drawNode(i) {
+      const cx = this.V.posX[i], cy = this.V.posY[i];
+      const hw = this.V.sizeW[i] * 0.5, hh = this.V.sizeH[i] * 0.5;
+      const tl = this._w2s(cx - hw, cy - hh);
+      const sw = this.V.sizeW[i] * this.cam.zoom;
+      const sh = this.V.sizeH[i] * this.cam.zoom;
+      const cat = this.kinds[this.V.kind[i]];
+      const color = this.colors.get(i) || cat.color;
+      const sel = this.V.selected[i] !== 0;
+      const hov = this._hoveredNode === i && this._mode === 'idle';
+      const ctx = this.ctx;
+
+      // Body shadow + fill.
+      ctx.save();
+      ctx.shadowColor = 'rgba(0,0,0,0.45)';
+      ctx.shadowBlur = (hov ? 14 : 10) * this.cam.zoom;
+      ctx.shadowOffsetY = 4 * this.cam.zoom;
+      ctx.fillStyle = '#161b27';
+      this._shapePath(cat.shape, tl.x, tl.y, sw, sh);
+      ctx.fill();
+      ctx.restore();
+
+      // Header strip (rect kinds only).
+      if (cat.shape === 'rect') {
+        ctx.save();
+        this._shapePath(cat.shape, tl.x, tl.y, sw, sh);
+        ctx.clip();
+        ctx.fillStyle = color;
+        ctx.fillRect(tl.x, tl.y, sw, 22 * this.cam.zoom);
+        ctx.restore();
+      }
+
+      // Running pulse — strong blue glow while exec is in flight.
+      if (this.status.get(i) === 'running') {
+        const pulse = 0.5 + 0.5 * Math.sin(performance.now() / 180);
+        ctx.save();
+        ctx.shadowColor = '#5b8def';
+        ctx.shadowBlur = (18 + 14 * pulse) * this.cam.zoom;
+        ctx.strokeStyle = `rgba(91,141,239,${0.6 + 0.4 * pulse})`;
+        ctx.lineWidth = (2.2 + pulse) * this.cam.zoom;
+        this._shapePath(cat.shape, tl.x - 2, tl.y - 2, sw + 4, sh + 4);
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      // Border / selection.
+      if (sel) {
+        ctx.save();
+        ctx.shadowColor = 'rgba(240,185,58,0.55)';
+        ctx.shadowBlur = 14 * this.cam.zoom;
+        ctx.strokeStyle = '#f0b93a'; ctx.lineWidth = 1.6 * this.cam.zoom;
+        this._shapePath(cat.shape, tl.x, tl.y, sw, sh); ctx.stroke();
+        ctx.restore();
+      } else {
+        ctx.strokeStyle = hov ? alphaize(color, 0.55) : 'rgba(255,255,255,0.08)';
+        ctx.lineWidth = (hov ? 1.3 : 1) * this.cam.zoom;
+        this._shapePath(cat.shape, tl.x, tl.y, sw, sh); ctx.stroke();
+      }
+
+      // Title.
+      if (this.cam.zoom > 0.42) {
+        const title = this.titles.get(i) || `${cat.name} #${i}`;
+        ctx.textBaseline = 'middle';
+        ctx.font = `600 ${11 * this.cam.zoom}px Inter, ui-sans-serif`;
+        if (cat.shape === 'rect') {
+          ctx.fillStyle = '#0b0f17'; ctx.textAlign = 'left';
+          ctx.fillText(title, tl.x + 10 * this.cam.zoom, tl.y + 11 * this.cam.zoom);
+        } else {
+          ctx.fillStyle = color; ctx.textAlign = 'center';
+          ctx.fillText(title, tl.x + sw / 2, tl.y + sh / 2);
+        }
+      }
+
+
+      // Progress bar (bottom).
+      const prog = this.progress.get(i);
+      if (prog !== undefined && prog > 0) {
+        const barH = 3 * this.cam.zoom;
+        const barY = tl.y + sh - barH - 2 * this.cam.zoom;
+        const barX = tl.x + 8 * this.cam.zoom;
+        const barW = sw - 16 * this.cam.zoom;
+        ctx.fillStyle = 'rgba(255,255,255,0.06)';
+        ctx.fillRect(barX, barY, barW, barH);
+        ctx.fillStyle = color;
+        ctx.fillRect(barX, barY, barW * Math.min(1, Math.max(0, prog)), barH);
+      }
+
+      // Tags.
+      const tags = this.tags.get(i);
+      if (tags && tags.length && this.cam.zoom > 0.5) {
+        let tx = tl.x + 8 * this.cam.zoom;
+        const ty = tl.y + sh - 24 * this.cam.zoom;
+        ctx.font = `500 ${9 * this.cam.zoom}px Inter, ui-sans-serif`;
+        ctx.textBaseline = 'middle';
+        for (const tag of tags) {
+          const wText = ctx.measureText(tag).width;
+          const w0 = wText + 10 * this.cam.zoom;
+          if (tx + w0 > tl.x + sw - 8 * this.cam.zoom) break;
+          ctx.fillStyle = alphaize(color, 0.18);
+          this._roundRect(tx, ty, w0, 14 * this.cam.zoom, 3 * this.cam.zoom);
+          ctx.fill();
+          ctx.fillStyle = color;
+          ctx.textAlign = 'left';
+          ctx.fillText(tag, tx + 5 * this.cam.zoom, ty + 7 * this.cam.zoom);
+          tx += w0 + 4 * this.cam.zoom;
+        }
+      }
+
+      // Sparkline (live metric).
+      const m = this.metrics.get(i);
+      if (m && m.count > 1 && cat.shape === 'rect' && this.cam.zoom > 0.45) {
+        const max = this.metricMax.get(i) || 1;
+        const px = tl.x + 8 * this.cam.zoom, py = tl.y + sh - 22 * this.cam.zoom;
+        const pw = sw - 16 * this.cam.zoom, ph = 16 * this.cam.zoom;
+        ctx.strokeStyle = alphaize(color, 0.85);
+        ctx.lineWidth = 1.5 * this.cam.zoom;
+        ctx.beginPath();
+        for (let k = 0; k < m.count; k++) {
+          const v = m.data[(m.idx + this._metricCap - m.count + k) % this._metricCap];
+          const xx = px + (k / Math.max(1, m.count - 1)) * pw;
+          const yy = py + ph - (Math.min(Math.max(v / max, 0), 1)) * ph;
+          if (k === 0) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy);
+        }
+        ctx.stroke();
+      }
+
+      // Breakpoint indicator (red filled circle on left edge).
+      if (this.breakpoints.has(i)) {
+        const bx = tl.x - 4 * this.cam.zoom, by = tl.y + sh / 2;
+        ctx.save();
+        ctx.shadowColor = '#e8462b'; ctx.shadowBlur = 8 * this.cam.zoom;
+        ctx.fillStyle = '#e8462b';
+        ctx.beginPath(); ctx.arc(bx, by, 4.5 * this.cam.zoom, 0, Math.PI * 2); ctx.fill();
+        ctx.restore();
+      }
+
+      // Status dot (top-right of header).
+      const st = this.status.get(i);
+      if (st && cat.shape === 'rect') {
+        const sCol = STATUS_COLORS[st] || '#8b95a7';
+        const dotX = tl.x + sw - 12 * this.cam.zoom;
+        const dotY = tl.y + 11 * this.cam.zoom;
+        ctx.save();
+        ctx.shadowColor = sCol; ctx.shadowBlur = 6 * this.cam.zoom;
+        ctx.fillStyle = sCol;
+        ctx.beginPath(); ctx.arc(dotX, dotY, 3.5 * this.cam.zoom, 0, Math.PI * 2); ctx.fill();
+        ctx.restore();
+      }
+
+      // Locked indicator (small lock glyph top-left).
+      if (this.locked.has(i)) {
+        const lx = tl.x + 6 * this.cam.zoom, ly = tl.y + 6 * this.cam.zoom;
+        const lz = 10 * this.cam.zoom;
+        ctx.fillStyle = 'rgba(0,0,0,0.55)';
+        this._roundRect(lx, ly, lz, lz, 2 * this.cam.zoom); ctx.fill();
+        ctx.strokeStyle = '#f0b93a'; ctx.lineWidth = 1.2 * this.cam.zoom;
+        ctx.strokeRect(lx + 2.5 * this.cam.zoom, ly + 5 * this.cam.zoom, lz - 5 * this.cam.zoom, lz - 6 * this.cam.zoom);
+        ctx.beginPath();
+        ctx.arc(lx + lz * 0.5, ly + 5 * this.cam.zoom, 2 * this.cam.zoom, Math.PI, 0);
+        ctx.stroke();
+      }
+
+      // Image thumbnail (top of body).
+      const imgUrl = this.image.get(i);
+      if (imgUrl && cat.shape === 'rect' && this.cam.zoom > 0.5) {
+        const img = this._getImage(imgUrl);
+        if (img && img.ready) {
+          const ix = tl.x + 8 * this.cam.zoom;
+          const iy = tl.y + 28 * this.cam.zoom;
+          const iw = sw - 16 * this.cam.zoom;
+          const ih = Math.min(54 * this.cam.zoom, sh * 0.45);
+          ctx.save();
+          this._roundRect(ix, iy, iw, ih, 4 * this.cam.zoom);
+          ctx.clip();
+          ctx.drawImage(img.img, ix, iy, iw, ih);
+          ctx.restore();
+        }
+      }
+
+      // Inline markdown description (one line, runs).
+      const desc = this.descriptions.get(i);
+      if (desc && cat.shape === 'rect' && this.cam.zoom > 0.5 && !imgUrl) {
+        const runs = this.options.inlineMarkdown !== false ? parseInlineMd(desc) : [{ t: desc, style: 'p' }];
+        let dx = tl.x + 8 * this.cam.zoom;
+        const dyy = tl.y + 44 * this.cam.zoom;
+        ctx.font = `400 ${10 * this.cam.zoom}px Inter, ui-sans-serif`;
+        ctx.textBaseline = 'top';
+        const maxX = tl.x + sw - 8 * this.cam.zoom;
+        for (const run of runs) {
+          let f = `${10 * this.cam.zoom}px `;
+          if (run.style === 'b')  f = `700 ${10 * this.cam.zoom}px Inter, ui-sans-serif`;
+          else if (run.style === 'i')  f = `italic 400 ${10 * this.cam.zoom}px Inter, ui-sans-serif`;
+          else if (run.style === 'c')  f = `${10 * this.cam.zoom}px ui-monospace, Consolas, monospace`;
+          else if (run.style === 'a')  f = `400 ${10 * this.cam.zoom}px Inter, ui-sans-serif`;
+          else                          f = `400 ${10 * this.cam.zoom}px Inter, ui-sans-serif`;
+          ctx.font = f;
+          ctx.fillStyle = run.style === 'a' ? '#5be0d0' : run.style === 'c' ? '#f0b93a' : '#c8d1de';
+          const tw = ctx.measureText(run.t).width;
+          if (dx + tw > maxX) break;
+          ctx.fillText(run.t, dx, dyy);
+          dx += tw;
+        }
+      }
+
+      // Search hit glow.
+      if (this._searchHits && this._searchHits.includes(i)) {
+        ctx.save();
+        ctx.shadowColor = '#5be0d0';
+        ctx.shadowBlur = 18 * this.cam.zoom;
+        ctx.strokeStyle = '#5be0d0';
+        ctx.lineWidth = 1.6 * this.cam.zoom;
+        this._shapePath(cat.shape, tl.x - 3, tl.y - 3, sw + 6, sh + 6);
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      // Ports.
+      for (let s = 0; s < 2; s++) {
+        const count = s === 0 ? this.V.nIn[i] : this.V.nOut[i];
+        for (let p = 0; p < count; p++) {
+          const wp = this._portWorld(i, s, p);
+          const sp = this._w2s(wp.x, wp.y);
+          ctx.fillStyle = color;
+          ctx.strokeStyle = '#07090f';
+          ctx.lineWidth = 1.5 * this.cam.zoom;
+          ctx.beginPath(); ctx.arc(sp.x, sp.y, 4.5 * this.cam.zoom, 0, Math.PI * 2);
+          ctx.fill(); ctx.stroke();
+        }
+      }
+    }
+
+    _shapePath(shape, x, y, w, h) {
+      const ctx = this.ctx;
+      if (shape === 'diamond') {
+        const cx = x + w / 2, cy = y + h / 2;
+        ctx.beginPath();
+        ctx.moveTo(cx, y); ctx.lineTo(x + w, cy);
+        ctx.lineTo(cx, y + h); ctx.lineTo(x, cy);
+        ctx.closePath(); return;
+      }
+      if (shape === 'ellipse') {
+        ctx.beginPath();
+        ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, Math.PI * 2);
+        return;
+      }
+      if (shape === 'hexagon') {
+        const cx = x + w / 2, cy = y + h / 2;
+        const hw = w / 2, a = hw * 0.45;
+        ctx.beginPath();
+        ctx.moveTo(cx - hw + a, y); ctx.lineTo(cx + hw - a, y);
+        ctx.lineTo(x + w, cy);      ctx.lineTo(cx + hw - a, y + h);
+        ctx.lineTo(cx - hw + a, y + h); ctx.lineTo(x, cy);
+        ctx.closePath(); return;
+      }
+      this._roundRect(x, y, w, h, 8);
+    }
+    _roundRect(x, y, w, h, r) {
+      const ctx = this.ctx;
+      ctx.beginPath();
+      ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y);
+      ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+      ctx.lineTo(x + w, y + h - r);
+      ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+      ctx.lineTo(x + r, y + h);
+      ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+      ctx.lineTo(x, y + r);
+      ctx.quadraticCurveTo(x, y, x + r, y);
+      ctx.closePath();
+    }
+  }
+
+  // ── Free helpers ──────────────────────────────────────────────────────────
+  function bezPt$1(t, x1, y1, cx1, cy1, cx2, cy2, x2, y2) {
+    const mt = 1 - t, mt2 = mt * mt, t2 = t * t;
+    const a = mt2 * mt, b = 3 * mt2 * t, c = 3 * mt * t2, d = t2 * t;
+    return { x: a*x1 + b*cx1 + c*cx2 + d*x2, y: a*y1 + b*cy1 + c*cy2 + d*y2 };
+  }
+  function distSeg2(qx, qy, x1, y1, x2, y2) {
+    const dx = x2 - x1, dy = y2 - y1;
+    const len2 = dx*dx + dy*dy;
+    if (len2 === 0) { const ddx = qx - x1, ddy = qy - y1; return ddx*ddx + ddy*ddy; }
+    let t = ((qx - x1) * dx + (qy - y1) * dy) / len2;
+    t = Math.max(0, Math.min(1, t));
+    const px = x1 + t * dx, py = y1 + t * dy;
+    const ddx = qx - px, ddy = qy - py;
+    return ddx*ddx + ddy*ddy;
+  }
+  function alphaize(hex, a) {
+    if (hex.startsWith('rgb')) return hex.replace(')', `, ${a})`).replace('rgb(', 'rgba(');
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${a})`;
+  }
+  const STATUS_COLORS = {
+    ok: '#5bd17a', live: '#5bd17a', running: '#5b8def', idle: '#8b95a7',
+    warn: '#f0b93a', error: '#e8462b', failed: '#e8462b', stopped: '#8b95a7',
+  };
+
+  function parseInlineMd(s) {
+    if (!s) return [{ t: '', style: 'p' }];
+    const runs = [];
+    const re = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;
+    let last = 0, m;
+    while ((m = re.exec(s)) !== null) {
+      if (m.index > last) runs.push({ t: s.slice(last, m.index), style: 'p' });
+      const tok = m[1];
+      if (tok.startsWith('**')) runs.push({ t: tok.slice(2, -2), style: 'b' });
+      else if (tok.startsWith('`')) runs.push({ t: tok.slice(1, -1), style: 'c' });
+      else if (tok.startsWith('[')) {
+        const close = tok.indexOf('](');
+        runs.push({ t: tok.slice(1, close), style: 'a', href: tok.slice(close + 2, -1) });
+      }
+      else runs.push({ t: tok.slice(1, -1), style: 'i' });
+      last = m.index + tok.length;
+    }
+    if (last < s.length) runs.push({ t: s.slice(last), style: 'p' });
+    return runs;
+  }
+
+  function pinchInfo(pointers) {
+    const [a, b] = [...pointers.values()];
+    const dx = b.x - a.x, dy = b.y - a.y;
+    return { dist: Math.hypot(dx, dy) || 1, mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } };
+  }
+
+  function isCompatibleType(out, inn) {
+    if (!out || !inn) return true;
+    if (out === inn) return true;
+    if (out === 'any' || inn === 'any') return true;
+    if (inn === 'string') return true; // anything stringifies
+    const numerics = new Set(['number', 'int', 'float', 'integer']);
+    if (numerics.has(out) && numerics.has(inn)) return true;
+    return false;
+  }
+
+  function fnvHash(v) {
+    // Fast structural hash for primitives / shallow objects / arrays. Avoids JSON.
+    let h = 0x811c9dc5;
+    const visit = (x) => {
+      if (x === null || x === undefined) { h = (h ^ 0xff) * 0x01000193 >>> 0; return; }
+      const t = typeof x;
+      if (t === 'number') { h = (h ^ ((x * 1e6) | 0)) * 0x01000193 >>> 0; return; }
+      if (t === 'string') { for (let i = 0; i < x.length; i++) h = (h ^ x.charCodeAt(i)) * 0x01000193 >>> 0; return; }
+      if (t === 'boolean') { h = (h ^ (x ? 1 : 0)) * 0x01000193 >>> 0; return; }
+      if (Array.isArray(x)) { for (const e of x) visit(e); return; }
+      if (t === 'object') { for (const k of Object.keys(x).sort()) { for (let i = 0; i < k.length; i++) h = (h ^ k.charCodeAt(i)) * 0x01000193 >>> 0; visit(x[k]); } return; }
+    };
+    visit(v);
+    return h >>> 0;
+  }
+
+  function bubbleSummary(v) {
+    if (typeof v === 'number') return formatRuntimeValue(v);
+    if (v && typeof v === 'object') {
+      return Object.entries(v).filter(([, x]) => x != null).map(([k, x]) => `${k}: ${formatRuntimeValue(x)}`).join('  ');
+    }
+    return formatRuntimeValue(v);
+  }
+
+  function formatRuntimeValue(v) {
+    if (v === null || v === undefined) return '∅';
+    if (typeof v === 'number') return Number.isInteger(v) ? String(v) : v.toFixed(2);
+    if (typeof v === 'boolean') return v ? 'true' : 'false';
+    if (typeof v === 'string') return v.length > 22 ? v.slice(0, 22) + '…' : v;
+    try { const s = JSON.stringify(v); return s.length > 30 ? s.slice(0, 30) + '…' : s; }
+    catch { return '[obj]'; }
+  }
+
+  function parseHex$1(h) {
+    return [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
+  }
+  function pointInPolygon(px, py, poly) {
+    let inside = false;
+    for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+      const xi = poly[i].x, yi = poly[i].y, xj = poly[j].x, yj = poly[j].y;
+      const intersect = ((yi > py) !== (yj > py)) && (px < (xj - xi) * (py - yi) / (yj - yi) + xi);
+      if (intersect) inside = !inside;
+    }
+    return inside;
+  }
+  function escapeHtml(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+  function escapeXml(s) { return escapeHtml(s); }
+
+  // ── Mermaid + DOT importers ───────────────────────────────────────────────
+  function parseMermaid(text) {
+    const nodes = new Map(), edges = [];
+    const lines = text.split('\n').map((l) => l.replace(/\/\/.*$/, '').trim()).filter(Boolean);
+    let i0 = 0;
+    if (lines[0] && /^(graph|flowchart)\b/i.test(lines[0])) i0 = 1;
+    const NODE_RE = /([A-Za-z_][A-Za-z0-9_]*)(?:(\[\[)([^\]]+)\]\]|\[([^\]]+)\]|\(\(([^)]+)\)\)|\(([^)]+)\)|\{([^}]+)\})?/;
+    function consume(s, pos) {
+      const sub = s.slice(pos);
+      const m = sub.match(NODE_RE);
+      if (!m || m.index !== 0) return null;
+      const id = m[1];
+      let shape = 'default', label = id;
+      if (m[2]) { shape = 'subroutine'; label = m[3]; }
+      else if (m[4]) { shape = 'rect';   label = m[4]; }
+      else if (m[5]) { shape = 'circle'; label = m[5]; }
+      else if (m[6]) { shape = 'round';  label = m[6]; }
+      else if (m[7]) { shape = 'rhombus';label = m[7]; }
+      if (!nodes.has(id) || nodes.get(id).shape === 'default') nodes.set(id, { label, shape });
+      return { id, end: pos + m[0].length };
+    }
+    for (let li = i0; li < lines.length; li++) {
+      const ln = lines[li];
+      const a = consume(ln, 0); if (!a) continue;
+      let rest = ln.slice(a.end).trim();
+      const arrow = rest.match(/^([-=.~]+>?|---|===)\s*(?:\|([^|]+)\|\s*)?/);
+      if (!arrow) continue;
+      rest = rest.slice(arrow[0].length).trim();
+      const offset = ln.length - rest.length;
+      const b = consume(ln, offset); if (!b) continue;
+      edges.push({ from: a.id, to: b.id, label: arrow[2] || null });
+    }
+    return { nodes, edges };
+  }
+  function parseDot(text) {
+    const nodes = new Map(), edges = [];
+    text = text.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*#.*$/gm, '').replace(/\/\/.*$/gm, '');
+    text = text.replace(/^\s*(?:strict\s+)?(?:di)?graph\s+\w*\s*\{/i, '').replace(/\}\s*$/, '');
+    const stmts = []; let buf = '', depth = 0;
+    for (const ch of text) {
+      if (ch === '[') depth++;
+      if (ch === ']') depth--;
+      if ((ch === ';' || ch === '\n') && depth === 0) {
+        if (buf.trim()) stmts.push(buf.trim());
+        buf = '';
+      } else buf += ch;
+    }
+    if (buf.trim()) stmts.push(buf.trim());
+    const ID_RE = /"([^"]+)"|([A-Za-z_][A-Za-z0-9_]*)/;
+    function takeId(s, p) {
+      const m = s.slice(p).match(ID_RE);
+      if (!m || m.index !== 0) return null;
+      return { id: m[1] || m[2], end: p + m[0].length };
+    }
+    function takeAttrs(s, p) {
+      const sub = s.slice(p).match(/^\s*\[([^\]]*)\]/);
+      if (!sub) return null;
+      const lm = sub[1].match(/label\s*=\s*"([^"]*)"|label\s*=\s*([A-Za-z_][A-Za-z0-9_]*)/);
+      return { label: lm ? (lm[1] || lm[2]) : null, end: p + sub[0].length };
+    }
+    for (const stmt of stmts) {
+      let p = 0;
+      const a = takeId(stmt, p); if (!a) continue;
+      p = a.end;
+      while (stmt[p] === ' ' || stmt[p] === '\t') p++;
+      const arrow = stmt.slice(p).match(/^(->|--)\s*/);
+      if (arrow) {
+        p += arrow[0].length;
+        const b = takeId(stmt, p); if (!b) continue;
+        p = b.end;
+        const attrs = takeAttrs(stmt, p);
+        if (!nodes.has(a.id)) nodes.set(a.id, { label: a.id });
+        if (!nodes.has(b.id)) nodes.set(b.id, { label: b.id });
+        edges.push({ from: a.id, to: b.id, label: attrs ? attrs.label : null });
+      } else {
+        const attrs = takeAttrs(stmt, p);
+        const label = attrs && attrs.label ? attrs.label : a.id;
+        if (!nodes.has(a.id) || nodes.get(a.id).label === a.id) nodes.set(a.id, { label });
+      }
+    }
+    return { nodes, edges };
+  }
+
+  // zflow WebGL renderer — optimized path.
+  //
+  // Architecture:
+  //   • One shared static quad geometry (6 verts, never changes).
+  //   • Per-node attributes (center, size, color, sel) live in a persistent
+  //     instance buffer sized at nodeCap() at init time. We never allocate
+  //     per-frame — we update only the slots that the host marked dirty.
+  //   • Camera (pan/zoom) is uniform-only, so panning is FREE in buffer terms.
+  //   • ANGLE_instanced_arrays draws all nodes in a single drawCall.
+  //   • Edges keep a persistent buffer too with dirty tracking + bezier
+  //     tesselation regenerated only when an endpoint moves.
+  //
+  // Result: 100k nodes pan/zoom at 60 fps with zero GC. Adding/moving a
+  // single node touches ~28 bytes of GPU memory, not 7 MB.
+
+  const VS = `
+attribute vec2 aQuad;
+attribute vec2 aCenter;
+attribute vec2 aSize;
+attribute vec3 aColor;
+attribute float aSelected;
+uniform vec2 uCam;
+uniform float uZoom;
+uniform vec2 uScreen;
+varying vec3 vColor;
+varying float vSelected;
+varying vec2 vUv;
+void main() {
+  vUv = aQuad;
+  vSelected = aSelected;
+  vColor = aColor;
+  vec2 worldPos = aCenter + aQuad * aSize;
+  vec2 screen = (worldPos + uCam) * uZoom;
+  vec2 ndc = (screen / uScreen) * 2.0;
+  gl_Position = vec4(ndc.x, -ndc.y, 0.0, 1.0);
+}`;
+
+  const FS = `
+precision mediump float;
+varying vec3 vColor;
+varying float vSelected;
+varying vec2 vUv;
+void main() {
+  vec2 q = abs(vUv);
+  float d = max(q.x, q.y);
+  float alpha = smoothstep(1.0, 0.92, d);
+  float header = step(0.7, vUv.y) * 0.18;
+  vec3 col = vColor + vec3(header);
+  if (vSelected > 0.5) col = mix(col, vec3(0.94, 0.73, 0.23), 0.55);
+  gl_FragColor = vec4(col, alpha);
+}`;
+
+  const EDGE_VS = `
+attribute vec2 aPos;
+attribute vec3 aColor;
+uniform vec2 uCam;
+uniform float uZoom;
+uniform vec2 uScreen;
+varying vec3 vColor;
+void main() {
+  vColor = aColor;
+  vec2 screen = (aPos + uCam) * uZoom;
+  vec2 ndc = (screen / uScreen) * 2.0;
+  gl_Position = vec4(ndc.x, -ndc.y, 0.0, 1.0);
+}`;
+
+  const EDGE_FS = `
+precision mediump float;
+varying vec3 vColor;
+void main() { gl_FragColor = vec4(vColor, 0.85); }`;
+
+  const NODE_STRIDE_F = 8;      // cx, cy, sw, sh, r, g, b, sel
+  const EDGE_SEGS = 24;
+  const EDGE_VERTS_PER = (EDGE_SEGS) * 2;
+  const EDGE_STRIDE_F = 5;       // x, y, r, g, b per vertex
+
+  class WebGLRenderer {
+    constructor(flow) {
+      this.flow = flow;
+      this.glCanvas = document.createElement('canvas');
+      this.glCanvas.style.cssText = `position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;`;
+      flow.container.insertBefore(this.glCanvas, flow.canvas);
+      flow.canvas.style.background = 'transparent';
+      flow.canvas.style.position = 'absolute';
+      flow.canvas.style.zIndex = '1';
+      this.gl = this.glCanvas.getContext('webgl', { antialias: true, alpha: true, premultipliedAlpha: false });
+      if (!this.gl) { this.disabled = true; console.warn('zflow: WebGL unavailable'); return; }
+      this.instExt = this.gl.getExtension('ANGLE_instanced_arrays');
+      this.cap = flow.w.nodeCap();
+      this.edgeCap = flow.w.edgeCap();
+      this._resize();
+      this._setupShaders();
+      this._setupBuffers();
+      this._hookDirty();
+      this._resizeObs = new ResizeObserver(() => this._resize());
+      this._resizeObs.observe(flow.container);
+      this._dirty = new Set();        // node ids needing buffer upload
+      this._dirtyEdges = new Set();
+      this._fullRebuildNeeded = true;
+      this._lastNodeCount = 0;
+      this._lastEdgeCount = 0;
+    }
+
+    _hookDirty() {
+      const f = this.flow;
+      f.on('change', () => { this._fullRebuildNeeded = true; });
+      // Hijack moveSelectedBy / moveNode so position changes only mark dirty.
+      const origMove = f.w.moveSelectedBy;
+      if (origMove) {
+        f.w.moveSelectedBy = (dx, dy) => {
+          origMove.call(f.w, dx, dy);
+          for (let i = 0; i < f.w.nodeCount_(); i++) if (f.V.selected[i]) this._dirty.add(i);
+        };
+      }
+    }
+
+    _resize() {
+      const dpr = window.devicePixelRatio || 1;
+      const r = this.flow.container.getBoundingClientRect();
+      this.glCanvas.width  = r.width  * dpr;
+      this.glCanvas.height = r.height * dpr;
+      this.gl?.viewport(0, 0, this.glCanvas.width, this.glCanvas.height);
+    }
+
+    _setupShaders() {
+      const gl = this.gl;
+      this.progNode = link(gl, VS, FS);
+      this.progEdge = link(gl, EDGE_VS, EDGE_FS);
+      // Cache uniform/attrib locations.
+      this.locN = {
+        aQuad: gl.getAttribLocation(this.progNode, 'aQuad'),
+        aCenter: gl.getAttribLocation(this.progNode, 'aCenter'),
+        aSize: gl.getAttribLocation(this.progNode, 'aSize'),
+        aColor: gl.getAttribLocation(this.progNode, 'aColor'),
+        aSel: gl.getAttribLocation(this.progNode, 'aSelected'),
+        uCam: gl.getUniformLocation(this.progNode, 'uCam'),
+        uZoom: gl.getUniformLocation(this.progNode, 'uZoom'),
+        uScreen: gl.getUniformLocation(this.progNode, 'uScreen'),
+      };
+      this.locE = {
+        aPos: gl.getAttribLocation(this.progEdge, 'aPos'),
+        aColor: gl.getAttribLocation(this.progEdge, 'aColor'),
+        uCam: gl.getUniformLocation(this.progEdge, 'uCam'),
+        uZoom: gl.getUniformLocation(this.progEdge, 'uZoom'),
+        uScreen: gl.getUniformLocation(this.progEdge, 'uScreen'),
+      };
+    }
+
+    _setupBuffers() {
+      const gl = this.gl;
+      // Shared quad: 6 verts, 2 floats each, static.
+      this.quadBuf = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuf);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+        -1, -1,   1, -1,   -1, 1,
+         1, -1,   1,  1,   -1, 1,
+      ]), gl.STATIC_DRAW);
+
+      // Per-instance node buffer pre-allocated at full cap.
+      this.nodeData = new Float32Array(this.cap * NODE_STRIDE_F);
+      this.nodeBuf = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.nodeBuf);
+      gl.bufferData(gl.ARRAY_BUFFER, this.nodeData.byteLength, gl.DYNAMIC_DRAW);
+
+      // Edge buffer pre-allocated.
+      this.edgeData = new Float32Array(this.edgeCap * EDGE_VERTS_PER * EDGE_STRIDE_F);
+      this.edgeBuf = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.edgeBuf);
+      gl.bufferData(gl.ARRAY_BUFFER, this.edgeData.byteLength, gl.DYNAMIC_DRAW);
+    }
+
+    _writeNode(i) {
+      const f = this.flow;
+      const cat = f.kinds[f.V.kind[i]];
+      const hex = f.colors.get(i) || cat.color;
+      const off = i * NODE_STRIDE_F;
+      this.nodeData[off    ] = f.V.posX[i];
+      this.nodeData[off + 1] = f.V.posY[i];
+      this.nodeData[off + 2] = f.V.sizeW[i] * 0.5;
+      this.nodeData[off + 3] = f.V.sizeH[i] * 0.5;
+      const [r, g, b] = parseHex(hex);
+      this.nodeData[off + 4] = r;
+      this.nodeData[off + 5] = g;
+      this.nodeData[off + 6] = b;
+      this.nodeData[off + 7] = f.V.selected[i] !== 0 ? 1 : 0;
+    }
+
+    _writeEdge(i) {
+      const f = this.flow;
+      const a = f.V.edgeFromN[i], b = f.V.edgeToN[i];
+      const ap = f._portWorld(a, 1, f.V.edgeFromP[i]);
+      const bp = f._portWorld(b, 0, f.V.edgeToP[i]);
+      const col = parseHex(f.colors.get(a) || f.kinds[f.V.kind[a]].color);
+      const off = i * EDGE_VERTS_PER * EDGE_STRIDE_F;
+      const ortho = f.options.edgeStyle === 'orthogonal';
+      const offCv = Math.max(50, Math.abs(bp.x - ap.x) * 0.5 + Math.abs(bp.y - ap.y) * 0.4);
+      let prev = { x: ap.x, y: ap.y };
+      let o = off;
+      for (let s = 1; s <= EDGE_SEGS; s++) {
+        const t = s / EDGE_SEGS;
+        let pt;
+        if (ortho) {
+          const mx = (ap.x + bp.x) * 0.5;
+          pt = t < 0.33 ? lerp(ap, { x: mx, y: ap.y }, t / 0.33)
+             : t < 0.67 ? lerp({ x: mx, y: ap.y }, { x: mx, y: bp.y }, (t - 0.33) / 0.34)
+             :            lerp({ x: mx, y: bp.y }, bp, (t - 0.67) / 0.33);
+        } else {
+          pt = bezPt(t, ap.x, ap.y, ap.x + offCv, ap.y, bp.x - offCv, bp.y, bp.x, bp.y);
+        }
+        this.edgeData[o++] = prev.x; this.edgeData[o++] = prev.y;
+        this.edgeData[o++] = col[0]; this.edgeData[o++] = col[1]; this.edgeData[o++] = col[2];
+        this.edgeData[o++] = pt.x;   this.edgeData[o++] = pt.y;
+        this.edgeData[o++] = col[0]; this.edgeData[o++] = col[1]; this.edgeData[o++] = col[2];
+        prev = pt;
+      }
+    }
+
+    render() {
+      if (this.disabled) return;
+      const gl = this.gl;
+      const f = this.flow;
+      const n = f.w.nodeCount_(), m = f.w.edgeCount_();
+      const dpr = window.devicePixelRatio || 1;
+
+      gl.clearColor(0.027, 0.035, 0.06, 1.0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+      const camWX = f.cam.x + (this.glCanvas.width  / (2 * dpr * f.cam.zoom));
+      const camWY = f.cam.y + (this.glCanvas.height / (2 * dpr * f.cam.zoom));
+
+      // ── Detect what needs upload ────────────────────────────────────
+      if (this._fullRebuildNeeded || n !== this._lastNodeCount) {
+        for (let i = 0; i < n; i++) this._writeNode(i);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.nodeBuf);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.nodeData.subarray(0, n * NODE_STRIDE_F));
+        this._dirty.clear();
+      } else if (this._dirty.size) {
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.nodeBuf);
+        // Combine contiguous dirty ranges to minimize bufferSubData calls.
+        const sorted = [...this._dirty].sort((a, b) => a - b);
+        let runStart = sorted[0], runEnd = sorted[0];
+        for (let k = 1; k < sorted.length; k++) {
+          if (sorted[k] === runEnd + 1) runEnd = sorted[k];
+          else {
+            for (let i = runStart; i <= runEnd; i++) this._writeNode(i);
+            gl.bufferSubData(gl.ARRAY_BUFFER, runStart * NODE_STRIDE_F * 4,
+              this.nodeData.subarray(runStart * NODE_STRIDE_F, (runEnd + 1) * NODE_STRIDE_F));
+            runStart = sorted[k]; runEnd = sorted[k];
+          }
+        }
+        for (let i = runStart; i <= runEnd; i++) this._writeNode(i);
+        gl.bufferSubData(gl.ARRAY_BUFFER, runStart * NODE_STRIDE_F * 4,
+          this.nodeData.subarray(runStart * NODE_STRIDE_F, (runEnd + 1) * NODE_STRIDE_F));
+        this._dirty.clear();
+      }
+
+      if (this._fullRebuildNeeded || m !== this._lastEdgeCount || this._dirty.size === 0) {
+        // Edges depend on node positions, but only rebuild on full-rebuild path
+        // since we keep no per-edge incremental delta yet.
+        if (this._fullRebuildNeeded || m !== this._lastEdgeCount) {
+          for (let i = 0; i < m; i++) this._writeEdge(i);
+          gl.bindBuffer(gl.ARRAY_BUFFER, this.edgeBuf);
+          gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.edgeData.subarray(0, m * EDGE_VERTS_PER * EDGE_STRIDE_F));
+        }
+      }
+
+      this._lastNodeCount = n;
+      this._lastEdgeCount = m;
+      this._fullRebuildNeeded = false;
+
+      // ── Draw edges (LINES, persistent buffer) ────────────────────────
+      if (m > 0) {
+        gl.useProgram(this.progEdge);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.edgeBuf);
+        gl.enableVertexAttribArray(this.locE.aPos);
+        gl.vertexAttribPointer(this.locE.aPos, 2, gl.FLOAT, false, 5 * 4, 0);
+        gl.enableVertexAttribArray(this.locE.aColor);
+        gl.vertexAttribPointer(this.locE.aColor, 3, gl.FLOAT, false, 5 * 4, 2 * 4);
+        gl.uniform2f(this.locE.uCam, camWX, camWY);
+        gl.uniform1f(this.locE.uZoom, f.cam.zoom * dpr);
+        gl.uniform2f(this.locE.uScreen, this.glCanvas.width, this.glCanvas.height);
+        gl.lineWidth(1.6);
+        gl.drawArrays(gl.LINES, 0, m * EDGE_VERTS_PER);
+      }
+
+      // ── Draw nodes ──────────────────────────────────────────────────
+      if (n > 0) {
+        gl.useProgram(this.progNode);
+        // aQuad from static buffer.
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuf);
+        gl.enableVertexAttribArray(this.locN.aQuad);
+        gl.vertexAttribPointer(this.locN.aQuad, 2, gl.FLOAT, false, 0, 0);
+        if (this.instExt) this.instExt.vertexAttribDivisorANGLE(this.locN.aQuad, 0);
+        // per-instance attribs from node buffer.
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.nodeBuf);
+        const s = NODE_STRIDE_F * 4;
+        gl.enableVertexAttribArray(this.locN.aCenter);
+        gl.vertexAttribPointer(this.locN.aCenter, 2, gl.FLOAT, false, s, 0);
+        gl.enableVertexAttribArray(this.locN.aSize);
+        gl.vertexAttribPointer(this.locN.aSize,   2, gl.FLOAT, false, s, 2 * 4);
+        gl.enableVertexAttribArray(this.locN.aColor);
+        gl.vertexAttribPointer(this.locN.aColor,  3, gl.FLOAT, false, s, 4 * 4);
+        gl.enableVertexAttribArray(this.locN.aSel);
+        gl.vertexAttribPointer(this.locN.aSel,    1, gl.FLOAT, false, s, 7 * 4);
+        if (this.instExt) {
+          this.instExt.vertexAttribDivisorANGLE(this.locN.aCenter, 1);
+          this.instExt.vertexAttribDivisorANGLE(this.locN.aSize,   1);
+          this.instExt.vertexAttribDivisorANGLE(this.locN.aColor,  1);
+          this.instExt.vertexAttribDivisorANGLE(this.locN.aSel,    1);
+        }
+        gl.uniform2f(this.locN.uCam, camWX, camWY);
+        gl.uniform1f(this.locN.uZoom, f.cam.zoom * dpr);
+        gl.uniform2f(this.locN.uScreen, this.glCanvas.width, this.glCanvas.height);
+        if (this.instExt) {
+          this.instExt.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, n);
+          // Reset divisors so other passes (edges) work correctly.
+          this.instExt.vertexAttribDivisorANGLE(this.locN.aCenter, 0);
+          this.instExt.vertexAttribDivisorANGLE(this.locN.aSize,   0);
+          this.instExt.vertexAttribDivisorANGLE(this.locN.aColor,  0);
+          this.instExt.vertexAttribDivisorANGLE(this.locN.aSel,    0);
+        } else {
+          // Slow path fallback: 6 verts per node, no extension.
+          // (rare; almost every browser since 2014 has the extension)
+          for (let i = 0; i < n; i++) {
+            const off = i * NODE_STRIDE_F;
+            gl.vertexAttrib2f(this.locN.aCenter, this.nodeData[off],     this.nodeData[off + 1]);
+            gl.vertexAttrib2f(this.locN.aSize,   this.nodeData[off + 2], this.nodeData[off + 3]);
+            gl.vertexAttrib3f(this.locN.aColor,  this.nodeData[off + 4], this.nodeData[off + 5], this.nodeData[off + 6]);
+            gl.vertexAttrib1f(this.locN.aSel,    this.nodeData[off + 7]);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+          }
+        }
+      }
+    }
+
+    /** Mark a node as needing buffer update. Called from host on move/recolor. */
+    markNodeDirty(i) { this._dirty.add(i); }
+    markEdgeDirty(i) { this._dirtyEdges.add(i); this._fullRebuildNeeded = true; }
+    markAllDirty()   { this._fullRebuildNeeded = true; }
+
+    dispose() {
+      this._resizeObs?.disconnect();
+      this.glCanvas?.remove();
+    }
+  }
+
+  // ── helpers ───────────────────────────────────────────────────────────────
+  function compile(gl, src, kind) {
+    const s = gl.createShader(kind);
+    gl.shaderSource(s, src); gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error('GL compile: ' + gl.getShaderInfoLog(s));
+    return s;
+  }
+  function link(gl, vs, fs) {
+    const p = gl.createProgram();
+    gl.attachShader(p, compile(gl, vs, gl.VERTEX_SHADER));
+    gl.attachShader(p, compile(gl, fs, gl.FRAGMENT_SHADER));
+    gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error('GL link: ' + gl.getProgramInfoLog(p));
+    return p;
+  }
+  function parseHex(h) {
+    return [parseInt(h.slice(1, 3), 16) / 255, parseInt(h.slice(3, 5), 16) / 255, parseInt(h.slice(5, 7), 16) / 255];
+  }
+  function bezPt(t, x1, y1, cx1, cy1, cx2, cy2, x2, y2) {
+    const mt = 1 - t, mt2 = mt * mt, t2 = t * t;
+    const a = mt2 * mt, b = 3 * mt2 * t, c = 3 * mt * t2, d = t2 * t;
+    return { x: a*x1 + b*cx1 + c*cx2 + d*x2, y: a*y1 + b*cy1 + c*cy2 + d*y2 };
+  }
+  function lerp(a, b, t) { return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t }; }
+
+  var webglRenderer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    WebGLRenderer: WebGLRenderer
+  });
+
+  exports.ZFlow = ZFlow;
+  exports.parseDot = parseDot;
+  exports.parseMermaid = parseMermaid;
+
+}));
+//# sourceMappingURL=zflow.umd.js.map