@zukhruf/diagram 0.3.32 → 0.3.34

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

@@ -1,21 +1,20 @@
 import { c as _c } from "react/compiler-runtime";
 import { motion, useTransform } from 'motion/react';
 import { compileGraph } from "../../compiler/diagram-compile.js";
-import { legacyGraphLayout } from "../../layouts/graph/legacy-graph-layout.js";
+import { layoutGraph } from "../../layouts/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, 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 { NOTE_REVEAL_START, NodeCaption, NodePorts, NodeStackFrames, NoteText, 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";
 export function HtmlGraphDiagram(t0) {
-  const $ = _c(23);
+  const $ = _c(21);
   let children;
   let chrome;
-  let graph;
   let paper;
   let title;
   let viewport;
@@ -23,7 +22,6 @@ export function HtmlGraphDiagram(t0) {
     ({
       title,
       children,
-      graph,
       viewport,
       paper,
       ...chrome
@@ -31,49 +29,46 @@ export function HtmlGraphDiagram(t0) {
     $[0] = t0;
     $[1] = children;
     $[2] = chrome;
-    $[3] = graph;
-    $[4] = paper;
-    $[5] = title;
-    $[6] = viewport;
+    $[3] = paper;
+    $[4] = title;
+    $[5] = viewport;
   } else {
     children = $[1];
     chrome = $[2];
-    graph = $[3];
-    paper = $[4];
-    title = $[5];
-    viewport = $[6];
+    paper = $[3];
+    title = $[4];
+    viewport = $[5];
   }
   let t1;
-  if ($[7] !== children || $[8] !== graph) {
-    t1 = compileGraph(children, graph);
-    $[7] = children;
-    $[8] = graph;
-    $[9] = t1;
+  if ($[6] !== children) {
+    t1 = compileGraph(children);
+    $[6] = children;
+    $[7] = t1;
   } else {
-    t1 = $[9];
+    t1 = $[7];
   }
   const ir = t1;
   let t2;
-  if ($[10] !== title) {
+  if ($[8] !== title) {
     t2 = [title].flat();
-    $[10] = title;
-    $[11] = t2;
+    $[8] = title;
+    $[9] = t2;
   } else {
-    t2 = $[11];
+    t2 = $[9];
   }
   const lines = t2;
   const t3 = viewport?.zoom;
   let t4;
-  if ($[12] !== t3) {
+  if ($[10] !== t3) {
     t4 = normalizeZoom(t3);
-    $[12] = t3;
-    $[13] = t4;
+    $[10] = t3;
+    $[11] = t4;
   } else {
-    t4 = $[13];
+    t4 = $[11];
   }
   const zoom = t4;
   let t5;
-  if ($[14] !== ir || $[15] !== lines || $[16] !== paper || $[17] !== zoom) {
+  if ($[12] !== ir || $[13] !== lines || $[14] !== paper || $[15] !== zoom) {
     t5 = progress => /*#__PURE__*/_jsx(GraphHTML, {
       ir: ir,
       title: lines,
@@ -81,32 +76,32 @@ export function HtmlGraphDiagram(t0) {
       zoom: zoom,
       paper: paper
     });
-    $[14] = ir;
-    $[15] = lines;
-    $[16] = paper;
-    $[17] = zoom;
-    $[18] = t5;
+    $[12] = ir;
+    $[13] = lines;
+    $[14] = paper;
+    $[15] = zoom;
+    $[16] = t5;
   } else {
-    t5 = $[18];
+    t5 = $[16];
   }
   let t6;
-  if ($[19] !== chrome || $[20] !== lines || $[21] !== t5) {
+  if ($[17] !== chrome || $[18] !== lines || $[19] !== t5) {
     t6 = /*#__PURE__*/_jsx(DiagramFrame, {
       title: lines,
       ...chrome,
       children: t5
     });
-    $[19] = chrome;
-    $[20] = lines;
-    $[21] = t5;
-    $[22] = t6;
+    $[17] = chrome;
+    $[18] = lines;
+    $[19] = t5;
+    $[20] = t6;
   } else {
-    t6 = $[22];
+    t6 = $[20];
   }
   return t6;
 }
 function GraphHTML(t0) {
-  const $ = _c(58);
+  const $ = _c(63);
   const {
     ir,
     title,
@@ -134,7 +129,7 @@ function GraphHTML(t0) {
   let t8;
   let t9;
   if ($[0] !== ir || $[1] !== paper || $[2] !== progress || $[3] !== stylePreset || $[4] !== title || $[5] !== zoom) {
-    const layout = legacyGraphLayout(ir);
+    const layout = layoutGraph(ir);
     const {
       viewBox
     } = layout;
@@ -264,27 +259,52 @@ function GraphHTML(t0) {
         end: groupsSeg.end
       }, `group-${groupLayout.group.id}`)), indexedEdges.filter(_temp4).map(t19), nodes.map(t20)]
     });
-    t10 = boxNodes.map(t21 => {
-      const {
-        layout: nodeLayout_1,
-        segment: segment_2
-      } = t21;
-      return /*#__PURE__*/_jsx(NodeBox, {
-        layout: nodeLayout_1,
-        origin: viewBox,
-        progress: progress,
-        start: segment_2.start,
-        end: segment_2.end
-      }, `node-${nodeLayout_1.node.id}`);
+    const t21 = -viewBox.x;
+    const t22 = -viewBox.y;
+    let t23;
+    if ($[31] !== t21 || $[32] !== t22) {
+      t23 = {
+        left: t21,
+        top: t22
+      };
+      $[31] = t21;
+      $[32] = t22;
+      $[33] = t23;
+    } else {
+      t23 = $[33];
+    }
+    let t24;
+    if ($[34] !== progress) {
+      t24 = t25 => {
+        const {
+          layout: nodeLayout_1,
+          segment: segment_2
+        } = t25;
+        return /*#__PURE__*/_jsx(NodeBox, {
+          layout: nodeLayout_1,
+          progress: progress,
+          start: segment_2.start,
+          end: segment_2.end
+        }, `node-${nodeLayout_1.node.id}`);
+      };
+      $[34] = progress;
+      $[35] = t24;
+    } else {
+      t24 = $[35];
+    }
+    t10 = /*#__PURE__*/_jsx("div", {
+      className: "absolute",
+      style: t23,
+      children: boxNodes.map(t24)
     });
     t1 = svgLayer;
-    let t22;
-    if ($[31] !== progress) {
-      t22 = t23 => {
+    let t25;
+    if ($[36] !== progress) {
+      t25 = t26 => {
         const {
           layout: nodeLayout_2,
           segment: segment_3
-        } = t23;
+        } = t26;
         return /*#__PURE__*/_jsxs(NodeReveal, {
           progress: progress,
           start: segment_3.start,
@@ -296,21 +316,21 @@ function GraphHTML(t0) {
           })]
         }, `node-marks-${nodeLayout_2.node.id}`);
       };
-      $[31] = progress;
-      $[32] = t22;
+      $[36] = progress;
+      $[37] = t25;
     } else {
-      t22 = $[32];
+      t25 = $[37];
     }
-    t2 = boxNodes.map(t22);
-    let t23;
-    if ($[33] !== progress) {
-      t23 = t24 => {
+    t2 = boxNodes.map(t25);
+    let t26;
+    if ($[38] !== progress) {
+      t26 = t27 => {
         const {
           d: d_1,
           edge: edge_0,
           index: index_2,
           segment: segment_4
-        } = t24;
+        } = t27;
         return /*#__PURE__*/_jsx(EdgeStroke, {
           d: d_1,
           edge: edge_0,
@@ -319,32 +339,31 @@ function GraphHTML(t0) {
           end: segment_4.end
         }, `edge-foreground-${index_2}`);
       };
-      $[33] = progress;
-      $[34] = t23;
+      $[38] = progress;
+      $[39] = t26;
     } else {
-      t23 = $[34];
+      t26 = $[39];
     }
-    t3 = indexedEdges.filter(_temp5).map(t23);
-    let t24;
-    if ($[35] !== progress) {
-      t24 = edgeLayout_0 => /*#__PURE__*/_jsx(EdgeOverlay, {
+    t3 = indexedEdges.filter(_temp5).map(t26);
+    let t27;
+    if ($[40] !== progress) {
+      t27 = edgeLayout_0 => /*#__PURE__*/_jsx(EdgeOverlay, {
         layout: edgeLayout_0,
         progress: progress,
         start: edgeLayout_0.segment.start,
         end: edgeLayout_0.segment.end
       }, `edge-overlay-${edgeLayout_0.index}`);
-      $[35] = progress;
-      $[36] = t24;
+      $[40] = progress;
+      $[41] = t27;
     } else {
-      t24 = $[36];
+      t27 = $[41];
     }
-    t4 = indexedEdges.map(t24);
-    t5 = notes.map(note => /*#__PURE__*/_jsx(AnnotationText, {
+    t4 = indexedEdges.map(t27);
+    t5 = notes.map(note => /*#__PURE__*/_jsx(NoteText, {
       note: note,
-      annotations: ir.annotations,
       leaders: layout.leaders,
       progress: progress,
-      start: ANNOTATION_REVEAL_START,
+      start: NOTE_REVEAL_START,
       end: 1
     }, note.node.id));
     $[0] = ir;
@@ -388,40 +407,40 @@ function GraphHTML(t0) {
     t9 = $[21];
   }
   let t17;
-  if ($[37] !== t1 || $[38] !== t2 || $[39] !== t3 || $[40] !== t4 || $[41] !== t5) {
+  if ($[42] !== t1 || $[43] !== t2 || $[44] !== t3 || $[45] !== t4 || $[46] !== t5) {
     t17 = /*#__PURE__*/_jsxs("svg", {
       ...t1,
       children: [t2, t3, t4, t5]
     });
-    $[37] = t1;
-    $[38] = t2;
-    $[39] = t3;
-    $[40] = t4;
-    $[41] = t5;
-    $[42] = t17;
+    $[42] = t1;
+    $[43] = t2;
+    $[44] = t3;
+    $[45] = t4;
+    $[46] = t5;
+    $[47] = t17;
   } else {
-    t17 = $[42];
+    t17 = $[47];
   }
   let t18;
-  if ($[43] !== t10 || $[44] !== t17 || $[45] !== t6 || $[46] !== t7 || $[47] !== t8 || $[48] !== t9) {
+  if ($[48] !== t10 || $[49] !== t17 || $[50] !== t6 || $[51] !== t7 || $[52] !== t8 || $[53] !== t9) {
     t18 = /*#__PURE__*/_jsxs("div", {
       className: t6,
       style: t7,
       "data-diagram-html": t8,
       children: [t9, t10, t17]
     });
-    $[43] = t10;
-    $[44] = t17;
-    $[45] = t6;
-    $[46] = t7;
-    $[47] = t8;
-    $[48] = t9;
-    $[49] = t18;
+    $[48] = t10;
+    $[49] = t17;
+    $[50] = t6;
+    $[51] = t7;
+    $[52] = t8;
+    $[53] = t9;
+    $[54] = t18;
   } else {
-    t18 = $[49];
+    t18 = $[54];
   }
   let t19;
-  if ($[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t18) {
+  if ($[55] !== t11 || $[56] !== t12 || $[57] !== t13 || $[58] !== t14 || $[59] !== t15 || $[60] !== t16 || $[61] !== t18) {
     t19 = /*#__PURE__*/_jsx("div", {
       role: t11,
       "aria-label": t12,
@@ -431,16 +450,16 @@ function GraphHTML(t0) {
       "data-diagram-viewport-zoom": t16,
       children: t18
     });
-    $[50] = t11;
-    $[51] = t12;
-    $[52] = t13;
-    $[53] = t14;
-    $[54] = t15;
-    $[55] = t16;
-    $[56] = t18;
-    $[57] = t19;
+    $[55] = t11;
+    $[56] = t12;
+    $[57] = t13;
+    $[58] = t14;
+    $[59] = t15;
+    $[60] = t16;
+    $[61] = t18;
+    $[62] = t19;
   } else {
-    t19 = $[57];
+    t19 = $[62];
   }
   return t19;
 }
@@ -655,15 +674,14 @@ function textureImage(texture) {
 }
 
 /**
- * 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.
+ * A node frame and its text, each at the layout's own coordinates, in the
+ * layer that GraphHTML moves to the viewBox origin. The runs are siblings of
+ * the frame, so no position is relative to the frame.
  */
 function NodeBox(t0) {
-  const $ = _c(83);
+  const $ = _c(78);
   const {
     layout,
-    origin,
     progress,
     start,
     end
@@ -721,7 +739,7 @@ function NodeBox(t0) {
     node,
     box,
     icon,
-    text
+    contentBox
   } = layout;
   const frame = node.frame ?? "solid";
   let t7;
@@ -736,39 +754,37 @@ function NodeBox(t0) {
   }
   const fill = t7;
   let T0;
-  let lastRun;
   let t10;
   let t11;
   let t12;
   let t13;
   let t14;
-  let t15;
   let t8;
   let t9;
-  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) {
+  if ($[14] !== box.h || $[15] !== box.w || $[16] !== box.x || $[17] !== box.y || $[18] !== fill || $[19] !== frame || $[20] !== icon || $[21] !== layout || $[22] !== node || $[23] !== opacity || $[24] !== themeAccent || $[25] !== translateY) {
     const {
       title,
       description,
       items
     } = nodeTextParts(layout);
-    let t16;
-    if ($[36] !== text) {
-      t16 = text.at(-1);
-      $[36] = text;
-      $[37] = t16;
+    T0 = motion.div;
+    t8 = "absolute top-0 left-0";
+    if ($[34] !== fill || $[35] !== opacity || $[36] !== translateY) {
+      t9 = {
+        color: fill,
+        opacity,
+        y: translateY
+      };
+      $[34] = fill;
+      $[35] = opacity;
+      $[36] = translateY;
+      $[37] = t9;
     } else {
-      t16 = $[37];
+      t9 = $[37];
     }
-    lastRun = t16;
-    T0 = motion.div;
-    t8 = node.id;
-    t9 = node.tone;
-    t10 = "absolute";
-    const t17 = box.x - origin.x;
-    const t18 = box.y - origin.y;
-    let t19;
+    let t15;
     if ($[38] !== frame || $[39] !== node || $[40] !== themeAccent) {
-      t19 = frame === "none" ? {} : {
+      t15 = frame === "none" ? {} : {
         backgroundColor: nodeFrameFill(node, frame),
         boxShadow: `inset 0 0 0 ${nodeFrameStrokeWidth(node)}px ${nodeFrameStroke(node, frame, themeAccent)}`,
         ...textureImage(nodeTexture(node, frame))
@@ -776,44 +792,53 @@ function NodeBox(t0) {
       $[38] = frame;
       $[39] = node;
       $[40] = themeAccent;
-      $[41] = t19;
+      $[41] = t15;
     } else {
-      t19 = $[41];
+      t15 = $[41];
     }
-    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,
+    let t16;
+    if ($[42] !== box.h || $[43] !== box.w || $[44] !== box.x || $[45] !== box.y || $[46] !== layout.radius || $[47] !== t15) {
+      t16 = {
+        left: box.x,
+        top: box.y,
         width: box.w,
         height: box.h,
         boxSizing: "border-box",
         borderRadius: layout.radius,
-        ...t19,
-        color: fill,
-        opacity,
-        y: translateY
+        ...t15
       };
       $[42] = box.h;
       $[43] = box.w;
-      $[44] = fill;
-      $[45] = layout.radius;
-      $[46] = opacity;
-      $[47] = t17;
-      $[48] = t18;
-      $[49] = t19;
-      $[50] = translateY;
-      $[51] = t11;
+      $[44] = box.x;
+      $[45] = box.y;
+      $[46] = layout.radius;
+      $[47] = t15;
+      $[48] = t16;
+    } else {
+      t16 = $[48];
+    }
+    if ($[49] !== node.id || $[50] !== node.tone || $[51] !== t16) {
+      t10 = /*#__PURE__*/_jsx("div", {
+        "data-diagram-node": node.id,
+        "data-diagram-node-tone": node.tone,
+        className: "absolute",
+        style: t16
+      });
+      $[49] = node.id;
+      $[50] = node.tone;
+      $[51] = t16;
+      $[52] = t10;
     } else {
-      t11 = $[51];
+      t10 = $[52];
     }
-    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", {
+    if ($[53] !== fill || $[54] !== icon || $[55] !== node.icon || $[56] !== node.textColor || $[57] !== themeAccent) {
+      t11 = 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
+          left: icon.x,
+          top: icon.y
         },
         "aria-hidden": true,
         children: /*#__PURE__*/_jsx(DiagramNodeIcon, {
@@ -824,197 +849,181 @@ function NodeBox(t0) {
           color: node.textColor === "accent" ? themeAccent : fill
         })
       });
-      $[52] = box.x;
-      $[53] = box.y;
-      $[54] = fill;
-      $[55] = icon;
-      $[56] = node.icon;
-      $[57] = node.textColor;
-      $[58] = themeAccent;
-      $[59] = t12;
+      $[53] = fill;
+      $[54] = icon;
+      $[55] = node.icon;
+      $[56] = node.textColor;
+      $[57] = themeAccent;
+      $[58] = t11;
     } else {
-      t12 = $[59];
+      t11 = $[58];
     }
-    let t20;
-    if ($[60] !== box || $[61] !== fill || $[62] !== themeAccent) {
-      t20 = (run, i) => /*#__PURE__*/_jsx(RunText, {
+    let t17;
+    if ($[59] !== fill || $[60] !== themeAccent) {
+      t17 = (run, i) => /*#__PURE__*/_jsx(RunText, {
         run: run,
-        origin: box,
         color: runFill(run, fill, themeAccent)
       }, i);
-      $[60] = box;
-      $[61] = fill;
-      $[62] = themeAccent;
-      $[63] = t20;
+      $[59] = fill;
+      $[60] = themeAccent;
+      $[61] = t17;
     } else {
-      t20 = $[63];
+      t17 = $[61];
     }
-    t13 = title.map(t20);
-    t14 = description.length > 0 && /*#__PURE__*/_jsx("div", {
+    t12 = title.map(t17);
+    t13 = description.length > 0 && /*#__PURE__*/_jsx("div", {
       "data-diagram-node-description": node.id,
-      children: description.map((run_0, i_0) => /*#__PURE__*/_jsx(RunText, {
-        run: run_0,
-        origin: box
-      }, i_0))
+      children: description.map(_temp6)
     });
-    let t21;
-    if ($[64] !== box || $[65] !== node.id) {
-      t21 = (t22, i_1) => {
+    let t18;
+    if ($[62] !== node.id) {
+      t18 = (t19, i_1) => {
         const {
           run: run_1,
           bullet
-        } = t22;
+        } = t19;
         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,
+              left: bullet.x,
+              top: bullet.y,
               width: 4.4,
-              height: 4.4
+              height: 4.4,
+              translate: "-50% -50%"
             }
           }), /*#__PURE__*/_jsx(RunText, {
-            run: run_1,
-            origin: box
+            run: run_1
           })]
         }, i_1);
       };
-      $[64] = box;
-      $[65] = node.id;
-      $[66] = t21;
+      $[62] = node.id;
+      $[63] = t18;
     } else {
-      t21 = $[66];
+      t18 = $[63];
     }
-    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;
+    t14 = items.map(t18);
+    $[14] = box.h;
+    $[15] = box.w;
+    $[16] = box.x;
+    $[17] = box.y;
+    $[18] = fill;
+    $[19] = frame;
+    $[20] = icon;
+    $[21] = layout;
+    $[22] = node;
+    $[23] = opacity;
     $[24] = themeAccent;
     $[25] = translateY;
     $[26] = T0;
-    $[27] = lastRun;
-    $[28] = t10;
-    $[29] = t11;
-    $[30] = t12;
-    $[31] = t13;
-    $[32] = t14;
-    $[33] = t15;
-    $[34] = t8;
-    $[35] = t9;
+    $[27] = t10;
+    $[28] = t11;
+    $[29] = t12;
+    $[30] = t13;
+    $[31] = t14;
+    $[32] = t8;
+    $[33] = t9;
   } else {
     T0 = $[26];
-    lastRun = $[27];
-    t10 = $[28];
-    t11 = $[29];
-    t12 = $[30];
-    t13 = $[31];
-    t14 = $[32];
-    t15 = $[33];
-    t8 = $[34];
-    t9 = $[35];
+    t10 = $[27];
+    t11 = $[28];
+    t12 = $[29];
+    t13 = $[30];
+    t14 = $[31];
+    t8 = $[32];
+    t9 = $[33];
   }
-  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",
+  let t15;
+  if ($[64] !== contentBox || $[65] !== node.content || $[66] !== node.id) {
+    t15 = node.content && contentBox && /*#__PURE__*/_jsx("div", {
+      "data-diagram-node-content": node.id,
+      className: "absolute",
       style: {
-        top: lastRun ? lastRun.bounds.y + lastRun.bounds.h - box.y : 0
+        left: contentBox.x,
+        top: contentBox.y,
+        width: contentBox.w,
+        height: contentBox.h
       },
-      children: /*#__PURE__*/_jsx("div", {
-        "data-diagram-node-content": node.id,
-        children: node.content
-      })
+      children: node.content.element
     });
-    $[67] = box.y;
-    $[68] = lastRun;
-    $[69] = node.content;
-    $[70] = node.id;
-    $[71] = t16;
+    $[64] = contentBox;
+    $[65] = node.content;
+    $[66] = node.id;
+    $[67] = t15;
   } else {
-    t16 = $[71];
+    t15 = $[67];
   }
-  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]
+  let t16;
+  if ($[68] !== T0 || $[69] !== t10 || $[70] !== t11 || $[71] !== t12 || $[72] !== t13 || $[73] !== t14 || $[74] !== t15 || $[75] !== t8 || $[76] !== t9) {
+    t16 = /*#__PURE__*/_jsxs(T0, {
+      className: t8,
+      style: t9,
+      children: [t10, t11, t12, t13, t14, t15]
     });
-    $[72] = T0;
-    $[73] = t10;
-    $[74] = t11;
-    $[75] = t12;
-    $[76] = t13;
-    $[77] = t14;
-    $[78] = t15;
-    $[79] = t16;
-    $[80] = t8;
-    $[81] = t9;
-    $[82] = t17;
+    $[68] = T0;
+    $[69] = t10;
+    $[70] = t11;
+    $[71] = t12;
+    $[72] = t13;
+    $[73] = t14;
+    $[74] = t15;
+    $[75] = t8;
+    $[76] = t9;
+    $[77] = t16;
   } else {
-    t17 = $[82];
+    t16 = $[77];
   }
-  return t17;
+  return t16;
+}
+function _temp6(run_0, i_0) {
+  return /*#__PURE__*/_jsx(RunText, {
+    run: run_0
+  }, i_0);
 }
 function RunText(t0) {
-  const $ = _c(12);
+  const $ = _c(11);
   const {
     run,
-    origin,
     color
   } = t0;
-  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,
+  const t1 = FONT_FAMILY[run.font.face];
+  const t2 = `${run.bounds.h}px`;
+  let t3;
+  if ($[0] !== color || $[1] !== run.bounds.x || $[2] !== run.bounds.y || $[3] !== run.font.size || $[4] !== run.font.weight || $[5] !== t1 || $[6] !== t2) {
+    t3 = {
+      left: run.bounds.x,
+      top: run.bounds.y,
+      fontFamily: t1,
       fontSize: run.font.size,
       fontWeight: run.font.weight,
-      lineHeight: t4,
-      letterSpacing: t5,
+      lineHeight: t2,
       color
     };
     $[0] = color;
-    $[1] = run.font.size;
-    $[2] = run.font.weight;
-    $[3] = t1;
-    $[4] = t2;
-    $[5] = t3;
-    $[6] = t4;
-    $[7] = t5;
-    $[8] = t6;
+    $[1] = run.bounds.x;
+    $[2] = run.bounds.y;
+    $[3] = run.font.size;
+    $[4] = run.font.weight;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
   } else {
-    t6 = $[8];
+    t3 = $[7];
   }
-  let t7;
-  if ($[9] !== run.text || $[10] !== t6) {
-    t7 = /*#__PURE__*/_jsx("span", {
+  let t4;
+  if ($[8] !== run.text || $[9] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
       className: "absolute whitespace-pre",
-      style: t6,
+      style: t3,
       children: run.text
     });
-    $[9] = run.text;
-    $[10] = t6;
-    $[11] = t7;
+    $[8] = run.text;
+    $[9] = t3;
+    $[10] = t4;
   } else {
-    t7 = $[11];
+    t4 = $[10];
   }
-  return t7;
+  return t4;
 }
 //# sourceMappingURL=graph-html.js.map