@zukhruf/diagram 0.3.32 → 0.3.34

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

@@ -44,6 +44,15 @@ function edgeDasharray(edge) {
   if (edge.lineStyle === 'dotted') return '1 6';
   return undefined;
 }
+
+/** The stroke width of an edge of each weight. */
+export const EDGE_STROKE_WIDTH = {
+  regular: 1.5,
+  bold: 3
+};
+
+/** The corner radius a group frame is drawn with. */
+const GROUP_RADIUS = 12;
 function edgeStroke(edge, themeAccent) {
   if (edge.accent) return themeAccent;
   if (edge.dim) return DIAGRAM_DIM;
@@ -89,7 +98,7 @@ export function buildSegments(nodeCount, edgeCount) {
   return segments;
 }
 export function DiagramNodeIcon(t0) {
-  const $ = _c(93);
+  const $ = _c(95);
   const {
     icon,
     x,
@@ -97,7 +106,6 @@ export function DiagramNodeIcon(t0) {
     size,
     color
   } = t0;
-  const scale = size / 64;
   let t1;
   if ($[0] !== color) {
     t1 = {
@@ -113,10 +121,9 @@ export function DiagramNodeIcon(t0) {
     t1 = $[1];
   }
   const common = t1;
-  const t2 = `translate(${x} ${y}) scale(${scale})`;
-  let t3;
+  let t2;
   if ($[2] !== common || $[3] !== icon) {
-    t3 = icon === "certificate" && /*#__PURE__*/_jsxs(_Fragment, {
+    t2 = icon === "certificate" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M18 8h28l8 8v40H18z"
@@ -141,13 +148,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[2] = common;
     $[3] = icon;
-    $[4] = t3;
+    $[4] = t2;
   } else {
-    t3 = $[4];
+    t2 = $[4];
   }
-  let t4;
+  let t3;
   if ($[5] !== common || $[6] !== icon) {
-    t4 = icon === "cloudflare" && /*#__PURE__*/_jsxs(_Fragment, {
+    t3 = icon === "cloudflare" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M20 46h29c6 0 10-4 10-10s-4-10-10-10h-2C44 16 36 10 27 12c-8 1-14 8-14 17-6 1-10 5-10 11 0 4 3 6 8 6h9"
@@ -161,13 +168,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[5] = common;
     $[6] = icon;
-    $[7] = t4;
+    $[7] = t3;
   } else {
-    t4 = $[7];
+    t3 = $[7];
   }
-  let t5;
+  let t4;
   if ($[8] !== common || $[9] !== icon) {
-    t5 = icon === "dashboard" && /*#__PURE__*/_jsxs(_Fragment, {
+    t4 = icon === "dashboard" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("rect", {
         ...common,
         x: "8",
@@ -191,13 +198,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[8] = common;
     $[9] = icon;
-    $[10] = t5;
+    $[10] = t4;
   } else {
-    t5 = $[10];
+    t4 = $[10];
   }
-  let t6;
+  let t5;
   if ($[11] !== common || $[12] !== icon) {
-    t6 = icon === "file" && /*#__PURE__*/_jsxs(_Fragment, {
+    t5 = icon === "file" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M18 8h20l12 12v36H18z"
@@ -214,13 +221,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[11] = common;
     $[12] = icon;
-    $[13] = t6;
+    $[13] = t5;
   } else {
-    t6 = $[13];
+    t5 = $[13];
   }
-  let t7;
+  let t6;
   if ($[14] !== common || $[15] !== icon) {
-    t7 = icon === "git" && /*#__PURE__*/_jsxs(_Fragment, {
+    t6 = icon === "git" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M32 6l26 26-26 26L6 32z"
@@ -249,13 +256,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[14] = common;
     $[15] = icon;
-    $[16] = t7;
+    $[16] = t6;
   } else {
-    t7 = $[16];
+    t6 = $[16];
   }
-  let t8;
+  let t7;
   if ($[17] !== common || $[18] !== icon) {
-    t8 = icon === "gpu" && /*#__PURE__*/_jsxs(_Fragment, {
+    t7 = icon === "gpu" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("rect", {
         ...common,
         x: "14",
@@ -280,13 +287,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[17] = common;
     $[18] = icon;
-    $[19] = t8;
+    $[19] = t7;
   } else {
-    t8 = $[19];
+    t7 = $[19];
   }
-  let t9;
+  let t8;
   if ($[20] !== common || $[21] !== icon) {
-    t9 = icon === "user" && /*#__PURE__*/_jsxs(_Fragment, {
+    t8 = icon === "user" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("rect", {
         ...common,
         x: "10",
@@ -306,13 +313,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[20] = common;
     $[21] = icon;
-    $[22] = t9;
+    $[22] = t8;
   } else {
-    t9 = $[22];
+    t8 = $[22];
   }
-  let t10;
+  let t9;
   if ($[23] !== common || $[24] !== icon) {
-    t10 = icon === "brain" && /*#__PURE__*/_jsxs(_Fragment, {
+    t9 = icon === "brain" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M25 11c-8 0-13 5-13 12-5 2-8 7-8 13 0 8 6 14 14 14 2 5 7 8 13 8V11z"
@@ -335,13 +342,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[23] = common;
     $[24] = icon;
-    $[25] = t10;
+    $[25] = t9;
   } else {
-    t10 = $[25];
+    t9 = $[25];
   }
-  let t11;
+  let t10;
   if ($[26] !== common || $[27] !== icon) {
-    t11 = icon === "internet" && /*#__PURE__*/_jsxs(_Fragment, {
+    t10 = icon === "internet" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("circle", {
         ...common,
         cx: "32",
@@ -363,13 +370,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[26] = common;
     $[27] = icon;
-    $[28] = t11;
+    $[28] = t10;
   } else {
-    t11 = $[28];
+    t10 = $[28];
   }
-  let t12;
+  let t11;
   if ($[29] !== common || $[30] !== icon) {
-    t12 = icon === "istio" && /*#__PURE__*/_jsxs(_Fragment, {
+    t11 = icon === "istio" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M14 54L32 8l18 46z"
@@ -383,13 +390,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[29] = common;
     $[30] = icon;
-    $[31] = t12;
+    $[31] = t11;
   } else {
-    t12 = $[31];
+    t11 = $[31];
   }
-  let t13;
+  let t12;
   if ($[32] !== common || $[33] !== icon) {
-    t13 = icon === "kubernetes" && /*#__PURE__*/_jsxs(_Fragment, {
+    t12 = icon === "kubernetes" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M32 6l22 13v26L32 58 10 45V19z"
@@ -405,13 +412,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[32] = common;
     $[33] = icon;
-    $[34] = t13;
+    $[34] = t12;
   } else {
-    t13 = $[34];
+    t12 = $[34];
   }
-  let t14;
+  let t13;
   if ($[35] !== common || $[36] !== icon) {
-    t14 = icon === "logs" && /*#__PURE__*/_jsxs(_Fragment, {
+    t13 = icon === "logs" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("rect", {
         ...common,
         x: "12",
@@ -429,13 +436,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[35] = common;
     $[36] = icon;
-    $[37] = t14;
+    $[37] = t13;
   } else {
-    t14 = $[37];
+    t13 = $[37];
   }
-  let t15;
+  let t14;
   if ($[38] !== common || $[39] !== icon) {
-    t15 = icon === "metrics" && /*#__PURE__*/_jsxs(_Fragment, {
+    t14 = icon === "metrics" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M10 52h44"
@@ -449,13 +456,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[38] = common;
     $[39] = icon;
-    $[40] = t15;
+    $[40] = t14;
   } else {
-    t15 = $[40];
+    t14 = $[40];
   }
-  let t16;
+  let t15;
   if ($[41] !== common || $[42] !== icon) {
-    t16 = icon === "router" && /*#__PURE__*/_jsxs(_Fragment, {
+    t15 = icon === "router" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("rect", {
         ...common,
         x: "10",
@@ -476,13 +483,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[41] = common;
     $[42] = icon;
-    $[43] = t16;
+    $[43] = t15;
   } else {
-    t16 = $[43];
+    t15 = $[43];
   }
-  let t17;
+  let t16;
   if ($[44] !== common || $[45] !== icon) {
-    t17 = icon === "server" && /*#__PURE__*/_jsxs(_Fragment, {
+    t16 = icon === "server" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("rect", {
         ...common,
         x: "12",
@@ -511,13 +518,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[44] = common;
     $[45] = icon;
-    $[46] = t17;
+    $[46] = t16;
   } else {
-    t17 = $[46];
+    t16 = $[46];
   }
-  let t18;
+  let t17;
   if ($[47] !== common || $[48] !== icon) {
-    t18 = icon === "shield" && /*#__PURE__*/_jsxs(_Fragment, {
+    t17 = icon === "shield" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M32 6l22 9v15c0 14-8 23-22 28C18 53 10 44 10 30V15z"
@@ -528,13 +535,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[47] = common;
     $[48] = icon;
-    $[49] = t18;
+    $[49] = t17;
   } else {
-    t18 = $[49];
+    t17 = $[49];
   }
-  let t19;
+  let t18;
   if ($[50] !== common || $[51] !== icon) {
-    t19 = icon === "storage" && /*#__PURE__*/_jsxs(_Fragment, {
+    t18 = icon === "storage" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("ellipse", {
         ...common,
         cx: "32",
@@ -551,13 +558,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[50] = common;
     $[51] = icon;
-    $[52] = t19;
+    $[52] = t18;
   } else {
-    t19 = $[52];
+    t18 = $[52];
   }
-  let t20;
+  let t19;
   if ($[53] !== common || $[54] !== icon) {
-    t20 = icon === "trace" && /*#__PURE__*/_jsxs(_Fragment, {
+    t19 = icon === "trace" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("circle", {
         ...common,
         cx: "14",
@@ -585,13 +592,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[53] = common;
     $[54] = icon;
-    $[55] = t20;
+    $[55] = t19;
   } else {
-    t20 = $[55];
+    t19 = $[55];
   }
-  let t21;
+  let t20;
   if ($[56] !== common || $[57] !== icon) {
-    t21 = icon === "tunnel" && /*#__PURE__*/_jsxs(_Fragment, {
+    t20 = icon === "tunnel" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("circle", {
         ...common,
         cx: "22",
@@ -615,13 +622,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[56] = common;
     $[57] = icon;
-    $[58] = t21;
+    $[58] = t20;
   } else {
-    t21 = $[58];
+    t20 = $[58];
   }
-  let t22;
+  let t21;
   if ($[59] !== common || $[60] !== icon) {
-    t22 = icon === "eye" && /*#__PURE__*/_jsxs(_Fragment, {
+    t21 = icon === "eye" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M6 32c7-12 16-18 26-18s19 6 26 18c-7 12-16 18-26 18S13 44 6 32z"
@@ -634,13 +641,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[59] = common;
     $[60] = icon;
-    $[61] = t22;
+    $[61] = t21;
   } else {
-    t22 = $[61];
+    t21 = $[61];
   }
-  let t23;
+  let t22;
   if ($[62] !== common || $[63] !== icon) {
-    t23 = icon === "eye-off" && /*#__PURE__*/_jsxs(_Fragment, {
+    t22 = icon === "eye-off" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("path", {
         ...common,
         d: "M8 32c5-9 12-15 20-17"
@@ -660,13 +667,13 @@ export function DiagramNodeIcon(t0) {
     });
     $[62] = common;
     $[63] = icon;
-    $[64] = t23;
+    $[64] = t22;
   } else {
-    t23 = $[64];
+    t22 = $[64];
   }
-  let t24;
+  let t23;
   if ($[65] !== color || $[66] !== icon) {
-    t24 = icon === "ellipsis" && /*#__PURE__*/_jsxs(_Fragment, {
+    t23 = icon === "ellipsis" && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("circle", {
         cx: "16",
         cy: "32",
@@ -686,34 +693,39 @@ export function DiagramNodeIcon(t0) {
     });
     $[65] = color;
     $[66] = icon;
-    $[67] = t24;
+    $[67] = t23;
   } else {
-    t24 = $[67];
+    t23 = $[67];
   }
-  let t25;
-  if ($[68] !== icon || $[69] !== t10 || $[70] !== t11 || $[71] !== t12 || $[72] !== t13 || $[73] !== t14 || $[74] !== t15 || $[75] !== t16 || $[76] !== t17 || $[77] !== t18 || $[78] !== t19 || $[79] !== t2 || $[80] !== t20 || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t24 || $[85] !== t3 || $[86] !== t4 || $[87] !== t5 || $[88] !== t6 || $[89] !== t7 || $[90] !== t8 || $[91] !== t9) {
-    t25 = /*#__PURE__*/_jsxs("g", {
+  let t24;
+  if ($[68] !== icon || $[69] !== size || $[70] !== t10 || $[71] !== t11 || $[72] !== t12 || $[73] !== t13 || $[74] !== t14 || $[75] !== t15 || $[76] !== t16 || $[77] !== t17 || $[78] !== t18 || $[79] !== t19 || $[80] !== t2 || $[81] !== t20 || $[82] !== t21 || $[83] !== t22 || $[84] !== t23 || $[85] !== t3 || $[86] !== t4 || $[87] !== t5 || $[88] !== t6 || $[89] !== t7 || $[90] !== t8 || $[91] !== t9 || $[92] !== x || $[93] !== y) {
+    t24 = /*#__PURE__*/_jsxs("svg", {
       "data-diagram-node-icon": icon,
-      transform: t2,
-      children: [t3, t4, t5, t6, t7, t8, t9, t10, t11, t12, t13, t14, t15, t16, t17, t18, t19, t20, t21, t22, t23, t24]
+      x: x,
+      y: y,
+      width: size,
+      height: size,
+      viewBox: "0 0 64 64",
+      overflow: "visible",
+      children: [t2, t3, t4, t5, t6, t7, t8, t9, t10, t11, t12, t13, t14, t15, t16, t17, t18, t19, t20, t21, t22, t23]
     });
     $[68] = icon;
-    $[69] = t10;
-    $[70] = t11;
-    $[71] = t12;
-    $[72] = t13;
-    $[73] = t14;
-    $[74] = t15;
-    $[75] = t16;
-    $[76] = t17;
-    $[77] = t18;
-    $[78] = t19;
-    $[79] = t2;
-    $[80] = t20;
-    $[81] = t21;
-    $[82] = t22;
-    $[83] = t23;
-    $[84] = t24;
+    $[69] = size;
+    $[70] = t10;
+    $[71] = t11;
+    $[72] = t12;
+    $[73] = t13;
+    $[74] = t14;
+    $[75] = t15;
+    $[76] = t16;
+    $[77] = t17;
+    $[78] = t18;
+    $[79] = t19;
+    $[80] = t2;
+    $[81] = t20;
+    $[82] = t21;
+    $[83] = t22;
+    $[84] = t23;
     $[85] = t3;
     $[86] = t4;
     $[87] = t5;
@@ -721,14 +733,16 @@ export function DiagramNodeIcon(t0) {
     $[89] = t7;
     $[90] = t8;
     $[91] = t9;
-    $[92] = t25;
+    $[92] = x;
+    $[93] = y;
+    $[94] = t24;
   } else {
-    t25 = $[92];
+    t24 = $[94];
   }
-  return t25;
+  return t24;
 }
 export function GroupRect(t0) {
-  const $ = _c(79);
+  const $ = _c(74);
   const {
     layout,
     progress,
@@ -766,9 +780,9 @@ export function GroupRect(t0) {
     group,
     rect: box,
     band,
+    separator,
     label
   } = layout;
-  const rx = group.rx ?? 12;
   const frame = group.frame ?? "solid";
   const fill = group.fill ?? "surface";
   let t4;
@@ -806,123 +820,117 @@ export function GroupRect(t0) {
     t6 = $[14];
   }
   const texturePattern = t6;
-  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;
-  if ($[18] !== opacity) {
-    t8 = {
+  let t7;
+  if ($[15] !== opacity) {
+    t7 = {
       opacity
     };
-    $[18] = opacity;
-    $[19] = t8;
+    $[15] = opacity;
+    $[16] = t7;
   } else {
-    t8 = $[19];
+    t7 = $[16];
   }
-  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", {
+  const t8 = hasFill ? surfaceFill : "none";
+  const t9 = hasFrame ? stroke : "none";
+  const t10 = hasFrame ? 1 : 0;
+  let t11;
+  if ($[17] !== box.h || $[18] !== box.w || $[19] !== box.x || $[20] !== box.y || $[21] !== dasharray || $[22] !== group.id || $[23] !== group.tone || $[24] !== t10 || $[25] !== t8 || $[26] !== t9) {
+    t11 = /*#__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,
+      rx: GROUP_RADIUS,
+      fill: t8,
+      stroke: t9,
+      strokeWidth: t10,
       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];
+    $[17] = box.h;
+    $[18] = box.w;
+    $[19] = box.x;
+    $[20] = box.y;
+    $[21] = dasharray;
+    $[22] = group.id;
+    $[23] = group.tone;
+    $[24] = t10;
+    $[25] = t8;
+    $[26] = t9;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
   }
-  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", {
+  let t12;
+  if ($[28] !== box.h || $[29] !== box.w || $[30] !== box.x || $[31] !== box.y || $[32] !== group.id || $[33] !== texture || $[34] !== texturePattern) {
+    t12 = 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,
+      rx: GROUP_RADIUS,
       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;
+    $[28] = box.h;
+    $[29] = box.w;
+    $[30] = box.x;
+    $[31] = box.y;
+    $[32] = group.id;
+    $[33] = texture;
+    $[34] = texturePattern;
+    $[35] = t12;
+  } else {
+    t12 = $[35];
+  }
+  let t13;
+  if ($[36] !== band || $[37] !== group.id || $[38] !== hasFill || $[39] !== surfaceFill) {
+    t13 = band && /*#__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"
+    });
+    $[36] = band;
+    $[37] = group.id;
+    $[38] = hasFill;
+    $[39] = surfaceFill;
     $[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"
-      }), /*#__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
-      })]
+  if ($[41] !== dasharray || $[42] !== group.id || $[43] !== separator || $[44] !== stroke) {
+    t14 = separator && /*#__PURE__*/_jsx("line", {
+      "data-diagram-group-title-separator": group.id,
+      x1: separator[0].x,
+      y1: separator[0].y,
+      x2: separator[1].x,
+      y2: separator[1].y,
+      stroke: stroke,
+      strokeWidth: 1,
+      strokeDasharray: dasharray
     });
-    $[41] = band;
-    $[42] = dasharray;
-    $[43] = group.id;
-    $[44] = hasFill;
-    $[45] = stroke;
-    $[46] = surfaceFill;
-    $[47] = t14;
+    $[41] = dasharray;
+    $[42] = group.id;
+    $[43] = separator;
+    $[44] = stroke;
+    $[45] = t14;
   } else {
-    t14 = $[47];
+    t14 = $[45];
   }
   let t15;
-  if ($[48] !== dasharray || $[49] !== dividerKeys || $[50] !== group.accent || $[51] !== group.id || $[52] !== layout.dividers || $[53] !== themeAccent) {
+  if ($[46] !== dasharray || $[47] !== group.accent || $[48] !== group.id || $[49] !== layout.dividers || $[50] !== themeAccent) {
     let t16;
-    if ($[55] !== dasharray || $[56] !== dividerKeys || $[57] !== group.accent || $[58] !== group.id || $[59] !== themeAccent) {
+    if ($[52] !== dasharray || $[53] !== group.accent || $[54] !== group.id || $[55] !== themeAccent) {
       t16 = (t17, i) => {
         const [from, to] = t17;
-        const key = dividerKeys[i] ?? `${i}`;
         return /*#__PURE__*/_jsx("line", {
           x1: from.x,
           y1: from.y,
@@ -931,31 +939,29 @@ export function GroupRect(t0) {
           stroke: group.accent ? themeAccent : DIAGRAM_NEUTRAL,
           strokeWidth: 1,
           strokeDasharray: dasharray,
-          "data-diagram-group-divider": `${group.id}:${key}`
-        }, key);
+          "data-diagram-group-divider": `${group.id}:${i}`
+        }, i);
       };
-      $[55] = dasharray;
-      $[56] = dividerKeys;
-      $[57] = group.accent;
-      $[58] = group.id;
-      $[59] = themeAccent;
-      $[60] = t16;
+      $[52] = dasharray;
+      $[53] = group.accent;
+      $[54] = group.id;
+      $[55] = themeAccent;
+      $[56] = t16;
     } else {
-      t16 = $[60];
+      t16 = $[56];
     }
     t15 = layout.dividers.map(t16);
-    $[48] = dasharray;
-    $[49] = dividerKeys;
-    $[50] = group.accent;
-    $[51] = group.id;
-    $[52] = layout.dividers;
-    $[53] = themeAccent;
-    $[54] = t15;
+    $[46] = dasharray;
+    $[47] = group.accent;
+    $[48] = group.id;
+    $[49] = layout.dividers;
+    $[50] = themeAccent;
+    $[51] = t15;
   } else {
-    t15 = $[54];
+    t15 = $[51];
   }
   let t16;
-  if ($[61] !== firstLabel || $[62] !== group.id || $[63] !== label) {
+  if ($[57] !== firstLabel || $[58] !== group.id || $[59] !== label) {
     t16 = firstLabel && /*#__PURE__*/_jsx("text", {
       "data-diagram-group-label": group.id,
       x: firstLabel.x,
@@ -969,62 +975,49 @@ export function GroupRect(t0) {
         runs: label
       })
     });
-    $[61] = firstLabel;
-    $[62] = group.id;
-    $[63] = label;
-    $[64] = t16;
+    $[57] = firstLabel;
+    $[58] = group.id;
+    $[59] = label;
+    $[60] = t16;
   } else {
-    t16 = $[64];
+    t16 = $[60];
   }
   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, {
+  if ($[61] !== group.id || $[62] !== group.ports || $[63] !== layout.ports) {
+    t17 = /*#__PURE__*/_jsx(PortMarkers, {
       ownerId: group.id,
-      ports: t17,
+      ports: layout.ports,
       declared: group.ports
     });
-    $[67] = group.id;
-    $[68] = group.ports;
-    $[69] = t17;
-    $[70] = t18;
+    $[61] = group.id;
+    $[62] = group.ports;
+    $[63] = layout.ports;
+    $[64] = t17;
   } else {
-    t18 = $[70];
+    t17 = $[64];
   }
-  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]
+  let t18;
+  if ($[65] !== t11 || $[66] !== t12 || $[67] !== t13 || $[68] !== t14 || $[69] !== t15 || $[70] !== t16 || $[71] !== t17 || $[72] !== t7) {
+    t18 = /*#__PURE__*/_jsxs(motion.g, {
+      style: t7,
+      children: [t11, t12, t13, t14, t15, t16, t17]
     });
-    $[71] = t12;
-    $[72] = t13;
-    $[73] = t14;
-    $[74] = t15;
-    $[75] = t16;
-    $[76] = t18;
-    $[77] = t8;
-    $[78] = t19;
-  } else {
-    t19 = $[78];
-  }
-  return t19;
-}
-function _temp2(value_0) {
-  return `col:${value_0}`;
-}
-function _temp(value) {
-  return `row:${value}`;
+    $[65] = t11;
+    $[66] = t12;
+    $[67] = t13;
+    $[68] = t14;
+    $[69] = t15;
+    $[70] = t16;
+    $[71] = t17;
+    $[72] = t7;
+    $[73] = t18;
+  } else {
+    t18 = $[73];
+  }
+  return t18;
 }
 export function EdgeStroke(t0) {
-  const $ = _c(36);
+  const $ = _c(35);
   const {
     d,
     edge,
@@ -1058,7 +1051,7 @@ export function EdgeStroke(t0) {
   const markerId = t2;
   const direction = edge.headless ? "none" : edge.direction ?? "forward";
   const markerUrl = `url(#${markerId})`;
-  const strokeWidth = edge.strokeWidth ?? 1.5;
+  const strokeWidth = EDGE_STROKE_WIDTH[edge.weight ?? "regular"];
   let t3;
   if ($[6] !== edge) {
     t3 = edgeDasharray(edge);
@@ -1136,14 +1129,13 @@ export function EdgeStroke(t0) {
     t15 = $[21];
   }
   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) {
+  if ($[22] !== d || $[23] !== dasharray || $[24] !== direction || $[25] !== edge.channel || $[26] !== edge.lineStyle || $[27] !== stroke || $[28] !== strokeWidth || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== 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": t12,
-      "data-diagram-edge-route": edge.route,
       d: d,
       fill: "none",
       stroke: stroke,
@@ -1160,17 +1152,16 @@ export function EdgeStroke(t0) {
     $[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];
+    $[27] = stroke;
+    $[28] = strokeWidth;
+    $[29] = t11;
+    $[30] = t12;
+    $[31] = t13;
+    $[32] = t14;
+    $[33] = t15;
+    $[34] = t16;
+  } else {
+    t16 = $[34];
   }
   return t16;
 }
@@ -1270,7 +1261,7 @@ export function EdgeOverlay(t0) {
   return t7;
 }
 function EdgeLabel(t0) {
-  const $ = _c(27);
+  const $ = _c(23);
   const {
     edge,
     label,
@@ -1295,11 +1286,9 @@ function EdgeLabel(t0) {
     t1 = $[1];
   }
   let t2;
-  if ($[2] !== box || $[3] !== edge.from || $[4] !== edge.labelFrame || $[5] !== edge.labelLineGap || $[6] !== edge.to || $[7] !== fill || $[8] !== label.segment) {
+  if ($[2] !== box || $[3] !== edge.from || $[4] !== edge.labelFrame || $[5] !== edge.to || $[6] !== fill) {
     t2 = edge.labelFrame && /*#__PURE__*/_jsx("rect", {
       "data-diagram-edge-label-frame": `${edge.from}->${edge.to}`,
-      "data-diagram-edge-label-segment": label.segment,
-      "data-diagram-edge-label-line-gap": edge.labelLineGap,
       x: box.x,
       y: box.y,
       width: box.w,
@@ -1312,32 +1301,28 @@ function EdgeLabel(t0) {
     $[2] = box;
     $[3] = edge.from;
     $[4] = edge.labelFrame;
-    $[5] = edge.labelLineGap;
-    $[6] = edge.to;
-    $[7] = fill;
-    $[8] = label.segment;
-    $[9] = t2;
+    $[5] = edge.to;
+    $[6] = fill;
+    $[7] = t2;
   } else {
-    t2 = $[9];
+    t2 = $[7];
   }
   const t3 = `${edge.from}->${edge.to}`;
   const t4 = FONT_FAMILY[first.font.face];
   let t5;
-  if ($[10] !== label.text) {
+  if ($[8] !== label.text) {
     t5 = /*#__PURE__*/_jsx(RunSpans, {
       runs: label.text
     });
-    $[10] = label.text;
-    $[11] = t5;
+    $[8] = label.text;
+    $[9] = t5;
   } else {
-    t5 = $[11];
+    t5 = $[9];
   }
   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) {
+  if ($[10] !== fill || $[11] !== first.anchor || $[12] !== first.font.size || $[13] !== first.x || $[14] !== first.y || $[15] !== t3 || $[16] !== t4 || $[17] !== 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,
@@ -1346,42 +1331,35 @@ function EdgeLabel(t0) {
       fill: fill,
       children: t5
     });
-    $[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];
+    $[10] = fill;
+    $[11] = first.anchor;
+    $[12] = first.font.size;
+    $[13] = first.x;
+    $[14] = first.y;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
   }
   let t7;
-  if ($[23] !== t1 || $[24] !== t2 || $[25] !== t6) {
+  if ($[19] !== t1 || $[20] !== t2 || $[21] !== t6) {
     t7 = /*#__PURE__*/_jsxs(motion.g, {
       style: t1,
       children: [t2, t6]
     });
-    $[23] = t1;
-    $[24] = t2;
-    $[25] = t6;
-    $[26] = t7;
+    $[19] = t1;
+    $[20] = t2;
+    $[21] = t6;
+    $[22] = t7;
   } else {
-    t7 = $[26];
+    t7 = $[22];
   }
   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(35);
+  const $ = _c(22);
   const {
     edge,
     badge,
@@ -1393,65 +1371,23 @@ function EdgeBadge(t0) {
     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 {
-    t3 = $[2];
-  }
-  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 {
-    t4 = $[6];
-  }
-  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 = {
+  const [first] = text;
+  const t1 = `${edge.from}->${edge.to}`;
+  let t2;
+  if ($[0] !== opacity) {
+    t2 = {
       opacity
     };
-    $[10] = opacity;
-    $[11] = t7;
+    $[0] = opacity;
+    $[1] = t2;
   } else {
-    t7 = $[11];
+    t2 = $[1];
   }
-  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,
+  let t3;
+  if ($[2] !== box.h || $[3] !== box.w || $[4] !== box.x || $[5] !== box.y || $[6] !== fill) {
+    t3 = /*#__PURE__*/_jsx("rect", {
+      x: box.x,
+      y: box.y,
       width: box.w,
       height: box.h,
       rx: 10,
@@ -1459,36 +1395,34 @@ function EdgeBadge(t0) {
       stroke: fill,
       strokeWidth: 1
     });
-    $[12] = box.h;
-    $[13] = box.w;
-    $[14] = fill;
-    $[15] = t8;
-    $[16] = t9;
-    $[17] = t10;
+    $[2] = box.h;
+    $[3] = box.w;
+    $[4] = box.x;
+    $[5] = box.y;
+    $[6] = fill;
+    $[7] = t3;
   } else {
-    t10 = $[17];
+    t3 = $[7];
   }
-  let t11;
-  if ($[18] !== edge.badgeIcon || $[19] !== fill || $[20] !== icon || $[21] !== origin.x || $[22] !== origin.y) {
-    t11 = edge.badgeIcon && icon && /*#__PURE__*/_jsx(DiagramNodeIcon, {
+  let t4;
+  if ($[8] !== edge.badgeIcon || $[9] !== fill || $[10] !== icon) {
+    t4 = edge.badgeIcon && icon && /*#__PURE__*/_jsx(DiagramNodeIcon, {
       icon: edge.badgeIcon,
-      x: icon.x - origin.x,
-      y: icon.y - origin.y,
+      x: icon.x,
+      y: icon.y,
       size: icon.w,
       color: fill
     });
-    $[18] = edge.badgeIcon;
-    $[19] = fill;
-    $[20] = icon;
-    $[21] = origin.x;
-    $[22] = origin.y;
-    $[23] = t11;
+    $[8] = edge.badgeIcon;
+    $[9] = fill;
+    $[10] = icon;
+    $[11] = t4;
   } else {
-    t11 = $[23];
+    t4 = $[11];
   }
-  let t12;
-  if ($[24] !== fill || $[25] !== first || $[26] !== local) {
-    t12 = first && /*#__PURE__*/_jsx("text", {
+  let t5;
+  if ($[12] !== fill || $[13] !== first || $[14] !== text) {
+    t5 = first && /*#__PURE__*/_jsx("text", {
       x: first.x,
       y: first.y,
       textAnchor: first.anchor,
@@ -1497,35 +1431,33 @@ function EdgeBadge(t0) {
       fontWeight: first.font.weight,
       fill: fill,
       children: /*#__PURE__*/_jsx(RunSpans, {
-        runs: local
+        runs: text
       })
     });
-    $[24] = fill;
-    $[25] = first;
-    $[26] = local;
-    $[27] = t12;
+    $[12] = fill;
+    $[13] = first;
+    $[14] = text;
+    $[15] = t5;
   } else {
-    t12 = $[27];
+    t5 = $[15];
   }
-  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]
+  let t6;
+  if ($[16] !== t1 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(motion.g, {
+      "data-diagram-edge-badge": t1,
+      style: t2,
+      children: [t3, t4, t5]
     });
-    $[28] = t10;
-    $[29] = t11;
-    $[30] = t12;
-    $[31] = t5;
-    $[32] = t6;
-    $[33] = t7;
-    $[34] = t13;
+    $[16] = t1;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
   } else {
-    t13 = $[34];
+    t6 = $[21];
   }
-  return t13;
+  return t6;
 }
 export function PortMarkers(t0) {
   const $ = _c(11);