prographs 0.12.0 → 0.13.0

package/dist/{chunk-I6VG7F6Z.cjs → chunk-RSONDMYW.cjs}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7; var _class8; var _class9; var _class10; var _class11; var _class12;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7; var _class8; var _class9; var _class10; var _class11; var _class12; var _class13; var _class14;
 
 var _chunkDN5ND7ZDcjs = require('./chunk-DN5ND7ZD.cjs');
 
@@ -6,7 +6,7 @@ var _chunkDN5ND7ZDcjs = require('./chunk-DN5ND7ZD.cjs');
 var _chunkEEF5WRRZcjs = require('./chunk-EEF5WRRZ.cjs');
 
 
-var _chunkUMEKIIHJcjs = require('./chunk-UMEKIIHJ.cjs');
+var _chunkLNWTC72Ycjs = require('./chunk-LNWTC72Y.cjs');
 
 // src/charts/softwarediagrams/softwareEnums.ts
 var SoftwareRouting = /* @__PURE__ */ ((SoftwareRouting2) => {
@@ -178,6 +178,44 @@ var TrieLabel = /* @__PURE__ */ ((TrieLabel2) => {
   TrieLabel2["Node"] = "node";
   return TrieLabel2;
 })(TrieLabel || {});
+var ComponentNodeKind = /* @__PURE__ */ ((ComponentNodeKind2) => {
+  ComponentNodeKind2["Component"] = "component";
+  ComponentNodeKind2["Interface"] = "interface";
+  return ComponentNodeKind2;
+})(ComponentNodeKind || {});
+var ComponentLinkKind = /* @__PURE__ */ ((ComponentLinkKind2) => {
+  ComponentLinkKind2["Provides"] = "provides";
+  ComponentLinkKind2["Requires"] = "requires";
+  ComponentLinkKind2["Dependency"] = "dependency";
+  return ComponentLinkKind2;
+})(ComponentLinkKind || {});
+var ComponentInterfaceForm = /* @__PURE__ */ ((ComponentInterfaceForm2) => {
+  ComponentInterfaceForm2["BallSocket"] = "ball-socket";
+  ComponentInterfaceForm2["Dependency"] = "dependency";
+  return ComponentInterfaceForm2;
+})(ComponentInterfaceForm || {});
+var ComponentGrouping = /* @__PURE__ */ ((ComponentGrouping2) => {
+  ComponentGrouping2["Frames"] = "frames";
+  ComponentGrouping2["Flat"] = "flat";
+  return ComponentGrouping2;
+})(ComponentGrouping || {});
+var DeploymentKind = /* @__PURE__ */ ((DeploymentKind2) => {
+  DeploymentKind2["Node"] = "node";
+  DeploymentKind2["Device"] = "device";
+  DeploymentKind2["Environment"] = "environment";
+  DeploymentKind2["Artifact"] = "artifact";
+  return DeploymentKind2;
+})(DeploymentKind || {});
+var DeploymentNodeForm = /* @__PURE__ */ ((DeploymentNodeForm2) => {
+  DeploymentNodeForm2["Cube"] = "cube";
+  DeploymentNodeForm2["Flat"] = "flat";
+  return DeploymentNodeForm2;
+})(DeploymentNodeForm || {});
+var DeploymentArtifactForm = /* @__PURE__ */ ((DeploymentArtifactForm2) => {
+  DeploymentArtifactForm2["Symbol"] = "symbol";
+  DeploymentArtifactForm2["Listed"] = "listed";
+  return DeploymentArtifactForm2;
+})(DeploymentArtifactForm || {});
 
 // src/charts/softwarediagrams/SoftwareGraph.ts
 var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -402,16 +440,16 @@ var SoftwareLayers = class _SoftwareLayers {
       return span;
     });
     const v = /* @__PURE__ */ new Map();
-    const apart = (a, b) => (size(a) + size(b)) / 2 + gap;
+    const apart2 = (a, b) => (size(a) + size(b)) / 2 + gap;
     const settle = (group, at2, wanted) => {
       const lo = spans[at2].start + lanePad, hi = spans[at2].start + spans[at2].size - lanePad, end = group.length - 1;
       const sweep = (rightFirst) => {
         const out = [...wanted];
         const right = () => {
-          for (let i = 0; i <= end; i++) out[i] = Math.max(out[i], i ? out[i - 1] + apart(group[i - 1], group[i]) : lo + size(group[i]) / 2);
+          for (let i = 0; i <= end; i++) out[i] = Math.max(out[i], i ? out[i - 1] + apart2(group[i - 1], group[i]) : lo + size(group[i]) / 2);
         };
         const left = () => {
-          for (let i = end; i >= 0; i--) out[i] = Math.min(out[i], i < end ? out[i + 1] - apart(group[i], group[i + 1]) : hi - size(group[i]) / 2);
+          for (let i = end; i >= 0; i--) out[i] = Math.min(out[i], i < end ? out[i + 1] - apart2(group[i], group[i + 1]) : hi - size(group[i]) / 2);
         };
         if (rightFirst) {
           right();
@@ -558,11 +596,11 @@ var SoftwareWiring = class _SoftwareWiring {
       high.set(route.low, [..._nullishCoalesce(high.get(route.low), () => ( [])), { route: i, other: _nullishCoalesce(_optionalChain([route, 'access', _8 => _8.mids, 'access', _9 => _9[0], 'optionalAccess', _10 => _10.v]), () => ( at2(route.high))) }]);
       low.set(route.high, [..._nullishCoalesce(low.get(route.high), () => ( [])), { route: i, other: _nullishCoalesce(_optionalChain([route, 'access', _11 => _11.mids, 'access', _12 => _12.at, 'call', _13 => _13(-1), 'optionalAccess', _14 => _14.v]), () => ( at2(route.low))) }]);
     });
-    for (const side of [low, high]) for (const list of side.values()) list.sort((a, b) => a.other - b.other || a.route - b.route);
+    for (const side of [low, high]) for (const list2 of side.values()) list2.sort((a, b) => a.other - b.other || a.route - b.route);
     const port = (side, id, route) => {
-      const list = _nullishCoalesce(side.get(id), () => ( [])), node = byId.get(id);
-      if (!node.ports || list.length < 2) return at2(id);
-      return at2(id) + ((list.findIndex((end) => end.route === route) + 1) / (list.length + 1) - 0.5) * node.across * (node.ports === "round" ? 0.5 : 0.8);
+      const list2 = _nullishCoalesce(side.get(id), () => ( [])), node = byId.get(id);
+      if (!node.ports || list2.length < 2) return at2(id);
+      return at2(id) + ((list2.findIndex((end) => end.route === route) + 1) / (list2.length + 1) - 0.5) * node.across * (node.ports === "round" ? 0.5 : 0.8);
     };
     const reach = (id, v) => {
       const node = byId.get(id);
@@ -727,11 +765,11 @@ var SoftwareDiagram = class extends _chunkEEF5WRRZcjs.Chart2D {
 
 // src/charts/softwarediagrams/SoftwareSamples.ts
 var { Start, End, Action, Decision, Fork, Join } = ActivityNodeKind;
-var pick = (list, u) => list[Math.floor(u() * list.length)];
+var pick = (list2, u) => list2[Math.floor(u() * list2.length)];
 var SoftwareSamples = class {
   /** Order fulfilment as a UML activity: `{ id, label, kind, lane }` nodes and `{ source, target, guard }` flows. The seed names the packing step and the reason a payment is retried. */
   static activity(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed);
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed);
     const extra = pick(["Gift wrap", "Check quality", "Print label"], u), retry = pick(["declined", "refused", "timed out"], u);
     return {
       nodes: [
@@ -768,7 +806,7 @@ var SoftwareSamples = class {
   }
   /** An order handled between a customer and a retailer, as BPMN: `{ id, label, kind, pool, lane }` elements and `{ source, target, label, kind }` flows. */
   static bpmn(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed), B = BpmnNodeKind;
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), B = BpmnNodeKind;
     const charge = pick(["Charge card", "Send invoice", "Take deposit"], u), refuse = pick(["Cancel order", "Offer refund", "Wait for stock"], u);
     const customer = { pool: "Customer" }, sales = { pool: "Retailer", lane: "Sales" }, warehouse = { pool: "Retailer", lane: "Warehouse" };
     return {
@@ -804,7 +842,7 @@ var SoftwareSamples = class {
   }
   /** A level 1 data flow diagram of order processing: `{ id, label, kind, number }` nodes and `{ source, target, label }` flows. */
   static dataFlow(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed), { Process: Process2, External: External2, Store: Store2 } = DataFlowKind;
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), { Process: Process2, External: External2, Store: Store2 } = DataFlowKind;
     const payer = pick(["Bank", "Card network", "Payment gateway"], u), proof = pick(["receipt", "invoice", "confirmation"], u);
     return {
       nodes: [
@@ -834,7 +872,7 @@ var SoftwareSamples = class {
   }
   /** A producer and a consumer sharing a bounded buffer, as a Petri net: `{ id, label, kind, tokens }` nodes and `{ source, target, weight }` arcs. */
   static petri(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed), { Place, Transition } = PetriNodeKind;
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), { Place, Transition } = PetriNodeKind;
     const held = 1 + Math.floor(u() * 4), producing = u() < 0.5, batch = 1 + Math.floor(u() * 2);
     return {
       nodes: [
@@ -867,7 +905,7 @@ var SoftwareSamples = class {
   }
   /** A profiled program: `{ id, self, module }` functions with self time in ms, and `{ source, target, calls }` call counts. */
   static calls(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed);
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed);
     const time = (base) => Math.round(base * (0.6 + u() * 0.8) * 10) / 10, count = (base) => Math.max(1, Math.round(base * (0.5 + u())));
     return {
       nodes: [
@@ -904,7 +942,7 @@ var SoftwareSamples = class {
   }
   /** A lending library as UML use cases: `{ id, label, kind, role }` actors and use cases, `{ source, target, kind }` relations, and the `system` name. */
   static useCases(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed), { Actor, UseCase } = UseCaseNodeKind, { Association: Association2, Include: Include2, Extend: Extend2 } = UseCaseLinkKind;
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), { Actor, UseCase } = UseCaseNodeKind, { Association: Association2, Include: Include2, Extend: Extend2 } = UseCaseLinkKind;
     const fine = pick(["Pay fine", "Pay late fee", "Settle account"], u), stock = pick(["Manage stock", "Add new title", "Retire old copy"], u);
     return {
       system: pick(["Library system", "Lending desk", "Branch library"], u),
@@ -934,7 +972,7 @@ var SoftwareSamples = class {
   }
   /** A structured program as nested `{ name, kind, children }` nodes: a loop over orders with nested selections, a multi-way choice and a post-test loop. */
   static program(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed), { If: If2, Case: Case2, While: While2, Until: Until2 } = NassiKind;
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), { If: If2, Case: Case2, While: While2, Until: Until2 } = NassiKind;
     const audit = pick(["Log result", "Update totals", "Notify customer"], u), formats = pick([["PDF", "CSV"], ["HTML", "JSON"], ["Screen", "Printer"]], u);
     const step = (name) => ({ name });
     return {
@@ -965,7 +1003,7 @@ var SoftwareSamples = class {
   }
   /** A microcontroller's address space: `{ region, start, size, used, kind }` rows, sizes in bytes. Peripherals carry no usage. */
   static memory(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed), K = 1024, heap = (48 + 16 * Math.floor(u() * 3)) * K;
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), K = 1024, heap = (48 + 16 * Math.floor(u() * 3)) * K;
     const region = (name, start, size, kind, share) => ({ region: name, start, size, used: share === void 0 ? null : Math.round(size * share / 64) * 64, kind });
     return [
       region("Vector table", 134217728, K, "Flash", 1),
@@ -981,7 +1019,7 @@ var SoftwareSamples = class {
   }
   /** Two profiles of one request handler as nested `{ name, value, before, children }` frames: own samples after and before a change. */
   static profiles(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed);
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed);
     const frame = (name, before, after, children) => ({ name, before: Math.round(before * (0.8 + u() * 0.4)), value: Math.round(after * (0.8 + u() * 0.4)), children });
     return frame("main", 5, 5, [
       frame("parseRequest", 12, 12, [frame("readHeaders", 30, 28), frame("jsonDecode", 60, 104), frame("validate", 22, 20)]),
@@ -995,7 +1033,7 @@ var SoftwareSamples = class {
   }
   /** A feedback control loop as a signal-flow graph: `{ id, label }` signals and `{ source, target, gain }` branches. The seed picks the inner loop and the feedforward path. */
   static signalFlow(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed);
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed);
     const inner = pick([{ source: "x2", target: "x1", gain: "\u2212H1" }, { source: "x3", target: "x2", gain: "\u2212H1" }], u);
     const bypass = pick([{ source: "x1", target: "x3", gain: "G4" }, { source: "e", target: "x2", gain: "G4" }], u);
     return {
@@ -1014,7 +1052,7 @@ var SoftwareSamples = class {
   }
   /** The concrete syntax tree of one assignment, as nested `{ name, children }` nodes with the tokens at the leaves in source order. */
   static syntax(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed);
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed);
     const [target, left, right, extra] = pick([["total", "price", "qty", "tax"], ["area", "width", "height", "margin"], ["score", "hits", "weight", "bonus"]], u);
     const sum2 = pick(["+", "-"], u), id = (name) => ({ name: "Id", children: [{ name }] });
     return {
@@ -1028,10 +1066,79 @@ var SoftwareSamples = class {
   }
   /** Short keywords with how often each was seen: `{ word, count }` rows for a prefix tree. */
   static keywords(seed) {
-    const { u } = _chunkUMEKIIHJcjs.SampleData.rng(seed), all = ["if", "in", "int", "is", "do", "def", "del", "for", "fn", "from", "try", "true"];
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), all = ["if", "in", "int", "is", "do", "def", "del", "for", "fn", "from", "try", "true"];
     const skip = Math.floor(u() * 4);
     return all.filter((_, i) => i % 4 !== skip).map((word) => ({ word, count: Math.round(5 + u() * 90) }));
   }
+  /**
+   * A shop as UML components: `{ id, label, kind, package }` components and interfaces, and `{ source, target, kind, label }` links
+   * that say which component provides or requires which interface, plus one plain dependency. One interface is required and provided by nobody.
+   */
+  static components(seed) {
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), { Component, Interface } = ComponentNodeKind, { Provides: Provides2, Requires: Requires2, Dependency: Dependency2 } = ComponentLinkKind;
+    const front = pick(["Web shop", "Mobile app", "Kiosk"], u), gateway = pick(["CardGateway", "BankTransfer", "Wallet"], u), used = pick(["catalogue", "billing"], u);
+    const web = { kind: Component, package: "Front end" }, services = { kind: Component, package: "Services" }, data = { kind: Component, package: "Data" };
+    return {
+      nodes: [
+        { id: "shop", label: front, ...web },
+        { id: "admin", label: "Admin console", ...web },
+        { id: "orders", label: "Order service", ...services },
+        { id: "catalogue", label: "Catalogue", ...services },
+        { id: "billing", label: "Billing", ...services },
+        { id: "store", label: "Order store", ...data },
+        { id: "index", label: "Search index", ...data },
+        ...["Orders", "Products", "Payments", "Persistence", "Search", gateway].map((id) => ({ id, kind: Interface }))
+      ],
+      links: [
+        { source: "orders", target: "Orders", kind: Provides2 },
+        { source: "shop", target: "Orders", kind: Requires2 },
+        { source: "admin", target: "Orders", kind: Requires2 },
+        { source: "catalogue", target: "Products", kind: Provides2 },
+        { source: "shop", target: "Products", kind: Requires2 },
+        { source: "billing", target: "Payments", kind: Provides2 },
+        { source: "orders", target: "Payments", kind: Requires2 },
+        { source: "store", target: "Persistence", kind: Provides2 },
+        { source: "orders", target: "Persistence", kind: Requires2 },
+        { source: "index", target: "Search", kind: Provides2 },
+        { source: "catalogue", target: "Search", kind: Requires2 },
+        { source: "billing", target: gateway, kind: Requires2 },
+        { source: "admin", target: used, kind: Dependency2, label: "\xABuse\xBB" }
+      ]
+    };
+  }
+  /**
+   * Where a shop runs, as a UML deployment: `{ id, label, kind, parent }` devices, execution environments and artifacts, nested
+   * by `parent`, and `{ source, target, protocol }` communication paths.
+   */
+  static deployment(seed) {
+    const { u } = _chunkLNWTC72Ycjs.SampleData.rng(seed), { Device, Environment, Artifact: Artifact2 } = DeploymentKind;
+    const client = pick([["Customer phone", "shop.apk"], ["Till", "till.exe"], ["Customer laptop", "shop.js"]], u), wire = pick(["JDBC", "TCP/IP", "TLS"], u);
+    const extra = pick([["Payment host", "gateway.war", "HTTPS"], ["Mail relay", "relay.conf", "SMTP"], ["Report server", "reports.jar", "gRPC"]], u);
+    return {
+      nodes: [
+        { id: "client", label: client[0], kind: Device },
+        { id: "client-app", label: client[1], kind: Artifact2, parent: "client" },
+        { id: "web", label: "Web server", kind: Device },
+        { id: "site", label: "site.conf", kind: Artifact2, parent: "web" },
+        { id: "assets", label: "assets.zip", kind: Artifact2, parent: "web" },
+        { id: "app", label: "Application server", kind: Device },
+        { id: "runtime", label: "Servlet container", kind: Environment, parent: "app" },
+        { id: "orders", label: "orders.war", kind: Artifact2, parent: "runtime" },
+        { id: "billing", label: "billing.war", kind: Artifact2, parent: "runtime" },
+        { id: "db", label: "Database server", kind: Device },
+        { id: "dbms", label: "SQL database", kind: Environment, parent: "db" },
+        { id: "schema", label: "schema.sql", kind: Artifact2, parent: "dbms" },
+        { id: "extra", label: extra[0], kind: Device },
+        { id: "extra-app", label: extra[1], kind: Artifact2, parent: "extra" }
+      ],
+      links: [
+        { source: "client", target: "web", protocol: "HTTPS" },
+        { source: "web", target: "app", protocol: "HTTP" },
+        { source: "app", target: "db", protocol: wire },
+        { source: "app", target: "extra", protocol: extra[2] }
+      ]
+    };
+  }
 };
 
 // src/charts/softwarediagrams/ActivityDiagram.ts
@@ -1399,14 +1506,255 @@ var CallGraph = (_class3 = class _CallGraph extends SoftwareDiagram {
   }
 }, _class3.__initStatic3(), _class3);
 
-// src/charts/softwarediagrams/DataFlowDiagram.ts
+// src/charts/softwarediagrams/ComponentDiagram.ts
 var SIZE4 = 10.5;
+var FACE = 10;
+var BALL = 5;
+var SOCKET = 8;
+var PORT = 3.5;
+var PAD = 8;
+var TAB = 16;
+var REACH = 40;
+var { Provides, Requires, Dependency } = ComponentLinkKind;
+var stated = (raw, column) => String(_nullishCoalesce(raw[column], () => ( ""))).toLowerCase();
+var apart = (a, b, by = 0) => a[1] + by < b[0] || b[1] + by < a[0];
+var list = (names) => names.join(", ") || "none";
+var ComponentDiagram = (_class4 = class _ComponentDiagram extends SoftwareDiagram {
+  static __initStatic4() {this.meta = {
+    id: "uml-component-diagram",
+    name: "UML component diagram",
+    family: "network" /* Network */,
+    dimension: 2 /* Two */,
+    shape: "graph" /* Graph */,
+    description: "Wires components through provided and required interfaces in ball and socket notation, with ports, dependencies and package frames.",
+    tags: ["uml", "component", "interface", "ball and socket", "lollipop", "port", "package", "software"],
+    sample: (seed) => SoftwareSamples.components(seed),
+    variants: {
+      orientation: ["horizontal" /* Horizontal */, "vertical" /* Vertical */],
+      routing: ["curved" /* Curved */, "orthogonal" /* Orthogonal */],
+      interfaces: ["ball-socket" /* BallSocket */, "dependency" /* Dependency */],
+      grouping: ["frames" /* Frames */, "flat" /* Flat */]
+    }
+  }}
+  defaults() {
+    return {
+      nodeId: "id",
+      label: "label",
+      kind: "kind",
+      group: "package",
+      source: "source",
+      target: "target",
+      linkKind: "kind",
+      linkLabel: "label",
+      orientation: "horizontal" /* Horizontal */,
+      routing: "curved" /* Curved */,
+      interfaces: "ball-socket" /* BallSocket */,
+      grouping: "frames" /* Frames */,
+      ports: true
+    };
+  }
+  legendItems() {
+    return this.options.grouping === "frames" /* Frames */ ? [] : this.palette.items();
+  }
+  #graph() {
+    const { nodeId, source, target } = this.options;
+    return SoftwareGraph.read(this.options.data, { nodeId, source, target });
+  }
+  table() {
+    const { source, target, linkKind, linkLabel } = this.options;
+    return this.rowsOf(this.#graph().arcs.map((arc) => arc.raw), [.../* @__PURE__ */ new Set([source, target, linkKind, linkLabel])]);
+  }
+  /**
+   * Components, interfaces and the links between them. A link between two components is a dependency, one between a
+   * component and an interface provides or requires it whichever end names the component, and the rest are dropped.
+   */
+  static model(graph, columns) {
+    const offered = new Set(graph.arcs.filter((arc) => [Provides, Requires].includes(stated(arc.raw, columns.linkKind))).map((arc) => arc.target));
+    const parts = graph.vertices.map(({ id, raw }) => {
+      const kind = stated(raw, columns.kind);
+      return { id, raw, label: _nullishCoalesce(SoftwareGraph.text(raw[columns.label]), () => ( id)), face: kind === "interface" /* Interface */ || !kind && offered.has(id), group: _nullishCoalesce(SoftwareGraph.text(raw[columns.group]), () => ( "")), shared: false };
+    });
+    const byId = new Map(parts.map((part) => [part.id, part]));
+    const joins = graph.arcs.flatMap((arc) => {
+      const a = byId.get(arc.source), b = byId.get(arc.target);
+      if (a === b || a.face && b.face) return [];
+      if (!a.face && !b.face) return [{ key: arc.key, kind: Dependency, component: a.id, other: b.id, raw: arc.raw }];
+      const [component, face] = a.face ? [b, a] : [a, b];
+      return [{ key: arc.key, kind: stated(arc.raw, columns.linkKind) === Provides ? Provides : Requires, component: component.id, other: face.id, raw: arc.raw }];
+    });
+    for (const part of parts) {
+      if (!part.face) continue;
+      const users = joins.filter((join) => join.other === part.id), owner = _nullishCoalesce(users.find((join) => join.kind === Provides), () => ( users[0]));
+      part.group = owner ? byId.get(owner.component).group : "";
+      part.shared = !users.some((join) => join.kind === Provides) || !users.some((join) => join.kind === Requires) || users.some((join) => byId.get(join.component).group !== part.group);
+    }
+    return { parts, joins };
+  }
+  /**
+   * The lane across the flow that each package takes. Packages share a lane when their frames sit at least a rank
+   * apart along the flow and neither frame takes in an interface of the other, so frames in one lane never touch.
+   */
+  static lanes(spans) {
+    const lanes = [];
+    for (const span of spans) {
+      const fits = (other) => (!other.frame || apart(span.owned, other.frame)) && (!span.frame || apart(other.owned, span.frame)) && (!span.frame || !other.frame || apart(span.frame, other.frame, 1));
+      const free = lanes.find((lane) => lane.every(fits));
+      if (free) free.push(span);
+      else lanes.push([span]);
+    }
+    return new Map(lanes.flatMap((lane, at2) => lane.map((span) => [span.name, at2])));
+  }
+  /** The half circle of a required interface, cupped around the ball at `centre` and open along `angle`, the way its connector runs. */
+  static socket([cx, cy], angle, radius = SOCKET) {
+    const end = (turn) => `${+(cx + radius * Math.cos(angle + turn)).toFixed(2)},${+(cy + radius * Math.sin(angle + turn)).toFixed(2)}`;
+    return `M${end(Math.PI / 2)}A${radius},${radius} 0 0 1 ${end(-Math.PI / 2)}`;
+  }
+  draw(ctx) {
+    const { orientation, routing, interfaces, grouping, ports, label, kind, group, linkKind, linkLabel } = this.options;
+    const vertical = orientation === "vertical" /* Vertical */, socketed = interfaces === "ball-socket" /* BallSocket */;
+    const { theme, palette } = ctx, ink = theme.inkSecondary;
+    const { parts, joins } = _ComponentDiagram.model(this.#graph(), { label, kind, group, linkKind });
+    const byId = new Map(parts.map((part) => [part.id, part]));
+    const links = joins.map((join) => join.kind === Provides ? { source: join.other, target: join.component } : { source: join.component, target: join.other });
+    const framed = grouping === "frames" /* Frames */ && parts.some((part) => part.group);
+    const rank = SoftwareLayers.ranks(parts.map((part) => part.id), links);
+    const reach = (members) => members.length ? [Math.min(...members.map((part) => rank.get(part.id))), Math.max(...members.map((part) => rank.get(part.id)))] : null;
+    const lanes = _ComponentDiagram.lanes(framed ? [...new Set(parts.map((part) => part.group))].map((name) => {
+      const owned = parts.filter((part) => part.group === name);
+      return { name, owned: reach(owned), frame: name ? reach(owned.filter((part) => !part.shared)) : null };
+    }) : []);
+    const lane = (part) => _nullishCoalesce(lanes.get(part.group), () => ( 0)), count = Math.max(1, ...[...lanes.values()].map((at2) => at2 + 1));
+    const half = socketed ? SOCKET : BALL;
+    const lines = new Map(parts.map((part) => [part.id, part.face ? [SoftwareText.fit(part.label, framed && !vertical ? 64 : 78, FACE)] : SoftwareText.wrap(part.label, 96, SIZE4)]));
+    const widest = (id, size) => Math.max(0, ...lines.get(id).map((line) => SoftwareText.width(line, size)));
+    const words = joins.map((join) => join.kind === Dependency ? SoftwareText.fit(_nullishCoalesce(SoftwareGraph.text(join.raw[linkLabel]), () => ( "")), 80, 10) : "");
+    const edge = framed ? 2 * PAD : 0;
+    const plan = SoftwareWiring.build({
+      nodes: parts.map((part) => {
+        if (part.face) {
+          const room = vertical ? widest(part.id, FACE) + 8 : 26;
+          return { id: part.id, along: 2 * half, across: 2 * half, slot: 2 * half + room, shift: vertical ? -room / 2 : 0, lane: lane(part) };
+        }
+        const width = Math.max(80, widest(part.id, SIZE4) + 42), height = lines.get(part.id).length > 1 ? 44 : 32;
+        return { id: part.id, along: vertical ? height : width, across: vertical ? width : height, ports: "spread", lane: lane(part) };
+      }),
+      links,
+      vertical,
+      routing,
+      nodeGap: 16,
+      rankGap: vertical ? 30 : 34,
+      inset: 0,
+      labelRoom: words.map((text) => text ? SoftwareText.width(text, 10) + 16 : 0),
+      lanes: count,
+      lanePad: framed ? vertical ? PAD + 2 : PAD + TAB + 4 : 0,
+      laneMin: framed && vertical ? Array.from({ length: count }, (_, at2) => Math.max(0, ...[...lanes].filter(([name, own]) => name && own === at2).map(([name]) => Math.min(130, SoftwareText.width(name, SIZE4, true)) + 4 * PAD + 6))) : void 0,
+      room: vertical ? { length: ctx.plot.height - edge - (framed ? TAB : 0), breadth: ctx.plot.width } : { length: ctx.plot.width - edge, breadth: ctx.plot.height }
+    });
+    const placer = this.placer(plan, vertical ? { x0: 0, y0: -REACH, x1: plan.width, y1: plan.height + REACH } : { x0: -REACH, y0: 0, x1: plan.width + REACH, y1: plan.height });
+    const shapes = [], balls = [], squares = /* @__PURE__ */ new Map(), labels = [];
+    const held = /* @__PURE__ */ new Map(), loose = [];
+    const hold = (part, box) => {
+      if (!part.shared) held.set(part.group, [..._nullishCoalesce(held.get(part.group), () => ( [])), box]);
+    };
+    const bare = /* @__PURE__ */ new Map();
+    const naming = (id, sort) => joins.filter((join) => join.kind === sort && join.component === id).map((join) => byId.get(join.other).label);
+    const users = (id, sort) => joins.filter((join) => join.kind === sort && join.other === id).map((join) => byId.get(join.component).label);
+    for (const part of parts) {
+      const { x, y, width: w, height: h } = plan.boxes.get(part.id);
+      hold(part, { x0: x - w / 2, y0: y - h / 2, x1: x + w / 2, y1: y + h / 2 });
+      if (part.face) {
+        const text2 = lines.get(part.id)[0], tip = { title: part.label, rows: [["Provided by", list(users(part.id, Provides))], ["Required by", list(users(part.id, Requires))]] };
+        if (!socketed || users(part.id, Provides).length) balls.push({ key: part.id, raw: part.raw, d: SoftwareShapes.ellipse(x, y, BALL - 0.75), fill: theme.surface, stroke: ink, tip });
+        else bare.set(part.id, tip);
+        const spots = vertical ? [["start", x + half + 4, y + 3.5]] : [["middle", x, y - half - 4], ["middle", x, y + half + 11]];
+        const spot = text2 ? placer.claim(spots.map(([anchor, lx, ly]) => ({ anchor, x: lx, y: ly, box: SoftwarePlacer.text(lx, ly, text2, FACE, anchor) }))) : null;
+        if (!spot) continue;
+        labels.push({ key: `${part.id}/name`, x: spot.x, y: spot.y, text: text2, anchor: spot.anchor, size: FACE, halo: true });
+        hold(part, spot.box);
+        loose.push(spot.box);
+        continue;
+      }
+      const fill = palette.color(part.group || "Component"), on = palette.inkOn(fill), text = lines.get(part.id), left = x - w / 2, top = y - h / 2;
+      shapes.push({
+        key: part.id,
+        raw: part.raw,
+        d: SoftwareShapes.rect(left, top, w, h, 2),
+        fill,
+        tip: { title: part.label, color: fill, rows: [...part.group ? [["Package", part.group]] : [], ["Provides", list(naming(part.id, Provides))], ["Requires", list(naming(part.id, Requires))]] }
+      });
+      const ix = left + w - 17, iy = top + 5;
+      shapes.push({ key: `${part.id}/icon`, d: SoftwareShapes.rect(ix + 3, iy, 9, 11), fill, stroke: on, strokeWidth: 1.2 });
+      shapes.push({ key: `${part.id}/tabs`, d: `${SoftwareShapes.rect(ix, iy + 2, 6, 2.5)}${SoftwareShapes.rect(ix, iy + 6.5, 6, 2.5)}`, fill, stroke: on, strokeWidth: 1.2 });
+      const centre = widest(part.id, SIZE4) / 2 <= w / 2 - 20 ? x : x - 7;
+      text.forEach((line, i) => labels.push({ key: `${part.id}/${i}`, x: centre, y: y + 3.5 + (i - (text.length - 1) / 2) * 12, text: line, anchor: "middle", size: SIZE4, weight: 600, fill: on }));
+    }
+    const port = ([px, py]) => {
+      if (ports) squares.set(`${px.toFixed(1)}/${py.toFixed(1)}`, { key: `port/${squares.size}`, d: SoftwareShapes.rect(px - PORT, py - PORT, 2 * PORT, 2 * PORT), fill: theme.surface, stroke: ink });
+    };
+    const sockets = /* @__PURE__ */ new Map();
+    const wires = plan.wires.map((wire, i) => {
+      const join = joins[i], from = byId.get(join.component).label, to = byId.get(join.other).label;
+      const arrow = { d: SoftwareShapes.arrow(wire.tip, wire.angle, 8, true), fill: "none" };
+      if (join.kind === Dependency) return { key: join.key, raw: join.raw, d: wire.d, dash: "5 4", head: arrow, tip: { title: `${from} \u2192 ${to}`, rows: [["Relation", words[i] || "dependency"]] } };
+      const face = plan.boxes.get(join.other), centre = [face.x, face.y];
+      if (join.kind === Requires) {
+        port(wire.points[0]);
+        const cup = _ComponentDiagram.socket(centre, wire.angle);
+        if (socketed) sockets.set(cup, { key: `${join.other}/socket/${sockets.size}`, raw: byId.get(join.other).raw, d: cup, stroke: ink, strokeWidth: 2, tip: bare.get(join.other) });
+        return { key: join.key, raw: join.raw, d: wire.d, dash: socketed ? void 0 : "5 4", head: socketed ? void 0 : arrow, tip: { title: `${from} requires ${to}` } };
+      }
+      port(wire.tip);
+      const start = wire.points[0], away = Math.atan2(start[1] - centre[1], start[0] - centre[0]);
+      const stick = socketed ? SoftwareShapes.line([[centre[0] + BALL * Math.cos(away), centre[1] + BALL * Math.sin(away)], start]) : "";
+      return { key: join.key, raw: join.raw, d: `${stick}${wire.d}`, tip: { title: `${from} provides ${to}` } };
+    });
+    const frames = [...held].flatMap(([name, boxes]) => {
+      if (!framed || !name) return [];
+      let x02 = Math.min(...boxes.map((box) => box.x0)) - PAD, x1 = Math.max(...boxes.map((box) => box.x1)) + PAD;
+      const y02 = Math.min(...boxes.map((box) => box.y0)) - PAD, y1 = Math.max(...boxes.map((box) => box.y1)) + PAD, band = plan.lanes[lanes.get(name)];
+      const title = SoftwareText.fit(name, vertical ? 130 : x1 - x02 - 2 * PAD, SIZE4, true), tab = SoftwareText.width(title, SIZE4, true) + 2 * PAD;
+      if (vertical) {
+        x1 = Math.max(x1, x02 + tab + 2 * PAD);
+        const over = Math.max(0, Math.min(x1 - (band.start + band.size - 2), x02 - band.start - 2));
+        x02 -= over;
+        x1 -= over;
+      }
+      const spot = placer.claim(Array.from({ length: Math.floor(Math.max(0, x1 - x02 - tab) / 4) + 1 }, (_, k) => ({ at: x02 + k * 4, box: { x0: x02 + k * 4, y0: y02 - TAB, x1: x02 + k * 4 + tab, y1: y02 } })));
+      return [{ name, title, x0: x02, y0: y02, x1, y1, tab, at: _nullishCoalesce(_optionalChain([spot, 'optionalAccess', _22 => _22.at]), () => ( x02)) }];
+    });
+    const marks = this.wireLabels(placer, plan.wires, (i) => words[i]);
+    const all = [{ x0: 0, y0: 0, x1: plan.width, y1: plan.height }, ...frames.map((frame) => ({ ...frame, y0: frame.y0 - TAB })), ...loose];
+    const x0 = Math.min(...all.map((box) => box.x0)), y0 = Math.min(...all.map((box) => box.y0));
+    const stage = this.stage(ctx, Math.max(...all.map((box) => box.x1)) - x0, Math.max(...all.map((box) => box.y1)) - y0);
+    const body = stage.nest(`translate(${+(-x0).toFixed(2)},${+(-y0).toFixed(2)})`, "body");
+    this.paths(body, ctx, "frames", frames.map((frame) => ({
+      key: frame.name,
+      fill: theme.grid,
+      opacity: 0.45,
+      d: SoftwareShapes.polygon([[frame.at, frame.y0], [frame.at, frame.y0 - TAB], [frame.at + frame.tab, frame.y0 - TAB], [frame.at + frame.tab, frame.y0], [frame.x1, frame.y0], [frame.x1, frame.y1], [frame.x0, frame.y1], [frame.x0, frame.y0]])
+    })));
+    this.wires(body, ctx, wires);
+    this.paths(body, ctx, "frame-tabs", frames.flatMap((frame) => {
+      const d = SoftwareShapes.rect(frame.at, frame.y0 - TAB, frame.tab, TAB);
+      return [{ key: `${frame.name}/under`, d, fill: theme.surface }, { key: frame.name, d, fill: theme.grid, opacity: 0.45 }];
+    }));
+    this.texts(body, ctx, "frame-names", frames.map((frame) => ({ key: frame.name, x: frame.at + PAD, y: frame.y0 - 4.5, text: frame.title, size: SIZE4, weight: 600 })));
+    this.paths(body, ctx, "nodes", shapes);
+    this.paths(body, ctx, "interfaces", [...sockets.values(), ...balls]);
+    this.paths(body, ctx, "ports", [...squares.values()]);
+    this.texts(body, ctx, "node-text", labels);
+    this.texts(body, ctx, "wire-text", marks);
+  }
+}, _class4.__initStatic4(), _class4);
+
+// src/charts/softwarediagrams/DataFlowDiagram.ts
+var SIZE5 = 10.5;
 var KINDS3 = new Set(Object.values(DataFlowKind));
 var NAME3 = { process: "Process", external: "External entity", store: "Data store" };
 var { Process, External, Store } = DataFlowKind;
-var TAB = 24;
-var DataFlowDiagram = (_class4 = class extends SoftwareDiagram {
-  static __initStatic4() {this.meta = {
+var TAB2 = 24;
+var DataFlowDiagram = (_class5 = class extends SoftwareDiagram {
+  static __initStatic5() {this.meta = {
     id: "data-flow-diagram",
     name: "Data flow diagram",
     family: "flow" /* Flow */,
@@ -1440,16 +1788,16 @@ var DataFlowDiagram = (_class4 = class extends SoftwareDiagram {
     const vertical = orientation === "vertical" /* Vertical */, yourdon = notation === "yourdon" /* Yourdon */, { theme, palette } = ctx;
     const graph = this.#graph();
     const parts = graph.vertices.map(({ id, raw }) => {
-      const stated = String(_nullishCoalesce(raw[kind], () => ( ""))).toLowerCase();
-      return { id, raw, label: _nullishCoalesce(SoftwareGraph.text(raw[label]), () => ( id)), kind: KINDS3.has(stated) ? stated : Process, number: SoftwareGraph.text(raw[number]) };
+      const stated2 = String(_nullishCoalesce(raw[kind], () => ( ""))).toLowerCase();
+      return { id, raw, label: _nullishCoalesce(SoftwareGraph.text(raw[label]), () => ( id)), kind: KINDS3.has(stated2) ? stated2 : Process, number: SoftwareGraph.text(raw[number]) };
     });
     const byId = new Map(parts.map((part) => [part.id, part]));
-    const lines = new Map(parts.map((part) => [part.id, part.kind === Store ? [SoftwareText.fit(part.label, 96, SIZE4)] : SoftwareText.wrap(part.label, part.kind === Process && yourdon ? 62 : 88, SIZE4)]));
-    const widest = (part) => Math.max(0, ...lines.get(part.id).map((line) => SoftwareText.width(line, SIZE4)));
+    const lines = new Map(parts.map((part) => [part.id, part.kind === Store ? [SoftwareText.fit(part.label, 96, SIZE5)] : SoftwareText.wrap(part.label, part.kind === Process && yourdon ? 62 : 88, SIZE5)]));
+    const widest = (part) => Math.max(0, ...lines.get(part.id).map((line) => SoftwareText.width(line, SIZE5)));
     const rows = (part) => lines.get(part.id).length + (part.number ? 1 : 0);
     const bubble = Math.max(54, ...parts.filter((part) => part.kind === Process).map((part) => Math.min(86, Math.max(widest(part) + 20, rows(part) * 13 + 22))));
     const extent = (part) => {
-      if (part.kind === Store) return [Math.max(72, widest(part) + 22 + (yourdon || !part.number ? 0 : TAB)), 26];
+      if (part.kind === Store) return [Math.max(72, widest(part) + 22 + (yourdon || !part.number ? 0 : TAB2)), 26];
       if (part.kind === External) return [Math.max(64, widest(part) + 20), lines.get(part.id).length > 1 ? 42 : 32];
       if (yourdon) return [bubble, bubble];
       return [Math.max(70, widest(part) + 20), rows(part) * 12 + 18];
@@ -1475,7 +1823,7 @@ var DataFlowDiagram = (_class4 = class extends SoftwareDiagram {
       const main = { key: part.id, raw: part.raw, fill, tip: { title: part.label, color: fill, rows: [["Kind", NAME3[part.kind]], ...part.number ? [["Number", part.number]] : []] } };
       let centre = x, first = y + 3.5 - (text.length - 1) * 12 / 2;
       if (part.kind === Store) {
-        const tab = !yourdon && part.number ? TAB : 0;
+        const tab = !yourdon && part.number ? TAB2 : 0;
         shapes.push({ ...main, d: SoftwareShapes.rect(left, top, w, h) });
         shapes.push({ key: `${part.id}/rule`, d: yourdon ? `M${left},${top}h${w}M${left},${top + h}h${w}` : `M${left + w},${top}h${-w}v${h}h${w}${tab ? `M${left + tab},${top}v${h}` : ""}`, stroke: ink, strokeWidth: 2 });
         if (tab) labels.push({ key: `${part.id}/id`, x: left + tab / 2, y: y + 3.5, text: SoftwareText.fit(part.number, tab - 4, 9.5), anchor: "middle", size: 9.5, weight: 600, fill: on });
@@ -1492,7 +1840,7 @@ var DataFlowDiagram = (_class4 = class extends SoftwareDiagram {
           first = yourdon ? head + 12 : top + 18 + (h - 18) / 2 + 3.5 - (text.length - 1) * 12 / 2;
         }
       }
-      text.forEach((line, i) => labels.push({ key: `${part.id}/${i}`, x: centre, y: first + i * 12, text: line, anchor: "middle", size: SIZE4, fill: on }));
+      text.forEach((line, i) => labels.push({ key: `${part.id}/${i}`, x: centre, y: first + i * 12, text: line, anchor: "middle", size: SIZE5, fill: on }));
     }
     const wires = plan.wires.map((wire, i) => {
       const arc = graph.arcs[i];
@@ -1503,7 +1851,215 @@ var DataFlowDiagram = (_class4 = class extends SoftwareDiagram {
     this.texts(stage, ctx, "node-text", labels);
     this.texts(stage, ctx, "wire-text", this.wireLabels(placer, plan.wires, (i) => words[i]));
   }
-}, _class4.__initStatic4(), _class4);
+}, _class5.__initStatic5(), _class5);
+
+// src/charts/softwarediagrams/DeploymentDiagram.ts
+var SIZE6 = 10.5;
+var PAD2 = 8;
+var LEAD = 13;
+var DEPTH = 7;
+var TOP = "";
+var KINDS4 = new Set(Object.values(DeploymentKind));
+var NAME4 = { node: "Node", device: "Device", environment: "Execution environment", artifact: "Artifact" };
+var STEREOTYPE = { node: "", device: "\xABdevice\xBB", environment: "\xABexecutionEnvironment\xBB", artifact: "\xABartifact\xBB" };
+var { Artifact } = DeploymentKind;
+var n3 = (value) => Math.round(value * 100) / 100;
+var shifted = (d, dx, dy) => d.replace(/(-?[\d.]+),(-?[\d.]+)/g, (_, x, y) => `${n3(+x + dx)},${n3(+y + dy)}`);
+var DeploymentDiagram = (_class6 = class _DeploymentDiagram extends SoftwareDiagram {
+  static __initStatic6() {this.meta = {
+    id: "uml-deployment-diagram",
+    name: "UML deployment diagram",
+    family: "network" /* Network */,
+    dimension: 2 /* Two */,
+    shape: "graph" /* Graph */,
+    description: "Nests devices, execution environments and their artifacts as UML node boxes, joined by communication paths labelled with protocols.",
+    tags: ["uml", "deployment", "node", "device", "execution environment", "artifact", "communication path", "infrastructure"],
+    sample: (seed) => SoftwareSamples.deployment(seed),
+    variants: {
+      orientation: ["horizontal" /* Horizontal */, "vertical" /* Vertical */],
+      routing: ["orthogonal" /* Orthogonal */, "curved" /* Curved */],
+      form: ["cube" /* Cube */, "flat" /* Flat */],
+      artifacts: ["symbol" /* Symbol */, "listed" /* Listed */]
+    }
+  }}
+  defaults() {
+    return {
+      nodeId: "id",
+      label: "label",
+      kind: "kind",
+      parent: "parent",
+      source: "source",
+      target: "target",
+      protocol: "protocol",
+      orientation: "horizontal" /* Horizontal */,
+      routing: "orthogonal" /* Orthogonal */,
+      form: "cube" /* Cube */,
+      artifacts: "symbol" /* Symbol */
+    };
+  }
+  legendItems() {
+    return this.palette.items();
+  }
+  #graph() {
+    const { nodeId, source, target } = this.options;
+    return SoftwareGraph.read(this.options.data, { nodeId, source, target });
+  }
+  table() {
+    const { source, target, protocol } = this.options;
+    return this.rowsOf(this.#graph().arcs.map((arc) => arc.raw), [source, target, protocol]);
+  }
+  /** Every element with its parent and children. A parent that is unknown, or that would close a loop, is ignored. */
+  static tree(graph, columns) {
+    const elements = new Map(graph.vertices.map(({ id, raw }) => {
+      const kind = String(_nullishCoalesce(raw[columns.kind], () => ( ""))).toLowerCase();
+      return [id, { id, raw, label: _nullishCoalesce(SoftwareGraph.text(raw[columns.label]), () => ( id)), kind: KINDS4.has(kind) ? kind : "node" /* Node */, parent: null, children: [] }];
+    }));
+    for (const element of elements.values()) {
+      const holder = elements.get(_nullishCoalesce(SoftwareGraph.text(element.raw[columns.parent]), () => ( TOP)));
+      let up = _nullishCoalesce(holder, () => ( null));
+      while (up && up !== element) up = up.parent;
+      if (!holder || up) continue;
+      element.parent = holder;
+      holder.children.push(element);
+    }
+    return elements;
+  }
+  /**
+   * Sizes every node from the inside out, then places it from the outside in. The children of one node are layered by
+   * the paths among them, and a path between elements of different nodes is drawn at the level where their holders are siblings.
+   */
+  static layout(elements, links, look) {
+    const { vertical, routing, depth, listed } = look;
+    const symbol = (element) => element.kind === Artifact && !element.children.length;
+    const named = (element) => listed && symbol(element) && !!element.parent;
+    const chain = (id) => {
+      const out = [];
+      for (let element = _nullishCoalesce(elements.get(id), () => ( null)); element; element = element.parent) if (!named(element)) out.unshift(element);
+      return out;
+    };
+    const levels = /* @__PURE__ */ new Map();
+    links.forEach((link, index) => {
+      const a = chain(link.source), b = chain(link.target);
+      let k = 0;
+      while (k < a.length && k < b.length && a[k] === b[k]) k++;
+      if (k >= a.length || k >= b.length) return;
+      const level = k ? a[k - 1].id : TOP;
+      levels.set(level, [..._nullishCoalesce(levels.get(level), () => ( [])), { link: index, source: a[k].id, target: b[k].id }]);
+    });
+    const size = (element) => {
+      if (symbol(element)) {
+        const title2 = SoftwareText.fit(element.label, 110, SIZE6);
+        return { element, symbol: true, width: Math.max(64, SoftwareText.width(title2, SIZE6) + 32), height: 24, head: 0, title: title2, names: [], inner: null };
+      }
+      const title = SoftwareText.fit(element.label, 150, 11, true), names = element.children.filter(named).map((child) => SoftwareText.fit(child.label, 140, 10)).filter(Boolean);
+      const head = STEREOTYPE[element.kind] ? 30 : 22, kids = element.children.filter((child) => !named(child)), inner = kids.length ? group(kids, element.id) : null;
+      const text = Math.max(SoftwareText.width(STEREOTYPE[element.kind], 9), SoftwareText.width(title, 11, true), ...names.map((name) => SoftwareText.width(name, 10)));
+      return {
+        element,
+        symbol: false,
+        head,
+        title,
+        names,
+        inner,
+        width: Math.max(80, text + 2 * PAD2, (_nullishCoalesce(_optionalChain([inner, 'optionalAccess', _23 => _23.plan, 'access', _24 => _24.width]), () => ( 0))) + 2 * PAD2),
+        height: head + (names.length ? names.length * LEAD + 2 : 0) + (inner ? inner.plan.height + PAD2 : names.length ? 4 : 2)
+      };
+    };
+    const group = (kids, level, room) => {
+      const sized = kids.map(size), own = _nullishCoalesce(levels.get(level), () => ( [])), words = own.map(({ link }) => SoftwareText.width(links[link].text, 10));
+      const wide = Math.max(0, ...sized.filter((entry) => entry.symbol).map((entry) => entry.width));
+      for (const entry of sized) if (entry.symbol) entry.width = wide;
+      const plan = SoftwareWiring.build({
+        nodes: sized.map((entry) => {
+          const width = entry.width + (entry.symbol ? 0 : depth), height = entry.height + (entry.symbol ? 0 : depth);
+          return { id: entry.element.id, along: vertical ? height : width, across: vertical ? width : height, ports: "spread" };
+        }),
+        links: own,
+        vertical,
+        routing,
+        nodeGap: 12,
+        inset: 0,
+        room,
+        rankGap: vertical ? 30 : Math.max(36, Math.min(110, Math.max(0, ...words) + 20)),
+        labelRoom: words.map((width) => width ? width + 16 : 0)
+      });
+      return { sized, plan, links: own.map(({ link }) => link) };
+    };
+    const blocks = [], runs = [], areas = /* @__PURE__ */ new Map();
+    const put = (inner, left, top, level) => {
+      areas.set(level, { x0: left, y0: top, x1: left + inner.plan.width, y1: top + inner.plan.height });
+      inner.plan.wires.forEach((wire, i) => runs.push({
+        key: `${level}/${i}`,
+        level,
+        link: inner.links[i],
+        wire: { ...wire, d: shifted(wire.d, left, top), points: wire.points.map(([x, y]) => [x + left, y + top]), tip: [wire.tip[0] + left, wire.tip[1] + top] }
+      }));
+      for (const entry of inner.sized) {
+        const box = inner.plan.boxes.get(entry.element.id), x = left + box.x - box.width / 2, y = top + box.y - box.height / 2 + (entry.symbol ? 0 : depth);
+        blocks.push({ element: entry.element, symbol: entry.symbol, level, x, y, width: entry.width, height: entry.height, title: entry.title, names: entry.names });
+        if (entry.inner) put(entry.inner, x + (entry.width - entry.inner.plan.width) / 2, y + entry.head + (entry.names.length ? entry.names.length * LEAD + 2 : 0), entry.element.id);
+      }
+    };
+    const root = group([...elements.values()].filter((element) => !element.parent), TOP, look.room);
+    put(root, 0, 0, TOP);
+    return { blocks, runs, areas, width: root.plan.width, height: root.plan.height };
+  }
+  draw(ctx) {
+    const { orientation, routing, form, artifacts, label, kind, parent, protocol } = this.options;
+    const vertical = orientation === "vertical" /* Vertical */, depth = form === "cube" /* Cube */ ? DEPTH : 0, { theme, palette } = ctx;
+    const graph = this.#graph(), elements = _DeploymentDiagram.tree(graph, { label, kind, parent });
+    const words = graph.arcs.map((arc) => SoftwareText.fit(_nullishCoalesce(SoftwareGraph.text(arc.raw[protocol]), () => ( "")), 90, 10));
+    const plan = _DeploymentDiagram.layout(elements, graph.arcs.map((arc, i) => ({ source: arc.source, target: arc.target, text: words[i] })), {
+      vertical,
+      routing,
+      depth,
+      listed: artifacts === "listed" /* Listed */,
+      room: vertical ? { length: ctx.plot.height, breadth: ctx.plot.width } : { length: ctx.plot.width, breadth: ctx.plot.height }
+    });
+    const stage = this.stage(ctx, plan.width, plan.height);
+    const shapes = [], labels = [];
+    for (const { element, symbol, x, y, width: w, height: h, title, names } of plan.blocks) {
+      const sort = symbol ? NAME4.artifact : NAME4[element.kind], fill = palette.color(sort), main = { key: element.id, raw: element.raw };
+      const held = element.children.map((child) => child.label);
+      const tip = { title: element.label, color: fill, rows: [["Kind", sort], ...element.parent ? [["On", element.parent.label]] : [], ...held.length ? [["Holds", held.join(", ")]] : []] };
+      if (symbol) {
+        const on = palette.inkOn(fill), gx = x + w - 16, gy = y + 6;
+        shapes.push({ ...main, d: SoftwareShapes.rect(x, y, w, h, 2), fill, tip });
+        shapes.push({ key: `${element.id}/page`, d: `M${n3(gx)},${n3(gy)}h5.5l3.5,3.5v8.5h-9ZM${n3(gx + 5.5)},${n3(gy)}v3.5h3.5`, stroke: on, strokeWidth: 1.2 });
+        labels.push({ key: element.id, x: x + 8, y: y + h / 2 + 3.5, text: title, size: SIZE6, fill: on });
+        continue;
+      }
+      if (depth) {
+        shapes.push({ key: `${element.id}/top`, d: SoftwareShapes.polygon([[x, y], [x + depth, y - depth], [x + w + depth, y - depth], [x + w, y]]), fill, opacity: 0.5, stroke: theme.surface, strokeWidth: 1 });
+        shapes.push({ key: `${element.id}/side`, d: SoftwareShapes.polygon([[x + w, y], [x + w + depth, y - depth], [x + w + depth, y + h - depth], [x + w, y + h]]), fill, opacity: 0.8, stroke: theme.surface, strokeWidth: 1 });
+      }
+      shapes.push({ ...main, d: SoftwareShapes.rect(x, y, w, h), fill, opacity: 0.2, stroke: theme.surface, strokeWidth: 1, tip });
+      const stereotype = STEREOTYPE[element.kind], base = y + (stereotype ? 30 : 22);
+      if (stereotype) labels.push({ key: `${element.id}/kind`, x: x + w / 2, y: y + 12, text: stereotype, anchor: "middle", size: 9, fill: theme.inkSecondary });
+      labels.push({ key: element.id, x: x + w / 2, y: base - 6, text: title, anchor: "middle", size: 11, weight: 600 });
+      names.forEach((name, i) => labels.push({ key: `${element.id}/${i}`, x: x + w / 2, y: base + 8 + i * LEAD, text: name, anchor: "middle", size: 10 }));
+    }
+    const marks = [];
+    for (const [level, area] of plan.areas) {
+      const own = plan.runs.filter((run) => run.level === level), placer = new SoftwarePlacer(area);
+      for (const block of plan.blocks) {
+        if (block.level !== level) continue;
+        const lift = block.symbol ? 0 : depth;
+        placer.block({ x0: block.x - 2, y0: block.y - lift - 2, x1: block.x + block.width + lift + 2, y1: block.y + block.height + 2 });
+      }
+      for (const run of own) placer.avoid(run.wire.points);
+      marks.push(...this.wireLabels(placer, own.map((run) => run.wire), (i) => words[own[i].link]).map((mark) => ({ ...mark, key: `${level}/${mark.key}` })));
+    }
+    const wires = plan.runs.map(({ key: key2, link, wire }) => {
+      const arc = graph.arcs[link];
+      return { key: key2, raw: arc.raw, d: wire.d, tip: { title: `${elements.get(arc.source).label} \u2194 ${elements.get(arc.target).label}`, rows: words[link] ? [["Protocol", words[link]]] : [] } };
+    });
+    this.paths(stage, ctx, "nodes", shapes);
+    this.wires(stage, ctx, wires);
+    this.texts(stage, ctx, "node-text", labels);
+    this.texts(stage, ctx, "wire-text", marks);
+  }
+}, _class6.__initStatic6(), _class6);
 
 // src/charts/softwarediagrams/DifferentialFlameGraph.ts
 
@@ -1513,8 +2069,8 @@ var STEPS = [-1, -0.5, 0, 0.5, 1];
 var percent = _d3.format.call(void 0, ".1%");
 var points = (delta) => `${delta > 0 ? "+" : delta < 0 ? "\u2212" : ""}${_d3.format.call(void 0, ".1f")(Math.abs(delta) * 100)} pp`;
 var isRecord2 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-var DifferentialFlameGraph = (_class5 = class _DifferentialFlameGraph extends SoftwareDiagram {
-  static __initStatic5() {this.meta = {
+var DifferentialFlameGraph = (_class7 = class _DifferentialFlameGraph extends SoftwareDiagram {
+  static __initStatic7() {this.meta = {
     id: "differential-flame-graph",
     name: "Differential flame graph",
     family: "hierarchy" /* Hierarchy */,
@@ -1600,16 +2156,16 @@ var DifferentialFlameGraph = (_class5 = class _DifferentialFlameGraph extends So
       { key: "high", x: x + STEPS.length * 16 + 5, y: y + 9, text: points(most), size: 9.5, fill: theme.inkSecondary }
     ] : []);
   }
-}, _class5.__initStatic5(), _class5);
+}, _class7.__initStatic7(), _class7);
 
 // src/charts/softwarediagrams/MemoryMap.ts
-var SIZE5 = 10;
+var SIZE7 = 10;
 var GAP = 14;
 var MIN = 4;
 var UNITS = ["B", "KiB", "MiB", "GiB", "TiB"];
 var hex = (address) => `0x${Math.max(0, Math.round(address)).toString(16).toUpperCase().padStart(8, "0")}`;
-var MemoryMap = (_class6 = class _MemoryMap extends SoftwareDiagram {
-  static __initStatic6() {this.meta = {
+var MemoryMap = (_class8 = class _MemoryMap extends SoftwareDiagram {
+  static __initStatic8() {this.meta = {
     id: "memory-map",
     name: "Memory map",
     family: "composition" /* Composition */,
@@ -1639,14 +2195,14 @@ var MemoryMap = (_class6 = class _MemoryMap extends SoftwareDiagram {
   }
   /** Rows with a positive length, by ascending start address. `used` is clamped to the region. */
   static regions(rows, columns) {
-    const list = (Array.isArray(rows) ? rows : []).flatMap((row) => {
+    const list2 = (Array.isArray(rows) ? rows : []).flatMap((row) => {
       if (!row || typeof row !== "object") return [];
       const start = SoftwareGraph.number(row[columns.start], Number.NaN), size = SoftwareGraph.number(row[columns.size], Number.NaN);
       if (!Number.isFinite(start) || !(size > 0)) return [];
       const used = row[columns.used] === null || row[columns.used] === void 0 ? Number.NaN : SoftwareGraph.number(row[columns.used], Number.NaN);
       return [{ row, start, size, end: start + size, used: Number.isFinite(used) ? Math.max(0, Math.min(size, used)) : null, name: _nullishCoalesce(SoftwareGraph.text(row[columns.region]), () => ( hex(start))), kind: _nullishCoalesce(SoftwareGraph.text(row[columns.group]), () => ( "Memory")) }];
     });
-    return list.sort((a, b) => a.start - b.start);
+    return list2.sort((a, b) => a.start - b.start);
   }
   /**
    * Regions and the gaps between them along `room` px. A gap is `GAP` px whatever it spans; a region gets room in step
@@ -1708,7 +2264,7 @@ var MemoryMap = (_class6 = class _MemoryMap extends SoftwareDiagram {
       if (split && share > 0) shapes.push({ key: `used-${i}`, d: slab(from, from + (to - from) * share, 0, thick, 2), fill });
       if (meter && share !== null) meters.push({ key: `track-${i}`, d: slab(from, to, thick + 4, 5), fill: theme.grid }, { key: `level-${i}`, d: slab(from, from + (to - from) * share, thick + 4, 5), fill: theme.inkSecondary });
     });
-    const marks = spans.flatMap((span, i) => span.region ? [{ at: span.from, address: span.region.start }, ..._optionalChain([spans, 'access', _22 => _22[i + 1], 'optionalAccess', _23 => _23.region]) ? [] : [{ at: span.to, address: span.region.end }]] : []);
+    const marks = spans.flatMap((span, i) => span.region ? [{ at: span.from, address: span.region.start }, ..._optionalChain([spans, 'access', _25 => _25[i + 1], 'optionalAccess', _26 => _26.region]) ? [] : [{ at: span.to, address: span.region.end }]] : []);
     const room = vertical ? 11 : SoftwareText.width(hex(0), 9.5) + 14, far = vertical ? x0 : y0 + thick;
     const seat = (at2) => vertical ? along(at2) : Math.max(x0 + room / 2, Math.min(x0 + length - room / 2, along(at2)));
     const ticks = [];
@@ -1724,21 +2280,21 @@ var MemoryMap = (_class6 = class _MemoryMap extends SoftwareDiagram {
       for (let i = 0; i < ys.length; i++) ys[i] = Math.max(ys[i], i ? ys[i - 1] + 12 : 6);
       for (let i = ys.length - 1; i >= 0; i--) ys[i] = Math.min(ys[i], i < ys.length - 1 ? ys[i + 1] - 12 : height - 4);
       kept.forEach((span, i) => {
-        const key2 = `name-${spans.indexOf(span)}`, name = SoftwareText.fit(title(span), width - x, SIZE5), note = span.region ? _MemoryMap.bytes(span.bytes) : "", after = x + SoftwareText.width(name, SIZE5) + 8;
-        names.push({ key: key2, x, y: ys[i] + 3.5, text: name, size: SIZE5, fill: span.region ? theme.ink : theme.inkMuted });
+        const key2 = `name-${spans.indexOf(span)}`, name = SoftwareText.fit(title(span), width - x, SIZE7), note = span.region ? _MemoryMap.bytes(span.bytes) : "", after = x + SoftwareText.width(name, SIZE7) + 8;
+        names.push({ key: key2, x, y: ys[i] + 3.5, text: name, size: SIZE7, fill: span.region ? theme.ink : theme.inkMuted });
         if (note && after + SoftwareText.width(note, 9.5) <= width) names.push({ key: `${key2}/size`, x: after, y: ys[i] + 3.5, text: note, size: 9.5, fill: theme.inkMuted });
         leaders.push({ key: key2, d: `M${x - 11},${along((span.from + span.to) / 2)}L${x - 4},${ys[i]}`, stroke: theme.axis, strokeWidth: 1 });
       });
     } else {
       const levels = Math.max(1, Math.floor((y0 - 4) / 13)), taken = [];
       for (const span of [...spans].reverse()) {
-        const x = along((span.from + span.to) / 2), text = SoftwareText.fit(title(span), width - x - 4, SIZE5), to = x + 4 + SoftwareText.width(text, SIZE5);
+        const x = along((span.from + span.to) / 2), text = SoftwareText.fit(title(span), width - x - 4, SIZE7), to = x + 4 + SoftwareText.width(text, SIZE7);
         if (!text) continue;
         const level = Array.from({ length: levels }, (_, k) => k).find((k) => !taken.some((other) => other.level === k && other.from < to + 6 || other.level > k && other.x >= x && other.x <= to + 2));
         if (level === void 0) continue;
         taken.push({ from: x, to, level, x });
         const y = y0 - 7 - level * 13, key2 = `name-${spans.indexOf(span)}`;
-        names.push({ key: key2, x: x + 4, y, text, size: SIZE5, fill: span.region ? theme.ink : theme.inkMuted });
+        names.push({ key: key2, x: x + 4, y, text, size: SIZE7, fill: span.region ? theme.ink : theme.inkMuted });
         leaders.push({ key: key2, d: `M${x},${y0 - 2}V${y - 8}`, stroke: theme.axis, strokeWidth: 1 });
       }
     }
@@ -1750,14 +2306,14 @@ var MemoryMap = (_class6 = class _MemoryMap extends SoftwareDiagram {
     this.texts(ctx, ctx, "axis-addresses", addresses);
     this.texts(ctx, ctx, "names", names);
   }
-}, _class6.__initStatic6(), _class6);
+}, _class8.__initStatic8(), _class8);
 
 // src/charts/softwarediagrams/NassiLayout.ts
-var SIZE6 = 10.5;
+var SIZE8 = 10.5;
 var INDENT = 16;
 var TWO_WAY = 1.5;
 var MANY_WAY = 1.8;
-var KINDS4 = new Set(Object.values(NassiKind));
+var KINDS5 = new Set(Object.values(NassiKind));
 var { Statement, Sequence, If, Case, While, Until } = NassiKind;
 var isRecord3 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var selects = (node) => node.kind === If || node.kind === Case;
@@ -1769,10 +2325,10 @@ var NassiLayout = class _NassiLayout {
     const visit = (raw, key2, depth, branch) => {
       if (!isRecord3(raw) || seen.has(raw)) return null;
       seen.add(raw);
-      const list = Array.isArray(raw[nodeChildren]) ? raw[nodeChildren] : [], stated = String(_nullishCoalesce(raw[kind], () => ( ""))).toLowerCase();
-      const sort = branch ? Sequence : KINDS4.has(stated) && (list.length || stated === While || stated === Until || stated === Statement) ? stated : list.length ? Sequence : Statement;
-      const node = { key: key2, text: raw[name] === null || raw[name] === void 0 ? "" : String(raw[name]), kind: sort === Statement && list.length ? Sequence : sort, children: [], depth, raw };
-      node.children = list.flatMap((child, i) => _nullishCoalesce(visit(child, `${key2}/${i}`, depth + (node.kind === Sequence ? 0 : 1), selects(node)), () => ( [])));
+      const list2 = Array.isArray(raw[nodeChildren]) ? raw[nodeChildren] : [], stated2 = String(_nullishCoalesce(raw[kind], () => ( ""))).toLowerCase();
+      const sort = branch ? Sequence : KINDS5.has(stated2) && (list2.length || stated2 === While || stated2 === Until || stated2 === Statement) ? stated2 : list2.length ? Sequence : Statement;
+      const node = { key: key2, text: raw[name] === null || raw[name] === void 0 ? "" : String(raw[name]), kind: sort === Statement && list2.length ? Sequence : sort, children: [], depth, raw };
+      node.children = list2.flatMap((child, i) => _nullishCoalesce(visit(child, `${key2}/${i}`, depth + (node.kind === Sequence ? 0 : 1), selects(node)), () => ( [])));
       return node;
     };
     if (Array.isArray(data)) return { key: "root", text: "", kind: Sequence, children: data.flatMap((child, i) => _nullishCoalesce(visit(child, `root/${i}`, 0, false), () => ( []))), depth: 0, raw: null };
@@ -1794,7 +2350,7 @@ var NassiLayout = class _NassiLayout {
     const cells = [];
     if (!root) return { cells, width, height: 0 };
     const total = Math.max(_nullishCoalesce(height, () => ( 0)), _NassiLayout.rows(root) * row);
-    const fit = (text, room, bold = false) => room > 14 ? SoftwareText.fit(text, room, SIZE6, bold) : "";
+    const fit = (text, room, bold = false) => room > 14 ? SoftwareText.fit(text, room, SIZE8, bold) : "";
     const box = (node, role, x, y, w, h, d, rules = "", texts = []) => {
       cells.push({ key: node.key, node, role, x, y, width: w, height: h, d, rules, texts: texts.filter((entry) => entry.text) });
     };
@@ -1839,9 +2395,9 @@ var NassiLayout = class _NassiLayout {
 };
 
 // src/charts/softwarediagrams/NassiShneidermanDiagram.ts
-var NAME4 = { statement: "Statement", sequence: "Sequence", if: "Selection", case: "Multi-way selection", while: "Pre-test loop", until: "Post-test loop" };
-var NassiShneidermanDiagram = (_class7 = class extends SoftwareDiagram {
-  static __initStatic7() {this.meta = {
+var NAME5 = { statement: "Statement", sequence: "Sequence", if: "Selection", case: "Multi-way selection", while: "Pre-test loop", until: "Post-test loop" };
+var NassiShneidermanDiagram = (_class9 = class extends SoftwareDiagram {
+  static __initStatic9() {this.meta = {
     id: "nassi-shneiderman-diagram",
     name: "Nassi-Shneiderman diagram",
     family: "hierarchy" /* Hierarchy */,
@@ -1891,7 +2447,7 @@ var NassiShneidermanDiagram = (_class7 = class extends SoftwareDiagram {
       fill: fill(cell),
       opacity: cell.role === "empty" ? 0.45 : void 0,
       raw: cell.node.raw,
-      tip: cell.role === "empty" ? void 0 : { title: cell.node.text || NAME4[cell.node.kind], rows: [["Kind", NAME4[cell.node.kind]], ["Depth", cell.node.depth], ...cell.role === "selection" ? [["Branches", cell.node.children.length]] : []] }
+      tip: cell.role === "empty" ? void 0 : { title: cell.node.text || NAME5[cell.node.kind], rows: [["Kind", NAME5[cell.node.kind]], ["Depth", cell.node.depth], ...cell.role === "selection" ? [["Branches", cell.node.children.length]] : []] }
     })));
     this.paths(stage, ctx, "rules", shown.filter((cell) => cell.rules).map((cell) => ({ key: cell.key, d: cell.rules, stroke: theme.surface, strokeWidth: 2 })));
     this.texts(stage, ctx, "block-text", shown.flatMap((cell) => cell.texts.map((text, i) => ({
@@ -1905,7 +2461,7 @@ var NassiShneidermanDiagram = (_class7 = class extends SoftwareDiagram {
       fill: cell.role === "statement" ? theme.ink : palette.inkOn(fill(cell))
     }))));
   }
-}, _class7.__initStatic7(), _class7);
+}, _class9.__initStatic9(), _class9);
 
 // src/charts/softwarediagrams/SoftwareTree.ts
 var SoftwareTree = class _SoftwareTree {
@@ -1938,11 +2494,11 @@ var SoftwareTree = class _SoftwareTree {
 };
 
 // src/charts/softwarediagrams/ParseTree.ts
-var SIZE7 = 11;
+var SIZE9 = 11;
 var BOX = 20;
 var isRecord4 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-var ParseTree = (_class8 = class _ParseTree extends SoftwareDiagram {
-  static __initStatic8() {this.meta = {
+var ParseTree = (_class10 = class _ParseTree extends SoftwareDiagram {
+  static __initStatic10() {this.meta = {
     id: "parse-tree",
     name: "Parse tree",
     family: "hierarchy" /* Hierarchy */,
@@ -1966,15 +2522,15 @@ var ParseTree = (_class8 = class _ParseTree extends SoftwareDiagram {
     const visit = (raw, key2) => {
       if (!isRecord4(raw) || seen.has(raw)) return null;
       seen.add(raw);
-      const list = Array.isArray(raw[nodeChildren]) ? raw[nodeChildren] : [];
-      return { key: key2, raw, text: raw[name] === null || raw[name] === void 0 ? "" : String(raw[name]), children: list.flatMap((child, i) => _nullishCoalesce(visit(child, `${key2}/${i}`), () => ( []))) };
+      const list2 = Array.isArray(raw[nodeChildren]) ? raw[nodeChildren] : [];
+      return { key: key2, raw, text: raw[name] === null || raw[name] === void 0 ? "" : String(raw[name]), children: list2.flatMap((child, i) => _nullishCoalesce(visit(child, `${key2}/${i}`), () => ( []))) };
     };
     return visit(data, "root");
   }
   /** Symbols placed across by the room their text needs and down by level, `row` px apart. Tokens share the last level unless they hang. */
   static layout(root, row, baseline = true, byHeight = false) {
     if (!root) return { spots: [], width: 0, height: 0 };
-    const wide = (symbol) => Math.max(BOX, SoftwareText.width(SoftwareText.fit(symbol.text, 96, SIZE7, true), SIZE7, true) + 12);
+    const wide = (symbol) => Math.max(BOX, SoftwareText.width(SoftwareText.fit(symbol.text, 96, SIZE9, true), SIZE9, true) + 12);
     const tree = SoftwareTree.place(root, (symbol) => symbol.children, (symbol) => wide(symbol) + 8), last = tree.height;
     const spots = [];
     const add = (node, parent) => {
@@ -2024,22 +2580,22 @@ var ParseTree = (_class8 = class _ParseTree extends SoftwareDiagram {
       key: spot.symbol.key,
       x: spot.x,
       y: spot.y + 4,
-      text: SoftwareText.fit(spot.symbol.text, 96, SIZE7, true),
+      text: SoftwareText.fit(spot.symbol.text, 96, SIZE9, true),
       anchor: "middle",
-      size: SIZE7,
+      size: SIZE9,
       weight: spot.token ? 600 : void 0,
       fill: spot.token ? palette.inkOn(fill(spot)) : theme.ink
     })));
   }
-}, _class8.__initStatic8(), _class8);
+}, _class10.__initStatic10(), _class10);
 
 // src/charts/softwarediagrams/PetriNet.ts
-var SIZE8 = 10;
+var SIZE10 = 10;
 var R2 = 16;
 var DOT = 2.6;
 var DOTS = [[], [[0, 0]], [[-5, 0], [5, 0]], [[0, -5.5], [-5.5, 4], [5.5, 4]], [[-5, -5], [5, -5], [-5, 5], [5, 5]], [[-6, -6], [6, -6], [0, 0], [-6, 6], [6, 6]]];
-var PetriNet = (_class9 = class _PetriNet extends SoftwareDiagram {
-  static __initStatic9() {this.meta = {
+var PetriNet = (_class11 = class _PetriNet extends SoftwareDiagram {
+  static __initStatic11() {this.meta = {
     id: "petri-net",
     name: "Petri net",
     family: "network" /* Network */,
@@ -2091,11 +2647,11 @@ var PetriNet = (_class9 = class _PetriNet extends SoftwareDiagram {
     const vertical = orientation === "vertical" /* Vertical */, bar = transitionForm === "bar" /* Bar */, { theme, palette } = ctx, ink = theme.inkSecondary;
     const graph = this.#graph(), marking = _PetriNet.marking(graph, { kind, tokens, weight });
     const names = new Map(graph.vertices.map(({ id, raw }) => [id, _nullishCoalesce(SoftwareGraph.text(raw[label]), () => ( id))]));
-    const lines = new Map(graph.vertices.map(({ id }) => [id, SoftwareText.wrap(names.get(id), vertical ? 96 : 62, SIZE8)]));
+    const lines = new Map(graph.vertices.map(({ id }) => [id, SoftwareText.wrap(names.get(id), vertical ? 96 : 62, SIZE10)]));
     const extent = (id) => !marking.transitions.has(id) ? [R2 * 2, R2 * 2] : !bar ? [26, 26] : vertical ? [36, 8] : [8, 36];
     const plan = SoftwareWiring.build({
       nodes: graph.vertices.map(({ id }) => {
-        const [width, height] = extent(id), text = lines.get(id), wide = Math.max(0, ...text.map((line) => SoftwareText.width(line, SIZE8)));
+        const [width, height] = extent(id), text = lines.get(id), wide = Math.max(0, ...text.map((line) => SoftwareText.width(line, SIZE10)));
         const room = vertical ? wide + 6 : text.length * 12 + 4;
         return { id, along: vertical ? height : width, across: vertical ? width : height, slot: (vertical ? width : height) + room, shift: -room / 2, span: vertical ? Math.max(height, text.length * 12) : Math.max(width, wide + 4), ports: marking.transitions.has(id) ? "spread" : "round" };
       }),
@@ -2112,8 +2668,8 @@ var PetriNet = (_class9 = class _PetriNet extends SoftwareDiagram {
       const { x, y, width: w, height: h } = plan.boxes.get(id), name = names.get(id), text = lines.get(id);
       text.forEach((line, i) => {
         const at2 = vertical ? { x: x + w / 2 + 6, y: y + 3.5 + (i - (text.length - 1) / 2) * 12, anchor: "start" } : { x, y: y + h / 2 + 13 + i * 12, anchor: "middle" };
-        labels.push({ key: `${id}/${i}`, ...at2, text: line, size: SIZE8, fill: theme.inkSecondary });
-        placer.block(SoftwarePlacer.text(at2.x, at2.y, line, SIZE8, at2.anchor));
+        labels.push({ key: `${id}/${i}`, ...at2, text: line, size: SIZE10, fill: theme.inkSecondary });
+        placer.block(SoftwarePlacer.text(at2.x, at2.y, line, SIZE10, at2.anchor));
       });
       if (marking.transitions.has(id)) {
         const state = marking.enabled.has(id) ? "Enabled" : "Not enabled", fill = palette.color(state);
@@ -2136,14 +2692,14 @@ var PetriNet = (_class9 = class _PetriNet extends SoftwareDiagram {
     this.texts(stage, ctx, "node-text", labels);
     this.texts(stage, ctx, "wire-text", this.wireLabels(placer, plan.wires, (i) => weights[i] > 1 ? String(weights[i]) : ""));
   }
-}, _class9.__initStatic9(), _class9);
+}, _class11.__initStatic11(), _class11);
 
 // src/charts/softwarediagrams/SignalFlowGraph.ts
-var SIZE9 = 10.5;
-var NAME5 = { forward: "Forward path", feedforward: "Feedforward", feedback: "Feedback", self: "Self loop" };
-var n3 = (value) => Math.round(value * 100) / 100;
-var SignalFlowGraph = (_class10 = class _SignalFlowGraph extends SoftwareDiagram {
-  static __initStatic10() {this.meta = {
+var SIZE11 = 10.5;
+var NAME6 = { forward: "Forward path", feedforward: "Feedforward", feedback: "Feedback", self: "Self loop" };
+var n4 = (value) => Math.round(value * 100) / 100;
+var SignalFlowGraph = (_class12 = class _SignalFlowGraph extends SoftwareDiagram {
+  static __initStatic12() {this.meta = {
     id: "signal-flow-graph",
     name: "Signal-flow graph",
     family: "network" /* Network */,
@@ -2191,8 +2747,8 @@ var SignalFlowGraph = (_class10 = class _SignalFlowGraph extends SoftwareDiagram
     const level = /* @__PURE__ */ new Map(), depth = { feedforward: 0, feedback: 0 };
     for (const side of ["feedforward", "feedback"]) {
       const taken = [];
-      const list = arcs.map((_, i) => i).filter((i) => sorts[i] === side).sort((a, b) => span(a)[1] - span(a)[0] - (span(b)[1] - span(b)[0]) || a - b);
-      for (const i of list) {
+      const list2 = arcs.map((_, i) => i).filter((i) => sorts[i] === side).sort((a, b) => span(a)[1] - span(a)[0] - (span(b)[1] - span(b)[0]) || a - b);
+      for (const i of list2) {
         const [lo, hi] = span(i);
         let at2 = 0;
         while (taken.some((other) => other.level === at2 && other.lo < hi && lo < other.hi)) at2++;
@@ -2212,7 +2768,7 @@ var SignalFlowGraph = (_class10 = class _SignalFlowGraph extends SoftwareDiagram
       const sort = sorts[index], xa = x.get(arc.source), xb = x.get(arc.target), dir = Math.sign(xb - xa) || 1, mid = (xa + xb) / 2;
       if (sort === "forward") {
         const end = xb - r - (endArrows ? 3 : 0);
-        return { index, sort, level: 0, d: `M${n3(xa + r)},${n3(y)}H${n3(end)}`, points: [[xa + r, y], [xb - r, y]], tip: endArrows ? [xb - r, y] : [mid + 4, y], angle: 0, label: { x: mid, y: y - 9, room: pitch - 2 * r - 10 } };
+        return { index, sort, level: 0, d: `M${n4(xa + r)},${n4(y)}H${n4(end)}`, points: [[xa + r, y], [xb - r, y]], tip: endArrows ? [xb - r, y] : [mid + 4, y], angle: 0, label: { x: mid, y: y - 9, room: pitch - 2 * r - 10 } };
       }
       const up = sort === "feedforward" || sort === "self" && selfAbove, side = up ? -1 : 1;
       if (sort === "self") {
@@ -2221,7 +2777,7 @@ var SignalFlowGraph = (_class10 = class _SignalFlowGraph extends SoftwareDiagram
           index,
           sort,
           level: 0,
-          d: `M${n3(xa - 5)},${n3(y + side * (r - 1))}A9.5,9.5 0 1 ${sweep} ${n3(xa + 5)},${n3(y + side * (r + (endArrows ? 2 : -1)))}`,
+          d: `M${n4(xa - 5)},${n4(y + side * (r - 1))}A9.5,9.5 0 1 ${sweep} ${n4(xa + 5)},${n4(y + side * (r + (endArrows ? 2 : -1)))}`,
           points: [[xa - 9, cy], [xa, cy + side * 9], [xa + 9, cy]],
           tip: endArrows ? [xa + 5, y + side * (r - 1)] : [xa + 4, cy + side * 9.5],
           angle: endArrows ? -side * 1.95 : 0,
@@ -2229,8 +2785,8 @@ var SignalFlowGraph = (_class10 = class _SignalFlowGraph extends SoftwareDiagram
         };
       }
       const at2 = level.get(index), top = y + side * reach(at2), corner = Math.min(square ? 5 : reach(at2) - r, Math.abs(xb - xa) / 2), foot = y + side * r, turn = side * dir < 0 ? 1 : 0;
-      const shoulder = (toward) => `A${n3(corner)},${n3(corner)} 0 0 ${turn} ${toward}`;
-      const d = `M${n3(xa)},${n3(foot)}V${n3(top - side * corner)}${shoulder(`${n3(xa + dir * corner)},${n3(top)}`)}H${n3(xb - dir * corner)}${shoulder(`${n3(xb)},${n3(top - side * corner)}`)}V${n3(foot + (endArrows ? side * 3 : 0))}`;
+      const shoulder = (toward) => `A${n4(corner)},${n4(corner)} 0 0 ${turn} ${toward}`;
+      const d = `M${n4(xa)},${n4(foot)}V${n4(top - side * corner)}${shoulder(`${n4(xa + dir * corner)},${n4(top)}`)}H${n4(xb - dir * corner)}${shoulder(`${n4(xb)},${n4(top - side * corner)}`)}V${n4(foot + (endArrows ? side * 3 : 0))}`;
       const turns = [0, 0.25, 0.5, 0.75, 1].map((share) => share * Math.PI / 2);
       const points2 = [
         [xa, foot],
@@ -2246,17 +2802,17 @@ var SignalFlowGraph = (_class10 = class _SignalFlowGraph extends SoftwareDiagram
     const { arc, nodeForm, arrow, label, gain } = this.options, { theme, palette } = ctx;
     const graph = this.#graph(), circle = nodeForm === "circle" /* Circle */;
     const names = new Map(graph.vertices.map(({ id, raw }) => [id, _nullishCoalesce(SoftwareGraph.text(raw[label]), () => ( id))]));
-    const radius = circle ? Math.max(11, Math.min(20, Math.max(0, ...[...names.values()].map((name) => SoftwareText.width(name, SIZE9))) / 2 + 5)) : 4;
+    const radius = circle ? Math.max(11, Math.min(20, Math.max(0, ...[...names.values()].map((name) => SoftwareText.width(name, SIZE11))) / 2 + 5)) : 4;
     const plan = _SignalFlowGraph.layout(graph.vertices.map((vertex) => vertex.id), graph.arcs, { width: ctx.plot.width, height: ctx.plot.height, radius, square: arc === "square" /* Square */, endArrows: arrow === "end" /* End */ });
     const stage = this.stage(ctx, plan.width, plan.height), placer = new SoftwarePlacer({ x0: 0, y0: 0, x1: plan.width, y1: plan.height });
     for (const x of plan.x.values()) placer.block({ x0: x - radius - 1, y0: plan.baseline - radius - 1, x1: x + radius + 1, y1: plan.baseline + radius + 1 });
     for (const branch of plan.branches) placer.avoid(branch.points);
     const gains = [];
     const wires = plan.branches.map((branch) => {
-      const link = graph.arcs[branch.index], stroke = palette.color(NAME5[branch.sort]), text = SoftwareText.fit(_nullishCoalesce(SoftwareGraph.text(link.raw[gain]), () => ( "")), branch.label.room, SIZE9);
-      const spot = text ? placer.claim([{ ...branch.label, box: SoftwarePlacer.text(branch.label.x, branch.label.y, text, SIZE9, "middle") }]) : null;
-      if (spot) gains.push({ key: link.key, x: spot.x, y: spot.y, text, anchor: "middle", size: SIZE9, halo: true });
-      return { key: link.key, d: branch.d, raw: link.raw, stroke, head: { d: SoftwareShapes.arrow(branch.tip, branch.angle, 8) }, tip: { title: `${names.get(link.source)} \u2192 ${names.get(link.target)}`, color: stroke, rows: [["Branch", NAME5[branch.sort]], ["Gain", text || "none"]] } };
+      const link = graph.arcs[branch.index], stroke = palette.color(NAME6[branch.sort]), text = SoftwareText.fit(_nullishCoalesce(SoftwareGraph.text(link.raw[gain]), () => ( "")), branch.label.room, SIZE11);
+      const spot = text ? placer.claim([{ ...branch.label, box: SoftwarePlacer.text(branch.label.x, branch.label.y, text, SIZE11, "middle") }]) : null;
+      if (spot) gains.push({ key: link.key, x: spot.x, y: spot.y, text, anchor: "middle", size: SIZE11, halo: true });
+      return { key: link.key, d: branch.d, raw: link.raw, stroke, head: { d: SoftwareShapes.arrow(branch.tip, branch.angle, 8) }, tip: { title: `${names.get(link.source)} \u2192 ${names.get(link.target)}`, color: stroke, rows: [["Branch", NAME6[branch.sort]], ["Gain", text || "none"]] } };
     });
     const shapes = [], labels = [];
     for (const { id, raw } of graph.vertices) {
@@ -2264,27 +2820,27 @@ var SignalFlowGraph = (_class10 = class _SignalFlowGraph extends SoftwareDiagram
       const into = graph.arcs.filter((link) => link.target === id).length, out = graph.arcs.filter((link) => link.source === id).length;
       shapes.push({ key: id, raw, d: SoftwareShapes.ellipse(x, y, radius - (circle ? 1 : 0)), fill: circle ? theme.surface : theme.ink, stroke: circle ? theme.inkSecondary : theme.surface, strokeWidth: 2, tip: { title: name, rows: [["Branches in", into], ["Branches out", out]] } });
       if (circle) {
-        labels.push({ key: id, x, y: y + 3.5, text: SoftwareText.fit(name, 2 * radius - 6, SIZE9), anchor: "middle", size: SIZE9 });
+        labels.push({ key: id, x, y: y + 3.5, text: SoftwareText.fit(name, 2 * radius - 6, SIZE11), anchor: "middle", size: SIZE11 });
         continue;
       }
-      const text = SoftwareText.fit(name, 70, SIZE9), half = SoftwareText.width(text, SIZE9) / 2 + 5;
+      const text = SoftwareText.fit(name, 70, SIZE11), half = SoftwareText.width(text, SIZE11) / 2 + 5;
       const spots = [["middle", x, y + 17], ["start", x + 5, y + 16], ["end", x - 5, y + 16], ["middle", x, y - 10], ["start", x + 5, y - 9], ["end", x - 5, y - 9], ["middle", x + half + 4, y + 17]];
-      const spot = placer.claim(spots.map(([anchor, lx, ly]) => ({ anchor, x: lx, y: ly, box: SoftwarePlacer.text(lx, ly, text, SIZE9, anchor) })));
-      if (spot && text) labels.push({ key: id, x: spot.x, y: spot.y, text, anchor: spot.anchor, size: SIZE9, weight: 600, halo: true });
+      const spot = placer.claim(spots.map(([anchor, lx, ly]) => ({ anchor, x: lx, y: ly, box: SoftwarePlacer.text(lx, ly, text, SIZE11, anchor) })));
+      if (spot && text) labels.push({ key: id, x: spot.x, y: spot.y, text, anchor: spot.anchor, size: SIZE11, weight: 600, halo: true });
     }
     this.wires(stage, ctx, wires);
     this.paths(stage, ctx, "nodes", shapes);
     this.texts(stage, ctx, "gains", gains);
     this.texts(stage, ctx, "node-text", labels);
   }
-}, _class10.__initStatic10(), _class10);
+}, _class12.__initStatic12(), _class12);
 
 // src/charts/softwarediagrams/TrieDiagram.ts
-var SIZE10 = 10.5;
+var SIZE12 = 10.5;
 var PILL = 18;
 var DOT2 = 5;
-var TrieDiagram = (_class11 = class _TrieDiagram extends SoftwareDiagram {
-  static __initStatic11() {this.meta = {
+var TrieDiagram = (_class13 = class _TrieDiagram extends SoftwareDiagram {
+  static __initStatic13() {this.meta = {
     id: "trie-diagram",
     name: "Trie",
     family: "hierarchy" /* Hierarchy */,
@@ -2334,7 +2890,7 @@ var TrieDiagram = (_class11 = class _TrieDiagram extends SoftwareDiagram {
     const { word, value, compression, orientation, labelAt } = this.options, { theme, palette } = ctx;
     const vertical = orientation === "vertical" /* Vertical */, inside = labelAt === "node" /* Node */;
     const root = _TrieDiagram.build(this.options.data, word, value, compression === "radix" /* Radix */);
-    const text = (node) => SoftwareText.fit(node.label, 84, SIZE10, true), wide = (node) => SoftwareText.width(text(node), SIZE10, true);
+    const text = (node) => SoftwareText.fit(node.label, 84, SIZE12, true), wide = (node) => SoftwareText.width(text(node), SIZE12, true);
     const pill = (node) => inside && node.label ? Math.max(PILL, wide(node) + 12) : DOT2 * 2;
     const tree = SoftwareTree.place(root, (node) => node.children, (node) => !vertical ? 22 : inside ? pill(node) + 8 : Math.max(18, (wide(node) + 10) / 0.6));
     const nodes = SoftwareTree.list(tree), depth = tree.height;
@@ -2365,24 +2921,24 @@ var TrieDiagram = (_class11 = class _TrieDiagram extends SoftwareDiagram {
     }));
     this.texts(stage, ctx, "node-text", nodes.filter((node) => node.data.label).map((node) => {
       const { x, y } = at2(node), data = node.data;
-      if (inside) return { key: data.key, x, y: y + 3.5, text: text(data), anchor: "middle", size: SIZE10, weight: 600, fill: data.terminal ? palette.inkOn(fill(data)) : theme.ink };
+      if (inside) return { key: data.key, x, y: y + 3.5, text: text(data), anchor: "middle", size: SIZE12, weight: 600, fill: data.terminal ? palette.inkOn(fill(data)) : theme.ink };
       const parent = links.find((link) => link.node === data).parent;
-      return vertical ? { key: data.key, x: parent.x + (x - parent.x) * 0.6, y: parent.y + (y - parent.y) * 0.6 + 3.5, text: text(data), anchor: "middle", size: SIZE10, weight: 600, halo: true } : { key: data.key, x: x - DOT2 - 5, y: y - 5, text: text(data), anchor: "end", size: SIZE10, weight: 600, halo: true };
+      return vertical ? { key: data.key, x: parent.x + (x - parent.x) * 0.6, y: parent.y + (y - parent.y) * 0.6 + 3.5, text: text(data), anchor: "middle", size: SIZE12, weight: 600, halo: true } : { key: data.key, x: x - DOT2 - 5, y: y - 5, text: text(data), anchor: "end", size: SIZE12, weight: 600, halo: true };
     }));
   }
-}, _class11.__initStatic11(), _class11);
+}, _class13.__initStatic13(), _class13);
 
 // src/charts/softwarediagrams/UseCaseDiagram.ts
 
-var SIZE11 = 10.5;
+var SIZE13 = 10.5;
 var TITLE = 22;
-var PAD = 12;
+var PAD3 = 12;
 var GAP2 = 58;
 var ROW2 = 12;
-var KINDS5 = new Set(Object.values(UseCaseLinkKind));
+var KINDS6 = new Set(Object.values(UseCaseLinkKind));
 var { Association, Include, Extend, Generalization } = UseCaseLinkKind;
-var UseCaseDiagram = (_class12 = class _UseCaseDiagram extends SoftwareDiagram {
-  static __initStatic12() {this.meta = {
+var UseCaseDiagram = (_class14 = class _UseCaseDiagram extends SoftwareDiagram {
+  static __initStatic14() {this.meta = {
     id: "uml-use-case-diagram",
     name: "UML use case diagram",
     family: "network" /* Network */,
@@ -2434,12 +2990,12 @@ var UseCaseDiagram = (_class12 = class _UseCaseDiagram extends SoftwareDiagram {
     const columns = Array.from({ length: Math.max(0, ...cases.map((id) => (_nullishCoalesce(depth.get(id), () => ( 0))) + 1)) }, (_, column) => cases.filter((id) => (_nullishCoalesce(depth.get(id), () => ( 0))) === column)).filter((column) => column.length);
     const lists = [parts.filter((part) => part.actor && !part.right).map((part) => part.id), ...columns, parts.filter((part) => part.actor && part.right).map((part) => part.id)];
     const place = /* @__PURE__ */ new Map();
-    const settle = (list) => list.forEach((id, i) => place.set(id, (i + 0.5) / list.length));
+    const settle = (list2) => list2.forEach((id, i) => place.set(id, (i + 0.5) / list2.length));
     lists.forEach(settle);
-    const order = (list, others) => {
-      const score = new Map(list.map((id) => [id, _nullishCoalesce(_d3.mean.call(void 0, near.get(id).filter((other) => others.has(other)), (other) => place.get(other)), () => ( place.get(id)))]));
-      list.sort((a, b) => score.get(a) - score.get(b));
-      settle(list);
+    const order = (list2, others) => {
+      const score = new Map(list2.map((id) => [id, _nullishCoalesce(_d3.mean.call(void 0, near.get(id).filter((other) => others.has(other)), (other) => place.get(other)), () => ( place.get(id)))]));
+      list2.sort((a, b) => score.get(a) - score.get(b));
+      settle(list2);
     };
     for (let sweep = 0; sweep < 4; sweep++) {
       for (let i = 1; i < lists.length; i++) order(lists[i], new Set(lists.slice(0, i).flat()));
@@ -2448,38 +3004,38 @@ var UseCaseDiagram = (_class12 = class _UseCaseDiagram extends SoftwareDiagram {
     const spots = /* @__PURE__ */ new Map();
     const size = (part) => {
       if (!part.actor) {
-        const lines2 = SoftwareText.wrap(part.label, 88, SIZE11);
-        return { lines: lines2, rx: Math.max(40, Math.max(0, ...lines2.map((line) => SoftwareText.width(line, SIZE11))) / 2 + 15), ry: lines2.length > 1 ? 21 : 17 };
+        const lines2 = SoftwareText.wrap(part.label, 88, SIZE13);
+        return { lines: lines2, rx: Math.max(40, Math.max(0, ...lines2.map((line) => SoftwareText.width(line, SIZE13))) / 2 + 15), ry: lines2.length > 1 ? 21 : 17 };
       }
-      const lines = [SoftwareText.fit(part.label, 104, SIZE11, true)];
-      return boxed ? { lines, rx: Math.max(28, SoftwareText.width(lines[0], SIZE11, true) / 2 + 8), ry: 17 } : { lines, rx: 14, ry: 15 };
+      const lines = [SoftwareText.fit(part.label, 104, SIZE13, true)];
+      return boxed ? { lines, rx: Math.max(28, SoftwareText.width(lines[0], SIZE13, true) / 2 + 8), ry: 17 } : { lines, rx: 14, ry: 15 };
     };
     const sized = new Map(parts.map((part) => [part.id, size(part)]));
     const [left, right] = [lists[0], lists.at(-1)];
-    const reach = (list) => Math.max(0, ...list.map((id) => Math.max(sized.get(id).rx, boxed ? 0 : SoftwareText.width(sized.get(id).lines[0], SIZE11, true) / 2)));
+    const reach = (list2) => Math.max(0, ...list2.map((id) => Math.max(sized.get(id).rx, boxed ? 0 : SoftwareText.width(sized.get(id).lines[0], SIZE13, true) / 2)));
     const [leftRoom, rightRoom] = [left.length ? 2 * reach(left) + 36 : 0, right.length ? 2 * reach(right) + 36 : 0];
     const widths = columns.map((column) => 2 * Math.max(...column.map((id) => sized.get(id).rx)));
     const pitches = columns.map((column) => 2 * Math.max(...column.map((id) => sized.get(id).ry)) + ROW2);
     const inner = Math.max(0, ...columns.map((column, c) => column.length * pitches[c] - ROW2));
-    const frame = columns.length ? { x: leftRoom, y: 0, width: 2 * PAD + widths.reduce((a, b) => a + b, 0) + GAP2 * (columns.length - 1), height: TITLE + 2 * PAD + inner } : null;
+    const frame = columns.length ? { x: leftRoom, y: 0, width: 2 * PAD3 + widths.reduce((a, b) => a + b, 0) + GAP2 * (columns.length - 1), height: TITLE + 2 * PAD3 + inner } : null;
     const [above, below] = boxed ? [17, 17] : [15, 30], step = above + below + ROW2;
-    const height = Math.max(_nullishCoalesce(_optionalChain([frame, 'optionalAccess', _24 => _24.height]), () => ( 0)), Math.max(left.length, right.length) * step - ROW2);
+    const height = Math.max(_nullishCoalesce(_optionalChain([frame, 'optionalAccess', _27 => _27.height]), () => ( 0)), Math.max(left.length, right.length) * step - ROW2);
     if (frame) frame.y = (height - frame.height) / 2;
-    let x = leftRoom + PAD;
+    let x = leftRoom + PAD3;
     columns.forEach((column, c) => {
-      const top = frame.y + TITLE + PAD + (inner - (column.length * pitches[c] - ROW2)) / 2;
+      const top = frame.y + TITLE + PAD3 + (inner - (column.length * pitches[c] - ROW2)) / 2;
       column.forEach((id, row) => spots.set(id, { part: byId.get(id), x: x + widths[c] / 2, y: top + (pitches[c] - ROW2) / 2 + row * pitches[c], ...sized.get(id), column: c, row }));
       x += widths[c] + GAP2;
     });
-    const stand = (list, at2, column) => {
-      const wanted = list.map((id, i) => _nullishCoalesce(_d3.mean.call(void 0, near.get(id).filter((other) => spots.has(other) && !byId.get(other).actor), (other) => spots.get(other).y), () => ( (i + 0.5) / list.length * height)));
-      for (let i = 0; i < list.length; i++) wanted[i] = Math.max(wanted[i], i ? wanted[i - 1] + step : above);
-      for (let i = list.length - 1; i >= 0; i--) wanted[i] = Math.min(wanted[i], i < list.length - 1 ? wanted[i + 1] - step : height - below);
-      list.forEach((id, row) => spots.set(id, { part: byId.get(id), x: at2, y: wanted[row], ...sized.get(id), column, row }));
+    const stand = (list2, at2, column) => {
+      const wanted = list2.map((id, i) => _nullishCoalesce(_d3.mean.call(void 0, near.get(id).filter((other) => spots.has(other) && !byId.get(other).actor), (other) => spots.get(other).y), () => ( (i + 0.5) / list2.length * height)));
+      for (let i = 0; i < list2.length; i++) wanted[i] = Math.max(wanted[i], i ? wanted[i - 1] + step : above);
+      for (let i = list2.length - 1; i >= 0; i--) wanted[i] = Math.min(wanted[i], i < list2.length - 1 ? wanted[i + 1] - step : height - below);
+      list2.forEach((id, row) => spots.set(id, { part: byId.get(id), x: at2, y: wanted[row], ...sized.get(id), column, row }));
     };
     stand(left, leftRoom / 2 - 6, -1);
-    stand(right, leftRoom + (_nullishCoalesce(_optionalChain([frame, 'optionalAccess', _25 => _25.width]), () => ( 0))) + rightRoom / 2 + 6, columns.length);
-    return { spots, boundary: frame, width: leftRoom + (_nullishCoalesce(_optionalChain([frame, 'optionalAccess', _26 => _26.width]), () => ( 0))) + rightRoom, height };
+    stand(right, leftRoom + (_nullishCoalesce(_optionalChain([frame, 'optionalAccess', _28 => _28.width]), () => ( 0))) + rightRoom / 2 + 6, columns.length);
+    return { spots, boundary: frame, width: leftRoom + (_nullishCoalesce(_optionalChain([frame, 'optionalAccess', _29 => _29.width]), () => ( 0))) + rightRoom, height };
   }
   /** Points from the outline of `a` to the outline of `b`, bowed sideways by `bulge`. */
   static link(a, b, bulge = 0) {
@@ -2511,10 +3067,10 @@ var UseCaseDiagram = (_class12 = class _UseCaseDiagram extends SoftwareDiagram {
       return { id, raw, actor, label: _nullishCoalesce(SoftwareGraph.text(raw[label]), () => ( id)), right: actor && actorSide === "split" /* Split */ && String(_nullishCoalesce(raw[role], () => ( ""))).toLowerCase() === "secondary" };
     });
     const plan = _UseCaseDiagram.layout(parts, graph.arcs, boxed), stage = this.stage(ctx, plan.width, plan.height);
-    const held = this.options.data, system = _nullishCoalesce(this.options.system, () => ( (Array.isArray(held) ? null : SoftwareGraph.text(_optionalChain([held, 'optionalAccess', _27 => _27.system])))));
+    const held = this.options.data, system = _nullishCoalesce(this.options.system, () => ( (Array.isArray(held) ? null : SoftwareGraph.text(_optionalChain([held, 'optionalAccess', _30 => _30.system])))));
     const frame = plan.boundary;
     this.paths(stage, ctx, "boundary", frame ? [{ key: "system", d: SoftwareShapes.rect(frame.x, frame.y, frame.width, frame.height, 6), fill: theme.grid, opacity: 0.45 }] : []);
-    this.texts(stage, ctx, "boundary-name", frame && system ? [{ key: "system", x: frame.x + PAD, y: frame.y + 16, text: SoftwareText.fit(system, frame.width - 2 * PAD, 11, true), size: 11, weight: 600 }] : []);
+    this.texts(stage, ctx, "boundary-name", frame && system ? [{ key: "system", x: frame.x + PAD3, y: frame.y + 16, text: SoftwareText.fit(system, frame.width - 2 * PAD3, 11, true), size: 11, weight: 600 }] : []);
     const placer = new SoftwarePlacer(), shapes = [], labels = [];
     const degree = (id) => graph.arcs.filter((arc) => arc.source === id || arc.target === id).length;
     for (const spot of plan.spots.values()) {
@@ -2523,22 +3079,22 @@ var UseCaseDiagram = (_class12 = class _UseCaseDiagram extends SoftwareDiagram {
       if (!part.actor) {
         const fill = palette.color("Use case");
         shapes.push({ ...main, d: SoftwareShapes.ellipse(x, y, rx, ry), fill, tip: { title: part.label, color: fill, rows: [["Kind", "Use case"], ["Relations", degree(part.id)]] } });
-        lines.forEach((line, i) => labels.push({ key: `${part.id}/${i}`, x, y: y + 3.5 + (i - (lines.length - 1) / 2) * 12, text: line, anchor: "middle", size: SIZE11, fill: palette.inkOn(fill) }));
+        lines.forEach((line, i) => labels.push({ key: `${part.id}/${i}`, x, y: y + 3.5 + (i - (lines.length - 1) / 2) * 12, text: line, anchor: "middle", size: SIZE13, fill: palette.inkOn(fill) }));
         continue;
       }
       const tip = { title: part.label, rows: [["Kind", "Actor"], ["Relations", degree(part.id)]] };
       if (boxed) {
         const fill = palette.color("Actor");
         shapes.push({ ...main, d: SoftwareShapes.rect(x - rx, y - ry, 2 * rx, 2 * ry, 3), fill, tip: { ...tip, color: fill } });
-        labels.push({ key: `${part.id}/kind`, x, y: y - 3, text: "\xABactor\xBB", anchor: "middle", size: 9, fill: palette.inkOn(fill) }, { key: `${part.id}/0`, x, y: y + 10, text: lines[0], anchor: "middle", size: SIZE11, weight: 600, fill: palette.inkOn(fill) });
+        labels.push({ key: `${part.id}/kind`, x, y: y - 3, text: "\xABactor\xBB", anchor: "middle", size: 9, fill: palette.inkOn(fill) }, { key: `${part.id}/0`, x, y: y + 10, text: lines[0], anchor: "middle", size: SIZE13, weight: 600, fill: palette.inkOn(fill) });
       } else {
         shapes.push({ ...main, d: SoftwareShapes.actor(x, y - ry, 2 * ry), fill: theme.surface, stroke: ink, strokeWidth: 2, tip });
-        labels.push({ key: `${part.id}/0`, x, y: y + ry + 12, text: lines[0], anchor: "middle", size: SIZE11, weight: 600 });
-        placer.block(SoftwarePlacer.text(x, y + ry + 12, lines[0], SIZE11, "middle", true));
+        labels.push({ key: `${part.id}/0`, x, y: y + ry + 12, text: lines[0], anchor: "middle", size: SIZE13, weight: 600 });
+        placer.block(SoftwarePlacer.text(x, y + ry + 12, lines[0], SIZE13, "middle", true));
       }
     }
     const drawn = graph.arcs.flatMap((arc) => {
-      const a = plan.spots.get(arc.source), b = plan.spots.get(arc.target), stated = String(_nullishCoalesce(arc.raw[linkKind], () => ( ""))).toLowerCase(), sort = KINDS5.has(stated) ? stated : Association;
+      const a = plan.spots.get(arc.source), b = plan.spots.get(arc.target), stated2 = String(_nullishCoalesce(arc.raw[linkKind], () => ( ""))).toLowerCase(), sort = KINDS6.has(stated2) ? stated2 : Association;
       const stacked = a.column === b.column && Math.abs(a.row - b.row) > 1;
       const points2 = arc.source === arc.target ? [] : _UseCaseDiagram.link(a, b, stacked ? (a.column < 0 ? -1 : 1) * (Math.max(a.rx, b.rx) + 22) : 0);
       return points2.length > 1 ? [{ arc, a, b, sort, points: points2 }] : [];
@@ -2570,7 +3126,7 @@ var UseCaseDiagram = (_class12 = class _UseCaseDiagram extends SoftwareDiagram {
     this.texts(stage, ctx, "node-text", labels);
     this.texts(stage, ctx, "stereotypes", marks);
   }
-}, _class12.__initStatic12(), _class12);
+}, _class14.__initStatic14(), _class14);
 
 // src/charts/softwarediagrams/index.ts
 var softwarediagramsCatalog = [
@@ -2585,7 +3141,9 @@ var softwarediagramsCatalog = [
   CallGraph,
   SignalFlowGraph,
   ParseTree,
-  TrieDiagram
+  TrieDiagram,
+  ComponentDiagram,
+  DeploymentDiagram
 ];
 
 
@@ -2633,4 +3191,13 @@ var softwarediagramsCatalog = [
 
 
 
-exports.SoftwareRouting = SoftwareRouting; exports.ActivityNodeKind = ActivityNodeKind; exports.UseCaseNodeKind = UseCaseNodeKind; exports.UseCaseLinkKind = UseCaseLinkKind; exports.UseCaseActorSide = UseCaseActorSide; exports.UseCaseActorForm = UseCaseActorForm; exports.DataFlowKind = DataFlowKind; exports.DataFlowNotation = DataFlowNotation; exports.NassiKind = NassiKind; exports.NassiBranchWidth = NassiBranchWidth; exports.NassiRowHeight = NassiRowHeight; exports.PetriNodeKind = PetriNodeKind; exports.PetriTokenMark = PetriTokenMark; exports.PetriTransitionForm = PetriTransitionForm; exports.BpmnNodeKind = BpmnNodeKind; exports.BpmnFlowKind = BpmnFlowKind; exports.BpmnPartition = BpmnPartition; exports.MemoryMapUsage = MemoryMapUsage; exports.MemoryMapOrigin = MemoryMapOrigin; exports.DifferentialFlameBasis = DifferentialFlameBasis; exports.DifferentialFlameSort = DifferentialFlameSort; exports.CallGraphLayering = CallGraphLayering; exports.SignalFlowArc = SignalFlowArc; exports.SignalFlowNode = SignalFlowNode; exports.SignalFlowArrow = SignalFlowArrow; exports.ParseTreeLeaves = ParseTreeLeaves; exports.ParseTreeLevels = ParseTreeLevels; exports.ParseTreeEdge = ParseTreeEdge; exports.TrieCompression = TrieCompression; exports.TrieLabel = TrieLabel; exports.SoftwareGraph = SoftwareGraph; exports.ActivityDiagram = ActivityDiagram; exports.BpmnDiagram = BpmnDiagram; exports.CallGraph = CallGraph; exports.DataFlowDiagram = DataFlowDiagram; exports.DifferentialFlameGraph = DifferentialFlameGraph; exports.MemoryMap = MemoryMap; exports.NassiShneidermanDiagram = NassiShneidermanDiagram; exports.ParseTree = ParseTree; exports.PetriNet = PetriNet; exports.SignalFlowGraph = SignalFlowGraph; exports.TrieDiagram = TrieDiagram; exports.UseCaseDiagram = UseCaseDiagram; exports.softwarediagramsCatalog = softwarediagramsCatalog;
+
+
+
+
+
+
+
+
+
+exports.SoftwareRouting = SoftwareRouting; exports.ActivityNodeKind = ActivityNodeKind; exports.UseCaseNodeKind = UseCaseNodeKind; exports.UseCaseLinkKind = UseCaseLinkKind; exports.UseCaseActorSide = UseCaseActorSide; exports.UseCaseActorForm = UseCaseActorForm; exports.DataFlowKind = DataFlowKind; exports.DataFlowNotation = DataFlowNotation; exports.NassiKind = NassiKind; exports.NassiBranchWidth = NassiBranchWidth; exports.NassiRowHeight = NassiRowHeight; exports.PetriNodeKind = PetriNodeKind; exports.PetriTokenMark = PetriTokenMark; exports.PetriTransitionForm = PetriTransitionForm; exports.BpmnNodeKind = BpmnNodeKind; exports.BpmnFlowKind = BpmnFlowKind; exports.BpmnPartition = BpmnPartition; exports.MemoryMapUsage = MemoryMapUsage; exports.MemoryMapOrigin = MemoryMapOrigin; exports.DifferentialFlameBasis = DifferentialFlameBasis; exports.DifferentialFlameSort = DifferentialFlameSort; exports.CallGraphLayering = CallGraphLayering; exports.SignalFlowArc = SignalFlowArc; exports.SignalFlowNode = SignalFlowNode; exports.SignalFlowArrow = SignalFlowArrow; exports.ParseTreeLeaves = ParseTreeLeaves; exports.ParseTreeLevels = ParseTreeLevels; exports.ParseTreeEdge = ParseTreeEdge; exports.TrieCompression = TrieCompression; exports.TrieLabel = TrieLabel; exports.ComponentNodeKind = ComponentNodeKind; exports.ComponentLinkKind = ComponentLinkKind; exports.ComponentInterfaceForm = ComponentInterfaceForm; exports.ComponentGrouping = ComponentGrouping; exports.DeploymentKind = DeploymentKind; exports.DeploymentNodeForm = DeploymentNodeForm; exports.DeploymentArtifactForm = DeploymentArtifactForm; exports.SoftwareGraph = SoftwareGraph; exports.ActivityDiagram = ActivityDiagram; exports.BpmnDiagram = BpmnDiagram; exports.CallGraph = CallGraph; exports.ComponentDiagram = ComponentDiagram; exports.DataFlowDiagram = DataFlowDiagram; exports.DeploymentDiagram = DeploymentDiagram; exports.DifferentialFlameGraph = DifferentialFlameGraph; exports.MemoryMap = MemoryMap; exports.NassiShneidermanDiagram = NassiShneidermanDiagram; exports.ParseTree = ParseTree; exports.PetriNet = PetriNet; exports.SignalFlowGraph = SignalFlowGraph; exports.TrieDiagram = TrieDiagram; exports.UseCaseDiagram = UseCaseDiagram; exports.softwarediagramsCatalog = softwarediagramsCatalog;