@stocksharp/diagram 0.6.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
             });
         }
@@ -2883,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)) {
@@ -2960,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];
@@ -2981,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);
@@ -3104,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) {
@@ -3191,6 +3285,7 @@ var SSDiagram = (() => {
         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) {
@@ -3233,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) => {
@@ -3293,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;
         }
       });
@@ -3376,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;
@@ -3569,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;
@@ -3657,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
@@ -4245,6 +4348,9 @@ ${runtime.error}`;
         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);
@@ -4374,6 +4480,16 @@ ${runtime.error}`;
       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;
@@ -4385,13 +4501,14 @@ ${runtime.error}`;
     }
     /** 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 || box.left < 4) {
+      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";
       }
@@ -4399,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();
@@ -4416,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) {
@@ -4458,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) {
@@ -4474,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;
@@ -4516,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 ?? "";
@@ -4571,6 +4703,7 @@ ${runtime.error}`;
       });
     }
   };
+  var DEFAULT_GROUP_NAME = "Common";
   var Link = class {
     constructor(init) {
       this.id = init.id ?? "";
@@ -4578,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);
     }
   };
 
@@ -4634,6 +4767,10 @@ ${runtime.error}`;
       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()));
@@ -5744,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();
@@ -5762,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({
@@ -6022,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
         });
       };
@@ -6182,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));
       }
     });
   }