@zukhruf/diagram 0.3.30 → 0.3.31

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

@@ -1,22 +1,23 @@
 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, resolveGraphAnnotations, resolveGraphLayout } from "../../layouts/graph/graph-layout.js";
-import { centeredBaselineOffset } from "../../layouts/text-metrics.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 { DiagramFrame, useDiagramTheme } from "../../react/chrome/index.js";
 import { DiagramDefs } from "../shared/defs.js";
-import { DiagramNodeIcon, EdgeOverlay, EdgeStroke, GroupRect, buildSegments, labelLineFill, nodeFrameFill, nodeFrameStroke, nodeTextFill, nodeTexture, textureFill } from "../shared/graph-parts.js";
+import { DiagramNodeIcon, EdgeOverlay, EdgeStroke, GroupRect, buildSegments, nodeFrameFill, nodeFrameStroke, nodeFrameStrokeWidth, nodeTextFill, nodeTexture, textureFill } from "../shared/graph-parts.js";
 import { rejectNodeContent } from "../shared/node-content.js";
-import { ANNOTATION_REVEAL_START, AnnotationText, NodeCaption, NodePorts, NodeStackFrames, SpecialNode, isSpecialNode } from "../shared/node-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 { RunSpans } from "../shared/run-spans.js";
+import { nodeTextParts } from "../shared/text-runs.js";
 import { GraphFlowEffects } from "../webgpu/graph-flow-effects.js";
 import { svgViewportProps } from "./viewport.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function NodeRect(t0) {
-  const $ = _c(80);
+  const $ = _c(61);
   const {
-    node,
-    box,
+    layout,
     progress,
     start,
     end
@@ -71,455 +72,326 @@ function NodeRect(t0) {
     t6 = $[9];
   }
   const translateY = useTransform(progress, t4, t5, t6);
+  const {
+    node,
+    box,
+    radius
+  } = layout;
   const frame = node.frame ?? "solid";
   let t7;
   if ($[10] !== node) {
-    t7 = nodeFrameRadius(node);
+    t7 = nodeFrameStrokeWidth(node);
     $[10] = node;
     $[11] = t7;
   } else {
     t7 = $[11];
   }
-  const rx = t7;
+  const strokeWidth = t7;
   let t8;
-  if ($[12] !== node) {
-    t8 = nodeFrameStrokeWidth(node);
-    $[12] = node;
-    $[13] = t8;
+  if ($[12] !== frame || $[13] !== node || $[14] !== themeAccent) {
+    t8 = nodeFrameStroke(node, frame, themeAccent);
+    $[12] = frame;
+    $[13] = node;
+    $[14] = themeAccent;
+    $[15] = t8;
   } else {
-    t8 = $[13];
+    t8 = $[15];
   }
-  const strokeWidth = t8;
+  const stroke = t8;
   let t9;
-  if ($[14] !== frame || $[15] !== node || $[16] !== themeAccent) {
-    t9 = nodeFrameStroke(node, frame, themeAccent);
-    $[14] = frame;
-    $[15] = node;
-    $[16] = themeAccent;
-    $[17] = t9;
+  if ($[16] !== frame || $[17] !== node) {
+    t9 = nodeFrameFill(node, frame);
+    $[16] = frame;
+    $[17] = node;
+    $[18] = t9;
   } else {
-    t9 = $[17];
+    t9 = $[18];
   }
-  const stroke = t9;
+  const boxFill = t9;
   let t10;
-  if ($[18] !== frame || $[19] !== node) {
-    t10 = nodeFrameFill(node, frame);
-    $[18] = frame;
-    $[19] = node;
-    $[20] = t10;
+  let texture;
+  if ($[19] !== frame || $[20] !== ids || $[21] !== node) {
+    texture = nodeTexture(node, frame);
+    t10 = textureFill(texture, ids);
+    $[19] = frame;
+    $[20] = ids;
+    $[21] = node;
+    $[22] = t10;
+    $[23] = texture;
   } else {
-    t10 = $[20];
+    t10 = $[22];
+    texture = $[23];
   }
-  const boxFill = t10;
+  const texturePattern = t10;
   let t11;
-  let texture;
-  if ($[21] !== frame || $[22] !== ids || $[23] !== node) {
-    texture = nodeTexture(node, frame);
-    t11 = textureFill(texture, ids);
-    $[21] = frame;
-    $[22] = ids;
-    $[23] = node;
-    $[24] = t11;
-    $[25] = texture;
+  if ($[24] !== frame || $[25] !== node || $[26] !== themeAccent) {
+    t11 = nodeTextFill(node, frame, themeAccent);
+    $[24] = frame;
+    $[25] = node;
+    $[26] = themeAccent;
+    $[27] = t11;
   } else {
-    t11 = $[24];
-    texture = $[25];
+    t11 = $[27];
   }
-  const texturePattern = t11;
-  let T0;
-  let t12;
-  let t13;
-  let t14;
-  let t15;
-  if ($[26] !== box || $[27] !== boxFill || $[28] !== end || $[29] !== frame || $[30] !== node || $[31] !== opacity || $[32] !== progress || $[33] !== rx || $[34] !== start || $[35] !== stroke || $[36] !== strokeWidth || $[37] !== texture || $[38] !== texturePattern || $[39] !== themeAccent || $[40] !== translateY) {
-    t15 = Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const fill = nodeTextFill(node, frame, themeAccent);
-      const lines = Array.isArray(node.label) ? node.label : [node.label];
-      let t16;
-      if ($[46] !== node.description) {
-        t16 = node.description === undefined ? [] : Array.isArray(node.description) ? node.description : [node.description];
-        $[46] = node.description;
-        $[47] = t16;
-      } else {
-        t16 = $[47];
-      }
-      const descriptionLines = t16;
-      let t17;
-      if ($[48] !== node.items) {
-        t17 = node.items ?? [];
-        $[48] = node.items;
-        $[49] = t17;
-      } else {
-        t17 = $[49];
-      }
-      const itemLines = t17;
-      const fontSize = node.fontSize ?? 12;
-      const lineHeight = Math.max(12, fontSize + 2);
-      const centerY = box.y + box.h / 2;
-      const firstLineY = centerY - (lines.length - 1) * lineHeight / 2 + centeredBaselineOffset(fontSize, "mono");
-      const cx = box.x + box.w / 2;
-      const textAlign = node.textAlign ?? "center";
-      const hasBodyLayout = textAlign === "start" || Boolean(node.icon) || descriptionLines.length > 0;
-      if (node.hidden) {
-        t15 = null;
-        break bb0;
-      }
-      if (isSpecialNode(node)) {
-        let t18;
-        if ($[50] !== box || $[51] !== end || $[52] !== node || $[53] !== progress || $[54] !== start) {
-          t18 = /*#__PURE__*/_jsx(SpecialNode, {
-            node: node,
-            box: box,
-            progress: progress,
-            start: start,
-            end: end
-          });
-          $[50] = box;
-          $[51] = end;
-          $[52] = node;
-          $[53] = progress;
-          $[54] = start;
-          $[55] = t18;
-        } else {
-          t18 = $[55];
-        }
-        t15 = t18;
-        break bb0;
-      }
-      T0 = motion.g;
-      if ($[56] !== opacity || $[57] !== translateY) {
-        t12 = {
-          opacity,
-          y: translateY
-        };
-        $[56] = opacity;
-        $[57] = translateY;
-        $[58] = t12;
-      } else {
-        t12 = $[58];
-      }
-      if ($[59] !== box || $[60] !== boxFill || $[61] !== frame || $[62] !== node || $[63] !== rx || $[64] !== stroke || $[65] !== strokeWidth || $[66] !== texture || $[67] !== texturePattern) {
-        t13 = frame !== "none" && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(NodeStackFrames, {
-            node: node,
-            box: box,
-            rx: rx,
-            fill: boxFill,
-            stroke: stroke,
-            strokeWidth: strokeWidth
-          }), /*#__PURE__*/_jsx("rect", {
-            "data-diagram-node": node.id,
-            "data-diagram-node-tone": node.tone,
-            x: box.x,
-            y: box.y,
-            width: box.w,
-            height: box.h,
-            rx: rx,
-            fill: boxFill,
-            stroke: stroke,
-            strokeWidth: strokeWidth
-          }), texturePattern && /*#__PURE__*/_jsx("rect", {
-            "data-diagram-node-texture": `${node.id}:${texture}`,
-            x: box.x,
-            y: box.y,
-            width: box.w,
-            height: box.h,
-            rx: rx,
-            fill: texturePattern,
-            pointerEvents: "none"
-          })]
-        });
-        $[59] = box;
-        $[60] = boxFill;
-        $[61] = frame;
-        $[62] = node;
-        $[63] = rx;
-        $[64] = stroke;
-        $[65] = strokeWidth;
-        $[66] = texture;
-        $[67] = texturePattern;
-        $[68] = t13;
-      } else {
-        t13 = $[68];
-      }
-      t14 = hasBodyLayout ? /*#__PURE__*/_jsx(NodeBodyLayout, {
-        node: node,
-        box: box,
-        titleLines: lines,
-        descriptionLines: descriptionLines,
-        itemLines: itemLines,
-        fill: fill,
-        accent: themeAccent
-      }) : /*#__PURE__*/_jsx("text", {
-        x: cx,
-        y: firstLineY,
-        textAnchor: "middle",
-        fontFamily: "ui-monospace, 'Geist Mono', monospace",
-        fontSize: fontSize,
-        fontWeight: node.fontWeight ?? 500,
-        fill: fill,
-        letterSpacing: 0.6,
-        children: lines.map((line, i) => {
-          const lineText = typeof line === "string" ? line : line.text;
-          const lineFill = labelLineFill(line, fill, themeAccent);
-          return /*#__PURE__*/_jsx("tspan", {
-            x: cx,
-            dy: i === 0 ? 0 : lineHeight,
-            fill: lineFill,
-            fontWeight: typeof line === "string" ? node.fontWeight ?? 500 : line.fontWeight ?? node.fontWeight ?? 500,
-            children: lineText
-          }, i);
-        })
+  const fill = t11;
+  if (node.hidden) {
+    return null;
+  }
+  if (isSpecialNode(node)) {
+    let t12;
+    if ($[28] !== end || $[29] !== layout || $[30] !== progress || $[31] !== start) {
+      t12 = /*#__PURE__*/_jsx(SpecialNode, {
+        layout: layout,
+        progress: progress,
+        start: start,
+        end: end
       });
+      $[28] = end;
+      $[29] = layout;
+      $[30] = progress;
+      $[31] = start;
+      $[32] = t12;
+    } else {
+      t12 = $[32];
     }
-    $[26] = box;
-    $[27] = boxFill;
-    $[28] = end;
-    $[29] = frame;
-    $[30] = node;
-    $[31] = opacity;
-    $[32] = progress;
-    $[33] = rx;
-    $[34] = start;
-    $[35] = stroke;
-    $[36] = strokeWidth;
-    $[37] = texture;
-    $[38] = texturePattern;
-    $[39] = themeAccent;
-    $[40] = translateY;
-    $[41] = T0;
-    $[42] = t12;
-    $[43] = t13;
-    $[44] = t14;
-    $[45] = t15;
+    return t12;
+  }
+  let t12;
+  if ($[33] !== opacity || $[34] !== translateY) {
+    t12 = {
+      opacity,
+      y: translateY
+    };
+    $[33] = opacity;
+    $[34] = translateY;
+    $[35] = t12;
   } else {
-    T0 = $[41];
-    t12 = $[42];
-    t13 = $[43];
-    t14 = $[44];
-    t15 = $[45];
+    t12 = $[35];
   }
-  if (t15 !== Symbol.for("react.early_return_sentinel")) {
-    return t15;
+  let t13;
+  if ($[36] !== box || $[37] !== boxFill || $[38] !== frame || $[39] !== layout || $[40] !== node.id || $[41] !== node.tone || $[42] !== radius || $[43] !== stroke || $[44] !== strokeWidth || $[45] !== texture || $[46] !== texturePattern) {
+    t13 = frame !== "none" && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(NodeStackFrames, {
+        layout: layout,
+        fill: boxFill,
+        stroke: stroke,
+        strokeWidth: strokeWidth
+      }), /*#__PURE__*/_jsx("rect", {
+        "data-diagram-node": node.id,
+        "data-diagram-node-tone": node.tone,
+        x: box.x,
+        y: box.y,
+        width: box.w,
+        height: box.h,
+        rx: radius,
+        fill: boxFill,
+        stroke: stroke,
+        strokeWidth: strokeWidth
+      }), texturePattern && /*#__PURE__*/_jsx("rect", {
+        "data-diagram-node-texture": `${node.id}:${texture}`,
+        x: box.x,
+        y: box.y,
+        width: box.w,
+        height: box.h,
+        rx: radius,
+        fill: texturePattern,
+        pointerEvents: "none"
+      })]
+    });
+    $[36] = box;
+    $[37] = boxFill;
+    $[38] = frame;
+    $[39] = layout;
+    $[40] = node.id;
+    $[41] = node.tone;
+    $[42] = radius;
+    $[43] = stroke;
+    $[44] = strokeWidth;
+    $[45] = texture;
+    $[46] = texturePattern;
+    $[47] = t13;
+  } else {
+    t13 = $[47];
+  }
+  let t14;
+  if ($[48] !== fill || $[49] !== layout || $[50] !== themeAccent) {
+    t14 = /*#__PURE__*/_jsx(NodeBody, {
+      layout: layout,
+      fill: fill,
+      accent: themeAccent
+    });
+    $[48] = fill;
+    $[49] = layout;
+    $[50] = themeAccent;
+    $[51] = t14;
+  } else {
+    t14 = $[51];
   }
+  let t15;
   let t16;
-  let t17;
-  if ($[69] !== box || $[70] !== node) {
-    t16 = /*#__PURE__*/_jsx(NodePorts, {
-      node: node,
-      box: box
+  if ($[52] !== layout) {
+    t15 = /*#__PURE__*/_jsx(NodePorts, {
+      layout: layout
     });
-    t17 = /*#__PURE__*/_jsx(NodeCaption, {
-      node: node,
-      box: box
+    t16 = /*#__PURE__*/_jsx(NodeCaption, {
+      layout: layout
     });
-    $[69] = box;
-    $[70] = node;
-    $[71] = t16;
-    $[72] = t17;
+    $[52] = layout;
+    $[53] = t15;
+    $[54] = t16;
   } else {
-    t16 = $[71];
-    t17 = $[72];
+    t15 = $[53];
+    t16 = $[54];
   }
-  let t18;
-  if ($[73] !== T0 || $[74] !== t12 || $[75] !== t13 || $[76] !== t14 || $[77] !== t16 || $[78] !== t17) {
-    t18 = /*#__PURE__*/_jsxs(T0, {
+  let t17;
+  if ($[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t15 || $[59] !== t16) {
+    t17 = /*#__PURE__*/_jsxs(motion.g, {
       style: t12,
-      children: [t13, t14, t16, t17]
+      children: [t13, t14, t15, t16]
     });
-    $[73] = T0;
-    $[74] = t12;
-    $[75] = t13;
-    $[76] = t14;
-    $[77] = t16;
-    $[78] = t17;
-    $[79] = t18;
+    $[55] = t12;
+    $[56] = t13;
+    $[57] = t14;
+    $[58] = t15;
+    $[59] = t16;
+    $[60] = t17;
   } else {
-    t18 = $[79];
+    t17 = $[60];
   }
-  return t18;
+  return t17;
 }
-function NodeBodyLayout(t0) {
-  const $ = _c(45);
+function NodeBody(t0) {
+  const $ = _c(24);
   const {
-    node,
-    box,
-    titleLines,
-    descriptionLines,
-    itemLines,
+    layout,
     fill,
     accent
   } = t0;
+  const {
+    node,
+    icon
+  } = layout;
   let t1;
-  if ($[0] !== titleLines) {
-    t1 = titleLines.some(_temp);
-    $[0] = titleLines;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const hasText = t1;
-  const iconSize = node.iconSize ?? (node.icon === "ellipsis" ? 34 : 42);
-  const hasBody = descriptionLines.length > 0 || itemLines.length > 0;
-  const hasHeaderIcon = Boolean(node.icon && hasText && hasBody);
-  const iconX = hasText || hasBody ? box.x + 28 : box.x + box.w / 2 - iconSize / 2;
-  const iconY = hasText || hasBody ? box.y + 28 : box.y + box.h / 2 - iconSize / 2;
-  const titleX = node.icon ? iconX + iconSize + 22 : box.x + 28;
-  const bodyX = hasHeaderIcon ? box.x + 28 : titleX;
-  const titleSize = node.fontSize ?? 15;
-  const titleLineHeight = titleSize + 4;
-  const titleY = hasBody ? box.y + 44 : box.y + box.h / 2 - (titleLines.length - 1) * titleLineHeight / 2 + titleSize * 0.35;
-  const bodySize = node.bodyFontSize ?? Math.max(11, titleSize - 2);
-  const bodyY = titleY + titleLines.length * titleLineHeight + 8;
-  const bodyLineGap = node.bodyLineGap ?? 3;
-  const bodyLineHeight = bodySize + bodyLineGap;
-  const itemY = bodyY + (descriptionLines.length > 0 ? descriptionLines.length * bodyLineHeight + 6 : 0);
   let t2;
-  if ($[2] !== accent || $[3] !== fill || $[4] !== iconSize || $[5] !== iconX || $[6] !== iconY || $[7] !== node.icon || $[8] !== node.textColor) {
-    t2 = node.icon && /*#__PURE__*/_jsx(DiagramNodeIcon, {
-      icon: node.icon,
-      x: iconX,
-      y: iconY,
-      size: iconSize,
-      color: node.textColor === "accent" ? accent : fill
-    });
-    $[2] = accent;
-    $[3] = fill;
-    $[4] = iconSize;
-    $[5] = iconX;
-    $[6] = iconY;
-    $[7] = node.icon;
-    $[8] = node.textColor;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
-  }
   let t3;
-  if ($[10] !== accent || $[11] !== fill || $[12] !== hasText || $[13] !== node.fontWeight || $[14] !== titleLineHeight || $[15] !== titleLines || $[16] !== titleSize || $[17] !== titleX || $[18] !== titleY) {
-    t3 = hasText && /*#__PURE__*/_jsx("text", {
-      x: titleX,
-      y: titleY,
-      textAnchor: "start",
-      fontFamily: "ui-sans-serif, system-ui, sans-serif",
-      fontSize: titleSize,
-      fontWeight: node.fontWeight ?? 700,
+  let t4;
+  if ($[0] !== accent || $[1] !== fill || $[2] !== icon || $[3] !== layout || $[4] !== node.bodyFontSize || $[5] !== node.bodyLineGap || $[6] !== node.icon || $[7] !== node.id || $[8] !== node.textColor) {
+    const {
+      title,
+      description,
+      items
+    } = nodeTextParts(layout);
+    const [firstTitle] = title;
+    const [firstDescription] = description;
+    if ($[13] !== accent || $[14] !== fill || $[15] !== icon || $[16] !== node.icon || $[17] !== node.textColor) {
+      t1 = node.icon && icon && /*#__PURE__*/_jsx(DiagramNodeIcon, {
+        icon: node.icon,
+        x: icon.x,
+        y: icon.y,
+        size: icon.size,
+        color: node.textColor === "accent" ? accent : fill
+      });
+      $[13] = accent;
+      $[14] = fill;
+      $[15] = icon;
+      $[16] = node.icon;
+      $[17] = node.textColor;
+      $[18] = t1;
+    } else {
+      t1 = $[18];
+    }
+    t2 = firstTitle && /*#__PURE__*/_jsx("text", {
+      x: firstTitle.x,
+      y: firstTitle.y,
+      textAnchor: firstTitle.anchor,
+      fontFamily: FONT_FAMILY[firstTitle.font.face],
+      fontSize: firstTitle.font.size,
+      fontWeight: firstTitle.font.weight,
       fill: fill,
-      children: titleLines.map((line_0, i) => {
-        const lineText = typeof line_0 === "string" ? line_0 : line_0.text;
-        const lineFill = labelLineFill(line_0, fill, accent);
-        return /*#__PURE__*/_jsx("tspan", {
-          x: titleX,
-          dy: i === 0 ? 0 : titleLineHeight,
-          fill: lineFill,
-          fontWeight: typeof line_0 === "string" ? node.fontWeight ?? 700 : line_0.fontWeight ?? node.fontWeight ?? 700,
-          children: lineText
-        }, i);
+      letterSpacing: firstTitle.font.face === "mono" ? 0.6 : undefined,
+      children: /*#__PURE__*/_jsx(RunSpans, {
+        runs: title,
+        fill: fill,
+        accent: accent
       })
     });
-    $[10] = accent;
-    $[11] = fill;
-    $[12] = hasText;
-    $[13] = node.fontWeight;
-    $[14] = titleLineHeight;
-    $[15] = titleLines;
-    $[16] = titleSize;
-    $[17] = titleX;
-    $[18] = titleY;
-    $[19] = t3;
-  } else {
-    t3 = $[19];
-  }
-  let t4;
-  if ($[20] !== bodyLineHeight || $[21] !== bodySize || $[22] !== bodyX || $[23] !== bodyY || $[24] !== descriptionLines || $[25] !== fill || $[26] !== node.bodyFontSize || $[27] !== node.bodyLineGap || $[28] !== node.id) {
-    t4 = descriptionLines.length > 0 && /*#__PURE__*/_jsx("text", {
+    t3 = firstDescription && /*#__PURE__*/_jsx("text", {
       "data-diagram-node-description": node.id,
       "data-diagram-node-body-font-size": node.bodyFontSize,
       "data-diagram-node-body-line-gap": node.bodyLineGap,
-      x: bodyX,
-      y: bodyY,
+      x: firstDescription.x,
+      y: firstDescription.y,
       textAnchor: "start",
-      fontFamily: "ui-sans-serif, system-ui, sans-serif",
-      fontSize: bodySize,
-      fontWeight: 400,
+      fontFamily: FONT_FAMILY[firstDescription.font.face],
+      fontSize: firstDescription.font.size,
+      fontWeight: firstDescription.font.weight,
       fill: fill,
-      children: descriptionLines.map((line_1, i_0) => /*#__PURE__*/_jsx("tspan", {
-        x: bodyX,
-        dy: i_0 === 0 ? 0 : bodyLineHeight,
-        children: line_1
-      }, i_0))
+      children: /*#__PURE__*/_jsx(RunSpans, {
+        runs: description
+      })
     });
-    $[20] = bodyLineHeight;
-    $[21] = bodySize;
-    $[22] = bodyX;
-    $[23] = bodyY;
-    $[24] = descriptionLines;
-    $[25] = fill;
-    $[26] = node.bodyFontSize;
-    $[27] = node.bodyLineGap;
-    $[28] = node.id;
-    $[29] = t4;
-  } else {
-    t4 = $[29];
-  }
-  let t5;
-  if ($[30] !== bodyLineHeight || $[31] !== bodySize || $[32] !== bodyX || $[33] !== fill || $[34] !== itemLines || $[35] !== itemY || $[36] !== node.bodyFontSize || $[37] !== node.bodyLineGap || $[38] !== node.id) {
-    t5 = itemLines.length > 0 && /*#__PURE__*/_jsx("g", {
-      children: itemLines.map((line_2, i_1) => {
-        const y = itemY + i_1 * bodyLineHeight;
+    t4 = items.length > 0 && /*#__PURE__*/_jsx("g", {
+      children: items.map((t5, i) => {
+        const {
+          run,
+          bullet
+        } = t5;
         return /*#__PURE__*/_jsxs("g", {
-          "data-diagram-node-item": `${node.id}:${i_1}`,
+          "data-diagram-node-item": `${node.id}:${i}`,
           "data-diagram-node-body-font-size": node.bodyFontSize,
           "data-diagram-node-body-line-gap": node.bodyLineGap,
-          transform: `translate(0 ${y})`,
+          transform: `translate(0 ${run.y})`,
           children: [/*#__PURE__*/_jsx("circle", {
-            cx: bodyX + 3,
-            cy: -3,
+            cx: bullet.x,
+            cy: bullet.y - run.y,
             r: 2.2,
             fill: fill
           }), /*#__PURE__*/_jsx("text", {
-            x: bodyX + 12,
+            x: run.x,
             y: 0,
             textAnchor: "start",
-            fontFamily: "ui-sans-serif, system-ui, sans-serif",
-            fontSize: bodySize,
-            fontWeight: 400,
+            fontFamily: FONT_FAMILY[run.font.face],
+            fontSize: run.font.size,
+            fontWeight: run.font.weight,
             fill: fill,
-            children: line_2
+            children: run.text
           })]
-        }, i_1);
+        }, i);
       })
     });
-    $[30] = bodyLineHeight;
-    $[31] = bodySize;
-    $[32] = bodyX;
-    $[33] = fill;
-    $[34] = itemLines;
-    $[35] = itemY;
-    $[36] = node.bodyFontSize;
-    $[37] = node.bodyLineGap;
-    $[38] = node.id;
-    $[39] = t5;
+    $[0] = accent;
+    $[1] = fill;
+    $[2] = icon;
+    $[3] = layout;
+    $[4] = node.bodyFontSize;
+    $[5] = node.bodyLineGap;
+    $[6] = node.icon;
+    $[7] = node.id;
+    $[8] = node.textColor;
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
   } else {
-    t5 = $[39];
+    t1 = $[9];
+    t2 = $[10];
+    t3 = $[11];
+    t4 = $[12];
   }
-  let t6;
-  if ($[40] !== t2 || $[41] !== t3 || $[42] !== t4 || $[43] !== t5) {
-    t6 = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t2, t3, t4, t5]
+  let t5;
+  if ($[19] !== t1 || $[20] !== t2 || $[21] !== t3 || $[22] !== t4) {
+    t5 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t1, t2, t3, t4]
     });
-    $[40] = t2;
-    $[41] = t3;
-    $[42] = t4;
-    $[43] = t5;
-    $[44] = t6;
+    $[19] = t1;
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t4;
+    $[23] = t5;
   } else {
-    t6 = $[44];
+    t5 = $[23];
   }
-  return t6;
-}
-function _temp(line) {
-  return typeof line === "string" ? line.length > 0 : line.text.length > 0;
+  return t5;
 }
 export function SvgGraphDiagram(t0) {
   const $ = _c(24);
@@ -616,7 +488,7 @@ export function SvgGraphDiagram(t0) {
   return t4;
 }
 function GraphSVG(t0) {
-  const $ = _c(24);
+  const $ = _c(22);
   const {
     ir,
     title,
@@ -629,21 +501,13 @@ function GraphSVG(t0) {
   const {
     stylePreset
   } = useDiagramTheme();
-  validateGraph(ir);
   let t1;
   if ($[0] !== effects || $[1] !== ir || $[2] !== mode || $[3] !== paper || $[4] !== progress || $[5] !== stylePreset || $[6] !== title || $[7] !== viewport) {
-    const graph = resolveGraphLayout(ir);
-    const layout = graph.layout;
-    const nodeBoxes = new Map();
-    for (const n of graph.nodes) {
-      nodeBoxes.set(n.id, nodeBox(n, layout));
-    }
-    const groupBoxes = new Map();
-    for (const g of graph.groups ?? []) {
-      groupBoxes.set(g.id, groupBox(g, graph.nodes, layout, graph.groups));
-    }
-    const annotations = resolveGraphAnnotations(graph);
-    const segments = buildSegments(graph.nodes.length, graph.edges.length);
+    const layout = legacyGraphLayout(ir);
+    const {
+      viewBox
+    } = layout;
+    const segments = buildSegments(ir.nodes.length, ir.edges.length);
     const seg = (kind, t2) => {
       const index = t2 === undefined ? 0 : t2;
       const segment = segments.find(candidate => candidate.kind === kind && candidate.index === index);
@@ -653,14 +517,16 @@ function GraphSVG(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"
-    })).filter(_temp2);
-    const viewBox = graphContentViewBox(graph, routedEdges);
+      layer: edgeLayout.edge.layer ?? "foreground"
+    })).filter(_temp);
+    const {
+      graphNodes,
+      notes
+    } = splitNotes(layout.nodes);
     const viewportProps = svgViewportProps(viewBox, viewport);
     let t3;
     if ($[9] !== title) {
@@ -741,45 +607,24 @@ function GraphSVG(t0) {
     }
     let t9;
     if ($[20] !== progress) {
-      t9 = t10 => {
-        const {
-          edge: edge_1,
-          labelPlacement,
-          badgePlacement,
-          index: index_3,
-          segment: segment_2
-        } = t10;
-        return /*#__PURE__*/_jsx(EdgeOverlay, {
-          edge: edge_1,
-          labelPlacement: labelPlacement,
-          badgePlacement: badgePlacement,
-          progress: progress,
-          start: segment_2.start,
-          end: segment_2.end
-        }, `edge-overlay-${index_3}`);
-      };
+      t9 = 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}`);
       $[20] = progress;
       $[21] = t9;
     } else {
       t9 = $[21];
     }
-    let t10;
-    if ($[22] !== progress) {
-      t10 = (annotation, i_0) => /*#__PURE__*/_jsx(AnnotationText, {
-        annotation: annotation,
-        progress: progress,
-        start: ANNOTATION_REVEAL_START,
-        end: 1,
-        index: i_0
-      }, `annot-${i_0}`);
-      $[22] = progress;
-      $[23] = t10;
-    } else {
-      t10 = $[23];
-    }
     t1 = /*#__PURE__*/_jsxs("svg", {
       "data-diagram-style-preset": stylePreset,
       ...viewportProps,
+      style: {
+        ...viewportProps.style,
+        ...TEXT_SHAPING
+      },
       viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`,
       preserveAspectRatio: "xMidYMid meet",
       role: "img",
@@ -791,39 +636,33 @@ function GraphSVG(t0) {
         y: viewBox.y,
         width: viewBox.w,
         height: viewBox.h
-      }), (graph.groups ?? []).map(g_0 => {
-        const box = groupBoxes.get(g_0.id);
-        if (!box) {
-          return null;
-        }
-        return /*#__PURE__*/_jsx(GroupRect, {
-          group: g_0,
-          box: box,
-          dividers: groupDividerLines(g_0, graph.nodes, layout, graph.groups),
-          progress: progress,
-          start: groupsSeg.start,
-          end: groupsSeg.end
-        }, `group-${g_0.id}`);
-      }), indexedEdges.filter(_temp3).map(t7), graph.nodes.map((node, i) => {
-        const box_0 = nodeBoxes.get(node.id);
-        if (!box_0) {
-          return null;
-        }
+      }), layout.groups.map(groupLayout => /*#__PURE__*/_jsx(GroupRect, {
+        layout: groupLayout,
+        progress: progress,
+        start: groupsSeg.start,
+        end: groupsSeg.end
+      }, `group-${groupLayout.group.id}`)), indexedEdges.filter(_temp2).map(t7), graphNodes.map((nodeLayout, i) => {
         const segNode = seg("node", i);
         return /*#__PURE__*/_jsx(NodeRect, {
-          node: node,
-          box: box_0,
+          layout: nodeLayout,
           progress: progress,
           start: segNode.start,
           end: segNode.end
-        }, `node-${node.id}`);
-      }), indexedEdges.filter(_temp4).map(t8), effects && /*#__PURE__*/_jsx(GraphFlowEffects, {
+        }, `node-${nodeLayout.node.id}`);
+      }), indexedEdges.filter(_temp3).map(t8), effects && /*#__PURE__*/_jsx(GraphFlowEffects, {
         edges: indexedEdges,
         viewBox: viewBox,
         progress: progress,
         mode: mode,
         playhead: typeof effects === "object" ? effects.flow : undefined
-      }), indexedEdges.map(t9), annotations.map(t10)]
+      }), indexedEdges.map(t9), 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] = effects;
     $[1] = ir;
@@ -839,19 +678,19 @@ function GraphSVG(t0) {
   }
   return t1;
 }
-function _temp4(t0) {
+function _temp3(t0) {
   const {
     layer: layer_0
   } = t0;
   return layer_0 === "foreground";
 }
-function _temp3(t0) {
+function _temp2(t0) {
   const {
     layer
   } = t0;
   return layer === "background";
 }
-function _temp2(t0) {
+function _temp(t0) {
   const {
     d
   } = t0;