@zukhruf/diagram 0.3.30 → 0.3.31

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

@@ -1,7 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
 import { motion, useTransform } from 'motion/react';
-import { EDGE_BADGE_ICON, GROUP_LABEL_H, edgeBadgeSize, edgeLabelFontSize, edgeLabelFrameBox, edgeLabelLineHeight, groupLabelHeight, groupLabelLines, groupPortPlacements, groupTitleGutterHeight } from "../../layouts/graph/graph-layout.js";
+import { FONT_FAMILY } from "../../layouts/text/font.js";
 import { DIAGRAM_BG, DIAGRAM_DIM, DIAGRAM_NEUTRAL, DIAGRAM_ON_ACCENT, DIAGRAM_SURFACE_MUTED, DIAGRAM_TEXT, resolveDiagramToneFill, resolveDiagramToneStroke, useDiagramTheme } from "../../react/chrome/index.js";
+import { RunSpans } from "./run-spans.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function nodeFrameFill(node, frame) {
   if (frame === 'transparent') return 'transparent';
@@ -13,20 +14,22 @@ export function nodeFrameFill(node, frame) {
 export function nodeFrameStroke(node, frame, themeAccent) {
   if (frame === 'transparent' || frame === 'flat') return 'transparent';
   if (frame === 'filled') return DIAGRAM_TEXT;
-  if (node.accent) return themeAccent;
-  if (node.tone) return resolveDiagramToneStroke(node.tone);
-  return DIAGRAM_NEUTRAL;
+  return accentToneStroke(node, themeAccent, DIAGRAM_NEUTRAL);
+}
+
+/** The theme accent, else the tone's stroke, else the fallback. */
+export function accentToneStroke(subject, themeAccent, fallback) {
+  if (subject.accent) return themeAccent;
+  if (subject.tone) return resolveDiagramToneStroke(subject.tone);
+  return fallback;
 }
 export function nodeTextFill(node, frame, themeAccent) {
   if (node.textColor === 'accent') return themeAccent;
   if (node.textColor === 'dim') return DIAGRAM_DIM;
   return frame === 'filled' ? DIAGRAM_ON_ACCENT : DIAGRAM_TEXT;
 }
-export function labelLineFill(line, fill, themeAccent) {
-  if (typeof line === 'string') return fill;
-  if (line.textColor === 'accent') return themeAccent;
-  if (line.textColor === 'dim') return DIAGRAM_DIM;
-  return fill;
+export function nodeFrameStrokeWidth(node) {
+  return node.frame === 'flat' ? 0 : 1.5;
 }
 export function nodeTexture(node, frame) {
   return node.texture ?? (frame === 'solid' ? 'dots' : 'none');
@@ -41,6 +44,21 @@ function edgeDasharray(edge) {
   if (edge.lineStyle === 'dotted') return '1 6';
   return undefined;
 }
+function edgeStroke(edge, themeAccent) {
+  if (edge.accent) return themeAccent;
+  if (edge.dim) return DIAGRAM_DIM;
+  return DIAGRAM_NEUTRAL;
+}
+function edgeMarkerId(edge, ids) {
+  if (edge.accent) return ids.arrowAccent;
+  if (edge.dim) return ids.arrowDim;
+  return ids.arrowNeutral;
+}
+function edgeLabelFill(edge, themeAccent) {
+  if (edge.accent) return themeAccent;
+  if (edge.dim) return DIAGRAM_DIM;
+  return DIAGRAM_TEXT;
+}
 export function buildSegments(nodeCount, edgeCount) {
   const slotCount = 1 + nodeCount + edgeCount;
   const step = 1 / slotCount;
@@ -710,11 +728,9 @@ export function DiagramNodeIcon(t0) {
   return t25;
 }
 export function GroupRect(t0) {
-  const $ = _c(98);
+  const $ = _c(79);
   const {
-    group,
-    box,
-    dividers,
+    layout,
     progress,
     start,
     end
@@ -746,285 +762,269 @@ export function GroupRect(t0) {
     t3 = $[4];
   }
   const opacity = useTransform(progress, t1, t2, t3);
+  const {
+    group,
+    rect: box,
+    band,
+    label
+  } = layout;
   const rx = group.rx ?? 12;
   const frame = group.frame ?? "solid";
   const fill = group.fill ?? "surface";
   let t4;
-  if ($[5] !== group.accent || $[6] !== group.tone || $[7] !== themeAccent) {
-    t4 = group.accent ? themeAccent : group.tone ? resolveDiagramToneStroke(group.tone) : DIAGRAM_NEUTRAL;
-    $[5] = group.accent;
-    $[6] = group.tone;
-    $[7] = themeAccent;
-    $[8] = t4;
+  if ($[5] !== group || $[6] !== themeAccent) {
+    t4 = accentToneStroke(group, themeAccent, DIAGRAM_NEUTRAL);
+    $[5] = group;
+    $[6] = themeAccent;
+    $[7] = t4;
   } else {
-    t4 = $[8];
+    t4 = $[7];
   }
   const stroke = t4;
+  const dasharray = frame === "dashed" ? "6 6" : undefined;
   const hasFrame = frame !== "none";
   const hasFill = fill !== "none";
   let t5;
-  if ($[9] !== group.tone || $[10] !== hasFill) {
+  if ($[8] !== group.tone || $[9] !== hasFill) {
     t5 = hasFill && group.tone ? resolveDiagramToneFill(group.tone) : DIAGRAM_BG;
-    $[9] = group.tone;
-    $[10] = hasFill;
-    $[11] = t5;
+    $[8] = group.tone;
+    $[9] = hasFill;
+    $[10] = t5;
   } else {
-    t5 = $[11];
+    t5 = $[10];
   }
   const surfaceFill = t5;
   const texture = group.texture ?? (hasFill ? "dots" : "none");
   let t6;
-  if ($[12] !== hasFill || $[13] !== ids || $[14] !== texture) {
+  if ($[11] !== hasFill || $[12] !== ids || $[13] !== texture) {
     t6 = hasFill ? textureFill(texture, ids) : null;
-    $[12] = hasFill;
-    $[13] = ids;
-    $[14] = texture;
-    $[15] = t6;
+    $[11] = hasFill;
+    $[12] = ids;
+    $[13] = texture;
+    $[14] = t6;
   } else {
-    t6 = $[15];
+    t6 = $[14];
   }
   const texturePattern = t6;
-  let T0;
-  let t10;
-  let t11;
-  let t12;
   let t7;
+  if ($[15] !== group.dividers?.cols || $[16] !== group.dividers?.rows) {
+    t7 = [...(group.dividers?.rows ?? []).map(_temp), ...(group.dividers?.cols ?? []).map(_temp2)];
+    $[15] = group.dividers?.cols;
+    $[16] = group.dividers?.rows;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  const dividerKeys = t7;
+  const [firstLabel] = label;
   let t8;
-  let t9;
-  if ($[16] !== box.h || $[17] !== box.w || $[18] !== box.x || $[19] !== box.y || $[20] !== dividers || $[21] !== frame || $[22] !== group || $[23] !== hasFill || $[24] !== hasFrame || $[25] !== opacity || $[26] !== rx || $[27] !== stroke || $[28] !== surfaceFill || $[29] !== texture || $[30] !== texturePattern || $[31] !== themeAccent) {
-    const labelLines = groupLabelLines(group);
-    let t13;
-    if ($[39] !== group) {
-      t13 = group.titleBand ? groupTitleGutterHeight(group) : 0;
-      $[39] = group;
-      $[40] = t13;
-    } else {
-      t13 = $[40];
-    }
-    const titleBandHeight = t13;
-    const labelAlign = group.labelAlign ?? "center";
-    const labelX = labelAlign === "start" ? box.x + 16 : labelAlign === "end" ? box.x + box.w - 16 : box.x + box.w / 2;
-    const labelAnchor = labelAlign === "center" ? "middle" : labelAlign;
-    T0 = motion.g;
-    if ($[41] !== opacity) {
-      t7 = {
-        opacity
-      };
-      $[41] = opacity;
-      $[42] = t7;
-    } else {
-      t7 = $[42];
-    }
-    const t14 = hasFill ? surfaceFill : "none";
-    const t15 = hasFrame ? stroke : "none";
-    const t16 = hasFrame ? 1 : 0;
-    const t17 = frame === "dashed" ? "6 6" : undefined;
-    if ($[43] !== box.h || $[44] !== box.w || $[45] !== box.x || $[46] !== box.y || $[47] !== group.id || $[48] !== group.tone || $[49] !== rx || $[50] !== t14 || $[51] !== t15 || $[52] !== t16 || $[53] !== t17) {
-      t8 = /*#__PURE__*/_jsx("rect", {
-        "data-diagram-group": group.id,
-        "data-diagram-group-tone": group.tone,
-        x: box.x,
-        y: box.y,
-        width: box.w,
-        height: box.h,
-        rx: rx,
-        fill: t14,
-        stroke: t15,
-        strokeWidth: t16,
-        strokeDasharray: t17
-      });
-      $[43] = box.h;
-      $[44] = box.w;
-      $[45] = box.x;
-      $[46] = box.y;
-      $[47] = group.id;
-      $[48] = group.tone;
-      $[49] = rx;
-      $[50] = t14;
-      $[51] = t15;
-      $[52] = t16;
-      $[53] = t17;
-      $[54] = t8;
-    } else {
-      t8 = $[54];
-    }
-    if ($[55] !== box.h || $[56] !== box.w || $[57] !== box.x || $[58] !== box.y || $[59] !== group.id || $[60] !== rx || $[61] !== texture || $[62] !== texturePattern) {
-      t9 = texturePattern && /*#__PURE__*/_jsx("rect", {
-        "data-diagram-group-texture": `${group.id}:${texture}`,
-        x: box.x,
-        y: box.y,
-        width: box.w,
-        height: box.h,
-        rx: rx,
-        fill: texturePattern,
+  if ($[18] !== opacity) {
+    t8 = {
+      opacity
+    };
+    $[18] = opacity;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  const t9 = hasFill ? surfaceFill : "none";
+  const t10 = hasFrame ? stroke : "none";
+  const t11 = hasFrame ? 1 : 0;
+  let t12;
+  if ($[20] !== box.h || $[21] !== box.w || $[22] !== box.x || $[23] !== box.y || $[24] !== dasharray || $[25] !== group.id || $[26] !== group.tone || $[27] !== rx || $[28] !== t10 || $[29] !== t11 || $[30] !== t9) {
+    t12 = /*#__PURE__*/_jsx("rect", {
+      "data-diagram-group": group.id,
+      "data-diagram-group-tone": group.tone,
+      x: box.x,
+      y: box.y,
+      width: box.w,
+      height: box.h,
+      rx: rx,
+      fill: t9,
+      stroke: t10,
+      strokeWidth: t11,
+      strokeDasharray: dasharray
+    });
+    $[20] = box.h;
+    $[21] = box.w;
+    $[22] = box.x;
+    $[23] = box.y;
+    $[24] = dasharray;
+    $[25] = group.id;
+    $[26] = group.tone;
+    $[27] = rx;
+    $[28] = t10;
+    $[29] = t11;
+    $[30] = t9;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  let t13;
+  if ($[32] !== box.h || $[33] !== box.w || $[34] !== box.x || $[35] !== box.y || $[36] !== group.id || $[37] !== rx || $[38] !== texture || $[39] !== texturePattern) {
+    t13 = texturePattern && /*#__PURE__*/_jsx("rect", {
+      "data-diagram-group-texture": `${group.id}:${texture}`,
+      x: box.x,
+      y: box.y,
+      width: box.w,
+      height: box.h,
+      rx: rx,
+      fill: texturePattern,
+      pointerEvents: "none"
+    });
+    $[32] = box.h;
+    $[33] = box.w;
+    $[34] = box.x;
+    $[35] = box.y;
+    $[36] = group.id;
+    $[37] = rx;
+    $[38] = texture;
+    $[39] = texturePattern;
+    $[40] = t13;
+  } else {
+    t13 = $[40];
+  }
+  let t14;
+  if ($[41] !== band || $[42] !== dasharray || $[43] !== group.id || $[44] !== hasFill || $[45] !== stroke || $[46] !== surfaceFill) {
+    t14 = band && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("rect", {
+        "data-diagram-group-title-band": group.id,
+        x: band.x,
+        y: band.y,
+        width: band.w,
+        height: band.h,
+        fill: hasFill ? surfaceFill : DIAGRAM_BG,
         pointerEvents: "none"
-      });
-      $[55] = box.h;
-      $[56] = box.w;
-      $[57] = box.x;
-      $[58] = box.y;
-      $[59] = group.id;
-      $[60] = rx;
-      $[61] = texture;
-      $[62] = texturePattern;
-      $[63] = t9;
-    } else {
-      t9 = $[63];
-    }
-    if ($[64] !== box.w || $[65] !== box.x || $[66] !== box.y || $[67] !== frame || $[68] !== group.id || $[69] !== hasFill || $[70] !== stroke || $[71] !== surfaceFill || $[72] !== titleBandHeight) {
-      t10 = titleBandHeight > 0 && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("rect", {
-          "data-diagram-group-title-band": group.id,
-          x: box.x,
-          y: box.y,
-          width: box.w,
-          height: titleBandHeight,
-          fill: hasFill ? surfaceFill : DIAGRAM_BG,
-          pointerEvents: "none"
-        }), /*#__PURE__*/_jsx("line", {
-          "data-diagram-group-title-separator": group.id,
-          x1: box.x,
-          y1: box.y + titleBandHeight,
-          x2: box.x + box.w,
-          y2: box.y + titleBandHeight,
-          stroke: stroke,
-          strokeWidth: 1,
-          strokeDasharray: frame === "dashed" ? "6 6" : undefined
-        })]
-      });
-      $[64] = box.w;
-      $[65] = box.x;
-      $[66] = box.y;
-      $[67] = frame;
-      $[68] = group.id;
-      $[69] = hasFill;
-      $[70] = stroke;
-      $[71] = surfaceFill;
-      $[72] = titleBandHeight;
-      $[73] = t10;
-    } else {
-      t10 = $[73];
-    }
-    if ($[74] !== dividers || $[75] !== frame || $[76] !== group.id || $[77] !== themeAccent) {
-      let t18;
-      if ($[79] !== frame || $[80] !== group.id || $[81] !== themeAccent) {
-        t18 = line => /*#__PURE__*/_jsx("line", {
-          x1: line.x1,
-          y1: line.y1,
-          x2: line.x2,
-          y2: line.y2,
-          stroke: line.accent ? themeAccent : DIAGRAM_NEUTRAL,
+      }), /*#__PURE__*/_jsx("line", {
+        "data-diagram-group-title-separator": group.id,
+        x1: band.x,
+        y1: band.y + band.h,
+        x2: band.x + band.w,
+        y2: band.y + band.h,
+        stroke: stroke,
+        strokeWidth: 1,
+        strokeDasharray: dasharray
+      })]
+    });
+    $[41] = band;
+    $[42] = dasharray;
+    $[43] = group.id;
+    $[44] = hasFill;
+    $[45] = stroke;
+    $[46] = surfaceFill;
+    $[47] = t14;
+  } else {
+    t14 = $[47];
+  }
+  let t15;
+  if ($[48] !== dasharray || $[49] !== dividerKeys || $[50] !== group.accent || $[51] !== group.id || $[52] !== layout.dividers || $[53] !== themeAccent) {
+    let t16;
+    if ($[55] !== dasharray || $[56] !== dividerKeys || $[57] !== group.accent || $[58] !== group.id || $[59] !== themeAccent) {
+      t16 = (t17, i) => {
+        const [from, to] = t17;
+        const key = dividerKeys[i] ?? `${i}`;
+        return /*#__PURE__*/_jsx("line", {
+          x1: from.x,
+          y1: from.y,
+          x2: to.x,
+          y2: to.y,
+          stroke: group.accent ? themeAccent : DIAGRAM_NEUTRAL,
           strokeWidth: 1,
-          strokeDasharray: frame === "dashed" ? "6 6" : undefined,
-          "data-diagram-group-divider": `${group.id}:${line.axis}:${line.value}`
-        }, `${line.axis}-${line.value}`);
-        $[79] = frame;
-        $[80] = group.id;
-        $[81] = themeAccent;
-        $[82] = t18;
-      } else {
-        t18 = $[82];
-      }
-      t11 = dividers.map(t18);
-      $[74] = dividers;
-      $[75] = frame;
-      $[76] = group.id;
-      $[77] = themeAccent;
-      $[78] = t11;
+          strokeDasharray: dasharray,
+          "data-diagram-group-divider": `${group.id}:${key}`
+        }, key);
+      };
+      $[55] = dasharray;
+      $[56] = dividerKeys;
+      $[57] = group.accent;
+      $[58] = group.id;
+      $[59] = themeAccent;
+      $[60] = t16;
     } else {
-      t11 = $[78];
+      t16 = $[60];
     }
-    t12 = labelLines.length > 0 && /*#__PURE__*/_jsx("text", {
+    t15 = layout.dividers.map(t16);
+    $[48] = dasharray;
+    $[49] = dividerKeys;
+    $[50] = group.accent;
+    $[51] = group.id;
+    $[52] = layout.dividers;
+    $[53] = themeAccent;
+    $[54] = t15;
+  } else {
+    t15 = $[54];
+  }
+  let t16;
+  if ($[61] !== firstLabel || $[62] !== group.id || $[63] !== label) {
+    t16 = firstLabel && /*#__PURE__*/_jsx("text", {
       "data-diagram-group-label": group.id,
-      x: labelX,
-      y: group.labelSide === "bottom" ? box.y + box.h - groupLabelHeight(group) + GROUP_LABEL_H - 14 : box.y + GROUP_LABEL_H,
-      textAnchor: labelAnchor,
-      fontFamily: "ui-sans-serif, system-ui, sans-serif",
-      fontSize: 12,
-      fontWeight: 600,
+      x: firstLabel.x,
+      y: firstLabel.y,
+      textAnchor: firstLabel.anchor,
+      fontFamily: FONT_FAMILY[firstLabel.font.face],
+      fontSize: firstLabel.font.size,
+      fontWeight: firstLabel.font.weight,
       fill: DIAGRAM_TEXT,
-      children: labelLines.map((line_0, i) => /*#__PURE__*/_jsx("tspan", {
-        x: labelX,
-        dy: i === 0 ? 0 : 14,
-        children: line_0
-      }, i))
+      children: /*#__PURE__*/_jsx(RunSpans, {
+        runs: label
+      })
     });
-    $[16] = box.h;
-    $[17] = box.w;
-    $[18] = box.x;
-    $[19] = box.y;
-    $[20] = dividers;
-    $[21] = frame;
-    $[22] = group;
-    $[23] = hasFill;
-    $[24] = hasFrame;
-    $[25] = opacity;
-    $[26] = rx;
-    $[27] = stroke;
-    $[28] = surfaceFill;
-    $[29] = texture;
-    $[30] = texturePattern;
-    $[31] = themeAccent;
-    $[32] = T0;
-    $[33] = t10;
-    $[34] = t11;
-    $[35] = t12;
-    $[36] = t7;
-    $[37] = t8;
-    $[38] = t9;
-  } else {
-    T0 = $[32];
-    t10 = $[33];
-    t11 = $[34];
-    t12 = $[35];
-    t7 = $[36];
-    t8 = $[37];
-    t9 = $[38];
-  }
-  const t13 = group.id;
-  let t14;
-  if ($[83] !== box || $[84] !== group) {
-    t14 = groupPortPlacements(group, box);
-    $[83] = box;
-    $[84] = group;
-    $[85] = t14;
+    $[61] = firstLabel;
+    $[62] = group.id;
+    $[63] = label;
+    $[64] = t16;
   } else {
-    t14 = $[85];
+    t16 = $[64];
   }
-  let t15;
-  if ($[86] !== group.id || $[87] !== t14) {
-    t15 = /*#__PURE__*/_jsx(PortMarkers, {
-      ownerId: t13,
-      placements: t14
+  let t17;
+  if ($[65] !== layout.ports) {
+    t17 = layout.ports ?? [];
+    $[65] = layout.ports;
+    $[66] = t17;
+  } else {
+    t17 = $[66];
+  }
+  let t18;
+  if ($[67] !== group.id || $[68] !== group.ports || $[69] !== t17) {
+    t18 = /*#__PURE__*/_jsx(PortMarkers, {
+      ownerId: group.id,
+      ports: t17,
+      declared: group.ports
     });
-    $[86] = group.id;
-    $[87] = t14;
-    $[88] = t15;
+    $[67] = group.id;
+    $[68] = group.ports;
+    $[69] = t17;
+    $[70] = t18;
   } else {
-    t15 = $[88];
+    t18 = $[70];
   }
-  let t16;
-  if ($[89] !== T0 || $[90] !== t10 || $[91] !== t11 || $[92] !== t12 || $[93] !== t15 || $[94] !== t7 || $[95] !== t8 || $[96] !== t9) {
-    t16 = /*#__PURE__*/_jsxs(T0, {
-      style: t7,
-      children: [t8, t9, t10, t11, t12, t15]
+  let t19;
+  if ($[71] !== t12 || $[72] !== t13 || $[73] !== t14 || $[74] !== t15 || $[75] !== t16 || $[76] !== t18 || $[77] !== t8) {
+    t19 = /*#__PURE__*/_jsxs(motion.g, {
+      style: t8,
+      children: [t12, t13, t14, t15, t16, t18]
     });
-    $[89] = T0;
-    $[90] = t10;
-    $[91] = t11;
-    $[92] = t12;
-    $[93] = t15;
-    $[94] = t7;
-    $[95] = t8;
-    $[96] = t9;
-    $[97] = t16;
-  } else {
-    t16 = $[97];
+    $[71] = t12;
+    $[72] = t13;
+    $[73] = t14;
+    $[74] = t15;
+    $[75] = t16;
+    $[76] = t18;
+    $[77] = t8;
+    $[78] = t19;
+  } else {
+    t19 = $[78];
   }
-  return t16;
+  return t19;
+}
+function _temp2(value_0) {
+  return `col:${value_0}`;
+}
+function _temp(value) {
+  return `row:${value}`;
 }
 export function EdgeStroke(t0) {
-  const $ = _c(30);
+  const $ = _c(36);
   const {
     d,
     edge,
@@ -1036,95 +1036,113 @@ export function EdgeStroke(t0) {
     accent: themeAccent,
     ids
   } = useDiagramTheme();
-  const stroke = edge.accent ? themeAccent : edge.dim ? DIAGRAM_DIM : DIAGRAM_NEUTRAL;
-  const markerId = edge.accent ? ids.arrowAccent : edge.dim ? ids.arrowDim : ids.arrowNeutral;
-  const direction = edge.headless ? "none" : edge.direction ?? "forward";
-  const markerUrl = `url(#${markerId})`;
-  const strokeWidth = edge.strokeWidth ?? 1.5;
   let t1;
-  if ($[0] !== edge) {
-    t1 = edgeDasharray(edge);
+  if ($[0] !== edge || $[1] !== themeAccent) {
+    t1 = edgeStroke(edge, themeAccent);
     $[0] = edge;
-    $[1] = t1;
+    $[1] = themeAccent;
+    $[2] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[2];
   }
-  const dasharray = t1;
-  const drawEnd = start + (end - start) * 0.85;
+  const stroke = t1;
   let t2;
-  if ($[2] !== drawEnd || $[3] !== start) {
-    t2 = [start, drawEnd];
-    $[2] = drawEnd;
-    $[3] = start;
-    $[4] = t2;
+  if ($[3] !== edge || $[4] !== ids) {
+    t2 = edgeMarkerId(edge, ids);
+    $[3] = edge;
+    $[4] = ids;
+    $[5] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[5];
   }
+  const markerId = t2;
+  const direction = edge.headless ? "none" : edge.direction ?? "forward";
+  const markerUrl = `url(#${markerId})`;
+  const strokeWidth = edge.strokeWidth ?? 1.5;
   let t3;
+  if ($[6] !== edge) {
+    t3 = edgeDasharray(edge);
+    $[6] = edge;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const dasharray = t3;
+  const drawEnd = start + (end - start) * 0.85;
   let t4;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = [0, 1];
-    t4 = {
-      clamp: true
-    };
-    $[5] = t3;
-    $[6] = t4;
+  if ($[8] !== drawEnd || $[9] !== start) {
+    t4 = [start, drawEnd];
+    $[8] = drawEnd;
+    $[9] = start;
+    $[10] = t4;
   } else {
-    t3 = $[5];
-    t4 = $[6];
+    t4 = $[10];
   }
-  const pathLength = useTransform(progress, t2, t3, t4);
-  const t5 = start + 0.001;
+  let t5;
   let t6;
-  if ($[7] !== start || $[8] !== t5) {
-    t6 = [start, t5];
-    $[7] = start;
-    $[8] = t5;
-    $[9] = t6;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = [0, 1];
+    t6 = {
+      clamp: true
+    };
+    $[11] = t5;
+    $[12] = t6;
   } else {
-    t6 = $[9];
+    t5 = $[11];
+    t6 = $[12];
   }
-  let t7;
+  const pathLength = useTransform(progress, t4, t5, t6);
+  const t7 = start + 0.001;
   let t8;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = [0, 1];
-    t8 = {
+  if ($[13] !== start || $[14] !== t7) {
+    t8 = [start, t7];
+    $[13] = start;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t10;
+  let t9;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = [0, 1];
+    t10 = {
       clamp: true
     };
-    $[10] = t7;
-    $[11] = t8;
+    $[16] = t10;
+    $[17] = t9;
   } else {
-    t7 = $[10];
-    t8 = $[11];
-  }
-  const pathOpacity = useTransform(progress, t6, t7, t8);
-  const t9 = `${edge.from}->${edge.to}`;
-  const t10 = edge.layer ?? "foreground";
-  const t11 = direction === "both" ? markerUrl : undefined;
-  const t12 = direction === "forward" || direction === "both" ? markerUrl : undefined;
-  let t13;
-  if ($[12] !== dasharray || $[13] !== pathLength || $[14] !== pathOpacity) {
-    t13 = dasharray ? {
+    t10 = $[16];
+    t9 = $[17];
+  }
+  const pathOpacity = useTransform(progress, t8, t9, t10);
+  const t11 = `${edge.from}->${edge.to}`;
+  const t12 = edge.layer ?? "foreground";
+  const t13 = direction === "both" ? markerUrl : undefined;
+  const t14 = direction === "forward" || direction === "both" ? markerUrl : undefined;
+  let t15;
+  if ($[18] !== dasharray || $[19] !== pathLength || $[20] !== pathOpacity) {
+    t15 = dasharray ? {
       opacity: pathOpacity
     } : {
       pathLength,
       opacity: pathOpacity
     };
-    $[12] = dasharray;
-    $[13] = pathLength;
-    $[14] = pathOpacity;
-    $[15] = t13;
+    $[18] = dasharray;
+    $[19] = pathLength;
+    $[20] = pathOpacity;
+    $[21] = t15;
   } else {
-    t13 = $[15];
+    t15 = $[21];
   }
-  let t14;
-  if ($[16] !== d || $[17] !== dasharray || $[18] !== direction || $[19] !== edge.channel || $[20] !== edge.lineStyle || $[21] !== edge.route || $[22] !== stroke || $[23] !== strokeWidth || $[24] !== t10 || $[25] !== t11 || $[26] !== t12 || $[27] !== t13 || $[28] !== t9) {
-    t14 = /*#__PURE__*/_jsx(motion.path, {
-      "data-diagram-edge": t9,
+  let t16;
+  if ($[22] !== d || $[23] !== dasharray || $[24] !== direction || $[25] !== edge.channel || $[26] !== edge.lineStyle || $[27] !== edge.route || $[28] !== stroke || $[29] !== strokeWidth || $[30] !== t11 || $[31] !== t12 || $[32] !== t13 || $[33] !== t14 || $[34] !== t15) {
+    t16 = /*#__PURE__*/_jsx(motion.path, {
+      "data-diagram-edge": t11,
       "data-diagram-edge-channel": edge.channel,
       "data-diagram-edge-line-style": edge.lineStyle,
       "data-diagram-edge-direction": direction,
-      "data-diagram-edge-layer": t10,
+      "data-diagram-edge-layer": t12,
       "data-diagram-edge-route": edge.route,
       d: d,
       fill: "none",
@@ -1133,35 +1151,33 @@ export function EdgeStroke(t0) {
       strokeDasharray: dasharray,
       strokeLinejoin: "round",
       strokeLinecap: "round",
-      markerStart: t11,
-      markerEnd: t12,
-      style: t13
+      markerStart: t13,
+      markerEnd: t14,
+      style: t15
     });
-    $[16] = d;
-    $[17] = dasharray;
-    $[18] = direction;
-    $[19] = edge.channel;
-    $[20] = edge.lineStyle;
-    $[21] = edge.route;
-    $[22] = stroke;
-    $[23] = strokeWidth;
-    $[24] = t10;
-    $[25] = t11;
-    $[26] = t12;
-    $[27] = t13;
-    $[28] = t9;
-    $[29] = t14;
-  } else {
-    t14 = $[29];
-  }
-  return t14;
+    $[22] = d;
+    $[23] = dasharray;
+    $[24] = direction;
+    $[25] = edge.channel;
+    $[26] = edge.lineStyle;
+    $[27] = edge.route;
+    $[28] = stroke;
+    $[29] = strokeWidth;
+    $[30] = t11;
+    $[31] = t12;
+    $[32] = t13;
+    $[33] = t14;
+    $[34] = t15;
+    $[35] = t16;
+  } else {
+    t16 = $[35];
+  }
+  return t16;
 }
 export function EdgeOverlay(t0) {
-  const $ = _c(18);
+  const $ = _c(21);
   const {
-    edge,
-    labelPlacement,
-    badgePlacement,
+    layout,
     progress,
     start,
     end
@@ -1169,432 +1185,421 @@ export function EdgeOverlay(t0) {
   const {
     accent: themeAccent
   } = useDiagramTheme();
-  const labelFill = edge.accent ? themeAccent : edge.dim ? DIAGRAM_DIM : DIAGRAM_TEXT;
-  const drawEnd = start + (end - start) * 0.85;
+  const {
+    edge,
+    label,
+    badge
+  } = layout;
   let t1;
-  if ($[0] !== drawEnd || $[1] !== end) {
-    t1 = [drawEnd, end];
-    $[0] = drawEnd;
-    $[1] = end;
+  if ($[0] !== edge || $[1] !== themeAccent) {
+    t1 = edgeLabelFill(edge, themeAccent);
+    $[0] = edge;
+    $[1] = themeAccent;
     $[2] = t1;
   } else {
     t1 = $[2];
   }
+  const labelFill = t1;
+  const drawEnd = start + (end - start) * 0.85;
   let t2;
+  if ($[3] !== drawEnd || $[4] !== end) {
+    t2 = [drawEnd, end];
+    $[3] = drawEnd;
+    $[4] = end;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
   let t3;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = [0, 1];
-    t3 = {
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [0, 1];
+    t4 = {
       clamp: true
     };
-    $[3] = t2;
-    $[4] = t3;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t2 = $[3];
-    t3 = $[4];
+    t3 = $[6];
+    t4 = $[7];
   }
-  const labelOpacity = useTransform(progress, t1, t2, t3);
-  let t4;
-  if ($[5] !== edge || $[6] !== labelFill || $[7] !== labelOpacity || $[8] !== labelPlacement) {
-    t4 = edge.label && labelPlacement && /*#__PURE__*/_jsx(EdgeLabel, {
+  const labelOpacity = useTransform(progress, t2, t3, t4);
+  let t5;
+  if ($[8] !== edge || $[9] !== label || $[10] !== labelFill || $[11] !== labelOpacity) {
+    t5 = label && /*#__PURE__*/_jsx(EdgeLabel, {
       edge: edge,
-      placement: labelPlacement,
+      label: label,
       fill: labelFill,
       opacity: labelOpacity
     });
-    $[5] = edge;
-    $[6] = labelFill;
-    $[7] = labelOpacity;
-    $[8] = labelPlacement;
-    $[9] = t4;
+    $[8] = edge;
+    $[9] = label;
+    $[10] = labelFill;
+    $[11] = labelOpacity;
+    $[12] = t5;
   } else {
-    t4 = $[9];
+    t5 = $[12];
   }
-  let t5;
-  if ($[10] !== badgePlacement || $[11] !== edge || $[12] !== labelFill || $[13] !== labelOpacity) {
-    t5 = (edge.badgeIcon || edge.badgeLabel?.length) && badgePlacement && /*#__PURE__*/_jsx(EdgeBadge, {
+  let t6;
+  if ($[13] !== badge || $[14] !== edge || $[15] !== labelFill || $[16] !== labelOpacity) {
+    t6 = badge && /*#__PURE__*/_jsx(EdgeBadge, {
       edge: edge,
-      placement: badgePlacement,
+      badge: badge,
       fill: labelFill,
       opacity: labelOpacity
     });
-    $[10] = badgePlacement;
-    $[11] = edge;
-    $[12] = labelFill;
-    $[13] = labelOpacity;
-    $[14] = t5;
+    $[13] = badge;
+    $[14] = edge;
+    $[15] = labelFill;
+    $[16] = labelOpacity;
+    $[17] = t6;
   } else {
-    t5 = $[14];
+    t6 = $[17];
   }
-  let t6;
-  if ($[15] !== t4 || $[16] !== t5) {
-    t6 = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t4, t5]
+  let t7;
+  if ($[18] !== t5 || $[19] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t5, t6]
     });
-    $[15] = t4;
-    $[16] = t5;
-    $[17] = t6;
+    $[18] = t5;
+    $[19] = t6;
+    $[20] = t7;
   } else {
-    t6 = $[17];
+    t7 = $[20];
   }
-  return t6;
+  return t7;
 }
 function EdgeLabel(t0) {
-  const $ = _c(43);
+  const $ = _c(27);
   const {
     edge,
-    placement,
+    label,
     fill,
     opacity
   } = t0;
+  const {
+    box
+  } = label;
+  const [first] = label.text;
+  if (!first) {
+    return null;
+  }
   let t1;
-  if ($[0] !== edge.label) {
-    t1 = edge.label ?? [];
-    $[0] = edge.label;
+  if ($[0] !== opacity) {
+    t1 = {
+      opacity
+    };
+    $[0] = opacity;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const label = t1;
   let t2;
-  if ($[2] !== edge) {
-    t2 = edgeLabelFontSize(edge);
-    $[2] = edge;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  const fontSize = t2;
-  let t3;
-  if ($[4] !== edge) {
-    t3 = edgeLabelLineHeight(edge);
-    $[4] = edge;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  const lineHeight = t3;
-  let t4;
-  if ($[6] !== edge || $[7] !== placement) {
-    t4 = edgeLabelFrameBox(edge, placement);
-    $[6] = edge;
-    $[7] = placement;
-    $[8] = t4;
-  } else {
-    t4 = $[8];
-  }
-  const {
-    x,
-    y,
-    w: width,
-    h: height
-  } = t4;
-  let t5;
-  if ($[9] !== opacity) {
-    t5 = {
-      opacity
-    };
-    $[9] = opacity;
-    $[10] = t5;
-  } else {
-    t5 = $[10];
-  }
-  let t6;
-  if ($[11] !== edge.from || $[12] !== edge.labelFrame || $[13] !== edge.labelLineGap || $[14] !== edge.to || $[15] !== fill || $[16] !== height || $[17] !== placement.segmentIndex || $[18] !== width || $[19] !== x || $[20] !== y) {
-    t6 = edge.labelFrame && /*#__PURE__*/_jsx("rect", {
+  if ($[2] !== box || $[3] !== edge.from || $[4] !== edge.labelFrame || $[5] !== edge.labelLineGap || $[6] !== edge.to || $[7] !== fill || $[8] !== label.segment) {
+    t2 = edge.labelFrame && /*#__PURE__*/_jsx("rect", {
       "data-diagram-edge-label-frame": `${edge.from}->${edge.to}`,
-      "data-diagram-edge-label-segment": placement.segmentIndex,
+      "data-diagram-edge-label-segment": label.segment,
       "data-diagram-edge-label-line-gap": edge.labelLineGap,
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      rx: height / 2,
+      x: box.x,
+      y: box.y,
+      width: box.w,
+      height: box.h,
+      rx: box.h / 2,
       fill: DIAGRAM_BG,
       stroke: fill,
       strokeWidth: 0.75
     });
-    $[11] = edge.from;
-    $[12] = edge.labelFrame;
-    $[13] = edge.labelLineGap;
-    $[14] = edge.to;
-    $[15] = fill;
-    $[16] = height;
-    $[17] = placement.segmentIndex;
-    $[18] = width;
-    $[19] = x;
-    $[20] = y;
-    $[21] = t6;
-  } else {
-    t6 = $[21];
-  }
-  const t7 = `${edge.from}->${edge.to}`;
-  const t8 = placement.segmentIndex;
-  const t9 = edge.labelLineGap;
-  const t10 = placement.x;
-  const t11 = placement.y;
-  const t12 = placement.align;
-  let t13;
-  if ($[22] !== label || $[23] !== lineHeight || $[24] !== placement.x) {
-    let t14;
-    if ($[26] !== lineHeight || $[27] !== placement.x) {
-      t14 = (line, i) => /*#__PURE__*/_jsx("tspan", {
-        x: placement.x,
-        dy: i === 0 ? 0 : lineHeight,
-        children: line
-      }, i);
-      $[26] = lineHeight;
-      $[27] = placement.x;
-      $[28] = t14;
-    } else {
-      t14 = $[28];
-    }
-    t13 = label.map(t14);
-    $[22] = label;
-    $[23] = lineHeight;
-    $[24] = placement.x;
-    $[25] = t13;
+    $[2] = box;
+    $[3] = edge.from;
+    $[4] = edge.labelFrame;
+    $[5] = edge.labelLineGap;
+    $[6] = edge.to;
+    $[7] = fill;
+    $[8] = label.segment;
+    $[9] = t2;
   } else {
-    t13 = $[25];
+    t2 = $[9];
   }
-  let t14;
-  if ($[29] !== edge.labelLineGap || $[30] !== fill || $[31] !== fontSize || $[32] !== placement.align || $[33] !== placement.segmentIndex || $[34] !== placement.x || $[35] !== placement.y || $[36] !== t13 || $[37] !== t7) {
-    t14 = /*#__PURE__*/_jsx("text", {
-      "data-diagram-edge-label": t7,
-      "data-diagram-edge-label-segment": t8,
-      "data-diagram-edge-label-line-gap": t9,
-      x: t10,
-      y: t11,
-      textAnchor: t12,
-      fontFamily: "ui-monospace, 'Geist Mono', monospace",
-      fontSize: fontSize,
+  const t3 = `${edge.from}->${edge.to}`;
+  const t4 = FONT_FAMILY[first.font.face];
+  let t5;
+  if ($[10] !== label.text) {
+    t5 = /*#__PURE__*/_jsx(RunSpans, {
+      runs: label.text
+    });
+    $[10] = label.text;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== edge.labelLineGap || $[13] !== fill || $[14] !== first.anchor || $[15] !== first.font.size || $[16] !== first.x || $[17] !== first.y || $[18] !== label.segment || $[19] !== t3 || $[20] !== t4 || $[21] !== t5) {
+    t6 = /*#__PURE__*/_jsx("text", {
+      "data-diagram-edge-label": t3,
+      "data-diagram-edge-label-segment": label.segment,
+      "data-diagram-edge-label-line-gap": edge.labelLineGap,
+      x: first.x,
+      y: first.y,
+      textAnchor: first.anchor,
+      fontFamily: t4,
+      fontSize: first.font.size,
       fill: fill,
-      children: t13
+      children: t5
     });
-    $[29] = edge.labelLineGap;
-    $[30] = fill;
-    $[31] = fontSize;
-    $[32] = placement.align;
-    $[33] = placement.segmentIndex;
-    $[34] = placement.x;
-    $[35] = placement.y;
-    $[36] = t13;
-    $[37] = t7;
-    $[38] = t14;
-  } else {
-    t14 = $[38];
+    $[12] = edge.labelLineGap;
+    $[13] = fill;
+    $[14] = first.anchor;
+    $[15] = first.font.size;
+    $[16] = first.x;
+    $[17] = first.y;
+    $[18] = label.segment;
+    $[19] = t3;
+    $[20] = t4;
+    $[21] = t5;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
   }
-  let t15;
-  if ($[39] !== t14 || $[40] !== t5 || $[41] !== t6) {
-    t15 = /*#__PURE__*/_jsxs(motion.g, {
-      style: t5,
-      children: [t6, t14]
+  let t7;
+  if ($[23] !== t1 || $[24] !== t2 || $[25] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(motion.g, {
+      style: t1,
+      children: [t2, t6]
     });
-    $[39] = t14;
-    $[40] = t5;
-    $[41] = t6;
-    $[42] = t15;
+    $[23] = t1;
+    $[24] = t2;
+    $[25] = t6;
+    $[26] = t7;
   } else {
-    t15 = $[42];
+    t7 = $[26];
   }
-  return t15;
+  return t7;
 }
+
+/**
+ * The badge draws in its own frame, centred on the badge, so that it can move
+ * as one piece.
+ */
 function EdgeBadge(t0) {
-  const $ = _c(30);
+  const $ = _c(35);
   const {
     edge,
-    placement,
+    badge,
     fill,
     opacity
   } = t0;
-  let t1;
-  if ($[0] !== edge.badgeLabel) {
-    t1 = edge.badgeLabel ?? [];
-    $[0] = edge.badgeLabel;
-    $[1] = t1;
+  const {
+    box,
+    icon,
+    text
+  } = badge;
+  const t1 = box.x + box.w / 2;
+  const t2 = box.y + box.h / 2;
+  let t3;
+  if ($[0] !== t1 || $[1] !== t2) {
+    t3 = {
+      x: t1,
+      y: t2
+    };
+    $[0] = t1;
+    $[1] = t2;
+    $[2] = t3;
   } else {
-    t1 = $[1];
+    t3 = $[2];
   }
-  const label = t1;
-  const iconSize = edge.badgeIcon ? EDGE_BADGE_ICON : 0;
-  const iconGap = edge.badgeIcon && label.length > 0 ? 8 : 0;
-  let t2;
-  if ($[2] !== edge) {
-    t2 = edgeBadgeSize(edge);
-    $[2] = edge;
-    $[3] = t2;
+  const origin = t3;
+  let t4;
+  if ($[3] !== origin.x || $[4] !== origin.y || $[5] !== text) {
+    let t5;
+    if ($[7] !== origin.x || $[8] !== origin.y) {
+      t5 = run => ({
+        ...run,
+        x: run.x - origin.x,
+        y: run.y - origin.y
+      });
+      $[7] = origin.x;
+      $[8] = origin.y;
+      $[9] = t5;
+    } else {
+      t5 = $[9];
+    }
+    t4 = text.map(t5);
+    $[3] = origin.x;
+    $[4] = origin.y;
+    $[5] = text;
+    $[6] = t4;
   } else {
-    t2 = $[3];
+    t4 = $[6];
   }
-  const {
-    w: width,
-    h: height
-  } = t2;
-  const left = -width / 2;
-  const top = -height / 2;
-  const iconX = left + 8;
-  const iconY = -iconSize / 2;
-  const textX = left + 8 + iconSize + iconGap;
-  const firstLineY = -((label.length - 1) * 12) / 2 + 4;
-  const t3 = `${edge.from}->${edge.to}`;
-  const t4 = `translate(${placement.x} ${placement.y})`;
-  let t5;
-  if ($[4] !== opacity) {
-    t5 = {
+  const local = t4;
+  const [first] = local;
+  const t5 = `${edge.from}->${edge.to}`;
+  const t6 = `translate(${origin.x} ${origin.y})`;
+  let t7;
+  if ($[10] !== opacity) {
+    t7 = {
       opacity
     };
-    $[4] = opacity;
-    $[5] = t5;
+    $[10] = opacity;
+    $[11] = t7;
   } else {
-    t5 = $[5];
+    t7 = $[11];
   }
-  let t6;
-  if ($[6] !== fill || $[7] !== height || $[8] !== left || $[9] !== top || $[10] !== width) {
-    t6 = /*#__PURE__*/_jsx("rect", {
-      x: left,
-      y: top,
-      width: width,
-      height: height,
+  const t8 = box.x - origin.x;
+  const t9 = box.y - origin.y;
+  let t10;
+  if ($[12] !== box.h || $[13] !== box.w || $[14] !== fill || $[15] !== t8 || $[16] !== t9) {
+    t10 = /*#__PURE__*/_jsx("rect", {
+      x: t8,
+      y: t9,
+      width: box.w,
+      height: box.h,
       rx: 10,
       fill: DIAGRAM_BG,
       stroke: fill,
       strokeWidth: 1
     });
-    $[6] = fill;
-    $[7] = height;
-    $[8] = left;
-    $[9] = top;
-    $[10] = width;
-    $[11] = t6;
+    $[12] = box.h;
+    $[13] = box.w;
+    $[14] = fill;
+    $[15] = t8;
+    $[16] = t9;
+    $[17] = t10;
   } else {
-    t6 = $[11];
+    t10 = $[17];
   }
-  let t7;
-  if ($[12] !== edge.badgeIcon || $[13] !== fill || $[14] !== iconSize || $[15] !== iconX || $[16] !== iconY) {
-    t7 = edge.badgeIcon && /*#__PURE__*/_jsx(DiagramNodeIcon, {
+  let t11;
+  if ($[18] !== edge.badgeIcon || $[19] !== fill || $[20] !== icon || $[21] !== origin.x || $[22] !== origin.y) {
+    t11 = edge.badgeIcon && icon && /*#__PURE__*/_jsx(DiagramNodeIcon, {
       icon: edge.badgeIcon,
-      x: iconX,
-      y: iconY,
-      size: iconSize,
+      x: icon.x - origin.x,
+      y: icon.y - origin.y,
+      size: icon.w,
       color: fill
     });
-    $[12] = edge.badgeIcon;
-    $[13] = fill;
-    $[14] = iconSize;
-    $[15] = iconX;
-    $[16] = iconY;
-    $[17] = t7;
+    $[18] = edge.badgeIcon;
+    $[19] = fill;
+    $[20] = icon;
+    $[21] = origin.x;
+    $[22] = origin.y;
+    $[23] = t11;
   } else {
-    t7 = $[17];
+    t11 = $[23];
   }
-  let t8;
-  if ($[18] !== fill || $[19] !== firstLineY || $[20] !== label || $[21] !== textX) {
-    t8 = label.length > 0 && /*#__PURE__*/_jsx("text", {
-      x: textX,
-      y: firstLineY,
-      textAnchor: "start",
-      fontFamily: "ui-sans-serif, system-ui, sans-serif",
-      fontSize: 10,
-      fontWeight: 600,
+  let t12;
+  if ($[24] !== fill || $[25] !== first || $[26] !== local) {
+    t12 = first && /*#__PURE__*/_jsx("text", {
+      x: first.x,
+      y: first.y,
+      textAnchor: first.anchor,
+      fontFamily: FONT_FAMILY[first.font.face],
+      fontSize: first.font.size,
+      fontWeight: first.font.weight,
       fill: fill,
-      children: label.map((line, i) => /*#__PURE__*/_jsx("tspan", {
-        x: textX,
-        dy: i === 0 ? 0 : 12,
-        children: line
-      }, i))
+      children: /*#__PURE__*/_jsx(RunSpans, {
+        runs: local
+      })
     });
-    $[18] = fill;
-    $[19] = firstLineY;
-    $[20] = label;
-    $[21] = textX;
-    $[22] = t8;
+    $[24] = fill;
+    $[25] = first;
+    $[26] = local;
+    $[27] = t12;
   } else {
-    t8 = $[22];
+    t12 = $[27];
   }
-  let t9;
-  if ($[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8) {
-    t9 = /*#__PURE__*/_jsxs(motion.g, {
-      "data-diagram-edge-badge": t3,
-      transform: t4,
-      style: t5,
-      children: [t6, t7, t8]
+  let t13;
+  if ($[28] !== t10 || $[29] !== t11 || $[30] !== t12 || $[31] !== t5 || $[32] !== t6 || $[33] !== t7) {
+    t13 = /*#__PURE__*/_jsxs(motion.g, {
+      "data-diagram-edge-badge": t5,
+      transform: t6,
+      style: t7,
+      children: [t10, t11, t12]
     });
-    $[23] = t3;
-    $[24] = t4;
-    $[25] = t5;
-    $[26] = t6;
-    $[27] = t7;
-    $[28] = t8;
-    $[29] = t9;
+    $[28] = t10;
+    $[29] = t11;
+    $[30] = t12;
+    $[31] = t5;
+    $[32] = t6;
+    $[33] = t7;
+    $[34] = t13;
   } else {
-    t9 = $[29];
+    t13 = $[34];
   }
-  return t9;
+  return t13;
 }
 export function PortMarkers(t0) {
-  const $ = _c(9);
+  const $ = _c(11);
   const {
     ownerId,
-    placements
+    ports,
+    declared
   } = t0;
   const {
     accent: themeAccent
   } = useDiagramTheme();
-  if (placements.length === 0) {
+  if (ports.length === 0) {
     return null;
   }
   let t1;
-  if ($[0] !== ownerId || $[1] !== placements || $[2] !== themeAccent) {
+  if ($[0] !== declared || $[1] !== ownerId || $[2] !== ports || $[3] !== themeAccent) {
     let t2;
-    if ($[4] !== ownerId || $[5] !== themeAccent) {
+    if ($[5] !== declared || $[6] !== ownerId || $[7] !== themeAccent) {
       t2 = port => {
-        const stroke = port.accent ? themeAccent : DIAGRAM_NEUTRAL;
-        const fill = port.accent ? themeAccent : DIAGRAM_BG;
+        const accent = declared?.find(t3 => {
+          const {
+            id
+          } = t3;
+          return id === port.id;
+        })?.accent;
+        const stroke = accent ? themeAccent : DIAGRAM_NEUTRAL;
+        const fill = accent ? themeAccent : DIAGRAM_BG;
         return /*#__PURE__*/_jsxs("g", {
           "data-diagram-port": `${ownerId}:${port.id}`,
           "data-diagram-port-side": port.side,
           children: [/*#__PURE__*/_jsx("circle", {
-            cx: port.x,
-            cy: port.y,
+            cx: port.point.x,
+            cy: port.point.y,
             r: 4,
             fill: fill,
             stroke: stroke,
             strokeWidth: 1.5
           }), port.label && /*#__PURE__*/_jsx("text", {
-            x: port.labelX,
-            y: port.labelY,
-            textAnchor: port.labelAlign,
-            fontFamily: "ui-monospace, 'Geist Mono', monospace",
-            fontSize: 9,
-            fontWeight: 600,
+            x: port.label.x,
+            y: port.label.y,
+            textAnchor: port.label.anchor,
+            fontFamily: FONT_FAMILY[port.label.font.face],
+            fontSize: port.label.font.size,
+            fontWeight: port.label.font.weight,
             fill: stroke,
-            children: port.label
+            children: port.label.text
           })]
         }, port.id);
       };
-      $[4] = ownerId;
-      $[5] = themeAccent;
-      $[6] = t2;
+      $[5] = declared;
+      $[6] = ownerId;
+      $[7] = themeAccent;
+      $[8] = t2;
     } else {
-      t2 = $[6];
+      t2 = $[8];
     }
-    t1 = placements.map(t2);
-    $[0] = ownerId;
-    $[1] = placements;
-    $[2] = themeAccent;
-    $[3] = t1;
+    t1 = ports.map(t2);
+    $[0] = declared;
+    $[1] = ownerId;
+    $[2] = ports;
+    $[3] = themeAccent;
+    $[4] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[4];
   }
   let t2;
-  if ($[7] !== t1) {
+  if ($[9] !== t1) {
     t2 = /*#__PURE__*/_jsx(_Fragment, {
       children: t1
     });
-    $[7] = t1;
-    $[8] = t2;
+    $[9] = t1;
+    $[10] = t2;
   } else {
-    t2 = $[8];
+    t2 = $[10];
   }
   return t2;
 }