@zukhruf/diagram 0.3.30 → 0.3.31

package/dist/lib/renderers/shared/node-parts.js

@@ -1,18 +1,45 @@
 import { c as _c } from "react/compiler-runtime";
 import { motion, useTransform } from 'motion/react';
-import { nodeCaptionBounds, nodeCaptionPlacement, nodePortPlacements, nodeStackCount, nodeStackFrameBox } from "../../layouts/graph/graph-layout.js";
-import { DIAGRAM_BG, DIAGRAM_DIM, DIAGRAM_NEUTRAL, DIAGRAM_TEXT, resolveDiagramToneFill, resolveDiagramToneStroke, useDiagramTheme } from "../../react/chrome/index.js";
-import { DiagramNodeIcon, PortMarkers, labelLineFill, nodeTextFill, textureFill } from "./graph-parts.js";
+import { ANNOTATION_NOTE_PREFIX } from "../../layouts/graph/legacy-graph-layout.js";
+import { FONT_FAMILY } from "../../layouts/text/font.js";
+import { DIAGRAM_BG, DIAGRAM_DIM, DIAGRAM_NEUTRAL, DIAGRAM_TEXT, resolveDiagramToneFill, useDiagramTheme } from "../../react/chrome/index.js";
+import { DiagramNodeIcon, PortMarkers, accentToneStroke, nodeTextFill, textureFill } from "./graph-parts.js";
+import { RunSpans } from "./run-spans.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const ANNOTATION_REVEAL_START = 0.85;
 export function isSpecialNode(node) {
   return node.kind !== undefined && node.kind !== 'node';
 }
+function isNote(layout) {
+  return layout.node.kind === 'note';
+}
+
+/** Splits the graph's own nodes from the notes that stand for annotations. */
+export function splitNotes(nodes) {
+  return {
+    graphNodes: nodes.filter(layout => !isNote(layout)),
+    notes: nodes.filter(isNote)
+  };
+}
+function textAttrs(first) {
+  return {
+    x: first.x,
+    y: first.y,
+    textAnchor: first.anchor,
+    fontFamily: FONT_FAMILY[first.font.face],
+    fontSize: first.font.size,
+    fontWeight: first.font.weight
+  };
+}
+function junctionFillColor(node, themeAccent) {
+  if (node.accent) return themeAccent;
+  if (node.tone) return resolveDiagramToneFill(node.tone);
+  return DIAGRAM_BG;
+}
 export function SpecialNode(t0) {
-  const $ = _c(190);
+  const $ = _c(177);
   const {
-    node,
-    box,
+    layout,
     progress,
     start,
     end
@@ -67,131 +94,110 @@ export function SpecialNode(t0) {
     t6 = $[9];
   }
   const translateY = useTransform(progress, t4, t5, t6);
-  let centerY;
-  let cx;
+  const {
+    node,
+    box,
+    radius,
+    icon,
+    text,
+    appliance
+  } = layout;
   let fill;
-  let lineHeight;
-  let lines;
+  let first;
   let t7;
-  if ($[10] !== box || $[11] !== ids || $[12] !== node || $[13] !== opacity || $[14] !== themeAccent || $[15] !== translateY) {
+  if ($[10] !== appliance || $[11] !== box || $[12] !== icon || $[13] !== ids || $[14] !== layout || $[15] !== node || $[16] !== opacity || $[17] !== radius || $[18] !== text || $[19] !== themeAccent || $[20] !== translateY) {
     t7 = Symbol.for("react.early_return_sentinel");
     bb0: {
       fill = nodeTextFill(node, node.frame ?? "solid", themeAccent);
-      lines = Array.isArray(node.label) ? node.label : [node.label];
-      const fontSize = node.fontSize ?? 12;
-      lineHeight = Math.max(12, fontSize + 2);
-      centerY = box.y + box.h / 2;
-      cx = box.x + box.w / 2;
-      if (node.kind === "appliance") {
+      [first] = text;
+      if (node.kind === "appliance" && appliance) {
         let t8;
-        if ($[22] !== node.accent || $[23] !== node.tone || $[24] !== themeAccent) {
-          t8 = node.accent ? themeAccent : node.tone ? resolveDiagramToneStroke(node.tone) : DIAGRAM_NEUTRAL;
-          $[22] = node.accent;
-          $[23] = node.tone;
-          $[24] = themeAccent;
-          $[25] = t8;
+        if ($[24] !== node || $[25] !== themeAccent) {
+          t8 = accentToneStroke(node, themeAccent, DIAGRAM_NEUTRAL);
+          $[24] = node;
+          $[25] = themeAccent;
+          $[26] = t8;
         } else {
-          t8 = $[25];
+          t8 = $[26];
         }
         const applianceStroke = t8;
         let t9;
-        if ($[26] !== node.tone) {
+        if ($[27] !== node.tone) {
           t9 = node.tone ? resolveDiagramToneFill(node.tone) : DIAGRAM_BG;
-          $[26] = node.tone;
-          $[27] = t9;
+          $[27] = node.tone;
+          $[28] = t9;
         } else {
-          t9 = $[27];
+          t9 = $[28];
         }
         const applianceFill = t9;
         const t10 = node.texture ?? "none";
         let t11;
-        if ($[28] !== ids || $[29] !== t10) {
+        if ($[29] !== ids || $[30] !== t10) {
           t11 = textureFill(t10, ids);
-          $[28] = ids;
-          $[29] = t10;
-          $[30] = t11;
+          $[29] = ids;
+          $[30] = t10;
+          $[31] = t11;
         } else {
-          t11 = $[30];
+          t11 = $[31];
         }
         const applianceTexture = t11;
-        const bodyX = box.x + 4;
-        const bodyY = box.y + Math.max(12, Math.min(22, box.h * 0.28));
-        const bodyW = Math.max(36, box.w - 8);
-        const bodyH = Math.max(24, box.h - (bodyY - box.y) - 12);
-        const slant = Math.max(4, Math.min(node.slant ?? 16, bodyW * 0.28, bodyH * 0.75));
-        const t12 = `M ${bodyX + slant} ${bodyY}`;
-        const t13 = `L ${bodyX + bodyW} ${bodyY + 6}`;
-        const t14 = `L ${bodyX + bodyW - slant} ${bodyY + bodyH}`;
-        const t15 = `L ${bodyX} ${bodyY + bodyH - 6}`;
-        let t16;
-        if ($[31] !== t12 || $[32] !== t13 || $[33] !== t14 || $[34] !== t15) {
-          t16 = [t12, t13, t14, t15, "Z"];
-          $[31] = t12;
-          $[32] = t13;
-          $[33] = t14;
-          $[34] = t15;
-          $[35] = t16;
+        let t12;
+        if ($[32] !== appliance.body) {
+          t12 = [...appliance.body.map(_temp), "Z"];
+          $[32] = appliance.body;
+          $[33] = t12;
         } else {
-          t16 = $[35];
+          t12 = $[33];
         }
-        const bodyPath = t16.join(" ");
-        const showAntenna = node.antenna ?? true;
-        const visualPortCount = Math.max(0, Math.floor(node.appliancePorts ?? 4));
-        const portY = bodyY + bodyH - 15;
-        const portStartX = bodyX + slant + 16;
-        const portSpacing = Math.min(13, Math.max(8, (bodyW - slant - 42) / Math.max(visualPortCount, 1)));
-        const labelLines = lines.filter(_temp);
-        const labelY = bodyY + bodyH + Math.max(12, fontSize + 2);
-        const t17 = node.id;
-        let t18;
-        if ($[36] !== opacity || $[37] !== translateY) {
-          t18 = {
+        const bodyPath = t12.join(" ");
+        const [faceFrom, faceTo] = appliance.face;
+        const [rod, mast] = appliance.antenna;
+        const t13 = node.id;
+        let t14;
+        if ($[34] !== opacity || $[35] !== translateY) {
+          t14 = {
             opacity,
             y: translateY
           };
-          $[36] = opacity;
-          $[37] = translateY;
-          $[38] = t18;
+          $[34] = opacity;
+          $[35] = translateY;
+          $[36] = t14;
         } else {
-          t18 = $[38];
+          t14 = $[36];
         }
-        let t19;
-        if ($[39] !== applianceStroke || $[40] !== bodyW || $[41] !== bodyX || $[42] !== bodyY || $[43] !== box.y || $[44] !== node.id || $[45] !== showAntenna || $[46] !== slant) {
-          t19 = showAntenna && /*#__PURE__*/_jsxs("g", {
+        let t15;
+        if ($[37] !== applianceStroke || $[38] !== mast || $[39] !== node.id || $[40] !== rod) {
+          t15 = rod && mast && /*#__PURE__*/_jsxs("g", {
             "data-diagram-appliance-antenna": node.id,
             children: [/*#__PURE__*/_jsx("line", {
-              x1: bodyX + slant + bodyW * 0.18,
-              y1: bodyY + 1,
-              x2: bodyX + slant + bodyW * 0.2 - 3,
-              y2: box.y + 3,
+              x1: rod[0].x,
+              y1: rod[0].y,
+              x2: rod[1].x,
+              y2: rod[1].y,
               stroke: applianceStroke,
               strokeWidth: 1.5,
               strokeLinecap: "round"
             }), /*#__PURE__*/_jsx("line", {
-              x1: bodyX + slant + bodyW * 0.2 + 1,
-              y1: bodyY + 2,
-              x2: bodyX + slant + bodyW * 0.2 + 1,
-              y2: box.y + 8,
+              x1: mast[0].x,
+              y1: mast[0].y,
+              x2: mast[1].x,
+              y2: mast[1].y,
               stroke: applianceStroke,
               strokeWidth: 1,
               strokeLinecap: "round"
             })]
           });
-          $[39] = applianceStroke;
-          $[40] = bodyW;
-          $[41] = bodyX;
-          $[42] = bodyY;
-          $[43] = box.y;
-          $[44] = node.id;
-          $[45] = showAntenna;
-          $[46] = slant;
-          $[47] = t19;
+          $[37] = applianceStroke;
+          $[38] = mast;
+          $[39] = node.id;
+          $[40] = rod;
+          $[41] = t15;
         } else {
-          t19 = $[47];
+          t15 = $[41];
         }
-        let t20;
-        if ($[48] !== applianceFill || $[49] !== applianceStroke || $[50] !== bodyPath || $[51] !== node.id || $[52] !== node.tone) {
-          t20 = /*#__PURE__*/_jsx("path", {
+        let t16;
+        if ($[42] !== applianceFill || $[43] !== applianceStroke || $[44] !== bodyPath || $[45] !== node.id || $[46] !== node.tone) {
+          t16 = /*#__PURE__*/_jsx("path", {
             "data-diagram-node": node.id,
             "data-diagram-node-tone": node.tone,
             "data-diagram-appliance-body": node.id,
@@ -201,216 +207,178 @@ export function SpecialNode(t0) {
             strokeWidth: 1.5,
             strokeLinejoin: "round"
           });
-          $[48] = applianceFill;
-          $[49] = applianceStroke;
-          $[50] = bodyPath;
-          $[51] = node.id;
-          $[52] = node.tone;
-          $[53] = t20;
+          $[42] = applianceFill;
+          $[43] = applianceStroke;
+          $[44] = bodyPath;
+          $[45] = node.id;
+          $[46] = node.tone;
+          $[47] = t16;
         } else {
-          t20 = $[53];
+          t16 = $[47];
         }
-        let t21;
-        if ($[54] !== applianceTexture || $[55] !== bodyPath || $[56] !== node.id || $[57] !== node.texture) {
-          t21 = applianceTexture && /*#__PURE__*/_jsx("path", {
+        let t17;
+        if ($[48] !== applianceTexture || $[49] !== bodyPath || $[50] !== node.id || $[51] !== node.texture) {
+          t17 = applianceTexture && /*#__PURE__*/_jsx("path", {
             "data-diagram-node-texture": `${node.id}:${node.texture ?? "none"}`,
             d: bodyPath,
             fill: applianceTexture,
             pointerEvents: "none"
           });
-          $[54] = applianceTexture;
-          $[55] = bodyPath;
-          $[56] = node.id;
-          $[57] = node.texture;
-          $[58] = t21;
+          $[48] = applianceTexture;
+          $[49] = bodyPath;
+          $[50] = node.id;
+          $[51] = node.texture;
+          $[52] = t17;
         } else {
-          t21 = $[58];
+          t17 = $[52];
         }
-        const t22 = bodyX + slant;
-        const t23 = bodyY + bodyH - 1;
-        const t24 = bodyX + bodyW - slant;
-        const t25 = bodyY + bodyH + 3;
-        let t26;
-        if ($[59] !== applianceStroke || $[60] !== node.id || $[61] !== t22 || $[62] !== t23 || $[63] !== t24 || $[64] !== t25) {
-          t26 = /*#__PURE__*/_jsx("line", {
+        let t18;
+        if ($[53] !== applianceStroke || $[54] !== faceFrom.x || $[55] !== faceFrom.y || $[56] !== faceTo.x || $[57] !== faceTo.y || $[58] !== node.id) {
+          t18 = /*#__PURE__*/_jsx("line", {
             "data-diagram-appliance-face": node.id,
-            x1: t22,
-            y1: t23,
-            x2: t24,
-            y2: t25,
+            x1: faceFrom.x,
+            y1: faceFrom.y,
+            x2: faceTo.x,
+            y2: faceTo.y,
             stroke: applianceStroke,
             strokeWidth: 1,
             strokeLinecap: "round",
             opacity: 0.85
           });
-          $[59] = applianceStroke;
-          $[60] = node.id;
-          $[61] = t22;
-          $[62] = t23;
-          $[63] = t24;
-          $[64] = t25;
-          $[65] = t26;
+          $[53] = applianceStroke;
+          $[54] = faceFrom.x;
+          $[55] = faceFrom.y;
+          $[56] = faceTo.x;
+          $[57] = faceTo.y;
+          $[58] = node.id;
+          $[59] = t18;
         } else {
-          t26 = $[65];
+          t18 = $[59];
         }
-        let t27;
-        if ($[66] !== applianceStroke || $[67] !== node.id || $[68] !== portSpacing || $[69] !== portStartX || $[70] !== portY || $[71] !== visualPortCount) {
-          let t28;
-          if ($[73] !== applianceStroke || $[74] !== node.id || $[75] !== portSpacing || $[76] !== portStartX || $[77] !== portY) {
-            t28 = (_, i) => /*#__PURE__*/_jsx("rect", {
-              "data-diagram-appliance-port": `${node.id}:${i}`,
-              x: portStartX + i * portSpacing,
-              y: portY,
-              width: 5,
-              height: 12,
+        let t19;
+        if ($[60] !== appliance.jacks || $[61] !== applianceStroke || $[62] !== node.id) {
+          let t20;
+          if ($[64] !== applianceStroke || $[65] !== node.id) {
+            t20 = (jack, i_0) => /*#__PURE__*/_jsx("rect", {
+              "data-diagram-appliance-port": `${node.id}:${i_0}`,
+              x: jack.x,
+              y: jack.y,
+              width: jack.w,
+              height: jack.h,
               rx: 1,
               fill: DIAGRAM_BG,
               stroke: applianceStroke,
               strokeWidth: 1
-            }, i);
-            $[73] = applianceStroke;
-            $[74] = node.id;
-            $[75] = portSpacing;
-            $[76] = portStartX;
-            $[77] = portY;
-            $[78] = t28;
+            }, i_0);
+            $[64] = applianceStroke;
+            $[65] = node.id;
+            $[66] = t20;
           } else {
-            t28 = $[78];
+            t20 = $[66];
           }
-          t27 = Array.from({
-            length: visualPortCount
-          }, t28);
-          $[66] = applianceStroke;
-          $[67] = node.id;
-          $[68] = portSpacing;
-          $[69] = portStartX;
-          $[70] = portY;
-          $[71] = visualPortCount;
-          $[72] = t27;
+          t19 = appliance.jacks.map(t20);
+          $[60] = appliance.jacks;
+          $[61] = applianceStroke;
+          $[62] = node.id;
+          $[63] = t19;
         } else {
-          t27 = $[72];
+          t19 = $[63];
         }
-        const t28 = labelLines.length > 0 && /*#__PURE__*/_jsx("text", {
+        const t20 = first && /*#__PURE__*/_jsx("text", {
           "data-diagram-appliance-label": node.id,
-          x: cx,
-          y: labelY,
-          textAnchor: "middle",
-          fontFamily: "ui-sans-serif, system-ui, sans-serif",
-          fontSize: fontSize,
-          fontWeight: node.fontWeight ?? 600,
+          ...textAttrs(first),
           fill: fill,
-          children: labelLines.map((line_0, i_0) => {
-            const lineText = typeof line_0 === "string" ? line_0 : line_0.text;
-            const lineFill = labelLineFill(line_0, fill, themeAccent);
-            return /*#__PURE__*/_jsx("tspan", {
-              x: cx,
-              dy: i_0 === 0 ? 0 : lineHeight,
-              fill: lineFill,
-              fontWeight: typeof line_0 === "string" ? node.fontWeight ?? 600 : line_0.fontWeight ?? node.fontWeight ?? 600,
-              children: lineText
-            }, i_0);
+          children: /*#__PURE__*/_jsx(RunSpans, {
+            runs: text,
+            fill: fill,
+            accent: themeAccent
           })
         });
-        let t29;
-        let t30;
-        if ($[79] !== box || $[80] !== node) {
-          t29 = /*#__PURE__*/_jsx(NodePorts, {
-            node: node,
-            box: box
+        let t21;
+        let t22;
+        if ($[67] !== layout) {
+          t21 = /*#__PURE__*/_jsx(NodePorts, {
+            layout: layout
           });
-          t30 = /*#__PURE__*/_jsx(NodeCaption, {
-            node: node,
-            box: box
+          t22 = /*#__PURE__*/_jsx(NodeCaption, {
+            layout: layout
           });
-          $[79] = box;
-          $[80] = node;
-          $[81] = t29;
-          $[82] = t30;
+          $[67] = layout;
+          $[68] = t21;
+          $[69] = t22;
         } else {
-          t29 = $[81];
-          t30 = $[82];
+          t21 = $[68];
+          t22 = $[69];
         }
-        let t31;
-        if ($[83] !== node.id || $[84] !== t18 || $[85] !== t19 || $[86] !== t20 || $[87] !== t21 || $[88] !== t26 || $[89] !== t27 || $[90] !== t28 || $[91] !== t29 || $[92] !== t30) {
-          t31 = /*#__PURE__*/_jsxs(motion.g, {
-            "data-diagram-appliance": t17,
-            style: t18,
-            children: [t19, t20, t21, t26, t27, t28, t29, t30]
+        let t23;
+        if ($[70] !== node.id || $[71] !== t14 || $[72] !== t15 || $[73] !== t16 || $[74] !== t17 || $[75] !== t18 || $[76] !== t19 || $[77] !== t20 || $[78] !== t21 || $[79] !== t22) {
+          t23 = /*#__PURE__*/_jsxs(motion.g, {
+            "data-diagram-appliance": t13,
+            style: t14,
+            children: [t15, t16, t17, t18, t19, t20, t21, t22]
           });
-          $[83] = node.id;
-          $[84] = t18;
-          $[85] = t19;
-          $[86] = t20;
-          $[87] = t21;
-          $[88] = t26;
-          $[89] = t27;
-          $[90] = t28;
-          $[91] = t29;
-          $[92] = t30;
-          $[93] = t31;
+          $[70] = node.id;
+          $[71] = t14;
+          $[72] = t15;
+          $[73] = t16;
+          $[74] = t17;
+          $[75] = t18;
+          $[76] = t19;
+          $[77] = t20;
+          $[78] = t21;
+          $[79] = t22;
+          $[80] = t23;
         } else {
-          t31 = $[93];
+          t23 = $[80];
         }
-        t7 = t31;
+        t7 = t23;
         break bb0;
       }
       if (node.kind === "connector") {
         let t8;
-        if ($[94] !== node.accent || $[95] !== node.tone || $[96] !== themeAccent) {
-          t8 = node.accent ? themeAccent : node.tone ? resolveDiagramToneStroke(node.tone) : DIAGRAM_NEUTRAL;
-          $[94] = node.accent;
-          $[95] = node.tone;
-          $[96] = themeAccent;
-          $[97] = t8;
+        if ($[81] !== node || $[82] !== themeAccent) {
+          t8 = accentToneStroke(node, themeAccent, DIAGRAM_NEUTRAL);
+          $[81] = node;
+          $[82] = themeAccent;
+          $[83] = t8;
         } else {
-          t8 = $[97];
+          t8 = $[83];
         }
         const connectorStroke = t8;
         let t9;
-        if ($[98] !== node.tone) {
+        if ($[84] !== node.tone) {
           t9 = node.tone ? resolveDiagramToneFill(node.tone) : DIAGRAM_BG;
-          $[98] = node.tone;
-          $[99] = t9;
+          $[84] = node.tone;
+          $[85] = t9;
         } else {
-          t9 = $[99];
+          t9 = $[85];
         }
         const connectorFill = t9;
         const t10 = node.texture ?? (node.tone ? "dots" : "none");
         let t11;
-        if ($[100] !== ids || $[101] !== t10) {
+        if ($[86] !== ids || $[87] !== t10) {
           t11 = textureFill(t10, ids);
-          $[100] = ids;
-          $[101] = t10;
-          $[102] = t11;
+          $[86] = ids;
+          $[87] = t10;
+          $[88] = t11;
         } else {
-          t11 = $[102];
+          t11 = $[88];
         }
         const connectorTexture = t11;
-        const connectorRx = node.rx ?? Math.min(12, box.h / 2);
-        const connectorIconSize = node.iconSize ?? 18;
-        const connectorFontSize = node.fontSize ?? 10;
-        const connectorLineHeight = Math.max(12, connectorFontSize + 2);
-        const connectorLines = lines.filter(_temp2);
-        const hasConnectorText = connectorLines.length > 0;
-        const iconX = box.x + 10;
-        const iconY = centerY - connectorIconSize / 2;
-        const textX = node.icon ? iconX + connectorIconSize + 8 : box.x + box.w / 2;
-        const textAnchor = node.icon ? "start" : "middle";
-        const textY = centerY - (connectorLines.length - 1) * connectorLineHeight / 2 + connectorFontSize * 0.35;
         let t12;
-        if ($[103] !== opacity || $[104] !== translateY) {
+        if ($[89] !== opacity || $[90] !== translateY) {
           t12 = {
             opacity,
             y: translateY
           };
-          $[103] = opacity;
-          $[104] = translateY;
-          $[105] = t12;
+          $[89] = opacity;
+          $[90] = translateY;
+          $[91] = t12;
         } else {
-          t12 = $[105];
+          t12 = $[91];
         }
         let t13;
-        if ($[106] !== box.h || $[107] !== box.w || $[108] !== box.x || $[109] !== box.y || $[110] !== connectorFill || $[111] !== connectorRx || $[112] !== connectorStroke || $[113] !== node.id || $[114] !== node.tone) {
+        if ($[92] !== box.h || $[93] !== box.w || $[94] !== box.x || $[95] !== box.y || $[96] !== connectorFill || $[97] !== connectorStroke || $[98] !== node.id || $[99] !== node.tone || $[100] !== radius) {
           t13 = /*#__PURE__*/_jsx("rect", {
             "data-diagram-node": node.id,
             "data-diagram-connector": node.id,
@@ -419,584 +387,499 @@ export function SpecialNode(t0) {
             y: box.y,
             width: box.w,
             height: box.h,
-            rx: connectorRx,
+            rx: radius,
             fill: connectorFill,
             stroke: connectorStroke,
             strokeWidth: 1.25
           });
-          $[106] = box.h;
-          $[107] = box.w;
-          $[108] = box.x;
-          $[109] = box.y;
-          $[110] = connectorFill;
-          $[111] = connectorRx;
-          $[112] = connectorStroke;
-          $[113] = node.id;
-          $[114] = node.tone;
-          $[115] = t13;
+          $[92] = box.h;
+          $[93] = box.w;
+          $[94] = box.x;
+          $[95] = box.y;
+          $[96] = connectorFill;
+          $[97] = connectorStroke;
+          $[98] = node.id;
+          $[99] = node.tone;
+          $[100] = radius;
+          $[101] = t13;
         } else {
-          t13 = $[115];
+          t13 = $[101];
         }
         let t14;
-        if ($[116] !== box.h || $[117] !== box.w || $[118] !== box.x || $[119] !== box.y || $[120] !== connectorRx || $[121] !== connectorTexture || $[122] !== node.id || $[123] !== node.texture) {
+        if ($[102] !== box.h || $[103] !== box.w || $[104] !== box.x || $[105] !== box.y || $[106] !== connectorTexture || $[107] !== node.id || $[108] !== node.texture || $[109] !== radius) {
           t14 = connectorTexture && /*#__PURE__*/_jsx("rect", {
             "data-diagram-node-texture": `${node.id}:${node.texture ?? "dots"}`,
             x: box.x,
             y: box.y,
             width: box.w,
             height: box.h,
-            rx: connectorRx,
+            rx: radius,
             fill: connectorTexture,
             pointerEvents: "none"
           });
-          $[116] = box.h;
-          $[117] = box.w;
-          $[118] = box.x;
-          $[119] = box.y;
-          $[120] = connectorRx;
-          $[121] = connectorTexture;
-          $[122] = node.id;
-          $[123] = node.texture;
-          $[124] = t14;
+          $[102] = box.h;
+          $[103] = box.w;
+          $[104] = box.x;
+          $[105] = box.y;
+          $[106] = connectorTexture;
+          $[107] = node.id;
+          $[108] = node.texture;
+          $[109] = radius;
+          $[110] = t14;
         } else {
-          t14 = $[124];
+          t14 = $[110];
         }
-        const t15 = node.icon && /*#__PURE__*/_jsx(DiagramNodeIcon, {
+        const t15 = node.icon && icon && /*#__PURE__*/_jsx(DiagramNodeIcon, {
           icon: node.icon,
-          x: iconX,
-          y: iconY,
-          size: connectorIconSize,
+          x: icon.x,
+          y: icon.y,
+          size: icon.size,
           color: fill
         });
-        const t16 = hasConnectorText && /*#__PURE__*/_jsx("text", {
+        const t16 = first && /*#__PURE__*/_jsx("text", {
           "data-diagram-connector-label": node.id,
-          x: textX,
-          y: textY,
-          textAnchor: textAnchor,
-          fontFamily: "ui-sans-serif, system-ui, sans-serif",
-          fontSize: connectorFontSize,
-          fontWeight: node.fontWeight ?? 700,
+          ...textAttrs(first),
           fill: fill,
-          children: connectorLines.map((line_2, i_1) => {
-            const lineText_0 = typeof line_2 === "string" ? line_2 : line_2.text;
-            const lineFill_0 = labelLineFill(line_2, fill, themeAccent);
-            return /*#__PURE__*/_jsx("tspan", {
-              x: textX,
-              dy: i_1 === 0 ? 0 : connectorLineHeight,
-              fill: lineFill_0,
-              fontWeight: typeof line_2 === "string" ? node.fontWeight ?? 700 : line_2.fontWeight ?? node.fontWeight ?? 700,
-              children: lineText_0
-            }, i_1);
+          children: /*#__PURE__*/_jsx(RunSpans, {
+            runs: text,
+            fill: fill,
+            accent: themeAccent
           })
         });
         let t17;
         let t18;
-        if ($[125] !== box || $[126] !== node) {
+        if ($[111] !== layout) {
           t17 = /*#__PURE__*/_jsx(NodePorts, {
-            node: node,
-            box: box
+            layout: layout
           });
           t18 = /*#__PURE__*/_jsx(NodeCaption, {
-            node: node,
-            box: box
+            layout: layout
           });
-          $[125] = box;
-          $[126] = node;
-          $[127] = t17;
-          $[128] = t18;
+          $[111] = layout;
+          $[112] = t17;
+          $[113] = t18;
         } else {
-          t17 = $[127];
-          t18 = $[128];
+          t17 = $[112];
+          t18 = $[113];
         }
         let t19;
-        if ($[129] !== t12 || $[130] !== t13 || $[131] !== t14 || $[132] !== t15 || $[133] !== t16 || $[134] !== t17 || $[135] !== t18) {
+        if ($[114] !== t12 || $[115] !== t13 || $[116] !== t14 || $[117] !== t15 || $[118] !== t16 || $[119] !== t17 || $[120] !== t18) {
           t19 = /*#__PURE__*/_jsxs(motion.g, {
             style: t12,
             children: [t13, t14, t15, t16, t17, t18]
           });
-          $[129] = t12;
-          $[130] = t13;
-          $[131] = t14;
-          $[132] = t15;
-          $[133] = t16;
-          $[134] = t17;
-          $[135] = t18;
-          $[136] = t19;
+          $[114] = t12;
+          $[115] = t13;
+          $[116] = t14;
+          $[117] = t15;
+          $[118] = t16;
+          $[119] = t17;
+          $[120] = t18;
+          $[121] = t19;
         } else {
-          t19 = $[136];
+          t19 = $[121];
         }
         t7 = t19;
         break bb0;
       }
-      if (node.kind === "marker") {
-        const markerIconSize = node.iconSize ?? 34;
-        const markerFontSize = node.fontSize ?? 11;
-        const markerLineHeight = Math.max(12, markerFontSize + 2);
-        const markerLines = lines.filter(_temp3);
-        const labelGap = markerLines.length > 0 ? 8 : 0;
-        const labelBlockHeight = markerLines.length * markerLineHeight;
-        const totalHeight = markerIconSize + labelGap + labelBlockHeight;
+      if (node.kind === "marker" && icon) {
+        const markerStroke = accentToneStroke(node, themeAccent, fill);
         let t8;
-        if ($[137] !== cx || $[138] !== markerIconSize) {
-          t8 = Math.round(cx - markerIconSize / 2);
-          $[137] = cx;
-          $[138] = markerIconSize;
-          $[139] = t8;
-        } else {
-          t8 = $[139];
-        }
-        const iconX_0 = t8;
-        const iconY_0 = Math.round(box.y + (box.h - totalHeight) / 2);
-        const markerLabelY = iconY_0 + markerIconSize + labelGap + markerFontSize;
-        const markerStroke = node.accent ? themeAccent : node.tone ? resolveDiagramToneStroke(node.tone) : fill;
-        let t9;
-        if ($[140] !== opacity || $[141] !== translateY) {
-          t9 = {
+        if ($[122] !== opacity || $[123] !== translateY) {
+          t8 = {
             opacity,
             y: translateY
           };
-          $[140] = opacity;
-          $[141] = translateY;
-          $[142] = t9;
+          $[122] = opacity;
+          $[123] = translateY;
+          $[124] = t8;
         } else {
-          t9 = $[142];
+          t8 = $[124];
         }
-        const t10 = node.rx ?? 0;
-        let t11;
-        if ($[143] !== box.h || $[144] !== box.w || $[145] !== box.x || $[146] !== box.y || $[147] !== node.id || $[148] !== t10) {
-          t11 = /*#__PURE__*/_jsx("rect", {
+        let t9;
+        if ($[125] !== box.h || $[126] !== box.w || $[127] !== box.x || $[128] !== box.y || $[129] !== node.id || $[130] !== radius) {
+          t9 = /*#__PURE__*/_jsx("rect", {
             "data-diagram-node": node.id,
             "data-diagram-marker-bounds": node.id,
             x: box.x,
             y: box.y,
             width: box.w,
             height: box.h,
-            rx: t10,
+            rx: radius,
             fill: "transparent",
             stroke: "none"
           });
-          $[143] = box.h;
-          $[144] = box.w;
-          $[145] = box.x;
-          $[146] = box.y;
-          $[147] = node.id;
-          $[148] = t10;
-          $[149] = t11;
+          $[125] = box.h;
+          $[126] = box.w;
+          $[127] = box.x;
+          $[128] = box.y;
+          $[129] = node.id;
+          $[130] = radius;
+          $[131] = t9;
         } else {
-          t11 = $[149];
+          t9 = $[131];
         }
-        let t12;
-        let t13;
-        if ($[150] !== box || $[151] !== node) {
-          t12 = /*#__PURE__*/_jsx(NodePorts, {
-            node: node,
-            box: box
-          });
-          t13 = /*#__PURE__*/_jsx(NodeCaption, {
-            node: node,
-            box: box
+        const t10 = node.icon ?? "ellipsis";
+        let t11;
+        if ($[132] !== icon.size || $[133] !== icon.x || $[134] !== icon.y || $[135] !== markerStroke || $[136] !== t10) {
+          t11 = /*#__PURE__*/_jsx(DiagramNodeIcon, {
+            icon: t10,
+            x: icon.x,
+            y: icon.y,
+            size: icon.size,
+            color: markerStroke
           });
-          $[150] = box;
-          $[151] = node;
-          $[152] = t12;
-          $[153] = t13;
+          $[132] = icon.size;
+          $[133] = icon.x;
+          $[134] = icon.y;
+          $[135] = markerStroke;
+          $[136] = t10;
+          $[137] = t11;
         } else {
-          t12 = $[152];
-          t13 = $[153];
+          t11 = $[137];
         }
-        t7 = /*#__PURE__*/_jsxs(motion.g, {
-          "data-diagram-marker": node.id,
-          style: t9,
-          children: [t11, /*#__PURE__*/_jsx(DiagramNodeIcon, {
-            icon: node.icon ?? "ellipsis",
-            x: iconX_0,
-            y: iconY_0,
-            size: markerIconSize,
-            color: markerStroke
-          }), markerLines.length > 0 && /*#__PURE__*/_jsx("text", {
-            "data-diagram-marker-label": node.id,
-            x: cx,
-            y: markerLabelY,
-            textAnchor: "middle",
-            fontFamily: "ui-sans-serif, system-ui, sans-serif",
-            fontSize: markerFontSize,
-            fontWeight: node.fontWeight ?? 700,
+        const t12 = first && /*#__PURE__*/_jsx("text", {
+          "data-diagram-marker-label": node.id,
+          ...textAttrs(first),
+          fill: fill,
+          children: /*#__PURE__*/_jsx(RunSpans, {
+            runs: text,
             fill: fill,
-            children: markerLines.map((line_4, i_2) => {
-              const lineText_1 = typeof line_4 === "string" ? line_4 : line_4.text;
-              const lineFill_1 = labelLineFill(line_4, fill, themeAccent);
-              return /*#__PURE__*/_jsx("tspan", {
-                x: cx,
-                dy: i_2 === 0 ? 0 : markerLineHeight,
-                fill: lineFill_1,
-                fontWeight: typeof line_4 === "string" ? node.fontWeight ?? 700 : line_4.fontWeight ?? node.fontWeight ?? 700,
-                children: lineText_1
-              }, i_2);
-            })
-          }), t12, t13]
+            accent: themeAccent
+          })
         });
+        let t13;
+        let t14;
+        if ($[138] !== layout) {
+          t13 = /*#__PURE__*/_jsx(NodePorts, {
+            layout: layout
+          });
+          t14 = /*#__PURE__*/_jsx(NodeCaption, {
+            layout: layout
+          });
+          $[138] = layout;
+          $[139] = t13;
+          $[140] = t14;
+        } else {
+          t13 = $[139];
+          t14 = $[140];
+        }
+        let t15;
+        if ($[141] !== node.id || $[142] !== t11 || $[143] !== t12 || $[144] !== t13 || $[145] !== t14 || $[146] !== t8 || $[147] !== t9) {
+          t15 = /*#__PURE__*/_jsxs(motion.g, {
+            "data-diagram-marker": node.id,
+            style: t8,
+            children: [t9, t11, t12, t13, t14]
+          });
+          $[141] = node.id;
+          $[142] = t11;
+          $[143] = t12;
+          $[144] = t13;
+          $[145] = t14;
+          $[146] = t8;
+          $[147] = t9;
+          $[148] = t15;
+        } else {
+          t15 = $[148];
+        }
+        t7 = t15;
         break bb0;
       }
     }
-    $[10] = box;
-    $[11] = ids;
-    $[12] = node;
-    $[13] = opacity;
-    $[14] = themeAccent;
-    $[15] = translateY;
-    $[16] = centerY;
-    $[17] = cx;
-    $[18] = fill;
-    $[19] = lineHeight;
-    $[20] = lines;
-    $[21] = t7;
+    $[10] = appliance;
+    $[11] = box;
+    $[12] = icon;
+    $[13] = ids;
+    $[14] = layout;
+    $[15] = node;
+    $[16] = opacity;
+    $[17] = radius;
+    $[18] = text;
+    $[19] = themeAccent;
+    $[20] = translateY;
+    $[21] = fill;
+    $[22] = first;
+    $[23] = t7;
   } else {
-    centerY = $[16];
-    cx = $[17];
-    fill = $[18];
-    lineHeight = $[19];
-    lines = $[20];
-    t7 = $[21];
+    fill = $[21];
+    first = $[22];
+    t7 = $[23];
   }
   if (t7 !== Symbol.for("react.early_return_sentinel")) {
     return t7;
   }
   if (node.kind === "junction") {
     let t8;
-    if ($[154] !== node.accent || $[155] !== node.tone || $[156] !== themeAccent) {
-      t8 = node.accent ? themeAccent : node.tone ? resolveDiagramToneStroke(node.tone) : DIAGRAM_NEUTRAL;
-      $[154] = node.accent;
-      $[155] = node.tone;
-      $[156] = themeAccent;
-      $[157] = t8;
+    if ($[149] !== node || $[150] !== themeAccent) {
+      t8 = accentToneStroke(node, themeAccent, DIAGRAM_NEUTRAL);
+      $[149] = node;
+      $[150] = themeAccent;
+      $[151] = t8;
     } else {
-      t8 = $[157];
+      t8 = $[151];
     }
     const junctionStroke = t8;
     let t9;
-    if ($[158] !== node.accent || $[159] !== node.tone || $[160] !== themeAccent) {
-      t9 = node.accent ? themeAccent : node.tone ? resolveDiagramToneFill(node.tone) : DIAGRAM_BG;
-      $[158] = node.accent;
-      $[159] = node.tone;
-      $[160] = themeAccent;
-      $[161] = t9;
+    if ($[152] !== node || $[153] !== themeAccent) {
+      t9 = junctionFillColor(node, themeAccent);
+      $[152] = node;
+      $[153] = themeAccent;
+      $[154] = t9;
     } else {
-      t9 = $[161];
+      t9 = $[154];
     }
     const junctionFill = t9;
     let t10;
-    if ($[162] !== opacity || $[163] !== translateY) {
+    if ($[155] !== opacity || $[156] !== translateY) {
       t10 = {
         opacity,
         y: translateY
       };
-      $[162] = opacity;
-      $[163] = translateY;
-      $[164] = t10;
+      $[155] = opacity;
+      $[156] = translateY;
+      $[157] = t10;
     } else {
-      t10 = $[164];
+      t10 = $[157];
     }
-    const t11 = node.id;
-    const t12 = Math.max(4, Math.min(box.w, box.h) / 2);
+    const t11 = box.x + box.w / 2;
+    const t12 = box.y + box.h / 2;
     let t13;
-    if ($[165] !== centerY || $[166] !== cx || $[167] !== junctionFill || $[168] !== junctionStroke || $[169] !== node.id || $[170] !== t12) {
+    if ($[158] !== junctionFill || $[159] !== junctionStroke || $[160] !== node.id || $[161] !== radius || $[162] !== t11 || $[163] !== t12) {
       t13 = /*#__PURE__*/_jsx("circle", {
-        "data-diagram-junction": t11,
-        cx: cx,
-        cy: centerY,
-        r: t12,
+        "data-diagram-junction": node.id,
+        cx: t11,
+        cy: t12,
+        r: radius,
         fill: junctionFill,
         stroke: junctionStroke,
         strokeWidth: 1.5
       });
-      $[165] = centerY;
-      $[166] = cx;
-      $[167] = junctionFill;
-      $[168] = junctionStroke;
-      $[169] = node.id;
-      $[170] = t12;
-      $[171] = t13;
+      $[158] = junctionFill;
+      $[159] = junctionStroke;
+      $[160] = node.id;
+      $[161] = radius;
+      $[162] = t11;
+      $[163] = t12;
+      $[164] = t13;
     } else {
-      t13 = $[171];
+      t13 = $[164];
     }
     let t14;
-    if ($[172] !== box.h || $[173] !== centerY || $[174] !== cx || $[175] !== fill || $[176] !== lineHeight || $[177] !== lines || $[178] !== node.fontSize || $[179] !== node.fontWeight || $[180] !== node.id) {
-      t14 = lines.some(Boolean) && /*#__PURE__*/_jsx("text", {
+    if ($[165] !== fill || $[166] !== first || $[167] !== node.id || $[168] !== text) {
+      t14 = first && /*#__PURE__*/_jsx("text", {
         "data-diagram-junction-label": node.id,
-        x: cx,
-        y: centerY - Math.max(8, box.h / 2 + 6),
-        textAnchor: "middle",
-        fontFamily: "ui-monospace, 'Geist Mono', monospace",
-        fontSize: node.fontSize ?? 10,
-        fontWeight: node.fontWeight ?? 600,
+        ...textAttrs(first),
         fill: fill,
-        children: lines.map((line_5, i_3) => {
-          const lineText_2 = typeof line_5 === "string" ? line_5 : line_5.text;
-          return /*#__PURE__*/_jsx("tspan", {
-            x: cx,
-            dy: i_3 === 0 ? 0 : lineHeight,
-            children: lineText_2
-          }, i_3);
+        children: /*#__PURE__*/_jsx(RunSpans, {
+          runs: text
         })
       });
-      $[172] = box.h;
-      $[173] = centerY;
-      $[174] = cx;
-      $[175] = fill;
-      $[176] = lineHeight;
-      $[177] = lines;
-      $[178] = node.fontSize;
-      $[179] = node.fontWeight;
-      $[180] = node.id;
-      $[181] = t14;
+      $[165] = fill;
+      $[166] = first;
+      $[167] = node.id;
+      $[168] = text;
+      $[169] = t14;
     } else {
-      t14 = $[181];
+      t14 = $[169];
     }
     let t15;
-    if ($[182] !== box || $[183] !== node) {
+    if ($[170] !== layout) {
       t15 = /*#__PURE__*/_jsx(NodeCaption, {
-        node: node,
-        box: box
+        layout: layout
       });
-      $[182] = box;
-      $[183] = node;
-      $[184] = t15;
+      $[170] = layout;
+      $[171] = t15;
     } else {
-      t15 = $[184];
+      t15 = $[171];
     }
     let t16;
-    if ($[185] !== t10 || $[186] !== t13 || $[187] !== t14 || $[188] !== t15) {
+    if ($[172] !== t10 || $[173] !== t13 || $[174] !== t14 || $[175] !== t15) {
       t16 = /*#__PURE__*/_jsxs(motion.g, {
         style: t10,
         children: [t13, t14, t15]
       });
-      $[185] = t10;
-      $[186] = t13;
-      $[187] = t14;
-      $[188] = t15;
-      $[189] = t16;
+      $[172] = t10;
+      $[173] = t13;
+      $[174] = t14;
+      $[175] = t15;
+      $[176] = t16;
     } else {
-      t16 = $[189];
+      t16 = $[176];
     }
     return t16;
   }
   return null;
 }
-function _temp3(line_3) {
-  return typeof line_3 === "string" ? line_3.length > 0 : line_3.text.length > 0;
-}
-function _temp2(line_1) {
-  return typeof line_1 === "string" ? line_1.length > 0 : line_1.text.length > 0;
-}
-function _temp(line) {
-  return typeof line === "string" ? line.length > 0 : line.text.length > 0;
+function _temp(point, i) {
+  return `${i === 0 ? "M" : "L"} ${point.x} ${point.y}`;
 }
 export function NodeStackFrames({
-  node,
-  box,
-  rx,
+  layout,
   fill,
   stroke,
   strokeWidth
 }) {
-  const stackCount = nodeStackCount(node);
-  return Array.from({
-    length: stackCount - 1
-  }, (_, i) => {
-    const level = stackCount - 1 - i;
-    const stackBox = nodeStackFrameBox(node, box, level);
-    return /*#__PURE__*/_jsx("rect", {
-      "data-diagram-node-stack": `${node.id}:${level}`,
-      x: stackBox.x,
-      y: stackBox.y,
-      width: stackBox.w,
-      height: stackBox.h,
-      rx: rx,
-      fill: fill,
-      stroke: stroke,
-      strokeWidth: strokeWidth
-    }, `stack-${level}`);
-  });
+  const {
+    node,
+    frames,
+    radius
+  } = layout;
+  return frames.map((frame, i) => ({
+    frame,
+    level: i + 1
+  })).reverse().map(({
+    frame,
+    level
+  }) => /*#__PURE__*/_jsx("rect", {
+    "data-diagram-node-stack": `${node.id}:${level}`,
+    x: frame.x,
+    y: frame.y,
+    width: frame.w,
+    height: frame.h,
+    rx: radius,
+    fill: fill,
+    stroke: stroke,
+    strokeWidth: strokeWidth
+  }, `stack-${level}`));
 }
 export function NodePorts(t0) {
-  const $ = _c(6);
+  const $ = _c(4);
   const {
-    node,
-    box
+    layout
   } = t0;
-  const t1 = node.id;
-  let t2;
-  if ($[0] !== box || $[1] !== node) {
-    t2 = nodePortPlacements(node, box);
-    $[0] = box;
-    $[1] = node;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  let t3;
-  if ($[3] !== node.id || $[4] !== t2) {
-    t3 = /*#__PURE__*/_jsx(PortMarkers, {
-      ownerId: t1,
-      placements: t2
+  let t1;
+  if ($[0] !== layout.node.id || $[1] !== layout.node.ports || $[2] !== layout.ports) {
+    t1 = /*#__PURE__*/_jsx(PortMarkers, {
+      ownerId: layout.node.id,
+      ports: layout.ports,
+      declared: layout.node.ports
     });
-    $[3] = node.id;
-    $[4] = t2;
-    $[5] = t3;
+    $[0] = layout.node.id;
+    $[1] = layout.node.ports;
+    $[2] = layout.ports;
+    $[3] = t1;
   } else {
-    t3 = $[5];
+    t1 = $[3];
   }
-  return t3;
+  return t1;
+}
+function textColorFill(color, accent) {
+  if (color === 'accent') return accent;
+  if (color === 'dim') return DIAGRAM_DIM;
+  return DIAGRAM_TEXT;
 }
 export function NodeCaption(t0) {
-  const $ = _c(34);
+  const $ = _c(21);
   const {
-    node,
-    box
+    layout
   } = t0;
   const {
     accent: themeAccent
   } = useDiagramTheme();
+  const {
+    node,
+    caption
+  } = layout;
   let t1;
-  let t10;
-  let t11;
+  if ($[0] !== caption?.text) {
+    t1 = caption?.text ?? [];
+    $[0] = caption?.text;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [first] = t1;
+  if (!caption || !first) {
+    return null;
+  }
   let t2;
+  if ($[2] !== node.captionColor || $[3] !== themeAccent) {
+    t2 = textColorFill(node.captionColor, themeAccent);
+    $[2] = node.captionColor;
+    $[3] = themeAccent;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const fill = t2;
+  const frame = caption.framed ? caption.box : null;
   let t3;
-  let t4;
+  if ($[5] !== fill || $[6] !== frame || $[7] !== node.id) {
+    t3 = frame && /*#__PURE__*/_jsx("rect", {
+      "data-diagram-node-caption-frame": node.id,
+      x: frame.x,
+      y: frame.y,
+      width: frame.w,
+      height: frame.h,
+      rx: frame.h / 2,
+      fill: DIAGRAM_BG,
+      stroke: fill,
+      strokeWidth: 1
+    });
+    $[5] = fill;
+    $[6] = frame;
+    $[7] = node.id;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const t4 = node.id;
   let t5;
-  let t6;
-  let t7;
-  let t8;
-  let t9;
-  if ($[0] !== box || $[1] !== node || $[2] !== themeAccent) {
-    t11 = Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const placement = nodeCaptionPlacement(node, box);
-      if (!placement) {
-        t11 = null;
-        break bb0;
-      }
-      const fill = node.captionColor === "accent" ? themeAccent : node.captionColor === "dim" ? DIAGRAM_DIM : DIAGRAM_TEXT;
-      let t12;
-      if ($[14] !== box || $[15] !== node) {
-        t12 = node.captionFrame ? nodeCaptionBounds(node, box) : null;
-        $[14] = box;
-        $[15] = node;
-        $[16] = t12;
-      } else {
-        t12 = $[16];
-      }
-      const frame = t12;
-      if ($[17] !== fill || $[18] !== frame || $[19] !== node.id) {
-        t10 = frame && /*#__PURE__*/_jsx("rect", {
-          "data-diagram-node-caption-frame": node.id,
-          x: frame.x,
-          y: frame.y,
-          width: frame.w,
-          height: frame.h,
-          rx: frame.h / 2,
-          fill: DIAGRAM_BG,
-          stroke: fill,
-          strokeWidth: 1
-        });
-        $[17] = fill;
-        $[18] = frame;
-        $[19] = node.id;
-        $[20] = t10;
-      } else {
-        t10 = $[20];
-      }
-      t1 = node.id;
-      t2 = placement.x;
-      t3 = placement.y;
-      t4 = placement.align;
-      t5 = "ui-sans-serif, system-ui, sans-serif";
-      t6 = placement.fontSize;
-      t7 = node.captionFontWeight ?? 600;
-      t8 = fill;
-      t9 = placement.lines.map((line, i) => /*#__PURE__*/_jsx("tspan", {
-        x: placement.x,
-        dy: i === 0 ? 0 : placement.lineHeight,
-        children: line
-      }, i));
-    }
-    $[0] = box;
-    $[1] = node;
-    $[2] = themeAccent;
-    $[3] = t1;
-    $[4] = t10;
-    $[5] = t11;
-    $[6] = t2;
-    $[7] = t3;
-    $[8] = t4;
-    $[9] = t5;
-    $[10] = t6;
-    $[11] = t7;
-    $[12] = t8;
-    $[13] = t9;
+  if ($[9] !== first) {
+    t5 = textAttrs(first);
+    $[9] = first;
+    $[10] = t5;
   } else {
-    t1 = $[3];
-    t10 = $[4];
-    t11 = $[5];
-    t2 = $[6];
-    t3 = $[7];
-    t4 = $[8];
-    t5 = $[9];
-    t6 = $[10];
-    t7 = $[11];
-    t8 = $[12];
-    t9 = $[13];
+    t5 = $[10];
   }
-  if (t11 !== Symbol.for("react.early_return_sentinel")) {
-    return t11;
+  let t6;
+  if ($[11] !== caption.text) {
+    t6 = /*#__PURE__*/_jsx(RunSpans, {
+      runs: caption.text
+    });
+    $[11] = caption.text;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
   }
-  let t12;
-  if ($[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8 || $[29] !== t9) {
-    t12 = /*#__PURE__*/_jsx("text", {
-      "data-diagram-node-caption": t1,
-      x: t2,
-      y: t3,
-      textAnchor: t4,
-      fontFamily: t5,
-      fontSize: t6,
-      fontWeight: t7,
-      fill: t8,
-      children: t9
+  let t7;
+  if ($[13] !== fill || $[14] !== node.id || $[15] !== t5 || $[16] !== t6) {
+    t7 = /*#__PURE__*/_jsx("text", {
+      "data-diagram-node-caption": t4,
+      ...t5,
+      fill: fill,
+      children: t6
     });
-    $[21] = t1;
-    $[22] = t2;
-    $[23] = t3;
-    $[24] = t4;
-    $[25] = t5;
-    $[26] = t6;
-    $[27] = t7;
-    $[28] = t8;
-    $[29] = t9;
-    $[30] = t12;
+    $[13] = fill;
+    $[14] = node.id;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
   } else {
-    t12 = $[30];
+    t7 = $[17];
   }
-  let t13;
-  if ($[31] !== t10 || $[32] !== t12) {
-    t13 = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t10, t12]
+  let t8;
+  if ($[18] !== t3 || $[19] !== t7) {
+    t8 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t3, t7]
     });
-    $[31] = t10;
-    $[32] = t12;
-    $[33] = t13;
+    $[18] = t3;
+    $[19] = t7;
+    $[20] = t8;
   } else {
-    t13 = $[33];
+    t8 = $[20];
   }
-  return t13;
+  return t8;
 }
 export function AnnotationText(t0) {
-  const $ = _c(49);
+  const $ = _c(46);
   const {
-    annotation,
+    note,
+    annotations,
+    leaders,
     progress,
     start,
-    end,
-    index
+    end
   } = t0;
   const {
     accent: themeAccent
@@ -1024,183 +907,167 @@ export function AnnotationText(t0) {
     t3 = $[4];
   }
   const opacity = useTransform(progress, t1, t2, t3);
-  const fill = annotation.color === "accent" ? themeAccent : annotation.color === "dim" ? DIAGRAM_DIM : DIAGRAM_TEXT;
-  const align = annotation.align ?? "middle";
-  const fontSize = annotation.fontSize ?? 11;
-  const fontWeight = annotation.fontWeight ?? 500;
-  const lineGap = annotation.lineGap ?? 4;
   let t4;
-  if ($[5] !== annotation.targets) {
-    t4 = annotation.targets?.join("+");
-    $[5] = annotation.targets;
+  if ($[5] !== note.node.id) {
+    t4 = note.node.id.slice(ANNOTATION_NOTE_PREFIX.length);
+    $[5] = note.node.id;
     $[6] = t4;
   } else {
     t4 = $[6];
   }
-  const annotationTargets = t4;
-  const annotationId = annotation.target || annotationTargets ? `${annotation.target ?? annotationTargets}:${annotation.anchor ?? "top"}` : `free:${index}`;
+  const index = Number(t4);
+  const annotation = annotations[index];
+  if (!annotation) {
+    return null;
+  }
   let t5;
-  if ($[7] !== annotation.anchor || $[8] !== annotation.leaderFrom || $[9] !== annotation.leaderTo || $[10] !== annotation.leaders || $[11] !== annotation.target) {
-    t5 = annotation.leaders ?? (annotation.leaderFrom && annotation.leaderTo ? [{
-      target: annotation.target,
-      anchor: annotation.anchor,
-      route: "straight",
-      from: annotation.leaderFrom,
-      to: annotation.leaderTo,
-      points: [annotation.leaderFrom, annotation.leaderTo]
-    }] : []);
-    $[7] = annotation.anchor;
-    $[8] = annotation.leaderFrom;
-    $[9] = annotation.leaderTo;
-    $[10] = annotation.leaders;
-    $[11] = annotation.target;
-    $[12] = t5;
+  if ($[7] !== annotation.color || $[8] !== themeAccent) {
+    t5 = textColorFill(annotation.color, themeAccent);
+    $[7] = annotation.color;
+    $[8] = themeAccent;
+    $[9] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[9];
   }
-  const leaders = t5;
+  const fill = t5;
+  const anchor = annotation.anchor ?? "top";
+  const route = annotation.leaderRoute ?? "straight";
   let t6;
-  if ($[13] !== opacity) {
-    t6 = {
-      opacity
-    };
-    $[13] = opacity;
-    $[14] = t6;
+  if ($[10] !== annotation.targets) {
+    t6 = annotation.targets?.join("+");
+    $[10] = annotation.targets;
+    $[11] = t6;
   } else {
-    t6 = $[14];
+    t6 = $[11];
   }
+  const annotationTargets = t6;
+  const annotationId = annotation.target || annotationTargets ? `${annotation.target ?? annotationTargets}:${anchor}` : `free:${index}`;
+  let T0;
+  let first;
   let t7;
-  if ($[15] !== annotationId || $[16] !== leaders) {
-    let t8;
-    if ($[18] !== annotationId) {
-      t8 = (leader, leaderIndex) => leader.route === "elbow" && leader.points.length > 2 ? /*#__PURE__*/_jsx("path", {
-        "data-diagram-annotation-leader": annotationId,
-        "data-diagram-annotation-leader-target": leader.target,
-        "data-diagram-annotation-leader-anchor": leader.anchor,
-        "data-diagram-annotation-leader-index": leaderIndex,
-        "data-diagram-annotation-leader-route": leader.route,
-        d: annotationLeaderPath(leader.points),
-        fill: "none",
-        stroke: DIAGRAM_NEUTRAL,
-        strokeWidth: 1,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }, `${leader.target ?? "free"}:${leaderIndex}`) : /*#__PURE__*/_jsx("line", {
-        "data-diagram-annotation-leader": annotationId,
-        "data-diagram-annotation-leader-target": leader.target,
-        "data-diagram-annotation-leader-anchor": leader.anchor,
-        "data-diagram-annotation-leader-index": leaderIndex,
-        "data-diagram-annotation-leader-route": leader.route,
-        x1: leader.from.x,
-        y1: leader.from.y,
-        x2: leader.to.x,
-        y2: leader.to.y,
-        stroke: DIAGRAM_NEUTRAL,
-        strokeWidth: 1,
-        strokeLinecap: "round"
-      }, `${leader.target ?? "free"}:${leaderIndex}`);
-      $[18] = annotationId;
-      $[19] = t8;
+  let t8;
+  if ($[12] !== anchor || $[13] !== annotationId || $[14] !== leaders || $[15] !== note.node.id || $[16] !== note.text || $[17] !== opacity || $[18] !== route) {
+    let t9;
+    if ($[23] !== note.node.id) {
+      t9 = leader => leader.note === note.node.id;
+      $[23] = note.node.id;
+      $[24] = t9;
     } else {
-      t8 = $[19];
+      t9 = $[24];
     }
-    t7 = leaders.map(t8);
-    $[15] = annotationId;
-    $[16] = leaders;
-    $[17] = t7;
-  } else {
-    t7 = $[17];
-  }
-  const t8 = annotation.target;
-  let t9;
-  if ($[20] !== annotation.targets) {
-    t9 = annotation.targets?.join(" ");
-    $[20] = annotation.targets;
-    $[21] = t9;
-  } else {
-    t9 = $[21];
-  }
-  const t10 = annotation.anchor;
-  const t11 = annotation.guide;
-  const t12 = annotation.lineGap;
-  const t13 = annotation.x;
-  const t14 = annotation.y;
-  let t15;
-  if ($[22] !== annotation.text || $[23] !== annotation.x || $[24] !== fontSize || $[25] !== lineGap) {
-    let t16;
-    if ($[27] !== annotation.x || $[28] !== fontSize || $[29] !== lineGap) {
-      t16 = (line, i) => /*#__PURE__*/_jsx("tspan", {
-        x: annotation.x,
-        dy: i === 0 ? 0 : fontSize + lineGap,
-        children: line
-      }, i);
-      $[27] = annotation.x;
-      $[28] = fontSize;
-      $[29] = lineGap;
-      $[30] = t16;
+    const noteLeaders = leaders.filter(t9);
+    [first] = note.text;
+    T0 = motion.g;
+    if ($[25] !== opacity) {
+      t7 = {
+        opacity
+      };
+      $[25] = opacity;
+      $[26] = t7;
+    } else {
+      t7 = $[26];
+    }
+    let t10;
+    if ($[27] !== anchor || $[28] !== annotationId || $[29] !== route) {
+      t10 = (leader_0, leaderIndex) => {
+        const attrs = {
+          "data-diagram-annotation-leader": annotationId,
+          "data-diagram-annotation-leader-target": leader_0.target,
+          "data-diagram-annotation-leader-anchor": anchor,
+          "data-diagram-annotation-leader-index": leaderIndex,
+          "data-diagram-annotation-leader-route": route
+        };
+        const from = leader_0.points.at(0);
+        const to = leader_0.points.at(-1);
+        if (leader_0.points.length > 2 || !from || !to) {
+          return /*#__PURE__*/_jsx("path", {
+            ...attrs,
+            d: leader_0.d,
+            fill: "none",
+            stroke: DIAGRAM_NEUTRAL,
+            strokeWidth: 1,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }, `${leader_0.target}:${leaderIndex}`);
+        }
+        return /*#__PURE__*/_jsx("line", {
+          ...attrs,
+          x1: from.x,
+          y1: from.y,
+          x2: to.x,
+          y2: to.y,
+          stroke: DIAGRAM_NEUTRAL,
+          strokeWidth: 1,
+          strokeLinecap: "round"
+        }, `${leader_0.target}:${leaderIndex}`);
+      };
+      $[27] = anchor;
+      $[28] = annotationId;
+      $[29] = route;
+      $[30] = t10;
     } else {
-      t16 = $[30];
+      t10 = $[30];
     }
-    t15 = annotation.text.map(t16);
-    $[22] = annotation.text;
-    $[23] = annotation.x;
-    $[24] = fontSize;
-    $[25] = lineGap;
-    $[26] = t15;
+    t8 = noteLeaders.map(t10);
+    $[12] = anchor;
+    $[13] = annotationId;
+    $[14] = leaders;
+    $[15] = note.node.id;
+    $[16] = note.text;
+    $[17] = opacity;
+    $[18] = route;
+    $[19] = T0;
+    $[20] = first;
+    $[21] = t7;
+    $[22] = t8;
   } else {
-    t15 = $[26];
+    T0 = $[19];
+    first = $[20];
+    t7 = $[21];
+    t8 = $[22];
   }
-  let t16;
-  if ($[31] !== align || $[32] !== annotation.anchor || $[33] !== annotation.guide || $[34] !== annotation.lineGap || $[35] !== annotation.target || $[36] !== annotation.x || $[37] !== annotation.y || $[38] !== annotationId || $[39] !== fill || $[40] !== fontSize || $[41] !== fontWeight || $[42] !== t15 || $[43] !== t9) {
-    t16 = /*#__PURE__*/_jsx("text", {
+  let t9;
+  if ($[31] !== annotation.anchor || $[32] !== annotation.guide || $[33] !== annotation.lineGap || $[34] !== annotation.target || $[35] !== annotation.targets || $[36] !== annotationId || $[37] !== fill || $[38] !== first || $[39] !== note.text) {
+    t9 = first && /*#__PURE__*/_jsx("text", {
       "data-diagram-annotation": annotationId,
-      "data-diagram-annotation-target": t8,
-      "data-diagram-annotation-targets": t9,
-      "data-diagram-annotation-anchor": t10,
-      "data-diagram-annotation-guide": t11,
-      "data-diagram-annotation-line-gap": t12,
-      x: t13,
-      y: t14,
-      textAnchor: align,
-      fontFamily: "ui-sans-serif, system-ui, sans-serif",
-      fontSize: fontSize,
-      fontWeight: fontWeight,
+      "data-diagram-annotation-target": annotation.target,
+      "data-diagram-annotation-targets": annotation.targets?.join(" "),
+      "data-diagram-annotation-anchor": annotation.anchor,
+      "data-diagram-annotation-guide": annotation.guide,
+      "data-diagram-annotation-line-gap": annotation.lineGap,
+      ...textAttrs(first),
       fill: fill,
-      children: t15
+      children: /*#__PURE__*/_jsx(RunSpans, {
+        runs: note.text
+      })
     });
-    $[31] = align;
-    $[32] = annotation.anchor;
-    $[33] = annotation.guide;
-    $[34] = annotation.lineGap;
-    $[35] = annotation.target;
-    $[36] = annotation.x;
-    $[37] = annotation.y;
-    $[38] = annotationId;
-    $[39] = fill;
-    $[40] = fontSize;
-    $[41] = fontWeight;
-    $[42] = t15;
-    $[43] = t9;
-    $[44] = t16;
+    $[31] = annotation.anchor;
+    $[32] = annotation.guide;
+    $[33] = annotation.lineGap;
+    $[34] = annotation.target;
+    $[35] = annotation.targets;
+    $[36] = annotationId;
+    $[37] = fill;
+    $[38] = first;
+    $[39] = note.text;
+    $[40] = t9;
   } else {
-    t16 = $[44];
+    t9 = $[40];
   }
-  let t17;
-  if ($[45] !== t16 || $[46] !== t6 || $[47] !== t7) {
-    t17 = /*#__PURE__*/_jsxs(motion.g, {
-      style: t6,
-      children: [t7, t16]
+  let t10;
+  if ($[41] !== T0 || $[42] !== t7 || $[43] !== t8 || $[44] !== t9) {
+    t10 = /*#__PURE__*/_jsxs(T0, {
+      style: t7,
+      children: [t8, t9]
     });
-    $[45] = t16;
-    $[46] = t6;
-    $[47] = t7;
-    $[48] = t17;
+    $[41] = T0;
+    $[42] = t7;
+    $[43] = t8;
+    $[44] = t9;
+    $[45] = t10;
   } else {
-    t17 = $[48];
+    t10 = $[45];
   }
-  return t17;
-}
-function annotationLeaderPath(points) {
-  return points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`).join(' ');
+  return t10;
 }
 //# sourceMappingURL=node-parts.js.map