@zukhruf/diagram 0.3.30 → 0.3.32

package/dist/lib/renderers/html/graph-html.js

@@ -1,16 +1,16 @@
 import { c as _c } from "react/compiler-runtime";
 import { motion, useTransform } from 'motion/react';
-import { compileGraph, validateGraph } from "../../compiler/diagram-compile.js";
-import { computePaths, graphContentViewBox, groupBox, groupDividerLines, nodeBox, nodeFrameRadius, nodeFrameStrokeWidth, nodeStackCount, resolveGraphAnnotations, resolveGraphLayout } from "../../layouts/graph/graph-layout.js";
+import { compileGraph } from "../../compiler/diagram-compile.js";
+import { legacyGraphLayout } from "../../layouts/graph/legacy-graph-layout.js";
+import { FONT_FAMILY, TEXT_SHAPING } from "../../layouts/text/font.js";
 import { DIAGRAM_DOT, DIAGRAM_HATCH, DiagramFrame, useDiagramTheme } from "../../react/chrome/index.js";
 import { DiagramDefs } from "../shared/defs.js";
-import { DiagramNodeIcon, EdgeOverlay, EdgeStroke, GroupRect, buildSegments, labelLineFill, nodeFrameFill, nodeFrameStroke, nodeTextFill, nodeTexture } from "../shared/graph-parts.js";
-import { ANNOTATION_REVEAL_START, AnnotationText, NodeCaption, NodePorts, NodeStackFrames, SpecialNode, isSpecialNode } from "../shared/node-parts.js";
+import { DiagramNodeIcon, EdgeOverlay, EdgeStroke, GroupRect, buildSegments, nodeFrameFill, nodeFrameStroke, nodeFrameStrokeWidth, nodeTextFill, nodeTexture } from "../shared/graph-parts.js";
+import { ANNOTATION_REVEAL_START, AnnotationText, NodeCaption, NodePorts, NodeStackFrames, SpecialNode, isSpecialNode, splitNotes } from "../shared/node-parts.js";
 import { DiagramPaperRect } from "../shared/paper.js";
+import { nodeTextParts, runFill } from "../shared/text-runs.js";
 import { formatZoom, normalizeZoom } from "../shared/viewport-zoom.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MONO = "ui-monospace, 'Geist Mono', monospace";
-const SANS = 'ui-sans-serif, system-ui, sans-serif';
 export function HtmlGraphDiagram(t0) {
   const $ = _c(23);
   let children;
@@ -117,7 +117,6 @@ function GraphHTML(t0) {
   const {
     stylePreset
   } = useDiagramTheme();
-  validateGraph(ir);
   let t1;
   let t10;
   let t11;
@@ -125,6 +124,7 @@ function GraphHTML(t0) {
   let t13;
   let t14;
   let t15;
+  let t16;
   let t2;
   let t3;
   let t4;
@@ -134,11 +134,13 @@ function GraphHTML(t0) {
   let t8;
   let t9;
   if ($[0] !== ir || $[1] !== paper || $[2] !== progress || $[3] !== stylePreset || $[4] !== title || $[5] !== zoom) {
-    const graph = resolveGraphLayout(ir);
-    const layout = graph.layout;
-    const segments = buildSegments(graph.nodes.length, graph.edges.length);
-    const seg = (kind, t16) => {
-      const index = t16 === undefined ? 0 : t16;
+    const layout = legacyGraphLayout(ir);
+    const {
+      viewBox
+    } = layout;
+    const segments = buildSegments(ir.nodes.length, ir.edges.length);
+    const seg = (kind, t17) => {
+      const index = t17 === undefined ? 0 : t17;
       const segment = segments.find(candidate => candidate.kind === kind && candidate.index === index);
       if (!segment) {
         throw new Error(`segment ${kind}[${index}] missing`);
@@ -146,21 +148,21 @@ function GraphHTML(t0) {
       return segment;
     };
     const groupsSeg = seg("groups");
-    const routedEdges = computePaths(graph);
-    const indexedEdges = routedEdges.map((routedEdge, index_0) => ({
-      ...routedEdge,
+    const indexedEdges = layout.edges.map((edgeLayout, index_0) => ({
+      ...edgeLayout,
       index: index_0,
       segment: seg("edge", index_0),
-      layer: routedEdge.edge.layer ?? "foreground"
+      layer: edgeLayout.edge.layer ?? "foreground"
     })).filter(_temp);
-    const viewBox = graphContentViewBox(graph, routedEdges);
-    const nodes = graph.nodes.map((node, i) => ({
-      node,
-      box: nodeBox(node, layout),
+    const {
+      graphNodes,
+      notes
+    } = splitNotes(layout.nodes);
+    const nodes = graphNodes.map((nodeLayout, i) => ({
+      layout: nodeLayout,
       segment: seg("node", i)
     })).filter(_temp2);
     const boxNodes = nodes.filter(_temp3);
-    const annotations = resolveGraphAnnotations(graph);
     const svgLayer = {
       className: "pointer-events-none absolute inset-0 overflow-visible",
       width: viewBox.w,
@@ -169,21 +171,22 @@ function GraphHTML(t0) {
       "aria-hidden": true
     };
     t11 = "group";
-    if ($[21] !== title) {
+    if ($[22] !== title) {
       t12 = title.join(" ");
-      $[21] = title;
-      $[22] = t12;
+      $[22] = title;
+      $[23] = t12;
     } else {
-      t12 = $[22];
+      t12 = $[23];
     }
     t13 = "w-full overflow-x-auto";
-    t14 = stylePreset;
-    if ($[23] !== zoom) {
-      t15 = formatZoom(zoom);
-      $[23] = zoom;
-      $[24] = t15;
+    t14 = TEXT_SHAPING;
+    t15 = stylePreset;
+    if ($[24] !== zoom) {
+      t16 = formatZoom(zoom);
+      $[24] = zoom;
+      $[25] = t16;
     } else {
-      t15 = $[24];
+      t16 = $[25];
     }
     t6 = "relative mx-auto";
     t7 = {
@@ -192,22 +195,22 @@ function GraphHTML(t0) {
       zoom
     };
     t8 = "graph";
-    let t17;
-    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-      t17 = /*#__PURE__*/_jsx(DiagramDefs, {});
-      $[25] = t17;
+    let t18;
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+      t18 = /*#__PURE__*/_jsx(DiagramDefs, {});
+      $[26] = t18;
     } else {
-      t17 = $[25];
+      t18 = $[26];
     }
-    let t18;
-    if ($[26] !== progress) {
-      t18 = t19 => {
+    let t19;
+    if ($[27] !== progress) {
+      t19 = t20 => {
         const {
           d: d_0,
           edge,
           index: index_1,
           segment: segment_0
-        } = t19;
+        } = t20;
         return /*#__PURE__*/_jsx(EdgeStroke, {
           d: d_0,
           edge: edge,
@@ -216,108 +219,98 @@ function GraphHTML(t0) {
           end: segment_0.end
         }, `edge-background-${index_1}`);
       };
-      $[26] = progress;
-      $[27] = t18;
+      $[27] = progress;
+      $[28] = t19;
     } else {
-      t18 = $[27];
+      t19 = $[28];
     }
-    let t19;
-    if ($[28] !== progress) {
-      t19 = t20 => {
+    let t20;
+    if ($[29] !== progress) {
+      t20 = t21 => {
         const {
-          node: node_2,
-          box,
+          layout: nodeLayout_0,
           segment: segment_1
-        } = t20;
-        return isSpecialNode(node_2) ? /*#__PURE__*/_jsx(SpecialNode, {
-          node: node_2,
-          box: box,
+        } = t21;
+        return isSpecialNode(nodeLayout_0.node) ? /*#__PURE__*/_jsx(SpecialNode, {
+          layout: nodeLayout_0,
           progress: progress,
           start: segment_1.start,
           end: segment_1.end
-        }, `node-${node_2.id}`) : /*#__PURE__*/_jsx(NodeStack, {
-          node: node_2,
-          box: box,
+        }, `node-${nodeLayout_0.node.id}`) : /*#__PURE__*/_jsx(NodeStack, {
+          layout: nodeLayout_0,
           progress: progress,
           start: segment_1.start,
           end: segment_1.end
-        }, `stack-${node_2.id}`);
+        }, `stack-${nodeLayout_0.node.id}`);
       };
-      $[28] = progress;
-      $[29] = t19;
+      $[29] = progress;
+      $[30] = t20;
     } else {
-      t19 = $[29];
+      t20 = $[30];
     }
     t9 = /*#__PURE__*/_jsxs("svg", {
       ...svgLayer,
-      children: [t17, /*#__PURE__*/_jsx(DiagramPaperRect, {
+      children: [t18, /*#__PURE__*/_jsx(DiagramPaperRect, {
         kind: "graph",
         paper: paper,
         x: viewBox.x,
         y: viewBox.y,
         width: viewBox.w,
         height: viewBox.h
-      }), graph.groups?.map(group => /*#__PURE__*/_jsx(GroupRect, {
-        group: group,
-        box: groupBox(group, graph.nodes, layout, graph.groups),
-        dividers: groupDividerLines(group, graph.nodes, layout, graph.groups),
+      }), layout.groups.map(groupLayout => /*#__PURE__*/_jsx(GroupRect, {
+        layout: groupLayout,
         progress: progress,
         start: groupsSeg.start,
         end: groupsSeg.end
-      }, `group-${group.id}`)), indexedEdges.filter(_temp4).map(t18), nodes.map(t19)]
+      }, `group-${groupLayout.group.id}`)), indexedEdges.filter(_temp4).map(t19), nodes.map(t20)]
     });
-    t10 = boxNodes.map(t20 => {
+    t10 = boxNodes.map(t21 => {
       const {
-        node: node_3,
-        box: box_0,
+        layout: nodeLayout_1,
         segment: segment_2
-      } = t20;
+      } = t21;
       return /*#__PURE__*/_jsx(NodeBox, {
-        node: node_3,
-        box: box_0,
+        layout: nodeLayout_1,
         origin: viewBox,
         progress: progress,
         start: segment_2.start,
         end: segment_2.end
-      }, `node-${node_3.id}`);
+      }, `node-${nodeLayout_1.node.id}`);
     });
     t1 = svgLayer;
-    let t21;
-    if ($[30] !== progress) {
-      t21 = t22 => {
+    let t22;
+    if ($[31] !== progress) {
+      t22 = t23 => {
         const {
-          node: node_4,
-          box: box_1,
+          layout: nodeLayout_2,
           segment: segment_3
-        } = t22;
+        } = t23;
         return /*#__PURE__*/_jsxs(NodeReveal, {
           progress: progress,
           start: segment_3.start,
           end: segment_3.end,
           children: [/*#__PURE__*/_jsx(NodePorts, {
-            node: node_4,
-            box: box_1
+            layout: nodeLayout_2
           }), /*#__PURE__*/_jsx(NodeCaption, {
-            node: node_4,
-            box: box_1
+            layout: nodeLayout_2
           })]
-        }, `node-marks-${node_4.id}`);
+        }, `node-marks-${nodeLayout_2.node.id}`);
       };
-      $[30] = progress;
-      $[31] = t21;
+      $[31] = progress;
+      $[32] = t22;
     } else {
-      t21 = $[31];
+      t22 = $[32];
     }
-    t2 = boxNodes.map(t21);
-    let t22;
-    if ($[32] !== progress) {
-      t22 = t23 => {
+    t2 = boxNodes.map(t22);
+    let t23;
+    if ($[33] !== progress) {
+      t23 = t24 => {
         const {
           d: d_1,
           edge: edge_0,
           index: index_2,
           segment: segment_4
-        } = t23;
+        } = t24;
         return /*#__PURE__*/_jsx(EdgeStroke, {
           d: d_1,
           edge: edge_0,
@@ -326,52 +319,34 @@ function GraphHTML(t0) {
           end: segment_4.end
         }, `edge-foreground-${index_2}`);
       };
-      $[32] = progress;
-      $[33] = t22;
-    } else {
-      t22 = $[33];
-    }
-    t3 = indexedEdges.filter(_temp5).map(t22);
-    let t23;
-    if ($[34] !== progress) {
-      t23 = t24 => {
-        const {
-          edge: edge_1,
-          labelPlacement,
-          badgePlacement,
-          index: index_3,
-          segment: segment_5
-        } = t24;
-        return /*#__PURE__*/_jsx(EdgeOverlay, {
-          edge: edge_1,
-          labelPlacement: labelPlacement,
-          badgePlacement: badgePlacement,
-          progress: progress,
-          start: segment_5.start,
-          end: segment_5.end
-        }, `edge-overlay-${index_3}`);
-      };
-      $[34] = progress;
-      $[35] = t23;
+      $[33] = progress;
+      $[34] = t23;
     } else {
-      t23 = $[35];
+      t23 = $[34];
     }
-    t4 = indexedEdges.map(t23);
+    t3 = indexedEdges.filter(_temp5).map(t23);
     let t24;
-    if ($[36] !== progress) {
-      t24 = (annotation, i_0) => /*#__PURE__*/_jsx(AnnotationText, {
-        annotation: annotation,
+    if ($[35] !== progress) {
+      t24 = edgeLayout_0 => /*#__PURE__*/_jsx(EdgeOverlay, {
+        layout: edgeLayout_0,
         progress: progress,
-        start: ANNOTATION_REVEAL_START,
-        end: 1,
-        index: i_0
-      }, `annot-${i_0}`);
-      $[36] = progress;
-      $[37] = t24;
+        start: edgeLayout_0.segment.start,
+        end: edgeLayout_0.segment.end
+      }, `edge-overlay-${edgeLayout_0.index}`);
+      $[35] = progress;
+      $[36] = t24;
     } else {
-      t24 = $[37];
+      t24 = $[36];
     }
-    t5 = annotations.map(t24);
+    t4 = indexedEdges.map(t24);
+    t5 = notes.map(note => /*#__PURE__*/_jsx(AnnotationText, {
+      note: note,
+      annotations: ir.annotations,
+      leaders: layout.leaders,
+      progress: progress,
+      start: ANNOTATION_REVEAL_START,
+      end: 1
+    }, note.node.id));
     $[0] = ir;
     $[1] = paper;
     $[2] = progress;
@@ -385,14 +360,15 @@ function GraphHTML(t0) {
     $[10] = t13;
     $[11] = t14;
     $[12] = t15;
-    $[13] = t2;
-    $[14] = t3;
-    $[15] = t4;
-    $[16] = t5;
-    $[17] = t6;
-    $[18] = t7;
-    $[19] = t8;
-    $[20] = t9;
+    $[13] = t16;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+    $[21] = t9;
   } else {
     t1 = $[6];
     t10 = $[7];
@@ -401,69 +377,72 @@ function GraphHTML(t0) {
     t13 = $[10];
     t14 = $[11];
     t15 = $[12];
-    t2 = $[13];
-    t3 = $[14];
-    t4 = $[15];
-    t5 = $[16];
-    t6 = $[17];
-    t7 = $[18];
-    t8 = $[19];
-    t9 = $[20];
+    t16 = $[13];
+    t2 = $[14];
+    t3 = $[15];
+    t4 = $[16];
+    t5 = $[17];
+    t6 = $[18];
+    t7 = $[19];
+    t8 = $[20];
+    t9 = $[21];
   }
-  let t16;
-  if ($[38] !== t1 || $[39] !== t2 || $[40] !== t3 || $[41] !== t4 || $[42] !== t5) {
-    t16 = /*#__PURE__*/_jsxs("svg", {
+  let t17;
+  if ($[37] !== t1 || $[38] !== t2 || $[39] !== t3 || $[40] !== t4 || $[41] !== t5) {
+    t17 = /*#__PURE__*/_jsxs("svg", {
       ...t1,
       children: [t2, t3, t4, t5]
     });
-    $[38] = t1;
-    $[39] = t2;
-    $[40] = t3;
-    $[41] = t4;
-    $[42] = t5;
-    $[43] = t16;
+    $[37] = t1;
+    $[38] = t2;
+    $[39] = t3;
+    $[40] = t4;
+    $[41] = t5;
+    $[42] = t17;
   } else {
-    t16 = $[43];
+    t17 = $[42];
   }
-  let t17;
-  if ($[44] !== t10 || $[45] !== t16 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8 || $[49] !== t9) {
-    t17 = /*#__PURE__*/_jsxs("div", {
+  let t18;
+  if ($[43] !== t10 || $[44] !== t17 || $[45] !== t6 || $[46] !== t7 || $[47] !== t8 || $[48] !== t9) {
+    t18 = /*#__PURE__*/_jsxs("div", {
       className: t6,
       style: t7,
       "data-diagram-html": t8,
-      children: [t9, t10, t16]
+      children: [t9, t10, t17]
     });
-    $[44] = t10;
-    $[45] = t16;
-    $[46] = t6;
-    $[47] = t7;
-    $[48] = t8;
-    $[49] = t9;
-    $[50] = t17;
+    $[43] = t10;
+    $[44] = t17;
+    $[45] = t6;
+    $[46] = t7;
+    $[47] = t8;
+    $[48] = t9;
+    $[49] = t18;
   } else {
-    t17 = $[50];
+    t18 = $[49];
   }
-  let t18;
-  if ($[51] !== t11 || $[52] !== t12 || $[53] !== t13 || $[54] !== t14 || $[55] !== t15 || $[56] !== t17) {
-    t18 = /*#__PURE__*/_jsx("div", {
+  let t19;
+  if ($[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t18) {
+    t19 = /*#__PURE__*/_jsx("div", {
       role: t11,
       "aria-label": t12,
       className: t13,
-      "data-diagram-style-preset": t14,
-      "data-diagram-viewport-zoom": t15,
-      children: t17
+      style: t14,
+      "data-diagram-style-preset": t15,
+      "data-diagram-viewport-zoom": t16,
+      children: t18
     });
-    $[51] = t11;
-    $[52] = t12;
-    $[53] = t13;
-    $[54] = t14;
-    $[55] = t15;
-    $[56] = t17;
-    $[57] = t18;
-  } else {
-    t18 = $[57];
-  }
-  return t18;
+    $[50] = t11;
+    $[51] = t12;
+    $[52] = t13;
+    $[53] = t14;
+    $[54] = t15;
+    $[55] = t16;
+    $[56] = t18;
+    $[57] = t19;
+  } else {
+    t19 = $[57];
+  }
+  return t19;
 }
 function _temp5(t0) {
   const {
@@ -479,15 +458,21 @@ function _temp4(t0) {
 }
 function _temp3(t0) {
   const {
-    node: node_1
+    layout: t1
   } = t0;
-  return !isSpecialNode(node_1);
+  const {
+    node: node_0
+  } = t1;
+  return !isSpecialNode(node_0);
 }
 function _temp2(t0) {
   const {
-    node: node_0
+    layout: t1
   } = t0;
-  return !node_0.hidden;
+  const {
+    node
+  } = t1;
+  return !node.hidden;
 }
 function _temp(t0) {
   const {
@@ -576,10 +561,9 @@ function NodeReveal(t0) {
   return t8;
 }
 function NodeStack(t0) {
-  const $ = _c(23);
+  const $ = _c(19);
   const {
-    node,
-    box,
+    layout,
     progress,
     start,
     end
@@ -587,82 +571,73 @@ function NodeStack(t0) {
   const {
     accent: themeAccent
   } = useDiagramTheme();
+  const {
+    node
+  } = layout;
   const frame = node.frame ?? "solid";
-  if (frame === "none" || nodeStackCount(node) < 2) {
+  if (layout.frames.length === 0) {
     return null;
   }
   let t1;
-  if ($[0] !== node) {
-    t1 = nodeFrameRadius(node);
-    $[0] = node;
-    $[1] = t1;
+  if ($[0] !== frame || $[1] !== node) {
+    t1 = nodeFrameFill(node, frame);
+    $[0] = frame;
+    $[1] = node;
+    $[2] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[2];
   }
   let t2;
-  if ($[2] !== frame || $[3] !== node) {
-    t2 = nodeFrameFill(node, frame);
-    $[2] = frame;
-    $[3] = node;
-    $[4] = t2;
+  if ($[3] !== frame || $[4] !== node || $[5] !== themeAccent) {
+    t2 = nodeFrameStroke(node, frame, themeAccent);
+    $[3] = frame;
+    $[4] = node;
+    $[5] = themeAccent;
+    $[6] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[6];
   }
   let t3;
-  if ($[5] !== frame || $[6] !== node || $[7] !== themeAccent) {
-    t3 = nodeFrameStroke(node, frame, themeAccent);
-    $[5] = frame;
-    $[6] = node;
-    $[7] = themeAccent;
+  if ($[7] !== node) {
+    t3 = nodeFrameStrokeWidth(node);
+    $[7] = node;
     $[8] = t3;
   } else {
     t3 = $[8];
   }
   let t4;
-  if ($[9] !== node) {
-    t4 = nodeFrameStrokeWidth(node);
-    $[9] = node;
-    $[10] = t4;
-  } else {
-    t4 = $[10];
-  }
-  let t5;
-  if ($[11] !== box || $[12] !== node || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
-    t5 = /*#__PURE__*/_jsx(NodeStackFrames, {
-      node: node,
-      box: box,
-      rx: t1,
-      fill: t2,
-      stroke: t3,
-      strokeWidth: t4
+  if ($[9] !== layout || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+    t4 = /*#__PURE__*/_jsx(NodeStackFrames, {
+      layout: layout,
+      fill: t1,
+      stroke: t2,
+      strokeWidth: t3
     });
-    $[11] = box;
-    $[12] = node;
-    $[13] = t1;
-    $[14] = t2;
-    $[15] = t3;
-    $[16] = t4;
-    $[17] = t5;
+    $[9] = layout;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
   } else {
-    t5 = $[17];
+    t4 = $[13];
   }
-  let t6;
-  if ($[18] !== end || $[19] !== progress || $[20] !== start || $[21] !== t5) {
-    t6 = /*#__PURE__*/_jsx(NodeReveal, {
+  let t5;
+  if ($[14] !== end || $[15] !== progress || $[16] !== start || $[17] !== t4) {
+    t5 = /*#__PURE__*/_jsx(NodeReveal, {
       progress: progress,
       start: start,
       end: end,
-      children: t5
+      children: t4
     });
-    $[18] = end;
-    $[19] = progress;
-    $[20] = start;
-    $[21] = t5;
-    $[22] = t6;
+    $[14] = end;
+    $[15] = progress;
+    $[16] = start;
+    $[17] = t4;
+    $[18] = t5;
   } else {
-    t6 = $[22];
+    t5 = $[18];
   }
-  return t6;
+  return t5;
 }
 function textureImage(texture) {
   if (texture === 'dots') {
@@ -678,11 +653,16 @@ function textureImage(texture) {
   }
   return {};
 }
+
+/**
+ * A node frame with its text drawn as absolutely placed runs, at the positions
+ * the SVG output draws them. The frame is an inset shadow, not a border, so the
+ * runs share the frame's origin.
+ */
 function NodeBox(t0) {
-  const $ = _c(90);
+  const $ = _c(83);
   const {
-    node,
-    box,
+    layout,
     origin,
     progress,
     start,
@@ -737,6 +717,12 @@ function NodeBox(t0) {
     t6 = $[9];
   }
   const translateY = useTransform(progress, t4, t5, t6);
+  const {
+    node,
+    box,
+    icon,
+    text
+  } = layout;
   const frame = node.frame ?? "solid";
   let t7;
   if ($[10] !== frame || $[11] !== node || $[12] !== themeAccent) {
@@ -749,321 +735,286 @@ function NodeBox(t0) {
     t7 = $[13];
   }
   const fill = t7;
-  let t8;
-  if ($[14] !== node.label) {
-    t8 = Array.isArray(node.label) ? node.label : [node.label];
-    $[14] = node.label;
-    $[15] = t8;
-  } else {
-    t8 = $[15];
-  }
-  const lines = t8;
   let T0;
-  let itemLines;
+  let lastRun;
   let t10;
   let t11;
   let t12;
   let t13;
   let t14;
   let t15;
-  let t16;
+  let t8;
   let t9;
-  if ($[16] !== box.h || $[17] !== box.w || $[18] !== box.x || $[19] !== box.y || $[20] !== fill || $[21] !== frame || $[22] !== lines || $[23] !== node || $[24] !== opacity || $[25] !== origin.x || $[26] !== origin.y || $[27] !== themeAccent || $[28] !== translateY) {
-    const descriptionLines = [node.description ?? []].flat();
-    let t17;
-    if ($[39] !== node.items) {
-      t17 = node.items ?? [];
-      $[39] = node.items;
-      $[40] = t17;
+  if ($[14] !== box || $[15] !== fill || $[16] !== frame || $[17] !== icon || $[18] !== layout || $[19] !== node || $[20] !== opacity || $[21] !== origin.x || $[22] !== origin.y || $[23] !== text || $[24] !== themeAccent || $[25] !== translateY) {
+    const {
+      title,
+      description,
+      items
+    } = nodeTextParts(layout);
+    let t16;
+    if ($[36] !== text) {
+      t16 = text.at(-1);
+      $[36] = text;
+      $[37] = t16;
     } else {
-      t17 = $[40];
+      t16 = $[37];
     }
-    itemLines = t17;
-    const startAligned = (node.textAlign ?? "center") === "start" || Boolean(node.icon) || descriptionLines.length > 0;
-    const iconSize = node.iconSize ?? 42;
+    lastRun = t16;
     T0 = motion.div;
-    t12 = node.id;
-    t13 = node.tone;
-    t14 = startAligned ? "absolute flex items-start gap-[22px] px-7 py-6" : "absolute flex flex-col items-center justify-center gap-2 px-3 text-center";
-    const t18 = box.x - origin.x;
-    const t19 = box.y - origin.y;
-    const t20 = box.w;
-    const t21 = box.h;
-    let t22;
-    if ($[41] !== node) {
-      t22 = nodeFrameRadius(node);
-      $[41] = node;
-      $[42] = t22;
-    } else {
-      t22 = $[42];
-    }
-    let t23;
-    if ($[43] !== frame || $[44] !== node || $[45] !== themeAccent) {
-      t23 = frame === "none" ? {} : {
+    t8 = node.id;
+    t9 = node.tone;
+    t10 = "absolute";
+    const t17 = box.x - origin.x;
+    const t18 = box.y - origin.y;
+    let t19;
+    if ($[38] !== frame || $[39] !== node || $[40] !== themeAccent) {
+      t19 = frame === "none" ? {} : {
         backgroundColor: nodeFrameFill(node, frame),
-        border: `${nodeFrameStrokeWidth(node)}px solid ${nodeFrameStroke(node, frame, themeAccent)}`,
+        boxShadow: `inset 0 0 0 ${nodeFrameStrokeWidth(node)}px ${nodeFrameStroke(node, frame, themeAccent)}`,
         ...textureImage(nodeTexture(node, frame))
       };
-      $[43] = frame;
-      $[44] = node;
-      $[45] = themeAccent;
-      $[46] = t23;
+      $[38] = frame;
+      $[39] = node;
+      $[40] = themeAccent;
+      $[41] = t19;
     } else {
-      t23 = $[46];
+      t19 = $[41];
     }
-    if ($[47] !== box.h || $[48] !== box.w || $[49] !== fill || $[50] !== opacity || $[51] !== t18 || $[52] !== t19 || $[53] !== t22 || $[54] !== t23 || $[55] !== translateY) {
-      t15 = {
-        left: t18,
-        top: t19,
-        width: t20,
-        height: t21,
+    if ($[42] !== box.h || $[43] !== box.w || $[44] !== fill || $[45] !== layout.radius || $[46] !== opacity || $[47] !== t17 || $[48] !== t18 || $[49] !== t19 || $[50] !== translateY) {
+      t11 = {
+        left: t17,
+        top: t18,
+        width: box.w,
+        height: box.h,
         boxSizing: "border-box",
-        borderRadius: t22,
-        ...t23,
+        borderRadius: layout.radius,
+        ...t19,
         color: fill,
         opacity,
         y: translateY
       };
-      $[47] = box.h;
-      $[48] = box.w;
-      $[49] = fill;
-      $[50] = opacity;
-      $[51] = t18;
-      $[52] = t19;
-      $[53] = t22;
-      $[54] = t23;
-      $[55] = translateY;
-      $[56] = t15;
+      $[42] = box.h;
+      $[43] = box.w;
+      $[44] = fill;
+      $[45] = layout.radius;
+      $[46] = opacity;
+      $[47] = t17;
+      $[48] = t18;
+      $[49] = t19;
+      $[50] = translateY;
+      $[51] = t11;
     } else {
-      t15 = $[56];
+      t11 = $[51];
     }
-    if ($[57] !== fill || $[58] !== iconSize || $[59] !== node.icon || $[60] !== node.textColor || $[61] !== themeAccent) {
-      t16 = node.icon && /*#__PURE__*/_jsx("svg", {
-        width: iconSize,
-        height: iconSize,
-        className: "shrink-0",
+    if ($[52] !== box.x || $[53] !== box.y || $[54] !== fill || $[55] !== icon || $[56] !== node.icon || $[57] !== node.textColor || $[58] !== themeAccent) {
+      t12 = node.icon && icon && /*#__PURE__*/_jsx("svg", {
+        width: icon.size,
+        height: icon.size,
+        className: "absolute",
+        style: {
+          left: icon.x - box.x,
+          top: icon.y - box.y
+        },
         "aria-hidden": true,
         children: /*#__PURE__*/_jsx(DiagramNodeIcon, {
           icon: node.icon,
           x: 0,
           y: 0,
-          size: iconSize,
+          size: icon.size,
           color: node.textColor === "accent" ? themeAccent : fill
         })
       });
-      $[57] = fill;
-      $[58] = iconSize;
-      $[59] = node.icon;
-      $[60] = node.textColor;
-      $[61] = themeAccent;
-      $[62] = t16;
+      $[52] = box.x;
+      $[53] = box.y;
+      $[54] = fill;
+      $[55] = icon;
+      $[56] = node.icon;
+      $[57] = node.textColor;
+      $[58] = themeAccent;
+      $[59] = t12;
     } else {
-      t16 = $[62];
+      t12 = $[59];
     }
-    t9 = startAligned ? "flex min-w-0 flex-col gap-2" : "contents";
-    if ($[63] !== fill || $[64] !== lines || $[65] !== node || $[66] !== startAligned || $[67] !== themeAccent) {
-      t10 = /*#__PURE__*/_jsx(NodeLabel, {
-        node: node,
-        lines: lines,
-        fill: fill,
-        themeAccent: themeAccent,
-        startAligned: startAligned
-      });
-      $[63] = fill;
-      $[64] = lines;
-      $[65] = node;
-      $[66] = startAligned;
-      $[67] = themeAccent;
-      $[68] = t10;
+    let t20;
+    if ($[60] !== box || $[61] !== fill || $[62] !== themeAccent) {
+      t20 = (run, i) => /*#__PURE__*/_jsx(RunText, {
+        run: run,
+        origin: box,
+        color: runFill(run, fill, themeAccent)
+      }, i);
+      $[60] = box;
+      $[61] = fill;
+      $[62] = themeAccent;
+      $[63] = t20;
     } else {
-      t10 = $[68];
+      t20 = $[63];
     }
-    t11 = descriptionLines.length > 0 && /*#__PURE__*/_jsx("p", {
+    t13 = title.map(t20);
+    t14 = description.length > 0 && /*#__PURE__*/_jsx("div", {
       "data-diagram-node-description": node.id,
-      className: "text-pretty",
-      style: {
-        fontFamily: SANS,
-        fontSize: node.bodyFontSize ?? 13,
-        lineHeight: 1.35
-      },
-      children: descriptionLines.join(" ")
+      children: description.map((run_0, i_0) => /*#__PURE__*/_jsx(RunText, {
+        run: run_0,
+        origin: box
+      }, i_0))
     });
-    $[16] = box.h;
-    $[17] = box.w;
-    $[18] = box.x;
-    $[19] = box.y;
-    $[20] = fill;
-    $[21] = frame;
-    $[22] = lines;
-    $[23] = node;
-    $[24] = opacity;
-    $[25] = origin.x;
-    $[26] = origin.y;
-    $[27] = themeAccent;
-    $[28] = translateY;
-    $[29] = T0;
-    $[30] = itemLines;
-    $[31] = t10;
-    $[32] = t11;
-    $[33] = t12;
-    $[34] = t13;
-    $[35] = t14;
-    $[36] = t15;
-    $[37] = t16;
-    $[38] = t9;
-  } else {
-    T0 = $[29];
-    itemLines = $[30];
-    t10 = $[31];
-    t11 = $[32];
-    t12 = $[33];
-    t13 = $[34];
-    t14 = $[35];
-    t15 = $[36];
-    t16 = $[37];
-    t9 = $[38];
+    let t21;
+    if ($[64] !== box || $[65] !== node.id) {
+      t21 = (t22, i_1) => {
+        const {
+          run: run_1,
+          bullet
+        } = t22;
+        return /*#__PURE__*/_jsxs("div", {
+          "data-diagram-node-item": `${node.id}:${i_1}`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "absolute rounded-full bg-current",
+            style: {
+              left: bullet.x - box.x - 2.2,
+              top: bullet.y - box.y - 2.2,
+              width: 4.4,
+              height: 4.4
+            }
+          }), /*#__PURE__*/_jsx(RunText, {
+            run: run_1,
+            origin: box
+          })]
+        }, i_1);
+      };
+      $[64] = box;
+      $[65] = node.id;
+      $[66] = t21;
+    } else {
+      t21 = $[66];
+    }
+    t15 = items.map(t21);
+    $[14] = box;
+    $[15] = fill;
+    $[16] = frame;
+    $[17] = icon;
+    $[18] = layout;
+    $[19] = node;
+    $[20] = opacity;
+    $[21] = origin.x;
+    $[22] = origin.y;
+    $[23] = text;
+    $[24] = themeAccent;
+    $[25] = translateY;
+    $[26] = T0;
+    $[27] = lastRun;
+    $[28] = t10;
+    $[29] = t11;
+    $[30] = t12;
+    $[31] = t13;
+    $[32] = t14;
+    $[33] = t15;
+    $[34] = t8;
+    $[35] = t9;
+  } else {
+    T0 = $[26];
+    lastRun = $[27];
+    t10 = $[28];
+    t11 = $[29];
+    t12 = $[30];
+    t13 = $[31];
+    t14 = $[32];
+    t15 = $[33];
+    t8 = $[34];
+    t9 = $[35];
   }
-  let t17;
-  if ($[69] !== itemLines || $[70] !== node.bodyFontSize || $[71] !== node.id) {
-    t17 = itemLines.length > 0 && /*#__PURE__*/_jsx("ul", {
-      className: "flex list-disc flex-col gap-1 pl-4",
+  let t16;
+  if ($[67] !== box.y || $[68] !== lastRun || $[69] !== node.content || $[70] !== node.id) {
+    t16 = node.content !== undefined && /*#__PURE__*/_jsx("div", {
+      className: "absolute inset-x-0 bottom-0 flex flex-col items-center justify-center",
       style: {
-        fontFamily: SANS,
-        fontSize: node.bodyFontSize ?? 13
+        top: lastRun ? lastRun.bounds.y + lastRun.bounds.h - box.y : 0
       },
-      children: itemLines.map((item, i) => /*#__PURE__*/_jsx("li", {
-        "data-diagram-node-item": `${node.id}:${i}`,
-        children: item
-      }, i))
-    });
-    $[69] = itemLines;
-    $[70] = node.bodyFontSize;
-    $[71] = node.id;
-    $[72] = t17;
-  } else {
-    t17 = $[72];
-  }
-  let t18;
-  if ($[73] !== node.content || $[74] !== node.id) {
-    t18 = node.content !== undefined && /*#__PURE__*/_jsx("div", {
-      "data-diagram-node-content": node.id,
-      children: node.content
-    });
-    $[73] = node.content;
-    $[74] = node.id;
-    $[75] = t18;
-  } else {
-    t18 = $[75];
-  }
-  let t19;
-  if ($[76] !== t10 || $[77] !== t11 || $[78] !== t17 || $[79] !== t18 || $[80] !== t9) {
-    t19 = /*#__PURE__*/_jsxs("div", {
-      className: t9,
-      children: [t10, t11, t17, t18]
+      children: /*#__PURE__*/_jsx("div", {
+        "data-diagram-node-content": node.id,
+        children: node.content
+      })
     });
-    $[76] = t10;
-    $[77] = t11;
-    $[78] = t17;
-    $[79] = t18;
-    $[80] = t9;
-    $[81] = t19;
+    $[67] = box.y;
+    $[68] = lastRun;
+    $[69] = node.content;
+    $[70] = node.id;
+    $[71] = t16;
   } else {
-    t19 = $[81];
+    t16 = $[71];
   }
-  let t20;
-  if ($[82] !== T0 || $[83] !== t12 || $[84] !== t13 || $[85] !== t14 || $[86] !== t15 || $[87] !== t16 || $[88] !== t19) {
-    t20 = /*#__PURE__*/_jsxs(T0, {
-      "data-diagram-node": t12,
-      "data-diagram-node-tone": t13,
-      className: t14,
-      style: t15,
-      children: [t16, t19]
+  let t17;
+  if ($[72] !== T0 || $[73] !== t10 || $[74] !== t11 || $[75] !== t12 || $[76] !== t13 || $[77] !== t14 || $[78] !== t15 || $[79] !== t16 || $[80] !== t8 || $[81] !== t9) {
+    t17 = /*#__PURE__*/_jsxs(T0, {
+      "data-diagram-node": t8,
+      "data-diagram-node-tone": t9,
+      className: t10,
+      style: t11,
+      children: [t12, t13, t14, t15, t16]
     });
-    $[82] = T0;
-    $[83] = t12;
-    $[84] = t13;
-    $[85] = t14;
-    $[86] = t15;
-    $[87] = t16;
-    $[88] = t19;
-    $[89] = t20;
-  } else {
-    t20 = $[89];
-  }
-  return t20;
+    $[72] = T0;
+    $[73] = t10;
+    $[74] = t11;
+    $[75] = t12;
+    $[76] = t13;
+    $[77] = t14;
+    $[78] = t15;
+    $[79] = t16;
+    $[80] = t8;
+    $[81] = t9;
+    $[82] = t17;
+  } else {
+    t17 = $[82];
+  }
+  return t17;
 }
-function NodeLabel(t0) {
-  const $ = _c(19);
+function RunText(t0) {
+  const $ = _c(12);
   const {
-    node,
-    lines,
-    fill,
-    themeAccent,
-    startAligned
+    run,
+    origin,
+    color
   } = t0;
-  const fontSize = node.fontSize ?? (startAligned ? 15 : 12);
-  const defaultWeight = startAligned ? 700 : 500;
-  const t1 = startAligned ? SANS : MONO;
-  const t2 = `${startAligned ? fontSize + 4 : Math.max(12, fontSize + 2)}px`;
-  const t3 = startAligned ? undefined : 0.6;
-  let t4;
-  if ($[0] !== fontSize || $[1] !== t1 || $[2] !== t2 || $[3] !== t3) {
-    t4 = {
-      fontFamily: t1,
-      fontSize,
-      lineHeight: t2,
-      letterSpacing: t3
+  const t1 = run.bounds.x - origin.x;
+  const t2 = run.bounds.y - origin.y;
+  const t3 = FONT_FAMILY[run.font.face];
+  const t4 = `${run.bounds.h}px`;
+  const t5 = run.font.face === "mono" ? 0.6 : undefined;
+  let t6;
+  if ($[0] !== color || $[1] !== run.font.size || $[2] !== run.font.weight || $[3] !== t1 || $[4] !== t2 || $[5] !== t3 || $[6] !== t4 || $[7] !== t5) {
+    t6 = {
+      left: t1,
+      top: t2,
+      fontFamily: t3,
+      fontSize: run.font.size,
+      fontWeight: run.font.weight,
+      lineHeight: t4,
+      letterSpacing: t5,
+      color
     };
-    $[0] = fontSize;
-    $[1] = t1;
-    $[2] = t2;
-    $[3] = t3;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  let t5;
-  if ($[5] !== defaultWeight || $[6] !== fill || $[7] !== lines || $[8] !== node.fontWeight || $[9] !== themeAccent) {
-    let t6;
-    if ($[11] !== defaultWeight || $[12] !== fill || $[13] !== node.fontWeight || $[14] !== themeAccent) {
-      t6 = (line, i) => /*#__PURE__*/_jsx("div", {
-        style: {
-          color: labelLineFill(line, fill, themeAccent),
-          fontWeight: typeof line === "string" ? node.fontWeight ?? defaultWeight : line.fontWeight ?? node.fontWeight ?? defaultWeight
-        },
-        children: typeof line === "string" ? line : line.text
-      }, i);
-      $[11] = defaultWeight;
-      $[12] = fill;
-      $[13] = node.fontWeight;
-      $[14] = themeAccent;
-      $[15] = t6;
-    } else {
-      t6 = $[15];
-    }
-    t5 = lines.map(t6);
-    $[5] = defaultWeight;
-    $[6] = fill;
-    $[7] = lines;
-    $[8] = node.fontWeight;
-    $[9] = themeAccent;
-    $[10] = t5;
+    $[0] = color;
+    $[1] = run.font.size;
+    $[2] = run.font.weight;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = t5;
+    $[8] = t6;
   } else {
-    t5 = $[10];
+    t6 = $[8];
   }
-  let t6;
-  if ($[16] !== t4 || $[17] !== t5) {
-    t6 = /*#__PURE__*/_jsx("div", {
-      className: "text-balance",
-      style: t4,
-      children: t5
+  let t7;
+  if ($[9] !== run.text || $[10] !== t6) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      className: "absolute whitespace-pre",
+      style: t6,
+      children: run.text
     });
-    $[16] = t4;
-    $[17] = t5;
-    $[18] = t6;
+    $[9] = run.text;
+    $[10] = t6;
+    $[11] = t7;
   } else {
-    t6 = $[18];
+    t7 = $[11];
   }
-  return t6;
+  return t7;
 }
 //# sourceMappingURL=graph-html.js.map