@stocksharp/diagram 0.6.0 → 0.7.0

package/src/canvas-renderer.ts

@@ -8,7 +8,7 @@ import { SvgSurface } from './svg-surface.js';
 
 import { createDiagramDocument, parseDiagramDocument } from './core/document.js';
 import { DiagramCommandHistory } from './core/history.js';
-import { setJsonKey } from './core/json.js';
+import { getJsonKey, setJsonKey } from './core/json.js';
 import { toPortDynamicMode } from './core/model.js';
 import type {
     DiagramDocumentZone,
@@ -98,7 +98,10 @@ export type DiagramNodeSnapshot = DiagramNodeInit
 
 export interface DiagramSnapshot {
     nodes: DiagramNodeSnapshot[];
-    links: Array<Required<Pick<LinkInit, 'from' | 'fromPort' | 'to' | 'toPort'>>>;
+    // Endpoints alone made the snapshot lossy: a save()/load() round-trip dropped every link's
+    // identity, style and metadata, and the links carried in loadFinished / undoRequested /
+    // redoRequested arrived with an empty id, so selectLink(payload.link.id) matched nothing.
+    links: Array<Required<Pick<LinkInit, 'id' | 'from' | 'fromPort' | 'to' | 'toPort' | 'style'>> & Pick<LinkInit, 'metadata'>>;
 }
 
 export interface DiagramOptions {
@@ -581,6 +584,8 @@ export class Diagram {
     private introStart: number | null = null;
     private overviewVisible = true;
     private ovDragging = false;
+    private historyShortcut: (direction: 'undo' | 'redo') => void =
+        (direction) => { if (direction === 'undo') this.undo(); else this.redo(); };
     private ovGeo: { x: number; y: number; w: number; h: number; s: number; minX: number; minY: number } | null = null;
 
     private validator: LinkValidator | null = null;
@@ -588,11 +593,17 @@ export class Diagram {
 
     constructor(opts: DiagramOptions) {
         this.opts = opts;
+        // Same normalization setTypeColors applies, so a palette handed in at construction is
+        // keyed like one handed in later.
+        if (opts.typeColors !== undefined) 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(() => {
+            // The gated values, not the raw stack: setInteractionPermissions and setReadOnly
+            // already publish canUndo()/canRedo(), and a toolbar fed the raw pair enabled its
+            // Undo button for a call that undo() would refuse.
+            this.emit('undoStackChanged', { canUndo: this.canUndo(), canRedo: this.canRedo() });
         });
         this.canvas = document.createElement('canvas');
         this.canvas.style.display = 'block';
@@ -949,12 +960,21 @@ export class Diagram {
     }
     clear(): void {
         this.nodes = []; this.links = [];
+        // Zones belong to the document like everything else here. Leaving them behind meant a
+        // discarded strategy kept drawing its zones over the next one and, worse, saveDocument()
+        // wrote them into that unrelated strategy's file.
+        this.zones = [];
+        // Every other path that empties the selection announces it. Staying silent here left a
+        // host's property panel showing a node from the document that had just been thrown away.
+        const hadSelection = this.selectedNode !== null || this.selectedNodes.size > 0
+            || this.selectedLink !== null || this.selectedPort !== null;
         this.selectedNode = null; this.selectedNodes.clear(); this.selectedLink = null; this.selectedPort = null;
         this.documentMetadata = {};
         this.runtimeState = createDiagramRuntimeState();
         this.runtimePulse = 0;
         this.globalErrorFlashStart = null;
         this.history.clear();
+        if (hadSelection) this.emitSelectionChanged();
         this.emitRuntimeStateChanged();
     }
     relink(
@@ -1204,6 +1224,25 @@ export class Diagram {
         // Initial load is "model seed" — should NOT be undoable, and
         // shouldn't leave the user with 12 entries to Ctrl+Z through
         // before their stack reaches their first real action.
+        // Validate before applying anything. doAddNode returns silently on a duplicate id, so a
+        // second node with the same id simply vanished and every wire meant for it attached to the
+        // first -- a quietly miswired strategy. The link check used to sit mid-loop, which threw
+        // with the diagram already half loaded and no loadFinished.
+        const seenNodeIds = new Set<string>();
+        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 = new Set<string>();
+        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 });
@@ -1220,7 +1259,7 @@ export class Diagram {
             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 as unknown as JsonObject, node.id, state as unknown as JsonValue);
         }
         if (Object.keys(this.runtimeState.nodes).length > 0) this.emitRuntimeStateChanged();
         this.history.clear();
@@ -1231,7 +1270,15 @@ export class Diagram {
     save(): DiagramSnapshot {
         return {
             nodes: this.nodes.map((node) => node.toInit(false) as DiagramNodeSnapshot),
-            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),
+            })),
         };
     }
 
@@ -1303,7 +1350,18 @@ export class Diagram {
             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: ((direction: 'undo' | 'redo') => void) | null): void {
+        this.historyShortcut = handler ?? ((direction) => { if (direction === 'undo') this.undo(); else this.redo(); });
+    }
+
     setViewState(state: DiagramViewState): void {
+        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;
@@ -1327,6 +1385,11 @@ export class Diagram {
         }
 
         if (scope === 'viewport' && Object.keys(options).length === 0) {
+            // Mutations only schedule a repaint, so the bitmap on screen is still the previous
+            // frame until it lands. Copying it as-is handed back a picture of the state before the
+            // edit -- or a blank one right after construction -- while the very same call with any
+            // option took the redraw path and came out current.
+            if (this.drawScheduled) this.draw();
             const copy = document.createElement('canvas');
             copy.width = this.canvas.width;
             copy.height = this.canvas.height;
@@ -1357,6 +1420,9 @@ export class Diagram {
             offY: this.offY,
             overviewVisible: this.overviewVisible,
             background: this.opts.background,
+            // Drawing the overview recomputes this from the export frame. Left behind, the next
+            // click on the on-screen minimap panned to a point in the export's coordinates.
+            ovGeo: this.ovGeo,
         };
         try {
             this.ctx = outputContext;
@@ -1386,6 +1452,7 @@ export class Diagram {
             this.offY = previous.offY;
             this.overviewVisible = previous.overviewVisible;
             this.opts.background = previous.background;
+            this.ovGeo = previous.ovGeo;
         }
         return output;
     }
@@ -1456,10 +1523,19 @@ export class Diagram {
             offX: this.offX,
             offY: this.offY,
             overviewVisible: this.overviewVisible,
+            background: this.opts.background,
+            // Drawing the overview recomputes this from the export frame. Left behind, the next
+            // click on the on-screen minimap panned to a point in the export's coordinates.
+            ovGeo: this.ovGeo,
         };
 
         try {
             this.ctx = surface;
+            // draw() fills the frame with the theme background unconditionally, straight over the
+            // backdrop the surface was given -- so passing the override to SvgSurface alone left it
+            // invisible and the SVG disagreed with the PNG of the same options. takeScreenshot
+            // swaps the theme value for the duration of the export; this does the same.
+            if (options.background !== undefined) this.opts.background = options.background;
             this.width = width;
             this.height = height;
             // 1: an SVG has no device pixels to multiply by, and the viewBox carries the size.
@@ -1485,6 +1561,8 @@ export class Diagram {
             this.offX = previous.offX;
             this.offY = previous.offY;
             this.overviewVisible = previous.overviewVisible;
+            this.opts.background = previous.background;
+            this.ovGeo = previous.ovGeo;
         }
 
         return surface.toSvg();
@@ -1521,8 +1599,8 @@ export class Diagram {
                 .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 ?? '';
@@ -1558,8 +1636,10 @@ export class Diagram {
             : node?.outPorts.find((candidate) => candidate.id === portId);
         if (node === undefined || port === undefined) return false;
         const state = this.getRuntimeState();
-        const nodeState = state.nodes[nodeId] ?? createDiagramNodeRuntimeState();
-        state.nodes[nodeId] = nodeState;
+        // Node ids come from documents, so "__proto__" is reachable: a bare assignment there
+        // writes the prototype instead of creating an entry, and the next read of it throws.
+        const nodeState = getJsonKey(state.nodes, nodeId) ?? createDiagramNodeRuntimeState();
+        setJsonKey(state.nodes as unknown as JsonObject, nodeId, nodeState as unknown as JsonValue);
         const current = nodeState.ports[direction][portId] ?? createDiagramPortRuntimeState();
         nodeState.ports[direction][portId] = { ...current, ...patch };
         this.setRuntimeState(state);
@@ -1585,8 +1665,8 @@ export class Diagram {
                 : 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 as unknown as JsonObject, id, nodeState as unknown as JsonValue);
         // Only this kind's slot is written, so an error of the other kind that is
         // already on the node survives.
         if (message.length === 0) delete nodeState.errors[kind];
@@ -1605,7 +1685,7 @@ export class Diagram {
         }
         if (kind === undefined || kind === 'load') node.loadError = '';
         const state = this.getRuntimeState();
-        const nodeState = state.nodes[id];
+        const nodeState = getJsonKey(state.nodes, id);
         if (nodeState !== undefined) {
             if (kind === undefined || kind === 'runtime') delete nodeState.errors.runtime;
             if (kind === undefined || kind === 'load') delete nodeState.errors.load;
@@ -1626,6 +1706,9 @@ export class Diagram {
     }
 
     setZoom(scale: number): void {
+        // clamp() passes NaN straight through, and a NaN scale poisons offX/offY on the very next
+        // line -- after which hit-testing, drawing and saveViewState are all dead, permanently.
+        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;
@@ -1658,9 +1741,22 @@ export class Diagram {
         this.scheduleDraw();
     }
     setTypeColors(colors: Readonly<Record<string, string>>): void {
-        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.
+     */
+    private setTypeColorsInternal(colors: Readonly<Record<string, string>>): void {
+        const normalized: Record<string, string> = {};
+        for (const [type, color] of Object.entries(colors)) {
+            setJsonKey(normalized, normalizePortType(type), color);
+        }
+        this.opts.typeColors = normalized;
+    }
     setTheme(t: {
         background?: string;
         gridColor?: string;
@@ -1771,7 +1867,8 @@ export class Diagram {
         const light = maxL !== undefined && 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 !== undefined ? clampLightness(base, maxL) : base;
     }
     // Selection/hover accent. The dark-canvas blue washes out on a light canvas, so a light theme
@@ -1787,11 +1884,16 @@ export class Diagram {
 
     // ---- hit testing (world coords) ---------------------------------
     private portAt(wx: number, wy: number): { node: NodeModel; port: PortModel } | null {
+        // Walks front to back and stops at the first node whose BODY covers the point, so a socket
+        // hidden underneath a node drawn on top of it can no longer win the hit test. Without that
+        // stop, clicking the visible body of the front node selected the one behind it, and on an
+        // output socket started dragging a wire out of a port that is not on screen.
         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 };
             }
+            if (wx >= n.x && wx <= n.x + n.w && wy >= n.y && wy <= n.y + n.h) return null;
         }
         return null;
     }
@@ -2077,6 +2179,9 @@ export class Diagram {
                         fromPort: l.from.portId,
                         to: t,
                         toPort: l.to.portId,
+                        // The clipboard is built from saveDocument(), so it carries the style;
+                        // rebuilding without it silently turned every pasted dashed link solid.
+                        style: l.style,
                         metadata: l.metadata,
                     });
             }
@@ -2163,14 +2268,21 @@ export class Diagram {
             // move-beyond-tolerance, pointerup, or any other gesture.
             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);
+            // Touch only. A mouse has a button for this, and arming the timer for it meant holding
+            // the left button still -- which is what positioning a node precisely looks like --
+            // opened the menu after half a second and wiped the drag in progress: the pixels the
+            // node had already travelled stayed, but never reached history, so Ctrl+Z could not
+            // take them back.
+            if (e.pointerType !== 'mouse') {
+                this.lpStart = { sx: e.clientX, sy: e.clientY, px: e.clientX, py: e.clientY };
+                const downSx = e.clientX, downSy = e.clientY;
+                const r0 = this.canvas.getBoundingClientRect();
+                const localSx = downSx - r0.left, localSy = downSy - r0.top;
+                this.lpTimer = setTimeout(() => {
+                    this.lpTimer = null;
+                    this.fireContextMenu(localSx, localSy, downSx, downSy);
+                }, this.lpDelayMs);
+            }
             this.canvas.focus();
             const [sx, sy] = localXY(e);
             if (this.ovHit(sx, sy)) { this.ovDragging = true; this.ovPanTo(sx, sy); return; }
@@ -2249,10 +2361,12 @@ export class Diagram {
             if (node !== null) {
                 const add = e.shiftKey || e.ctrlKey || e.metaKey;
                 if (this.permissions.select) {
-                    if (add) { this.toggleSelect(node); return; }
+                    // A right-click still selects what it landed on, so the menu that follows acts
+                    // on the node under the cursor -- but only the primary button may drag it.
+                    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];
@@ -2267,6 +2381,9 @@ export class Diagram {
                 if (this.permissions.select) this.selectLink(link);
                 return;
             }
+            // A secondary button on empty canvas is on its way to the context menu: it must not
+            // clear the selection the menu is about to act on, nor start a rubber band.
+            if (e.button !== 0 && e.button !== 1) return;
             // empty space: middle-button / Ctrl / Alt / touch = pan;
             // else rubber-band select. Touch always pans because mobile
             // users can't hold modifier keys and rubber-band drag-select
@@ -2399,7 +2516,13 @@ export class Diagram {
                 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 });
+                // Announce the same set the undo step records. Emitting for every node the drag
+                // touched reported a move for a plain selection click -- one per selected node --
+                // and a host doing dirty tracking marked the strategy modified for nothing.
+                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) {
@@ -2488,6 +2611,9 @@ export class Diagram {
             const [sx, sy] = localXY(e);
             const [wx, wy] = this.toWorld(sx, sy);
             if (this.portAt(wx, wy) !== null) return;
+            // A wire is something, not empty canvas: without this the zoomToFit fallback below
+            // threw away the zoom and pan the user had set, on a double click aimed at a link.
+            if (this.linkAt(wx, wy) !== null) return;
             const node = this.nodeAt(wx, wy);
             if (node !== null) {
                 if (this.permissions.inspect && node.openAction.length > 0) {
@@ -2529,6 +2655,10 @@ export class Diagram {
                 this.dragNode = null; this.dragStart = [];
                 this.panning = false; this.rubber = null; this.linking = null;
                 this.relinking = null; this.relinkCandidate = null;
+                // The two the block used to miss: a finger that started on the minimap kept
+                // panning the viewport against the pinch, and a cancelled wire drag left its
+                // magnet highlight burned onto a socket until something else redrew it.
+                this.ovDragging = false; this.linkSnap = null;
             }
         }, { passive: false });
         this.listen(this.canvas, 'touchmove', (e) => {
@@ -2575,10 +2705,13 @@ export class Diagram {
                 e.preventDefault(); this.cutSelection(); return;
             }
             if (mod && this.permissions.select && e.code === 'KeyA') { e.preventDefault(); this.setSelection(this.nodes.slice()); return; }
-            // Ctrl+Z = undo; Ctrl+Y or Ctrl+Shift+Z = redo.
-            if (mod && this.permissions.history && e.code === 'KeyZ' && !e.shiftKey) { e.preventDefault(); this.undo(); return; }
+            // Ctrl+Z = undo; Ctrl+Y or Ctrl+Shift+Z = redo. Routed through a handler rather than
+            // called directly: a component wrapping this renderer has its own rules about when
+            // history may run and its own events to announce it, and the keyboard must obey them
+            // like every other entry point.
+            if (mod && this.permissions.history && e.code === 'KeyZ' && !e.shiftKey) { e.preventDefault(); this.historyShortcut('undo'); return; }
             if (mod && this.permissions.history && (e.code === 'KeyY' || (e.code === 'KeyZ' && e.shiftKey))) {
-                e.preventDefault(); this.redo(); return;
+                e.preventDefault(); this.historyShortcut('redo'); return;
             }
         });
     }
@@ -2663,18 +2796,24 @@ export class Diagram {
         }
         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((n) => n.errorFlashStart !== null)))
             this.scheduleDraw();   // keep entrance / error feedback animating
     }
-    private drawGlobalError(): void {
+    /**
+     * `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.
+     */
+    private drawGlobalError(transient: boolean): void {
         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;
@@ -2842,7 +2981,7 @@ export class Diagram {
         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] : undefined;
+        const runtime = options.runtime ? getJsonKey(this.runtimeState.nodes, n.id) : undefined;
         const active = options.runtime
             && (this.runtimeState.activeNodeId === n.id || runtime?.active === true);
         roundRect(ctx, n.x, n.y, n.w, n.h, 6);
@@ -2934,7 +3073,7 @@ export class Diagram {
         }
     }
     private portRuntimeState(node: NodeModel, port: PortModel): DiagramPortRuntimeState | null {
-        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

package/src/core/document.ts

@@ -76,15 +76,8 @@ export function createDiagramDocument(input: DiagramDocumentInput = {}): Diagram
         return normalizeLink({ ...link, id }, `$.links[${index}]`);
     });
     const rawZones = mapElements(input.zones, '$.zones');
-    const usedZoneIds = new Set<string>();
-    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 document: DiagramDocument = {
         version: DIAGRAM_DOCUMENT_VERSION,
@@ -224,8 +217,9 @@ function normalizeZone(value: unknown, path: string): DiagramDocumentZone {
     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 === undefined || input.color === null ? '' : requireString(input.color, `${path}.color`),
@@ -236,7 +230,9 @@ function normalizeZone(value: unknown, path: string): DiagramDocumentZone {
 // A zone with no area cannot be pointed at, and a negative one paints outside itself, so the
 // size is refused rather than clamped - a caller that computed it wrong wants to hear about it.
 function requirePositiveSize(value: unknown, path: string): number {
-    const size = requireNumber(value, path);
+    // Finite, not merely positive: Infinity satisfies `> 0` and then serializes to null, so the
+    // document would save without complaint and fail to parse back.
+    const size = requireFiniteNumber(value, path);
     if (!(size > 0)) throw new DiagramDocumentError('size must be greater than zero', path);
     return size;
 }
@@ -325,6 +321,21 @@ function parseEndpoint(value: unknown, path: string): DiagramDocumentEndpoint {
     };
 }
 
+/**
+ * Zone ids have to be unique wherever a document comes from. Keeping the check here, rather than
+ * inside createDiagramDocument alone, is what stops a file being loadable and unsaveable: the
+ * parser used to let a duplicate through and the very next saveDocument() -- which rebuilds
+ * through createDiagramDocument -- threw on it.
+ */
+function validateUniqueZones(zones: readonly DiagramDocumentZone[]): void {
+    const seen = new Set<string>();
+    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(document: DiagramDocument): void {
     const nodes = new Map<string, DiagramDocumentNode>();
     for (let index = 0; index < document.nodes.length; index++) {
@@ -356,6 +367,8 @@ function validateDocument(document: DiagramDocument): void {
         if (endpoints.has(key)) throw new DiagramDocumentError('duplicate link endpoints', path);
         endpoints.add(key);
     }
+
+    validateUniqueZones(document.zones);
 }
 
 function validateUniquePorts(ports: readonly DiagramDocumentPort[], path: string): void {

package/src/core/history.ts

@@ -79,7 +79,18 @@ export class DiagramCommandHistory {
         }
     }
 
+    private assertNoOpenTransaction(operation: string): void {
+        if (this.transactions.length > 0) {
+            throw new Error(`Cannot ${operation} command history inside a transaction.`);
+        }
+    }
+
     undo(): boolean {
+        // Same guard clear() already has: running history while a transaction is open takes a
+        // committed step out from under the frame being built and breaks the LIFO invariant the
+        // stacks rely on. Reachable synchronously from a host handler for an event emitted from
+        // inside a transaction, so it is not a theoretical misuse.
+        this.assertNoOpenTransaction('undo');
         const command = this.undoCommands.pop();
         if (command === undefined) return false;
         try {
@@ -94,6 +105,7 @@ export class DiagramCommandHistory {
     }
 
     redo(): boolean {
+        this.assertNoOpenTransaction('redo');
         const command = this.redoCommands.pop();
         if (command === undefined) return false;
         try {
@@ -108,9 +120,7 @@ export class DiagramCommandHistory {
     }
 
     clear(): void {
-        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();

package/src/core/json.ts

@@ -14,3 +14,14 @@ export function setJsonKey<T>(target: Record<string, T>, key: string, value: T):
     }
     target[key] = value;
 }
+
+/**
+ * The read that matches setJsonKey.
+ *
+ * `target[key]` for `__proto__` answers with the inherited prototype rather than the entry, so a
+ * plain lookup reports a value for a key that was never stored -- and callers that fall back on
+ * `?? create()` never do, then use `Object.prototype` as if it were their own record.
+ */
+export function getJsonKey<T>(target: Record<string, T>, key: string): T | undefined {
+    return Object.prototype.hasOwnProperty.call(target, key) ? target[key] : undefined;
+}