@stocksharp/diagram 0.4.0 → 0.5.0

package/dist/ssdiagram.js

@@ -556,8 +556,8 @@ var SSDiagram = (() => {
       this.redoCommands.length = 0;
       this.notify();
     }
-    transaction(label, action) {
-      const frame = { label, commands: [] };
+    transaction(label2, action) {
+      const frame = { label: label2, commands: [] };
       this.transactions.push(frame);
       try {
         const result = action();
@@ -788,6 +788,326 @@ var SSDiagram = (() => {
     return value;
   }
 
+  // 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 t2 = Math.min(tangent, la, lb);
+      const radius = t2 * Math.tan(angle / 2);
+      const t1 = [x1 + ua[0] * t2, y1 + ua[1] * t2];
+      const t22 = [x1 + ub[0] * t2, y1 + ub[1] * t2];
+      this.lineTo(t1[0], t1[1]);
+      const sweep = cross < 0 ? 1 : 0;
+      this.path.push(`A${n(radius)} ${n(radius)} 0 0 ${sweep} ${n(t22[0])} ${n(t22[1])}`);
+      this.cursor = [t22[0], t22[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) {
+      if (text === "") return;
+      const anchor = ANCHOR[this.state.textAlign] ?? "start";
+      const baseline = BASELINE[this.state.textBaseline] ?? "alphabetic";
+      this.emit(
+        `<text x="${n(x)}" y="${n(y)}" style="font:${escapeXml(this.state.font)}" text-anchor="${anchor}" dominant-baseline="${baseline}" ${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/canvas-renderer.ts
   var SCREEN_RENDER_OPTIONS = {
     grid: true,
@@ -1142,7 +1462,7 @@ var SSDiagram = (() => {
       this.scheduleDraw();
     }
     removeDiagramNode(id) {
-      const node = this.nodes.find((n) => n.id === 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 }));
@@ -1178,11 +1498,11 @@ var SSDiagram = (() => {
       }
     }
     doRemoveNode(id) {
-      const node = this.nodes.find((n) => n.id === 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((n) => n !== node);
+      this.nodes = this.nodes.filter((n2) => n2 !== node);
       let selectionChanged = this.selectedNodes.delete(node);
       if (this.selectedNode === node) {
         const remaining = [...this.selectedNodes];
@@ -1203,7 +1523,7 @@ var SSDiagram = (() => {
       this.scheduleDraw();
     }
     moveNode(id, x, y) {
-      const node = this.nodes.find((n) => n.id === id);
+      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);
@@ -1242,7 +1562,7 @@ var SSDiagram = (() => {
       return true;
     }
     doMoveNode(id, x, y) {
-      const node = this.nodes.find((n) => n.id === id);
+      const node = this.nodes.find((n2) => n2.id === id);
       if (node === void 0) return;
       node.x = x;
       node.y = y;
@@ -1298,8 +1618,8 @@ var SSDiagram = (() => {
       return ok;
     }
     doAddLink(init, validate = true, index = this.links.length) {
-      const fn = this.nodes.find((n) => n.id === init.from);
-      const tn = this.nodes.find((n) => n.id === init.to);
+      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);
@@ -1402,8 +1722,8 @@ var SSDiagram = (() => {
     // 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);
+    withTransaction(label2, fn) {
+      return this.history.transaction(label2, fn);
     }
     record(action) {
       this.history.recordApplied({
@@ -1416,7 +1736,7 @@ var SSDiagram = (() => {
       if (!this.permissions.deleteSelection) return;
       if (this.selectedNodes.size > 0) {
         this.withTransaction("delete selection", () => {
-          for (const id of [...this.selectedNodes].map((n) => n.id)) this.removeDiagramNode(id);
+          for (const id of [...this.selectedNodes].map((n2) => n2.id)) this.removeDiagramNode(id);
         });
         this.selectedNodes.clear();
         this.selectedNode = null;
@@ -1595,7 +1915,7 @@ var SSDiagram = (() => {
       this.showNodeMessages = show;
       this.scheduleDraw();
     }
-    updateNodeState(nodeId, label, mutate) {
+    updateNodeState(nodeId, label2, mutate) {
       const node = this.findNode(nodeId);
       if (node === void 0) return false;
       const before = node.toInit(false);
@@ -1613,7 +1933,7 @@ var SSDiagram = (() => {
         undo: () => {
           this.applyNodeSnapshot(nodeId, before);
         },
-        label
+        label: label2
       });
       return true;
     }
@@ -1763,7 +2083,7 @@ var SSDiagram = (() => {
     }
     // Renderer operations consumed by the high-level component.
     findNode(id) {
-      return this.nodes.find((n) => n.id === id);
+      return this.nodes.find((n2) => n2.id === id);
     }
     requestRedraw() {
       this.relayout();
@@ -1789,17 +2109,8 @@ var SSDiagram = (() => {
         copyContext.drawImage(this.canvas, 0, 0);
         return copy;
       }
-      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})`);
-      }
+      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;
@@ -1849,6 +2160,86 @@ var SSDiagram = (() => {
       }
       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
+      };
+      try {
+        this.ctx = surface;
+        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;
+      }
+      return surface.toSvg();
+    }
     positiveScreenshotNumber(value, name) {
       if (!Number.isFinite(value) || value <= 0) {
         throw new RangeError(`ssdiagram: screenshot ${name} must be a positive finite number`);
@@ -1969,7 +2360,7 @@ var SSDiagram = (() => {
       return this.toScreen(wx, wy);
     }
     selectNodeById(id) {
-      const node = id === null ? null : this.nodes.find((n) => n.id === id) ?? null;
+      const node = id === null ? null : this.nodes.find((n2) => n2.id === id) ?? null;
       this.selectNode(node);
     }
     setZoom(scale) {
@@ -2017,25 +2408,25 @@ var SSDiagram = (() => {
       this.opts.typeColors = { ...colors };
       this.scheduleDraw();
     }
-    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;
+    setTheme(t2) {
+      if (t2.background !== void 0) this.opts.background = t2.background;
+      if (t2.gridColor !== void 0) this.opts.gridColor = t2.gridColor;
+      if (t2.linkMaxLightness !== void 0) this.opts.linkMaxLightness = t2.linkMaxLightness;
+      if (t2.typedLinkColors !== void 0) this.opts.typedLinkColors = t2.typedLinkColors;
+      if (t2.overviewBackground !== void 0) this.opts.overviewBackground = t2.overviewBackground;
+      if (t2.overviewBorderColor !== void 0) this.opts.overviewBorderColor = t2.overviewBorderColor;
+      if (t2.overviewViewportColor !== void 0) this.opts.overviewViewportColor = t2.overviewViewportColor;
+      if (t2.overviewViewportFill !== void 0) this.opts.overviewViewportFill = t2.overviewViewportFill;
       this.scheduleDraw();
     }
     graphBounds() {
       if (this.nodes.length === 0) return null;
       let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-      for (const n of this.nodes) {
-        minX = Math.min(minX, n.x);
-        minY = Math.min(minY, n.y);
-        maxX = Math.max(maxX, n.x + n.w);
-        maxY = Math.max(maxY, n.y + n.h);
+      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 };
     }
@@ -2086,26 +2477,26 @@ var SSDiagram = (() => {
       this.canvas.remove();
     }
     // ---- geometry ---------------------------------------------------
-    layoutNode(n) {
+    layoutNode(n2) {
       const ctx = this.ctx;
       ctx.font = "600 12px Segoe UI, Tahoma, sans-serif";
-      const titleW = ctx.measureText(n.name).width;
-      const rows = Math.max(n.inPorts.length, n.outPorts.length, 1);
-      n.w = Math.max(170, Math.ceil(titleW) + 28);
-      n.h = Math.max(48, rows * PORT_ROW_H + 16);
+      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 = n.y + (n.h - ports.length * PORT_ROW_H) / 2 + PORT_ROW_H / 2;
+        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(n.inPorts, n.x - off);
-      place(n.outPorts, n.x + n.w + off);
+      place(n2.inPorts, n2.x - off);
+      place(n2.outPorts, n2.x + n2.w + off);
     }
     relayout() {
-      for (const n of this.nodes) this.layoutNode(n);
+      for (const n2 of this.nodes) this.layoutNode(n2);
     }
     toScreen(wx, wy) {
       return [wx * this.scale + this.offX, wy * this.scale + this.offY];
@@ -2134,9 +2525,9 @@ var SSDiagram = (() => {
     // ---- hit testing (world coords) ---------------------------------
     portAt(wx, wy) {
       for (let i = this.nodes.length - 1; i >= 0; i -= 1) {
-        const n = this.nodes[i];
-        for (const p of [...n.inPorts, ...n.outPorts]) {
-          if ((wx - p.cx) ** 2 + (wy - p.cy) ** 2 <= (PORT_R + 4) ** 2) return { node: n, port: p };
+        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 };
         }
       }
       return null;
@@ -2157,8 +2548,8 @@ var SSDiagram = (() => {
     }
     nodeAt(wx, wy) {
       for (let i = this.nodes.length - 1; i >= 0; i -= 1) {
-        const n = this.nodes[i];
-        if (wx >= n.x && wx <= n.x + n.w && wy >= n.y && wy <= n.y + n.h) return n;
+        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;
     }
@@ -2167,9 +2558,9 @@ var SSDiagram = (() => {
     obstaclesFor(exclude) {
       const inf = 12;
       const out = [];
-      for (const n of this.nodes) {
-        if (exclude.has(n.id)) continue;
-        out.push([n.x - inf, n.y - inf, n.w + inf * 2, n.h + inf * 2]);
+      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;
     }
@@ -2191,7 +2582,7 @@ var SSDiagram = (() => {
       return null;
     }
     endpoint(l, end) {
-      const node = this.nodes.find((n) => n.id === (end === "from" ? l.from : l.to));
+      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;
@@ -2289,39 +2680,39 @@ var SSDiagram = (() => {
       }
       let best = null;
       let bestD = SNAP_PX;
-      for (const n of this.nodes) {
-        const ports = direction === "in" ? n.inPorts : n.outPorts;
+      for (const n2 of this.nodes) {
+        const ports = direction === "in" ? n2.inPorts : n2.outPorts;
         for (const p of ports) {
-          if (!accepts(n, p)) continue;
+          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: n, port: p };
+            best = { node: n2, port: p };
           }
         }
       }
       return best;
     }
-    selectNode(n) {
+    selectNode(n2) {
       this.selectedLink = null;
       this.selectedPort = null;
       this.selectedNodes.clear();
-      if (n !== null) this.selectedNodes.add(n);
-      this.selectedNode = n;
-      this.emit("nodeSelected", { node: n, selected: n !== null });
+      if (n2 !== null) this.selectedNodes.add(n2);
+      this.selectedNode = n2;
+      this.emit("nodeSelected", { node: n2, selected: n2 !== null });
       this.emitSelectionChanged();
       this.scheduleDraw();
     }
-    toggleSelect(n) {
+    toggleSelect(n2) {
       this.selectedLink = null;
       this.selectedPort = null;
-      if (this.selectedNodes.has(n)) {
-        this.selectedNodes.delete(n);
-        if (this.selectedNode === n) this.selectedNode = null;
+      if (this.selectedNodes.has(n2)) {
+        this.selectedNodes.delete(n2);
+        if (this.selectedNode === n2) this.selectedNode = null;
       } else {
-        this.selectedNodes.add(n);
-        this.selectedNode = n;
+        this.selectedNodes.add(n2);
+        this.selectedNode = n2;
       }
       this.emit("nodeSelected", { node: this.selectedNode, selected: this.selectedNodes.size > 0 });
       this.emitSelectionChanged();
@@ -2365,10 +2756,10 @@ var SSDiagram = (() => {
         this.clip = null;
         return null;
       }
-      const ids = new Set([...this.selectedNodes].map((n) => n.id));
+      const ids = new Set([...this.selectedNodes].map((n2) => n2.id));
       const all = this.saveDocument();
       this.clip = createDiagramDocument({
-        nodes: all.nodes.filter((n) => ids.has(n.id)),
+        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);
@@ -2409,12 +2800,12 @@ var SSDiagram = (() => {
         }
         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)
+          const t2 = map.get(l.to.nodeId);
+          if (f !== void 0 && t2 !== void 0)
             this.addLink({
               from: f,
               fromPort: l.from.portId,
-              to: t,
+              to: t2,
               toPort: l.to.portId,
               metadata: l.metadata
             });
@@ -2718,7 +3109,7 @@ var SSDiagram = (() => {
           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((n) => n.x < rx1 && n.x + n.w > rx0 && n.y < ry1 && n.y + n.h > ry0);
+            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)]);
           }
@@ -2951,7 +3342,7 @@ var SSDiagram = (() => {
         const a = this.endpoint(l, "from");
         const b = this.endpoint(l, "to");
         if (a === null || b === null) continue;
-        const fp = this.nodes.find((n) => n.id === l.from)?.outPorts.find((p) => p.id === l.fromPort);
+        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;
@@ -2967,7 +3358,7 @@ var SSDiagram = (() => {
         }
       }
       if (options.transient && (this.linking !== null || this.relinking !== null)) this.drawPendingLink();
-      for (const n of this.nodes) this.drawNode(n, options.selection && this.selectedNodes.has(n), options);
+      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) {
@@ -2985,7 +3376,7 @@ var SSDiagram = (() => {
       if (options.overview) this.drawOverview();
       if (options.runtime) this.drawGlobalError();
       if (options.transient) this.drawTooltip();
-      if (options.transient && (this.introStart !== null || this.globalErrorFlashStart !== null || this.nodes.some((n) => n.errorFlashStart !== null)))
+      if (options.transient && (this.introStart !== null || this.globalErrorFlashStart !== null || this.nodes.some((n2) => n2.errorFlashStart !== null)))
         this.scheduleDraw();
     }
     drawGlobalError() {
@@ -3049,17 +3440,17 @@ ${runtime.error}`;
           isError = true;
         }
       } else if (this.hoverNode !== null) {
-        const n = this.hoverNode;
-        const errors = [n.runtimeError, n.loadError].filter((value) => value.length > 0);
+        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 && n.message.length > 0) {
-          text = n.message;
-        } else if (n.description.length > 0) {
-          text = n.description;
+        } else if (this.showNodeMessages && n2.message.length > 0) {
+          text = n2.message;
+        } else if (n2.description.length > 0) {
+          text = n2.description;
         } else {
-          text = n.typeId && n.typeId !== n.name ? `${n.name}   [${n.typeId}]` : n.name;
+          text = n2.typeId && n2.typeId !== n2.name ? `${n2.name}   [${n2.typeId}]` : n2.name;
         }
       } else {
         return;
@@ -3172,24 +3563,24 @@ ${runtime.error}`;
       img.src = url;
       return null;
     }
-    drawNode(n, selected, options) {
+    drawNode(n2, selected, options) {
       const ctx = this.ctx;
-      const hasLoadError = options.runtime && n.loadError.length > 0;
-      const hasRuntimeError = options.runtime && n.runtimeError.length > 0;
-      const runtime = options.runtime ? this.runtimeState.nodes[n.id] : void 0;
-      const active = options.runtime && (this.runtimeState.activeNodeId === n.id || runtime?.active === true);
-      roundRect(ctx, n.x, n.y, n.w, n.h, 6);
-      ctx.fillStyle = hasLoadError ? ERROR_BACKGROUND : active ? "#ffd1dc" : n.color;
+      const hasLoadError = options.runtime && n2.loadError.length > 0;
+      const hasRuntimeError = options.runtime && n2.runtimeError.length > 0;
+      const runtime = options.runtime ? 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() : n.border;
+      ctx.strokeStyle = selected ? this.selectionColor() : n2.border;
       ctx.stroke();
       if (hasLoadError || hasRuntimeError) {
         let alpha = 1;
-        if (options.transient && hasRuntimeError && n.errorFlashStart !== null) {
-          const elapsed = performance.now() - n.errorFlashStart;
+        if (options.transient && hasRuntimeError && n2.errorFlashStart !== null) {
+          const elapsed = performance.now() - n2.errorFlashStart;
           if (elapsed >= ERROR_FLASH_MS) {
-            n.errorFlashStart = null;
+            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
@@ -3198,30 +3589,30 @@ ${runtime.error}`;
         }
         ctx.save();
         ctx.globalAlpha *= alpha;
-        roundRect(ctx, n.x, n.y, n.w, n.h, 6);
+        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 (n.icon) {
-        const img = this.getIcon(n.icon);
+      if (n2.icon) {
+        const img = this.getIcon(n2.icon);
         if (img) {
           try {
-            ctx.drawImage(img, n.x + 8, n.y + (n.h - iconW) / 2, iconW, iconW);
+            ctx.drawImage(img, n2.x + 8, n2.y + (n2.h - iconW) / 2, iconW, iconW);
           } catch {
           }
         }
       }
-      const titleShift = n.icon ? iconW + 4 : 0;
+      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(n.name, n.x + titleShift + (n.w - titleShift) / 2, n.y + n.h / 2, n.w - titleShift - 14);
-      for (const p of n.inPorts) this.drawPort(n, p, options);
-      for (const p of n.outPorts) this.drawPort(n, p, options);
+      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;
@@ -3319,9 +3710,9 @@ ${runtime.error}`;
       ctx.setLineDash([]);
     }
     drawArrow(pts, color) {
-      const n = pts.length;
-      const [px, py] = pts[n - 2];
-      const [ex, ey] = pts[n - 1];
+      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();
@@ -3450,12 +3841,12 @@ ${runtime.error}`;
       ctx.lineWidth = 1;
       ctx.stroke();
       ctx.clip();
-      for (const n of this.nodes) {
-        ctx.fillStyle = n.color;
-        ctx.fillRect(mx(n.x), my(n.y), Math.max(2, n.w * s), Math.max(2, n.h * s));
-        ctx.strokeStyle = n.border;
+      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(n.x), my(n.y), Math.max(2, n.w * s), Math.max(2, n.h * s));
+        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);
@@ -3614,11 +4005,11 @@ ${runtime.error}`;
       cols = Math.ceil((maxX - minX) / cell);
       rows = Math.ceil((maxY - minY) / cell);
     }
-    const n = cols * rows;
-    if (n <= 0 || n > 8e4) return null;
+    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(n);
+    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));
@@ -3635,17 +4026,17 @@ ${runtime.error}`;
     const gi = gr * cols + gc;
     blocked[si] = 0;
     blocked[gi] = 0;
-    const g = new Float64Array(n).fill(Infinity);
-    const prev = new Int32Array(n).fill(-1);
-    const dir = new Int8Array(n).fill(-1);
+    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(n);
+    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];
+      const t2 = heap[i];
       heap[i] = heap[j];
-      heap[j] = t;
+      heap[j] = t2;
     };
     const push = (v) => {
       heap.push(v);
@@ -3676,7 +4067,7 @@ ${runtime.error}`;
       }
       return top;
     };
-    const seen = new Uint8Array(n);
+    const seen = new Uint8Array(n2);
     while (heap.length > 0) {
       const cur = pop();
       if (cur === gi) break;
@@ -3734,13 +4125,267 @@ ${runtime.error}`;
     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;
+    let t2 = len2 === 0 ? 0 : ((px - x1) * dx + (py - y1) * dy) / len2;
+    t2 = clamp(t2, 0, 1);
+    const cx = x1 + t2 * dx;
+    const cy = y1 + t2 * dy;
     return Math.hypot(px - cx, py - cy);
   }
 
+  // src/i18n.ts
+  var i18n = typeof window === "undefined" ? {} : window.__designerI18n ?? {};
+  function t(key, fallback) {
+    return i18n[key] ?? fallback;
+  }
+
+  // src/diagram/context-menu.ts
+  var ROOT_CLASS = "ssdiagram-context-menu";
+  var ITEM_CLASS = "ssdiagram-context-menu-item";
+  var SUBMENU_CLASS = "ssdiagram-context-menu-submenu";
+  var SEPARATOR_CLASS = "ssdiagram-context-menu-separator";
+  var LABEL_CLASS = "ssdiagram-context-menu-label";
+  var ARROW_CLASS = "ssdiagram-context-menu-arrow";
+  var SEPARATE_AFTER = /* @__PURE__ */ new Set(["redo", "paste", "delete"]);
+  function label(id) {
+    switch (id) {
+      case "undo":
+        return t("undo", "Undo");
+      case "redo":
+        return t("redo", "Redo");
+      case "cut":
+        return t("cut", "Cut");
+      case "copy":
+        return t("copy", "Copy");
+      case "paste":
+        return t("paste", "Paste");
+      case "open":
+        return t("ctxOpen", "Open");
+      case "delete":
+        return t("delete", "Delete");
+      case "export":
+        return t("ctxExportAs", "Export as");
+      case "exportDocument":
+        return t("ctxExportDocument", "Scheme");
+      case "exportPng":
+        return t("ctxExportPng", "PNG image");
+      case "exportSvg":
+        return t("ctxExportSvg", "SVG image");
+      case "properties":
+        return t("properties", "Properties");
+      case "help":
+        return t("ctxHelp", "Help");
+    }
+  }
+  var PANEL_STYLE = {
+    position: "fixed",
+    zIndex: "2147483000",
+    minWidth: "176px",
+    padding: "4px",
+    border: "1px solid var(--ssdiagram-menu-border, var(--ssdiagram-control-border, var(--t-border, #3a4250)))",
+    borderRadius: "7px",
+    background: "var(--ssdiagram-menu-background, var(--ssdiagram-control-background, var(--t-panel, #181a20)))",
+    color: "var(--ssdiagram-menu-color, var(--ssdiagram-control-color, var(--t-text, #eaecef)))",
+    boxShadow: "0 12px 32px rgba(0, 0, 0, 0.45)",
+    font: 'var(--ssdiagram-menu-font, 12.5px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif)',
+    boxSizing: "border-box",
+    userSelect: "none"
+  };
+  var ITEM_STYLE = {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    width: "100%",
+    padding: "6px 10px",
+    border: "0",
+    borderRadius: "4px",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+    boxSizing: "border-box"
+  };
+  var HOVER_BACKGROUND = "var(--ssdiagram-menu-hover, var(--t-hover, rgba(255, 255, 255, 0.08)))";
+  var DISABLED_COLOR = "var(--ssdiagram-menu-disabled-color, var(--t-text-dim, #848e9c))";
+  var ContextMenuView = class {
+    constructor(options) {
+      this.root = null;
+      this.submenu = null;
+      this.detach = [];
+      this.container = options.container;
+      this.execute = options.execute;
+    }
+    get isOpen() {
+      return this.root !== null;
+    }
+    show(x, y, items) {
+      this.hide();
+      const owner = this.container.ownerDocument ?? document;
+      const root = this.panel(owner);
+      root.className = ROOT_CLASS;
+      root.setAttribute("role", "menu");
+      items.forEach((item, index) => {
+        if ("group" in item) root.appendChild(this.groupEntry(owner, item));
+        else root.appendChild(this.commandEntry(owner, item.command, item.enabled, true));
+        const id = "group" in item ? item.group : item.command;
+        if (SEPARATE_AFTER.has(id) && index < items.length - 1) root.appendChild(this.separator(owner));
+      });
+      this.container.appendChild(root);
+      this.root = root;
+      this.place(root, x, y);
+      this.watchForDismissal(owner);
+    }
+    hide() {
+      for (const dispose of this.detach.splice(0)) dispose();
+      this.submenu = null;
+      this.root?.remove();
+      this.root = null;
+    }
+    destroy() {
+      this.hide();
+    }
+    panel(owner) {
+      const panel = owner.createElement("div");
+      Object.assign(panel.style, PANEL_STYLE);
+      return panel;
+    }
+    separator(owner) {
+      const rule = owner.createElement("div");
+      rule.className = SEPARATOR_CLASS;
+      Object.assign(rule.style, {
+        height: "1px",
+        margin: "4px 6px",
+        background: "var(--ssdiagram-menu-border, var(--t-border, #3a4250))"
+      });
+      return rule;
+    }
+    item(owner, text, enabled, arrow) {
+      const button = owner.createElement("button");
+      button.type = "button";
+      button.className = ITEM_CLASS;
+      button.setAttribute("role", "menuitem");
+      Object.assign(button.style, ITEM_STYLE);
+      if (!enabled) {
+        button.disabled = true;
+        button.style.color = DISABLED_COLOR;
+        button.style.cursor = "default";
+      }
+      const caption = owner.createElement("span");
+      caption.className = LABEL_CLASS;
+      caption.textContent = text;
+      caption.style.flex = "1";
+      button.appendChild(caption);
+      if (arrow) {
+        const chevron = owner.createElement("span");
+        chevron.className = ARROW_CLASS;
+        chevron.textContent = "\u203A";
+        chevron.setAttribute("aria-hidden", "true");
+        Object.assign(chevron.style, { flex: "none", opacity: "0.7", fontSize: "14px" });
+        button.appendChild(chevron);
+      }
+      return button;
+    }
+    // `closesSubmenu` separates the two places an item can live. A top-level item shuts any
+    // open submenu when the pointer arrives, the way menus everywhere behave. An item inside
+    // the submenu must not: reaching it means the pointer has entered that very panel, and
+    // closing it there would pull it out from under the pointer and drop the click on the
+    // canvas behind.
+    commandEntry(owner, command, enabled, closesSubmenu) {
+      const button = this.item(owner, label(command), enabled, false);
+      this.on(button, "pointerenter", () => {
+        if (closesSubmenu) this.closeSubmenu();
+        if (enabled) button.style.background = HOVER_BACKGROUND;
+      });
+      this.on(button, "pointerleave", () => {
+        button.style.background = "transparent";
+      });
+      this.on(button, "click", () => {
+        if (!enabled) return;
+        this.hide();
+        this.execute(command);
+      });
+      return button;
+    }
+    groupEntry(owner, group) {
+      const host = owner.createElement("div");
+      host.style.position = "relative";
+      const button = this.item(owner, label(group.group), group.enabled, true);
+      host.appendChild(button);
+      const panel = this.panel(owner);
+      panel.className = SUBMENU_CLASS;
+      panel.setAttribute("role", "menu");
+      Object.assign(panel.style, { position: "absolute", left: "100%", top: "-5px", display: "none" });
+      for (const child of group.commands) panel.appendChild(this.commandEntry(owner, child.command, child.enabled, false));
+      host.appendChild(panel);
+      const open = () => {
+        if (!group.enabled) return;
+        button.style.background = HOVER_BACKGROUND;
+        panel.style.display = "block";
+        this.submenu = panel;
+        this.keepOnScreen(panel);
+      };
+      this.on(button, "pointerenter", open);
+      this.on(button, "click", open);
+      this.on(host, "pointerleave", () => {
+        if (this.submenu !== panel) return;
+        button.style.background = "transparent";
+        panel.style.display = "none";
+        this.submenu = null;
+      });
+      return host;
+    }
+    closeSubmenu() {
+      if (this.submenu === null) return;
+      this.submenu.style.display = "none";
+      this.submenu = null;
+    }
+    /** Keeps the panel inside the viewport, flipping it left when it would run off the edge. */
+    keepOnScreen(panel) {
+      if (typeof panel.getBoundingClientRect !== "function" || typeof window === "undefined") return;
+      const box = panel.getBoundingClientRect();
+      if (box.right > window.innerWidth - 4) {
+        panel.style.left = "auto";
+        panel.style.right = "100%";
+      }
+      if (box.bottom > window.innerHeight - 4) {
+        panel.style.top = "auto";
+        panel.style.bottom = "-5px";
+      }
+    }
+    place(root, x, y) {
+      root.style.left = `${x}px`;
+      root.style.top = `${y}px`;
+      if (typeof root.getBoundingClientRect !== "function" || typeof window === "undefined") return;
+      const box = root.getBoundingClientRect();
+      if (box.right > window.innerWidth - 4) root.style.left = `${Math.max(4, x - box.width)}px`;
+      if (box.bottom > window.innerHeight - 4) root.style.top = `${Math.max(4, y - box.height)}px`;
+    }
+    watchForDismissal(owner) {
+      const dismiss = () => this.hide();
+      const outside = (event) => {
+        const root = this.root;
+        const target = event.target;
+        if (root !== null && target !== null && typeof root.contains === "function" && root.contains(target)) return;
+        this.hide();
+      };
+      this.on(owner, "pointerdown", outside, true);
+      this.on(owner, "keydown", (event) => {
+        if (event.key === "Escape") this.hide();
+      });
+      if (typeof window !== "undefined") {
+        this.on(window, "blur", dismiss);
+        this.on(window, "resize", dismiss);
+        this.on(window, "scroll", dismiss, true);
+      }
+    }
+    on(target, type, listener, capture = false) {
+      if (typeof target.addEventListener !== "function") return;
+      target.addEventListener(type, listener, capture);
+      this.detach.push(() => target.removeEventListener?.(type, listener, capture));
+    }
+  };
+
   // src/diagram/event-emitter.ts
   var EventEmitter = class {
     constructor() {
@@ -3895,6 +4540,18 @@ ${runtime.error}`;
   };
 
   // src/diagram/stocksharp-diagram.ts
+  var CONTEXT_MENU = [
+    "undo",
+    "redo",
+    "cut",
+    "copy",
+    "paste",
+    "open",
+    "delete",
+    { group: "export", commands: ["exportDocument", "exportPng", "exportSvg"] },
+    "properties",
+    "help"
+  ];
   var StockSharpDiagram = class extends EventEmitter {
     constructor(options) {
       super();
@@ -3909,6 +4566,7 @@ ${runtime.error}`;
       this.fullscreenButtonVisible = true;
       this.fullscreenLabels = { enter: "Enter fullscreen", exit: "Exit fullscreen" };
       this.contextActions = new DiagramActionRegistry();
+      this.contextMenu = null;
       this.div = options.div;
       this.catalog = options.catalog;
       this.overviewContainer = options.overviewContainer ?? null;
@@ -3925,6 +4583,7 @@ ${runtime.error}`;
       this.prepareFullscreenButtonHost();
       this.fullscreenButton = this.createFullscreenButton();
       this.updateFullscreenButton();
+      this.setContextMenuEnabled(options.showContextMenu ?? true);
       this.registerContextActions();
       this.bindCanvasEvents();
       this.disposables.push(this.catalog.on("portTypesChanged", () => this.applySocketTheme()));
@@ -4084,8 +4743,8 @@ ${runtime.error}`;
       return this.canvas.updateNode(nodeId, { name: value });
     }
     /** Groups host-driven document edits into one undo/redo operation. */
-    transaction(label, action) {
-      return this.canvas.withTransaction(label, action);
+    transaction(label2, action) {
+      return this.canvas.withTransaction(label2, action);
     }
     setShowNodeMessages(show) {
       this.canvas.setShowNodeMessages(show);
@@ -4134,6 +4793,10 @@ ${runtime.error}`;
     takeScreenshot(options = {}) {
       return this.canvas.takeScreenshot(options);
     }
+    /** The same picture as takeScreenshot, as an SVG document. */
+    takeSvg(options = {}) {
+      return this.canvas.takeSvg(options);
+    }
     getSelection() {
       return this.canvas.getSelection();
     }
@@ -4266,11 +4929,40 @@ ${runtime.error}`;
       const fallback = this.canvas.getClipboardDocument();
       return fallback !== null && this.canvas.pasteDocument(fallback).length > 0;
     }
+    /**
+     * Turns the built-in menu on or off. Off leaves `contextMenuRequested` untouched, so a
+     * host that draws its own is only trading one menu for another, never losing the event.
+     */
+    setContextMenuEnabled(enabled) {
+      if (enabled === (this.contextMenu !== null)) return;
+      if (!enabled) {
+        this.contextMenu?.destroy();
+        this.contextMenu = null;
+        return;
+      }
+      this.contextMenu = new ContextMenuView({
+        container: this.div,
+        // Through the public entry point, so the built-in menu is exactly as privileged
+        // as a host's own -- same guards, same contextCommand event.
+        execute: (command) => {
+          this.executeContextCommand(command);
+        }
+      });
+    }
+    isContextMenuEnabled() {
+      return this.contextMenu !== null;
+    }
     getContextCommands() {
-      return this.contextActions.states(this.contextActionContext()).map(({ id, enabled }) => ({
-        command: id,
-        enabled
-      }));
+      const context = this.contextActionContext();
+      const state = (command) => ({
+        command,
+        enabled: this.contextActions.canExecute(command, context)
+      });
+      return CONTEXT_MENU.map((entry) => {
+        if (typeof entry === "string") return state(entry);
+        const commands = entry.commands.map(state);
+        return { group: entry.group, enabled: commands.some(({ enabled }) => enabled), commands };
+      });
     }
     executeContextCommand(command) {
       const context = this.contextActionContext();
@@ -4338,6 +5030,8 @@ ${runtime.error}`;
     destroy() {
       if (this.destroyed) return;
       this.destroyed = true;
+      this.contextMenu?.destroy();
+      this.contextMenu = null;
       for (const dispose of this.disposables.splice(0).reverse()) dispose();
       this.canvas.destroy();
     }
@@ -4390,11 +5084,11 @@ ${runtime.error}`;
     }
     updateFullscreenButton() {
       const fullscreen = this.fullscreen;
-      const label = fullscreen ? this.fullscreenLabels.exit : this.fullscreenLabels.enter;
+      const label2 = fullscreen ? this.fullscreenLabels.exit : this.fullscreenLabels.enter;
       const path = fullscreen ? "M4 9h5V4M20 9h-5V4M4 15h5v5M20 15h-5v5" : "M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5";
       this.fullscreenButton.className = fullscreen ? "ssdiagram-fullscreen-button is-active" : "ssdiagram-fullscreen-button";
-      this.fullscreenButton.title = label;
-      this.fullscreenButton.setAttribute("aria-label", label);
+      this.fullscreenButton.title = label2;
+      this.fullscreenButton.setAttribute("aria-label", label2);
       this.fullscreenButton.setAttribute("aria-pressed", String(fullscreen));
       this.fullscreenButton.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="${path}"/></svg>`;
     }
@@ -4490,6 +5184,7 @@ ${runtime.error}`;
         }),
         this.canvas.on("undoStackChanged", (state) => this.emit("undoStackChanged", state)),
         this.canvas.on("contextMenu", ({ x, y, node, link, port }) => {
+          const commands = this.getContextCommands();
           this.emit("contextMenuRequested", {
             x,
             y,
@@ -4497,8 +5192,9 @@ ${runtime.error}`;
             link: link === null ? null : this.fromCanvasLink(link),
             port: port === null ? null : this.fromCanvasPort(port.port),
             portDirection: port?.port.direction ?? null,
-            commands: this.getContextCommands()
+            commands
           });
+          this.contextMenu?.show(x, y, commands);
         })
       );
     }
@@ -4533,6 +5229,24 @@ ${runtime.error}`;
           canExecute: ({ selection }) => permissions().deleteSelection && (selection.nodeIds.length > 0 || selection.linkIds.length > 0),
           execute: () => this.canvas.deleteSelection()
         },
+        // Export asks rather than does. Where the result goes -- a download, an upload,
+        // a clipboard, a print preview -- is the host's decision, and so is which options
+        // to render with, so the control reports the request and stops there.
+        // Availability follows the diagram, not the selection: all three export the whole
+        // picture, and an empty diagram has none to give. They stay on in read-only mode,
+        // which forbids changing the diagram, not looking at it.
+        exportDocument: {
+          canExecute: ({ document: document2 }) => document2.nodes.length > 0,
+          execute: () => this.emit("exportRequested", { format: "document" })
+        },
+        exportPng: {
+          canExecute: ({ document: document2 }) => document2.nodes.length > 0,
+          execute: () => this.emit("exportRequested", { format: "png" })
+        },
+        exportSvg: {
+          canExecute: ({ document: document2 }) => document2.nodes.length > 0,
+          execute: () => this.emit("exportRequested", { format: "svg" })
+        },
         properties: {
           canExecute: ({ nodes }) => nodes.length > 0,
           execute: ({ nodes }) => this.emit("nodeProperties", { nodes })
@@ -4550,6 +5264,7 @@ ${runtime.error}`;
       const linkIds = new Set(selection.linkIds);
       return {
         selection,
+        document: document2,
         nodes: document2.nodes.filter((node) => nodeIds.has(node.id)).map((node) => this.fromCanvasInit(node)),
         links: document2.links.filter((link) => linkIds.has(link.id)).map((link) => new Link({
           id: link.id,
@@ -4708,8 +5423,8 @@ ${runtime.error}`;
     // imported node ("Element type is missing from the palette"). Node.id
     // keeps its original casing so save/load round-trips unchanged.
     addNodeType(node) {
-      const n = (node instanceof Node ? node : new Node(node)).clone();
-      this.nodeTypes.set(n.id.toLowerCase(), n);
+      const n2 = (node instanceof Node ? node : new Node(node)).clone();
+      this.nodeTypes.set(n2.id.toLowerCase(), n2);
       this.emitNodeTypesChanged();
     }
     removeNodeType(id) {
@@ -4853,11 +5568,11 @@ ${runtime.error}`;
       const chev = document.createElement("span");
       chev.className = "d-palette-chev";
       chev.setAttribute("aria-hidden", "true");
-      const label = document.createElement("span");
-      label.className = "d-palette-group-name";
-      label.textContent = name;
+      const label2 = document.createElement("span");
+      label2.className = "d-palette-group-name";
+      label2.textContent = name;
       head.appendChild(chev);
-      head.appendChild(label);
+      head.appendChild(label2);
       head.addEventListener("click", () => {
         if (this.collapsed.has(name)) this.collapsed.delete(name);
         else this.collapsed.add(name);
@@ -4893,10 +5608,10 @@ ${runtime.error}`;
         placeholder.setAttribute("aria-hidden", "true");
         li.appendChild(placeholder);
       }
-      const label = document.createElement("span");
-      label.className = "d-palette-label";
-      label.textContent = item.name;
-      li.appendChild(label);
+      const label2 = document.createElement("span");
+      label2.className = "d-palette-label";
+      label2.textContent = item.name;
+      li.appendChild(label2);
       li.addEventListener("click", () => this.selectNodeType(item.id));
       li.addEventListener("dblclick", (event) => {
         event.preventDefault();
@@ -4976,8 +5691,8 @@ ${runtime.error}`;
     const m = hex.match(/^#?([0-9a-fA-F]{6})$/);
     if (m === null)
       return 0;
-    const n = parseInt(m[1], 16);
-    return 0.299 * (n >> 16 & 255) + 0.587 * (n >> 8 & 255) + 0.114 * (n & 255);
+    const n2 = parseInt(m[1], 16);
+    return 0.299 * (n2 >> 16 & 255) + 0.587 * (n2 >> 8 & 255) + 0.114 * (n2 & 255);
   }
   function makePort(p) {
     return new Port({
@@ -5018,23 +5733,23 @@ ${runtime.error}`;
       add(usedOut, l.from, l.fromPort);
       add(usedIn, l.to, l.toPort);
     }
-    const nodes = scheme.nodes.map((n) => {
-      const t = catalog.getNodeType(n.typeId);
-      const inPorts = t ? t.inPorts.map(portOf) : [];
-      const outPorts = t ? t.outPorts.map(portOf) : [];
-      const anchorType = t?.inPorts.find((p) => p.isDynamic)?.type ?? "Any";
-      for (const key of usedIn.get(n.id) ?? [])
+    const nodes = scheme.nodes.map((n2) => {
+      const t2 = catalog.getNodeType(n2.typeId);
+      const inPorts = t2 ? t2.inPorts.map(portOf) : [];
+      const outPorts = t2 ? t2.outPorts.map(portOf) : [];
+      const anchorType = t2?.inPorts.find((p) => p.isDynamic)?.type ?? "Any";
+      for (const key of usedIn.get(n2.id) ?? [])
         if (!inPorts.some((p) => p.id === key))
           inPorts.push({ id: key, name: key, type: anchorType, maxLinks: 0 });
-      for (const key of usedOut.get(n.id) ?? [])
+      for (const key of usedOut.get(n2.id) ?? [])
         if (!outPorts.some((p) => p.id === key))
           outPorts.push({ id: key, name: key, type: "Any", maxLinks: 0 });
-      const data = new DiagramNode({ id: n.id, typeId: n.typeId, name: n.name, x: n.x, y: n.y, inPorts, outPorts });
-      if (t?.icon)
-        data.icon = t.icon;
-      if (!t) {
+      const data = new DiagramNode({ id: n2.id, typeId: n2.typeId, name: n2.name, x: n2.x, y: n2.y, inPorts, outPorts });
+      if (t2?.icon)
+        data.icon = t2.icon;
+      if (!t2) {
         data.isPlaceholder = true;
-        nodeErrors[n.id] = missingTypeMessage(n.typeId);
+        nodeErrors[n2.id] = missingTypeMessage(n2.typeId);
       }
       return data;
     });