@diagrammo/dgmo 0.88.0 → 0.90.0

package/dist/chunk-S7C32S2T.js

@@ -0,0 +1,825 @@
+import {
+  drawCylinderCard,
+  drawQueueCard
+} from "./chunk-FDRHBQUG.js";
+import {
+  CYLINDER_RY,
+  QUEUE_CAP
+} from "./chunk-VCHYS3RD.js";
+import {
+  renderChartTitle
+} from "./chunk-X6IZP2BD.js";
+import {
+  TITLE_FONT_SIZE
+} from "./chunk-VLC6WNRD.js";
+import {
+  FONT_FAMILY
+} from "./chunk-ICLB27PZ.js";
+import {
+  measureText,
+  wrapTextToWidth
+} from "./chunk-KAO7JL4I.js";
+import {
+  contrastText,
+  mix,
+  shapeFill,
+  themeBaseBg
+} from "./chunk-L24LESXF.js";
+
+// src/whiteboard/renderer.ts
+import * as d3 from "d3-selection";
+import { getStroke } from "perfect-freehand";
+
+// src/whiteboard/geometry.ts
+var RECT_RADIUS = 6;
+var NOTE_FOLD = 18;
+function whiteboardNoteFold(width, height) {
+  return Math.max(0, Math.min(NOTE_FOLD, width / 3, height / 3));
+}
+function isAttachable(el) {
+  return el.kind === "shape" || el.kind === "note";
+}
+var EPS = 1e-6;
+function rect(x0, y0, x1, y1) {
+  return x1 >= x0 && y1 >= y0 ? [{ kind: "rect", x0, y0, x1, y1 }] : [];
+}
+function ellipse(cx, cy, rx, ry) {
+  return rx > 0 && ry > 0 ? [{ kind: "ellipse", cx, cy, rx, ry }] : [];
+}
+function roundedRect(x, y, w, h, radius) {
+  const r = Math.max(0, Math.min(radius, w / 2, h / 2));
+  if (r === 0) return rect(x, y, x + w, y + h);
+  return [
+    ...rect(x + r, y, x + w - r, y + h),
+    ...rect(x, y + r, x + w, y + h - r),
+    ...ellipse(x + r, y + r, r, r),
+    ...ellipse(x + w - r, y + r, r, r),
+    ...ellipse(x + r, y + h - r, r, r),
+    ...ellipse(x + w - r, y + h - r, r, r)
+  ];
+}
+function piecesOf(s) {
+  const { x, y, width: w, height: h } = s;
+  if (s.kind === "note") {
+    const f = whiteboardNoteFold(w, h);
+    if (f === 0) return rect(x, y, x + w, y + h);
+    const pts = [
+      { x, y },
+      { x: x + w - f, y },
+      { x: x + w, y: y + f },
+      { x: x + w, y: y + h },
+      { x, y: y + h }
+    ];
+    return [{ kind: "poly", pts }];
+  }
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  switch (s.shape) {
+    case "rectangle":
+      return roundedRect(x, y, w, h, RECT_RADIUS);
+    case "ellipse":
+      return ellipse(cx, cy, w / 2, h / 2);
+    case "database": {
+      const ry = CYLINDER_RY;
+      return [
+        ...rect(x, y + ry, x + w, y + h - ry),
+        ...ellipse(cx, y + ry, w / 2, ry),
+        ...ellipse(cx, y + h - ry, w / 2, ry)
+      ];
+    }
+    case "queue": {
+      const cap = QUEUE_CAP;
+      return [
+        ...rect(x + cap, y, x + w - cap, y + h),
+        ...ellipse(x + cap, cy, cap, h / 2),
+        ...ellipse(x + w - cap, cy, cap, h / 2)
+      ];
+    }
+  }
+}
+function halfPlanes(pts) {
+  return pts.map((a, i) => {
+    const b = pts[(i + 1) % pts.length];
+    const nx = b.y - a.y;
+    const ny = -(b.x - a.x);
+    const len = Math.hypot(nx, ny) || 1;
+    return [nx / len, ny / len, (nx * a.x + ny * a.y) / len];
+  });
+}
+function pieceContains(p, px, py) {
+  if (p.kind === "poly") {
+    return halfPlanes(p.pts).every(
+      ([nx2, ny2, c]) => nx2 * px + ny2 * py <= c + EPS
+    );
+  }
+  if (p.kind === "rect") {
+    return px >= p.x0 - EPS && px <= p.x1 + EPS && py >= p.y0 - EPS && py <= p.y1 + EPS;
+  }
+  const nx = (px - p.cx) / p.rx;
+  const ny = (py - p.cy) / p.ry;
+  return nx * nx + ny * ny <= 1 + EPS;
+}
+function whiteboardShapeContains(shape, point) {
+  return piecesOf(shape).some((p) => pieceContains(p, point.x, point.y));
+}
+function whiteboardShapeAt(point, elements) {
+  for (let i = elements.length - 1; i >= 0; i--) {
+    const el = elements[i];
+    if (isAttachable(el) && whiteboardShapeContains(el, point)) return i;
+  }
+  return -1;
+}
+function whiteboardConnectorAttachments(connector, elements) {
+  const a = { x: connector.x1, y: connector.y1 };
+  const b = { x: connector.x2, y: connector.y2 };
+  const attach = (end, other) => {
+    const i = whiteboardShapeAt(end, elements);
+    if (i < 0) return -1;
+    return whiteboardShapeContains(elements[i], other) ? -1 : i;
+  };
+  return { from: attach(a, b), to: attach(b, a) };
+}
+function interval(p, ax, ay, dx, dy) {
+  if (p.kind === "poly") {
+    let lo = -Infinity;
+    let hi = Infinity;
+    for (const [nx, ny, c] of halfPlanes(p.pts)) {
+      const num = c - (nx * ax + ny * ay);
+      const den = nx * dx + ny * dy;
+      if (Math.abs(den) < EPS) {
+        if (num < -EPS) return null;
+        continue;
+      }
+      const t = num / den;
+      if (den > 0) hi = Math.min(hi, t);
+      else lo = Math.max(lo, t);
+    }
+    return lo <= hi ? [lo, hi] : null;
+  }
+  if (p.kind === "rect") {
+    let lo = -Infinity;
+    let hi = Infinity;
+    for (const [o, d, min, max] of [
+      [ax, dx, p.x0, p.x1],
+      [ay, dy, p.y0, p.y1]
+    ]) {
+      if (Math.abs(d) < EPS) {
+        if (o < min - EPS || o > max + EPS) return null;
+        continue;
+      }
+      const t0 = (min - o) / d;
+      const t1 = (max - o) / d;
+      lo = Math.max(lo, Math.min(t0, t1));
+      hi = Math.min(hi, Math.max(t0, t1));
+    }
+    return lo <= hi ? [lo, hi] : null;
+  }
+  const ox = (ax - p.cx) / p.rx;
+  const oy = (ay - p.cy) / p.ry;
+  const ux = dx / p.rx;
+  const uy = dy / p.ry;
+  const qa = ux * ux + uy * uy;
+  const qb = 2 * (ox * ux + oy * uy);
+  const qc = ox * ox + oy * oy - 1;
+  const disc = qb * qb - 4 * qa * qc;
+  if (qa === 0 || disc < 0) return null;
+  const s = Math.sqrt(disc);
+  return [(-qb - s) / (2 * qa), (-qb + s) / (2 * qa)];
+}
+function entryParam(shape, a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  let best = 1;
+  for (const p of piecesOf(shape)) {
+    const iv = interval(p, a.x, a.y, dx, dy);
+    if (!iv || iv[1] < 0 || iv[0] > 1) continue;
+    best = Math.min(best, Math.max(0, iv[0]));
+  }
+  return best;
+}
+function clipWhiteboardConnector(connector, elements) {
+  const { x1, y1, x2, y2 } = connector;
+  const stored = { x1, y1, x2, y2 };
+  if (Math.hypot(x2 - x1, y2 - y1) < EPS) return stored;
+  const { from, to } = whiteboardConnectorAttachments(connector, elements);
+  if (connector.bend !== 0) return clipCurve(connector, elements, from, to);
+  if (from < 0 && to < 0) return stored;
+  const { a, b } = aimedEnds(connector, elements, from, to);
+  if (Math.hypot(b.x - a.x, b.y - a.y) < EPS) return stored;
+  const uEnd = to < 0 ? 1 : entryParam(elements[to], a, b);
+  const uStart = from < 0 ? 1 : entryParam(elements[from], b, a);
+  if (uEnd + uStart - 1 < EPS) return stored;
+  return {
+    x1: b.x + (a.x - b.x) * uStart,
+    y1: b.y + (a.y - b.y) * uStart,
+    x2: a.x + (b.x - a.x) * uEnd,
+    y2: a.y + (b.y - a.y) * uEnd
+  };
+}
+function aimedEnds(connector, elements, from, to) {
+  const centre = (i, x, y) => {
+    if (i < 0) return { x, y };
+    const s = elements[i];
+    return { x: s.x + s.width / 2, y: s.y + s.height / 2 };
+  };
+  return {
+    a: centre(from, connector.x1, connector.y1),
+    b: centre(to, connector.x2, connector.y2)
+  };
+}
+function bendFrame(connector, elements) {
+  const { from, to } = whiteboardConnectorAttachments(connector, elements);
+  const { a, b } = aimedEnds(connector, elements, from, to);
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const len = Math.hypot(dx, dy);
+  if (len < EPS) return null;
+  return {
+    a,
+    b,
+    mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
+    nx: -dy / len,
+    ny: dx / len
+  };
+}
+function whiteboardBendHandle(connector, elements) {
+  const f = bendFrame(connector, elements);
+  if (!f) return { x: connector.x1, y: connector.y1 };
+  return {
+    x: f.mid.x + f.nx * connector.bend,
+    y: f.mid.y + f.ny * connector.bend
+  };
+}
+function whiteboardBendFor(connector, elements, p) {
+  const f = bendFrame(connector, elements);
+  if (!f) return 0;
+  return Math.round((p.x - f.mid.x) * f.nx + (p.y - f.mid.y) * f.ny);
+}
+var CURVE_STEPS = 64;
+function quad(a, c, b, t) {
+  const u = 1 - t;
+  return {
+    x: u * u * a.x + 2 * u * t * c.x + t * t * b.x,
+    y: u * u * a.y + 2 * u * t * c.y + t * t * b.y
+  };
+}
+function clipCurve(connector, elements, from, to) {
+  const { x1, y1, x2, y2 } = connector;
+  const f = bendFrame(connector, elements);
+  if (!f) return { x1, y1, x2, y2 };
+  const { a, b } = f;
+  const h = {
+    x: f.mid.x + f.nx * connector.bend,
+    y: f.mid.y + f.ny * connector.bend
+  };
+  const c = { x: 2 * h.x - f.mid.x, y: 2 * h.y - f.mid.y };
+  const inside = (i, t) => {
+    const p = quad(a, c, b, t);
+    return whiteboardShapeContains(elements[i], p);
+  };
+  const leave = (i, start, end) => {
+    let inT = start;
+    for (let k = 1; k <= CURVE_STEPS; k++) {
+      const t = start + (end - start) * k / CURVE_STEPS;
+      if (!inside(i, t)) {
+        let lo = inT;
+        let hi = t;
+        for (let n = 0; n < 24; n++) {
+          const m = (lo + hi) / 2;
+          if (inside(i, m)) lo = m;
+          else hi = m;
+        }
+        return (lo + hi) / 2;
+      }
+      inT = t;
+    }
+    return end;
+  };
+  const t0 = from < 0 ? 0 : leave(from, 0, 1);
+  const t1 = to < 0 ? 1 : leave(to, 1, 0);
+  const [s0, s1] = t1 - t0 > EPS ? [t0, t1] : [0, 1];
+  const p0 = quad(a, c, b, s0);
+  const p1 = quad(a, c, b, s1);
+  const w0 = (1 - s0) * (1 - s1);
+  const w1 = (1 - s0) * s1 + s0 * (1 - s1);
+  const w2 = s0 * s1;
+  return {
+    x1: p0.x,
+    y1: p0.y,
+    x2: p1.x,
+    y2: p1.y,
+    cx: w0 * a.x + w1 * c.x + w2 * b.x,
+    cy: w0 * a.y + w1 * c.y + w2 * b.y
+  };
+}
+function whiteboardSegmentMidpoint(s) {
+  if (s.cx === void 0 || s.cy === void 0) {
+    return { x: (s.x1 + s.x2) / 2, y: (s.y1 + s.y2) / 2 };
+  }
+  return {
+    x: (s.x1 + 2 * s.cx + s.x2) / 4,
+    y: (s.y1 + 2 * s.cy + s.y2) / 4
+  };
+}
+
+// src/whiteboard/label.ts
+var WHITEBOARD_LABEL_FONT = 14;
+var WHITEBOARD_NOTE_FONT = 12;
+var WHITEBOARD_LABEL_LINE = 1.25;
+var LABEL_PAD = 8;
+var WHITEBOARD_NOTE_PAD = 12;
+var NOTE_TIGHT_TOP = 6;
+var NOTE_TIGHT_BOTTOM = 3;
+var ELLIPSE_INSET = 0.15;
+var MIN_WRAP = 20;
+var WHITEBOARD_LABEL_MIN_FONT = 9;
+function whiteboardLabelWidth(box) {
+  if ("kind" in box && box.kind === "note") {
+    return Math.max(box.width - 2 * WHITEBOARD_NOTE_PAD, MIN_WRAP);
+  }
+  if ("shape" in box && box.shape === "queue") {
+    return Math.max(box.width - 2 * LABEL_PAD - 3 * QUEUE_CAP, MIN_WRAP);
+  }
+  const inset = "shape" in box && box.shape === "ellipse" ? box.width * ELLIPSE_INSET : 0;
+  return Math.max(box.width - 2 * (LABEL_PAD + inset), MIN_WRAP);
+}
+function whiteboardLabelShift(box) {
+  return "shape" in box && box.shape === "queue" ? -QUEUE_CAP / 2 : 0;
+}
+function whiteboardLabelHeight(box) {
+  if ("kind" in box && box.kind === "note") {
+    return Math.max(box.height - 2 * WHITEBOARD_NOTE_PAD, 0);
+  }
+  const shape = "shape" in box ? box.shape : "rectangle";
+  const inset = shape === "ellipse" ? box.height * ELLIPSE_INSET : shape === "database" ? 2 * CYLINDER_RY : 0;
+  return Math.max(box.height - 2 * (LABEL_PAD + inset), 0);
+}
+function wrapWhiteboardLabel(label, box) {
+  if (!label) return [];
+  const width = whiteboardLabelWidth(box);
+  const font = "kind" in box && box.kind === "note" ? WHITEBOARD_NOTE_FONT : WHITEBOARD_LABEL_FONT;
+  return label.split("\n").flatMap((line) => line ? wrapTextToWidth(line, font, width) : [""]);
+}
+function fitWhiteboardLabel(label, box) {
+  const isNote = "kind" in box && box.kind === "note";
+  const full = isNote ? WHITEBOARD_NOTE_FONT : WHITEBOARD_LABEL_FONT;
+  const pad = isNote ? WHITEBOARD_NOTE_PAD : LABEL_PAD;
+  if (!label) return { lines: [], font: full, top: pad };
+  const width = whiteboardLabelWidth(box);
+  const height = whiteboardLabelHeight(box);
+  const wrap = (font2, hardBreak) => label.split("\n").flatMap(
+    (line) => line ? wrapTextToWidth(line, font2, width, { hardBreak }) : [""]
+  );
+  const tall = (n, font2) => n * font2 * WHITEBOARD_LABEL_LINE > height;
+  for (let font2 = full; font2 >= WHITEBOARD_LABEL_MIN_FONT; font2--) {
+    const lines2 = wrap(font2, false);
+    if (!tall(lines2.length, font2) && lines2.every((l) => measureText(l, font2) <= width))
+      return { lines: lines2, font: font2, top: pad };
+  }
+  const font = WHITEBOARD_LABEL_MIN_FONT;
+  const lines = wrap(font, true);
+  const lh = font * WHITEBOARD_LABEL_LINE;
+  const room = isNote ? Math.max(
+    1,
+    Math.floor(
+      (box.height - NOTE_TIGHT_TOP - NOTE_TIGHT_BOTTOM - font) / lh
+    ) + 1
+  ) : Math.max(1, Math.floor(height / lh));
+  const top = isNote ? NOTE_TIGHT_TOP : pad;
+  if (lines.length <= room) return { lines, font, top };
+  const kept = lines.slice(0, room);
+  let last = kept[room - 1];
+  while (last && measureText(`${last}\u2026`, font) > width)
+    last = [...last].slice(0, -1).join("");
+  kept[room - 1] = `${last.trimEnd()}\u2026`;
+  return { lines: kept, font, top };
+}
+
+// src/whiteboard/renderer.ts
+function visibleWhiteboardIndices(parsed, options = {}) {
+  const all = parsed.elements;
+  const show = options.showNotes ?? !parsed.options.noNotes;
+  const out = [];
+  all.forEach((el, i) => {
+    if (show) return void out.push(i);
+    if (el.kind === "note") return;
+    if (el.kind === "arrow" || el.kind === "line") {
+      const { from, to } = whiteboardConnectorAttachments(el, all);
+      if (all[from]?.kind === "note" || all[to]?.kind === "note") return;
+    }
+    out.push(i);
+  });
+  return out;
+}
+function visibleWhiteboardElements(parsed, options = {}) {
+  const show = options.showNotes ?? !parsed.options.noNotes;
+  if (show) return parsed.elements;
+  return visibleWhiteboardIndices(parsed, options).map(
+    (i) => parsed.elements[i]
+  );
+}
+var WHITEBOARD_MARGIN = 24;
+var TITLE_BAND = 40;
+var SHAPE_STROKE = 2;
+var ARROW_STROKE = 2;
+var ARROW_HEAD_LEN = 12;
+var ARROW_HEAD_HALF = 6;
+var LABEL_HALO = 3;
+var DASH_ON = 3;
+var DASH_OFF = 4;
+var WHITEBOARD_TEXT_FONT = 16;
+var NOTE_TINT = 40;
+var NOTE_EDGE = 65;
+var SOLID_EDGE = 55;
+var NOTE_INK = 40;
+var NOTE_FOLD_OPACITY = 0.55;
+var BASELINE = 0.8;
+var IMAGE_NOT_UPLOADED = "image not uploaded";
+var PLACEHOLDER_MIN_FONT = 8;
+var SAFE_IMAGE_HREF_RE = /^(https?:|blob:|data:image\/)/i;
+function labelLines(label) {
+  return label.split("\n");
+}
+function widest(lines, font) {
+  return Math.max(0, ...lines.map((l) => measureText(l, font)));
+}
+function grow(b, x0, y0, x1, y1) {
+  b.minX = Math.min(b.minX, x0, x1);
+  b.minY = Math.min(b.minY, y0, y1);
+  b.maxX = Math.max(b.maxX, x0, x1);
+  b.maxY = Math.max(b.maxY, y0, y1);
+}
+function noteTextHeight(el) {
+  const { lines, font, top } = fitWhiteboardLabel(el.text, el);
+  return 2 * top + lines.length * font * WHITEBOARD_LABEL_LINE;
+}
+function whiteboardBounds(parsed, options = {}) {
+  const b = {
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity
+  };
+  const elements = visibleWhiteboardElements(parsed, options);
+  for (const el of elements) {
+    switch (el.kind) {
+      case "shape":
+      case "image":
+        grow(b, el.x, el.y, el.x + el.width, el.y + el.height);
+        break;
+      case "note":
+        grow(
+          b,
+          el.x,
+          el.y,
+          el.x + el.width,
+          el.y + Math.max(el.height, noteTextHeight(el))
+        );
+        break;
+      case "arrow":
+      case "line": {
+        const s = clipWhiteboardConnector(el, elements);
+        const pad = ARROW_HEAD_HALF + ARROW_STROKE;
+        grow(b, s.x1 - pad, s.y1 - pad, s.x2 + pad, s.y2 + pad);
+        grow(b, s.x1 + pad, s.y1 + pad, s.x2 - pad, s.y2 - pad);
+        if (s.cx !== void 0) {
+          for (let k = 1; k < CURVE_BOUND_STEPS; k++) {
+            const p = segmentPoint(s, k / CURVE_BOUND_STEPS);
+            grow(b, p.x - pad, p.y - pad, p.x + pad, p.y + pad);
+          }
+        }
+        if (el.label) {
+          const lines = labelLines(el.label);
+          const { x: mx, y: my } = whiteboardSegmentMidpoint(s);
+          const hw = widest(lines, WHITEBOARD_LABEL_FONT) / 2 + 4;
+          const hh = WHITEBOARD_LABEL_FONT + (lines.length - 1) * WHITEBOARD_LABEL_FONT * WHITEBOARD_LABEL_LINE / 2;
+          grow(b, mx - hw, my - hh, mx + hw, my + hh);
+        }
+        break;
+      }
+      case "text": {
+        const lines = labelLines(el.text);
+        grow(
+          b,
+          el.x,
+          el.y,
+          el.x + widest(lines, WHITEBOARD_TEXT_FONT),
+          el.y + lines.length * WHITEBOARD_TEXT_FONT * WHITEBOARD_LABEL_LINE
+        );
+        break;
+      }
+      case "ink": {
+        const r = el.width;
+        for (const p of el.points) grow(b, p.x - r, p.y - r, p.x + r, p.y + r);
+        break;
+      }
+    }
+  }
+  if (!Number.isFinite(b.minX)) return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+  return b;
+}
+var CURVE_BOUND_STEPS = 16;
+function segmentPoint(s, t) {
+  const u = 1 - t;
+  if (s.cx === void 0 || s.cy === void 0) {
+    return { x: u * s.x1 + t * s.x2, y: u * s.y1 + t * s.y2 };
+  }
+  return {
+    x: u * u * s.x1 + 2 * u * t * s.cx + t * t * s.x2,
+    y: u * u * s.y1 + 2 * u * t * s.cy + t * t * s.y2
+  };
+}
+function curveTrim(s, end, len) {
+  const tip = segmentPoint(s, end);
+  let near = end;
+  let far = 1 - end;
+  for (let n = 0; n < 24; n++) {
+    const m = (near + far) / 2;
+    const p = segmentPoint(s, m);
+    if (Math.hypot(p.x - tip.x, p.y - tip.y) < len) near = m;
+    else far = m;
+  }
+  return (near + far) / 2;
+}
+function whiteboardConnectorPaint(s, heads) {
+  const polygon = (tip, ux, uy, head) => {
+    const bx = tip.x - ux * head;
+    const by = tip.y - uy * head;
+    const px = -uy * ARROW_HEAD_HALF;
+    const py = ux * ARROW_HEAD_HALF;
+    return `${round2(tip.x)},${round2(tip.y)} ${round2(bx + px)},${round2(by + py)} ${round2(bx - px)},${round2(by - py)}`;
+  };
+  const dx = s.x2 - s.x1;
+  const dy = s.y2 - s.y1;
+  const len = Math.hypot(dx, dy);
+  if (s.cx === void 0 || s.cy === void 0) {
+    if (len === 0) return { heads: [] };
+    const ux = dx / len;
+    const uy = dy / len;
+    const headE = heads.end ? Math.min(ARROW_HEAD_LEN, len) : 0;
+    const headS = heads.start ? Math.min(ARROW_HEAD_LEN, len / 2) : 0;
+    const head = heads.start ? Math.min(headE, len / 2) : headE;
+    const out2 = [];
+    if (heads.end) out2.push(polygon({ x: s.x2, y: s.y2 }, ux, uy, head));
+    if (heads.start) out2.push(polygon({ x: s.x1, y: s.y1 }, -ux, -uy, headS));
+    return {
+      line: {
+        x1: round2(s.x1 + ux * headS),
+        y1: round2(s.y1 + uy * headS),
+        x2: round2(s.x2 - ux * head),
+        y2: round2(s.y2 - uy * head)
+      },
+      heads: out2
+    };
+  }
+  const tEnd = heads.end ? curveTrim(s, 1, ARROW_HEAD_LEN) : 1;
+  const tStart = heads.start ? curveTrim(s, 0, ARROW_HEAD_LEN) : 0;
+  const [t0, t1] = tEnd - tStart > 0 ? [tStart, tEnd] : [0, 1];
+  const p0 = segmentPoint(s, t0);
+  const p1 = segmentPoint(s, t1);
+  const w0 = (1 - t0) * (1 - t1);
+  const w1 = (1 - t0) * t1 + t0 * (1 - t1);
+  const w2 = t0 * t1;
+  const qx = w0 * s.x1 + w1 * s.cx + w2 * s.x2;
+  const qy = w0 * s.y1 + w1 * s.cy + w2 * s.y2;
+  const out = [];
+  const along = (tip, base) => {
+    const hx = tip.x - base.x;
+    const hy = tip.y - base.y;
+    const hl = Math.hypot(hx, hy);
+    if (hl > 0) out.push(polygon(tip, hx / hl, hy / hl, hl));
+  };
+  if (heads.end) along({ x: s.x2, y: s.y2 }, p1);
+  if (heads.start) along({ x: s.x1, y: s.y1 }, p0);
+  return {
+    path: `M${round2(p0.x)} ${round2(p0.y)}Q${round2(qx)} ${round2(qy)} ${round2(p1.x)} ${round2(p1.y)}`,
+    heads: out
+  };
+}
+function inkOutlinePath(points, width) {
+  const hasPressure = points.every((p) => p.pressure !== void 0);
+  const outline = getStroke(
+    points.map((p) => hasPressure ? [p.x, p.y, p.pressure] : [p.x, p.y]),
+    {
+      size: width,
+      thinning: 0.5,
+      smoothing: 0.5,
+      streamline: 0.5,
+      simulatePressure: !hasPressure,
+      last: true
+    }
+  );
+  if (outline.length === 0) return "";
+  const r = (n) => String(Math.round(n * 100) / 100);
+  const first = outline[0];
+  let d = `M${r(first[0])} ${r(first[1])}Q`;
+  for (let i = 0; i < outline.length; i++) {
+    const a = outline[i];
+    const b = outline[(i + 1) % outline.length];
+    d += `${r(a[0])} ${r(a[1])} ${r((a[0] + b[0]) / 2)} ${r((a[1] + b[1]) / 2)} `;
+  }
+  return d.trimEnd() + "Z";
+}
+function renderWhiteboard(container, parsed, palette, isDark, options = {}) {
+  const base = themeBaseBg(palette, isDark);
+  const colorOf = (c) => c === "ink" ? palette.text : palette.colors[c] ?? palette.text;
+  const fillOf = (c) => c === "ink" ? base : shapeFill(palette, colorOf(c), isDark);
+  const showTitle = !!parsed.title && !parsed.options.noTitle;
+  const titleOffset = showTitle ? TITLE_BAND : 0;
+  const elements = visibleWhiteboardElements(parsed, options);
+  const b = whiteboardBounds(parsed, options);
+  const contentW = b.maxX - b.minX;
+  const contentH = b.maxY - b.minY;
+  const titleW = showTitle ? measureText(parsed.title, TITLE_FONT_SIZE, { bold: true }) : 0;
+  const width = Math.ceil(Math.max(contentW, titleW) + 2 * WHITEBOARD_MARGIN);
+  const height = Math.ceil(contentH + 2 * WHITEBOARD_MARGIN + titleOffset);
+  const tx = WHITEBOARD_MARGIN - b.minX + (width - 2 * WHITEBOARD_MARGIN - contentW) / 2;
+  const ty = WHITEBOARD_MARGIN + titleOffset - b.minY;
+  d3.select(container).selectAll("*").remove();
+  const svg = d3.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  if (showTitle) {
+    renderChartTitle(
+      svg,
+      parsed.title,
+      parsed.titleLineNumber,
+      width,
+      palette.text
+    );
+  }
+  const canvas = svg.append("g").attr("class", "whiteboard-canvas").attr("transform", `translate(${round2(tx)},${round2(ty)})`);
+  const halo = palette.bg;
+  const centredLabel = (g, { lines, font }, cx, cy, color, ground) => {
+    if (lines.length === 0) return;
+    const lh = font * WHITEBOARD_LABEL_LINE;
+    const top = cy - lines.length * lh / 2 + lh * BASELINE;
+    const t = g.append("text").attr("class", "whiteboard-label").attr("text-anchor", "middle").attr("font-size", font).attr("fill", color).attr("stroke", ground).attr("stroke-width", LABEL_HALO).attr("stroke-linejoin", "round").attr("paint-order", "stroke");
+    appendLines(t, lines, cx, top, lh);
+  };
+  const drawImage = (g, el) => {
+    const resolved = options.resolveImage ? options.resolveImage(el.ref) : /^https:\/\//i.test(el.ref) ? el.ref : void 0;
+    if (resolved !== void 0 && SAFE_IMAGE_HREF_RE.test(resolved)) {
+      g.append("image").attr("x", el.x).attr("y", el.y).attr("width", el.width).attr("height", el.height).attr("preserveAspectRatio", "xMidYMid meet").attr("href", resolved);
+      return;
+    }
+    g.append("rect").attr("class", "whiteboard-image-placeholder").attr("x", el.x).attr("y", el.y).attr("width", el.width).attr("height", el.height).attr("rx", 4).attr("fill", mix(palette.textMuted, base, 10)).attr("stroke", mix(palette.textMuted, base, 50)).attr("stroke-width", 1).attr("stroke-dasharray", "6 4");
+    const fit = Math.min(
+      WHITEBOARD_LABEL_FONT,
+      (el.width - 8) / (IMAGE_NOT_UPLOADED.length * 0.55)
+    );
+    if (fit < PLACEHOLDER_MIN_FONT) return;
+    g.append("text").attr("x", el.x + el.width / 2).attr("y", el.y + el.height / 2 + fit * 0.35).attr("text-anchor", "middle").attr("font-size", round2(fit)).attr("fill", palette.textMuted).text(IMAGE_NOT_UPLOADED);
+  };
+  const drawElement = (el) => {
+    const g = canvas.append("g").attr("class", `whiteboard-${el.kind === "shape" ? el.shape : el.kind}`).attr("data-line-number", el.lineNumber);
+    switch (el.kind) {
+      case "shape": {
+        const hue = colorOf(el.color);
+        const fill = el.fill === "solid" ? hue : el.fill === "outline" ? "none" : fillOf(el.color);
+        const labelColor = el.fill === "solid" ? contrastText(hue, base, palette.text) : palette.text;
+        const stroke = el.fill === "solid" ? mix(hue, labelColor, SOLID_EDGE) : hue;
+        const cx = el.x + el.width / 2;
+        const cy = el.y + el.height / 2;
+        if (el.shape === "rectangle") {
+          g.append("rect").attr("x", el.x).attr("y", el.y).attr("width", el.width).attr("height", el.height).attr("rx", Math.min(RECT_RADIUS, el.width / 2, el.height / 2)).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", SHAPE_STROKE);
+        } else if (el.shape === "ellipse") {
+          g.append("ellipse").attr("cx", cx).attr("cy", cy).attr("rx", el.width / 2).attr("ry", el.height / 2).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", SHAPE_STROKE);
+        } else {
+          const inner = g.append("g").attr("transform", `translate(${round2(cx)},${round2(cy)})`);
+          if (el.shape === "database") {
+            drawCylinderCard(inner, el.width, el.height, fill, stroke, false);
+          } else {
+            drawQueueCard(inner, el.width, el.height, fill, stroke);
+          }
+        }
+        centredLabel(
+          g,
+          fitWhiteboardLabel(el.label, el),
+          cx + whiteboardLabelShift(el),
+          cy,
+          labelColor,
+          fill === "none" ? halo : fill
+        );
+        break;
+      }
+      case "note": {
+        const hue = colorOf(el.color);
+        const edge = mix(hue, base, NOTE_EDGE);
+        const { x, y, width: w, height: h } = el;
+        const f = whiteboardNoteFold(w, h);
+        g.append("path").attr("d", `M${x} ${y}h${w - f}l${f} ${f}v${h - f}h${-w}z`).attr("fill", mix(hue, base, NOTE_TINT)).attr("stroke", edge).attr("stroke-width", 1).attr("stroke-linejoin", "round");
+        if (f > 2) {
+          g.append("path").attr("class", "whiteboard-note-fold").attr("d", `M${x + w - f} ${y}v${f - 2}q0 2 2 2h${f - 2}z`).attr("fill", edge).attr("opacity", NOTE_FOLD_OPACITY);
+        }
+        const { lines, font, top } = fitWhiteboardLabel(el.text, el);
+        if (lines.length > 0) {
+          const lh = font * WHITEBOARD_LABEL_LINE;
+          const t = g.append("text").attr("class", "whiteboard-label").attr("font-size", font).attr("fill", mix(hue, palette.text, NOTE_INK));
+          appendLines(
+            t,
+            lines,
+            el.x + WHITEBOARD_NOTE_PAD,
+            el.y + top + lh * BASELINE,
+            lh
+          );
+        }
+        break;
+      }
+      case "arrow":
+      case "line": {
+        const color = colorOf(el.color);
+        const s = clipWhiteboardConnector(el, elements);
+        const paint = whiteboardConnectorPaint(s, {
+          start: el.kind === "arrow" && el.heads === "both",
+          end: el.kind === "arrow"
+        });
+        let stroke = null;
+        if (paint.line) {
+          stroke = g.append("line").attr("x1", paint.line.x1).attr("y1", paint.line.y1).attr("x2", paint.line.x2).attr("y2", paint.line.y2);
+        } else if (paint.path) {
+          stroke = g.append("path").attr("d", paint.path).attr("fill", "none");
+        }
+        if (stroke) {
+          stroke.attr("stroke", color).attr("stroke-width", ARROW_STROKE).attr("stroke-linecap", "round");
+          if (el.style === "dashed") {
+            stroke.attr(
+              "stroke-dasharray",
+              `${DASH_ON * ARROW_STROKE} ${DASH_OFF * ARROW_STROKE}`
+            );
+          }
+        }
+        for (const points of paint.heads) {
+          g.append("polygon").attr("points", points).attr("fill", color);
+        }
+        if (el.label) {
+          const lines = labelLines(el.label);
+          const mid = whiteboardSegmentMidpoint(s);
+          const mx = round2(mid.x);
+          const lh = WHITEBOARD_LABEL_FONT * WHITEBOARD_LABEL_LINE;
+          const firstY = mid.y + WHITEBOARD_LABEL_FONT * 0.35 - (lines.length - 1) * lh / 2;
+          const t = g.append("text").attr("class", "whiteboard-label").attr("x", mx).attr("y", round2(firstY)).attr("text-anchor", "middle").attr("font-size", WHITEBOARD_LABEL_FONT).attr("fill", palette.text).attr("stroke", halo).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("paint-order", "stroke");
+          if (lines.length === 1) t.text(el.label);
+          else appendLines(t, lines, mx, firstY, lh);
+        }
+        break;
+      }
+      case "text": {
+        const lines = labelLines(el.text);
+        const firstY = el.y + WHITEBOARD_TEXT_FONT * BASELINE;
+        const t = g.append("text").attr("x", el.x).attr("y", round2(firstY)).attr("font-size", WHITEBOARD_TEXT_FONT).attr("fill", colorOf(el.color));
+        if (lines.length === 1) t.text(el.text);
+        else
+          appendLines(
+            t,
+            lines,
+            el.x,
+            firstY,
+            WHITEBOARD_TEXT_FONT * WHITEBOARD_LABEL_LINE
+          );
+        break;
+      }
+      case "image":
+        drawImage(g, el);
+        break;
+      case "ink": {
+        const d = inkOutlinePath(el.points, el.width);
+        if (d) g.append("path").attr("d", d).attr("fill", colorOf(el.color));
+        break;
+      }
+    }
+  };
+  for (const el of elements) drawElement(el);
+}
+function appendLines(t, lines, x, firstY, lh) {
+  lines.forEach((ln, i) => {
+    if (!ln) return;
+    t.append("tspan").attr("x", round2(x)).attr("y", round2(firstY + i * lh)).text(ln);
+  });
+}
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
+
+export {
+  whiteboardNoteFold,
+  whiteboardShapeContains,
+  whiteboardShapeAt,
+  whiteboardConnectorAttachments,
+  clipWhiteboardConnector,
+  whiteboardBendHandle,
+  whiteboardBendFor,
+  whiteboardSegmentMidpoint,
+  WHITEBOARD_NOTE_FONT,
+  WHITEBOARD_LABEL_MIN_FONT,
+  whiteboardLabelWidth,
+  whiteboardLabelShift,
+  whiteboardLabelHeight,
+  wrapWhiteboardLabel,
+  fitWhiteboardLabel,
+  visibleWhiteboardIndices,
+  visibleWhiteboardElements,
+  IMAGE_NOT_UPLOADED,
+  whiteboardBounds,
+  whiteboardConnectorPaint,
+  inkOutlinePath,
+  renderWhiteboard
+};