@stocksharp/diagram 0.5.0 → 0.7.0

package/dist/ssdiagram.js

@@ -67,6 +67,9 @@ var SSDiagram = (() => {
     }
     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) {
@@ -110,15 +113,8 @@ var SSDiagram = (() => {
       return normalizeLink({ ...link, id }, `$.links[${index}]`);
     });
     const rawZones = mapElements(input.zones, "$.zones");
-    const usedZoneIds = /* @__PURE__ */ new Set();
-    const zones = rawZones.map((zone, index) => {
-      const normalized = normalizeZone(zone, `$.zones[${index}]`);
-      if (usedZoneIds.has(normalized.id)) {
-        throw new DiagramDocumentError(`duplicate zone id "${normalized.id}"`, `$.zones[${index}].id`);
-      }
-      usedZoneIds.add(normalized.id);
-      return normalized;
-    });
+    const zones = rawZones.map((zone, index) => normalizeZone(zone, `$.zones[${index}]`));
+    validateUniqueZones(zones);
     const document2 = {
       version: DIAGRAM_DOCUMENT_VERSION,
       nodes,
@@ -239,8 +235,9 @@ var SSDiagram = (() => {
     return {
       id: requireIdentifier(input.id, `${path}.id`),
       name: requireString(input.name, `${path}.name`),
-      x: requireNumber(input.x, `${path}.x`),
-      y: requireNumber(input.y, `${path}.y`),
+      // 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`),
@@ -248,7 +245,7 @@ var SSDiagram = (() => {
     };
   }
   function requirePositiveSize(value, path) {
-    const size = requireNumber(value, path);
+    const size = requireFiniteNumber(value, path);
     if (!(size > 0)) throw new DiagramDocumentError("size must be greater than zero", path);
     return size;
   }
@@ -330,6 +327,14 @@ var SSDiagram = (() => {
       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++) {
@@ -360,6 +365,7 @@ var SSDiagram = (() => {
       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();
@@ -573,7 +579,13 @@ var SSDiagram = (() => {
         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 {
@@ -587,6 +599,7 @@ var SSDiagram = (() => {
       return true;
     }
     redo() {
+      this.assertNoOpenTransaction("redo");
       const command = this.redoCommands.pop();
       if (command === void 0) return false;
       try {
@@ -600,9 +613,7 @@ var SSDiagram = (() => {
       return true;
     }
     clear() {
-      if (this.transactions.length > 0) {
-        throw new Error("Cannot clear command history inside a transaction.");
-      }
+      this.assertNoOpenTransaction("clear");
       this.undoCommands.length = 0;
       this.redoCommands.length = 0;
       this.notify();
@@ -1045,12 +1056,16 @@ var SSDiagram = (() => {
       this.emit(`<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" fill="none" ${this.strokeAttrs()}/>`);
     }
     // ===== text ==========================================================
-    fillText(text, x, y) {
+    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}" ${this.fillAttrs()}>${escapeXml(text)}</text>`
+        `<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) {
@@ -1358,15 +1373,20 @@ var SSDiagram = (() => {
       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(({ canUndo, canRedo }) => {
-        this.emit("undoStackChanged", { canUndo, canRedo });
+      this.history = new DiagramCommandHistory(() => {
+        this.emit("undoStackChanged", { canUndo: this.canUndo(), canRedo: this.canRedo() });
       });
       this.canvas = document.createElement("canvas");
       this.canvas.style.display = "block";
@@ -1749,6 +1769,8 @@ var SSDiagram = (() => {
     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;
@@ -1758,6 +1780,7 @@ var SSDiagram = (() => {
       this.runtimePulse = 0;
       this.globalErrorFlashStart = null;
       this.history.clear();
+      if (hadSelection) this.emitSelectionChanged();
       this.emitRuntimeStateChanged();
     }
     relink(linkId, next) {
@@ -1976,6 +1999,20 @@ var SSDiagram = (() => {
       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 });
@@ -1992,7 +2029,7 @@ var SSDiagram = (() => {
         if (node.loadError.length === 0) continue;
         const state = createDiagramNodeRuntimeState();
         state.errors.load = { kind: "load", message: node.loadError, pulse: ++this.runtimePulse };
-        this.runtimeState.nodes[node.id] = state;
+        setJsonKey(this.runtimeState.nodes, node.id, state);
       }
       if (Object.keys(this.runtimeState.nodes).length > 0) this.emitRuntimeStateChanged();
       this.history.clear();
@@ -2003,7 +2040,15 @@ var SSDiagram = (() => {
     save() {
       return {
         nodes: this.nodes.map((node) => node.toInit(false)),
-        links: this.links.map((l) => ({ from: l.from, fromPort: l.fromPort, to: l.to, toPort: l.toPort }))
+        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) {
@@ -2073,7 +2118,20 @@ var SSDiagram = (() => {
         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;
@@ -2101,6 +2159,7 @@ var SSDiagram = (() => {
         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;
@@ -2127,7 +2186,10 @@ var SSDiagram = (() => {
         offX: this.offX,
         offY: this.offY,
         overviewVisible: this.overviewVisible,
-        background: this.opts.background
+        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;
@@ -2157,6 +2219,7 @@ var SSDiagram = (() => {
         this.offY = previous.offY;
         this.overviewVisible = previous.overviewVisible;
         this.opts.background = previous.background;
+        this.ovGeo = previous.ovGeo;
       }
       return output;
     }
@@ -2210,10 +2273,15 @@ var SSDiagram = (() => {
         scale: this.scale,
         offX: this.offX,
         offY: this.offY,
-        overviewVisible: this.overviewVisible
+        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;
@@ -2237,6 +2305,8 @@ var SSDiagram = (() => {
         this.offX = previous.offX;
         this.offY = previous.offY;
         this.overviewVisible = previous.overviewVisible;
+        this.opts.background = previous.background;
+        this.ovGeo = previous.ovGeo;
       }
       return surface.toSvg();
     }
@@ -2269,8 +2339,8 @@ var SSDiagram = (() => {
         ...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 = this.runtimeState.nodes[node.id]?.errors;
-        const previousRuntime = previous.nodes[node.id]?.errors.runtime;
+        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 ?? "";
@@ -2299,8 +2369,8 @@ var SSDiagram = (() => {
       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 = state.nodes[nodeId] ?? createDiagramNodeRuntimeState();
-      state.nodes[nodeId] = nodeState;
+      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);
@@ -2322,8 +2392,8 @@ var SSDiagram = (() => {
         node.errorFlashStart = message.length > 0 && options.animate !== false ? performance.now() : null;
       }
       const state = this.getRuntimeState();
-      const nodeState = state.nodes[id] ?? createDiagramNodeRuntimeState();
-      state.nodes[id] = nodeState;
+      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 };
@@ -2340,7 +2410,7 @@ var SSDiagram = (() => {
       }
       if (kind === void 0 || kind === "load") node.loadError = "";
       const state = this.getRuntimeState();
-      const nodeState = state.nodes[id];
+      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;
@@ -2364,6 +2434,7 @@ var SSDiagram = (() => {
       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;
@@ -2405,9 +2476,21 @@ var SSDiagram = (() => {
       this.scheduleDraw();
     }
     setTypeColors(colors) {
-      this.opts.typeColors = { ...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(t2) {
       if (t2.background !== void 0) this.opts.background = t2.background;
       if (t2.gridColor !== void 0) this.opts.gridColor = t2.gridColor;
@@ -2509,7 +2592,8 @@ var SSDiagram = (() => {
       const light = maxL !== void 0 && maxL < 0.5;
       if (type === "") return light ? "#585c62" : "#9aa0a6";
       const map = this.opts.typeColors ?? {};
-      const base = map[type] ?? `hsl(${hashHue(type)}, 62%, 58%)`;
+      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
@@ -2529,6 +2613,7 @@ var SSDiagram = (() => {
         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;
     }
@@ -2807,6 +2892,9 @@ var SSDiagram = (() => {
               fromPort: l.from.portId,
               to: t2,
               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
             });
         }
@@ -2815,6 +2903,23 @@ var SSDiagram = (() => {
       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);
@@ -2847,7 +2952,7 @@ var SSDiagram = (() => {
       this.relinking = null;
       this.relinkCandidate = null;
       this.linkSnap = null;
-      this.scheduleDraw();
+      this.clearHover();
       this.emit("contextMenu", { x: pageX, y: pageY, link, node, port });
     }
     listen(target, type, listener, options) {
@@ -2866,14 +2971,16 @@ var SSDiagram = (() => {
         }
         this.cancelLongPress();
         this.relinkCandidate = null;
-        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);
+        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)) {
@@ -2943,13 +3050,13 @@ var SSDiagram = (() => {
         if (node !== null) {
           const add = e.shiftKey || e.ctrlKey || e.metaKey;
           if (this.permissions.select) {
-            if (add) {
+            if (add && e.button === 0) {
               this.toggleSelect(node);
               return;
             }
             if (!this.selectedNodes.has(node)) this.selectNode(node);
           }
-          if (this.permissions.moveNodes) {
+          if (this.permissions.moveNodes && e.button === 0) {
             this.dragNode = node;
             this.dragAnchor = { wx, wy };
             const moving = this.selectedNodes.has(node) ? [...this.selectedNodes] : [node];
@@ -2964,6 +3071,7 @@ var SSDiagram = (() => {
           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);
@@ -3087,7 +3195,10 @@ var SSDiagram = (() => {
         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);
-          for (const it of this.dragStart) this.emit("nodeMoved", { node: it.n });
+          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) {
@@ -3169,26 +3280,12 @@ var SSDiagram = (() => {
         this.emitViewChanged(true);
         this.scheduleDraw();
       }, { passive: false });
-      this.listen(this.canvas, "pointerleave", () => {
-        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();
-      });
+      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) {
@@ -3231,6 +3328,8 @@ var SSDiagram = (() => {
           this.linking = null;
           this.relinking = null;
           this.relinkCandidate = null;
+          this.ovDragging = false;
+          this.linkSnap = null;
         }
       }, { passive: false });
       this.listen(this.canvas, "touchmove", (e) => {
@@ -3291,12 +3390,12 @@ var SSDiagram = (() => {
         }
         if (mod && this.permissions.history && e.code === "KeyZ" && !e.shiftKey) {
           e.preventDefault();
-          this.undo();
+          this.historyShortcut("undo");
           return;
         }
         if (mod && this.permissions.history && (e.code === "KeyY" || e.code === "KeyZ" && e.shiftKey)) {
           e.preventDefault();
-          this.redo();
+          this.historyShortcut("redo");
           return;
         }
       });
@@ -3374,17 +3473,23 @@ var SSDiagram = (() => {
       }
       ctx.restore();
       if (options.overview) this.drawOverview();
-      if (options.runtime) this.drawGlobalError();
+      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();
     }
-    drawGlobalError() {
+    /**
+     * `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 (this.globalErrorFlashStart !== null) {
+      if (transient && this.globalErrorFlashStart !== null) {
         const elapsed = performance.now() - this.globalErrorFlashStart;
         if (elapsed >= ERROR_FLASH_MS) {
           this.globalErrorFlashStart = null;
@@ -3567,7 +3672,7 @@ ${runtime.error}`;
       const ctx = this.ctx;
       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 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;
@@ -3655,7 +3760,7 @@ ${runtime.error}`;
       }
     }
     portRuntimeState(node, port) {
-      return this.runtimeState.nodes[node.id]?.ports[port.direction][port.id] ?? null;
+      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
@@ -4133,9 +4238,10 @@ ${runtime.error}`;
   }
 
   // src/i18n.ts
-  var i18n = typeof window === "undefined" ? {} : window.__designerI18n ?? {};
   function t(key, fallback) {
-    return i18n[key] ?? fallback;
+    if (typeof window === "undefined") return fallback;
+    const value = window.__designerI18n?.[key];
+    return value === void 0 || value === "" ? fallback : value;
   }
 
   // src/diagram/context-menu.ts
@@ -4145,7 +4251,8 @@ ${runtime.error}`;
   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"]);
+  var CHECK_CLASS = "ssdiagram-context-menu-check";
+  var SEPARATE_AFTER = /* @__PURE__ */ new Set(["redo", "paste", "delete", "overview"]);
   function label(id) {
     switch (id) {
       case "undo":
@@ -4161,7 +4268,7 @@ ${runtime.error}`;
       case "open":
         return t("ctxOpen", "Open");
       case "delete":
-        return t("delete", "Delete");
+        return t("ctxDelete", "Delete");
       case "export":
         return t("ctxExportAs", "Export as");
       case "exportDocument":
@@ -4170,6 +4277,8 @@ ${runtime.error}`;
         return t("ctxExportPng", "PNG image");
       case "exportSvg":
         return t("ctxExportSvg", "SVG image");
+      case "overview":
+        return t("ctxOverview", "Overview");
       case "properties":
         return t("properties", "Properties");
       case "help":
@@ -4180,6 +4289,10 @@ ${runtime.error}`;
     position: "fixed",
     zIndex: "2147483000",
     minWidth: "176px",
+    // Translations run longer than English -- German and Russian routinely half again. Without
+    // a cap the panel just grows, and on a narrow viewport it leaves the screen entirely, which
+    // no amount of repositioning can recover.
+    maxWidth: "min(320px, calc(100vw - 16px))",
     padding: "4px",
     border: "1px solid var(--ssdiagram-menu-border, var(--ssdiagram-control-border, var(--t-border, #3a4250)))",
     borderRadius: "7px",
@@ -4201,8 +4314,10 @@ ${runtime.error}`;
     background: "transparent",
     color: "inherit",
     font: "inherit",
-    textAlign: "left",
-    whiteSpace: "nowrap",
+    // Logical, not physical: on an RTL page these follow the writing direction instead of
+    // pinning the text left and truncating from the wrong end.
+    textAlign: "start",
+    overflowWrap: "anywhere",
     cursor: "pointer",
     boxSizing: "border-box"
   };
@@ -4212,6 +4327,7 @@ ${runtime.error}`;
     constructor(options) {
       this.root = null;
       this.submenu = null;
+      this.submenuTriggers = /* @__PURE__ */ new Map();
       this.detach = [];
       this.container = options.container;
       this.execute = options.execute;
@@ -4225,12 +4341,16 @@ ${runtime.error}`;
       const root = this.panel(owner);
       root.className = ROOT_CLASS;
       root.setAttribute("role", "menu");
+      const gutter = items.some((item) => !("group" in item) && item.checked !== void 0);
       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));
+        if ("group" in item) root.appendChild(this.groupEntry(owner, item, gutter));
+        else root.appendChild(this.commandEntry(owner, item.command, item.enabled, true, item.checked, gutter));
         const id = "group" in item ? item.group : item.command;
         if (SEPARATE_AFTER.has(id) && index < items.length - 1) root.appendChild(this.separator(owner));
       });
+      this.on(root, "contextmenu", (event) => {
+        event.preventDefault();
+      });
       this.container.appendChild(root);
       this.root = root;
       this.place(root, x, y);
@@ -4239,6 +4359,7 @@ ${runtime.error}`;
     hide() {
       for (const dispose of this.detach.splice(0)) dispose();
       this.submenu = null;
+      this.submenuTriggers.clear();
       this.root?.remove();
       this.root = null;
     }
@@ -4260,17 +4381,26 @@ ${runtime.error}`;
       });
       return rule;
     }
-    item(owner, text, enabled, arrow) {
+    item(owner, text, enabled, arrow, checked, gutter) {
       const button = owner.createElement("button");
       button.type = "button";
       button.className = ITEM_CLASS;
-      button.setAttribute("role", "menuitem");
+      button.setAttribute("role", checked === void 0 ? "menuitem" : "menuitemcheckbox");
+      if (checked !== void 0) button.setAttribute("aria-checked", String(checked));
       Object.assign(button.style, ITEM_STYLE);
       if (!enabled) {
         button.disabled = true;
         button.style.color = DISABLED_COLOR;
         button.style.cursor = "default";
       }
+      if (gutter) {
+        const tick = owner.createElement("span");
+        tick.className = CHECK_CLASS;
+        tick.textContent = checked === true ? "\u2713" : "";
+        tick.setAttribute("aria-hidden", "true");
+        Object.assign(tick.style, { flex: "none", width: "12px", textAlign: "center" });
+        button.appendChild(tick);
+      }
       const caption = owner.createElement("span");
       caption.className = LABEL_CLASS;
       caption.textContent = text;
@@ -4279,7 +4409,7 @@ ${runtime.error}`;
       if (arrow) {
         const chevron = owner.createElement("span");
         chevron.className = ARROW_CLASS;
-        chevron.textContent = "\u203A";
+        chevron.textContent = this.rtl() ? "\u2039" : "\u203A";
         chevron.setAttribute("aria-hidden", "true");
         Object.assign(chevron.style, { flex: "none", opacity: "0.7", fontSize: "14px" });
         button.appendChild(chevron);
@@ -4291,8 +4421,8 @@ ${runtime.error}`;
     // 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);
+    commandEntry(owner, command, enabled, closesSubmenu, checked, gutter) {
+      const button = this.item(owner, label(command), enabled, false, checked, gutter);
       this.on(button, "pointerenter", () => {
         if (closesSubmenu) this.closeSubmenu();
         if (enabled) button.style.background = HOVER_BACKGROUND;
@@ -4307,20 +4437,27 @@ ${runtime.error}`;
       });
       return button;
     }
-    groupEntry(owner, group) {
+    groupEntry(owner, group, gutter) {
       const host = owner.createElement("div");
       host.style.position = "relative";
-      const button = this.item(owner, label(group.group), group.enabled, true);
+      const button = this.item(owner, label(group.group), group.enabled, true, void 0, gutter);
+      button.setAttribute("aria-haspopup", "menu");
+      button.setAttribute("aria-expanded", "false");
       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));
+      panel.setAttribute("aria-label", label(group.group));
+      Object.assign(panel.style, { position: "absolute", insetInlineStart: "100%", top: "-5px", display: "none" });
+      const childGutter = group.commands.some((child) => child.checked !== void 0);
+      for (const child of group.commands) {
+        panel.appendChild(this.commandEntry(owner, child.command, child.enabled, false, child.checked, childGutter));
+      }
       host.appendChild(panel);
       const open = () => {
         if (!group.enabled) return;
         button.style.background = HOVER_BACKGROUND;
+        button.setAttribute("aria-expanded", "true");
         panel.style.display = "block";
         this.submenu = panel;
         this.keepOnScreen(panel);
@@ -4330,25 +4467,48 @@ ${runtime.error}`;
       this.on(host, "pointerleave", () => {
         if (this.submenu !== panel) return;
         button.style.background = "transparent";
+        button.setAttribute("aria-expanded", "false");
         panel.style.display = "none";
         this.submenu = null;
       });
+      this.submenuTriggers.set(panel, button);
       return host;
     }
     closeSubmenu() {
       if (this.submenu === null) return;
       this.submenu.style.display = "none";
+      this.submenuTriggers.get(this.submenu)?.setAttribute("aria-expanded", "false");
       this.submenu = null;
     }
+    /**
+     * The window the menu actually lives in. A component created from one document and mounted
+     * into another -- a same-origin iframe, a popup -- must be measured and dismissed against
+     * that document's window, not the one this module happened to be evaluated in.
+     */
+    get view() {
+      const owner = this.container.ownerDocument ?? (typeof document === "undefined" ? null : document);
+      const view = owner?.defaultView ?? (typeof window === "undefined" ? null : window);
+      return view ?? null;
+    }
+    // Reads the resolved writing direction so the submenu's side and its arrow agree with it.
+    rtl() {
+      if (typeof getComputedStyle !== "function") return false;
+      try {
+        return getComputedStyle(this.container).direction === "rtl";
+      } catch {
+        return false;
+      }
+    }
     /** 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 view = this.view;
+      if (typeof panel.getBoundingClientRect !== "function" || view === null) return;
       const box = panel.getBoundingClientRect();
-      if (box.right > window.innerWidth - 4) {
-        panel.style.left = "auto";
-        panel.style.right = "100%";
+      if (box.right > view.innerWidth - 4 || box.left < 4) {
+        panel.style.insetInlineStart = "auto";
+        panel.style.insetInlineEnd = "100%";
       }
-      if (box.bottom > window.innerHeight - 4) {
+      if (box.bottom > view.innerHeight - 4) {
         panel.style.top = "auto";
         panel.style.bottom = "-5px";
       }
@@ -4356,10 +4516,11 @@ ${runtime.error}`;
     place(root, x, y) {
       root.style.left = `${x}px`;
       root.style.top = `${y}px`;
-      if (typeof root.getBoundingClientRect !== "function" || typeof window === "undefined") return;
+      const view = this.view;
+      if (typeof root.getBoundingClientRect !== "function" || view === null) 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`;
+      if (box.right > view.innerWidth - 4) root.style.left = `${Math.max(4, x - box.width)}px`;
+      if (box.bottom > view.innerHeight - 4) root.style.top = `${Math.max(4, y - box.height)}px`;
     }
     watchForDismissal(owner) {
       const dismiss = () => this.hide();
@@ -4373,10 +4534,11 @@ ${runtime.error}`;
       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);
+      const view = this.view;
+      if (view !== null) {
+        this.on(view, "blur", dismiss);
+        this.on(view, "resize", dismiss);
+        this.on(view, "scroll", dismiss, true);
       }
     }
     on(target, type, listener, capture = false) {
@@ -4415,7 +4577,8 @@ ${runtime.error}`;
       if (set === void 0) {
         return;
       }
-      for (const handler of set) {
+      for (const handler of [...set]) {
+        if (!set.has(handler)) continue;
         try {
           handler(payload);
         } catch (err) {
@@ -4431,11 +4594,23 @@ ${runtime.error}`;
       return (this.handlers.get(event)?.size ?? 0) > 0;
     }
     clearEventHandlers() {
+      for (const set of this.handlers.values()) set.clear();
       this.handlers.clear();
     }
   };
 
   // src/diagram/types.ts
+  function copyJsonValue2(value) {
+    if (Array.isArray(value)) return value.map(copyJsonValue2);
+    if (value !== null && typeof value === "object") return copyJsonObject2(value);
+    return value;
+  }
+  function copyJsonObject2(value) {
+    if (value === void 0) return {};
+    const result = {};
+    for (const [key, item] of Object.entries(value)) setJsonKey(result, key, copyJsonValue2(item));
+    return result;
+  }
   var PortType = class {
     constructor(init) {
       this.name = init.name;
@@ -4473,7 +4648,7 @@ ${runtime.error}`;
       this.id = init.id;
       this.name = init.name;
       this.description = init.description ?? "";
-      this.groupName = init.groupName ?? "Common";
+      this.groupName = init.groupName ?? DEFAULT_GROUP_NAME;
       this.inPorts = (init.inPorts ?? []).map((p) => p instanceof Port ? p : new Port(p));
       this.outPorts = (init.outPorts ?? []).map((p) => p instanceof Port ? p : new Port(p));
       this.icon = init.icon ?? "";
@@ -4528,6 +4703,7 @@ ${runtime.error}`;
       });
     }
   };
+  var DEFAULT_GROUP_NAME = "Common";
   var Link = class {
     constructor(init) {
       this.id = init.id ?? "";
@@ -4535,7 +4711,7 @@ ${runtime.error}`;
       this.outPort = init.outPort;
       this.inNode = init.inNode;
       this.inPort = init.inPort;
-      this.metadata = init.metadata ?? {};
+      this.metadata = copyJsonObject2(init.metadata);
     }
   };
 
@@ -4549,9 +4725,13 @@ ${runtime.error}`;
     "open",
     "delete",
     { group: "export", commands: ["exportDocument", "exportPng", "exportSvg"] },
+    "overview",
     "properties",
     "help"
   ];
+  var CONTEXT_CHECKED = {
+    overview: (diagram) => diagram.getViewState().overviewVisible
+  };
   var StockSharpDiagram = class extends EventEmitter {
     constructor(options) {
       super();
@@ -4564,7 +4744,10 @@ ${runtime.error}`;
       this.destroyed = false;
       this.fullscreen = false;
       this.fullscreenButtonVisible = true;
-      this.fullscreenLabels = { enter: "Enter fullscreen", exit: "Exit fullscreen" };
+      // null means the host never named the button, so its wording comes from the shared bundle.
+      // Keeping the two apart is what lets an explicit label win while an untouched control still
+      // follows the page's language instead of being stuck in English.
+      this.fullscreenLabels = null;
       this.contextActions = new DiagramActionRegistry();
       this.contextMenu = null;
       this.div = options.div;
@@ -4579,11 +4762,15 @@ ${runtime.error}`;
         gridSize: options.gridSize
       });
       this.fullscreenButtonVisible = options.showFullscreenButton ?? true;
-      this.fullscreenLabels = options.fullscreenLabels ?? this.fullscreenLabels;
+      this.fullscreenLabels = options.fullscreenLabels ?? null;
       this.prepareFullscreenButtonHost();
       this.fullscreenButton = this.createFullscreenButton();
       this.updateFullscreenButton();
       this.setContextMenuEnabled(options.showContextMenu ?? true);
+      this.canvas.setHistoryShortcutHandler((direction) => {
+        if (direction === "undo") this.undo();
+        else this.redo();
+      });
       this.registerContextActions();
       this.bindCanvasEvents();
       this.disposables.push(this.catalog.on("portTypesChanged", () => this.applySocketTheme()));
@@ -4828,8 +5015,22 @@ ${runtime.error}`;
       this.fullscreenLabels = labels;
       this.updateFullscreenButton();
     }
+    /**
+     * Re-reads the shared bundle for text the control renders itself. Call it after changing
+     * the page language: the context menu is rebuilt on every open and needs nothing, but the
+     * fullscreen button is drawn once and would otherwise keep the old wording.
+     */
+    refreshLabels() {
+      this.updateFullscreenButton();
+    }
     getFullscreenLabels() {
-      return { ...this.fullscreenLabels };
+      return { ...this.resolveFullscreenLabels() };
+    }
+    resolveFullscreenLabels() {
+      return this.fullscreenLabels ?? {
+        enter: t("fullscreenEnter", "Enter fullscreen"),
+        exit: t("fullscreenExit", "Exit fullscreen")
+      };
     }
     /** Updates only the control's state after the host changed its own layout. */
     setFullscreenState(fullscreen) {
@@ -4954,10 +5155,14 @@ ${runtime.error}`;
     }
     getContextCommands() {
       const context = this.contextActionContext();
-      const state = (command) => ({
-        command,
-        enabled: this.contextActions.canExecute(command, context)
-      });
+      const state = (command) => {
+        const checked = CONTEXT_CHECKED[command];
+        return {
+          command,
+          enabled: this.contextActions.canExecute(command, context),
+          ...checked === void 0 ? {} : { checked: checked(this) }
+        };
+      };
       return CONTEXT_MENU.map((entry) => {
         if (typeof entry === "string") return state(entry);
         const commands = entry.commands.map(state);
@@ -5084,7 +5289,8 @@ ${runtime.error}`;
     }
     updateFullscreenButton() {
       const fullscreen = this.fullscreen;
-      const label2 = fullscreen ? this.fullscreenLabels.exit : this.fullscreenLabels.enter;
+      const labels = this.resolveFullscreenLabels();
+      const label2 = fullscreen ? labels.exit : labels.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 = label2;
@@ -5247,6 +5453,12 @@ ${runtime.error}`;
           canExecute: ({ document: document2 }) => document2.nodes.length > 0,
           execute: () => this.emit("exportRequested", { format: "svg" })
         },
+        // Always available: it shows the overview as readily as it hides it, and an empty
+        // diagram is exactly when someone may want the panel out of the way.
+        overview: {
+          canExecute: () => true,
+          execute: () => this.setOverviewVisible(!this.getViewState().overviewVisible)
+        },
         properties: {
           canExecute: ({ nodes }) => nodes.length > 0,
           execute: ({ nodes }) => this.emit("nodeProperties", { nodes })
@@ -5669,7 +5881,8 @@ ${runtime.error}`;
     }
   };
   function groupNameOf(node) {
-    return node.groupName.length > 0 ? node.groupName : "Common";
+    const group = node.groupName;
+    return group.length > 0 && group !== DEFAULT_GROUP_NAME ? group : t("paletteCommonGroup", DEFAULT_GROUP_NAME);
   }
   function normalizeTypeId(typeId) {
     return typeId.toLowerCase();
@@ -5687,12 +5900,43 @@ ${runtime.error}`;
   function iconUrl(name) {
     return name ? `/diagram-icons/${name}.svg` : "";
   }
-  function luminance(hex) {
-    const m = hex.match(/^#?([0-9a-fA-F]{6})$/);
-    if (m === null)
-      return 0;
-    const n2 = parseInt(m[1], 16);
-    return 0.299 * (n2 >> 16 & 255) + 0.587 * (n2 >> 8 & 255) + 0.114 * (n2 & 255);
+  var CSS_COLOR_KEYWORDS = {
+    white: [255, 255, 255],
+    black: [0, 0, 0],
+    transparent: [255, 255, 255]
+  };
+  function luminance(color) {
+    const value = color.trim().toLowerCase();
+    if (value === "")
+      return -1;
+    const keyword = CSS_COLOR_KEYWORDS[value];
+    if (keyword !== void 0)
+      return 0.299 * keyword[0] + 0.587 * keyword[1] + 0.114 * keyword[2];
+    const long = value.match(/^#?([0-9a-f]{6})$/);
+    if (long !== null) {
+      const n2 = parseInt(long[1], 16);
+      return 0.299 * (n2 >> 16 & 255) + 0.587 * (n2 >> 8 & 255) + 0.114 * (n2 & 255);
+    }
+    const short = value.match(/^#?([0-9a-f]{3})([0-9a-f])?$/);
+    if (short !== null) {
+      const [r, g, b] = [...short[1]].map((digit) => parseInt(digit + digit, 16));
+      return 0.299 * r + 0.587 * g + 0.114 * b;
+    }
+    const long8 = value.match(/^#?([0-9a-f]{6})[0-9a-f]{2}$/);
+    if (long8 !== null) {
+      const n2 = parseInt(long8[1], 16);
+      return 0.299 * (n2 >> 16 & 255) + 0.587 * (n2 >> 8 & 255) + 0.114 * (n2 & 255);
+    }
+    const rgb = value.match(/^rgba?\(([^)]+)\)$/);
+    if (rgb !== null) {
+      const parts = rgb[1].split(/[\s,/]+/).filter((part) => part !== "");
+      if (parts.length >= 3) {
+        const [r, g, b] = parts.slice(0, 3).map((part) => part.endsWith("%") ? parseFloat(part) / 100 * 255 : parseFloat(part));
+        if ([r, g, b].every((channel) => Number.isFinite(channel)))
+          return 0.299 * r + 0.587 * g + 0.114 * b;
+      }
+    }
+    return -1;
   }
   function makePort(p) {
     return new Port({
@@ -5947,6 +6191,7 @@ ${runtime.error}`;
         diagram.setTheme({
           diagramBackground: bg,
           gridColor,
+          // Unreadable colours keep the dark default rather than being treated as black.
           linkMaxLightness: luminance(bg) > 140 ? 0.42 : 1
         });
       };
@@ -5957,7 +6202,7 @@ ${runtime.error}`;
       diagram.setReadOnly(true);
       diagram.setLinkValidator(() => true);
       diagram.setOverviewVisible(false);
-      const missingTypeTemplate = div.dataset.diagramMissingElement ?? 'Element type "{typeId}" is missing from the palette.';
+      const missingTypeTemplate = div.dataset.diagramMissingElement ?? t("embedMissingElement", 'Element type "{typeId}" is missing from the palette.');
       const converted = toDiagramNodes(
         scheme,
         catalog,
@@ -6042,9 +6287,9 @@ ${runtime.error}`;
   function errorTexts(div) {
     const parts = (div.dataset.diagramErrors ?? "").split("|");
     return {
-      load: parts[0] || "Diagram source could not be loaded.",
-      empty: parts[1] || "Diagram is empty or malformed.",
-      draw: parts[2] || "Diagram could not be rendered."
+      load: parts[0] || t("embedErrorLoad", "Diagram source could not be loaded."),
+      empty: parts[1] || t("embedErrorEmpty", "Diagram is empty or malformed."),
+      draw: parts[2] || t("embedErrorDraw", "Diagram could not be rendered.")
     };
   }
   function note(div, message, revision) {
@@ -6107,16 +6352,25 @@ ${runtime.error}`;
     root.querySelectorAll(".ss-diagram-host").forEach((host) => {
       if (host.dataset.rendered === "1")
         return;
+      const started = (run) => {
+        host.dataset.rendered = "1";
+        void run.then(
+          (handle) => {
+            if (handle === null) delete host.dataset.rendered;
+          },
+          () => {
+            delete host.dataset.rendered;
+          }
+        );
+      };
       const src = host.dataset.diagramSrc;
       if (src) {
-        host.dataset.rendered = "1";
-        void renderFromSource(host, PALETTE_URL, src, options);
+        started(renderFromSource(host, PALETTE_URL, src, options));
         return;
       }
       const inline = host.querySelector('script[type="application/json"]');
       if (inline) {
-        host.dataset.rendered = "1";
-        void renderFromInline(host, PALETTE_URL, inline.textContent ?? "", options);
+        started(renderFromInline(host, PALETTE_URL, inline.textContent ?? "", options));
       }
     });
   }