@stocksharp/diagram 0.2.3 → 0.4.0

package/dist/ssdiagram.js

@@ -37,6 +37,7 @@ var SSDiagram = (() => {
     StockSharpDiagram: () => StockSharpDiagram,
     StockSharpPalette: () => StockSharpPalette,
     cloneDiagramDocument: () => cloneDiagramDocument,
+    cloneDiagramNodeErrors: () => cloneDiagramNodeErrors,
     cloneDiagramRuntimeState: () => cloneDiagramRuntimeState,
     createDiagramDocument: () => createDiagramDocument,
     createDiagramNodeRuntimeState: () => createDiagramNodeRuntimeState,
@@ -58,7 +59,19 @@ var SSDiagram = (() => {
     serializeDiagramViewState: () => serializeDiagramViewState
   });
 
+  // src/core/json.ts
+  function setJsonKey(target, key, value) {
+    if (key === "__proto__") {
+      Object.defineProperty(target, key, { value, enumerable: true, writable: true, configurable: true });
+      return;
+    }
+    target[key] = value;
+  }
+
   // src/core/model.ts
+  function toPortDynamicMode(value) {
+    return value === "manual" || value === "onConnect" ? value : "";
+  }
   var DIAGRAM_DOCUMENT_VERSION = 1;
 
   // src/core/document.ts
@@ -70,32 +83,47 @@ var SSDiagram = (() => {
     }
   };
   function createDiagramDocument(input = {}) {
-    const nodes = (input.nodes ?? []).map((node, index) => normalizeNode(node, `$.nodes[${index}]`));
+    const rawNodes = mapElements(input.nodes, "$.nodes");
+    const rawLinks = mapElements(input.links, "$.links");
+    const nodes = rawNodes.map((node, index) => normalizeNode(node, `$.nodes[${index}]`));
     const usedLinkIds = /* @__PURE__ */ new Set();
-    for (let index = 0; index < (input.links ?? []).length; index++) {
-      const id = input.links?.[index].id;
-      if (id === void 0) continue;
-      requireIdentifier(id, `$.links[${index}].id`);
+    for (let index = 0; index < rawLinks.length; index++) {
+      const raw = rawLinks[index].id;
+      if (raw === void 0) continue;
+      const id = requireIdentifier(raw, `$.links[${index}].id`);
       if (usedLinkIds.has(id)) {
         throw new DiagramDocumentError(`duplicate link id "${id}"`, `$.links[${index}].id`);
       }
       usedLinkIds.add(id);
     }
     let sequence = 1;
-    const links = (input.links ?? []).map((link, index) => {
+    const links = rawLinks.map((link, index) => {
       let id = link.id;
       if (id === void 0) {
+        let generated;
         do
-          id = `link_${sequence++}`;
-        while (usedLinkIds.has(id));
-        usedLinkIds.add(id);
+          generated = `link_${sequence++}`;
+        while (usedLinkIds.has(generated));
+        usedLinkIds.add(generated);
+        id = generated;
       }
       return normalizeLink({ ...link, id }, `$.links[${index}]`);
     });
+    const rawZones = mapElements(input.zones, "$.zones");
+    const 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 document2 = {
       version: DIAGRAM_DOCUMENT_VERSION,
       nodes,
       links,
+      zones,
       metadata: cloneJsonObject(input.metadata ?? {}, "$.metadata")
     };
     validateDocument(document2);
@@ -117,7 +145,7 @@ var SSDiagram = (() => {
         throw new DiagramDocumentError(reason);
       }
     }
-    const root = requireObject(value, "$");
+    const root = requireStructure(value, "$");
     const version = requireNumber(root.version, "$.version");
     if (version !== DIAGRAM_DOCUMENT_VERSION) {
       throw new DiagramDocumentError(`unsupported document version ${version}`, "$.version");
@@ -126,12 +154,16 @@ var SSDiagram = (() => {
       version: DIAGRAM_DOCUMENT_VERSION,
       nodes: requireArray(root.nodes, "$.nodes").map((node, index) => parseNode(node, `$.nodes[${index}]`)),
       links: requireArray(root.links, "$.links").map((link, index) => parseLink(link, `$.links[${index}]`)),
+      // Zones arrived after the first documents were written, so their absence is not a fault:
+      // an older file simply has none, and reading it must not need a migration step.
+      zones: root.zones === void 0 || root.zones === null ? [] : requireArray(root.zones, "$.zones").map((zone, index) => normalizeZone(zone, `$.zones[${index}]`)),
       metadata: cloneJsonObject(root.metadata, "$.metadata")
     };
     validateDocument(document2);
     return document2;
   }
-  function normalizeNode(input, path) {
+  function normalizeNode(value, path) {
+    const input = requireStructure(value, path);
     const id = requireIdentifier(input.id, `${path}.id`);
     return {
       id,
@@ -146,28 +178,30 @@ var SSDiagram = (() => {
       icon: requireString(input.icon ?? "", `${path}.icon`),
       message: requireString(input.message ?? "", `${path}.message`),
       openAction: requireString(input.openAction ?? "", `${path}.openAction`),
-      inPorts: (input.inPorts ?? []).map((port, index) => normalizePort(port, `${path}.inPorts[${index}]`)),
-      outPorts: (input.outPorts ?? []).map((port, index) => normalizePort(port, `${path}.outPorts[${index}]`)),
-      parameters: (input.parameters ?? []).map((parameter, index) => normalizeParameter(parameter, `${path}.parameters[${index}]`)),
+      inPorts: mapElements(input.inPorts, `${path}.inPorts`).map((port, index) => normalizePort(port, `${path}.inPorts[${index}]`)),
+      outPorts: mapElements(input.outPorts, `${path}.outPorts`).map((port, index) => normalizePort(port, `${path}.outPorts[${index}]`)),
+      parameters: mapElements(input.parameters, `${path}.parameters`).map((parameter, index) => normalizeParameter(parameter, `${path}.parameters[${index}]`)),
       paramValues: cloneStringRecord(input.paramValues ?? {}, `${path}.paramValues`),
       metadata: cloneJsonObject(input.metadata ?? {}, `${path}.metadata`)
     };
   }
-  function normalizePort(input, path) {
+  function normalizePort(value, path) {
+    const input = requireStructure(value, path);
     return {
       id: requireIdentifier(input.id, `${path}.id`),
       name: requireString(input.name, `${path}.name`),
       description: requireString(input.description ?? "", `${path}.description`),
       type: requireString(input.type ?? "", `${path}.type`),
       maxLinks: requireNonNegativeInteger(input.maxLinks ?? 0, `${path}.maxLinks`),
-      availableTypes: (input.availableTypes ?? []).map((type, index) => requireString(type, `${path}.availableTypes[${index}]`)),
+      availableTypes: requireArray(input.availableTypes ?? [], `${path}.availableTypes`).map((type, index) => requireString(type, `${path}.availableTypes[${index}]`)),
       isDynamic: requireBoolean(input.isDynamic ?? false, `${path}.isDynamic`),
-      dynamicMode: requireString(input.dynamicMode ?? "", `${path}.dynamicMode`),
+      dynamicMode: requirePortDynamicMode(input.dynamicMode ?? "", `${path}.dynamicMode`),
       isSibling: requireBoolean(input.isSibling ?? false, `${path}.isSibling`),
       metadata: cloneJsonObject(input.metadata ?? {}, `${path}.metadata`)
     };
   }
-  function normalizeParameter(input, path) {
+  function normalizeParameter(value, path) {
+    const input = requireStructure(value, path);
     return {
       name: requireIdentifier(input.name, `${path}.name`),
       displayName: requireString(input.displayName, `${path}.displayName`),
@@ -183,22 +217,50 @@ var SSDiagram = (() => {
       editorType: requireString(input.editorType, `${path}.editorType`)
     };
   }
-  function normalizeLink(input, path) {
+  function normalizeLink(value, path) {
+    const input = requireStructure(value, path);
     return {
       id: requireIdentifier(input.id, `${path}.id`),
       from: normalizeEndpoint(input.from, `${path}.from`),
       to: normalizeEndpoint(input.to, `${path}.to`),
+      style: requireLinkStyle(input.style, `${path}.style`),
       metadata: cloneJsonObject(input.metadata ?? {}, `${path}.metadata`)
     };
   }
-  function normalizeEndpoint(input, path) {
+  function requireLinkStyle(value, path) {
+    if (value === void 0 || value === null) return "solid";
+    if (value !== "solid" && value !== "dashed") {
+      throw new DiagramDocumentError(`unknown link style "${String(value)}"`, path);
+    }
+    return value;
+  }
+  function normalizeZone(value, path) {
+    const input = requireStructure(value, path);
+    return {
+      id: requireIdentifier(input.id, `${path}.id`),
+      name: requireString(input.name, `${path}.name`),
+      x: requireNumber(input.x, `${path}.x`),
+      y: requireNumber(input.y, `${path}.y`),
+      width: requirePositiveSize(input.width, `${path}.width`),
+      height: requirePositiveSize(input.height, `${path}.height`),
+      color: input.color === void 0 || input.color === null ? "" : requireString(input.color, `${path}.color`),
+      metadata: cloneJsonObject(input.metadata ?? {}, `${path}.metadata`)
+    };
+  }
+  function requirePositiveSize(value, path) {
+    const size = requireNumber(value, path);
+    if (!(size > 0)) throw new DiagramDocumentError("size must be greater than zero", path);
+    return size;
+  }
+  function normalizeEndpoint(value, path) {
+    const input = requireStructure(value, path);
     return {
       nodeId: requireIdentifier(input.nodeId, `${path}.nodeId`),
       portId: requireIdentifier(input.portId, `${path}.portId`)
     };
   }
   function parseNode(value, path) {
-    const node = requireObject(value, path);
+    const node = requireStructure(value, path);
     return normalizeNode({
       id: requireString(node.id, `${path}.id`),
       typeId: requireString(node.typeId, `${path}.typeId`),
@@ -220,7 +282,7 @@ var SSDiagram = (() => {
     }, path);
   }
   function parsePort(value, path) {
-    const port = requireObject(value, path);
+    const port = requireStructure(value, path);
     return normalizePort({
       id: requireString(port.id, `${path}.id`),
       name: requireString(port.name, `${path}.name`),
@@ -229,13 +291,13 @@ var SSDiagram = (() => {
       maxLinks: requireNumber(port.maxLinks, `${path}.maxLinks`),
       availableTypes: requireArray(port.availableTypes, `${path}.availableTypes`).map((type, index) => requireString(type, `${path}.availableTypes[${index}]`)),
       isDynamic: requireBoolean(port.isDynamic, `${path}.isDynamic`),
-      dynamicMode: requireString(port.dynamicMode, `${path}.dynamicMode`),
+      dynamicMode: requirePortDynamicMode(port.dynamicMode, `${path}.dynamicMode`),
       isSibling: requireBoolean(port.isSibling, `${path}.isSibling`),
       metadata: cloneJsonObject(port.metadata, `${path}.metadata`)
     }, path);
   }
   function parseParameter(value, path) {
-    const parameter = requireObject(value, path);
+    const parameter = requireStructure(value, path);
     return normalizeParameter({
       name: requireString(parameter.name, `${path}.name`),
       displayName: requireString(parameter.displayName, `${path}.displayName`),
@@ -252,16 +314,17 @@ var SSDiagram = (() => {
     }, path);
   }
   function parseLink(value, path) {
-    const link = requireObject(value, path);
+    const link = requireStructure(value, path);
     return normalizeLink({
       id: requireString(link.id, `${path}.id`),
       from: parseEndpoint(link.from, `${path}.from`),
       to: parseEndpoint(link.to, `${path}.to`),
+      style: link.style === void 0 ? void 0 : requireLinkStyle(link.style, `${path}.style`),
       metadata: cloneJsonObject(link.metadata, `${path}.metadata`)
     }, path);
   }
   function parseEndpoint(value, path) {
-    const endpoint = requireObject(value, path);
+    const endpoint = requireStructure(value, path);
     return {
       nodeId: requireIdentifier(endpoint.nodeId, `${path}.nodeId`),
       portId: requireIdentifier(endpoint.portId, `${path}.portId`)
@@ -309,7 +372,7 @@ var SSDiagram = (() => {
   function cloneStringRecord(value, path) {
     const object = requireObject(value, path);
     const result = {};
-    for (const [key, item] of Object.entries(object)) result[key] = requireString(item, `${path}.${key}`);
+    for (const [key, item] of Object.entries(object)) setJsonKey(result, key, requireString(item, `${path}.${key}`));
     return result;
   }
   function cloneJsonObject(value, path, ancestors = /* @__PURE__ */ new WeakSet()) {
@@ -319,7 +382,7 @@ var SSDiagram = (() => {
     const result = {};
     try {
       for (const [key, item] of Object.entries(object)) {
-        result[key] = cloneJsonValue(item, `${path}.${key}`, ancestors);
+        setJsonKey(result, key, cloneJsonValue(item, `${path}.${key}`, ancestors));
       }
     } finally {
       ancestors.delete(object);
@@ -341,6 +404,12 @@ var SSDiagram = (() => {
     if (isObject(value)) return cloneJsonObject(value, path, ancestors);
     throw new DiagramDocumentError("expected a JSON value", path);
   }
+  function requireStructure(value, path) {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+      throw new DiagramDocumentError("expected an object", path);
+    }
+    return value;
+  }
   function requireObject(value, path) {
     if (!isObject(value)) throw new DiagramDocumentError("expected an object", path);
     return value;
@@ -350,6 +419,13 @@ var SSDiagram = (() => {
     const prototype = Object.getPrototypeOf(value);
     return prototype === Object.prototype || prototype === null;
   }
+  function mapElements(value, path) {
+    if (value === void 0 || value === null) return [];
+    return Array.from(
+      requireArray(value, path),
+      (element, index) => requireStructure(element, `${path}[${index}]`)
+    );
+  }
   function requireArray(value, path) {
     if (!Array.isArray(value)) throw new DiagramDocumentError("expected an array", path);
     return value;
@@ -358,6 +434,10 @@ var SSDiagram = (() => {
     if (typeof value !== "string") throw new DiagramDocumentError("expected a string", path);
     return value;
   }
+  function requirePortDynamicMode(value, path) {
+    const mode = requireString(value, path);
+    return toPortDynamicMode(mode);
+  }
   function requireIdentifier(value, path) {
     const id = requireString(value, path);
     if (id.trim().length === 0) throw new DiagramDocumentError("identifier cannot be empty", path);
@@ -399,6 +479,24 @@ var SSDiagram = (() => {
         if (this.actions.get(action.id) === action) this.actions.delete(action.id);
       };
     }
+    /**
+     * Registers one action per id from a table keyed by TId, in key order.
+     * Because the table is a total Record, adding a member to TId without adding
+     * its action stops compiling instead of producing a command that silently
+     * does nothing.
+     */
+    registerAll(actions) {
+      const ids = Object.keys(actions);
+      const disposers = ids.map((id) => {
+        const action = actions[id];
+        return this.register({
+          id,
+          canExecute: (context) => action.canExecute(context),
+          execute: (context) => action.execute(context)
+        });
+      });
+      return () => disposers.forEach((dispose) => dispose());
+    }
     get(id) {
       return this.actions.get(id) ?? null;
     }
@@ -554,7 +652,7 @@ var SSDiagram = (() => {
       globalError: state.globalError === null ? null : { ...state.globalError },
       nodes: Object.fromEntries(Object.entries(state.nodes).map(([nodeId, node]) => [nodeId, {
         active: node.active,
-        error: node.error === null ? null : { ...node.error },
+        errors: cloneDiagramNodeErrors(node.errors),
         ports: {
           in: Object.fromEntries(Object.entries(node.ports.in).map(([portId, port]) => [portId, { ...port }])),
           out: Object.fromEntries(Object.entries(node.ports.out).map(([portId, port]) => [portId, { ...port }]))
@@ -611,10 +709,17 @@ var SSDiagram = (() => {
   function createDiagramNodeRuntimeState() {
     return {
       active: false,
-      error: null,
+      errors: {},
       ports: { in: {}, out: {} }
     };
   }
+  function cloneDiagramNodeErrors(errors) {
+    const result = {};
+    if (errors === void 0 || errors === null) return result;
+    if (errors.runtime !== void 0) result.runtime = { ...errors.runtime };
+    if (errors.load !== void 0) result.load = { ...errors.load };
+    return result;
+  }
 
   // src/core/view-state.ts
   var DIAGRAM_VIEW_STATE_VERSION = 1;
@@ -699,7 +804,7 @@ var SSDiagram = (() => {
   function copyJsonObject(value) {
     if (value === void 0) return {};
     const result = {};
-    for (const [key, item] of Object.entries(value)) result[key] = copyJsonValue(item);
+    for (const [key, item] of Object.entries(value)) setJsonKey(result, key, copyJsonValue(item));
     return result;
   }
   function copyParameters(value) {
@@ -730,7 +835,7 @@ var SSDiagram = (() => {
       this.maxLinks = typeof init.maxLinks === "number" ? init.maxLinks : 0;
       this.availableTypes = [...init.availableTypes ?? []];
       this.isDynamic = init.isDynamic ?? false;
-      this.dynamicMode = init.dynamicMode ?? "";
+      this.dynamicMode = toPortDynamicMode(init.dynamicMode);
       this.isSibling = init.isSibling ?? false;
       this.metadata = copyJsonObject(init.metadata);
     }
@@ -805,11 +910,12 @@ var SSDiagram = (() => {
     }
   };
   var LinkModel = class {
-    constructor(from, fromPort, to, toPort, id = "", metadata) {
+    constructor(from, fromPort, to, toPort, id = "", metadata, style = "solid") {
       this.from = from;
       this.fromPort = fromPort;
       this.to = to;
       this.toPort = toPort;
+      this.style = style;
       this.id = id;
       this.metadata = copyJsonObject(metadata);
     }
@@ -823,6 +929,7 @@ var SSDiagram = (() => {
         fromPort: this.fromPort,
         to: this.to,
         toPort: this.toPort,
+        style: this.style,
         metadata: copyJsonObject(this.metadata)
       };
     }
@@ -872,6 +979,7 @@ var SSDiagram = (() => {
     constructor(opts) {
       this.nodes = [];
       this.links = [];
+      this.zones = [];
       this.idSeq = 1;
       this.linkSeq = 1;
       this.documentMetadata = {};
@@ -897,8 +1005,6 @@ var SSDiagram = (() => {
       this.dragStart = [];
       // group-drag origin
       this.dragAnchor = { wx: 0, wy: 0 };
-      this.dragDX = 0;
-      this.dragDY = 0;
       this.panning = false;
       this.panX = 0;
       this.panY = 0;
@@ -1203,7 +1309,7 @@ var SSDiagram = (() => {
         this.emit("linkValidation", { fromNode: fn, from: fp, toNode: tn, to: tp, ...validation });
         if (!validation.allowed) return false;
       }
-      const link = new LinkModel(init.from, init.fromPort, init.to, init.toPort, init.id ?? this.nextLinkId(), init.metadata);
+      const link = new LinkModel(init.from, init.fromPort, init.to, init.toPort, init.id ?? this.nextLinkId(), init.metadata, init.style ?? "solid");
       if (this.links.some((l) => l.id === link.id)) return false;
       this.links.splice(clamp(Math.trunc(index), 0, this.links.length), 0, link);
       this.emit("linkAdded", { link });
@@ -1482,7 +1588,7 @@ var SSDiagram = (() => {
     setNodeParamValue(nodeId, name, value) {
       return this.updateNodeState(nodeId, "set node parameter", (node) => {
         if (value === void 0) delete node.paramValues[name];
-        else node.paramValues[name] = value;
+        else setJsonKey(node.paramValues, name, value);
       });
     }
     setShowNodeMessages(show) {
@@ -1559,13 +1665,13 @@ var SSDiagram = (() => {
         if (this.links.some((existing) => existing.id === id)) {
           throw new Error(`ssdiagram: duplicate link id "${id}"`);
         }
-        const model = new LinkModel(link.from, link.fromPort, link.to, link.toPort, id, link.metadata);
+        const model = new LinkModel(link.from, link.fromPort, link.to, link.toPort, id, link.metadata, link.style ?? "solid");
         if (!this.links.some((existing) => existing.key() === model.key())) this.links.push(model);
       }
       for (const node of this.nodes) {
         if (node.loadError.length === 0) continue;
         const state = createDiagramNodeRuntimeState();
-        state.error = { kind: "load", message: node.loadError, pulse: ++this.runtimePulse };
+        state.errors.load = { kind: "load", message: node.loadError, pulse: ++this.runtimePulse };
         this.runtimeState.nodes[node.id] = state;
       }
       if (Object.keys(this.runtimeState.nodes).length > 0) this.emitRuntimeStateChanged();
@@ -1590,9 +1696,11 @@ var SSDiagram = (() => {
           fromPort: link.from.portId,
           to: link.to.nodeId,
           toPort: link.to.portId,
+          style: link.style,
           metadata: link.metadata
         }))
       );
+      this.zones = document2.zones.map((zone) => ({ ...zone, metadata: copyJsonObject(zone.metadata) }));
       this.documentMetadata = copyJsonObject(document2.metadata);
     }
     saveDocument() {
@@ -1602,8 +1710,10 @@ var SSDiagram = (() => {
           id: link.id,
           from: { nodeId: link.from, portId: link.fromPort },
           to: { nodeId: link.to, portId: link.toPort },
+          style: link.style,
           metadata: link.metadata
         })),
+        zones: this.zones.map((zone) => ({ ...zone, metadata: copyJsonObject(zone.metadata) })),
         metadata: this.documentMetadata
       });
     }
@@ -1765,15 +1875,16 @@ var SSDiagram = (() => {
       this.runtimePulse = Math.max(
         this.runtimePulse,
         this.runtimeState.globalError?.pulse ?? 0,
-        ...Object.values(this.runtimeState.nodes).map((node) => node.error?.pulse ?? 0)
+        ...Object.values(this.runtimeState.nodes).flatMap((node) => [node.errors.runtime?.pulse ?? 0, node.errors.load?.pulse ?? 0])
       );
       for (const node of this.nodes) {
-        const error = this.runtimeState.nodes[node.id]?.error ?? null;
-        const previousError = previous.nodes[node.id]?.error ?? null;
-        node.runtimeError = error?.kind === "runtime" ? error.message : "";
-        node.loadError = error?.kind === "load" ? error.message : "";
-        if (error?.kind === "runtime") {
-          if (previousError?.kind !== "runtime" || previousError.pulse !== error.pulse) {
+        const errors = this.runtimeState.nodes[node.id]?.errors;
+        const previousRuntime = previous.nodes[node.id]?.errors.runtime;
+        const runtimeError = errors?.runtime;
+        node.runtimeError = runtimeError?.message ?? "";
+        node.loadError = errors?.load?.message ?? "";
+        if (runtimeError !== void 0) {
+          if (previousRuntime === void 0 || previousRuntime.pulse !== runtimeError.pulse) {
             node.errorFlashStart = performance.now();
           }
         } else {
@@ -1822,7 +1933,9 @@ var SSDiagram = (() => {
       const state = this.getRuntimeState();
       const nodeState = state.nodes[id] ?? createDiagramNodeRuntimeState();
       state.nodes[id] = nodeState;
-      nodeState.error = message.length === 0 ? null : { kind, message, pulse: ++this.runtimePulse };
+      if (message.length === 0) delete nodeState.errors[kind];
+      else if (kind === "load") nodeState.errors.load = { kind, message, pulse: ++this.runtimePulse };
+      else nodeState.errors.runtime = { kind, message, pulse: ++this.runtimePulse };
       this.runtimeState = state;
       this.emitRuntimeStateChanged();
       return true;
@@ -1837,8 +1950,9 @@ var SSDiagram = (() => {
       if (kind === void 0 || kind === "load") node.loadError = "";
       const state = this.getRuntimeState();
       const nodeState = state.nodes[id];
-      if (nodeState !== void 0 && (kind === void 0 || nodeState.error?.kind === kind)) {
-        nodeState.error = node.runtimeError.length > 0 ? { kind: "runtime", message: node.runtimeError, pulse: ++this.runtimePulse } : node.loadError.length > 0 ? { kind: "load", message: node.loadError, pulse: ++this.runtimePulse } : null;
+      if (nodeState !== void 0) {
+        if (kind === void 0 || kind === "runtime") delete nodeState.errors.runtime;
+        if (kind === void 0 || kind === "load") delete nodeState.errors.load;
       }
       this.runtimeState = state;
       this.emitRuntimeStateChanged();
@@ -2830,6 +2944,7 @@ var SSDiagram = (() => {
         this.dpr * this.offX,
         this.dpr * (this.offY + introDy)
       );
+      this.drawZones();
       const prior = [];
       const hoveredNode = this.hoverPort?.node ?? this.hoverNode;
       for (const l of this.links) {
@@ -2842,7 +2957,7 @@ var SSDiagram = (() => {
         const color = state === "sel" ? this.selectionColor() : state === "hov" ? this.linkHoverColor() : baseColor;
         const width = state === "sel" ? 3 : state === "hov" ? 2.6 : 2;
         const pts = this.routeLink(a, b, /* @__PURE__ */ new Set([l.from, l.to]));
-        this.strokeRoute(pts, color, width, prior);
+        this.strokeRoute(pts, color, width, prior, l.style);
         this.drawArrow(pts, color);
         for (let k = 1; k < pts.length; k += 1) {
           const [x1, y1] = pts[k - 1];
@@ -2995,6 +3110,33 @@ ${runtime.error}`;
       }
       return lines.length > 0 ? lines : [""];
     }
+    drawZones() {
+      if (this.zones.length === 0) return;
+      const ctx = this.ctx;
+      for (const zone of this.zones) {
+        const tint = zone.color.length > 0 ? zone.color : this.opts.zoneColor ?? "#8a8f98";
+        ctx.save();
+        roundRect(ctx, zone.x, zone.y, zone.width, zone.height, 10);
+        ctx.globalAlpha = 0.12;
+        ctx.fillStyle = tint;
+        ctx.fill();
+        ctx.globalAlpha = 0.5;
+        ctx.setLineDash([10, 6]);
+        ctx.lineWidth = 1.5;
+        ctx.strokeStyle = tint;
+        ctx.stroke();
+        ctx.restore();
+        if (zone.name.length === 0) continue;
+        ctx.save();
+        ctx.globalAlpha = 0.75;
+        ctx.fillStyle = tint;
+        ctx.font = "600 12px Segoe UI, Tahoma, sans-serif";
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        ctx.fillText(zone.name, zone.x + 12, zone.y + 9, Math.max(0, zone.width - 24));
+        ctx.restore();
+      }
+    }
     drawGrid() {
       const ctx = this.ctx;
       const step = this.gridSize * this.scale;
@@ -3127,10 +3269,11 @@ ${runtime.error}`;
     // Symmetric jump-over: any segment of THIS link hops the perpendicular
     // segments of links drawn before it (H over earlier V, V over earlier
     // H). Exactly one bridge per real crossing, consistent everywhere.
-    strokeRoute(pts, color, width, prior) {
+    strokeRoute(pts, color, width, prior, style = "solid") {
       const ctx = this.ctx;
       ctx.strokeStyle = color;
       ctx.lineWidth = width;
+      if (style === "dashed") ctx.setLineDash([9, 6]);
       ctx.lineJoin = "miter";
       ctx.lineCap = "butt";
       ctx.beginPath();
@@ -3173,6 +3316,7 @@ ${runtime.error}`;
         }
       }
       ctx.stroke();
+      ctx.setLineDash([]);
     }
     drawArrow(pts, color) {
       const n = pts.length;
@@ -3634,6 +3778,13 @@ ${runtime.error}`;
         }
       }
     }
+    /**
+     * Whether anyone is listening. Lets a subject skip building a payload that
+     * is expensive to produce and that nothing would read.
+     */
+    hasHandlers(event) {
+      return (this.handlers.get(event)?.size ?? 0) > 0;
+    }
     clearEventHandlers() {
       this.handlers.clear();
     }
@@ -3655,7 +3806,7 @@ ${runtime.error}`;
       this.maxLinks = typeof init.maxLinks === "number" ? init.maxLinks : 0;
       this.availableTypes = init.availableTypes ?? [];
       this.isDynamic = init.isDynamic ?? false;
-      this.dynamicMode = init.dynamicMode ?? "";
+      this.dynamicMode = toPortDynamicMode(init.dynamicMode);
       this.isSibling = init.isSibling ?? false;
     }
     clone() {
@@ -3757,7 +3908,6 @@ ${runtime.error}`;
       this.fullscreen = false;
       this.fullscreenButtonVisible = true;
       this.fullscreenLabels = { enter: "Enter fullscreen", exit: "Exit fullscreen" };
-      this.linkValidator = null;
       this.contextActions = new DiagramActionRegistry();
       this.div = options.div;
       this.catalog = options.catalog;
@@ -3781,7 +3931,6 @@ ${runtime.error}`;
       this.updateZoomLabel();
     }
     setLinkValidator(validator) {
-      this.linkValidator = validator;
       this.canvas.setLinkValidator(validator === null ? null : ({ fromNode, fromPort, toNode, toPort }) => validator({
         fromNode: this.fromCanvasNode(fromNode),
         fromPort: this.fromCanvasPort(fromPort),
@@ -3855,21 +4004,25 @@ ${runtime.error}`;
     removeLink(link) {
       this.canvas.removeLink(this.toCanvasLink(link));
     }
+    /** False when nothing changed: no such node or port, or the edit was a no-op. */
     addPort(nodeId, direction, port) {
-      this.canvas.addPort(nodeId, direction, this.toCanvasPort(port));
+      return this.canvas.addPort(nodeId, direction, this.toCanvasPort(port));
     }
+    /** False when nothing changed: no such node or port, or the edit was a no-op. */
     removePort(nodeId, direction, portId) {
-      this.canvas.removePort(nodeId, direction, portId);
+      return this.canvas.removePort(nodeId, direction, portId);
     }
+    /** False when nothing changed: no such node or port, or the edit was a no-op. */
     updatePortType(nodeId, direction, portId, type) {
-      this.canvas.updatePortType(nodeId, direction, portId, type);
+      return this.canvas.updatePortType(nodeId, direction, portId, type);
     }
     updatePort(nodeId, direction, portId, patch) {
       return this.canvas.updatePort(nodeId, direction, portId, patch);
     }
+    /** False when nothing changed: no such node or port, or the edit was a no-op. */
     setNodePorts(nodeId, inPorts, outPorts) {
       const current = this.canvas.findNode(nodeId);
-      if (current === void 0) return;
+      if (current === void 0) return false;
       const convert = (port) => ({
         id: port.key,
         name: port.name,
@@ -3888,13 +4041,15 @@ ${runtime.error}`;
       for (const sibling of current.outPorts.filter((port) => port.isSibling)) {
         if (!nextOut.some((port) => port.id === sibling.id)) nextOut.push(sibling.toInit());
       }
-      this.canvas.setNodePorts(nodeId, nextIn, nextOut);
+      return this.canvas.setNodePorts(nodeId, nextIn, nextOut);
     }
+    /** False when nothing changed: no such node or port, or the edit was a no-op. */
     updateNode(nodeId, patch) {
-      this.canvas.updateNode(nodeId, patch);
+      return this.canvas.updateNode(nodeId, patch);
     }
+    /** False when nothing changed: no such node or port, or the edit was a no-op. */
     setNodeMessage(nodeId, message) {
-      this.canvas.updateNode(nodeId, { message });
+      return this.canvas.updateNode(nodeId, { message });
     }
     setNodeError(nodeId, message, options = {}) {
       return this.canvas.setNodeError(nodeId, message, options);
@@ -3920,11 +4075,13 @@ ${runtime.error}`;
     setGlobalError(message, kind = "invalid") {
       this.canvas.setGlobalError(message, kind);
     }
+    /** False when nothing changed: no such node or port, or the edit was a no-op. */
     setNodeParamValue(nodeId, paramName, value) {
-      this.canvas.setNodeParamValue(nodeId, paramName, value);
+      return this.canvas.setNodeParamValue(nodeId, paramName, value);
     }
+    /** False when nothing changed: no such node or port, or the edit was a no-op. */
     setNodeName(nodeId, value) {
-      this.canvas.updateNode(nodeId, { name: value });
+      return this.canvas.updateNode(nodeId, { name: value });
     }
     /** Groups host-driven document edits into one undo/redo operation. */
     transaction(label, action) {
@@ -4347,50 +4504,43 @@ ${runtime.error}`;
     }
     registerContextActions() {
       const permissions = () => this.canvas.getInteractionPermissions();
-      this.contextActions.register({
-        id: "undo",
-        canExecute: () => this.canUndo(),
-        execute: () => this.undo()
-      });
-      this.contextActions.register({
-        id: "redo",
-        canExecute: () => this.canRedo(),
-        execute: () => this.redo()
-      });
-      this.contextActions.register({
-        id: "cut",
-        canExecute: ({ nodes }) => nodes.length > 0 && permissions().copy && permissions().deleteSelection,
-        execute: () => this.cutSelection()
-      });
-      this.contextActions.register({
-        id: "copy",
-        canExecute: ({ nodes }) => nodes.length > 0 && permissions().copy,
-        execute: () => this.copySelection()
-      });
-      this.contextActions.register({
-        id: "paste",
-        canExecute: () => this.canvas.hasClipboard() && permissions().paste,
-        execute: () => this.pasteSelection()
-      });
-      this.contextActions.register({
-        id: "open",
-        canExecute: ({ nodes }) => nodes.length === 1 && nodes[0].openAction.length > 0,
-        execute: ({ nodes }) => this.emit("nodeOpen", { nodes })
-      });
-      this.contextActions.register({
-        id: "delete",
-        canExecute: ({ selection }) => permissions().deleteSelection && (selection.nodeIds.length > 0 || selection.linkIds.length > 0),
-        execute: () => this.canvas.deleteSelection()
-      });
-      this.contextActions.register({
-        id: "properties",
-        canExecute: ({ nodes }) => nodes.length > 0,
-        execute: ({ nodes }) => this.emit("nodeProperties", { nodes })
-      });
-      this.contextActions.register({
-        id: "help",
-        canExecute: ({ nodes }) => this.helpEnabled && nodes.length > 0,
-        execute: ({ nodes }) => this.emit("nodeHelp", { nodes })
+      this.contextActions.registerAll({
+        undo: {
+          canExecute: () => this.canUndo(),
+          execute: () => this.undo()
+        },
+        redo: {
+          canExecute: () => this.canRedo(),
+          execute: () => this.redo()
+        },
+        cut: {
+          canExecute: ({ nodes }) => nodes.length > 0 && permissions().copy && permissions().deleteSelection,
+          execute: () => this.cutSelection()
+        },
+        copy: {
+          canExecute: ({ nodes }) => nodes.length > 0 && permissions().copy,
+          execute: () => this.copySelection()
+        },
+        paste: {
+          canExecute: () => this.canvas.hasClipboard() && permissions().paste,
+          execute: () => this.pasteSelection()
+        },
+        open: {
+          canExecute: ({ nodes }) => nodes.length === 1 && nodes[0].openAction.length > 0,
+          execute: ({ nodes }) => this.emit("nodeOpen", { nodes })
+        },
+        delete: {
+          canExecute: ({ selection }) => permissions().deleteSelection && (selection.nodeIds.length > 0 || selection.linkIds.length > 0),
+          execute: () => this.canvas.deleteSelection()
+        },
+        properties: {
+          canExecute: ({ nodes }) => nodes.length > 0,
+          execute: ({ nodes }) => this.emit("nodeProperties", { nodes })
+        },
+        help: {
+          canExecute: ({ nodes }) => this.helpEnabled && nodes.length > 0,
+          execute: ({ nodes }) => this.emit("nodeHelp", { nodes })
+        }
       });
     }
     contextActionContext() {
@@ -4558,19 +4708,26 @@ ${runtime.error}`;
     // imported node ("Element type is missing from the palette"). Node.id
     // keeps its original casing so save/load round-trips unchanged.
     addNodeType(node) {
-      const n = node instanceof Node ? node : new Node(node);
+      const n = (node instanceof Node ? node : new Node(node)).clone();
       this.nodeTypes.set(n.id.toLowerCase(), n);
-      this.emit("nodeTypesChanged", this.getNodeTypes());
+      this.emitNodeTypesChanged();
     }
     removeNodeType(id) {
       this.nodeTypes.delete(id.toLowerCase());
-      this.emit("nodeTypesChanged", this.getNodeTypes());
+      this.emitNodeTypesChanged();
     }
     getNodeType(id) {
-      return this.nodeTypes.get(id.toLowerCase()) ?? null;
+      return this.nodeTypes.get(id.toLowerCase())?.clone() ?? null;
     }
     getNodeTypes() {
-      return Array.from(this.nodeTypes.values());
+      return Array.from(this.nodeTypes.values(), (node) => node.clone());
+    }
+    // Node definitions are mutable, so the payload has to be a copy of each one.
+    // Building a catalog is a loop of addNodeType calls, which would make that
+    // quadratic; skipping it while nobody listens keeps catalog construction --
+    // where no subscriber exists yet -- as cheap as it was.
+    emitNodeTypesChanged() {
+      if (this.hasHandlers("nodeTypesChanged")) this.emit("nodeTypesChanged", this.getNodeTypes());
     }
   };
 
@@ -4883,60 +5040,127 @@ ${runtime.error}`;
     });
     return { nodes, nodeErrors };
   }
+  function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+  function asRecord(value) {
+    return isRecord(value) ? value : void 0;
+  }
+  function asArray(value) {
+    return Array.isArray(value) ? value : [];
+  }
+  function asString(value) {
+    return typeof value === "string" ? value : "";
+  }
+  function asFiniteNumber(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : 0;
+  }
   function nodeName(node) {
-    const settings = node?.Settings;
-    const parameters = settings?.Parameters;
-    const nameParam = parameters?.Name;
-    const nameVal = nameParam?.Value;
-    if (typeof nameVal === "string" && nameVal.length > 0)
-      return nameVal;
-    if (typeof node?.Figure === "string" && node.Figure.length > 0)
-      return node.Figure;
-    return typeof node?.Key === "string" ? node.Key : "";
+    const named = asRecord(asRecord(asRecord(node.Settings)?.Parameters)?.Name)?.Value;
+    if (typeof named === "string" && named.length > 0)
+      return named;
+    const figure = asString(node.Figure);
+    return figure.length > 0 ? figure : asString(node.Key);
   }
   function parseRawScheme(raw) {
     const nodes = [];
     const links = [];
-    const root = raw;
-    const content = root?.Content;
-    const value = content?.Value;
-    const scheme = value?.Scheme;
-    const model = scheme?.Model;
-    if (!model)
+    const model = asRecord(asRecord(asRecord(asRecord(raw)?.Content)?.Value)?.Scheme)?.Model;
+    const fields = asRecord(model);
+    if (fields === void 0)
       return { nodes, links };
-    for (const raw2 of model.Nodes ?? []) {
-      const key = raw2?.Key;
+    for (const entry of asArray(fields.Nodes)) {
+      const node = asRecord(entry);
+      if (node === void 0)
+        continue;
+      const key = node.Key;
       if (typeof key !== "string" || key.length === 0)
         continue;
       nodes.push({
         id: key,
-        typeId: typeof raw2.TypeId === "string" ? raw2.TypeId : "",
-        name: nodeName(raw2),
-        x: typeof raw2.X === "number" ? raw2.X : 0,
-        y: typeof raw2.Y === "number" ? raw2.Y : 0
+        typeId: asString(node.TypeId),
+        name: nodeName(node),
+        x: asFiniteNumber(node.X),
+        y: asFiniteNumber(node.Y)
       });
     }
-    for (const raw2 of model.Links ?? []) {
-      const from = raw2?.From;
-      const to = raw2?.To;
+    for (const entry of asArray(fields.Links)) {
+      const link = asRecord(entry);
+      if (link === void 0)
+        continue;
+      const from = link.From;
+      const to = link.To;
       if (typeof from !== "string" || typeof to !== "string")
         continue;
       links.push({
         from,
-        fromPort: typeof raw2.FromPort === "string" ? raw2.FromPort : "",
+        fromPort: asString(link.FromPort),
         to,
-        toPort: typeof raw2.ToPort === "string" ? raw2.ToPort : ""
+        toPort: asString(link.ToPort)
       });
     }
     return { nodes, links };
   }
+  function parsePalettePorts(value) {
+    const ports = [];
+    for (const entry of asArray(value)) {
+      const port = asRecord(entry);
+      if (port === void 0)
+        continue;
+      const key = asString(port.key);
+      if (key.length === 0)
+        continue;
+      ports.push({
+        key,
+        name: asString(port.name),
+        type: asString(port.type),
+        maxLinks: asFiniteNumber(port.maxLinks),
+        availableTypes: asArray(port.availableTypes).filter((item) => typeof item === "string"),
+        isDynamic: port.isDynamic === true,
+        dynamicMode: toPortDynamicMode(port.dynamicMode)
+      });
+    }
+    return ports;
+  }
+  function parsePalette(value) {
+    const socketTypes = [];
+    const elements = [];
+    const root = asRecord(value);
+    if (root === void 0)
+      return { socketTypes, elements };
+    for (const entry of asArray(root.socketTypes)) {
+      const socket = asRecord(entry);
+      const name = asString(socket?.name);
+      if (name.length === 0)
+        continue;
+      socketTypes.push({ name, color: asString(socket?.color) });
+    }
+    for (const entry of asArray(root.elements)) {
+      const element = asRecord(entry);
+      const typeId = asString(element?.typeId);
+      if (element === void 0 || typeId.length === 0)
+        continue;
+      elements.push({
+        typeId,
+        name: asString(element.name),
+        groupName: asString(element.groupName),
+        icon: asString(element.icon),
+        inPorts: parsePalettePorts(element.inPorts),
+        outPorts: parsePalettePorts(element.outPorts)
+      });
+    }
+    return { socketTypes, elements };
+  }
   async function renderScheme(div, paletteUrl, scheme, options = {}) {
     return renderSchemeAtRevision(div, paletteUrl, scheme, beginRender(div), options);
   }
   async function renderSchemeAtRevision(div, paletteUrl, scheme, revision, options) {
     if (renderRevisions.get(div) !== revision)
       return null;
-    const palette = await fetch(paletteUrl).then((r) => r.json());
+    const response = await fetch(paletteUrl);
+    if (!response.ok)
+      throw new Error(`Palette request to ${paletteUrl} failed with status ${response.status}.`);
+    const palette = parsePalette(await response.json());
     if (renderRevisions.get(div) !== revision)
       return null;
     const catalog = buildCatalog(palette);
@@ -5100,6 +5324,14 @@ ${runtime.error}`;
     disconnectedHostObserver.disconnect();
     disconnectedHostObserver = null;
   }
+  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."
+    };
+  }
   function note(div, message, revision) {
     if (renderRevisions.get(div) !== revision) return;
     disposeActiveRender(div);
@@ -5108,53 +5340,51 @@ ${runtime.error}`;
   }
   async function renderFromSource(div, paletteUrl, srcUrl, options = {}) {
     const revision = beginRender(div);
-    const errors = (div.dataset.diagramErrors ?? "").split("|");
-    const [errLoad = "Diagram source could not be loaded.", errEmpty = "Diagram is empty or malformed.", errDraw = "Diagram could not be rendered."] = errors;
+    const errors = errorTexts(div);
     let raw;
     try {
       const resp = await fetch(srcUrl);
       if (!resp.ok) {
-        note(div, errLoad, revision);
+        note(div, errors.load, revision);
         return null;
       }
       const text = (await resp.text()).replace(/^/, "");
       raw = JSON.parse(text);
     } catch {
-      note(div, errLoad, revision);
+      note(div, errors.load, revision);
       return null;
     }
     const scheme = parseRawScheme(raw);
     if (scheme.nodes.length === 0) {
-      note(div, errEmpty, revision);
+      note(div, errors.empty, revision);
       return null;
     }
     try {
       return await renderSchemeAtRevision(div, paletteUrl, scheme, revision, options);
     } catch {
-      note(div, errDraw, revision);
+      note(div, errors.draw, revision);
       return null;
     }
   }
   async function renderFromInline(div, paletteUrl, json, options = {}) {
     const revision = beginRender(div);
-    const errors = (div.dataset.diagramErrors ?? "").split("|");
-    const [, errEmpty = "Diagram is empty or malformed.", errDraw = "Diagram could not be rendered."] = errors;
+    const errors = errorTexts(div);
     let raw;
     try {
       raw = JSON.parse(json);
     } catch {
-      note(div, errEmpty, revision);
+      note(div, errors.empty, revision);
       return null;
     }
     const scheme = parseRawScheme(raw);
     if (scheme.nodes.length === 0) {
-      note(div, errEmpty, revision);
+      note(div, errors.empty, revision);
       return null;
     }
     try {
       return await renderSchemeAtRevision(div, paletteUrl, scheme, revision, options);
     } catch {
-      note(div, errDraw, revision);
+      note(div, errors.draw, revision);
       return null;
     }
   }