@weasel-js/diagram 1.13.0 → 1.14.0

package/dist/{chunk-L4H444QI.js → chunk-VB6HUKNG.js}

@@ -1,57 +1,100 @@
-import { AUTO_POSE_DESCRIPTOR, rotatePoint, rectPath, polygonFromPoints, PATH_M, PATH_L, PATH_C, flattenCubic, PATH_Q, PATH_Z, PathBuilder, pointAlongPath } from '@weasel-js/core/math';
-import { transformPath, ellipsePath, PATH_M as PATH_M$1, PATH_CMD_LENGTHS, measurePath, forEachSegment, PATH_L as PATH_L$1, nearestOnLine, PATH_Q as PATH_Q$1, nearestOnQuadratic, PATH_C as PATH_C$1, nearestOnCubic } from '@weasel-js/geom';
+import { boundsOfPath, transformPath, ellipsePath, polylineFromPoints, pathFromD, worldCoords, PATH_M as PATH_M$1, PATH_CMD_LENGTHS, measurePath, forEachSegment, PATH_L as PATH_L$1, nearestOnLine, PATH_Q as PATH_Q$1, nearestOnQuadratic, PATH_C as PATH_C$1, nearestOnCubic } from '@weasel-js/geom';
+import { PathBuilder, rectPath, polygonFromPoints, AUTO_POSE_DESCRIPTOR, rotatePoint, PATH_M, PATH_L, PATH_C, flattenCubic, PATH_Q, PATH_Z, pointAlongPath } from '@weasel-js/core/math';
 import { cssFamilyName } from '@weasel-js/font/metrics';
 import { createSimulation } from '@weasel-js/simulation';
 
-// src/outline.ts
+// src/outlines/fromD.ts
+var unitMatrix = (b) => [b.width, 0, 0, b.height, b.x, b.y];
+function outlineFromD(d, opts = {}) {
+  const path = pathFromD(d);
+  const detail = opts.detail === void 0 ? void 0 : pathFromD(opts.detail);
+  const unit = opts.content ?? { x: 0, y: 0, width: 1, height: 1 };
+  return {
+    path: (b) => transformPath(path, unitMatrix(b)),
+    ...detail ? { detail: (b) => transformPath(detail, unitMatrix(b)) } : {},
+    content: (b) => ({
+      x: b.x + unit.x * b.width,
+      y: b.y + unit.y * b.height,
+      width: unit.width * b.width,
+      height: unit.height * b.height
+    }),
+    boxForContent: (c) => ({ width: c.width / unit.width, height: c.height / unit.height })
+  };
+}
 var LEAN = 0.2;
 var POINT = 0.2;
 var KAPPA = 0.5522847498307936;
-function outlinePath(outline, bounds) {
-  const { x, y, width: w, height: h } = bounds;
-  if (w <= 0 || h <= 0) return rectPath(x, y, Math.max(w, 0), Math.max(h, 0));
-  if (typeof outline !== "string") return transformPath(outline, [w, 0, 0, h, x, y]);
-  switch (outline) {
-    case "rect":
-      return rectPath(x, y, w, h);
-    case "diamond":
-      return polygonFromPoints([
-        { x: x + w / 2, y },
-        { x: x + w, y: y + h / 2 },
-        { x: x + w / 2, y: y + h },
-        { x, y: y + h / 2 }
-      ]);
-    case "parallelogram": {
-      const lean = Math.min(w * LEAN, w / 2);
-      return polygonFromPoints([
-        { x: x + lean, y },
-        { x: x + w, y },
-        { x: x + w - lean, y: y + h },
-        { x, y: y + h }
-      ]);
-    }
-    case "trapezoid":
-      return polygonFromPoints([
-        { x, y: y + h / 4 },
-        { x: x + w, y },
-        { x: x + w, y: y + h },
-        { x, y: y + h * 3 / 4 }
-      ]);
-    case "hexagon":
-      return polygonFromPoints([
-        { x, y: y + h / 2 },
-        { x: x + w * POINT, y },
-        { x: x + w * (1 - POINT), y },
-        { x: x + w, y: y + h / 2 },
-        { x: x + w * (1 - POINT), y: y + h },
-        { x: x + w * POINT, y: y + h }
-      ]);
-    case "stadium":
-      return stadiumPath(x, y, w, h);
-    case "ellipse":
-      return ellipsePath(bounds);
-  }
-}
+var rect = {
+  path: ({ x, y, width, height }) => rectPath(x, y, width, height)
+};
+var diamond = {
+  path: ({ x, y, width: w, height: h }) => polygonFromPoints([
+    { x: x + w / 2, y },
+    { x: x + w, y: y + h / 2 },
+    { x: x + w / 2, y: y + h },
+    { x, y: y + h / 2 }
+  ]),
+  // Half the width and half the height, centered: the inscribed rect.
+  content: ({ x, y, width: w, height: h }) => ({ x: x + w / 4, y: y + h / 4, width: w / 2, height: h / 2 }),
+  boxForContent: (c) => ({ width: c.width * 2, height: c.height * 2 })
+};
+var leanOf = (w) => Math.min(w * LEAN, w / 2);
+var parallelogram = {
+  path: ({ x, y, width: w, height: h }) => {
+    const lean = leanOf(w);
+    return polygonFromPoints([
+      { x: x + lean, y },
+      { x: x + w, y },
+      { x: x + w - lean, y: y + h },
+      { x, y: y + h }
+    ]);
+  },
+  content: ({ x, y, width: w, height: h }) => {
+    const lean = leanOf(w);
+    return { x: x + lean, y, width: Math.max(w - lean * 2, 0), height: h };
+  },
+  boxForContent: (c) => ({ width: c.width / (1 - LEAN * 2), height: c.height })
+};
+var trapezoid = {
+  path: ({ x, y, width: w, height: h }) => polygonFromPoints([
+    { x, y: y + h / 4 },
+    { x: x + w, y },
+    { x: x + w, y: y + h },
+    { x, y: y + h * 3 / 4 }
+  ]),
+  content: ({ x, y, width: w, height: h }) => ({ x, y: y + h / 4, width: w, height: h / 2 }),
+  boxForContent: (c) => ({ width: c.width, height: c.height * 2 })
+};
+var hexagon = {
+  path: ({ x, y, width: w, height: h }) => polygonFromPoints([
+    { x, y: y + h / 2 },
+    { x: x + w * POINT, y },
+    { x: x + w * (1 - POINT), y },
+    { x: x + w, y: y + h / 2 },
+    { x: x + w * (1 - POINT), y: y + h },
+    { x: x + w * POINT, y: y + h }
+  ]),
+  content: ({ x, y, width: w, height: h }) => ({ x: x + w * POINT, y, width: w * (1 - POINT * 2), height: h }),
+  boxForContent: (c) => ({ width: c.width / (1 - POINT * 2), height: c.height })
+};
+var ellipse = {
+  path: ellipsePath,
+  // The inscribed rect of an ellipse is its box over root two, centered.
+  content: ({ x, y, width: w, height: h }) => {
+    const cw = w / Math.SQRT2;
+    const ch = h / Math.SQRT2;
+    return { x: x + (w - cw) / 2, y: y + (h - ch) / 2, width: cw, height: ch };
+  },
+  boxForContent: (c) => ({ width: c.width * Math.SQRT2, height: c.height * Math.SQRT2 })
+};
+var stadium = {
+  path: ({ x, y, width: w, height: h }) => stadiumPath(x, y, w, h),
+  content: ({ x, y, width: w, height: h }) => {
+    const r = Math.min(w, h) / 2;
+    return w >= h ? { x: x + r, y, width: Math.max(w - r * 2, 0), height: h } : { x, y: y + r, width: w, height: Math.max(h - r * 2, 0) };
+  },
+  boxForContent: (c) => ({ width: c.width + c.height, height: c.height })
+};
 function stadiumPath(x, y, w, h) {
   const r = Math.min(w, h) / 2;
   const k = r * KAPPA;
@@ -71,51 +114,462 @@ function stadiumPath(x, y, w, h) {
   const midX = x + w / 2;
   return b.moveTo(right, top).lineTo(right, bottom).curveTo(right, bottom + k, midX + k, y + h, midX, y + h).curveTo(midX - k, y + h, left, bottom + k, left, bottom).lineTo(left, top).curveTo(left, top - k, midX - k, y, midX, y).curveTo(midX + k, y, right, top - k, right, top).close().build();
 }
+var FLOWCHART_OUTLINES = { rect, diamond, stadium, ellipse, parallelogram, trapezoid, hexagon };
+var capOf = (w, h) => Math.min(h * 0.15, w * 0.25);
+var cylinder = {
+  path: ({ x, y, width: w, height: h }) => {
+    const ry = capOf(w, h);
+    const rx = w / 2;
+    const cx = x + rx;
+    const top = y + ry;
+    const bottom = y + h - ry;
+    return new PathBuilder().moveTo(x, top).curveTo(x, top - ry * KAPPA, cx - rx * KAPPA, y, cx, y).curveTo(cx + rx * KAPPA, y, x + w, top - ry * KAPPA, x + w, top).lineTo(x + w, bottom).curveTo(x + w, bottom + ry * KAPPA, cx + rx * KAPPA, y + h, cx, y + h).curveTo(cx - rx * KAPPA, y + h, x, bottom + ry * KAPPA, x, bottom).close().build();
+  },
+  detail: ({ x, y, width: w, height: h }) => {
+    const ry = capOf(w, h);
+    const rx = w / 2;
+    const cx = x + rx;
+    const top = y + ry;
+    return new PathBuilder().moveTo(x, top).curveTo(x, top + ry * KAPPA, cx - rx * KAPPA, top + ry, cx, top + ry).curveTo(cx + rx * KAPPA, top + ry, x + w, top + ry * KAPPA, x + w, top).build();
+  },
+  content: ({ x, y, width: w, height: h }) => {
+    const ry = capOf(w, h);
+    return { x, y: y + ry * 2, width: w, height: Math.max(h - ry * 3, 0) };
+  },
+  boxForContent: (c) => ({ width: c.width, height: c.height / 0.55 })
+};
+var WAVE = 0.1;
+var WAVE_CONTROL = 6 / Math.sqrt(3);
+var document = {
+  path: ({ x, y, width: w, height: h }) => {
+    const a = h * WAVE;
+    const mid = y + h - a;
+    const k = a * WAVE_CONTROL;
+    return new PathBuilder().moveTo(x, y).lineTo(x + w, y).lineTo(x + w, mid).curveTo(x + w * 2 / 3, mid - k, x + w / 3, mid + k, x, mid).close().build();
+  },
+  content: ({ x, y, width: w, height: h }) => ({ x, y, width: w, height: h * (1 - WAVE * 2) }),
+  boxForContent: (c) => ({ width: c.width, height: c.height / (1 - WAVE * 2) })
+};
+var MAX_FOLD = 20;
+var foldOf = (w, h) => Math.min(MAX_FOLD, Math.min(w, h) / 4);
+var note = {
+  path: ({ x, y, width: w, height: h }) => {
+    const f = foldOf(w, h);
+    return polygonFromPoints([
+      { x, y },
+      { x: x + w - f, y },
+      { x: x + w, y: y + f },
+      { x: x + w, y: y + h },
+      { x, y: y + h }
+    ]);
+  },
+  detail: ({ x, y, width: w, height: h }) => {
+    const f = foldOf(w, h);
+    return polylineFromPoints([{ x: x + w - f, y }, { x: x + w - f, y: y + f }, { x: x + w, y: y + f }]);
+  },
+  content: ({ x, y, width: w, height: h }) => {
+    const f = foldOf(w, h);
+    return { x, y: y + f, width: w, height: h - f };
+  },
+  boxForContent: (c) => ({ width: c.width, height: c.height + MAX_FOLD })
+};
+var MAX_TAB = 16;
+var tabOf = (w, h) => {
+  const t = Math.min(MAX_TAB, h * 0.2);
+  return { t, tw: Math.max(Math.min(w * 0.4, w - t * 2), 0) };
+};
+var folder = {
+  path: ({ x, y, width: w, height: h }) => {
+    const { t, tw } = tabOf(w, h);
+    return polygonFromPoints([
+      { x, y },
+      { x: x + tw, y },
+      { x: x + tw + t, y: y + t },
+      { x: x + w, y: y + t },
+      { x: x + w, y: y + h },
+      { x, y: y + h }
+    ]);
+  },
+  detail: ({ x, y, width: w, height: h }) => {
+    const { t, tw } = tabOf(w, h);
+    return polylineFromPoints([{ x, y: y + t }, { x: x + tw + t, y: y + t }]);
+  },
+  content: ({ x, y, width: w, height: h }) => {
+    const { t } = tabOf(w, h);
+    return { x, y: y + t, width: w, height: h - t };
+  },
+  boxForContent: (c) => ({ width: c.width, height: c.height + MAX_TAB })
+};
+var DEPTH = 0.15;
+function insetByShorter(c, k) {
+  const d = k * Math.min(c.width, c.height) / (1 - k);
+  return { width: c.width + d, height: c.height + d };
+}
+var cube = {
+  path: ({ x, y, width: w, height: h }) => {
+    const d = Math.min(w, h) * DEPTH;
+    return polygonFromPoints([
+      { x, y: y + d },
+      { x: x + d, y },
+      { x: x + w, y },
+      { x: x + w, y: y + h - d },
+      { x: x + w - d, y: y + h },
+      { x, y: y + h }
+    ]);
+  },
+  detail: ({ x, y, width: w, height: h }) => {
+    const d = Math.min(w, h) * DEPTH;
+    return new PathBuilder().moveTo(x, y + d).lineTo(x + w - d, y + d).lineTo(x + w, y).moveTo(x + w - d, y + d).lineTo(x + w - d, y + h).build();
+  },
+  content: ({ x, y, width: w, height: h }) => {
+    const d = Math.min(w, h) * DEPTH;
+    return { x, y: y + d, width: w - d, height: h - d };
+  },
+  boxForContent: (c) => insetByShorter(c, DEPTH)
+};
+var STORAGE_OUTLINES = { cylinder, document, note, folder, cube };
+
+// src/outlines/figures.ts
+var MAX_RADIUS = 10;
+var radiusOf = (w, h) => Math.min(MAX_RADIUS, w / 6, h / 6);
+var BITE = 1 - Math.SQRT1_2;
+var roundRect = {
+  path: ({ x, y, width: w, height: h }) => {
+    const r = radiusOf(w, h);
+    const k = r * KAPPA;
+    return new PathBuilder().moveTo(x + r, y).lineTo(x + w - r, y).curveTo(x + w - r + k, y, x + w, y + r - k, x + w, y + r).lineTo(x + w, y + h - r).curveTo(x + w, y + h - r + k, x + w - r + k, y + h, x + w - r, y + h).lineTo(x + r, y + h).curveTo(x + r - k, y + h, x, y + h - r + k, x, y + h - r).lineTo(x, y + r).curveTo(x, y + r - k, x + r - k, y, x + r, y).close().build();
+  },
+  content: ({ x, y, width: w, height: h }) => {
+    const i = radiusOf(w, h) * BITE;
+    return { x: x + i, y: y + i, width: w - i * 2, height: h - i * 2 };
+  },
+  boxForContent: (c) => ({ width: c.width + MAX_RADIUS * BITE * 2, height: c.height + MAX_RADIUS * BITE * 2 })
+};
+var triangle = {
+  path: ({ x, y, width: w, height: h }) => polygonFromPoints([
+    { x: x + w / 2, y },
+    { x: x + w, y: y + h },
+    { x, y: y + h }
+  ]),
+  // The largest rect in a triangle: half its width and half its height, on the base.
+  content: ({ x, y, width: w, height: h }) => ({ x: x + w / 4, y: y + h / 2, width: w / 2, height: h / 2 }),
+  boxForContent: (c) => ({ width: c.width * 2, height: c.height * 2 })
+};
+var CUT = 1 - Math.SQRT1_2;
+var octagon = {
+  path: ({ x, y, width: w, height: h }) => {
+    const c = Math.min(w, h) * CUT;
+    return polygonFromPoints([
+      { x: x + c, y },
+      { x: x + w - c, y },
+      { x: x + w, y: y + c },
+      { x: x + w, y: y + h - c },
+      { x: x + w - c, y: y + h },
+      { x: x + c, y: y + h },
+      { x, y: y + h - c },
+      { x, y: y + c }
+    ]);
+  },
+  // Its corners sit on the cuts' midpoints.
+  content: ({ x, y, width: w, height: h }) => {
+    const c = Math.min(w, h) * CUT;
+    return { x: x + c / 2, y: y + c / 2, width: w - c, height: h - c };
+  },
+  boxForContent: (c) => insetByShorter(c, CUT)
+};
+function arc(b, cx, cy, r, from, sweep) {
+  const n = Math.ceil(Math.abs(sweep) / (Math.PI / 2));
+  const step = sweep / n;
+  const k = 4 / 3 * Math.tan(step / 4) * r;
+  for (let i = 0; i < n; i++) {
+    const a0 = from + step * i;
+    const a1 = a0 + step;
+    const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0);
+    const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
+    b.curveTo(x0 - k * Math.sin(a0), y0 + k * Math.cos(a0), x1 + k * Math.sin(a1), y1 - k * Math.cos(a1), x1, y1);
+  }
+}
+var CLOUD_JOINS = [178, 222, 268, 318, 2, 46, 92, 136];
+var CLOUD_RX = 0.36;
+var CLOUD_RY = 0.3;
+var CLOUD = (() => {
+  const pts = CLOUD_JOINS.map((deg) => {
+    const t = deg * Math.PI / 180;
+    return { x: 0.5 + CLOUD_RX * Math.cos(t), y: 0.5 + CLOUD_RY * Math.sin(t) };
+  });
+  const b = new PathBuilder().moveTo(pts[0].x, pts[0].y);
+  pts.forEach((p, i) => {
+    const q = pts[(i + 1) % pts.length];
+    const mx = (p.x + q.x) / 2, my = (p.y + q.y) / 2;
+    const r = Math.hypot(q.x - p.x, q.y - p.y) / 2;
+    const from = Math.atan2(p.y - my, p.x - mx);
+    const out = (s) => Math.hypot(mx + r * Math.cos(from + s) - 0.5, my + r * Math.sin(from + s) - 0.5);
+    arc(b, mx, my, r, from, out(Math.PI / 2) > out(-Math.PI / 2) ? Math.PI : -Math.PI);
+  });
+  const raw = b.close().build();
+  const box = boundsOfPath(raw);
+  const fit = (p) => ({ x: (p.x - box.x) / box.width, y: (p.y - box.y) / box.height });
+  const lo = fit({ x: 0.5 - CLOUD_RX * 0.85 / Math.SQRT2, y: 0.5 - CLOUD_RY * 0.85 / Math.SQRT2 });
+  const hi = fit({ x: 0.5 + CLOUD_RX * 0.85 / Math.SQRT2, y: 0.5 + CLOUD_RY * 0.85 / Math.SQRT2 });
+  return {
+    path: transformPath(raw, [1 / box.width, 0, 0, 1 / box.height, -box.x / box.width, -box.y / box.height]),
+    content: { x: lo.x, y: lo.y, width: hi.x - lo.x, height: hi.y - lo.y }
+  };
+})();
+var cloud = {
+  path: ({ x, y, width: w, height: h }) => transformPath(CLOUD.path, [w, 0, 0, h, x, y]),
+  content: ({ x, y, width: w, height: h }) => ({
+    x: x + CLOUD.content.x * w,
+    y: y + CLOUD.content.y * h,
+    width: CLOUD.content.width * w,
+    height: CLOUD.content.height * h
+  }),
+  boxForContent: (c) => ({ width: c.width / CLOUD.content.width, height: c.height / CLOUD.content.height })
+};
+function figureOver(def, aspect, share) {
+  const figureBox = ({ x, y, width: w, height: h }) => {
+    const s = Math.min(h * share, w / aspect);
+    return { x: x + (w - s * aspect) / 2, y: y + h * share - s, width: s * aspect, height: s };
+  };
+  const detail = def.detail;
+  return {
+    path: (b) => def.path(figureBox(b)),
+    ...detail ? { detail: (b) => detail(figureBox(b)) } : {},
+    content: ({ x, y, width: w, height: h }) => ({ x, y: y + h * share, width: w, height: h * (1 - share) }),
+    boxForContent: (c) => ({ width: c.width, height: c.height / (1 - share) })
+  };
+}
+var ACTOR_FIGURE = {
+  path: ({ x, y, height: s }) => {
+    const at2 = (u, v) => [x + u * s, y + v * s];
+    const r = 0.13 * s;
+    const b = new PathBuilder().moveTo(x + 0.3 * s + r, y + r);
+    arc(b, x + 0.3 * s, y + r, r, 0, Math.PI * 2);
+    b.close();
+    for (const [from, to] of [
+      [at2(0.3, 0.26), at2(0.3, 0.62)],
+      [at2(0.02, 0.38), at2(0.58, 0.38)],
+      [at2(0.3, 0.62), at2(0.04, 1)],
+      [at2(0.3, 0.62), at2(0.56, 1)]
+    ]) b.moveTo(...from).lineTo(...to);
+    return b.build();
+  }
+};
+var actor = figureOver(ACTOR_FIGURE, 0.6, 0.75);
+var RING = 3;
+var ringOf = (w, h) => Math.min(RING, w / 4, h / 4);
+var doubleEllipse = {
+  path: ellipsePath,
+  detail: ({ x, y, width: w, height: h }) => {
+    const g = ringOf(w, h);
+    return ellipsePath({ x: x + g, y: y + g, width: w - g * 2, height: h - g * 2 });
+  },
+  content: ({ x, y, width: w, height: h }) => {
+    const g = ringOf(w, h);
+    const cw = (w - g * 2) / Math.SQRT2;
+    const ch = (h - g * 2) / Math.SQRT2;
+    return { x: x + (w - cw) / 2, y: y + (h - ch) / 2, width: cw, height: ch };
+  },
+  boxForContent: (c) => ({ width: c.width * Math.SQRT2 + RING * 2, height: c.height * Math.SQRT2 + RING * 2 })
+};
+var FIGURE_OUTLINES = { roundRect, triangle, octagon, cloud, actor, doubleEllipse };
+
+// src/outlines/bpmn.ts
+var STRIP = 32;
+var EVENT = 40;
+var GATEWAY = 50;
+var EVENT_SIZE = { width: 90, height: EVENT + STRIP };
+var GATEWAY_SIZE = { width: 100, height: GATEWAY + STRIP };
+var event = figureOver(FLOWCHART_OUTLINES.ellipse, 1, EVENT / (EVENT + STRIP));
+var intermediateEvent = figureOver(FIGURE_OUTLINES.doubleEllipse, 1, EVENT / (EVENT + STRIP));
+var DIAMOND = "M0.5 0L1 0.5L0.5 1L0 0.5Z";
+var gateway = (marker) => figureOver(outlineFromD(DIAMOND, { detail: marker }), 1, GATEWAY / (GATEWAY + STRIP));
+var ring = (r) => `M${0.5 + r} 0.5A${r} ${r} 0 1 1 ${0.5 - r} 0.5A${r} ${r} 0 1 1 ${0.5 + r} 0.5`;
+var PENTAGON = (() => {
+  const r = 0.13;
+  const pts = [0, 1, 2, 3, 4].map((k) => {
+    const t = -Math.PI / 2 + k * 2 * Math.PI / 5;
+    return `${(0.5 + r * Math.cos(t)).toFixed(4)} ${(0.5 + r * Math.sin(t)).toFixed(4)}`;
+  });
+  return `M${pts.join("L")}Z`;
+})();
+var exclusiveGateway = gateway("M0.37 0.37L0.63 0.63M0.63 0.37L0.37 0.63");
+var parallelGateway = gateway("M0.5 0.3V0.7M0.3 0.5H0.7");
+var inclusiveGateway = gateway(ring(0.2));
+var eventGateway = gateway(ring(0.22) + PENTAGON);
+var MARKER = 14;
+var MARKER_GAP = 4;
+var markerOf = (w, h) => Math.min(MARKER, w / 4, h / 3);
+var roundRect2 = FIGURE_OUTLINES.roundRect;
+var subprocess = {
+  path: roundRect2.path,
+  detail: ({ x, y, width: w, height: h }) => {
+    const m = markerOf(w, h);
+    const left = x + (w - m) / 2;
+    const top = y + h - MARKER_GAP - m;
+    const arm = m * 0.25;
+    return new PathBuilder().moveTo(left, top).lineTo(left + m, top).lineTo(left + m, top + m).lineTo(left, top + m).close().moveTo(left + m / 2, top + arm).lineTo(left + m / 2, top + m - arm).moveTo(left + arm, top + m / 2).lineTo(left + m - arm, top + m / 2).build();
+  },
+  content: (b) => {
+    const c = roundRect2.content(b);
+    const foot = b.y + b.height - MARKER_GAP - markerOf(b.width, b.height);
+    return { ...c, height: Math.max(Math.min(c.y + c.height, foot) - c.y, 0) };
+  },
+  boxForContent: (c) => {
+    const box = roundRect2.boxForContent(c);
+    return { width: box.width, height: box.height + MARKER + MARKER_GAP };
+  }
+};
+var BPMN_OUTLINES = {
+  event,
+  intermediateEvent,
+  exclusiveGateway,
+  parallelGateway,
+  inclusiveGateway,
+  eventGateway,
+  subprocess
+};
+
+// src/outlines/network.ts
+var GLYPH = 56;
+var STRIP2 = 32;
+var DEVICE_SIZE = { width: 96, height: GLYPH + STRIP2 };
+var SHARE = GLYPH / (GLYPH + STRIP2);
+var device = (d, detail) => figureOver(outlineFromD(d, { detail }), 1, SHARE);
+var user = figureOver(ACTOR_FIGURE, 0.6, SHARE);
+var ring2 = (cx, cy, r) => `M${cx + r} ${cy}A${r} ${r} 0 1 1 ${cx - r} ${cy}A${r} ${r} 0 1 1 ${cx + r} ${cy}`;
+var server = device(
+  "M0.33 0H0.67Q0.7 0 0.7 0.03V0.97Q0.7 1 0.67 1H0.33Q0.3 1 0.3 0.97V0.03Q0.3 0 0.33 0Z",
+  `M0.37 0.16H0.63M0.37 0.28H0.63M0.37 0.4H0.63${ring2(0.5, 0.8, 0.045)}`
+);
+var router = device(
+  "M0.08 0.46A0.42 0.14 0 0 1 0.92 0.46V0.86A0.42 0.14 0 0 1 0.08 0.86Z",
+  "M0.08 0.46A0.42 0.14 0 0 0 0.92 0.46M0.38 0.68L0.62 0.92M0.53 0.92H0.62V0.83M0.38 0.92L0.62 0.68M0.53 0.68H0.62V0.77"
+);
+var switchDevice = device(
+  "M0.09 0.56H0.91Q0.94 0.56 0.94 0.59V0.97Q0.94 1 0.91 1H0.09Q0.06 1 0.06 0.97V0.59Q0.06 0.56 0.09 0.56Z",
+  "M0.24 0.69H0.76M0.715 0.645L0.76 0.69L0.715 0.735M0.76 0.87H0.24M0.285 0.825L0.24 0.87L0.285 0.915"
+);
+var firewall = device(
+  "M0.1 0.3H0.9V1H0.1Z",
+  "M0.1 0.475H0.9M0.1 0.65H0.9M0.1 0.825H0.9M0.37 0.3V0.475M0.63 0.3V0.475M0.24 0.475V0.65M0.5 0.475V0.65M0.76 0.475V0.65M0.37 0.65V0.825M0.63 0.65V0.825M0.24 0.825V1M0.5 0.825V1M0.76 0.825V1"
+);
+var laptop = device(
+  "M0.2 0.84V0.43Q0.2 0.4 0.23 0.4H0.77Q0.8 0.4 0.8 0.43V0.84L0.94 0.96Q0.96 1 0.92 1H0.08Q0.04 1 0.06 0.96Z",
+  "M0.26 0.46H0.74V0.78H0.26ZM0.2 0.84H0.8M0.43 0.92H0.57"
+);
+var desktop = device(
+  "M0.13 0.3H0.87Q0.9 0.3 0.9 0.33V0.79Q0.9 0.82 0.87 0.82H0.56V0.93H0.7V1H0.3V0.93H0.44V0.82H0.13Q0.1 0.82 0.1 0.79V0.33Q0.1 0.3 0.13 0.3Z",
+  "M0.16 0.36H0.84V0.76H0.16Z"
+);
+var phone = device(
+  "M0.37 0.4H0.63Q0.68 0.4 0.68 0.45V0.95Q0.68 1 0.63 1H0.37Q0.32 1 0.32 0.95V0.45Q0.32 0.4 0.37 0.4Z",
+  "M0.38 0.47H0.62V0.86H0.38ZM0.46 0.93H0.54"
+);
+var printer = device(
+  "M0.28 0.55V0.36H0.72V0.55H0.86Q0.9 0.55 0.9 0.59V0.84Q0.9 0.88 0.86 0.88H0.74V1H0.26V0.88H0.14Q0.1 0.88 0.1 0.84V0.59Q0.1 0.55 0.14 0.55Z",
+  `M0.26 0.88H0.74M0.34 0.94H0.66M0.2 0.78H0.8${ring2(0.78, 0.66, 0.025)}`
+);
+var globe = device(
+  ring2(0.5, 0.6, 0.4),
+  "M0.1 0.6H0.9M0.1536 0.4H0.8464M0.1536 0.8H0.8464M0.5 0.2V1M0.5 0.2A0.17 0.4 0 0 0 0.5 1A0.17 0.4 0 0 0 0.5 0.2"
+);
+var NETWORK_OUTLINES = {
+  server,
+  router,
+  switch: switchDevice,
+  firewall,
+  laptop,
+  desktop,
+  phone,
+  printer,
+  user,
+  globe
+};
+var ICON = { width: 14, height: 12, tab: { width: 6, height: 3 }, margin: 6 };
+var ICON_SIDE = ICON.margin * 2 + ICON.width + ICON.tab.width / 2;
+var component = {
+  path: ({ x, y, width: w, height: h }) => rectPath(x, y, w, h),
+  // The UML component glyph in the top-right corner: a body with two tabs across its left edge,
+  // the edge broken where each tab crosses it.
+  detail: ({ x, y, width: w }) => {
+    const left = x + w - ICON.margin - ICON.width;
+    const top = y + ICON.margin;
+    const { width: tw, height: th } = ICON.tab;
+    const tabs = [top + 2, top + ICON.height - 2 - th];
+    const b = new PathBuilder().moveTo(left, tabs[0]).lineTo(left, top).lineTo(left + ICON.width, top).lineTo(left + ICON.width, top + ICON.height).lineTo(left, top + ICON.height).lineTo(left, tabs[1] + th).moveTo(left, tabs[0] + th).lineTo(left, tabs[1]);
+    for (const t of tabs) b.moveTo(left - tw / 2, t).lineTo(left + tw / 2, t).lineTo(left + tw / 2, t + th).lineTo(left - tw / 2, t + th).close();
+    return b.build();
+  },
+  content: ({ x, y, width: w, height: h }) => {
+    const side = Math.min(ICON_SIDE, w / 4);
+    return { x: x + side, y, width: w - side * 2, height: h };
+  },
+  boxForContent: (c) => ({ width: c.width + ICON_SIDE * 2, height: c.height })
+};
+var GAP = 4;
+var gapOf = (w, h) => Math.min(GAP, w / 4, h / 4);
+var inset = ({ x, y, width: w, height: h }, g) => ({ x: x + g, y: y + g, width: w - g * 2, height: h - g * 2 });
+var doubleRect = {
+  path: ({ x, y, width: w, height: h }) => rectPath(x, y, w, h),
+  detail: (b) => {
+    const i = inset(b, gapOf(b.width, b.height));
+    return rectPath(i.x, i.y, i.width, i.height);
+  },
+  content: (b) => inset(b, gapOf(b.width, b.height)),
+  boxForContent: (c) => ({ width: c.width + GAP * 2, height: c.height + GAP * 2 })
+};
+var MODELING_OUTLINES = { component, doubleRect };
+
+// src/outlines/table.ts
+var BUILTINS = {
+  ...FLOWCHART_OUTLINES,
+  ...FIGURE_OUTLINES,
+  ...STORAGE_OUTLINES,
+  ...NETWORK_OUTLINES,
+  ...BPMN_OUTLINES,
+  ...MODELING_OUTLINES
+};
+var table = new Map(
+  Object.entries(BUILTINS).map(([name, def]) => [name, [def]])
+);
+var warned = /* @__PURE__ */ new Set();
+function registerOutline(name, def) {
+  const stack = table.get(name) ?? [];
+  stack.push(def);
+  table.set(name, stack);
+  return () => {
+    const i = stack.lastIndexOf(def);
+    if (i >= 0) stack.splice(i, 1);
+    if (stack.length === 0) table.delete(name);
+  };
+}
+function resolveOutline(name) {
+  const def = table.get(name)?.at(-1);
+  if (def) return def;
+  if (!warned.has(name)) {
+    warned.add(name);
+    console.warn(`@weasel-js/diagram: no outline named '${name}' is registered; painting it as 'rect'`);
+  }
+  return FLOWCHART_OUTLINES.rect;
+}
+function outlinePath(outline, bounds) {
+  const { x, y, width: w, height: h } = bounds;
+  if (w <= 0 || h <= 0) return rectPath(x, y, Math.max(w, 0), Math.max(h, 0));
+  if (typeof outline !== "string") return transformPath(outline, [w, 0, 0, h, x, y]);
+  return resolveOutline(outline).path(bounds);
+}
+function outlineDetail(outline, bounds) {
+  if (typeof outline !== "string" || bounds.width <= 0 || bounds.height <= 0) return null;
+  return resolveOutline(outline).detail?.(bounds) ?? null;
+}
 function contentBox(outline, bounds) {
   if (typeof outline !== "string") return bounds;
-  const { x, y, width: w, height: h } = bounds;
-  switch (outline) {
-    case "rect":
-      return bounds;
-    case "diamond":
-      return { x: x + w / 4, y: y + h / 4, width: w / 2, height: h / 2 };
-    case "parallelogram": {
-      const lean = Math.min(w * LEAN, w / 2);
-      return { x: x + lean, y, width: Math.max(w - lean * 2, 0), height: h };
-    }
-    case "trapezoid":
-      return { x, y: y + h / 4, width: w, height: h / 2 };
-    case "hexagon":
-      return { x: x + w * POINT, y, width: w * (1 - POINT * 2), height: h };
-    case "ellipse": {
-      const cw = w / Math.SQRT2;
-      const ch = h / Math.SQRT2;
-      return { x: x + (w - cw) / 2, y: y + (h - ch) / 2, width: cw, height: ch };
-    }
-    case "stadium": {
-      const r = Math.min(w, h) / 2;
-      return w >= h ? { x: x + r, y, width: Math.max(w - r * 2, 0), height: h } : { x, y: y + r, width: w, height: Math.max(h - r * 2, 0) };
-    }
-  }
+  return resolveOutline(outline).content?.(bounds) ?? bounds;
 }
 function boxForContent(outline, content) {
   if (typeof outline !== "string") return content;
-  switch (outline) {
-    case "rect":
-      return content;
-    case "diamond":
-      return { width: content.width * 2, height: content.height * 2 };
-    case "parallelogram":
-      return { width: content.width / (1 - LEAN * 2), height: content.height };
-    case "trapezoid":
-      return { width: content.width, height: content.height * 2 };
-    case "hexagon":
-      return { width: content.width / (1 - POINT * 2), height: content.height };
-    case "stadium":
-      return { width: content.width + content.height, height: content.height };
-    case "ellipse":
-      return { width: content.width * Math.SQRT2, height: content.height * Math.SQRT2 };
-  }
+  return resolveOutline(outline).boxForContent?.(content) ?? content;
 }
 var TOLERANCE = 0.25;
 function outlinePolyline(outline, bounds) {
@@ -128,7 +582,8 @@ function flattenPath(path) {
     return [x, y, x + w, y, x + w, y + h, x, y + h, x, y];
   }
   const out = [];
-  const { commands, coords } = path;
+  const { commands } = path;
+  const coords = worldCoords(path);
   let ci = 0;
   let cx = 0;
   let cy = 0;
@@ -367,10 +822,11 @@ function withLabels(ports, labels) {
 var DEFAULT_PADDING = 8;
 var DEFAULT_GAP = 4;
 var FALLBACK_LINE = 16;
+var DIVIDER_HEIGHT = 4;
 function canvasMeasure(ctx) {
   return (text, style) => {
     const size = style.fontSize ?? FALLBACK_LINE;
-    ctx.font = `${style.bold === true ? "bold " : ""}${size}px ${cssFamilyName(style.fontFamily ?? "sans-serif")}`;
+    ctx.font = `${style.italic === true ? "italic " : ""}${style.bold === true ? "bold " : ""}${size}px ${cssFamilyName(style.fontFamily ?? "sans-serif")}`;
     return { width: ctx.measureText(text).width, height: Math.ceil(size * 1.2) };
   };
 }
@@ -398,8 +854,13 @@ function measureRow(row, measure) {
     }
     case "slot":
       return { width: row.width ?? 0, height: row.height };
+    case "divider":
+      return { width: 0, height: DIVIDER_HEIGHT };
   }
 }
+function rowHeights(spec, measure) {
+  return spec.rows.map((row) => measureRow(row, measure).height);
+}
 function measureBody(spec, measure) {
   const padding = spec.padding ?? DEFAULT_PADDING;
   const gap = spec.gap ?? DEFAULT_GAP;
@@ -427,19 +888,22 @@ function layoutBody(spec, bounds, measure) {
   const gap = spec.gap ?? DEFAULT_GAP;
   const inner = contentBox(spec.outline, bounds);
   const width = Math.max(inner.width - padding * 2, 0);
-  const heights = spec.rows.map((row) => measureRow(row, measure).height);
+  const heights = rowHeights(spec, measure);
   const used = heights.reduce((sum, h) => sum + h, 0) + gap * Math.max(heights.length - 1, 0);
   const slack = Math.max(inner.height - padding * 2 - used, 0);
   const share = { top: 0, center: 0.5, bottom: 1 }[spec.verticalAlign ?? "center"];
   let y = inner.y + padding + slack * share;
   return spec.rows.map((row, index) => {
     const h = heights[index];
-    const w = row.kind === "slot" && row.width !== void 0 ? Math.min(row.width, width) : width;
-    const box = { row, index, x: inner.x + padding + (width - w) / 2, y, width: w, height: h };
+    const box = row.kind === "divider" ? { row, index, x: inner.x + (row.inset ?? 0), y, width: Math.max(inner.width - 2 * (row.inset ?? 0), 0), height: h } : rowBox(row, index, inner.x + padding, width, y, h);
     y += h + gap;
     return box;
   });
 }
+function rowBox(row, index, x, width, y, height) {
+  const w = row.kind === "slot" && row.width !== void 0 ? Math.min(row.width, width) : width;
+  return { row, index, x: x + (width - w) / 2, y, width: w, height };
+}
 function layoutRowPorts(row, box, measure) {
   const width = (label) => label === void 0 ? 0 : measureRow({ kind: "label", text: label }, measure).width;
   const slots = Math.max(row.left?.length ?? 0, row.right?.length ?? 0, 1);
@@ -727,28 +1191,28 @@ function graphOrder(graph) {
 }
 
 // src/cluster.ts
-function insetOf(inset) {
-  if (typeof inset === "number") return { top: inset, right: inset, bottom: inset, left: inset };
+function insetOf(inset2) {
+  if (typeof inset2 === "number") return { top: inset2, right: inset2, bottom: inset2, left: inset2 };
   return {
-    top: inset?.top ?? DEFAULT_GROUP_INSET,
-    right: inset?.right ?? DEFAULT_GROUP_INSET,
-    bottom: inset?.bottom ?? DEFAULT_GROUP_INSET,
-    left: inset?.left ?? DEFAULT_GROUP_INSET
+    top: inset2?.top ?? DEFAULT_GROUP_INSET,
+    right: inset2?.right ?? DEFAULT_GROUP_INSET,
+    bottom: inset2?.bottom ?? DEFAULT_GROUP_INSET,
+    left: inset2?.left ?? DEFAULT_GROUP_INSET
   };
 }
 var DEFAULT_GROUP_INSET = 12;
-function canonical(inset, axes) {
+function canonical(inset2, axes) {
   if (axes.rank === "y") {
-    return axes.sign === 1 ? { crossLo: inset.left, crossHi: inset.right, rankLo: inset.top, rankHi: inset.bottom } : { crossLo: inset.left, crossHi: inset.right, rankLo: inset.bottom, rankHi: inset.top };
+    return axes.sign === 1 ? { crossLo: inset2.left, crossHi: inset2.right, rankLo: inset2.top, rankHi: inset2.bottom } : { crossLo: inset2.left, crossHi: inset2.right, rankLo: inset2.bottom, rankHi: inset2.top };
   }
-  return axes.sign === 1 ? { crossLo: inset.top, crossHi: inset.bottom, rankLo: inset.left, rankHi: inset.right } : { crossLo: inset.top, crossHi: inset.bottom, rankLo: inset.right, rankHi: inset.left };
+  return axes.sign === 1 ? { crossLo: inset2.top, crossHi: inset2.bottom, rankLo: inset2.left, rankHi: inset2.right } : { crossLo: inset2.top, crossHi: inset2.bottom, rankLo: inset2.right, rankHi: inset2.left };
 }
-function crossInset(inset, axes) {
-  const c = canonical(inset, axes);
+function crossInset(inset2, axes) {
+  const c = canonical(inset2, axes);
   return { lo: c.crossLo, hi: c.crossHi };
 }
-function rankInset(inset, axes) {
-  const c = canonical(inset, axes);
+function rankInset(inset2, axes) {
+  const c = canonical(inset2, axes);
   return { lo: c.rankLo, hi: c.rankHi };
 }
 function rankGaps(graph, rows, axes, rankGap) {
@@ -863,8 +1327,8 @@ function packClusters(graph, rows, preferred2, axes, nodeGap) {
     return block;
   };
   function outer(span) {
-    const inset = insets.get(span);
-    return blockOf(span).width + inset.crossLo + inset.crossHi;
+    const inset2 = insets.get(span);
+    return blockOf(span).width + inset2.crossLo + inset2.crossHi;
   }
   const roots = spans.filter((s) => s.parent === void 0);
   const start = new Map(roots.map((s) => [s, centerOf.get(s) - outer(s) / 2]));
@@ -878,8 +1342,8 @@ function packClusters(graph, rows, preferred2, axes, nodeGap) {
   for (const root of roots) place(root, start.get(root));
   return at2;
 }
-function widen(block, group, inset, axes) {
-  const floor = axes.cross === "x" ? (group.minWidth ?? 0) - inset.crossLo - inset.crossHi : 0;
+function widen(block, group, inset2, axes) {
+  const floor = axes.cross === "x" ? (group.minWidth ?? 0) - inset2.crossLo - inset2.crossHi : 0;
   const slack = Math.max(0, floor - block.width) / 2;
   block.width += 2 * slack;
   for (const [child, local] of block.childAt) block.childAt.set(child, local + slack);
@@ -950,7 +1414,13 @@ function subpathOf(path, index) {
     if (i === commands.length || cmd === PATH_M$1) {
       if (seen === index) {
         if (start === 0 && i === commands.length) return path;
-        return { kind: "polygon", fillRule: path.fillRule, commands: commands.slice(start, i), coords: coords.slice(startCoord, coord2) };
+        return {
+          kind: "polygon",
+          fillRule: path.fillRule,
+          commands: commands.slice(start, i),
+          coords: coords.slice(startCoord, coord2),
+          ...path.origin ? { origin: path.origin } : {}
+        };
       }
       seen++;
       start = i;
@@ -963,7 +1433,8 @@ function subpathOf(path, index) {
 var NAMED = { start: 0, mid: 0.5, end: 1 };
 function nearestStation(path, near) {
   if (path.kind !== "polygon") return null;
-  const { commands, coords } = path;
+  const { commands } = path;
+  const coords = worldCoords(path);
   let best = null;
   let heading = { x: 1, y: 0 };
   forEachSegment(commands, coords, (cmd, ci, x0, y0) => {
@@ -1167,8 +1638,8 @@ function boxOf(g) {
     x1 = Math.max(x1, b.x1);
     y1 = Math.max(y1, b.y1);
   }
-  const { inset } = g.group;
-  return { x0: x0 - inset.left, y0: y0 - inset.top, x1: x1 + inset.right, y1: y1 + inset.bottom };
+  const { inset: inset2 } = g.group;
+  return { x0: x0 - inset2.left, y0: y0 - inset2.top, x1: x1 + inset2.right, y1: y1 + inset2.bottom };
 }
 function clearance(a, b, padding) {
   const gapX = Math.min(a.x1, b.x1) - Math.max(a.x0, b.x0) + padding;
@@ -1522,9 +1993,9 @@ function longestPath(count, arcs) {
   const rank = new Array(count).fill(0);
   const pending = new Array(count).fill(0);
   const out = Array.from({ length: count }, () => []);
-  for (const arc of arcs) {
-    pending[arc.head]++;
-    out[arc.tail].push(arc.head);
+  for (const arc2 of arcs) {
+    pending[arc2.head]++;
+    out[arc2.tail].push(arc2.head);
   }
   const ready = [];
   for (let i = 0; i < count; i++) if (pending[i] === 0) ready.push(i);
@@ -1539,9 +2010,9 @@ function longestPath(count, arcs) {
 }
 function components(count, arcs) {
   const near = Array.from({ length: count }, () => []);
-  for (const arc of arcs) {
-    near[arc.tail].push(arc.head);
-    near[arc.head].push(arc.tail);
+  for (const arc2 of arcs) {
+    near[arc2.tail].push(arc2.head);
+    near[arc2.head].push(arc2.tail);
   }
   const part = new Array(count).fill(-1);
   const parts = [];
@@ -1562,14 +2033,14 @@ function components(count, arcs) {
   }
   const local = new Array(count);
   for (const p of parts) p.nodes.forEach((g, i) => local[g] = i);
-  for (const arc of arcs) {
-    parts[part[arc.tail]].arcs.push({ tail: local[arc.tail], head: local[arc.head] });
+  for (const arc2 of arcs) {
+    parts[part[arc2.tail]].arcs.push({ tail: local[arc2.tail], head: local[arc2.head] });
   }
   return parts;
 }
-var slackOf = (arc, rank) => rank[arc.head] - rank[arc.tail] - 1;
+var slackOf = (arc2, rank) => rank[arc2.head] - rank[arc2.tail] - 1;
 function simplex(arcs, rank) {
-  if (arcs.length === 0 || arcs.some((arc) => slackOf(arc, rank) < 0)) return;
+  if (arcs.length === 0 || arcs.some((arc2) => slackOf(arc2, rank) < 0)) return;
   const inTree = feasibleTree(arcs, rank);
   const cap = 4 * arcs.length + 100;
   for (let round = 0; round < cap; round++) {
@@ -1588,10 +2059,10 @@ function simplex(arcs, rank) {
     const inside = insideOf(tree2, childOf(arcs[leave], leave, tree2));
     let enter = -1;
     for (let a = 0; a < arcs.length; a++) {
-      const arc = arcs[a];
+      const arc2 = arcs[a];
       if (inTree[a]) continue;
-      const crosses = tailInside ? !inside(arc.tail) && inside(arc.head) : inside(arc.tail) && !inside(arc.head);
-      if (crosses && (enter === -1 || slackOf(arc, rank) < slackOf(arcs[enter], rank))) enter = a;
+      const crosses = tailInside ? !inside(arc2.tail) && inside(arc2.head) : inside(arc2.tail) && !inside(arc2.head);
+      if (crosses && (enter === -1 || slackOf(arc2, rank) < slackOf(arcs[enter], rank))) enter = a;
     }
     if (enter === -1) return;
     inTree[leave] = false;
@@ -1607,10 +2078,10 @@ function feasibleTree(arcs, rank) {
   const grow = () => {
     for (let changed = true; changed; ) {
       changed = false;
-      arcs.forEach((arc, a) => {
-        if (has[arc.tail] === has[arc.head] || slackOf(arc, rank) !== 0) return;
+      arcs.forEach((arc2, a) => {
+        if (has[arc2.tail] === has[arc2.head] || slackOf(arc2, rank) !== 0) return;
         inTree[a] = true;
-        has[arc.tail] = has[arc.head] = true;
+        has[arc2.tail] = has[arc2.head] = true;
         size++;
         changed = true;
       });
@@ -1619,12 +2090,12 @@ function feasibleTree(arcs, rank) {
   grow();
   while (size < rank.length) {
     let best = -1;
-    arcs.forEach((arc2, a) => {
-      if (has[arc2.tail] === has[arc2.head]) return;
-      if (best === -1 || slackOf(arc2, rank) < slackOf(arcs[best], rank)) best = a;
+    arcs.forEach((arc3, a) => {
+      if (has[arc3.tail] === has[arc3.head]) return;
+      if (best === -1 || slackOf(arc3, rank) < slackOf(arcs[best], rank)) best = a;
     });
-    const arc = arcs[best];
-    const delta = has[arc.head] ? -slackOf(arc, rank) : slackOf(arc, rank);
+    const arc2 = arcs[best];
+    const delta = has[arc2.head] ? -slackOf(arc2, rank) : slackOf(arc2, rank);
     for (let v = 0; v < rank.length; v++) if (has[v]) rank[v] += delta;
     grow();
   }
@@ -1632,10 +2103,10 @@ function feasibleTree(arcs, rank) {
 }
 function treeAdjacency(count, arcs, inTree) {
   const adj = Array.from({ length: count }, () => []);
-  arcs.forEach((arc, a) => {
+  arcs.forEach((arc2, a) => {
     if (!inTree[a]) return;
-    adj[arc.tail].push(a);
-    adj[arc.head].push(a);
+    adj[arc2.tail].push(a);
+    adj[arc2.head].push(a);
   });
   return adj;
 }
@@ -1656,16 +2127,16 @@ function postorder(count, arcs, inTree) {
       continue;
     }
     if (a === parentArc[top.v]) continue;
-    const arc = arcs[a];
-    const w = arc.tail === top.v ? arc.head : arc.tail;
+    const arc2 = arcs[a];
+    const w = arc2.tail === top.v ? arc2.head : arc2.tail;
     parentArc[w] = a;
     low[w] = next;
     stack.push({ v: w, i: 0 });
   }
   return { low, lim, parentArc };
 }
-function childOf(arc, a, tree2) {
-  return tree2.parentArc[arc.tail] === a ? arc.tail : arc.head;
+function childOf(arc2, a, tree2) {
+  return tree2.parentArc[arc2.tail] === a ? arc2.tail : arc2.head;
 }
 function insideOf(tree2, child) {
   const lo = tree2.low[child];
@@ -1678,9 +2149,9 @@ function cutValue(arcs, a, tree2) {
   const inside = insideOf(tree2, child);
   const tailInside = child === treeArc.tail;
   let value = 0;
-  for (const arc of arcs) {
-    const from = inside(arc.tail);
-    if (from === inside(arc.head)) continue;
+  for (const arc2 of arcs) {
+    const from = inside(arc2.tail);
+    if (from === inside(arc2.head)) continue;
     value += from === tailInside ? 1 : -1;
   }
   return { value, tailInside };
@@ -1693,11 +2164,11 @@ function tighten(rank, arcs, inTree) {
   for (let k = 0; k < queue.length; k++) {
     const v = queue[k];
     for (const a of adj[v]) {
-      const arc = arcs[a];
-      const w = arc.tail === v ? arc.head : arc.tail;
+      const arc2 = arcs[a];
+      const w = arc2.tail === v ? arc2.head : arc2.tail;
       if (seen[w]) continue;
       seen[w] = true;
-      rank[w] = arc.tail === v ? rank[v] + 1 : rank[v] - 1;
+      rank[w] = arc2.tail === v ? rank[v] + 1 : rank[v] - 1;
       queue.push(w);
     }
   }
@@ -1709,18 +2180,18 @@ var isPlaceholder = (id) => id.startsWith(PLACEHOLDER);
 
 // src/layered/expand.ts
 function labelRowsOf(drawn, ranks, span) {
-  const gapOf = /* @__PURE__ */ new Map();
+  const gapOf2 = /* @__PURE__ */ new Map();
   for (const d of drawn) {
     if (d.label === void 0) continue;
     const a = span(d.back ? d.to : d.from, ranks);
     const b = span(d.back ? d.from : d.to, ranks);
     if (a === null || b === null || a[1] >= b[0]) continue;
-    gapOf.set(d.id, a[1] + Math.floor((b[0] - a[1] - 1) / 2));
+    gapOf2.set(d.id, a[1] + Math.floor((b[0] - a[1] - 1) / 2));
   }
-  const gaps = [...new Set(gapOf.values())];
+  const gaps = [...new Set(gapOf2.values())];
   const rowOf = (r) => r + gaps.filter((g) => g < r).length;
   const rows = new Map([...ranks].map(([id, r]) => [id, rowOf(r)]));
-  return { rows, labelRow: new Map([...gapOf].map(([id, g]) => [id, rowOf(g) + 1])) };
+  return { rows, labelRow: new Map([...gapOf2].map(([id, g]) => [id, rowOf(g) + 1])) };
 }
 function labelRoom(room, axes, back, nodeGap) {
   const across = extent({ width: room.width, height: room.height }, axes.cross);
@@ -3177,6 +3648,28 @@ function forestOf(graph, crossAxis) {
   }
   return { roots, children, depth };
 }
+function subtreeBlocks(children, axis, gap) {
+  const measured = /* @__PURE__ */ new Map();
+  const kidsSpan = (kids) => kids.reduce((sum, k) => sum + span(k), 0) + Math.max(0, kids.length - 1) * gap;
+  const span = (node) => {
+    const known = measured.get(node.id);
+    if (known !== void 0) return known;
+    const block = Math.max(extent(node.bounds, axis), kidsSpan(children.get(node.id) ?? []));
+    measured.set(node.id, block);
+    return block;
+  };
+  const lay = (node, from, into) => {
+    const kids = children.get(node.id) ?? [];
+    const block = span(node);
+    let cursor = from + (block - kidsSpan(kids)) / 2;
+    for (const child of kids) {
+      lay(child, cursor, into);
+      cursor += span(child) + gap;
+    }
+    into.set(node.id, from + (block - extent(node.bounds, axis)) / 2);
+  };
+  return { span, lay };
+}
 var tree = (graph, opts = {}) => (graph.groups?.length ?? 0) > 0 ? untilSettled(treeOnce, graph, opts) : treeOnce(graph, opts);
 var treeOnce = (graph, opts = {}) => {
   const axes = axesFor(opts.direction);
@@ -3199,48 +3692,29 @@ var treeOnce = (graph, opts = {}) => {
     along += bands.get(at2) + (gaps[i] ?? 0);
   }
   const slots = /* @__PURE__ */ new Map();
-  const measured = /* @__PURE__ */ new Map();
-  const measure = (node) => {
-    const known = measured.get(node.id);
-    if (known !== void 0) return known;
-    const kids = children.get(node.id) ?? [];
-    let width = 0;
-    for (const child of kids) width += measure(child);
-    if (kids.length > 0) width += nodeGap * (kids.length - 1);
-    const block = Math.max(extent(node.bounds, axes.cross), width);
-    measured.set(node.id, block);
-    return block;
-  };
-  const place = (node, from) => {
-    const kids = children.get(node.id) ?? [];
-    const block = measure(node);
-    const width = kids.reduce((sum, k) => sum + measure(k), 0) + Math.max(0, kids.length - 1) * nodeGap;
-    let cursor2 = from + (block - width) / 2;
-    for (const child of kids) {
-      place(child, cursor2);
-      cursor2 += measure(child) + nodeGap;
-    }
-    const own = extent(node.bounds, axes.cross);
+  const blocks = subtreeBlocks(children, axes.cross, nodeGap);
+  const crossAt = /* @__PURE__ */ new Map();
+  let cursor = 0;
+  for (const root of roots) {
+    blocks.lay(root, cursor, crossAt);
+    cursor += blocks.span(root) + nodeGap;
+  }
+  for (const node of graph.nodes) {
     const at2 = depth.get(node.id) ?? 0;
     slots.set(node.id, {
-      cross: from + (block - own) / 2,
+      cross: crossAt.get(node.id),
       rank: bandStart.get(at2) + (bands.get(at2) - extent(node.bounds, axes.rank)) / 2
     });
-  };
-  let cursor = 0;
-  for (const root of roots) {
-    place(root, cursor);
-    cursor += measure(root) + nodeGap;
   }
   if (grouped) {
     const preferred2 = new Map([...slots].map(([id, slot]) => [id, slot.cross]));
     const ordered = rowsAt.map((row) => [...row].sort((a, b) => preferred2.get(a.id) - preferred2.get(b.id)));
-    const crossAt = packClusters(graph, ordered, preferred2, axes, nodeGap);
-    for (const [id, slot] of slots) slots.set(id, { ...slot, cross: crossAt.get(id) ?? slot.cross });
+    const crossAt2 = packClusters(graph, ordered, preferred2, axes, nodeGap);
+    for (const [id, slot] of slots) slots.set(id, { ...slot, cross: crossAt2.get(id) ?? slot.cross });
   }
   return settle(graph, slots, opts);
 };
 
-export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, PORT_LABEL_GAP, SIDE_TRACK_GAP, anchorOffset, authoredOver, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, center, chain, contentBox, createDiagramNodes, dataKeyReader, diagramEdgeOf, diagramNodeOf, expandGroupEdges, extent, footprintNode, force, forceRelaxation, forestOf, graphOrder, grownBy, insetOf, isPinned, isPromise, labelCenter, labelSpotAt, layered, layeredPlan, layeredRoutes, layoutBody, layoutOwnsPort, layoutOwnsRoute, layoutRowPorts, layoutWritesRoute, marginOf, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, planOf, plannerPlan, portLabelBox, portLabelsOf, portOf, portSitesOf, portsOf, portsOnOutline, rankGaps, ranksByLength, ranksOf, rayHit, routeHolds, samePoints, seededOrder, settle, sizeToBody, subpathOf, translated, tree, untilSettled, widenForMinWidth };
-//# sourceMappingURL=chunk-L4H444QI.js.map
-//# sourceMappingURL=chunk-L4H444QI.js.map
+export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DEVICE_SIZE, DIAGRAM_TRAIT_KEY, DIVIDER_HEIGHT, EVENT_SIZE, GATEWAY_SIZE, PORT_LABEL_GAP, SIDE_TRACK_GAP, anchorOffset, authoredOver, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, center, chain, contentBox, createDiagramNodes, dataKeyReader, diagramEdgeOf, diagramNodeOf, expandGroupEdges, extent, footprintNode, force, forceRelaxation, forestOf, graphOrder, grownBy, insetOf, isPinned, isPromise, labelCenter, labelSpotAt, layered, layeredPlan, layeredRoutes, layoutBody, layoutOwnsPort, layoutOwnsRoute, layoutRowPorts, layoutWritesRoute, marginOf, measureBody, outlineDetail, outlineFromD, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, planOf, plannerPlan, portLabelBox, portLabelsOf, portOf, portSitesOf, portsOf, portsOnOutline, rankGaps, ranksByLength, ranksOf, rayHit, registerOutline, resolveOutline, routeHolds, rowHeights, samePoints, seededOrder, settle, sizeToBody, subpathOf, subtreeBlocks, translated, tree, untilSettled, widenForMinWidth };
+//# sourceMappingURL=chunk-VB6HUKNG.js.map
+//# sourceMappingURL=chunk-VB6HUKNG.js.map