@stocksharp/diagram 1.0.1 → 1.2.0

package/dist/ssdiagram-headless.js

@@ -0,0 +1,4176 @@
+"use strict";
+var SSDiagramHeadless = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/headless.ts
+  var headless_exports = {};
+  __export(headless_exports, {
+    renderDiagramSvg: () => renderDiagramSvg
+  });
+
+  // src/svg-surface.ts
+  var IDENTITY = [1, 0, 0, 1, 0, 0];
+  function multiply(m, n2) {
+    return [
+      m[0] * n2[0] + m[2] * n2[1],
+      m[1] * n2[0] + m[3] * n2[1],
+      m[0] * n2[2] + m[2] * n2[3],
+      m[1] * n2[2] + m[3] * n2[3],
+      m[0] * n2[4] + m[2] * n2[5] + m[4],
+      m[1] * n2[4] + m[3] * n2[5] + m[5]
+    ];
+  }
+  function isIdentity(m) {
+    return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
+  }
+  function n(value) {
+    if (!Number.isFinite(value)) return "0";
+    return (Math.round(value * 1e3) / 1e3).toString();
+  }
+  function escapeXml(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  var ANCHOR = {
+    left: "start",
+    start: "start",
+    center: "middle",
+    right: "end",
+    end: "end"
+  };
+  var BASELINE = {
+    top: "text-before-edge",
+    hanging: "hanging",
+    middle: "central",
+    alphabetic: "alphabetic",
+    ideographic: "ideographic",
+    bottom: "text-after-edge"
+  };
+  var SvgSurface = class {
+    constructor(options) {
+      this.body = [];
+      this.defs = [];
+      this.stack = [];
+      this.state = {
+        fillStyle: "#000000",
+        strokeStyle: "#000000",
+        lineWidth: 1,
+        lineJoin: "miter",
+        lineCap: "butt",
+        globalAlpha: 1,
+        font: "10px sans-serif",
+        textAlign: "start",
+        textBaseline: "alphabetic",
+        dash: [],
+        matrix: IDENTITY,
+        clipId: null
+      };
+      /** Path being built by moveTo/lineTo/arc/arcTo, in the units the caller passes. */
+      this.path = [];
+      this.cursor = null;
+      this.subpathStart = null;
+      this.clipSeq = 0;
+      this.width = options.width;
+      this.height = options.height;
+      this.background = options.background;
+      this.metrics = options.metrics ?? null;
+    }
+    // ===== state =========================================================
+    get fillStyle() {
+      return this.state.fillStyle;
+    }
+    set fillStyle(value) {
+      if (typeof value === "string") this.state.fillStyle = value;
+    }
+    get strokeStyle() {
+      return this.state.strokeStyle;
+    }
+    set strokeStyle(value) {
+      if (typeof value === "string") this.state.strokeStyle = value;
+    }
+    get lineWidth() {
+      return this.state.lineWidth;
+    }
+    set lineWidth(value) {
+      this.state.lineWidth = value;
+    }
+    get lineJoin() {
+      return this.state.lineJoin;
+    }
+    set lineJoin(value) {
+      this.state.lineJoin = value;
+    }
+    get lineCap() {
+      return this.state.lineCap;
+    }
+    set lineCap(value) {
+      this.state.lineCap = value;
+    }
+    get globalAlpha() {
+      return this.state.globalAlpha;
+    }
+    set globalAlpha(value) {
+      this.state.globalAlpha = value;
+    }
+    get font() {
+      return this.state.font;
+    }
+    set font(value) {
+      this.state.font = value;
+      if (this.metrics !== null) this.metrics.font = value;
+    }
+    get textAlign() {
+      return this.state.textAlign;
+    }
+    set textAlign(value) {
+      this.state.textAlign = value;
+    }
+    get textBaseline() {
+      return this.state.textBaseline;
+    }
+    set textBaseline(value) {
+      this.state.textBaseline = value;
+    }
+    save() {
+      this.stack.push({ ...this.state, dash: [...this.state.dash], matrix: [...this.state.matrix] });
+    }
+    restore() {
+      const previous = this.stack.pop();
+      if (previous !== void 0) this.state = previous;
+    }
+    setLineDash(segments) {
+      this.state.dash = [...segments];
+    }
+    // ===== transform =====================================================
+    setTransform(a, b, c, d, e, f) {
+      this.state.matrix = [a, b, c, d, e, f];
+    }
+    translate(x, y) {
+      this.state.matrix = multiply(this.state.matrix, [1, 0, 0, 1, x, y]);
+    }
+    rotate(angle) {
+      const cos = Math.cos(angle);
+      const sin = Math.sin(angle);
+      this.state.matrix = multiply(this.state.matrix, [cos, sin, -sin, cos, 0, 0]);
+    }
+    // ===== paths =========================================================
+    beginPath() {
+      this.path = [];
+      this.cursor = null;
+      this.subpathStart = null;
+    }
+    closePath() {
+      if (this.cursor === null) return;
+      this.path.push("Z");
+      if (this.subpathStart !== null) this.cursor = [...this.subpathStart];
+    }
+    moveTo(x, y) {
+      this.path.push(`M${n(x)} ${n(y)}`);
+      this.cursor = [x, y];
+      this.subpathStart = [x, y];
+    }
+    lineTo(x, y) {
+      if (this.cursor === null) {
+        this.moveTo(x, y);
+        return;
+      }
+      this.path.push(`L${n(x)} ${n(y)}`);
+      this.cursor = [x, y];
+    }
+    arc(cx, cy, r, start, end, ccw = false) {
+      const sx = cx + r * Math.cos(start);
+      const sy = cy + r * Math.sin(start);
+      if (this.cursor === null) this.moveTo(sx, sy);
+      else this.lineTo(sx, sy);
+      let delta = end - start;
+      if (ccw) {
+        while (delta > 0) delta -= Math.PI * 2;
+        if (delta <= -Math.PI * 2) delta = -Math.PI * 2;
+      } else {
+        while (delta < 0) delta += Math.PI * 2;
+        if (delta >= Math.PI * 2) delta = Math.PI * 2;
+      }
+      const sweep = ccw ? 0 : 1;
+      if (Math.abs(delta) >= Math.PI * 2 - 1e-9) {
+        const mid = start + delta / 2;
+        const mx = cx + r * Math.cos(mid);
+        const my = cy + r * Math.sin(mid);
+        this.path.push(`A${n(r)} ${n(r)} 0 0 ${sweep} ${n(mx)} ${n(my)}`);
+        this.path.push(`A${n(r)} ${n(r)} 0 0 ${sweep} ${n(sx)} ${n(sy)}`);
+        this.cursor = [sx, sy];
+        return;
+      }
+      const ex = cx + r * Math.cos(start + delta);
+      const ey = cy + r * Math.sin(start + delta);
+      const large = Math.abs(delta) > Math.PI ? 1 : 0;
+      this.path.push(`A${n(r)} ${n(r)} 0 ${large} ${sweep} ${n(ex)} ${n(ey)}`);
+      this.cursor = [ex, ey];
+    }
+    arcTo(x1, y1, x2, y2, r) {
+      if (this.cursor === null) {
+        this.moveTo(x1, y1);
+        return;
+      }
+      const [x0, y0] = this.cursor;
+      const a = [x0 - x1, y0 - y1];
+      const b = [x2 - x1, y2 - y1];
+      const la = Math.hypot(a[0], a[1]);
+      const lb = Math.hypot(b[0], b[1]);
+      if (la === 0 || lb === 0 || r === 0) {
+        this.lineTo(x1, y1);
+        return;
+      }
+      const ua = [a[0] / la, a[1] / la];
+      const ub = [b[0] / lb, b[1] / lb];
+      const cross = ua[0] * ub[1] - ua[1] * ub[0];
+      if (Math.abs(cross) < 1e-9) {
+        this.lineTo(x1, y1);
+        return;
+      }
+      const angle = Math.acos(Math.max(-1, Math.min(1, ua[0] * ub[0] + ua[1] * ub[1])));
+      const tangent = r / Math.tan(angle / 2);
+      const t = Math.min(tangent, la, lb);
+      const radius = t * Math.tan(angle / 2);
+      const t1 = [x1 + ua[0] * t, y1 + ua[1] * t];
+      const t2 = [x1 + ub[0] * t, y1 + ub[1] * t];
+      this.lineTo(t1[0], t1[1]);
+      const sweep = cross < 0 ? 1 : 0;
+      this.path.push(`A${n(radius)} ${n(radius)} 0 0 ${sweep} ${n(t2[0])} ${n(t2[1])}`);
+      this.cursor = [t2[0], t2[1]];
+    }
+    fill() {
+      if (this.path.length === 0) return;
+      this.emit(`<path d="${this.path.join(" ")}" ${this.fillAttrs()}/>`);
+    }
+    stroke() {
+      if (this.path.length === 0) return;
+      this.emit(`<path d="${this.path.join(" ")}" fill="none" ${this.strokeAttrs()}/>`);
+    }
+    clip() {
+      if (this.path.length === 0) return;
+      const id = `clip${++this.clipSeq}`;
+      this.defs.push(`<clipPath id="${id}"><path d="${this.path.join(" ")}"/></clipPath>`);
+      this.state.clipId = id;
+    }
+    // ===== rectangles ====================================================
+    clearRect(x, y, w, h) {
+      void x;
+      void y;
+      void w;
+      void h;
+    }
+    fillRect(x, y, w, h) {
+      this.emit(`<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" ${this.fillAttrs()}/>`);
+    }
+    strokeRect(x, y, w, h) {
+      this.emit(`<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" fill="none" ${this.strokeAttrs()}/>`);
+    }
+    // ===== text ==========================================================
+    fillText(text, x, y, maxWidth) {
+      if (text === "") return;
+      const anchor = ANCHOR[this.state.textAlign] ?? "start";
+      const baseline = BASELINE[this.state.textBaseline] ?? "alphabetic";
+      let constraint = "";
+      if (maxWidth !== void 0 && maxWidth > 0 && this.measureText(text).width > maxWidth) {
+        constraint = ` textLength="${n(maxWidth)}" lengthAdjust="spacingAndGlyphs"`;
+      }
+      this.emit(
+        `<text x="${n(x)}" y="${n(y)}" style="font:${escapeXml(this.state.font)}" text-anchor="${anchor}" dominant-baseline="${baseline}"${constraint} ${this.fillAttrs()}>${escapeXml(text)}</text>`
+      );
+    }
+    measureText(text) {
+      if (this.metrics !== null) return { width: this.metrics.measureText(text).width };
+      const size = parseFloat(this.state.font) || 10;
+      return { width: text.length * size * 0.55 };
+    }
+    // ===== images ========================================================
+    drawImage(image, dx, dy, dw, dh) {
+      const href = this.imageHref(image);
+      if (href === null) return;
+      this.emit(`<image x="${n(dx)}" y="${n(dy)}" width="${n(dw)}" height="${n(dh)}" href="${escapeXml(href)}"${this.commonAttrs()}/>`);
+    }
+    imageHref(image) {
+      try {
+        if (typeof HTMLCanvasElement !== "undefined" && image instanceof HTMLCanvasElement) return image.toDataURL();
+        if (typeof HTMLImageElement !== "undefined" && image instanceof HTMLImageElement) return image.src;
+      } catch {
+        return null;
+      }
+      return null;
+    }
+    // ===== output ========================================================
+    /** The finished document. Safe to call more than once; it does not consume the recording. */
+    toSvg() {
+      const background = this.background === void 0 ? "" : `<rect width="100%" height="100%" fill="${escapeXml(this.background)}"/>`;
+      const defs = this.defs.length === 0 ? "" : `<defs>${this.defs.join("")}</defs>`;
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="${n(this.width)}" height="${n(this.height)}" viewBox="0 0 ${n(this.width)} ${n(this.height)}">${defs}${background}${this.body.join("")}</svg>`;
+    }
+    // ===== internals =====================================================
+    emit(element) {
+      this.body.push(element);
+    }
+    commonAttrs() {
+      const parts = [];
+      if (!isIdentity(this.state.matrix)) {
+        parts.push(` transform="matrix(${this.state.matrix.map(n).join(" ")})"`);
+      }
+      if (this.state.globalAlpha !== 1) parts.push(` opacity="${n(this.state.globalAlpha)}"`);
+      if (this.state.clipId !== null) parts.push(` clip-path="url(#${this.state.clipId})"`);
+      return parts.join("");
+    }
+    fillAttrs() {
+      return `fill="${escapeXml(this.state.fillStyle)}"${this.commonAttrs()}`;
+    }
+    strokeAttrs() {
+      const parts = [
+        `stroke="${escapeXml(this.state.strokeStyle)}"`,
+        `stroke-width="${n(this.state.lineWidth)}"`
+      ];
+      if (this.state.lineJoin !== "miter") parts.push(`stroke-linejoin="${this.state.lineJoin}"`);
+      if (this.state.lineCap !== "butt") parts.push(`stroke-linecap="${this.state.lineCap}"`);
+      if (this.state.dash.length > 0) parts.push(`stroke-dasharray="${this.state.dash.map(n).join(" ")}"`);
+      return parts.join(" ") + this.commonAttrs();
+    }
+  };
+
+  // src/core/json.ts
+  function setJsonKey(target, key, value) {
+    if (key === "__proto__") {
+      Object.defineProperty(target, key, { value, enumerable: true, writable: true, configurable: true });
+      return;
+    }
+    target[key] = value;
+  }
+  function getJsonKey(target, key) {
+    return Object.prototype.hasOwnProperty.call(target, key) ? target[key] : void 0;
+  }
+
+  // src/core/model.ts
+  function toPortDynamicMode(value) {
+    return value === "manual" || value === "onConnect" ? value : "";
+  }
+  var DIAGRAM_DOCUMENT_VERSION = 1;
+
+  // src/core/document.ts
+  var DiagramDocumentError = class extends Error {
+    constructor(message, path = "$") {
+      super(`${path}: ${message}`);
+      this.path = path;
+      this.name = "DiagramDocumentError";
+    }
+  };
+  function createDiagramDocument(input = {}) {
+    const rawNodes = mapElements(input.nodes, "$.nodes");
+    const rawLinks = mapElements(input.links, "$.links");
+    const nodes = rawNodes.map((node, index) => normalizeNode(node, `$.nodes[${index}]`));
+    const usedLinkIds = /* @__PURE__ */ new Set();
+    for (let index = 0; index < rawLinks.length; index++) {
+      const raw = rawLinks[index].id;
+      if (raw === void 0) continue;
+      const id = requireIdentifier(raw, `$.links[${index}].id`);
+      if (usedLinkIds.has(id)) {
+        throw new DiagramDocumentError(`duplicate link id "${id}"`, `$.links[${index}].id`);
+      }
+      usedLinkIds.add(id);
+    }
+    let sequence = 1;
+    const links = rawLinks.map((link, index) => {
+      let id = link.id;
+      if (id === void 0) {
+        let generated;
+        do
+          generated = `link_${sequence++}`;
+        while (usedLinkIds.has(generated));
+        usedLinkIds.add(generated);
+        id = generated;
+      }
+      return normalizeLink({ ...link, id }, `$.links[${index}]`);
+    });
+    const rawZones = mapElements(input.zones, "$.zones");
+    const zones = rawZones.map((zone, index) => normalizeZone(zone, `$.zones[${index}]`));
+    validateUniqueZones(zones);
+    const document2 = {
+      version: DIAGRAM_DOCUMENT_VERSION,
+      nodes,
+      links,
+      zones,
+      metadata: cloneJsonObject(input.metadata ?? {}, "$.metadata")
+    };
+    validateDocument(document2);
+    return document2;
+  }
+  function parseDiagramDocument(source) {
+    let value = source;
+    if (typeof source === "string") {
+      try {
+        value = JSON.parse(source);
+      } catch (error) {
+        const reason = error instanceof Error ? error.message : "invalid JSON";
+        throw new DiagramDocumentError(reason);
+      }
+    }
+    const root = requireStructure(value, "$");
+    const version = requireNumber(root.version, "$.version");
+    if (version !== DIAGRAM_DOCUMENT_VERSION) {
+      throw new DiagramDocumentError(`unsupported document version ${version}`, "$.version");
+    }
+    const document2 = {
+      version: DIAGRAM_DOCUMENT_VERSION,
+      nodes: requireArray(root.nodes, "$.nodes").map((node, index) => parseNode(node, `$.nodes[${index}]`)),
+      links: requireArray(root.links, "$.links").map((link, index) => parseLink(link, `$.links[${index}]`)),
+      // Zones arrived after the first documents were written, so their absence is not a fault:
+      // an older file simply has none, and reading it must not need a migration step.
+      zones: root.zones === void 0 || root.zones === null ? [] : requireArray(root.zones, "$.zones").map((zone, index) => normalizeZone(zone, `$.zones[${index}]`)),
+      metadata: cloneJsonObject(root.metadata, "$.metadata")
+    };
+    validateDocument(document2);
+    return document2;
+  }
+  function normalizeNode(value, path) {
+    const input = requireStructure(value, path);
+    const id = requireIdentifier(input.id, `${path}.id`);
+    return {
+      id,
+      typeId: requireIdentifier(input.typeId ?? id, `${path}.typeId`),
+      name: requireString(input.name, `${path}.name`),
+      description: requireString(input.description ?? "", `${path}.description`),
+      groupName: requireString(input.groupName ?? "Common", `${path}.groupName`),
+      x: requireFiniteNumber(input.x ?? 0, `${path}.x`),
+      y: requireFiniteNumber(input.y ?? 0, `${path}.y`),
+      color: requireString(input.color ?? "#d7d7d7", `${path}.color`),
+      border: requireString(input.border ?? "#8c8c8c", `${path}.border`),
+      icon: requireString(input.icon ?? "", `${path}.icon`),
+      message: requireString(input.message ?? "", `${path}.message`),
+      openAction: requireString(input.openAction ?? "", `${path}.openAction`),
+      inPorts: mapElements(input.inPorts, `${path}.inPorts`).map((port, index) => normalizePort(port, `${path}.inPorts[${index}]`)),
+      outPorts: mapElements(input.outPorts, `${path}.outPorts`).map((port, index) => normalizePort(port, `${path}.outPorts[${index}]`)),
+      parameters: mapElements(input.parameters, `${path}.parameters`).map((parameter, index) => normalizeParameter(parameter, `${path}.parameters[${index}]`)),
+      paramValues: cloneStringRecord(input.paramValues ?? {}, `${path}.paramValues`),
+      metadata: cloneJsonObject(input.metadata ?? {}, `${path}.metadata`)
+    };
+  }
+  function normalizePort(value, path) {
+    const input = requireStructure(value, path);
+    return {
+      id: requireIdentifier(input.id, `${path}.id`),
+      name: requireString(input.name, `${path}.name`),
+      description: requireString(input.description ?? "", `${path}.description`),
+      type: requireString(input.type ?? "", `${path}.type`),
+      maxLinks: requireNonNegativeInteger(input.maxLinks ?? 0, `${path}.maxLinks`),
+      availableTypes: requireArray(input.availableTypes ?? [], `${path}.availableTypes`).map((type, index) => requireString(type, `${path}.availableTypes[${index}]`)),
+      isDynamic: requireBoolean(input.isDynamic ?? false, `${path}.isDynamic`),
+      dynamicMode: requirePortDynamicMode(input.dynamicMode ?? "", `${path}.dynamicMode`),
+      isSibling: requireBoolean(input.isSibling ?? false, `${path}.isSibling`),
+      metadata: cloneJsonObject(input.metadata ?? {}, `${path}.metadata`)
+    };
+  }
+  function normalizeParameter(value, path) {
+    const input = requireStructure(value, path);
+    return {
+      name: requireIdentifier(input.name, `${path}.name`),
+      displayName: requireString(input.displayName, `${path}.displayName`),
+      description: requireString(input.description, `${path}.description`),
+      type: requireString(input.type, `${path}.type`),
+      defaultValue: requireString(input.defaultValue, `${path}.defaultValue`),
+      options: requireArray(input.options, `${path}.options`).map((option, index) => requireString(option, `${path}.options[${index}]`)),
+      min: requireNullableFiniteNumber(input.min, `${path}.min`),
+      max: requireNullableFiniteNumber(input.max, `${path}.max`),
+      displayOrder: requireFiniteNumber(input.displayOrder, `${path}.displayOrder`),
+      category: requireString(input.category, `${path}.category`),
+      isBasic: requireBoolean(input.isBasic, `${path}.isBasic`),
+      editorType: requireString(input.editorType, `${path}.editorType`)
+    };
+  }
+  function normalizeLink(value, path) {
+    const input = requireStructure(value, path);
+    return {
+      id: requireIdentifier(input.id, `${path}.id`),
+      from: normalizeEndpoint(input.from, `${path}.from`),
+      to: normalizeEndpoint(input.to, `${path}.to`),
+      style: requireLinkStyle(input.style, `${path}.style`),
+      metadata: cloneJsonObject(input.metadata ?? {}, `${path}.metadata`)
+    };
+  }
+  function requireLinkStyle(value, path) {
+    if (value === void 0 || value === null) return "solid";
+    if (value !== "solid" && value !== "dashed") {
+      throw new DiagramDocumentError(`unknown link style "${String(value)}"`, path);
+    }
+    return value;
+  }
+  function normalizeZone(value, path) {
+    const input = requireStructure(value, path);
+    return {
+      id: requireIdentifier(input.id, `${path}.id`),
+      name: requireString(input.name, `${path}.name`),
+      // Finite, like node coordinates: NaN survives every arithmetic check and writes as null.
+      x: requireFiniteNumber(input.x, `${path}.x`),
+      y: requireFiniteNumber(input.y, `${path}.y`),
+      width: requirePositiveSize(input.width, `${path}.width`),
+      height: requirePositiveSize(input.height, `${path}.height`),
+      color: input.color === void 0 || input.color === null ? "" : requireString(input.color, `${path}.color`),
+      metadata: cloneJsonObject(input.metadata ?? {}, `${path}.metadata`)
+    };
+  }
+  function requirePositiveSize(value, path) {
+    const size = requireFiniteNumber(value, path);
+    if (!(size > 0)) throw new DiagramDocumentError("size must be greater than zero", path);
+    return size;
+  }
+  function normalizeEndpoint(value, path) {
+    const input = requireStructure(value, path);
+    return {
+      nodeId: requireIdentifier(input.nodeId, `${path}.nodeId`),
+      portId: requireIdentifier(input.portId, `${path}.portId`)
+    };
+  }
+  function parseNode(value, path) {
+    const node = requireStructure(value, path);
+    return normalizeNode({
+      id: requireString(node.id, `${path}.id`),
+      typeId: requireString(node.typeId, `${path}.typeId`),
+      name: requireString(node.name, `${path}.name`),
+      description: requireString(node.description, `${path}.description`),
+      groupName: requireString(node.groupName, `${path}.groupName`),
+      x: requireNumber(node.x, `${path}.x`),
+      y: requireNumber(node.y, `${path}.y`),
+      color: requireString(node.color, `${path}.color`),
+      border: requireString(node.border, `${path}.border`),
+      icon: requireString(node.icon, `${path}.icon`),
+      message: requireString(node.message, `${path}.message`),
+      openAction: requireString(node.openAction, `${path}.openAction`),
+      inPorts: requireArray(node.inPorts, `${path}.inPorts`).map((port, index) => parsePort(port, `${path}.inPorts[${index}]`)),
+      outPorts: requireArray(node.outPorts, `${path}.outPorts`).map((port, index) => parsePort(port, `${path}.outPorts[${index}]`)),
+      parameters: requireArray(node.parameters, `${path}.parameters`).map((parameter, index) => parseParameter(parameter, `${path}.parameters[${index}]`)),
+      paramValues: cloneStringRecord(node.paramValues, `${path}.paramValues`),
+      metadata: cloneJsonObject(node.metadata, `${path}.metadata`)
+    }, path);
+  }
+  function parsePort(value, path) {
+    const port = requireStructure(value, path);
+    return normalizePort({
+      id: requireString(port.id, `${path}.id`),
+      name: requireString(port.name, `${path}.name`),
+      description: requireString(port.description, `${path}.description`),
+      type: requireString(port.type, `${path}.type`),
+      maxLinks: requireNumber(port.maxLinks, `${path}.maxLinks`),
+      availableTypes: requireArray(port.availableTypes, `${path}.availableTypes`).map((type, index) => requireString(type, `${path}.availableTypes[${index}]`)),
+      isDynamic: requireBoolean(port.isDynamic, `${path}.isDynamic`),
+      dynamicMode: requirePortDynamicMode(port.dynamicMode, `${path}.dynamicMode`),
+      isSibling: requireBoolean(port.isSibling, `${path}.isSibling`),
+      metadata: cloneJsonObject(port.metadata, `${path}.metadata`)
+    }, path);
+  }
+  function parseParameter(value, path) {
+    const parameter = requireStructure(value, path);
+    return normalizeParameter({
+      name: requireString(parameter.name, `${path}.name`),
+      displayName: requireString(parameter.displayName, `${path}.displayName`),
+      description: requireString(parameter.description, `${path}.description`),
+      type: requireString(parameter.type, `${path}.type`),
+      defaultValue: requireString(parameter.defaultValue, `${path}.defaultValue`),
+      options: requireArray(parameter.options, `${path}.options`).map((option, index) => requireString(option, `${path}.options[${index}]`)),
+      min: requireNullableFiniteNumber(parameter.min, `${path}.min`),
+      max: requireNullableFiniteNumber(parameter.max, `${path}.max`),
+      displayOrder: requireNumber(parameter.displayOrder, `${path}.displayOrder`),
+      category: requireString(parameter.category, `${path}.category`),
+      isBasic: requireBoolean(parameter.isBasic, `${path}.isBasic`),
+      editorType: requireString(parameter.editorType, `${path}.editorType`)
+    }, path);
+  }
+  function parseLink(value, path) {
+    const link = requireStructure(value, path);
+    return normalizeLink({
+      id: requireString(link.id, `${path}.id`),
+      from: parseEndpoint(link.from, `${path}.from`),
+      to: parseEndpoint(link.to, `${path}.to`),
+      style: link.style === void 0 ? void 0 : requireLinkStyle(link.style, `${path}.style`),
+      metadata: cloneJsonObject(link.metadata, `${path}.metadata`)
+    }, path);
+  }
+  function parseEndpoint(value, path) {
+    const endpoint = requireStructure(value, path);
+    return {
+      nodeId: requireIdentifier(endpoint.nodeId, `${path}.nodeId`),
+      portId: requireIdentifier(endpoint.portId, `${path}.portId`)
+    };
+  }
+  function validateUniqueZones(zones) {
+    const seen = /* @__PURE__ */ new Set();
+    for (let index = 0; index < zones.length; index++) {
+      const zone = zones[index];
+      if (seen.has(zone.id)) throw new DiagramDocumentError(`duplicate zone id "${zone.id}"`, `$.zones[${index}].id`);
+      seen.add(zone.id);
+    }
+  }
+  function validateDocument(document2) {
+    const nodes = /* @__PURE__ */ new Map();
+    for (let index = 0; index < document2.nodes.length; index++) {
+      const node = document2.nodes[index];
+      if (nodes.has(node.id)) throw new DiagramDocumentError(`duplicate node id "${node.id}"`, `$.nodes[${index}].id`);
+      validateUniquePorts(node.inPorts, `$.nodes[${index}].inPorts`);
+      validateUniquePorts(node.outPorts, `$.nodes[${index}].outPorts`);
+      nodes.set(node.id, node);
+    }
+    const linkIds = /* @__PURE__ */ new Set();
+    const endpoints = /* @__PURE__ */ new Set();
+    for (let index = 0; index < document2.links.length; index++) {
+      const link = document2.links[index];
+      const path = `$.links[${index}]`;
+      if (linkIds.has(link.id)) throw new DiagramDocumentError(`duplicate link id "${link.id}"`, `${path}.id`);
+      linkIds.add(link.id);
+      const fromNode = nodes.get(link.from.nodeId);
+      const toNode = nodes.get(link.to.nodeId);
+      if (fromNode === void 0) throw new DiagramDocumentError(`unknown source node "${link.from.nodeId}"`, `${path}.from.nodeId`);
+      if (toNode === void 0) throw new DiagramDocumentError(`unknown target node "${link.to.nodeId}"`, `${path}.to.nodeId`);
+      if (!fromNode.outPorts.some((port) => port.id === link.from.portId)) {
+        throw new DiagramDocumentError(`unknown output port "${link.from.portId}"`, `${path}.from.portId`);
+      }
+      if (!toNode.inPorts.some((port) => port.id === link.to.portId)) {
+        throw new DiagramDocumentError(`unknown input port "${link.to.portId}"`, `${path}.to.portId`);
+      }
+      const key = `${link.from.nodeId}\0${link.from.portId}\0${link.to.nodeId}\0${link.to.portId}`;
+      if (endpoints.has(key)) throw new DiagramDocumentError("duplicate link endpoints", path);
+      endpoints.add(key);
+    }
+    validateUniqueZones(document2.zones);
+  }
+  function validateUniquePorts(ports, path) {
+    const ids = /* @__PURE__ */ new Set();
+    for (let index = 0; index < ports.length; index++) {
+      const id = ports[index].id;
+      if (ids.has(id)) throw new DiagramDocumentError(`duplicate port id "${id}"`, `${path}[${index}].id`);
+      ids.add(id);
+    }
+  }
+  function cloneStringRecord(value, path) {
+    const object = requireObject(value, path);
+    const result = {};
+    for (const [key, item] of Object.entries(object)) setJsonKey(result, key, requireString(item, `${path}.${key}`));
+    return result;
+  }
+  function cloneJsonObject(value, path, ancestors = /* @__PURE__ */ new WeakSet()) {
+    const object = requireObject(value, path);
+    if (ancestors.has(object)) throw new DiagramDocumentError("circular JSON value", path);
+    ancestors.add(object);
+    const result = {};
+    try {
+      for (const [key, item] of Object.entries(object)) {
+        setJsonKey(result, key, cloneJsonValue(item, `${path}.${key}`, ancestors));
+      }
+    } finally {
+      ancestors.delete(object);
+    }
+    return result;
+  }
+  function cloneJsonValue(value, path, ancestors) {
+    if (value === null || typeof value === "string" || typeof value === "boolean") return value;
+    if (typeof value === "number") return requireFiniteNumber(value, path);
+    if (Array.isArray(value)) {
+      if (ancestors.has(value)) throw new DiagramDocumentError("circular JSON value", path);
+      ancestors.add(value);
+      try {
+        return value.map((item, index) => cloneJsonValue(item, `${path}[${index}]`, ancestors));
+      } finally {
+        ancestors.delete(value);
+      }
+    }
+    if (isObject(value)) return cloneJsonObject(value, path, ancestors);
+    throw new DiagramDocumentError("expected a JSON value", path);
+  }
+  function requireStructure(value, path) {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+      throw new DiagramDocumentError("expected an object", path);
+    }
+    return value;
+  }
+  function requireObject(value, path) {
+    if (!isObject(value)) throw new DiagramDocumentError("expected an object", path);
+    return value;
+  }
+  function isObject(value) {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || prototype === null;
+  }
+  function mapElements(value, path) {
+    if (value === void 0 || value === null) return [];
+    return Array.from(
+      requireArray(value, path),
+      (element, index) => requireStructure(element, `${path}[${index}]`)
+    );
+  }
+  function requireArray(value, path) {
+    if (!Array.isArray(value)) throw new DiagramDocumentError("expected an array", path);
+    return value;
+  }
+  function requireString(value, path) {
+    if (typeof value !== "string") throw new DiagramDocumentError("expected a string", path);
+    return value;
+  }
+  function requirePortDynamicMode(value, path) {
+    const mode = requireString(value, path);
+    return toPortDynamicMode(mode);
+  }
+  function requireIdentifier(value, path) {
+    const id = requireString(value, path);
+    if (id.trim().length === 0) throw new DiagramDocumentError("identifier cannot be empty", path);
+    return id;
+  }
+  function requireNumber(value, path) {
+    if (typeof value !== "number") throw new DiagramDocumentError("expected a number", path);
+    return value;
+  }
+  function requireFiniteNumber(value, path) {
+    const number = requireNumber(value, path);
+    if (!Number.isFinite(number)) throw new DiagramDocumentError("expected a finite number", path);
+    return number;
+  }
+  function requireNullableFiniteNumber(value, path) {
+    return value === null ? null : requireFiniteNumber(value, path);
+  }
+  function requireNonNegativeInteger(value, path) {
+    const number = requireFiniteNumber(value, path);
+    if (!Number.isInteger(number) || number < 0) throw new DiagramDocumentError("expected a non-negative integer", path);
+    return number;
+  }
+  function requireBoolean(value, path) {
+    if (typeof value !== "boolean") throw new DiagramDocumentError("expected a boolean", path);
+    return value;
+  }
+
+  // src/core/history.ts
+  var DiagramCommandHistory = class {
+    constructor(listener) {
+      this.listener = listener;
+      this.undoCommands = [];
+      this.redoCommands = [];
+      this.transactions = [];
+      this.replaying = false;
+    }
+    get state() {
+      return {
+        canUndo: this.undoCommands.length > 0,
+        canRedo: this.redoCommands.length > 0,
+        undoDepth: this.undoCommands.length,
+        redoDepth: this.redoCommands.length,
+        undoLabel: this.undoCommands[this.undoCommands.length - 1]?.label ?? null,
+        redoLabel: this.redoCommands[this.redoCommands.length - 1]?.label ?? null
+      };
+    }
+    execute(command) {
+      if (this.replaying) {
+        command.execute();
+        return;
+      }
+      command.execute();
+      this.recordApplied(command);
+    }
+    /** Records a gesture that already changed the document, such as pointer drag. */
+    recordApplied(command) {
+      if (this.replaying) return;
+      const transaction = this.transactions[this.transactions.length - 1];
+      if (transaction !== void 0) {
+        transaction.commands.push(command);
+        return;
+      }
+      this.undoCommands.push(command);
+      this.redoCommands.length = 0;
+      this.notify();
+    }
+    transaction(label, action) {
+      const frame = { label, commands: [] };
+      this.transactions.push(frame);
+      try {
+        const result = action();
+        this.transactions.pop();
+        const command = compose(frame);
+        if (command !== null) this.recordApplied(command);
+        return result;
+      } catch (error) {
+        this.transactions.pop();
+        this.replay(() => {
+          for (const command of frame.commands.slice().reverse()) command.undo();
+        });
+        throw error;
+      }
+    }
+    assertNoOpenTransaction(operation) {
+      if (this.transactions.length > 0) {
+        throw new Error(`Cannot ${operation} command history inside a transaction.`);
+      }
+    }
+    undo() {
+      this.assertNoOpenTransaction("undo");
+      const command = this.undoCommands.pop();
+      if (command === void 0) return false;
+      try {
+        this.replay(() => command.undo());
+      } catch (error) {
+        this.undoCommands.push(command);
+        throw error;
+      }
+      this.redoCommands.push(command);
+      this.notify();
+      return true;
+    }
+    redo() {
+      this.assertNoOpenTransaction("redo");
+      const command = this.redoCommands.pop();
+      if (command === void 0) return false;
+      try {
+        this.replay(() => command.execute());
+      } catch (error) {
+        this.redoCommands.push(command);
+        throw error;
+      }
+      this.undoCommands.push(command);
+      this.notify();
+      return true;
+    }
+    clear() {
+      this.assertNoOpenTransaction("clear");
+      this.undoCommands.length = 0;
+      this.redoCommands.length = 0;
+      this.notify();
+    }
+    replay(action) {
+      const previous = this.replaying;
+      this.replaying = true;
+      try {
+        action();
+      } finally {
+        this.replaying = previous;
+      }
+    }
+    notify() {
+      this.listener?.(this.state);
+    }
+  };
+  function compose(frame) {
+    if (frame.commands.length === 0) return null;
+    if (frame.commands.length === 1) {
+      const command = frame.commands[0];
+      return frame.label === command.label ? command : {
+        label: frame.label,
+        execute: () => command.execute(),
+        undo: () => command.undo()
+      };
+    }
+    const commands = [...frame.commands];
+    return {
+      label: frame.label,
+      execute: () => {
+        for (const command of commands) command.execute();
+      },
+      undo: () => {
+        for (const command of commands.slice().reverse()) command.undo();
+      }
+    };
+  }
+
+  // src/core/state.ts
+  function createDiagramRuntimeState() {
+    return { activeNodeId: null, nodes: {}, globalError: null };
+  }
+  function cloneDiagramRuntimeState(state) {
+    return {
+      activeNodeId: state.activeNodeId,
+      globalError: state.globalError === null ? null : { ...state.globalError },
+      nodes: Object.fromEntries(Object.entries(state.nodes).map(([nodeId, node]) => [nodeId, {
+        active: node.active,
+        errors: cloneDiagramNodeErrors(node.errors),
+        ports: {
+          in: Object.fromEntries(Object.entries(node.ports.in).map(([portId, port]) => [portId, { ...port }])),
+          out: Object.fromEntries(Object.entries(node.ports.out).map(([portId, port]) => [portId, { ...port }]))
+        }
+      }]))
+    };
+  }
+  function createDiagramPortRuntimeState() {
+    return {
+      active: false,
+      selected: false,
+      breakpoint: false,
+      breakpointActive: false,
+      value: null,
+      error: null
+    };
+  }
+  function createEditableDiagramPermissions() {
+    return {
+      select: true,
+      inspect: true,
+      copy: true,
+      moveNodes: true,
+      createLinks: true,
+      deleteSelection: true,
+      paste: true,
+      history: true
+    };
+  }
+  function createReadOnlyDiagramPermissions() {
+    return {
+      select: true,
+      inspect: true,
+      copy: true,
+      moveNodes: false,
+      createLinks: false,
+      deleteSelection: false,
+      paste: false,
+      history: false
+    };
+  }
+  function createDiagramNodeRuntimeState() {
+    return {
+      active: false,
+      errors: {},
+      ports: { in: {}, out: {} }
+    };
+  }
+  function cloneDiagramNodeErrors(errors) {
+    const result = {};
+    if (errors === void 0 || errors === null) return result;
+    if (errors.runtime !== void 0) result.runtime = { ...errors.runtime };
+    if (errors.load !== void 0) result.load = { ...errors.load };
+    return result;
+  }
+
+  // src/canvas-renderer.ts
+  var SCREEN_RENDER_OPTIONS = {
+    grid: true,
+    overview: true,
+    selection: true,
+    runtime: true,
+    transient: true
+  };
+  function copyJsonValue(value) {
+    if (Array.isArray(value)) return value.map(copyJsonValue);
+    if (value !== null && typeof value === "object") return copyJsonObject(value);
+    return value;
+  }
+  function copyJsonObject(value) {
+    if (value === void 0) return {};
+    const result = {};
+    for (const [key, item] of Object.entries(value)) setJsonKey(result, key, copyJsonValue(item));
+    return result;
+  }
+  function copyParameters(value) {
+    return (value ?? []).map((parameter) => ({ ...parameter, options: [...parameter.options] }));
+  }
+  function normalizePortType(type) {
+    return type.trim().toLowerCase();
+  }
+  function isWildcardPortType(type) {
+    const normalized = normalizePortType(type);
+    return normalized === "" || normalized === "*" || normalized === "any" || normalized === "anydata" || normalized === "any data" || normalized === "object" || normalized === "system.object" || normalized.startsWith("system.object,");
+  }
+  function arePortTypesCompatible(fromType, toType, availableTypes) {
+    if (isWildcardPortType(fromType) || isWildcardPortType(toType)) return true;
+    const normalizedFrom = normalizePortType(fromType);
+    return [toType, ...availableTypes].some((type) => isWildcardPortType(type) || normalizePortType(type) === normalizedFrom);
+  }
+  var PortModel = class {
+    constructor(init, dir) {
+      // layout cache (world coords), filled at draw time
+      this.cx = 0;
+      this.cy = 0;
+      this.id = init.id;
+      this.name = init.name;
+      this.description = init.description ?? "";
+      this.type = init.type ?? "";
+      this.direction = dir;
+      this.maxLinks = typeof init.maxLinks === "number" ? init.maxLinks : 0;
+      this.availableTypes = [...init.availableTypes ?? []];
+      this.isDynamic = init.isDynamic ?? false;
+      this.dynamicMode = toPortDynamicMode(init.dynamicMode);
+      this.isSibling = init.isSibling ?? false;
+      this.metadata = copyJsonObject(init.metadata);
+    }
+    toInit() {
+      return {
+        id: this.id,
+        name: this.name,
+        description: this.description,
+        type: this.type,
+        maxLinks: this.maxLinks,
+        availableTypes: [...this.availableTypes],
+        isDynamic: this.isDynamic,
+        dynamicMode: this.dynamicMode,
+        isSibling: this.isSibling,
+        metadata: copyJsonObject(this.metadata)
+      };
+    }
+  };
+  var NodeModel = class {
+    constructor(init, id) {
+      this.runtimeError = "";
+      this.errorFlashStart = null;
+      // layout cache
+      this.w = 160;
+      this.h = 48;
+      this.id = id;
+      this.typeId = init.typeId ?? id;
+      this.name = init.name;
+      this.description = init.description ?? "";
+      this.groupName = init.groupName ?? "Common";
+      this.color = init.color ?? "#d7d7d7";
+      this.border = init.border ?? "#8c8c8c";
+      this.icon = init.icon ?? "";
+      this.openAction = init.openAction ?? "";
+      this.message = init.message ?? "";
+      this.parameters = copyParameters(init.parameters);
+      this.paramValues = { ...init.paramValues ?? {} };
+      this.metadata = copyJsonObject(init.metadata);
+      this.isPlaceholder = init.isPlaceholder ?? false;
+      this.loadError = init.loadError ?? "";
+      this.x = typeof init.x === "number" ? init.x : 0;
+      this.y = typeof init.y === "number" ? init.y : 0;
+      this.inPorts = (init.inPorts ?? []).map((p) => new PortModel(p, "in"));
+      this.outPorts = (init.outPorts ?? []).map((p) => new PortModel(p, "out"));
+    }
+    port(id) {
+      return this.inPorts.find((p) => p.id === id) ?? this.outPorts.find((p) => p.id === id);
+    }
+    toInit(includeRuntimeState = true) {
+      const init = {
+        id: this.id,
+        typeId: this.typeId,
+        name: this.name,
+        description: this.description,
+        groupName: this.groupName,
+        color: this.color,
+        border: this.border,
+        icon: this.icon,
+        openAction: this.openAction,
+        message: this.message,
+        parameters: copyParameters(this.parameters),
+        paramValues: { ...this.paramValues },
+        metadata: copyJsonObject(this.metadata),
+        isPlaceholder: this.isPlaceholder,
+        x: this.x,
+        y: this.y,
+        inPorts: this.inPorts.map((port) => port.toInit()),
+        outPorts: this.outPorts.map((port) => port.toInit())
+      };
+      if (includeRuntimeState && this.loadError.length > 0) init.loadError = this.loadError;
+      return init;
+    }
+  };
+  var LinkModel = class {
+    constructor(from, fromPort, to, toPort, id = "", metadata, style = "solid") {
+      this.from = from;
+      this.fromPort = fromPort;
+      this.to = to;
+      this.toPort = toPort;
+      this.style = style;
+      this.id = id;
+      this.metadata = copyJsonObject(metadata);
+    }
+    key() {
+      return `${this.from}|${this.fromPort}|${this.to}|${this.toPort}`;
+    }
+    toInit() {
+      return {
+        id: this.id,
+        from: this.from,
+        fromPort: this.fromPort,
+        to: this.to,
+        toPort: this.toPort,
+        style: this.style,
+        metadata: copyJsonObject(this.metadata)
+      };
+    }
+  };
+  var PORT_R = 6;
+  var PORT_ROW_H = 20;
+  var RELINK_HANDLE_PX = 8;
+  var RELINK_DRAG_THRESHOLD_PX = 4;
+  var PORT_SQ = 9;
+  var LINK_STUB = 22;
+  var LINK_HOP = 5;
+  var LINK_CORNER = 8;
+  var SNAP_PX = 32;
+  var DEFAULT_GRID_SIZE = 28;
+  var ZOOM_MIN = 0.15;
+  var ZOOM_MAX = 4;
+  var INTRO_MS = 520;
+  var INTRO_RISE = 70;
+  var ERROR_FLASH_MS = 1100;
+  var ERROR_RED = "#f6465d";
+  var ERROR_BACKGROUND = "#7d2632";
+  var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+  function hashHue(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i += 1) h = h * 31 + s.charCodeAt(i) | 0;
+    return (h % 360 + 360) % 360;
+  }
+  function clampLightness(color, maxL) {
+    const m = color.match(/^hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/i);
+    if (m === null) return color;
+    return `hsl(${m[1]}, ${m[2]}%, ${Math.min(+m[3], maxL * 100)}%)`;
+  }
+  function colorLuminance(color) {
+    if (color === void 0) return 0;
+    const hex = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hex !== null) {
+      const raw = hex[1].length === 3 ? hex[1].split("").map((x) => x + x).join("") : hex[1];
+      const value = parseInt(raw, 16);
+      return 0.299 * (value >> 16 & 255) + 0.587 * (value >> 8 & 255) + 0.114 * (value & 255);
+    }
+    const rgb = color.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+    if (rgb !== null)
+      return 0.299 * +rgb[1] + 0.587 * +rgb[2] + 0.114 * +rgb[3];
+    return 0;
+  }
+  var Diagram = class {
+    constructor(opts) {
+      this.nodes = [];
+      this.links = [];
+      this.zones = [];
+      this.idSeq = 1;
+      this.linkSeq = 1;
+      this.documentMetadata = {};
+      this.runtimeState = createDiagramRuntimeState();
+      this.runtimePulse = 0;
+      this.globalErrorFlashStart = null;
+      // viewport transform: screen = world * scale + offset
+      this.scale = 1;
+      this.offX = 0;
+      this.offY = 0;
+      this.width = 0;
+      this.height = 0;
+      this.dpr = 1;
+      this.drawScheduled = false;
+      // interaction state
+      this.selectedNode = null;
+      // primary (last) selected
+      this.selectedNodes = /* @__PURE__ */ new Set();
+      // multi-selection
+      this.selectedLink = null;
+      this.selectedPort = null;
+      this.dragNode = null;
+      this.dragStart = [];
+      // group-drag origin
+      this.dragAnchor = { wx: 0, wy: 0 };
+      this.panning = false;
+      this.panX = 0;
+      this.panY = 0;
+      this.permissions = createEditableDiagramPermissions();
+      this.showNodeMessages = true;
+      this.iconCache = /* @__PURE__ */ new Map();
+      // node icon images by URL (null = loading/failed)
+      this.rubber = null;
+      // world rect
+      this.clip = null;
+      this.linking = null;
+      this.relinking = null;
+      this.relinkCandidate = null;
+      this.linkSnap = null;
+      this.cursor = { x: 0, y: 0 };
+      // screen
+      this.hoverPort = null;
+      this.hoverNode = null;
+      this.hoveredLink = null;
+      this.tipTimer = null;
+      this.tipShow = false;
+      this.tipTarget = null;
+      // Long-press (touch) / right-click (desktop) → contextMenu event.
+      this.lpTimer = null;
+      this.lpStart = null;
+      this.lpDelayMs = 550;
+      this.lpMoveTol = 7;
+      this.domDisposables = [];
+      this.destroyed = false;
+      // Overview minimap.
+      this.introStart = null;
+      this.overviewVisible = true;
+      this.ovDragging = false;
+      this.historyShortcut = (direction) => {
+        if (direction === "undo") this.undo();
+        else this.redo();
+      };
+      this.ovGeo = null;
+      this.validator = null;
+      this.handlers = /* @__PURE__ */ new Map();
+      this.opts = opts;
+      if (opts.typeColors !== void 0) this.setTypeColorsInternal(opts.typeColors);
+      this.host = opts.host;
+      this.gridSnapEnabled = opts.gridSnap ?? false;
+      this.gridSize = this.normalizeGridSize(opts.gridSize ?? DEFAULT_GRID_SIZE);
+      this.history = new DiagramCommandHistory(() => {
+        this.emit("undoStackChanged", { canUndo: this.canUndo(), canRedo: this.canRedo() });
+      });
+      this.canvas = document.createElement("canvas");
+      this.canvas.style.display = "block";
+      this.canvas.tabIndex = 0;
+      this.canvas.style.outline = "none";
+      this.canvas.style.touchAction = "none";
+      this.canvas.style.userSelect = "none";
+      this.canvas.style.webkitUserSelect = "none";
+      this.canvas.style.webkitTouchCallout = "none";
+      this.host.appendChild(this.canvas);
+      const ctx = this.canvas.getContext("2d");
+      if (ctx === null) throw new Error("ssdiagram: 2d context unavailable");
+      this.ctx = ctx;
+      this.resize(this.host.clientWidth || 800, this.host.clientHeight || 480);
+      this.bind();
+    }
+    // ---- events -----------------------------------------------------
+    on(ev, h) {
+      let set = this.handlers.get(ev);
+      if (set === void 0) {
+        set = /* @__PURE__ */ new Set();
+        this.handlers.set(ev, set);
+      }
+      set.add(h);
+      return () => set.delete(h);
+    }
+    emit(ev, p) {
+      const set = this.handlers.get(ev);
+      if (set === void 0) return;
+      for (const h of set) {
+        try {
+          h(p);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+    // ---- public API (Layer-A-shaped) --------------------------------
+    setLinkValidator(fn) {
+      this.validator = fn;
+    }
+    setGridSnap(enabled, size) {
+      const nextSize = size === void 0 ? this.gridSize : this.normalizeGridSize(size);
+      this.gridSnapEnabled = enabled;
+      this.gridSize = nextSize;
+      this.scheduleDraw();
+    }
+    getGridSnap() {
+      return { enabled: this.gridSnapEnabled, size: this.gridSize };
+    }
+    normalizeGridSize(size) {
+      if (!Number.isFinite(size) || size <= 0) throw new RangeError("ssdiagram: grid size must be a positive finite number");
+      return size;
+    }
+    nextNodeId() {
+      let id;
+      do
+        id = `n${this.idSeq++}`;
+      while (this.nodes.some((node) => node.id === id));
+      return id;
+    }
+    nextLinkId() {
+      let id;
+      do
+        id = `link_${this.linkSeq++}`;
+      while (this.links.some((link) => link.id === id));
+      return id;
+    }
+    addDiagramNode(init) {
+      const id = init.id ?? this.nextNodeId();
+      if (id.trim().length === 0) throw new Error("ssdiagram: node id cannot be empty");
+      if (this.nodes.some((node) => node.id === id)) throw new Error(`ssdiagram: duplicate node id "${id}"`);
+      const fullInit = { ...init, id };
+      this.doAddNode(fullInit);
+      this.record({
+        do: () => {
+          this.doAddNode(fullInit);
+        },
+        undo: () => {
+          this.doRemoveNode(id);
+        },
+        label: "add node"
+      });
+      return id;
+    }
+    doAddNode(init) {
+      const id = init.id ?? this.nextNodeId();
+      if (this.nodes.some((node2) => node2.id === id)) return;
+      const node = new NodeModel(init, id);
+      this.layoutNode(node);
+      this.nodes.push(node);
+      this.emit("nodeAdded", { node });
+      this.scheduleDraw();
+    }
+    removeDiagramNode(id) {
+      const node = this.nodes.find((n2) => n2.id === id);
+      if (node === void 0) return;
+      const snapshot = node.toInit(false);
+      const cascaded = this.links.map((link, index) => ({ link, index })).filter(({ link }) => link.from === id || link.to === id).map(({ link, index }) => ({ init: link.toInit(), index }));
+      const siblingTargets = [];
+      for (const { init } of cascaded) {
+        if (init.from !== id || init.to === id) continue;
+        const targetPort = this.findNode(init.to)?.inPorts.find((port) => port.id === init.toPort);
+        if (targetPort?.isSibling !== true) continue;
+        if (!siblingTargets.some((target) => target.nodeId === init.to && target.portId === init.toPort)) {
+          siblingTargets.push({ nodeId: init.to, portId: init.toPort });
+        }
+      }
+      const remove = () => {
+        this.doRemoveNode(id);
+        this.record({
+          do: () => {
+            this.doRemoveNode(id);
+          },
+          undo: () => {
+            this.doAddNode(snapshot);
+            for (const { init, index } of cascaded) this.doAddLink(init, false, index);
+          },
+          label: "remove node"
+        });
+      };
+      if (siblingTargets.length === 0) {
+        remove();
+      } else {
+        this.withTransaction("remove node", () => {
+          remove();
+          for (const target of siblingTargets) this.pruneDynamicSibling(target.nodeId, target.portId);
+        });
+      }
+    }
+    doRemoveNode(id) {
+      const node = this.nodes.find((n2) => n2.id === id);
+      if (node === void 0) return;
+      const removedLinks = this.links.filter((l) => l.from === id || l.to === id);
+      this.links = this.links.filter((l) => l.from !== id && l.to !== id);
+      this.nodes = this.nodes.filter((n2) => n2 !== node);
+      let selectionChanged = this.selectedNodes.delete(node);
+      if (this.selectedNode === node) {
+        const remaining = [...this.selectedNodes];
+        this.selectedNode = remaining[remaining.length - 1] ?? null;
+        selectionChanged = true;
+      }
+      if (this.selectedPort?.node === node) {
+        this.selectedPort = null;
+        selectionChanged = true;
+      }
+      if (this.selectedLink !== null && removedLinks.includes(this.selectedLink)) {
+        this.selectedLink = null;
+        selectionChanged = true;
+      }
+      if (selectionChanged) this.emitSelectionChanged();
+      for (const l of removedLinks) this.emit("linkRemoved", { link: l });
+      this.emit("nodeRemoved", { node });
+      this.scheduleDraw();
+    }
+    moveNode(id, x, y) {
+      const node = this.nodes.find((n2) => n2.id === id);
+      if (node === void 0) return;
+      const fromX = node.x, fromY = node.y;
+      this.doMoveNode(id, x, y);
+      if (fromX !== x || fromY !== y) {
+        this.record({
+          do: () => {
+            this.doMoveNode(id, x, y);
+          },
+          undo: () => {
+            this.doMoveNode(id, fromX, fromY);
+          },
+          label: "move node"
+        });
+      }
+    }
+    nudgeSelection(dx, dy) {
+      if (!Number.isFinite(dx) || !Number.isFinite(dy)) throw new RangeError("ssdiagram: nudge delta must be finite");
+      if (dx === 0 && dy === 0 || this.selectedNodes.size === 0) return false;
+      const moves = [...this.selectedNodes].map((node) => ({
+        id: node.id,
+        fromX: node.x,
+        fromY: node.y,
+        toX: node.x + dx,
+        toY: node.y + dy
+      }));
+      for (const move of moves) this.doMoveNode(move.id, move.toX, move.toY);
+      this.record({
+        do: () => {
+          for (const move of moves) this.doMoveNode(move.id, move.toX, move.toY);
+        },
+        undo: () => {
+          for (const move of moves) this.doMoveNode(move.id, move.fromX, move.fromY);
+        },
+        label: "nudge"
+      });
+      return true;
+    }
+    doMoveNode(id, x, y) {
+      const node = this.nodes.find((n2) => n2.id === id);
+      if (node === void 0) return;
+      node.x = x;
+      node.y = y;
+      this.layoutNode(node);
+      this.emit("nodeMoved", { node });
+      this.scheduleDraw();
+    }
+    addLink(init) {
+      const fullInit = {
+        ...init,
+        id: init.id ?? this.nextLinkId(),
+        metadata: copyJsonObject(init.metadata)
+      };
+      if (fullInit.id !== void 0 && this.links.some((link) => link.id === fullInit.id)) return false;
+      const fromNode = this.nodes.find((node) => node.id === fullInit.from);
+      const toNode = this.nodes.find((node) => node.id === fullInit.to);
+      const fromPort = fromNode?.outPorts.find((port) => port.id === fullInit.fromPort);
+      const toPort = toNode?.inPorts.find((port) => port.id === fullInit.toPort);
+      if (fromNode !== void 0 && toNode !== void 0 && fromPort !== void 0 && toPort !== void 0 && toPort.isDynamic && toPort.dynamicMode === "onConnect" && !toPort.isSibling) {
+        const validation = this.validateLinkModels(fromNode, fromPort, toNode, toPort);
+        this.emit("linkValidation", { fromNode, from: fromPort, toNode, to: toPort, ...validation });
+        if (!validation.allowed) return false;
+        const sibling = this.createDynamicSibling(toNode, toPort, fromPort);
+        let added = false;
+        const failed = new Error("ssdiagram: dynamic link transaction failed");
+        try {
+          this.withTransaction("add dynamic link", () => {
+            if (!this.addPort(toNode.id, "in", sibling)) throw failed;
+            added = this.addLinkApplied({ ...fullInit, toPort: sibling.id }, false);
+            if (!added) throw failed;
+          });
+        } catch (error) {
+          if (error === failed) return false;
+          throw error;
+        }
+        return added;
+      }
+      return this.addLinkApplied(fullInit, true);
+    }
+    addLinkApplied(init, validate) {
+      const ok = this.doAddLink(init, validate);
+      if (ok) {
+        this.record({
+          do: () => {
+            this.doAddLink(init, false);
+          },
+          undo: () => {
+            this.doRemoveLink(init);
+          },
+          label: "add link"
+        });
+      }
+      return ok;
+    }
+    doAddLink(init, validate = true, index = this.links.length) {
+      const fn = this.nodes.find((n2) => n2.id === init.from);
+      const tn = this.nodes.find((n2) => n2.id === init.to);
+      if (fn === void 0 || tn === void 0) return false;
+      const fp = fn.outPorts.find((p) => p.id === init.fromPort);
+      const tp = tn.inPorts.find((p) => p.id === init.toPort);
+      if (fp === void 0 || tp === void 0) return false;
+      if (validate) {
+        const validation = this.validateLinkModels(fn, fp, tn, tp);
+        this.emit("linkValidation", { fromNode: fn, from: fp, toNode: tn, to: tp, ...validation });
+        if (!validation.allowed) return false;
+      }
+      const link = new LinkModel(init.from, init.fromPort, init.to, init.toPort, init.id ?? this.nextLinkId(), init.metadata, init.style ?? "solid");
+      if (this.links.some((l) => l.id === link.id)) return false;
+      this.links.splice(clamp(Math.trunc(index), 0, this.links.length), 0, link);
+      this.emit("linkAdded", { link });
+      this.scheduleDraw();
+      return true;
+    }
+    removeLink(link) {
+      this.removeLinkInternal(link, true);
+    }
+    removeLinkInternal(link, pruneDynamicSibling) {
+      const key = new LinkModel(link.from, link.fromPort, link.to, link.toPort).key();
+      const found = link.id === void 0 || link.id.length === 0 ? this.links.find((candidate) => candidate.key() === key) : this.links.find((candidate) => candidate.id === link.id);
+      if (found === void 0) return;
+      const init = found.toInit();
+      const index = this.links.indexOf(found);
+      const targetPort = this.findNode(found.to)?.inPorts.find((port) => port.id === found.toPort);
+      const remove = () => {
+        this.doRemoveLink(init);
+        this.record({
+          do: () => {
+            this.doRemoveLink(init);
+          },
+          undo: () => {
+            this.doAddLink(init, false, index);
+          },
+          label: "remove link"
+        });
+      };
+      if (pruneDynamicSibling && targetPort?.isSibling === true) {
+        this.withTransaction("remove dynamic link", () => {
+          remove();
+          this.pruneDynamicSibling(init.to, init.toPort);
+        });
+      } else {
+        remove();
+      }
+    }
+    doRemoveLink(link) {
+      const k = new LinkModel(link.from, link.fromPort, link.to, link.toPort).key();
+      const found = this.links.find((l) => l.key() === k);
+      if (found === void 0) return;
+      this.links = this.links.filter((l) => l !== found);
+      if (this.selectedLink === found) this.selectLink(null);
+      this.emit("linkRemoved", { link: found });
+      this.scheduleDraw();
+    }
+    createDynamicSibling(toNode, anchor, source) {
+      let sequence = 1;
+      while (toNode.inPorts.some((port) => port.id === `${anchor.id}_${sequence}`)) sequence += 1;
+      return {
+        id: `${anchor.id}_${sequence}`,
+        name: `${anchor.name} ${sequence}`,
+        description: anchor.description,
+        type: source.type || anchor.type,
+        maxLinks: 1,
+        availableTypes: [...anchor.availableTypes],
+        isDynamic: false,
+        dynamicMode: "",
+        isSibling: true,
+        metadata: copyJsonObject(anchor.metadata)
+      };
+    }
+    pruneDynamicSibling(nodeId, portId) {
+      const node = this.findNode(nodeId);
+      const port = node?.inPorts.find((candidate) => candidate.id === portId);
+      if (port?.isSibling !== true) return;
+      if (this.links.some((link) => link.to === nodeId && link.toPort === portId)) return;
+      this.removePort(nodeId, "in", portId);
+    }
+    // ---- undo / redo public surface ---------------------------------
+    canUndo() {
+      return this.permissions.history && this.history.state.canUndo;
+    }
+    canRedo() {
+      return this.permissions.history && this.history.state.canRedo;
+    }
+    undo() {
+      if (this.permissions.history) this.history.undo();
+    }
+    redo() {
+      if (this.permissions.history) this.history.redo();
+    }
+    cutSelection() {
+      if (!this.permissions.copy || !this.permissions.deleteSelection) return;
+      this.copySelection();
+      this.withTransaction("cut", () => {
+        this.deleteSelection();
+      });
+    }
+    // Group multiple mutations into one undo step (paste of N nodes,
+    // bulk delete, multi-drag, etc.). Re-entrant: nested calls flatten
+    // into the outer batch.
+    withTransaction(label, fn) {
+      return this.history.transaction(label, fn);
+    }
+    record(action) {
+      this.history.recordApplied({
+        label: action.label,
+        execute: action.do,
+        undo: action.undo
+      });
+    }
+    deleteSelection() {
+      if (!this.permissions.deleteSelection) return;
+      if (this.selectedNodes.size > 0) {
+        this.withTransaction("delete selection", () => {
+          for (const id of [...this.selectedNodes].map((n2) => n2.id)) this.removeDiagramNode(id);
+        });
+        this.selectedNodes.clear();
+        this.selectedNode = null;
+        return;
+      }
+      if (this.selectedLink !== null) {
+        this.removeLink(this.selectedLink);
+      }
+    }
+    clear() {
+      this.nodes = [];
+      this.links = [];
+      this.zones = [];
+      const hadSelection = this.selectedNode !== null || this.selectedNodes.size > 0 || this.selectedLink !== null || this.selectedPort !== null;
+      this.selectedNode = null;
+      this.selectedNodes.clear();
+      this.selectedLink = null;
+      this.selectedPort = null;
+      this.documentMetadata = {};
+      this.runtimeState = createDiagramRuntimeState();
+      this.runtimePulse = 0;
+      this.globalErrorFlashStart = null;
+      this.history.clear();
+      if (hadSelection) this.emitSelectionChanged();
+      this.emitRuntimeStateChanged();
+    }
+    relink(linkId, next) {
+      const link = this.links.find((candidate) => candidate.id === linkId);
+      if (link === void 0) return { allowed: false, reason: "missing-link" };
+      const validation = this.validateLink(next, linkId);
+      const fromNode = this.nodes.find((node) => node.id === next.from);
+      const toNode = this.nodes.find((node) => node.id === next.to);
+      const fromPort = fromNode?.outPorts.find((port) => port.id === next.fromPort);
+      const toPort = toNode?.inPorts.find((port) => port.id === next.toPort);
+      if (fromNode !== void 0 && toNode !== void 0 && fromPort !== void 0 && toPort !== void 0) {
+        this.emit("linkValidation", { fromNode, from: fromPort, toNode, to: toPort, ...validation });
+      }
+      if (!validation.allowed) return validation;
+      const before = link.toInit();
+      if (before.from === next.from && before.fromPort === next.fromPort && before.to === next.to && before.toPort === next.toPort) return validation;
+      const dynamicSibling = fromPort !== void 0 && toNode !== void 0 && toPort !== void 0 && toPort.isDynamic && toPort.dynamicMode === "onConnect" && !toPort.isSibling ? this.createDynamicSibling(toNode, toPort, fromPort) : null;
+      const after = {
+        ...before,
+        ...next,
+        toPort: dynamicSibling?.id ?? next.toPort
+      };
+      const oldTargetPort = this.findNode(before.to)?.inPorts.find((port) => port.id === before.toPort);
+      const apply = () => {
+        this.doRelink(linkId, after);
+        this.record({
+          do: () => {
+            this.doRelink(linkId, after);
+          },
+          undo: () => {
+            this.doRelink(linkId, before);
+          },
+          label: "relink"
+        });
+      };
+      const pruneOldSibling = oldTargetPort?.isSibling === true && (before.to !== after.to || before.toPort !== after.toPort);
+      if (dynamicSibling !== null || pruneOldSibling) {
+        this.withTransaction("relink dynamic link", () => {
+          if (dynamicSibling !== null && !this.addPort(after.to, "in", dynamicSibling)) {
+            throw new Error("ssdiagram: could not create a dynamic sibling port");
+          }
+          apply();
+          if (pruneOldSibling) this.pruneDynamicSibling(before.to, before.toPort);
+        });
+      } else {
+        apply();
+      }
+      return validation;
+    }
+    doRelink(linkId, next) {
+      const link = this.links.find((candidate) => candidate.id === linkId);
+      if (link === void 0) return;
+      const previous = link.toInit();
+      link.from = next.from;
+      link.fromPort = next.fromPort;
+      link.to = next.to;
+      link.toPort = next.toPort;
+      this.emit("linkRelinked", { link, previous });
+      this.scheduleDraw();
+    }
+    addPort(nodeId, direction, init) {
+      const node = this.findNode(nodeId);
+      if (node === void 0) return false;
+      const ports = direction === "in" ? node.inPorts : node.outPorts;
+      if (ports.some((port) => port.id === init.id)) return false;
+      return this.updateNodeState(nodeId, "add port", (target) => {
+        const list = direction === "in" ? target.inPorts : target.outPorts;
+        list.push(new PortModel(init, direction));
+      });
+    }
+    removePort(nodeId, direction, portId) {
+      const node = this.findNode(nodeId);
+      if (node === void 0) return false;
+      const ports = direction === "in" ? node.inPorts : node.outPorts;
+      if (!ports.some((port) => port.id === portId)) return false;
+      let changed = false;
+      this.withTransaction("remove port", () => {
+        const affected = this.links.filter((link) => direction === "in" ? link.to === nodeId && link.toPort === portId : link.from === nodeId && link.fromPort === portId);
+        for (const link of affected) this.removeLinkInternal(link, false);
+        changed = this.updateNodeState(nodeId, "remove port", (target) => {
+          if (direction === "in") target.inPorts = target.inPorts.filter((port) => port.id !== portId);
+          else target.outPorts = target.outPorts.filter((port) => port.id !== portId);
+        });
+      });
+      return changed;
+    }
+    updatePortType(nodeId, direction, portId, type) {
+      return this.updatePort(nodeId, direction, portId, { type });
+    }
+    updatePort(nodeId, direction, portId, patch) {
+      const node = this.findNode(nodeId);
+      const port = direction === "in" ? node?.inPorts.find((candidate) => candidate.id === portId) : node?.outPorts.find((candidate) => candidate.id === portId);
+      if (port === void 0) return false;
+      if (patch.maxLinks !== void 0 && (!Number.isInteger(patch.maxLinks) || patch.maxLinks < 0)) {
+        throw new RangeError("ssdiagram: port maxLinks must be a non-negative integer");
+      }
+      const compatibilityChanged = patch.type !== void 0 && patch.type !== port.type || patch.availableTypes !== void 0 && JSON.stringify(patch.availableTypes) !== JSON.stringify(port.availableTypes);
+      let changed = false;
+      this.withTransaction("update port", () => {
+        changed = this.updateNodeState(nodeId, "update port", (target) => {
+          const targetPort = direction === "in" ? target.inPorts.find((candidate) => candidate.id === portId) : target.outPorts.find((candidate) => candidate.id === portId);
+          if (targetPort === void 0) return;
+          if (patch.name !== void 0) targetPort.name = patch.name;
+          if (patch.description !== void 0) targetPort.description = patch.description;
+          if (patch.type !== void 0) targetPort.type = patch.type;
+          if (patch.maxLinks !== void 0) targetPort.maxLinks = patch.maxLinks;
+          if (patch.availableTypes !== void 0) targetPort.availableTypes = [...patch.availableTypes];
+          if (patch.isDynamic !== void 0) targetPort.isDynamic = patch.isDynamic;
+          if (patch.dynamicMode !== void 0) targetPort.dynamicMode = patch.dynamicMode;
+          if (patch.isSibling !== void 0) targetPort.isSibling = patch.isSibling;
+          if (patch.metadata !== void 0) targetPort.metadata = copyJsonObject(patch.metadata);
+        });
+        if (changed && compatibilityChanged) {
+          this.removeIncompatibleLinks((link) => direction === "in" ? link.to === nodeId && link.toPort === portId : link.from === nodeId && link.fromPort === portId);
+        }
+      });
+      return changed;
+    }
+    setNodePorts(nodeId, inPorts, outPorts) {
+      const node = this.findNode(nodeId);
+      if (node === void 0) return false;
+      const inputIds = new Set(inPorts.map((port) => port.id));
+      const outputIds = new Set(outPorts.map((port) => port.id));
+      let changed = false;
+      this.withTransaction("set node ports", () => {
+        const invalid = this.links.filter((link) => link.to === nodeId && !inputIds.has(link.toPort) || link.from === nodeId && !outputIds.has(link.fromPort));
+        for (const link of invalid) this.removeLinkInternal(link, false);
+        changed = this.updateNodeState(nodeId, "set node ports", (target) => {
+          target.inPorts = inPorts.map((port) => new PortModel(port, "in"));
+          target.outPorts = outPorts.map((port) => new PortModel(port, "out"));
+        });
+        if (changed) {
+          this.removeIncompatibleLinks((link) => link.from === nodeId || link.to === nodeId);
+        }
+      });
+      return changed;
+    }
+    updateNode(nodeId, patch) {
+      return this.updateNodeState(nodeId, "update node", (node) => {
+        if (patch.name !== void 0) node.name = patch.name;
+        if (patch.description !== void 0) node.description = patch.description;
+        if (patch.color !== void 0) node.color = patch.color;
+        if (patch.border !== void 0) node.border = patch.border;
+        if (patch.message !== void 0) node.message = patch.message;
+        if (patch.openAction !== void 0) node.openAction = patch.openAction;
+      });
+    }
+    setNodeParamValue(nodeId, name, value) {
+      return this.updateNodeState(nodeId, "set node parameter", (node) => {
+        if (value === void 0) delete node.paramValues[name];
+        else setJsonKey(node.paramValues, name, value);
+      });
+    }
+    setShowNodeMessages(show) {
+      this.showNodeMessages = show;
+      this.scheduleDraw();
+    }
+    updateNodeState(nodeId, label, mutate) {
+      const node = this.findNode(nodeId);
+      if (node === void 0) return false;
+      const before = node.toInit(false);
+      mutate(node);
+      if (this.reconcileSelectedPort(node)) this.emitSelectionChanged();
+      const after = node.toInit(false);
+      if (JSON.stringify(before) === JSON.stringify(after)) return false;
+      this.layoutNode(node);
+      this.emit("nodeChanged", { node });
+      this.scheduleDraw();
+      this.record({
+        do: () => {
+          this.applyNodeSnapshot(nodeId, after);
+        },
+        undo: () => {
+          this.applyNodeSnapshot(nodeId, before);
+        },
+        label
+      });
+      return true;
+    }
+    applyNodeSnapshot(nodeId, snapshot) {
+      const node = this.findNode(nodeId);
+      if (node === void 0) return;
+      const restored = new NodeModel(snapshot, nodeId);
+      node.typeId = restored.typeId;
+      node.name = restored.name;
+      node.description = restored.description;
+      node.groupName = restored.groupName;
+      node.color = restored.color;
+      node.border = restored.border;
+      node.icon = restored.icon;
+      node.openAction = restored.openAction;
+      node.message = restored.message;
+      node.parameters = restored.parameters;
+      node.paramValues = restored.paramValues;
+      node.metadata = restored.metadata;
+      node.isPlaceholder = restored.isPlaceholder;
+      node.x = restored.x;
+      node.y = restored.y;
+      node.inPorts = restored.inPorts;
+      node.outPorts = restored.outPorts;
+      if (this.reconcileSelectedPort(node)) this.emitSelectionChanged();
+      this.layoutNode(node);
+      this.emit("nodeChanged", { node });
+      this.scheduleDraw();
+    }
+    reconcileSelectedPort(node) {
+      if (this.selectedPort?.node !== node) return false;
+      const selected = this.selectedPort.port;
+      const ports = selected.direction === "in" ? node.inPorts : node.outPorts;
+      const replacement = ports.find((port) => port.id === selected.id);
+      if (replacement === selected) return false;
+      this.selectedPort = replacement === void 0 ? null : { node, port: replacement };
+      return true;
+    }
+    load(nodes, links) {
+      this.clear();
+      this.idSeq = 1;
+      this.linkSeq = 1;
+      const seenNodeIds = /* @__PURE__ */ new Set();
+      for (const node of nodes) {
+        const id = node.id ?? "";
+        if (id === "") continue;
+        if (seenNodeIds.has(id)) throw new Error(`ssdiagram: duplicate node id "${id}"`);
+        seenNodeIds.add(id);
+      }
+      const seenLinkIds = /* @__PURE__ */ new Set();
+      for (const link of links) {
+        const id = link.id ?? "";
+        if (id === "") continue;
+        if (seenLinkIds.has(id)) throw new Error(`ssdiagram: duplicate link id "${id}"`);
+        seenLinkIds.add(id);
+      }
+      for (const node of nodes) {
+        const id = node.id ?? this.nextNodeId();
+        this.doAddNode({ ...node, id });
+      }
+      for (const link of links) {
+        const id = link.id ?? this.nextLinkId();
+        if (this.links.some((existing) => existing.id === id)) {
+          throw new Error(`ssdiagram: duplicate link id "${id}"`);
+        }
+        const model = new LinkModel(link.from, link.fromPort, link.to, link.toPort, id, link.metadata, link.style ?? "solid");
+        if (!this.links.some((existing) => existing.key() === model.key())) this.links.push(model);
+      }
+      for (const node of this.nodes) {
+        if (node.loadError.length === 0) continue;
+        const state = createDiagramNodeRuntimeState();
+        state.errors.load = { kind: "load", message: node.loadError, pulse: ++this.runtimePulse };
+        setJsonKey(this.runtimeState.nodes, node.id, state);
+      }
+      if (Object.keys(this.runtimeState.nodes).length > 0) this.emitRuntimeStateChanged();
+      this.history.clear();
+      this.emit("loadFinished", { nodes: this.nodes.slice(), links: this.links.slice() });
+      this.zoomToFit();
+      this.playIntro();
+    }
+    save() {
+      return {
+        nodes: this.nodes.map((node) => node.toInit(false)),
+        links: this.links.map((l) => ({
+          id: l.id,
+          from: l.from,
+          fromPort: l.fromPort,
+          to: l.to,
+          toPort: l.toPort,
+          style: l.style,
+          metadata: copyJsonObject(l.metadata)
+        }))
+      };
+    }
+    loadDocument(source) {
+      const document2 = parseDiagramDocument(source);
+      this.load(
+        document2.nodes,
+        document2.links.map((link) => ({
+          id: link.id,
+          from: link.from.nodeId,
+          fromPort: link.from.portId,
+          to: link.to.nodeId,
+          toPort: link.to.portId,
+          style: link.style,
+          metadata: link.metadata
+        }))
+      );
+      this.zones = document2.zones.map((zone) => ({ ...zone, metadata: copyJsonObject(zone.metadata) }));
+      this.documentMetadata = copyJsonObject(document2.metadata);
+    }
+    saveDocument() {
+      return createDiagramDocument({
+        nodes: this.nodes.map((node) => node.toInit(false)),
+        links: this.links.map((link) => ({
+          id: link.id,
+          from: { nodeId: link.from, portId: link.fromPort },
+          to: { nodeId: link.to, portId: link.toPort },
+          style: link.style,
+          metadata: link.metadata
+        })),
+        zones: this.zones.map((zone) => ({ ...zone, metadata: copyJsonObject(zone.metadata) })),
+        metadata: this.documentMetadata
+      });
+    }
+    selectedNodeId() {
+      return this.selectedNode?.id ?? null;
+    }
+    getSelection() {
+      return {
+        nodeIds: [...this.selectedNodes].map((node) => node.id),
+        linkIds: this.selectedLink === null ? [] : [this.selectedLink.id],
+        port: this.selectedPort === null ? null : {
+          nodeId: this.selectedPort.node.id,
+          portId: this.selectedPort.port.id,
+          direction: this.selectedPort.port.direction
+        },
+        primaryNodeId: this.selectedNode?.id ?? null,
+        primaryLinkId: this.selectedLink?.id ?? null
+      };
+    }
+    selectNodesById(ids) {
+      const wanted = new Set(ids);
+      this.setSelection(this.nodes.filter((node) => wanted.has(node.id)));
+    }
+    selectLinkById(id) {
+      this.selectLink(id === null ? null : this.links.find((link) => link.id === id) ?? null);
+    }
+    selectPortById(nodeId, direction, portId) {
+      const node = this.findNode(nodeId);
+      const port = direction === "in" ? node?.inPorts.find((candidate) => candidate.id === portId) : node?.outPorts.find((candidate) => candidate.id === portId);
+      if (node !== void 0 && port !== void 0) this.selectPort({ node, port });
+    }
+    getViewState() {
+      return {
+        zoom: this.scale,
+        panX: this.offX,
+        panY: this.offY,
+        overviewVisible: this.overviewVisible
+      };
+    }
+    /**
+     * Replaces what Ctrl+Z / Ctrl+Y do. Passing null restores the built-in behaviour, which is
+     * plain undo()/redo() -- so a renderer used on its own keeps its keyboard history.
+     */
+    setHistoryShortcutHandler(handler) {
+      this.historyShortcut = handler ?? ((direction) => {
+        if (direction === "undo") this.undo();
+        else this.redo();
+      });
+    }
+    setViewState(state) {
+      if (!Number.isFinite(state.zoom) || !Number.isFinite(state.panX) || !Number.isFinite(state.panY)) {
+        throw new RangeError("ssdiagram: view state zoom and pan must be finite numbers");
+      }
+      this.scale = clamp(state.zoom, ZOOM_MIN, ZOOM_MAX);
+      this.offX = state.panX;
+      this.offY = state.panY;
+      this.overviewVisible = state.overviewVisible;
+      this.emitViewChanged(true);
+      this.scheduleDraw();
+    }
+    // Renderer operations consumed by the high-level component.
+    findNode(id) {
+      return this.nodes.find((n2) => n2.id === id);
+    }
+    requestRedraw() {
+      this.relayout();
+      this.scheduleDraw();
+    }
+    /**
+     * Creates a detached canvas. With no options it is an exact copy of the
+     * current frame, matching Charts.takeScreenshot(). Content scope renders
+     * the whole graph without changing the visible viewport.
+     */
+    takeScreenshot(options = {}) {
+      if (this.destroyed) throw new Error("ssdiagram: cannot export a destroyed diagram");
+      const scope = options.scope ?? "viewport";
+      if (scope !== "viewport" && scope !== "content") {
+        throw new RangeError(`ssdiagram: unsupported screenshot scope "${String(scope)}"`);
+      }
+      if (scope === "viewport" && Object.keys(options).length === 0) {
+        if (this.drawScheduled) this.draw();
+        const copy = document.createElement("canvas");
+        copy.width = this.canvas.width;
+        copy.height = this.canvas.height;
+        const copyContext = copy.getContext("2d");
+        if (copyContext === null) throw new Error("ssdiagram: screenshot 2d context unavailable");
+        copyContext.drawImage(this.canvas, 0, 0);
+        return copy;
+      }
+      const layout = this.exportLayout(scope, options);
+      const { pixelRatio, exportScale, padding, bounds, width, height, pixelWidth, pixelHeight } = layout;
+      const output = document.createElement("canvas");
+      output.width = pixelWidth;
+      output.height = pixelHeight;
+      output.style.width = `${width}px`;
+      output.style.height = `${height}px`;
+      const outputContext = output.getContext("2d");
+      if (outputContext === null) throw new Error("ssdiagram: screenshot 2d context unavailable");
+      const previous = {
+        ctx: this.ctx,
+        width: this.width,
+        height: this.height,
+        dpr: this.dpr,
+        scale: this.scale,
+        offX: this.offX,
+        offY: this.offY,
+        overviewVisible: this.overviewVisible,
+        background: this.opts.background,
+        // Drawing the overview recomputes this from the export frame. Left behind, the next
+        // click on the on-screen minimap panned to a point in the export's coordinates.
+        ovGeo: this.ovGeo
+      };
+      try {
+        this.ctx = outputContext;
+        this.width = width;
+        this.height = height;
+        this.dpr = pixelRatio;
+        this.scale = exportScale;
+        this.offX = scope === "content" && bounds !== null ? padding - bounds.minX * exportScale : previous.offX;
+        this.offY = scope === "content" && bounds !== null ? padding - bounds.minY * exportScale : previous.offY;
+        this.overviewVisible = options.includeOverview ?? (scope === "viewport" && previous.overviewVisible);
+        if (options.background !== void 0) this.opts.background = options.background;
+        outputContext.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+        this.draw({
+          grid: options.includeGrid ?? true,
+          overview: this.overviewVisible,
+          selection: options.includeSelection ?? scope === "viewport",
+          runtime: options.includeRuntimeState ?? true,
+          transient: false
+        });
+      } finally {
+        this.ctx = previous.ctx;
+        this.width = previous.width;
+        this.height = previous.height;
+        this.dpr = previous.dpr;
+        this.scale = previous.scale;
+        this.offX = previous.offX;
+        this.offY = previous.offY;
+        this.overviewVisible = previous.overviewVisible;
+        this.opts.background = previous.background;
+        this.ovGeo = previous.ovGeo;
+      }
+      return output;
+    }
+    // Everything an export needs to know about size and placement, for either output. Shared on
+    // purpose: a raster and a vector export of the same scope must frame the picture identically,
+    // and two copies of this arithmetic would eventually disagree about padding or where the origin
+    // sits. A block comment here would be lifted onto the next public member in the .d.ts.
+    exportLayout(scope, options) {
+      const pixelRatio = this.positiveScreenshotNumber(options.pixelRatio ?? this.dpr, "pixelRatio");
+      const exportScale = scope === "content" ? this.positiveScreenshotNumber(options.scale ?? 1, "scale") : this.scale;
+      const padding = scope === "content" ? this.nonNegativeScreenshotNumber(options.padding ?? 32, "padding") : 0;
+      const bounds = scope === "content" ? this.graphBounds() : null;
+      const width = scope === "content" ? Math.max(1, Math.ceil(((bounds?.maxX ?? 1) - (bounds?.minX ?? 0)) * exportScale + padding * 2)) : this.width;
+      const height = scope === "content" ? Math.max(1, Math.ceil(((bounds?.maxY ?? 1) - (bounds?.minY ?? 0)) * exportScale + padding * 2)) : this.height;
+      const pixelWidth = Math.ceil(width * pixelRatio);
+      const pixelHeight = Math.ceil(height * pixelRatio);
+      if (pixelWidth > 16384 || pixelHeight > 16384 || pixelWidth * pixelHeight > 268435456) {
+        throw new RangeError(`ssdiagram: screenshot is too large (${pixelWidth}x${pixelHeight})`);
+      }
+      return { pixelRatio, exportScale, padding, bounds, width, height, pixelWidth, pixelHeight };
+    }
+    /**
+     * The same picture takeScreenshot produces, as SVG.
+     *
+     * It is the renderer that draws it -- the surface underneath simply records instead of paints --
+     * so the vector output cannot drift from what the screen and the raster export show. Text keeps
+     * the on-screen metrics by measuring through a real 2D context.
+     *
+     * Scale and pixelRatio still frame the picture (they decide the viewBox), but nothing is
+     * resampled: the result is resolution-independent, which is the point of asking for it.
+     */
+    takeSvg(options = {}) {
+      if (this.destroyed) throw new Error("ssdiagram: cannot export a destroyed diagram");
+      const scope = options.scope ?? "viewport";
+      if (scope !== "viewport" && scope !== "content") {
+        throw new RangeError(`ssdiagram: unsupported screenshot scope "${String(scope)}"`);
+      }
+      const { exportScale, padding, bounds, width, height } = this.exportLayout(scope, options);
+      const metrics = this.canvas.getContext("2d");
+      const surface = new SvgSurface({
+        width,
+        height,
+        background: options.background ?? this.opts.background ?? "#1b1b1f",
+        metrics: metrics ?? void 0
+      });
+      const previous = {
+        ctx: this.ctx,
+        width: this.width,
+        height: this.height,
+        dpr: this.dpr,
+        scale: this.scale,
+        offX: this.offX,
+        offY: this.offY,
+        overviewVisible: this.overviewVisible,
+        background: this.opts.background,
+        // Drawing the overview recomputes this from the export frame. Left behind, the next
+        // click on the on-screen minimap panned to a point in the export's coordinates.
+        ovGeo: this.ovGeo
+      };
+      try {
+        this.ctx = surface;
+        if (options.background !== void 0) this.opts.background = options.background;
+        this.width = width;
+        this.height = height;
+        this.dpr = 1;
+        this.scale = exportScale;
+        this.offX = scope === "content" && bounds !== null ? padding - bounds.minX * exportScale : previous.offX;
+        this.offY = scope === "content" && bounds !== null ? padding - bounds.minY * exportScale : previous.offY;
+        this.overviewVisible = options.includeOverview ?? (scope === "viewport" && previous.overviewVisible);
+        this.draw({
+          grid: options.includeGrid ?? true,
+          overview: this.overviewVisible,
+          selection: options.includeSelection ?? scope === "viewport",
+          runtime: options.includeRuntimeState ?? true,
+          transient: false
+        });
+      } finally {
+        this.ctx = previous.ctx;
+        this.width = previous.width;
+        this.height = previous.height;
+        this.dpr = previous.dpr;
+        this.scale = previous.scale;
+        this.offX = previous.offX;
+        this.offY = previous.offY;
+        this.overviewVisible = previous.overviewVisible;
+        this.opts.background = previous.background;
+        this.ovGeo = previous.ovGeo;
+      }
+      return surface.toSvg();
+    }
+    positiveScreenshotNumber(value, name) {
+      if (!Number.isFinite(value) || value <= 0) {
+        throw new RangeError(`ssdiagram: screenshot ${name} must be a positive finite number`);
+      }
+      return value;
+    }
+    nonNegativeScreenshotNumber(value, name) {
+      if (!Number.isFinite(value) || value < 0) {
+        throw new RangeError(`ssdiagram: screenshot ${name} must be a non-negative finite number`);
+      }
+      return value;
+    }
+    getRuntimeState() {
+      return cloneDiagramRuntimeState(this.runtimeState);
+    }
+    setRuntimeState(state) {
+      const previous = this.runtimeState;
+      this.runtimeState = cloneDiagramRuntimeState(state);
+      if (this.runtimeState.globalError === null) {
+        this.globalErrorFlashStart = null;
+      } else if (previous.globalError?.pulse !== this.runtimeState.globalError.pulse) {
+        this.globalErrorFlashStart = performance.now();
+      }
+      this.runtimePulse = Math.max(
+        this.runtimePulse,
+        this.runtimeState.globalError?.pulse ?? 0,
+        ...Object.values(this.runtimeState.nodes).flatMap((node) => [node.errors.runtime?.pulse ?? 0, node.errors.load?.pulse ?? 0])
+      );
+      for (const node of this.nodes) {
+        const errors = getJsonKey(this.runtimeState.nodes, node.id)?.errors;
+        const previousRuntime = getJsonKey(previous.nodes, node.id)?.errors.runtime;
+        const runtimeError = errors?.runtime;
+        node.runtimeError = runtimeError?.message ?? "";
+        node.loadError = errors?.load?.message ?? "";
+        if (runtimeError !== void 0) {
+          if (previousRuntime === void 0 || previousRuntime.pulse !== runtimeError.pulse) {
+            node.errorFlashStart = performance.now();
+          }
+        } else {
+          node.errorFlashStart = null;
+        }
+      }
+      this.emitRuntimeStateChanged();
+    }
+    clearRuntimeState() {
+      this.setRuntimeState(createDiagramRuntimeState());
+    }
+    setActiveNode(nodeId) {
+      if (nodeId !== null && this.findNode(nodeId) === void 0) return false;
+      const state = this.getRuntimeState();
+      state.activeNodeId = nodeId;
+      this.setRuntimeState(state);
+      return true;
+    }
+    setPortRuntimeState(nodeId, direction, portId, patch) {
+      const node = this.findNode(nodeId);
+      const port = direction === "in" ? node?.inPorts.find((candidate) => candidate.id === portId) : node?.outPorts.find((candidate) => candidate.id === portId);
+      if (node === void 0 || port === void 0) return false;
+      const state = this.getRuntimeState();
+      const nodeState = getJsonKey(state.nodes, nodeId) ?? createDiagramNodeRuntimeState();
+      setJsonKey(state.nodes, nodeId, nodeState);
+      const current = nodeState.ports[direction][portId] ?? createDiagramPortRuntimeState();
+      nodeState.ports[direction][portId] = { ...current, ...patch };
+      this.setRuntimeState(state);
+      return true;
+    }
+    setGlobalError(message, kind = "invalid") {
+      const state = this.getRuntimeState();
+      state.globalError = message === null || message.length === 0 ? null : { kind, message, pulse: ++this.runtimePulse };
+      this.setRuntimeState(state);
+    }
+    setNodeError(id, message, options = {}) {
+      const node = this.findNode(id);
+      if (node === void 0) return false;
+      const kind = options.kind ?? "runtime";
+      if (kind === "load") {
+        node.loadError = message;
+      } else {
+        node.runtimeError = message;
+        node.errorFlashStart = message.length > 0 && options.animate !== false ? performance.now() : null;
+      }
+      const state = this.getRuntimeState();
+      const nodeState = getJsonKey(state.nodes, id) ?? createDiagramNodeRuntimeState();
+      setJsonKey(state.nodes, id, nodeState);
+      if (message.length === 0) delete nodeState.errors[kind];
+      else if (kind === "load") nodeState.errors.load = { kind, message, pulse: ++this.runtimePulse };
+      else nodeState.errors.runtime = { kind, message, pulse: ++this.runtimePulse };
+      this.runtimeState = state;
+      this.emitRuntimeStateChanged();
+      return true;
+    }
+    clearNodeError(id, kind) {
+      const node = this.findNode(id);
+      if (node === void 0) return false;
+      if (kind === void 0 || kind === "runtime") {
+        node.runtimeError = "";
+        node.errorFlashStart = null;
+      }
+      if (kind === void 0 || kind === "load") node.loadError = "";
+      const state = this.getRuntimeState();
+      const nodeState = getJsonKey(state.nodes, id);
+      if (nodeState !== void 0) {
+        if (kind === void 0 || kind === "runtime") delete nodeState.errors.runtime;
+        if (kind === void 0 || kind === "load") delete nodeState.errors.load;
+      }
+      this.runtimeState = state;
+      this.emitRuntimeStateChanged();
+      return true;
+    }
+    emitRuntimeStateChanged() {
+      this.emit("runtimeStateChanged", { state: this.getRuntimeState() });
+      this.scheduleDraw();
+    }
+    viewToWorld(sx, sy) {
+      return this.toWorld(sx, sy);
+    }
+    worldToView(wx, wy) {
+      return this.toScreen(wx, wy);
+    }
+    selectNodeById(id) {
+      const node = id === null ? null : this.nodes.find((n2) => n2.id === id) ?? null;
+      this.selectNode(node);
+    }
+    setZoom(scale) {
+      if (!Number.isFinite(scale)) throw new RangeError("ssdiagram: zoom must be a finite number");
+      const cx = this.width / 2;
+      const cy = this.height / 2;
+      const wx = (cx - this.offX) / this.scale;
+      const wy = (cy - this.offY) / this.scale;
+      this.scale = clamp(scale, ZOOM_MIN, ZOOM_MAX);
+      this.offX = cx - wx * this.scale;
+      this.offY = cy - wy * this.scale;
+      this.emitViewChanged(true);
+      this.scheduleDraw();
+    }
+    zoomToFit() {
+      const gb = this.graphBounds();
+      if (gb === null) {
+        this.scale = 1;
+        this.offX = 0;
+        this.offY = 0;
+        this.emitViewChanged(true);
+        this.scheduleDraw();
+        return;
+      }
+      const pad = 40;
+      const gw = gb.maxX - gb.minX + pad * 2;
+      const gh = gb.maxY - gb.minY + pad * 2;
+      this.scale = clamp(Math.min(this.width / gw, this.height / gh), ZOOM_MIN, 1);
+      this.offX = (this.width - (gb.maxX + gb.minX) * this.scale) / 2;
+      this.offY = (this.height - (gb.maxY + gb.minY) * this.scale) / 2;
+      this.emitViewChanged(true);
+      this.scheduleDraw();
+    }
+    // Entrance animation: the whole scheme rises from below + fades in.
+    playIntro() {
+      this.introStart = performance.now();
+      this.scheduleDraw();
+    }
+    setOverviewVisible(v) {
+      if (this.overviewVisible === v) return;
+      this.overviewVisible = v;
+      this.emitViewChanged(false);
+      this.scheduleDraw();
+    }
+    setTypeColors(colors) {
+      this.setTypeColorsInternal(colors);
+      this.scheduleDraw();
+    }
+    /**
+     * Keyed the way port types are compared everywhere else. Connection compatibility is case- and
+     * space-insensitive, so an imported scheme spelling a socket "candle " connects to "Candle" and
+     * then fell through to a hash colour, showing one logical type in two colours in one diagram.
+     */
+    setTypeColorsInternal(colors) {
+      const normalized = {};
+      for (const [type, color] of Object.entries(colors)) {
+        setJsonKey(normalized, normalizePortType(type), color);
+      }
+      this.opts.typeColors = normalized;
+    }
+    setTheme(t) {
+      if (t.background !== void 0) this.opts.background = t.background;
+      if (t.gridColor !== void 0) this.opts.gridColor = t.gridColor;
+      if (t.linkMaxLightness !== void 0) this.opts.linkMaxLightness = t.linkMaxLightness;
+      if (t.typedLinkColors !== void 0) this.opts.typedLinkColors = t.typedLinkColors;
+      if (t.overviewBackground !== void 0) this.opts.overviewBackground = t.overviewBackground;
+      if (t.overviewBorderColor !== void 0) this.opts.overviewBorderColor = t.overviewBorderColor;
+      if (t.overviewViewportColor !== void 0) this.opts.overviewViewportColor = t.overviewViewportColor;
+      if (t.overviewViewportFill !== void 0) this.opts.overviewViewportFill = t.overviewViewportFill;
+      this.scheduleDraw();
+    }
+    graphBounds() {
+      if (this.nodes.length === 0) return null;
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (const n2 of this.nodes) {
+        minX = Math.min(minX, n2.x);
+        minY = Math.min(minY, n2.y);
+        maxX = Math.max(maxX, n2.x + n2.w);
+        maxY = Math.max(maxY, n2.y + n2.h);
+      }
+      return { minX, minY, maxX, maxY };
+    }
+    resize(w, h) {
+      if (w < 2 || h < 2) return;
+      this.width = w;
+      this.height = h;
+      this.dpr = window.devicePixelRatio || 1;
+      this.canvas.width = Math.round(w * this.dpr);
+      this.canvas.height = Math.round(h * this.dpr);
+      this.canvas.style.width = `${w}px`;
+      this.canvas.style.height = `${h}px`;
+      this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+      this.scheduleDraw();
+    }
+    getInteractionPermissions() {
+      return { ...this.permissions };
+    }
+    setInteractionPermissions(patch) {
+      this.permissions = { ...this.permissions, ...patch };
+      if (!this.permissions.select) {
+        this.selectedNode = null;
+        this.selectedNodes.clear();
+        this.selectedLink = null;
+        this.selectedPort = null;
+        this.emitSelectionChanged();
+      }
+      this.emit("undoStackChanged", { canUndo: this.canUndo(), canRedo: this.canRedo() });
+      this.scheduleDraw();
+    }
+    /** View-only mode keeps selection, inspection and copy enabled. */
+    setReadOnly(value) {
+      this.permissions = value ? createReadOnlyDiagramPermissions() : createEditableDiagramPermissions();
+      this.emit("undoStackChanged", { canUndo: this.canUndo(), canRedo: this.canRedo() });
+      this.scheduleDraw();
+    }
+    destroy() {
+      if (this.destroyed) return;
+      this.destroyed = true;
+      this.cancelLongPress();
+      if (this.tipTimer !== null) {
+        clearTimeout(this.tipTimer);
+        this.tipTimer = null;
+      }
+      for (const dispose of this.domDisposables.splice(0).reverse()) dispose();
+      this.handlers.clear();
+      this.iconCache.clear();
+      this.canvas.remove();
+    }
+    // ---- geometry ---------------------------------------------------
+    layoutNode(n2) {
+      const ctx = this.ctx;
+      ctx.font = "600 12px Segoe UI, Tahoma, sans-serif";
+      const titleW = ctx.measureText(n2.name).width;
+      const rows = Math.max(n2.inPorts.length, n2.outPorts.length, 1);
+      n2.w = Math.max(170, Math.ceil(titleW) + 28);
+      n2.h = Math.max(48, rows * PORT_ROW_H + 16);
+      const off = PORT_SQ / 2;
+      const place = (ports, x) => {
+        const startY = n2.y + (n2.h - ports.length * PORT_ROW_H) / 2 + PORT_ROW_H / 2;
+        ports.forEach((p, i) => {
+          p.cx = x;
+          p.cy = startY + i * PORT_ROW_H;
+        });
+      };
+      place(n2.inPorts, n2.x - off);
+      place(n2.outPorts, n2.x + n2.w + off);
+    }
+    relayout() {
+      for (const n2 of this.nodes) this.layoutNode(n2);
+    }
+    toScreen(wx, wy) {
+      return [wx * this.scale + this.offX, wy * this.scale + this.offY];
+    }
+    toWorld(sx, sy) {
+      return [(sx - this.offX) / this.scale, (sy - this.offY) / this.scale];
+    }
+    portColor(type) {
+      const maxL = this.opts.linkMaxLightness;
+      const light = maxL !== void 0 && maxL < 0.5;
+      if (type === "") return light ? "#585c62" : "#9aa0a6";
+      const map = this.opts.typeColors ?? {};
+      const normalized = normalizePortType(type);
+      const base = getJsonKey(map, normalized) ?? `hsl(${hashHue(normalized)}, 62%, 58%)`;
+      return maxL !== void 0 ? clampLightness(base, maxL) : base;
+    }
+    // Selection/hover accent. The dark-canvas blue washes out on a light canvas, so a light theme
+    // (linkMaxLightness < 0.5) inverts to a darker, more saturated blue that stays clearly visible.
+    selectionColor() {
+      const maxL = this.opts.linkMaxLightness;
+      return maxL !== void 0 && maxL < 0.5 ? "#0d6efd" : "#4aa3ff";
+    }
+    linkHoverColor() {
+      const maxL = this.opts.linkMaxLightness;
+      return maxL !== void 0 && maxL < 0.5 ? "#6aa9f0" : "#cfe3ff";
+    }
+    // ---- hit testing (world coords) ---------------------------------
+    portAt(wx, wy) {
+      for (let i = this.nodes.length - 1; i >= 0; i -= 1) {
+        const n2 = this.nodes[i];
+        for (const p of [...n2.inPorts, ...n2.outPorts]) {
+          if ((wx - p.cx) ** 2 + (wy - p.cy) ** 2 <= (PORT_R + 4) ** 2) return { node: n2, port: p };
+        }
+        if (wx >= n2.x && wx <= n2.x + n2.w && wy >= n2.y && wy <= n2.y + n2.h) return null;
+      }
+      return null;
+    }
+    selectedLinkEndpointAt(wx, wy) {
+      if (this.selectedLink === null) return null;
+      const radius = (PORT_R + 7) / this.scale;
+      for (const end of ["from", "to"]) {
+        const point = this.endpoint(this.selectedLink, end);
+        if (point !== null && (wx - point[0]) ** 2 + (wy - point[1]) ** 2 <= radius ** 2) return end;
+      }
+      return null;
+    }
+    directRelinkAtPort(node, port) {
+      if (port.direction !== "in") return null;
+      const incoming = this.links.filter((link) => link.to === node.id && link.toPort === port.id);
+      return incoming.length === 1 ? { link: incoming[0], end: "to" } : null;
+    }
+    nodeAt(wx, wy) {
+      for (let i = this.nodes.length - 1; i >= 0; i -= 1) {
+        const n2 = this.nodes[i];
+        if (wx >= n2.x && wx <= n2.x + n2.w && wy >= n2.y && wy <= n2.y + n2.h) return n2;
+      }
+      return null;
+    }
+    // Other nodes (not the link's own endpoints) become obstacles,
+    // inflated so links keep a little clearance — the AvoidsNodes margin.
+    obstaclesFor(exclude) {
+      const inf = 12;
+      const out = [];
+      for (const n2 of this.nodes) {
+        if (exclude.has(n2.id)) continue;
+        out.push([n2.x - inf, n2.y - inf, n2.w + inf * 2, n2.h + inf * 2]);
+      }
+      return out;
+    }
+    routeLink(a, b, exclude) {
+      return routeAvoid(a, b, this.obstaclesFor(exclude));
+    }
+    linkAt(wx, wy) {
+      const tol = 5 / this.scale;
+      for (let i = this.links.length - 1; i >= 0; i -= 1) {
+        const l = this.links[i];
+        const a = this.endpoint(l, "from");
+        const b = this.endpoint(l, "to");
+        if (a === null || b === null) continue;
+        const pts = this.routeLink(a, b, /* @__PURE__ */ new Set([l.from, l.to]));
+        for (let k = 1; k < pts.length; k += 1) {
+          if (ptSegDist(wx, wy, pts[k - 1][0], pts[k - 1][1], pts[k][0], pts[k][1]) <= tol) return l;
+        }
+      }
+      return null;
+    }
+    endpoint(l, end) {
+      const node = this.nodes.find((n2) => n2.id === (end === "from" ? l.from : l.to));
+      if (node === void 0) return null;
+      const port = end === "from" ? node.outPorts.find((p) => p.id === l.fromPort) : node.inPorts.find((p) => p.id === l.toPort);
+      if (port === void 0) return null;
+      return [port.cx, port.cy];
+    }
+    // ---- linking rules ----------------------------------------------
+    validateLink(init, excludeLinkId) {
+      const fromNode = this.nodes.find((node) => node.id === init.from);
+      const toNode = this.nodes.find((node) => node.id === init.to);
+      if (fromNode === void 0 || toNode === void 0) return { allowed: false, reason: "missing-node" };
+      const fromPort = fromNode.outPorts.find((port) => port.id === init.fromPort);
+      const toPort = toNode.inPorts.find((port) => port.id === init.toPort);
+      if (fromPort === void 0 || toPort === void 0) return { allowed: false, reason: "missing-port" };
+      return this.validateLinkModels(fromNode, fromPort, toNode, toPort, excludeLinkId);
+    }
+    validateLinkModels(fromNode, fromPort, toNode, toPort, excludeLinkId) {
+      if (fromNode === toNode) return { allowed: false, reason: "same-node" };
+      if (fromPort.direction !== "out" || toPort.direction !== "in") {
+        return { allowed: false, reason: "invalid-direction" };
+      }
+      const relevantLinks = this.links.filter((link) => link.id !== excludeLinkId);
+      if (relevantLinks.some((link) => link.from === fromNode.id && link.fromPort === fromPort.id && link.to === toNode.id && link.toPort === toPort.id)) {
+        return { allowed: false, reason: "duplicate-link" };
+      }
+      if (fromPort.maxLinks > 0) {
+        const used = relevantLinks.filter((link) => link.from === fromNode.id && link.fromPort === fromPort.id).length;
+        if (used >= fromPort.maxLinks) return { allowed: false, reason: "source-limit" };
+      }
+      if (toPort.maxLinks > 0) {
+        const used = relevantLinks.filter((link) => link.to === toNode.id && link.toPort === toPort.id).length;
+        if (used >= toPort.maxLinks) return { allowed: false, reason: "target-limit" };
+      }
+      if (!arePortTypesCompatible(fromPort.type, toPort.type, toPort.availableTypes)) {
+        return { allowed: false, reason: "incompatible-type" };
+      }
+      if (this.validator !== null && !this.validator({ fromNode, fromPort, toNode, toPort })) {
+        return { allowed: false, reason: "host-rejected" };
+      }
+      return { allowed: true, reason: "allowed" };
+    }
+    removeIncompatibleLinks(matches) {
+      const incompatible = this.links.filter((link) => matches(link) && !this.canExistingLinkRemain(link));
+      for (const link of incompatible) this.removeLinkInternal(link, true);
+    }
+    canExistingLinkRemain(link) {
+      const fromNode = this.nodes.find((node) => node.id === link.from);
+      const toNode = this.nodes.find((node) => node.id === link.to);
+      const fromPort = fromNode?.outPorts.find((port) => port.id === link.fromPort);
+      const toPort = toNode?.inPorts.find((port) => port.id === link.toPort);
+      if (fromNode === void 0 || toNode === void 0 || fromPort === void 0 || toPort === void 0) {
+        return false;
+      }
+      if (!arePortTypesCompatible(fromPort.type, toPort.type, toPort.availableTypes)) return false;
+      return this.validator === null || this.validator({ fromNode, fromPort, toNode, toPort });
+    }
+    // Plug↔socket magnet: while dragging from an out-port, find the
+    // nearest in-port (within SNAP_PX, screen space) the link is allowed
+    // to land on. Returns null when none is close → the pending link
+    // detaches and follows the cursor again.
+    findSnap() {
+      if (this.linking === null && this.relinking === null) return null;
+      let direction;
+      let accepts;
+      if (this.linking !== null) {
+        const source = this.linking;
+        direction = "in";
+        accepts = (node, port) => this.validateLinkModels(source.node, source.port, node, port).allowed;
+      } else {
+        const gesture = this.relinking;
+        if (gesture.end === "to") {
+          const sourceNode = this.nodes.find((node) => node.id === gesture.link.from);
+          const sourcePort = sourceNode?.outPorts.find((port) => port.id === gesture.link.fromPort);
+          if (sourceNode === void 0 || sourcePort === void 0) return null;
+          direction = "in";
+          accepts = (node, port) => this.validateLinkModels(
+            sourceNode,
+            sourcePort,
+            node,
+            port,
+            gesture.link.id
+          ).allowed;
+        } else {
+          const targetNode = this.nodes.find((node) => node.id === gesture.link.to);
+          const targetPort = targetNode?.inPorts.find((port) => port.id === gesture.link.toPort);
+          if (targetNode === void 0 || targetPort === void 0) return null;
+          direction = "out";
+          accepts = (node, port) => this.validateLinkModels(
+            node,
+            port,
+            targetNode,
+            targetPort,
+            gesture.link.id
+          ).allowed;
+        }
+      }
+      let best = null;
+      let bestD = SNAP_PX;
+      for (const n2 of this.nodes) {
+        const ports = direction === "in" ? n2.inPorts : n2.outPorts;
+        for (const p of ports) {
+          if (!accepts(n2, p)) continue;
+          const [sx, sy] = this.toScreen(p.cx, p.cy);
+          const dpx = Math.hypot(sx - this.cursor.x, sy - this.cursor.y);
+          if (dpx <= bestD) {
+            bestD = dpx;
+            best = { node: n2, port: p };
+          }
+        }
+      }
+      return best;
+    }
+    selectNode(n2) {
+      this.selectedLink = null;
+      this.selectedPort = null;
+      this.selectedNodes.clear();
+      if (n2 !== null) this.selectedNodes.add(n2);
+      this.selectedNode = n2;
+      this.emit("nodeSelected", { node: n2, selected: n2 !== null });
+      this.emitSelectionChanged();
+      this.scheduleDraw();
+    }
+    toggleSelect(n2) {
+      this.selectedLink = null;
+      this.selectedPort = null;
+      if (this.selectedNodes.has(n2)) {
+        this.selectedNodes.delete(n2);
+        if (this.selectedNode === n2) this.selectedNode = null;
+      } else {
+        this.selectedNodes.add(n2);
+        this.selectedNode = n2;
+      }
+      this.emit("nodeSelected", { node: this.selectedNode, selected: this.selectedNodes.size > 0 });
+      this.emitSelectionChanged();
+      this.scheduleDraw();
+    }
+    setSelection(ns) {
+      this.selectedLink = null;
+      this.selectedPort = null;
+      this.selectedNodes = new Set(ns);
+      this.selectedNode = ns.length > 0 ? ns[ns.length - 1] : null;
+      this.emit("nodeSelected", { node: this.selectedNode, selected: ns.length > 0 });
+      this.emitSelectionChanged();
+      this.scheduleDraw();
+    }
+    selectLink(l) {
+      if (this.selectedLink === l) return;
+      this.selectedNode = null;
+      this.selectedNodes.clear();
+      this.selectedPort = null;
+      this.selectedLink = l;
+      this.emit("linkSelected", { link: l, selected: l !== null });
+      this.emitSelectionChanged();
+      this.scheduleDraw();
+    }
+    selectPort(target) {
+      this.selectedPort = target;
+      this.emit("portSelected", target);
+      this.emitSelectionChanged();
+      this.scheduleDraw();
+    }
+    emitSelectionChanged() {
+      this.emit("selectionChanged", this.getSelection());
+    }
+    // ---- clipboard (copy / paste of the selection) ------------------
+    copySelection() {
+      this.copySelectionDocument();
+    }
+    copySelectionDocument() {
+      if (!this.permissions.copy) return null;
+      if (this.selectedNodes.size === 0) {
+        this.clip = null;
+        return null;
+      }
+      const ids = new Set([...this.selectedNodes].map((n2) => n2.id));
+      const all = this.saveDocument();
+      this.clip = createDiagramDocument({
+        nodes: all.nodes.filter((n2) => ids.has(n2.id)),
+        links: all.links.filter((link) => ids.has(link.from.nodeId) && ids.has(link.to.nodeId))
+      });
+      return parseDiagramDocument(this.clip);
+    }
+    hasClipboard() {
+      return this.clip !== null && this.clip.nodes.length > 0;
+    }
+    getClipboardDocument() {
+      return this.clip === null ? null : parseDiagramDocument(this.clip);
+    }
+    setClipboardDocument(source) {
+      this.clip = parseDiagramDocument(source);
+    }
+    pasteSelection() {
+      if (this.clip === null) return [];
+      return this.pasteDocument(this.clip);
+    }
+    pasteDocument(source, offset) {
+      if (!this.permissions.paste) return [];
+      const clipboard = parseDiagramDocument(source);
+      if (clipboard.nodes.length === 0) return [];
+      const pasteOffset = offset ?? { x: this.gridSize, y: this.gridSize };
+      this.clip = clipboard;
+      const map = /* @__PURE__ */ new Map();
+      const added = [];
+      this.withTransaction("paste", () => {
+        for (const sn of clipboard.nodes) {
+          const nid = this.nextNodeId();
+          map.set(sn.id, nid);
+          const id = this.addDiagramNode({
+            ...sn,
+            id: nid,
+            x: sn.x + pasteOffset.x,
+            y: sn.y + pasteOffset.y
+          });
+          const nn = this.nodes.find((x) => x.id === id);
+          if (nn !== void 0) added.push(nn);
+        }
+        for (const l of clipboard.links) {
+          const f = map.get(l.from.nodeId);
+          const t = map.get(l.to.nodeId);
+          if (f !== void 0 && t !== void 0)
+            this.addLink({
+              from: f,
+              fromPort: l.from.portId,
+              to: t,
+              toPort: l.to.portId,
+              // The clipboard is built from saveDocument(), so it carries the style;
+              // rebuilding without it silently turned every pasted dashed link solid.
+              style: l.style,
+              metadata: l.metadata
+            });
+        }
+      });
+      this.setSelection(added);
+      return added.map((node) => node.id);
+    }
+    // ---- input ------------------------------------------------------
+    // Ends hover and everything hanging off it: highlight, cursor and the delayed tooltip.
+    clearHover() {
+      if (this.hoverPort !== null) this.emit("portHover", { node: this.hoverPort.node, port: this.hoverPort.port, hovering: false });
+      if (this.hoverNode !== null) this.emit("nodeHover", { node: this.hoverNode, hovering: false });
+      if (this.hoveredLink !== null) this.emit("linkHover", { link: this.hoveredLink, hovering: false });
+      this.hoverPort = null;
+      this.hoverNode = null;
+      this.hoveredLink = null;
+      this.tipTarget = null;
+      this.tipShow = false;
+      if (this.tipTimer !== null) {
+        clearTimeout(this.tipTimer);
+        this.tipTimer = null;
+      }
+      this.canvas.style.cursor = "default";
+      this.scheduleDraw();
+    }
+    cancelLongPress() {
+      if (this.lpTimer !== null) {
+        clearTimeout(this.lpTimer);
+        this.lpTimer = null;
+      }
+      this.lpStart = null;
+    }
+    // Hit-test at screen coords and emit a contextMenu event. Cancels
+    // any partial drag/rubber/link gesture that may have started — once
+    // the menu opens we don't want a half-drag racing it.
+    fireContextMenu(sx, sy, pageX, pageY) {
+      const [wx, wy] = this.toWorld(sx, sy);
+      const port = this.portAt(wx, wy);
+      const node = port?.node ?? this.nodeAt(wx, wy);
+      const link = port === null && node === null ? this.linkAt(wx, wy) : null;
+      if (this.permissions.select) {
+        if (port !== null) {
+          const selectedLink = this.selectedLink;
+          const isSelectedEndpoint = selectedLink !== null && (selectedLink.from === port.node.id && selectedLink.fromPort === port.port.id || selectedLink.to === port.node.id && selectedLink.toPort === port.port.id);
+          if (!isSelectedEndpoint && !this.selectedNodes.has(port.node)) this.selectNode(port.node);
+          this.selectPort(port);
+        } else if (node !== null && !this.selectedNodes.has(node)) this.selectNode(node);
+        else if (link !== null && this.selectedLink !== link) this.selectLink(link);
+      }
+      this.dragNode = null;
+      this.dragStart = [];
+      this.rubber = null;
+      this.panning = false;
+      this.linking = null;
+      this.relinking = null;
+      this.relinkCandidate = null;
+      this.linkSnap = null;
+      this.clearHover();
+      this.emit("contextMenu", { x: pageX, y: pageY, link, node, port });
+    }
+    listen(target, type, listener, options) {
+      target.addEventListener(type, listener, options);
+      this.domDisposables.push(() => target.removeEventListener(type, listener, options));
+    }
+    bind() {
+      const localXY = (e) => {
+        const r = this.canvas.getBoundingClientRect();
+        return [e.clientX - r.left, e.clientY - r.top];
+      };
+      this.listen(this.canvas, "pointerdown", (e) => {
+        try {
+          this.canvas.setPointerCapture(e.pointerId);
+        } catch {
+        }
+        this.cancelLongPress();
+        this.relinkCandidate = null;
+        if (e.pointerType !== "mouse") {
+          this.lpStart = { sx: e.clientX, sy: e.clientY, px: e.clientX, py: e.clientY };
+          const downSx = e.clientX, downSy = e.clientY;
+          const r0 = this.canvas.getBoundingClientRect();
+          const localSx = downSx - r0.left, localSy = downSy - r0.top;
+          this.lpTimer = setTimeout(() => {
+            this.lpTimer = null;
+            this.fireContextMenu(localSx, localSy, downSx, downSy);
+          }, this.lpDelayMs);
+        }
+        this.canvas.focus();
+        const [sx, sy] = localXY(e);
+        if (this.ovHit(sx, sy)) {
+          this.ovDragging = true;
+          this.ovPanTo(sx, sy);
+          return;
+        }
+        if (!this.permissions.inspect) this.cancelLongPress();
+        const [wx, wy] = this.toWorld(sx, sy);
+        const selectedEndpoint = this.selectedLinkEndpointAt(wx, wy);
+        if (e.button === 0 && this.permissions.createLinks && this.selectedLink !== null && selectedEndpoint !== null) {
+          this.relinking = { link: this.selectedLink, end: selectedEndpoint };
+          this.linking = null;
+          this.linkSnap = null;
+          this.cursor = { x: sx, y: sy };
+          return;
+        }
+        const portHit = this.portAt(wx, wy);
+        if (portHit !== null) {
+          const selectedLink = this.selectedLink;
+          const isFrom = selectedLink !== null && portHit.port.direction === "out" && selectedLink.from === portHit.node.id && selectedLink.fromPort === portHit.port.id;
+          const isTo = selectedLink !== null && portHit.port.direction === "in" && selectedLink.to === portHit.node.id && selectedLink.toPort === portHit.port.id;
+          if (this.permissions.inspect) {
+            if (this.permissions.select && !isFrom && !isTo && !this.selectedNodes.has(portHit.node)) {
+              this.selectNode(portHit.node);
+            }
+            this.selectPort(portHit);
+            if (e.button === 0 || e.button === 2) {
+              this.emit("portClicked", {
+                ...portHit,
+                action: e.button === 2 ? "rightClick" : "leftClick",
+                ctrlKey: e.ctrlKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey,
+                metaKey: e.metaKey
+              });
+            }
+          }
+          if (e.button !== 0) return;
+          if (this.permissions.createLinks && selectedLink !== null) {
+            if (isFrom || isTo) {
+              this.relinking = { link: selectedLink, end: isFrom ? "from" : "to" };
+              this.linking = null;
+              this.linkSnap = null;
+              this.cursor = { x: sx, y: sy };
+              return;
+            }
+          }
+          const directRelink = this.permissions.createLinks ? this.directRelinkAtPort(portHit.node, portHit.port) : null;
+          if (directRelink !== null) {
+            this.relinkCandidate = { ...directRelink, sx, sy };
+            this.linking = null;
+            this.relinking = null;
+            this.linkSnap = null;
+            this.cursor = { x: sx, y: sy };
+            return;
+          }
+          if (this.permissions.createLinks && portHit.port.direction === "out") {
+            this.linking = portHit;
+            this.relinking = null;
+            this.linkSnap = null;
+            this.cursor = { x: sx, y: sy };
+          }
+          return;
+        }
+        const node = this.nodeAt(wx, wy);
+        if (node !== null) {
+          const add = e.shiftKey || e.ctrlKey || e.metaKey;
+          if (this.permissions.select) {
+            if (add && e.button === 0) {
+              this.toggleSelect(node);
+              return;
+            }
+            if (!this.selectedNodes.has(node)) this.selectNode(node);
+          }
+          if (this.permissions.moveNodes && e.button === 0) {
+            this.dragNode = node;
+            this.dragAnchor = { wx, wy };
+            const moving = this.selectedNodes.has(node) ? [...this.selectedNodes] : [node];
+            this.dragStart = moving.map((item) => ({ n: item, x: item.x, y: item.y }));
+            const selected = new Set(moving);
+            this.nodes = this.nodes.filter((item) => !selected.has(item)).concat(moving);
+          }
+          return;
+        }
+        const link = this.linkAt(wx, wy);
+        if (link !== null) {
+          if (this.permissions.select) this.selectLink(link);
+          return;
+        }
+        if (e.button !== 0 && e.button !== 1) return;
+        const wantPan = !this.permissions.select || e.button === 1 || e.ctrlKey || e.altKey || e.pointerType === "touch";
+        if (wantPan) {
+          if (this.permissions.select && !e.shiftKey) this.selectNode(null);
+          this.panning = true;
+          this.panX = sx;
+          this.panY = sy;
+        } else {
+          if (!e.shiftKey) this.selectNode(null);
+          this.rubber = { x0: wx, y0: wy, x: wx, y: wy };
+        }
+      });
+      this.listen(this.canvas, "pointermove", (e) => {
+        const [sx, sy] = localXY(e);
+        this.cursor = { x: sx, y: sy };
+        if (this.lpStart !== null) {
+          const dx = e.clientX - this.lpStart.px;
+          const dy = e.clientY - this.lpStart.py;
+          if (Math.hypot(dx, dy) > this.lpMoveTol) this.cancelLongPress();
+        }
+        if (this.ovDragging) {
+          this.ovPanTo(sx, sy);
+          return;
+        }
+        const [wx, wy] = this.toWorld(sx, sy);
+        if (this.relinkCandidate !== null) {
+          const candidate = this.relinkCandidate;
+          if (Math.hypot(sx - candidate.sx, sy - candidate.sy) <= RELINK_DRAG_THRESHOLD_PX) return;
+          this.relinkCandidate = null;
+          this.relinking = { link: candidate.link, end: candidate.end };
+          if (this.permissions.select) this.selectLink(candidate.link);
+          this.linkSnap = this.findSnap();
+          this.scheduleDraw();
+          return;
+        }
+        if (this.dragNode !== null) {
+          let ddx = wx - this.dragAnchor.wx;
+          let ddy = wy - this.dragAnchor.wy;
+          if (this.gridSnapEnabled) {
+            const primary = this.dragStart.find((item) => item.n === this.dragNode);
+            if (primary !== void 0) {
+              ddx = Math.round((primary.x + ddx) / this.gridSize) * this.gridSize - primary.x;
+              ddy = Math.round((primary.y + ddy) / this.gridSize) * this.gridSize - primary.y;
+            }
+          }
+          for (const it of this.dragStart) {
+            it.n.x = it.x + ddx;
+            it.n.y = it.y + ddy;
+            this.layoutNode(it.n);
+          }
+          this.scheduleDraw();
+          return;
+        }
+        if (this.rubber !== null) {
+          this.rubber.x = wx;
+          this.rubber.y = wy;
+          this.scheduleDraw();
+          return;
+        }
+        if (this.panning) {
+          this.offX += sx - this.panX;
+          this.offY += sy - this.panY;
+          this.panX = sx;
+          this.panY = sy;
+          this.scheduleDraw();
+          return;
+        }
+        if (this.linking !== null || this.relinking !== null) {
+          this.linkSnap = this.findSnap();
+          this.scheduleDraw();
+          return;
+        }
+        if (!this.permissions.inspect) return;
+        let dirty = false;
+        const hit = this.portAt(wx, wy);
+        if ((hit?.port ?? null) !== (this.hoverPort?.port ?? null)) {
+          if (this.hoverPort !== null)
+            this.emit("portHover", { node: this.hoverPort.node, port: this.hoverPort.port, hovering: false });
+          this.hoverPort = hit;
+          if (hit !== null) this.emit("portHover", { node: hit.node, port: hit.port, hovering: true });
+          dirty = true;
+        }
+        const nodeHit = hit === null ? this.nodeAt(wx, wy) : null;
+        if (nodeHit !== this.hoverNode) {
+          if (this.hoverNode !== null) this.emit("nodeHover", { node: this.hoverNode, hovering: false });
+          this.hoverNode = nodeHit;
+          if (nodeHit !== null) this.emit("nodeHover", { node: nodeHit, hovering: true });
+          dirty = true;
+        }
+        const tipTgt = this.hoverPort?.port ?? this.hoverNode;
+        if (tipTgt !== this.tipTarget) {
+          this.tipTarget = tipTgt;
+          this.tipShow = false;
+          if (this.tipTimer !== null) {
+            clearTimeout(this.tipTimer);
+            this.tipTimer = null;
+          }
+          if (tipTgt !== null) {
+            this.tipTimer = setTimeout(() => {
+              this.tipTimer = null;
+              this.tipShow = true;
+              this.scheduleDraw();
+            }, 400);
+          }
+          dirty = true;
+        }
+        const overNode = nodeHit !== null;
+        const linkHit = hit === null && !overNode ? this.linkAt(wx, wy) : null;
+        if (linkHit !== this.hoveredLink) {
+          if (this.hoveredLink !== null) this.emit("linkHover", { link: this.hoveredLink, hovering: false });
+          this.hoveredLink = linkHit;
+          if (linkHit !== null) this.emit("linkHover", { link: linkHit, hovering: true });
+          dirty = true;
+        }
+        const endpointHit = this.permissions.createLinks ? this.selectedLinkEndpointAt(wx, wy) : null;
+        const directRelinkHit = this.permissions.createLinks && hit !== null ? this.directRelinkAtPort(hit.node, hit.port) : null;
+        this.canvas.style.cursor = endpointHit !== null || directRelinkHit !== null ? "grab" : hit !== null ? "pointer" : overNode ? "move" : linkHit !== null ? "pointer" : "default";
+        if (dirty) this.scheduleDraw();
+      });
+      const finish = (e) => {
+        this.cancelLongPress();
+        this.relinkCandidate = null;
+        if (this.dragNode !== null) {
+          const moves = this.dragStart.map((it) => ({ id: it.n.id, fromX: it.x, fromY: it.y, toX: it.n.x, toY: it.n.y })).filter((m) => m.fromX !== m.toX || m.fromY !== m.toY);
+          const moved = new Set(moves.map((m) => m.id));
+          for (const it of this.dragStart) {
+            if (moved.has(it.n.id)) this.emit("nodeMoved", { node: it.n });
+          }
+          this.dragNode = null;
+          this.dragStart = [];
+          if (moves.length > 0) {
+            this.record({
+              do: () => {
+                for (const m of moves) this.doMoveNode(m.id, m.toX, m.toY);
+              },
+              undo: () => {
+                for (const m of moves) this.doMoveNode(m.id, m.fromX, m.fromY);
+              },
+              label: "drag"
+            });
+          }
+        }
+        if (this.rubber !== null) {
+          const rx0 = Math.min(this.rubber.x0, this.rubber.x);
+          const ry0 = Math.min(this.rubber.y0, this.rubber.y);
+          const rx1 = Math.max(this.rubber.x0, this.rubber.x);
+          const ry1 = Math.max(this.rubber.y0, this.rubber.y);
+          this.rubber = null;
+          if (rx1 - rx0 > 3 || ry1 - ry0 > 3) {
+            const inRect = this.nodes.filter((n2) => n2.x < rx1 && n2.x + n2.w > rx0 && n2.y < ry1 && n2.y + n2.h > ry0);
+            const merge = e.shiftKey ? [...this.selectedNodes, ...inRect] : inRect;
+            this.setSelection([...new Set(merge)]);
+          }
+          this.scheduleDraw();
+        }
+        const viewportMoved = this.panning || this.ovDragging;
+        this.panning = false;
+        this.ovDragging = false;
+        if (viewportMoved) this.emitViewChanged(false);
+        if (this.linking !== null) {
+          const [sx, sy] = localXY(e);
+          const [wx, wy] = this.toWorld(sx, sy);
+          const direct = this.portAt(wx, wy);
+          const target = this.linkSnap ?? (direct !== null && direct.port.direction === "in" ? direct : null);
+          if (target !== null) {
+            this.addLink({
+              from: this.linking.node.id,
+              fromPort: this.linking.port.id,
+              to: target.node.id,
+              toPort: target.port.id
+            });
+          }
+          this.linking = null;
+          this.linkSnap = null;
+          this.scheduleDraw();
+        }
+        if (this.relinking !== null) {
+          const gesture = this.relinking;
+          const [sx, sy] = localXY(e);
+          const [wx, wy] = this.toWorld(sx, sy);
+          const direct = this.portAt(wx, wy);
+          const expectedDirection = gesture.end === "from" ? "out" : "in";
+          const target = this.linkSnap ?? (direct !== null && direct.port.direction === expectedDirection ? direct : null);
+          if (target !== null) {
+            this.relink(gesture.link.id, {
+              from: gesture.end === "from" ? target.node.id : gesture.link.from,
+              fromPort: gesture.end === "from" ? target.port.id : gesture.link.fromPort,
+              to: gesture.end === "to" ? target.node.id : gesture.link.to,
+              toPort: gesture.end === "to" ? target.port.id : gesture.link.toPort
+            });
+          }
+          this.relinking = null;
+          this.linkSnap = null;
+          this.scheduleDraw();
+        }
+      };
+      this.listen(window, "pointerup", finish);
+      this.listen(window, "pointercancel", finish);
+      this.listen(this.canvas, "wheel", (e) => {
+        e.preventDefault();
+        const [sx, sy] = localXY(e);
+        const [wx, wy] = this.toWorld(sx, sy);
+        const factor = Math.exp(-e.deltaY * 15e-4);
+        this.scale = clamp(this.scale * factor, ZOOM_MIN, ZOOM_MAX);
+        this.offX = sx - wx * this.scale;
+        this.offY = sy - wy * this.scale;
+        this.emitViewChanged(true);
+        this.scheduleDraw();
+      }, { passive: false });
+      this.listen(this.canvas, "pointerleave", () => this.clearHover());
+      this.listen(this.canvas, "dblclick", (e) => {
+        const [sx, sy] = localXY(e);
+        const [wx, wy] = this.toWorld(sx, sy);
+        if (this.portAt(wx, wy) !== null) return;
+        if (this.linkAt(wx, wy) !== null) return;
+        const node = this.nodeAt(wx, wy);
+        if (node !== null) {
+          if (this.permissions.inspect && node.openAction.length > 0) {
+            e.preventDefault();
+            this.emit("nodeOpen", { node });
+          }
+          return;
+        }
+        this.zoomToFit();
+      });
+      this.listen(this.canvas, "contextmenu", (e) => {
+        e.preventDefault();
+        if (!this.permissions.inspect) return;
+        const [sx, sy] = localXY(e);
+        this.cancelLongPress();
+        this.fireContextMenu(sx, sy, e.clientX, e.clientY);
+      });
+      let pinchDist = 0;
+      let pinchScale = 1;
+      let pinchPivotW = [0, 0];
+      let pinchPivotS = [0, 0];
+      let pinching = false;
+      this.listen(this.canvas, "touchstart", (e) => {
+        if (e.touches.length === 2) {
+          e.preventDefault();
+          const r = this.canvas.getBoundingClientRect();
+          const t0 = e.touches[0], t1 = e.touches[1];
+          const x0 = t0.clientX - r.left, y0 = t0.clientY - r.top;
+          const x1 = t1.clientX - r.left, y1 = t1.clientY - r.top;
+          pinchDist = Math.max(1, Math.hypot(x1 - x0, y1 - y0));
+          pinchScale = this.scale;
+          const mx = (x0 + x1) / 2, my = (y0 + y1) / 2;
+          pinchPivotS = [mx, my];
+          pinchPivotW = this.toWorld(mx, my);
+          pinching = true;
+          this.dragNode = null;
+          this.dragStart = [];
+          this.panning = false;
+          this.rubber = null;
+          this.linking = null;
+          this.relinking = null;
+          this.relinkCandidate = null;
+          this.ovDragging = false;
+          this.linkSnap = null;
+        }
+      }, { passive: false });
+      this.listen(this.canvas, "touchmove", (e) => {
+        if (pinching && e.touches.length === 2) {
+          e.preventDefault();
+          const r = this.canvas.getBoundingClientRect();
+          const t0 = e.touches[0], t1 = e.touches[1];
+          const x0 = t0.clientX - r.left, y0 = t0.clientY - r.top;
+          const x1 = t1.clientX - r.left, y1 = t1.clientY - r.top;
+          const d = Math.max(1, Math.hypot(x1 - x0, y1 - y0));
+          const ns = clamp(pinchScale * (d / pinchDist), ZOOM_MIN, ZOOM_MAX);
+          this.scale = ns;
+          this.offX = pinchPivotS[0] - pinchPivotW[0] * ns;
+          this.offY = pinchPivotS[1] - pinchPivotW[1] * ns;
+          this.emitViewChanged(true);
+          this.scheduleDraw();
+        }
+      }, { passive: false });
+      const endPinch = () => {
+        pinching = false;
+      };
+      this.listen(this.canvas, "touchend", endPinch);
+      this.listen(this.canvas, "touchcancel", endPinch);
+      this.listen(this.canvas, "keydown", (e) => {
+        if (this.permissions.moveNodes && !e.ctrlKey && !e.metaKey && !e.altKey) {
+          const step = (this.gridSnapEnabled ? this.gridSize : 1) * (e.shiftKey ? 5 : 1);
+          const delta = e.key === "ArrowLeft" ? [-step, 0] : e.key === "ArrowRight" ? [step, 0] : e.key === "ArrowUp" ? [0, -step] : e.key === "ArrowDown" ? [0, step] : null;
+          if (delta !== null && this.nudgeSelection(delta[0], delta[1])) {
+            e.preventDefault();
+            return;
+          }
+        }
+        if (this.permissions.deleteSelection && (e.key === "Delete" || e.key === "Backspace")) {
+          e.preventDefault();
+          this.deleteSelection();
+          return;
+        }
+        const mod = e.ctrlKey || e.metaKey;
+        if (mod && this.permissions.copy && e.code === "KeyC") {
+          e.preventDefault();
+          this.copySelection();
+          return;
+        }
+        if (mod && this.permissions.paste && e.code === "KeyV") {
+          e.preventDefault();
+          this.pasteSelection();
+          return;
+        }
+        if (mod && this.permissions.copy && this.permissions.deleteSelection && e.code === "KeyX") {
+          e.preventDefault();
+          this.cutSelection();
+          return;
+        }
+        if (mod && this.permissions.select && e.code === "KeyA") {
+          e.preventDefault();
+          this.setSelection(this.nodes.slice());
+          return;
+        }
+        if (mod && this.permissions.history && e.code === "KeyZ" && !e.shiftKey) {
+          e.preventDefault();
+          this.historyShortcut("undo");
+          return;
+        }
+        if (mod && this.permissions.history && (e.code === "KeyY" || e.code === "KeyZ" && e.shiftKey)) {
+          e.preventDefault();
+          this.historyShortcut("redo");
+          return;
+        }
+      });
+    }
+    // ---- drawing ----------------------------------------------------
+    scheduleDraw() {
+      if (this.destroyed || this.drawScheduled) return;
+      this.drawScheduled = true;
+      requestAnimationFrame(() => {
+        this.drawScheduled = false;
+        if (!this.destroyed) this.draw();
+      });
+    }
+    draw(options = SCREEN_RENDER_OPTIONS) {
+      const ctx = this.ctx;
+      ctx.clearRect(0, 0, this.width, this.height);
+      ctx.fillStyle = this.opts.background ?? "#1b1b1f";
+      ctx.fillRect(0, 0, this.width, this.height);
+      let introDy = 0;
+      let introAlpha = 1;
+      if (options.transient && this.introStart !== null) {
+        const e = Math.min(1, (performance.now() - this.introStart) / INTRO_MS);
+        const k = 1 - Math.pow(1 - e, 3);
+        introAlpha = k;
+        introDy = (1 - k) * INTRO_RISE;
+        if (e >= 1) this.introStart = null;
+      }
+      ctx.save();
+      ctx.globalAlpha = introAlpha;
+      if (options.grid) this.drawGrid();
+      ctx.setTransform(
+        this.dpr * this.scale,
+        0,
+        0,
+        this.dpr * this.scale,
+        this.dpr * this.offX,
+        this.dpr * (this.offY + introDy)
+      );
+      this.drawZones();
+      const prior = [];
+      const hoveredNode = this.hoverPort?.node ?? this.hoverNode;
+      for (const l of this.links) {
+        const a = this.endpoint(l, "from");
+        const b = this.endpoint(l, "to");
+        if (a === null || b === null) continue;
+        const fp = this.nodes.find((n2) => n2.id === l.from)?.outPorts.find((p) => p.id === l.fromPort);
+        const baseColor = (this.opts.typedLinkColors ?? false) && fp !== void 0 ? this.portColor(fp.type) : this.portColor("");
+        const state = options.selection && l === this.selectedLink ? "sel" : options.transient && (l === this.hoveredLink || hoveredNode !== null && (l.from === hoveredNode.id || l.to === hoveredNode.id)) ? "hov" : "norm";
+        const color = state === "sel" ? this.selectionColor() : state === "hov" ? this.linkHoverColor() : baseColor;
+        const width = state === "sel" ? 3 : state === "hov" ? 2.6 : 2;
+        const pts = this.routeLink(a, b, /* @__PURE__ */ new Set([l.from, l.to]));
+        this.strokeRoute(pts, color, width, prior, l.style);
+        this.drawArrow(pts, color);
+        for (let k = 1; k < pts.length; k += 1) {
+          const [x1, y1] = pts[k - 1];
+          const [x2, y2] = pts[k];
+          if (x1 === x2 && y1 !== y2) prior.push({ h: false, c: x1, a: Math.min(y1, y2), b: Math.max(y1, y2) });
+          else if (y1 === y2 && x1 !== x2) prior.push({ h: true, c: y1, a: Math.min(x1, x2), b: Math.max(x1, x2) });
+        }
+      }
+      if (options.transient && (this.linking !== null || this.relinking !== null)) this.drawPendingLink();
+      for (const n2 of this.nodes) this.drawNode(n2, options.selection && this.selectedNodes.has(n2), options);
+      if (options.selection && this.permissions.createLinks && this.relinking === null)
+        this.drawSelectedLinkEndpoints();
+      if (options.transient && this.rubber !== null) {
+        const rx = Math.min(this.rubber.x0, this.rubber.x);
+        const ry = Math.min(this.rubber.y0, this.rubber.y);
+        const rw = Math.abs(this.rubber.x - this.rubber.x0);
+        const rh = Math.abs(this.rubber.y - this.rubber.y0);
+        ctx.fillStyle = "rgba(74,163,255,0.12)";
+        ctx.fillRect(rx, ry, rw, rh);
+        ctx.strokeStyle = "#4aa3ff";
+        ctx.lineWidth = 1 / this.scale;
+        ctx.strokeRect(rx, ry, rw, rh);
+      }
+      ctx.restore();
+      if (options.overview) this.drawOverview();
+      if (options.runtime) this.drawGlobalError(options.transient);
+      if (options.transient) this.drawTooltip();
+      if (options.transient && (this.introStart !== null || this.globalErrorFlashStart !== null || this.nodes.some((n2) => n2.errorFlashStart !== null)))
+        this.scheduleDraw();
+    }
+    /**
+     * `transient` gates the flash exactly as it gates every other animation, which an export must
+     * not see: it would bake in whatever point of the pulse it caught, so the same export taken
+     * twice differed in opacity. The gate also keeps the export from consuming the animation --
+     * clearing globalErrorFlashStart from an export cut the flash short on screen.
+     */
+    drawGlobalError(transient) {
+      const error = this.runtimeState.globalError;
+      if (error === null) return;
+      const ctx = this.ctx;
+      let flashAlpha = 1;
+      if (transient && this.globalErrorFlashStart !== null) {
+        const elapsed = performance.now() - this.globalErrorFlashStart;
+        if (elapsed >= ERROR_FLASH_MS) {
+          this.globalErrorFlashStart = null;
+        } else {
+          flashAlpha = 0.7 + 0.3 * (0.5 + 0.5 * Math.sin(
+            elapsed / ERROR_FLASH_MS * Math.PI * 6 - Math.PI / 2
+          ));
+        }
+      }
+      const neutral = error.kind === "locked" || error.kind === "encrypted";
+      ctx.save();
+      ctx.globalAlpha = flashAlpha;
+      ctx.fillStyle = neutral ? "rgba(18,20,26,0.82)" : "rgba(55,16,22,0.78)";
+      ctx.fillRect(0, 0, this.width, this.height);
+      ctx.font = "600 15px Segoe UI, Tahoma, sans-serif";
+      const lines = this.wrapTooltip(error.message, Math.max(120, Math.min(520, this.width - 80)));
+      const lineHeight = 21;
+      const boxWidth = Math.min(
+        this.width - 32,
+        Math.max(180, ...lines.map((line) => ctx.measureText(line).width + 36))
+      );
+      const boxHeight = lines.length * lineHeight + 32;
+      const x = (this.width - boxWidth) / 2;
+      const y = (this.height - boxHeight) / 2;
+      roundRect(ctx, x, y, boxWidth, boxHeight, 8);
+      ctx.fillStyle = neutral ? "rgba(36,39,48,0.98)" : "rgba(75,22,31,0.98)";
+      ctx.fill();
+      ctx.strokeStyle = neutral ? "#858b98" : ERROR_RED;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      ctx.fillStyle = "#ffffff";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      lines.forEach((line, index) => {
+        ctx.fillText(line, this.width / 2, y + 16 + lineHeight * index + lineHeight / 2);
+      });
+      ctx.restore();
+    }
+    drawTooltip() {
+      if (!this.tipShow) return;
+      if (this.dragNode !== null || this.linking !== null || this.relinking !== null || this.panning || this.ovDragging) return;
+      let text = "";
+      let isError = false;
+      if (this.hoverPort !== null) {
+        const p = this.hoverPort.port;
+        text = p.type ? `${p.name}  \xB7  ${p.type}` : p.name;
+        const runtime = this.portRuntimeState(this.hoverPort.node, p);
+        if (runtime?.value !== null && runtime?.value !== void 0) text += `
+Value: ${runtime.value}`;
+        if (runtime?.error !== null && runtime?.error !== void 0) {
+          text += `
+${runtime.error}`;
+          isError = true;
+        }
+      } else if (this.hoverNode !== null) {
+        const n2 = this.hoverNode;
+        const errors = [n2.runtimeError, n2.loadError].filter((value) => value.length > 0);
+        if (errors.length > 0) {
+          text = errors.join("\n");
+          isError = true;
+        } else if (this.showNodeMessages && n2.message.length > 0) {
+          text = n2.message;
+        } else if (n2.description.length > 0) {
+          text = n2.description;
+        } else {
+          text = n2.typeId && n2.typeId !== n2.name ? `${n2.name}   [${n2.typeId}]` : n2.name;
+        }
+      } else {
+        return;
+      }
+      const ctx = this.ctx;
+      ctx.font = "11px Segoe UI, Tahoma, sans-serif";
+      const padX = 9;
+      const padY = 6;
+      const lineH = 15;
+      const lines = this.wrapTooltip(text, 340);
+      const h = lines.length * lineH + padY * 2;
+      const w = Math.max(...lines.map((line) => ctx.measureText(line).width)) + padX * 2;
+      let x = this.cursor.x + 14;
+      let y = this.cursor.y + 18;
+      if (x + w > this.width) x = this.width - w - 4;
+      if (y + h > this.height) y = this.cursor.y - h - 10;
+      roundRect(ctx, x, y, w, h, 4);
+      ctx.fillStyle = isError ? "rgba(55,16,22,0.97)" : "rgba(18,20,26,0.96)";
+      ctx.fill();
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = isError ? ERROR_RED : "#3a3a46";
+      ctx.stroke();
+      ctx.fillStyle = "#e8e8ee";
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      lines.forEach((line, index) => {
+        ctx.fillText(line, x + padX, y + padY + lineH * index + lineH / 2);
+      });
+    }
+    wrapTooltip(text, maxWidth) {
+      const lines = [];
+      for (const paragraph of text.split(/\r?\n/)) {
+        const words = paragraph.split(/\s+/).filter(Boolean);
+        if (words.length === 0) {
+          lines.push("");
+          continue;
+        }
+        let line = words[0];
+        for (let i = 1; i < words.length; i += 1) {
+          const next = `${line} ${words[i]}`;
+          if (this.ctx.measureText(next).width <= maxWidth) line = next;
+          else {
+            lines.push(line);
+            line = words[i];
+          }
+        }
+        lines.push(line);
+      }
+      return lines.length > 0 ? lines : [""];
+    }
+    drawZones() {
+      if (this.zones.length === 0) return;
+      const ctx = this.ctx;
+      for (const zone of this.zones) {
+        const tint = zone.color.length > 0 ? zone.color : this.opts.zoneColor ?? "#8a8f98";
+        ctx.save();
+        roundRect(ctx, zone.x, zone.y, zone.width, zone.height, 10);
+        ctx.globalAlpha = 0.12;
+        ctx.fillStyle = tint;
+        ctx.fill();
+        ctx.globalAlpha = 0.5;
+        ctx.setLineDash([10, 6]);
+        ctx.lineWidth = 1.5;
+        ctx.strokeStyle = tint;
+        ctx.stroke();
+        ctx.restore();
+        if (zone.name.length === 0) continue;
+        ctx.save();
+        ctx.globalAlpha = 0.75;
+        ctx.fillStyle = tint;
+        ctx.font = "600 12px Segoe UI, Tahoma, sans-serif";
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        ctx.fillText(zone.name, zone.x + 12, zone.y + 9, Math.max(0, zone.width - 24));
+        ctx.restore();
+      }
+    }
+    drawGrid() {
+      const ctx = this.ctx;
+      const step = this.gridSize * this.scale;
+      if (step < 6) return;
+      ctx.strokeStyle = this.opts.gridColor ?? "#26262c";
+      ctx.lineWidth = 1;
+      const ox = this.offX % step;
+      const oy = this.offY % step;
+      ctx.beginPath();
+      for (let x = ox; x < this.width; x += step) {
+        ctx.moveTo(x + 0.5, 0);
+        ctx.lineTo(x + 0.5, this.height);
+      }
+      for (let y = oy; y < this.height; y += step) {
+        ctx.moveTo(0, y + 0.5);
+        ctx.lineTo(this.width, y + 0.5);
+      }
+      ctx.stroke();
+    }
+    // Lazily load + cache a node-icon image by URL; repaints once it decodes.
+    getIcon(url) {
+      const cached = this.iconCache.get(url);
+      if (cached !== void 0) return cached;
+      this.iconCache.set(url, null);
+      const img = new Image();
+      img.onload = () => {
+        this.iconCache.set(url, img);
+        this.scheduleDraw();
+      };
+      img.onerror = () => {
+        this.iconCache.set(url, null);
+      };
+      img.src = url;
+      return null;
+    }
+    drawNode(n2, selected, options) {
+      const ctx = this.ctx;
+      const hasLoadError = options.runtime && n2.loadError.length > 0;
+      const hasRuntimeError = options.runtime && n2.runtimeError.length > 0;
+      const runtime = options.runtime ? getJsonKey(this.runtimeState.nodes, n2.id) : void 0;
+      const active = options.runtime && (this.runtimeState.activeNodeId === n2.id || runtime?.active === true);
+      roundRect(ctx, n2.x, n2.y, n2.w, n2.h, 6);
+      ctx.fillStyle = hasLoadError ? ERROR_BACKGROUND : active ? "#ffd1dc" : n2.color;
+      ctx.fill();
+      ctx.lineWidth = selected ? 2 : 1.5;
+      ctx.strokeStyle = selected ? this.selectionColor() : n2.border;
+      ctx.stroke();
+      if (hasLoadError || hasRuntimeError) {
+        let alpha = 1;
+        if (options.transient && hasRuntimeError && n2.errorFlashStart !== null) {
+          const elapsed = performance.now() - n2.errorFlashStart;
+          if (elapsed >= ERROR_FLASH_MS) {
+            n2.errorFlashStart = null;
+          } else {
+            alpha = 0.12 + 0.88 * (0.5 + 0.5 * Math.sin(
+              elapsed / ERROR_FLASH_MS * Math.PI * 6 - Math.PI / 2
+            ));
+          }
+        }
+        ctx.save();
+        ctx.globalAlpha *= alpha;
+        roundRect(ctx, n2.x, n2.y, n2.w, n2.h, 6);
+        ctx.lineWidth = hasRuntimeError ? 3 : 2;
+        ctx.strokeStyle = ERROR_RED;
+        ctx.stroke();
+        ctx.restore();
+      }
+      const iconW = 18;
+      if (n2.icon) {
+        const img = this.getIcon(n2.icon);
+        if (img) {
+          try {
+            ctx.drawImage(img, n2.x + 8, n2.y + (n2.h - iconW) / 2, iconW, iconW);
+          } catch {
+          }
+        }
+      }
+      const titleShift = n2.icon ? iconW + 4 : 0;
+      ctx.fillStyle = hasLoadError ? "#ffffff" : "#1b1b1b";
+      ctx.font = "600 12px Segoe UI, Tahoma, sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(n2.name, n2.x + titleShift + (n2.w - titleShift) / 2, n2.y + n2.h / 2, n2.w - titleShift - 14);
+      for (const p of n2.inPorts) this.drawPort(n2, p, options);
+      for (const p of n2.outPorts) this.drawPort(n2, p, options);
+    }
+    drawPort(node, p, options) {
+      const ctx = this.ctx;
+      const hovered = options.transient && this.hoverPort?.port === p;
+      const magnet = options.transient && this.linkSnap?.port === p;
+      const runtime = options.runtime ? this.portRuntimeState(node, p) : null;
+      const s = magnet ? PORT_SQ + 4 : hovered ? PORT_SQ + 2 : PORT_SQ;
+      const x = p.cx - s / 2;
+      const y = p.cy - s / 2;
+      const r = Math.min(2.5, s / 4);
+      if (magnet) {
+        roundRect(ctx, x - 4, y - 4, s + 8, s + 8, r + 2);
+        ctx.fillStyle = "rgba(255,255,255,0.16)";
+        ctx.fill();
+      }
+      roundRect(ctx, x, y, s, s, r);
+      ctx.fillStyle = this.portColor(p.type);
+      ctx.fill();
+      ctx.lineWidth = magnet ? 1.5 : 1;
+      ctx.strokeStyle = magnet ? "#ffffff" : "rgba(12,12,16,0.55)";
+      ctx.stroke();
+      const runtimeSelected = runtime?.selected === true || options.selection && this.selectedPort?.port === p;
+      const breakpoint = runtime?.breakpoint === true;
+      const breakpointActive = runtime?.breakpointActive === true;
+      const runtimeActive = runtime?.active === true;
+      const hasError = runtime?.error !== null && runtime?.error !== void 0;
+      if (runtimeSelected || breakpoint || breakpointActive || runtimeActive || hasError) {
+        ctx.beginPath();
+        ctx.arc(p.cx, p.cy, s / 2 + 4, 0, Math.PI * 2);
+        if (breakpointActive) {
+          ctx.fillStyle = "#8b0000";
+          ctx.fill();
+        } else if (runtimeSelected) {
+          ctx.fillStyle = "rgba(211,211,211,0.56)";
+          ctx.fill();
+        }
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = hasError || breakpointActive ? ERROR_RED : breakpoint ? "#ffb6c1" : runtimeActive ? "#ffffff" : "#d3d3d3";
+        ctx.stroke();
+      }
+    }
+    portRuntimeState(node, port) {
+      return getJsonKey(this.runtimeState.nodes, node.id)?.ports[port.direction][port.id] ?? null;
+    }
+    // Symmetric jump-over: any segment of THIS link hops the perpendicular
+    // segments of links drawn before it (H over earlier V, V over earlier
+    // H). Exactly one bridge per real crossing, consistent everywhere.
+    strokeRoute(pts, color, width, prior, style = "solid") {
+      const ctx = this.ctx;
+      ctx.strokeStyle = color;
+      ctx.lineWidth = width;
+      if (style === "dashed") ctx.setLineDash([9, 6]);
+      ctx.lineJoin = "miter";
+      ctx.lineCap = "butt";
+      ctx.beginPath();
+      ctx.moveTo(pts[0][0], pts[0][1]);
+      const H = LINK_HOP;
+      const finish = (i, x1, y1, x2, y2) => {
+        if (i < pts.length - 1) {
+          const nx = pts[i + 1][0];
+          const ny = pts[i + 1][1];
+          const seg1 = Math.abs(x2 - x1) + Math.abs(y2 - y1);
+          const seg2 = Math.abs(nx - x2) + Math.abs(ny - y2);
+          ctx.arcTo(x2, y2, nx, ny, Math.min(LINK_CORNER, seg1 / 2, seg2 / 2));
+        } else {
+          ctx.lineTo(x2, y2);
+        }
+      };
+      for (let i = 1; i < pts.length; i += 1) {
+        const [x1, y1] = pts[i - 1];
+        const [x2, y2] = pts[i];
+        if (y1 === y2 && x1 !== x2) {
+          const dir = x2 > x1 ? 1 : -1;
+          const cuts = prior.filter((s) => !s.h && s.a < y1 - 0.5 && y1 + 0.5 < s.b && Math.min(x1, x2) + H < s.c && s.c < Math.max(x1, x2) - H).map((s) => s.c).sort((p, q) => dir * (p - q));
+          for (const cx of cuts) {
+            ctx.lineTo(cx - dir * H, y1);
+            if (dir > 0) ctx.arc(cx, y1, H, Math.PI, 2 * Math.PI, false);
+            else ctx.arc(cx, y1, H, 0, Math.PI, true);
+          }
+          finish(i, x1, y1, x2, y2);
+        } else if (x1 === x2 && y1 !== y2) {
+          const dir = y2 > y1 ? 1 : -1;
+          const cuts = prior.filter((s) => s.h && s.a < x1 - 0.5 && x1 + 0.5 < s.b && Math.min(y1, y2) + H < s.c && s.c < Math.max(y1, y2) - H).map((s) => s.c).sort((p, q) => dir * (p - q));
+          for (const cy of cuts) {
+            ctx.lineTo(x1, cy - dir * H);
+            if (dir > 0) ctx.arc(x1, cy, H, -Math.PI / 2, Math.PI / 2, false);
+            else ctx.arc(x1, cy, H, Math.PI / 2, -Math.PI / 2, true);
+          }
+          finish(i, x1, y1, x2, y2);
+        } else {
+          ctx.lineTo(x2, y2);
+        }
+      }
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+    drawArrow(pts, color) {
+      const n2 = pts.length;
+      const [px, py] = pts[n2 - 2];
+      const [ex, ey] = pts[n2 - 1];
+      const ang = Math.atan2(ey - py, ex - px);
+      const ctx = this.ctx;
+      ctx.save();
+      ctx.translate(ex, ey);
+      ctx.rotate(ang);
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(-9, -4.5);
+      ctx.lineTo(-9, 4.5);
+      ctx.closePath();
+      ctx.fill();
+      ctx.restore();
+    }
+    drawSelectedLinkEndpoints() {
+      if (this.selectedLink === null) return;
+      const ctx = this.ctx;
+      const halfSize = RELINK_HANDLE_PX / 2 / this.scale;
+      for (const end of ["from", "to"]) {
+        const point = this.endpoint(this.selectedLink, end);
+        if (point === null) continue;
+        ctx.beginPath();
+        ctx.moveTo(point[0], point[1] - halfSize);
+        ctx.lineTo(point[0] + halfSize, point[1]);
+        ctx.lineTo(point[0], point[1] + halfSize);
+        ctx.lineTo(point[0] - halfSize, point[1]);
+        ctx.closePath();
+        ctx.fillStyle = "#00ffff";
+        ctx.fill();
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 1 / this.scale;
+        ctx.stroke();
+      }
+    }
+    drawPendingLink() {
+      if (this.linking === null && this.relinking === null) return;
+      const ctx = this.ctx;
+      const snapped = this.linkSnap;
+      const cursor = this.toWorld(this.cursor.x, this.cursor.y);
+      let a;
+      let b;
+      let colorType = "";
+      let snapPoint = null;
+      const excludedNodes = /* @__PURE__ */ new Set();
+      if (this.linking !== null) {
+        a = [this.linking.port.cx, this.linking.port.cy];
+        b = snapped === null ? cursor : [snapped.port.cx, snapped.port.cy];
+        colorType = this.linking.port.type;
+        excludedNodes.add(this.linking.node.id);
+        if (snapped !== null) snapPoint = b;
+      } else {
+        const gesture = this.relinking;
+        const fixed = this.endpoint(gesture.link, gesture.end === "from" ? "to" : "from");
+        if (fixed === null) return;
+        const sourcePort = this.nodes.find((node) => node.id === gesture.link.from)?.outPorts.find((port) => port.id === gesture.link.fromPort);
+        if (gesture.end === "from") {
+          a = snapped === null ? cursor : [snapped.port.cx, snapped.port.cy];
+          b = fixed;
+          colorType = snapped?.port.type ?? sourcePort?.type ?? "";
+          excludedNodes.add(gesture.link.to);
+          if (snapped !== null) snapPoint = a;
+        } else {
+          a = fixed;
+          b = snapped === null ? cursor : [snapped.port.cx, snapped.port.cy];
+          colorType = sourcePort?.type ?? "";
+          excludedNodes.add(gesture.link.from);
+          if (snapped !== null) snapPoint = b;
+        }
+      }
+      if (snapped !== null) excludedNodes.add(snapped.node.id);
+      const points = this.routeLink(a, b, excludedNodes);
+      ctx.strokeStyle = this.portColor(colorType);
+      if (snapped !== null) {
+        ctx.setLineDash([]);
+        ctx.lineWidth = 2.6;
+      } else {
+        ctx.setLineDash([5, 4]);
+        ctx.lineWidth = 2;
+      }
+      ctx.beginPath();
+      ctx.moveTo(points[0][0], points[0][1]);
+      for (let index = 1; index < points.length; index += 1) ctx.lineTo(points[index][0], points[index][1]);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      if (snapPoint !== null) {
+        ctx.beginPath();
+        ctx.arc(snapPoint[0], snapPoint[1], PORT_R + 4, 0, Math.PI * 2);
+        ctx.strokeStyle = "#ffffff";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    }
+    // ---- overview minimap -------------------------------------------
+    overviewRect() {
+      if (!this.overviewVisible || this.width < 320 || this.height < 220) return null;
+      const w = 190, h = 130, m = 14;
+      return { x: this.width - w - m, y: this.height - h - m, w, h };
+    }
+    drawOverview() {
+      const r = this.overviewRect();
+      const gb = this.graphBounds();
+      if (r === null || gb === null) {
+        this.ovGeo = null;
+        return;
+      }
+      const ctx = this.ctx;
+      const pad = 8;
+      const gw = gb.maxX - gb.minX || 1;
+      const gh = gb.maxY - gb.minY || 1;
+      const s = Math.min((r.w - pad * 2) / gw, (r.h - pad * 2) / gh);
+      const ox = r.x + pad + (r.w - pad * 2 - gw * s) / 2;
+      const oy = r.y + pad + (r.h - pad * 2 - gh * s) / 2;
+      this.ovGeo = { x: ox, y: oy, w: r.w, h: r.h, s, minX: gb.minX, minY: gb.minY };
+      const mx = (wx) => ox + (wx - gb.minX) * s;
+      const my = (wy) => oy + (wy - gb.minY) * s;
+      const light = colorLuminance(this.opts.background) >= 150;
+      const overviewBackground = this.opts.overviewBackground ?? (light ? "rgba(255,255,255,0.94)" : "rgba(16,16,20,0.88)");
+      const overviewBorder = this.opts.overviewBorderColor ?? (light ? "#cbd5e1" : "#3a3a44");
+      const viewportColor = this.opts.overviewViewportColor ?? (light ? "#d97706" : "#4aa3ff");
+      const viewportFill = this.opts.overviewViewportFill ?? (light ? "rgba(217,119,6,0.10)" : "rgba(74,163,255,0.10)");
+      ctx.save();
+      roundRect(ctx, r.x, r.y, r.w, r.h, 6);
+      ctx.fillStyle = overviewBackground;
+      ctx.fill();
+      ctx.strokeStyle = overviewBorder;
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      ctx.clip();
+      for (const n2 of this.nodes) {
+        ctx.fillStyle = n2.color;
+        ctx.fillRect(mx(n2.x), my(n2.y), Math.max(2, n2.w * s), Math.max(2, n2.h * s));
+        ctx.strokeStyle = n2.border;
+        ctx.lineWidth = 1;
+        ctx.strokeRect(mx(n2.x), my(n2.y), Math.max(2, n2.w * s), Math.max(2, n2.h * s));
+      }
+      const [vx0, vy0] = this.toWorld(0, 0);
+      const [vx1, vy1] = this.toWorld(this.width, this.height);
+      ctx.strokeStyle = viewportColor;
+      ctx.lineWidth = 1.5;
+      ctx.strokeRect(mx(vx0), my(vy0), (vx1 - vx0) * s, (vy1 - vy0) * s);
+      ctx.fillStyle = viewportFill;
+      ctx.fillRect(mx(vx0), my(vy0), (vx1 - vx0) * s, (vy1 - vy0) * s);
+      ctx.restore();
+    }
+    ovHit(sx, sy) {
+      const r = this.overviewRect();
+      return r !== null && sx >= r.x && sx <= r.x + r.w && sy >= r.y && sy <= r.y + r.h;
+    }
+    ovPanTo(sx, sy) {
+      if (this.ovGeo === null) return;
+      const g = this.ovGeo;
+      const wx = g.minX + (sx - g.x) / g.s;
+      const wy = g.minY + (sy - g.y) / g.s;
+      this.offX = this.width / 2 - wx * this.scale;
+      this.offY = this.height / 2 - wy * this.scale;
+      this.scheduleDraw();
+    }
+    emitViewChanged(zoomChanged) {
+      if (zoomChanged) this.emit("zoomChanged", { scale: this.scale });
+      this.emit("viewChanged", this.getViewState());
+    }
+  };
+  function roundRect(ctx, x, y, w, h, r) {
+    const rr = Math.min(r, w / 2, h / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + rr, y);
+    ctx.arcTo(x + w, y, x + w, y + h, rr);
+    ctx.arcTo(x + w, y + h, x, y + h, rr);
+    ctx.arcTo(x, y + h, x, y, rr);
+    ctx.arcTo(x, y, x + w, y, rr);
+    ctx.closePath();
+  }
+  function route(a, b) {
+    const [ax, ay] = a;
+    const [bx, by] = b;
+    if (bx - ax >= LINK_STUB * 2) {
+      const mx = (ax + bx) / 2;
+      return [[ax, ay], [mx, ay], [mx, by], [bx, by]];
+    }
+    const midY = (ay + by) / 2;
+    return [
+      [ax, ay],
+      [ax + LINK_STUB, ay],
+      [ax + LINK_STUB, midY],
+      [bx - LINK_STUB, midY],
+      [bx - LINK_STUB, by],
+      [bx, by]
+    ];
+  }
+  var ROUTE_CELL = 14;
+  var A_STEP = 10;
+  var A_TURN = 40;
+  function segHitsRect(x1, y1, x2, y2, r) {
+    const rx2 = r[0] + r[2];
+    const ry2 = r[1] + r[3];
+    if (y1 === y2) {
+      if (y1 <= r[1] || y1 >= ry2) return false;
+      return Math.min(x1, x2) < rx2 && Math.max(x1, x2) > r[0];
+    }
+    if (x1 === x2) {
+      if (x1 <= r[0] || x1 >= rx2) return false;
+      return Math.min(y1, y2) < ry2 && Math.max(y1, y2) > r[1];
+    }
+    return false;
+  }
+  function polyHitsRects(pts, rects) {
+    for (let i = 1; i < pts.length; i += 1)
+      for (const r of rects)
+        if (segHitsRect(pts[i - 1][0], pts[i - 1][1], pts[i][0], pts[i][1], r)) return true;
+    return false;
+  }
+  function orthogonalize(ps) {
+    const o = [ps[0]];
+    for (let i = 1; i < ps.length; i += 1) {
+      const pr = o[o.length - 1];
+      const p = ps[i];
+      if (pr[0] !== p[0] && pr[1] !== p[1]) o.push([p[0], pr[1]]);
+      o.push(p);
+    }
+    return o;
+  }
+  function collapse(ps) {
+    const o = [];
+    for (const p of ps) {
+      if (o.length > 0) {
+        const last = o[o.length - 1];
+        if (last[0] === p[0] && last[1] === p[1]) continue;
+      }
+      if (o.length >= 2) {
+        const a = o[o.length - 2];
+        const b = o[o.length - 1];
+        if (a[0] === b[0] && b[0] === p[0] || a[1] === b[1] && b[1] === p[1]) {
+          o[o.length - 1] = p;
+          continue;
+        }
+      }
+      o.push(p);
+    }
+    return o;
+  }
+  function hitsAny(x1, y1, x2, y2, rects) {
+    for (const r of rects) if (segHitsRect(x1, y1, x2, y2, r)) return true;
+    return false;
+  }
+  function simplifyOrtho(pts, rects) {
+    let p = pts.slice();
+    let changed = true;
+    let guard = 0;
+    while (changed && guard < 40) {
+      changed = false;
+      guard += 1;
+      for (let i = 2; i + 3 < p.length; i += 1) {
+        const A = p[i - 1];
+        const D = p[i + 2];
+        for (const E of [[D[0], A[1]], [A[0], D[1]]]) {
+          if (E[0] === A[0] && E[1] === A[1] || E[0] === D[0] && E[1] === D[1]) continue;
+          if (hitsAny(A[0], A[1], E[0], E[1], rects)) continue;
+          if (hitsAny(E[0], E[1], D[0], D[1], rects)) continue;
+          p = p.slice(0, i).concat([E], p.slice(i + 2));
+          changed = true;
+          break;
+        }
+        if (changed) break;
+      }
+    }
+    return p;
+  }
+  function aStarGrid(start, goal, rects) {
+    let minX = Math.min(start[0], goal[0]);
+    let minY = Math.min(start[1], goal[1]);
+    let maxX = Math.max(start[0], goal[0]);
+    let maxY = Math.max(start[1], goal[1]);
+    for (const r of rects) {
+      minX = Math.min(minX, r[0]);
+      minY = Math.min(minY, r[1]);
+      maxX = Math.max(maxX, r[0] + r[2]);
+      maxY = Math.max(maxY, r[1] + r[3]);
+    }
+    const pad = LINK_STUB + ROUTE_CELL * 2;
+    minX -= pad;
+    minY -= pad;
+    maxX += pad;
+    maxY += pad;
+    let cell = ROUTE_CELL;
+    let cols = Math.ceil((maxX - minX) / cell);
+    let rows = Math.ceil((maxY - minY) / cell);
+    const CAP = 260;
+    if (cols > CAP || rows > CAP) {
+      cell = Math.max((maxX - minX) / CAP, (maxY - minY) / CAP);
+      cols = Math.ceil((maxX - minX) / cell);
+      rows = Math.ceil((maxY - minY) / cell);
+    }
+    const n2 = cols * rows;
+    if (n2 <= 0 || n2 > 8e4) return null;
+    const cx = (c) => minX + (c + 0.5) * cell;
+    const cy = (r) => minY + (r + 0.5) * cell;
+    const blocked = new Uint8Array(n2);
+    for (const r of rects) {
+      const c0 = Math.max(0, Math.floor((r[0] - minX) / cell));
+      const c1 = Math.min(cols - 1, Math.floor((r[0] + r[2] - minX) / cell));
+      const r0 = Math.max(0, Math.floor((r[1] - minY) / cell));
+      const r1 = Math.min(rows - 1, Math.floor((r[1] + r[3] - minY) / cell));
+      for (let rr = r0; rr <= r1; rr += 1)
+        for (let cc = c0; cc <= c1; cc += 1) blocked[rr * cols + cc] = 1;
+    }
+    const sc = clamp(Math.floor((start[0] - minX) / cell), 0, cols - 1);
+    const sr = clamp(Math.floor((start[1] - minY) / cell), 0, rows - 1);
+    const gc = clamp(Math.floor((goal[0] - minX) / cell), 0, cols - 1);
+    const gr = clamp(Math.floor((goal[1] - minY) / cell), 0, rows - 1);
+    const si = sr * cols + sc;
+    const gi = gr * cols + gc;
+    blocked[si] = 0;
+    blocked[gi] = 0;
+    const g = new Float64Array(n2).fill(Infinity);
+    const prev = new Int32Array(n2).fill(-1);
+    const dir = new Int8Array(n2).fill(-1);
+    g[si] = 0;
+    const heap = [si];
+    const f = new Float64Array(n2);
+    f[si] = (Math.abs(gc - sc) + Math.abs(gr - sr)) * A_STEP;
+    const swap = (i, j) => {
+      const t = heap[i];
+      heap[i] = heap[j];
+      heap[j] = t;
+    };
+    const push = (v) => {
+      heap.push(v);
+      let i = heap.length - 1;
+      while (i > 0) {
+        const p2 = i - 1 >> 1;
+        if (f[heap[p2]] <= f[heap[i]]) break;
+        swap(i, p2);
+        i = p2;
+      }
+    };
+    const pop = () => {
+      const top = heap[0];
+      const last = heap.pop();
+      if (heap.length > 0) {
+        heap[0] = last;
+        let i = 0;
+        for (; ; ) {
+          const l = 2 * i + 1;
+          const r = 2 * i + 2;
+          let s = i;
+          if (l < heap.length && f[heap[l]] < f[heap[s]]) s = l;
+          if (r < heap.length && f[heap[r]] < f[heap[s]]) s = r;
+          if (s === i) break;
+          swap(i, s);
+          i = s;
+        }
+      }
+      return top;
+    };
+    const seen = new Uint8Array(n2);
+    while (heap.length > 0) {
+      const cur = pop();
+      if (cur === gi) break;
+      if (seen[cur]) continue;
+      seen[cur] = 1;
+      const ccol = cur % cols;
+      const crow = (cur - ccol) / cols;
+      const steps = [
+        [1, 0, 0],
+        [-1, 0, 0],
+        [0, 1, 1],
+        [0, -1, 1]
+      ];
+      for (const [dc, dr, md] of steps) {
+        const nc = ccol + dc;
+        const nr = crow + dr;
+        if (nc < 0 || nc >= cols || nr < 0 || nr >= rows) continue;
+        const ni = nr * cols + nc;
+        if (blocked[ni]) continue;
+        const turn = dir[cur] !== -1 && dir[cur] !== md ? A_TURN : 0;
+        const ng = g[cur] + A_STEP + turn;
+        if (ng < g[ni]) {
+          g[ni] = ng;
+          prev[ni] = cur;
+          dir[ni] = md;
+          f[ni] = ng + (Math.abs(gc - nc) + Math.abs(gr - nr)) * A_STEP;
+          push(ni);
+        }
+      }
+    }
+    if (prev[gi] === -1 && gi !== si) return null;
+    const out = [];
+    let p = gi;
+    while (p !== -1) {
+      out.push([cx(p % cols), cy((p - p % cols) / cols)]);
+      p = prev[p];
+    }
+    out.reverse();
+    return out;
+  }
+  function routeAvoid(a, b, rects) {
+    const simple = route(a, b);
+    if (rects.length === 0 || !polyHitsRects(simple, rects)) return simple;
+    const A2 = [a[0] + LINK_STUB, a[1]];
+    const B2 = [b[0] - LINK_STUB, b[1]];
+    const grid = aStarGrid(A2, B2, rects);
+    if (grid === null) return simple;
+    const lo = Math.min(A2[0], B2[0]);
+    const hi = Math.max(A2[0], B2[0]);
+    const clipped = grid.map((p) => [clamp(p[0], lo, hi), p[1]]);
+    const poly = collapse(orthogonalize([a, A2, ...clipped, B2, b]));
+    return collapse(simplifyOrtho(poly, rects));
+  }
+  function ptSegDist(px, py, x1, y1, x2, y2) {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const len2 = dx * dx + dy * dy;
+    let t = len2 === 0 ? 0 : ((px - x1) * dx + (py - y1) * dy) / len2;
+    t = clamp(t, 0, 1);
+    const cx = x1 + t * dx;
+    const cy = y1 + t * dy;
+    return Math.hypot(px - cx, py - cy);
+  }
+
+  // src/headless.ts
+  function createContext() {
+    const own = {
+      globalAlpha: 1,
+      measureText: (text) => ({ width: text.length * 7 })
+    };
+    return new Proxy(own, {
+      get: (target, property) => property in target ? target[property] : () => void 0,
+      set: (target, property, value) => {
+        target[property] = value;
+        return true;
+      }
+    });
+  }
+  var StubElement = class {
+    constructor() {
+      this.style = {};
+      this.className = "";
+      this.tabIndex = 0;
+      this.width = 0;
+      this.height = 0;
+      this.textContent = "";
+      this.children = [];
+      this.classList = { toggle: () => false, add: () => void 0, remove: () => void 0 };
+      this.context = createContext();
+    }
+    appendChild(child) {
+      this.children.push(child);
+      return child;
+    }
+    removeChild(child) {
+      const at = this.children.indexOf(child);
+      if (at >= 0) this.children.splice(at, 1);
+      return child;
+    }
+    remove() {
+    }
+    setAttribute() {
+    }
+    focus() {
+    }
+    addEventListener() {
+    }
+    removeEventListener() {
+    }
+    getContext() {
+      return this.context;
+    }
+    getBoundingClientRect() {
+      return { left: 0, top: 0, right: this.width, bottom: this.height, width: this.width, height: this.height, x: 0, y: 0, toJSON: () => ({}) };
+    }
+    get clientWidth() {
+      return this.width;
+    }
+    get clientHeight() {
+      return this.height;
+    }
+  };
+  var GLOBAL_KEYS = ["window", "document", "requestAnimationFrame", "cancelAnimationFrame", "Image", "getComputedStyle", "performance"];
+  function installGlobals() {
+    const target = globalThis;
+    if (target.document !== void 0)
+      return () => void 0;
+    const before = /* @__PURE__ */ new Map();
+    for (const key of GLOBAL_KEYS) before.set(key, target[key]);
+    const stubDocument = Object.assign(new StubElement(), {
+      documentElement: new StubElement(),
+      createElement: () => new StubElement()
+    });
+    Object.assign(target, {
+      window: Object.assign(new StubElement(), { devicePixelRatio: 1 }),
+      document: stubDocument,
+      requestAnimationFrame: () => 1,
+      cancelAnimationFrame: () => void 0,
+      Image: class {
+      },
+      getComputedStyle: () => ({ getPropertyValue: () => "" }),
+      // A host without a browser may have no clock either -- an embedded JS engine has none. The drawing
+      // reads it for animation, and a still picture has no animation to advance.
+      performance: globalThis.performance ?? { now: () => 0 }
+    });
+    return () => {
+      for (const [key, value] of before) {
+        if (value === void 0) delete target[key];
+        else target[key] = value;
+      }
+    };
+  }
+  function renderDiagramSvg(source, options = {}) {
+    const { hostWidth = 1200, hostHeight = 800, ...screenshot } = options;
+    const restore = installGlobals();
+    try {
+      const host = new StubElement();
+      host.width = hostWidth;
+      host.height = hostHeight;
+      const diagram = new Diagram({ host });
+      try {
+        diagram.loadDocument(parseDiagramDocument(source));
+        return diagram.takeSvg({ scope: "content", ...screenshot });
+      } finally {
+        diagram.destroy();
+      }
+    } finally {
+      restore();
+    }
+  }
+  return __toCommonJS(headless_exports);
+})();
+//# sourceMappingURL=ssdiagram-headless.js.map