@mocanvas/mocanvas 1.0.0 → 4.0.0

package/dist/chunk-DMCI6V5Y.js

@@ -0,0 +1,3370 @@
+import { tipTapDefaultExtensions, richTextToHtml, isRichText, richTextToText, getRichTextEditorFactory, applyPlainTextToRichText, propsOf, readNumber, readText, readRichText, readStyle, readEnum, readPoint, arrowShapeMigrations, arrowShapeProps, toRichText, svgPath, frameShapeProps, frameShapeMigrations, readString, rectPath, readBoolean, geoShapeProps, noteShapeProps, noteShapeMigrations, richTextToBlocks, textShapeProps, textShapeMigrations, videoShapeProps, videoShapeMigrations, safeHref, getBookmarkCard, getBookmarkLayout, BOOKMARK_STROKE_WIDTH, BOOKMARK_STROKE, BOOKMARK_FILL, BOOKMARK_RADIUS, BOOKMARK_BANNER_FILL, BOOKMARK_TITLE_FONT_SIZE, BOOKMARK_TITLE_COLOR, BOOKMARK_META_COLOR, BOOKMARK_TEXT_FONT_SIZE, BOOKMARK_TEXT_COLOR, BOOKMARK_META_FONT_SIZE, getEmbedDefinition, EMBED_PLACEHOLDER_STROKE, EMBED_PLACEHOLDER_FILL, EMBED_RADIUS, EMBED_PLACEHOLDER_PADDING, EMBED_PLACEHOLDER_FONT_SIZE, EMBED_PLACEHOLDER_TEXT } from './chunk-OCYJAMXT.js';
+import { getGeoGeometry, arcToCubicSegments, pathWordsToSvgD } from './chunk-OMUOD53T.js';
+import { DEFAULT_THEME, GEO_SHAPE_KINDS, createBuiltInShapePropsMigrationIds, createShapePropsMigrationSequence, ARROW_SHAPE_KINDS, Vec, Polyline2d, CubicSpline2d, Polygon2d, Box, Group2d, STROKE_SIZES, hexToRgba, getColorValue, DEFAULT_FILL_TOKENS, DefaultFontFaces, useEditor, DefaultFontStyle, ARROWHEAD_KINDS, DefaultSizeStyle, DefaultDashStyle, DefaultFillStyle, DefaultLabelColorStyle, DefaultColorStyle, getDefaultDisplayValues, ShapeUtil, FONT_SIZES, Rectangle2d, getDisplayValues, BaseFrameLikeShapeUtil, DefaultVerticalAlignStyle, DefaultHorizontalAlignStyle, GeoShapeGeoStyle, BaseBoxShapeUtil, GEO_KIND, LIGHT_THEME, PATH_OP } from '@mocanvas/editor';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { useMemo, useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var EPS = 1e-6;
+function normalizeAngle(a) {
+  let r = a % (Math.PI * 2);
+  if (r > Math.PI) r -= Math.PI * 2;
+  if (r <= -Math.PI) r += Math.PI * 2;
+  return r;
+}
+function getArrowBody(start, end, bend) {
+  const s = Vec.From(start);
+  const e = Vec.From(end);
+  const chord = Vec.Sub(e, s);
+  const halfChord = Vec.Len(chord) / 2;
+  if (Math.abs(bend) < EPS || halfChord < EPS) return { kind: "straight", start: s, end: e };
+  const u = Vec.Uni(chord);
+  const n = Vec.Per(u);
+  const mid = Vec.Lrp(s, e, 0.5);
+  const b = Math.abs(bend);
+  const sign = Math.sign(bend);
+  const radius = (halfChord * halfChord + b * b) / (2 * b);
+  const center = Vec.Add(mid, Vec.Mul(n, bend - sign * radius));
+  const arcMid = Vec.Add(mid, Vec.Mul(n, bend));
+  const startAngle = Vec.Angle(center, s);
+  const endAngle = Vec.Angle(center, e);
+  let sweep = normalizeAngle(endAngle - startAngle);
+  const midAngle = startAngle + sweep / 2;
+  const candidate = new Vec(center.x + radius * Math.cos(midAngle), center.y + radius * Math.sin(midAngle));
+  if (Vec.Dist(candidate, arcMid) > 1e-3 * Math.max(1, radius)) {
+    sweep = sweep - Math.sign(sweep || 1) * Math.PI * 2;
+  }
+  return { kind: "arc", center, radius, startAngle, sweep };
+}
+function cumulativeLengths(points) {
+  const out = [0];
+  for (let i = 1; i < points.length; i++) out.push(out[i - 1] + Vec.Dist(points[i - 1], points[i]));
+  return out;
+}
+function segmentAt(lengths, distance) {
+  for (let i = 1; i < lengths.length; i++) {
+    if (distance <= lengths[i] || i === lengths.length - 1) return i - 1;
+  }
+  return 0;
+}
+function pointAtDistance(points, lengths, distance) {
+  if (points.length === 0) return new Vec();
+  if (points.length === 1) return points[0].clone();
+  const i = segmentAt(lengths, distance);
+  const segment = lengths[i + 1] - lengths[i];
+  const t = segment < EPS ? 0 : (distance - lengths[i]) / segment;
+  return Vec.Lrp(points[i], points[i + 1], Math.max(0, Math.min(1, t)));
+}
+function getBodyLength(body) {
+  if (body.kind === "straight") return Vec.Dist(body.start, body.end);
+  if (body.kind === "elbow") return cumulativeLengths(body.points).at(-1) ?? 0;
+  return Math.abs(body.sweep) * body.radius;
+}
+function getPointOnBody(body, t) {
+  if (body.kind === "straight") return Vec.Lrp(body.start, body.end, t);
+  if (body.kind === "elbow") {
+    const lengths = cumulativeLengths(body.points);
+    return pointAtDistance(body.points, lengths, (lengths.at(-1) ?? 0) * t);
+  }
+  const a = body.startAngle + body.sweep * t;
+  return new Vec(body.center.x + body.radius * Math.cos(a), body.center.y + body.radius * Math.sin(a));
+}
+function getTangentOnBody(body, t) {
+  if (body.kind === "straight") return Vec.Uni(Vec.Sub(body.end, body.start));
+  if (body.kind === "elbow") {
+    const points = body.points;
+    if (points.length < 2) return new Vec(1, 0);
+    const lengths = cumulativeLengths(points);
+    const i = segmentAt(lengths, (lengths.at(-1) ?? 0) * Math.max(0, Math.min(1, t)));
+    for (let step = 0; step < points.length; step++) {
+      for (const j of [i + step, i - step]) {
+        if (j < 0 || j >= points.length - 1) continue;
+        const d = Vec.Sub(points[j + 1], points[j]);
+        if (Vec.Len(d) > EPS) return Vec.Uni(d);
+      }
+    }
+    return new Vec(1, 0);
+  }
+  const a = body.startAngle + body.sweep * t;
+  const dir = Math.sign(body.sweep) || 1;
+  return new Vec(-Math.sin(a) * dir, Math.cos(a) * dir);
+}
+function shortenBody(body, startBy, endBy) {
+  const length = getBodyLength(body);
+  if (length < EPS) return body;
+  const total = startBy + endBy;
+  const budget = length * 0.9;
+  const scale = total > budget ? budget / total : 1;
+  const s = startBy * scale;
+  const e = endBy * scale;
+  if (body.kind === "straight") {
+    return { kind: "straight", start: getPointOnBody(body, s / length), end: getPointOnBody(body, 1 - e / length) };
+  }
+  if (body.kind === "elbow") {
+    const lengths = cumulativeLengths(body.points);
+    const from = s;
+    const to = length - e;
+    const points = [pointAtDistance(body.points, lengths, from)];
+    for (let i = 1; i < body.points.length - 1; i++) {
+      const at = lengths[i];
+      if (at > from + EPS && at < to - EPS) points.push(body.points[i].clone());
+    }
+    points.push(pointAtDistance(body.points, lengths, to));
+    return { kind: "elbow", points };
+  }
+  const dir = Math.sign(body.sweep) || 1;
+  const dStart = s / body.radius * dir;
+  const dEnd = e / body.radius * dir;
+  return {
+    kind: "arc",
+    center: body.center,
+    radius: body.radius,
+    startAngle: body.startAngle + dStart,
+    sweep: body.sweep - dStart - dEnd
+  };
+}
+function bodyToGeometry(body) {
+  if (body.kind === "straight") return new Polyline2d({ points: [body.start, body.end] });
+  if (body.kind === "elbow") return new Polyline2d({ points: body.points });
+  const count = Math.max(2, Math.ceil(Math.abs(body.sweep) / (Math.PI / 2)));
+  return new CubicSpline2d({
+    segments: arcToCubicSegments(body.center, body.radius, body.startAngle, body.sweep, count),
+    isClosed: false,
+    isFilled: false
+  });
+}
+function getArrowheadLength(strokeWidth, bodyLength) {
+  return Math.max(0, Math.min(Math.max(12, strokeWidth * 4), bodyLength / 2.5));
+}
+function getArrowheadInset(kind, length) {
+  switch (kind) {
+    case "triangle":
+    case "inverted":
+    case "diamond":
+    case "square":
+    case "dot":
+      return length;
+    case "arrow":
+    case "bar":
+    case "pipe":
+    case "none":
+      return 0;
+  }
+}
+var CHEVRON_HALF_WIDTH = Math.tan(Math.PI / 6);
+function getArrowheadGeometry(kind, tip, dir, length) {
+  if (kind === "none" || length <= 0) return null;
+  const t = Vec.From(tip);
+  const d = Vec.From(dir);
+  const p = Vec.Per(d);
+  const back = Vec.Sub(t, Vec.Mul(d, length));
+  const wing = Vec.Mul(p, length * CHEVRON_HALF_WIDTH);
+  switch (kind) {
+    case "arrow":
+      return new Polyline2d({ points: [Vec.Add(back, wing), t, Vec.Sub(back, wing)] });
+    case "triangle":
+      return new Polygon2d({ points: [t, Vec.Add(back, wing), Vec.Sub(back, wing)], isFilled: true });
+    case "inverted":
+      return new Polygon2d({ points: [back, Vec.Add(t, wing), Vec.Sub(t, wing)], isFilled: true });
+    case "square": {
+      const half = Vec.Mul(p, length / 2);
+      return new Polygon2d({
+        points: [Vec.Add(t, half), Vec.Sub(t, half), Vec.Sub(back, half), Vec.Add(back, half)],
+        isFilled: true
+      });
+    }
+    case "diamond": {
+      const mid = Vec.Lrp(t, back, 0.5);
+      const half = Vec.Mul(p, length / 2);
+      return new Polygon2d({ points: [t, Vec.Add(mid, half), back, Vec.Sub(mid, half)], isFilled: true });
+    }
+    case "dot": {
+      const center = Vec.Lrp(t, back, 0.5);
+      return new CubicSpline2d({
+        segments: arcToCubicSegments(center, length / 2, 0, Math.PI * 2, 4),
+        isClosed: true,
+        isFilled: true
+      });
+    }
+    case "bar": {
+      const half = Vec.Mul(p, length / 2);
+      return new Polyline2d({ points: [Vec.Add(t, half), Vec.Sub(t, half)] });
+    }
+    case "pipe": {
+      const half = Vec.Mul(p, length * 0.35);
+      return new Polyline2d({ points: [Vec.Add(t, half), Vec.Sub(t, half)] });
+    }
+  }
+}
+function labelGapOnBody(body, box) {
+  const SAMPLES = 192;
+  const minX = box.x;
+  const maxX = box.x + box.w;
+  const minY = box.y;
+  const maxY = box.y + box.h;
+  let from = -1;
+  let to = -1;
+  for (let i = 0; i <= SAMPLES; i++) {
+    const t = i / SAMPLES;
+    const p = getPointOnBody(body, t);
+    if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) continue;
+    if (from < 0) from = t;
+    to = t;
+  }
+  if (from < 0) return null;
+  const half = 0.5 / SAMPLES;
+  const gap = { from: Math.max(0, from - half), to: Math.min(1, to + half) };
+  if (gap.to - gap.from > 0.9) return null;
+  return gap;
+}
+function getBendFromPoint(start, end, point) {
+  const chord = Vec.Sub(end, start);
+  if (Vec.Len(chord) < EPS) return 0;
+  const n = Vec.Per(Vec.Uni(chord));
+  const mid = Vec.Lrp(start, end, 0.5);
+  const bend = Vec.Dot(Vec.Sub(point, mid), n);
+  return Math.abs(bend) < 1 ? 0 : bend;
+}
+
+// src/bindings/arrow-terminals.ts
+function applyTransform(m, p) {
+  return new Vec(m.a * p.x + m.c * p.y + m.e, m.b * p.x + m.d * p.y + m.f);
+}
+function getArrowBindings(editor, arrow) {
+  const out = {};
+  for (const binding of editor.getBindingsFromShape(arrow, "arrow")) {
+    out[binding.props.terminal] = binding;
+  }
+  return out;
+}
+function getAnchorInShapeSpace(editor, shape, normalizedAnchor) {
+  const b = editor.getShapeGeometry(shape).bounds;
+  return new Vec(b.x + b.w * normalizedAnchor.x, b.y + b.h * normalizedAnchor.y);
+}
+function getArrowBindingTargetAtPoint(editor, arrow, pagePoint) {
+  const margin = editor.options.hitTestMargin / editor.getZoomLevel();
+  const ancestors = /* @__PURE__ */ new Set();
+  for (let p = editor.getShapeParent(arrow); p; p = editor.getShapeParent(p)) ancestors.add(p.id);
+  const shapes = editor.getCurrentPageShapesSorted();
+  for (let i = shapes.length - 1; i >= 0; i--) {
+    const shape = shapes[i];
+    if (shape.id === arrow.id || shape.type === "arrow" || shape.isLocked || ancestors.has(shape.id)) continue;
+    if (!editor.getShapeUtil(shape).canBind({ fromShape: arrow, toShape: shape, bindingType: "arrow" })) continue;
+    const bounds = editor.getShapePageBounds(shape);
+    if (!bounds || !Box.ContainsPoint(bounds, pagePoint, margin)) continue;
+    const local = editor.getPointInShapeSpace(shape, pagePoint);
+    if (editor.getShapeGeometry(shape).hitTestPoint(local, margin, true)) return shape;
+  }
+  return void 0;
+}
+function getNormalizedAnchor(editor, shape, pagePoint) {
+  const local = editor.getPointInShapeSpace(shape, pagePoint);
+  const b = editor.getShapeGeometry(shape).bounds;
+  const clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 0.5;
+  return new Vec(clamp(b.w === 0 ? 0.5 : (local.x - b.x) / b.w), clamp(b.h === 0 ? 0.5 : (local.y - b.y) / b.h));
+}
+function getOutlineSegments(geometry) {
+  if (geometry.isLabel) return [];
+  if (geometry instanceof Group2d) return geometry.children.flatMap(getOutlineSegments);
+  const v = geometry.vertices;
+  const out = [];
+  if (v.length < 2) return out;
+  const n = geometry.isClosed ? v.length : v.length - 1;
+  for (let i = 0; i < n; i++) out.push([v[i], v[(i + 1) % v.length]]);
+  return out;
+}
+function intersectSegments(a1, a2, b1, b2) {
+  const rx = a2.x - a1.x;
+  const ry = a2.y - a1.y;
+  const sx = b2.x - b1.x;
+  const sy = b2.y - b1.y;
+  const denom = rx * sy - ry * sx;
+  if (Math.abs(denom) < 1e-12) return null;
+  const qx = b1.x - a1.x;
+  const qy = b1.y - a1.y;
+  const t = (qx * sy - qy * sx) / denom;
+  const u = (qx * ry - qy * rx) / denom;
+  if (t < 0 || t > 1 || u < 0 || u > 1) return null;
+  return new Vec(a1.x + rx * t, a1.y + ry * t);
+}
+function firstCrossing(path, segments) {
+  for (let i = 0; i < path.length - 1; i++) {
+    const p0 = path[i];
+    const p1 = path[i + 1];
+    let best = null;
+    let bestD = Infinity;
+    for (const [s0, s1] of segments) {
+      const hit = intersectSegments(p0, p1, s0, s1);
+      if (!hit) continue;
+      const d = Vec.Dist2(p0, hit);
+      if (d < bestD) {
+        bestD = d;
+        best = hit;
+      }
+    }
+    if (best) return best;
+  }
+  return null;
+}
+function sampleBody(from, to, bend, reverse) {
+  const body = reverse ? getArrowBody(to, from, bend) : getArrowBody(from, to, bend);
+  if (body.kind !== "arc") return [from, to];
+  const count = Math.max(8, Math.min(128, Math.ceil(Math.abs(body.sweep) * body.radius / 4)));
+  const pts = [];
+  for (let i = 0; i <= count; i++) {
+    const t = reverse ? 1 - i / count : i / count;
+    pts.push(getPointOnBody(body, t));
+  }
+  return pts;
+}
+function getBoundElbowAxes(editor, arrow, terminals) {
+  const bindings = getArrowBindings(editor, arrow);
+  const out = {};
+  for (const terminal of ["start", "end"]) {
+    const binding = bindings[terminal];
+    const shape = binding ? editor.getShape(binding.toId) : void 0;
+    if (!shape) continue;
+    const m = editor.getShapePageTransform(shape);
+    const corners = editor.getShapeGeometry(shape).bounds.corners.map((p2) => editor.getPointInShapeSpace(arrow, applyTransform(m, p2)));
+    const box = Box.FromPoints(corners);
+    if (box.w < 1e-6 && box.h < 1e-6) continue;
+    const p = terminals[terminal];
+    const dx = Math.min(Math.abs(p.x - box.minX), Math.abs(p.x - box.maxX));
+    const dy = Math.min(Math.abs(p.y - box.minY), Math.abs(p.y - box.maxY));
+    out[terminal] = dx <= dy ? "x" : "y";
+  }
+  return out;
+}
+var ARROW_TERMINAL_GAP_STROKES = 2.7;
+function getArrowTerminalGap(size, scale = 1) {
+  return STROKE_SIZES[size] * scale * ARROW_TERMINAL_GAP_STROKES;
+}
+function pullBack(point, from, distance) {
+  const d = Vec.Dist(point, from);
+  if (d <= 1e-6) return point;
+  return Vec.Lrp(point, from, Math.min(distance, d) / d);
+}
+function getArrowTerminalsInArrowSpace(editor, arrow) {
+  const bindings = getArrowBindings(editor, arrow);
+  const startShape = bindings.start ? editor.getShape(bindings.start.toId) : void 0;
+  const endShape = bindings.end ? editor.getShape(bindings.end.toId) : void 0;
+  const anchorFor2 = (terminal, binding, shape) => {
+    if (!binding || !shape) return Vec.From(arrow.props[terminal]);
+    const local = getAnchorInShapeSpace(editor, shape, binding.props.normalizedAnchor);
+    const page = applyTransform(editor.getShapePageTransform(shape), local);
+    return editor.getPointInShapeSpace(arrow, page);
+  };
+  const startAnchor = anchorFor2("start", bindings.start, startShape);
+  const endAnchor = anchorFor2("end", bindings.end, endShape);
+  const outlineInArrowSpace = (shape) => {
+    const m = editor.getShapePageTransform(shape);
+    const toArrow = (p) => editor.getPointInShapeSpace(arrow, applyTransform(m, p));
+    return getOutlineSegments(editor.getShapeGeometry(shape)).map(([a, b]) => [toArrow(a), toArrow(b)]);
+  };
+  const snap = (terminal, binding, shape, anchor, other) => {
+    if (!binding || !shape || binding.props.isExact) return anchor;
+    if (Vec.Dist2(anchor, other) < 1e-12) return anchor;
+    const path = sampleBody(other, anchor, arrow.props.bend, terminal === "start");
+    const crossing = firstCrossing(path, outlineInArrowSpace(shape));
+    if (!crossing) return anchor;
+    return pullBack(crossing, other, getArrowTerminalGap(arrow.props.size, arrow.props.scale));
+  };
+  return {
+    start: snap("start", bindings.start, startShape, startAnchor, endAnchor),
+    end: snap("end", bindings.end, endShape, endAnchor, startAnchor)
+  };
+}
+var FALLBACK_THEME_COLORS = DEFAULT_THEME.colors.light;
+function getTheme(source) {
+  return source?.getCurrentTheme?.() ?? DEFAULT_THEME;
+}
+function getThemeColors(source) {
+  const theme = getTheme(source);
+  const mode = source?.getColorMode?.() ?? "light";
+  return theme.colors[mode] ?? theme.colors.light;
+}
+function getStrokeRgba(color, colors = FALLBACK_THEME_COLORS) {
+  return hexToRgba(getColorValue(colors, color, "solid"));
+}
+function getFillRgba(color, fill, colors = FALLBACK_THEME_COLORS) {
+  const token = DEFAULT_FILL_TOKENS[fill] ?? "none";
+  if (token === "none") return 0;
+  if (token === "paper") return hexToRgba(colors.solid);
+  return hexToRgba(getColorValue(colors, color, token));
+}
+function getNoteFillRgba(color, colors = FALLBACK_THEME_COLORS) {
+  return hexToRgba(getColorValue(colors, color, "noteFill"));
+}
+function getTextCssColor(color, colors = FALLBACK_THEME_COLORS) {
+  return getColorValue(colors, color, "solid");
+}
+function getNoteTextCssColor(color, colors = FALLBACK_THEME_COLORS) {
+  return getColorValue(colors, color, "noteText");
+}
+function getFontFamily(font, theme = DEFAULT_THEME) {
+  return theme.fonts[font] ?? theme.fonts.draw;
+}
+function getLabelFontFaces(font) {
+  const set = DefaultFontFaces[`tldraw_${font}`];
+  if (set === void 0) return [];
+  const faces = [];
+  for (const byWeight of Object.values(set)) {
+    for (const face of Object.values(byWeight)) faces.push(face);
+  }
+  return faces;
+}
+function getDashId(dash) {
+  switch (dash) {
+    case "dashed":
+      return 1;
+    case "dotted":
+      return 2;
+    case "draw":
+      return 3;
+    default:
+      return 0;
+  }
+}
+var FRAME_FILL = "#ffffff";
+var FRAME_STROKE = "#717171";
+var FRAME_STROKE_WIDTH = 1;
+var FRAME_NAME_COLOR = "#5f5f5f";
+var FRAME_NAME_FONT_SIZE = 12;
+var FRAME_NAME_OFFSET = 24;
+var FRAME_NAME_GAP = 6;
+var FRAME_NAME_HEIGHT = FRAME_NAME_OFFSET - FRAME_NAME_GAP;
+var NOTE_GRADIENT_TOP_SCALE = 0.9785;
+var NOTE_SHADOW_COLOR = "#152223";
+var NOTE_SHADOW_OPACITY = 0.36;
+var NOTE_SHADOW_OFFSET_Y = 12;
+var NOTE_SHADOW_BLUR = 13;
+var NOTE_SHADOW_SPREAD = -9;
+function scaleHexColor(hex, factor) {
+  const n = Number.parseInt(hex.slice(1), 16);
+  const ch = (shift) => Math.max(0, Math.min(255, Math.round((n >> shift & 255) * factor)));
+  return `#${((ch(16) << 16 | ch(8) << 8 | ch(0)) >>> 0).toString(16).padStart(6, "0")}`;
+}
+function hexToCssRgba(hex, alpha) {
+  const n = Number.parseInt(hex.slice(1), 16);
+  return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+}
+function getNoteFillCssColor(color, colors = FALLBACK_THEME_COLORS) {
+  return getColorValue(colors, color, "noteFill");
+}
+function getNoteGradientTopFrom(fill) {
+  if (!/^#[0-9a-fA-F]{6}$/.test(fill)) return fill;
+  return scaleHexColor(fill, NOTE_GRADIENT_TOP_SCALE);
+}
+function getNoteGradientTopCssColor(color, colors = FALLBACK_THEME_COLORS) {
+  return getNoteGradientTopFrom(getNoteFillCssColor(color, colors));
+}
+function getNoteBodyGradientCss(color, colors = FALLBACK_THEME_COLORS) {
+  return `linear-gradient(to bottom, ${getNoteGradientTopCssColor(color, colors)} 0%, ${getNoteFillCssColor(color, colors)} 100%)`;
+}
+function getNoteShadowCss(scale = 1) {
+  const dy = NOTE_SHADOW_OFFSET_Y * scale;
+  const blur = NOTE_SHADOW_BLUR * scale;
+  const spread = NOTE_SHADOW_SPREAD * scale;
+  return `0 ${dy}px ${blur}px ${spread}px ${hexToCssRgba(NOTE_SHADOW_COLOR, NOTE_SHADOW_OPACITY)}`;
+}
+function getNoteShadowSvgRect(w, h, scale = 1) {
+  const inset = -NOTE_SHADOW_SPREAD * scale;
+  return {
+    x: inset,
+    y: NOTE_SHADOW_OFFSET_Y * scale + inset,
+    w: Math.max(0, w - inset * 2),
+    h: Math.max(0, h - inset * 2),
+    // CSS blur radius is twice the Gaussian standard deviation.
+    stdDeviation: NOTE_SHADOW_BLUR * scale / 2
+  };
+}
+
+// src/shapes/text-helpers.ts
+var LINE_HEIGHT = 1.3;
+var AVG_CHAR_WIDTH = 0.6;
+function estimateTextSize(text, fontSize, maxWidth = Infinity) {
+  const charW = fontSize * AVG_CHAR_WIDTH;
+  const charsPerLine = Number.isFinite(maxWidth) && charW > 0 ? Math.max(1, Math.floor(maxWidth / charW)) : Infinity;
+  let lines = 0;
+  let widest = 0;
+  for (const paragraph of text.split("\n")) {
+    const n = paragraph.length;
+    lines += Math.max(1, Math.ceil(n / charsPerLine));
+    widest = Math.max(widest, Math.min(n, charsPerLine) * charW);
+  }
+  return { w: widest, h: lines * fontSize * LINE_HEIGHT, lines };
+}
+
+// src/text/TextMeasure.ts
+var MAX_CACHE_ENTRIES = 2e3;
+var ZERO_WIDTH_SPACE = "\u200B";
+function toDisplayText(text) {
+  if (text.length === 0) return ZERO_WIDTH_SPACE;
+  return text.endsWith("\n") ? text + ZERO_WIDTH_SPACE : text;
+}
+var TextMeasure = class {
+  element = null;
+  htmlElement = null;
+  cache = /* @__PURE__ */ new Map();
+  htmlCache = /* @__PURE__ */ new Map();
+  measureText(text, opts) {
+    const key = cacheKey(text, opts);
+    const hit = this.cache.get(key);
+    if (hit) return hit;
+    const result = typeof document === "undefined" ? this.estimate(text, opts) : this.measureDom(text, opts);
+    if (this.cache.size >= MAX_CACHE_ENTRIES) {
+      const oldest = this.cache.keys().next().value;
+      if (oldest !== void 0) this.cache.delete(oldest);
+    }
+    this.cache.set(key, result);
+    return result;
+  }
+  /**
+   * Measure a run of HTML — a rich-text label — laid out the way the DOM
+   * overlay renders it.
+   *
+   * Only pass HTML this package generated (`richTextToHtml` escapes text and
+   * scheme-checks link hrefs); the probe is inert but it is still a live DOM
+   * subtree.
+   */
+  measureHtml(html, opts) {
+    const key = htmlCacheKey(html, opts);
+    const hit = this.htmlCache.get(key);
+    if (hit) return hit;
+    const result = typeof document === "undefined" ? this.estimateHtml(html, opts) : this.measureHtmlDom(html, opts);
+    if (this.htmlCache.size >= MAX_CACHE_ENTRIES) {
+      const oldest = this.htmlCache.keys().next().value;
+      if (oldest !== void 0) this.htmlCache.delete(oldest);
+    }
+    this.htmlCache.set(key, result);
+    return result;
+  }
+  /**
+   * Measure several HTML runs against one probe. Nothing is shared between the
+   * items beyond the element itself; the win is one style write and one layout
+   * flush per item instead of one per call site.
+   */
+  measureHtmlBatch(items) {
+    return items.map((item) => this.measureHtml(item.html, item.opts));
+  }
+  /** Number of cached measurements (for tests and debugging). */
+  get cacheSize() {
+    return this.cache.size;
+  }
+  clearCache() {
+    this.cache.clear();
+    this.htmlCache.clear();
+  }
+  dispose() {
+    this.cache.clear();
+    this.htmlCache.clear();
+    this.element?.remove();
+    this.element = null;
+    this.htmlElement?.remove();
+    this.htmlElement = null;
+  }
+  estimate(text, opts) {
+    const padding = opts.padding ?? 0;
+    const inner = opts.maxWidth === void 0 ? Infinity : Math.max(1, opts.maxWidth - padding * 2);
+    const est = estimateTextSize(text, opts.fontSize, inner);
+    return {
+      w: est.w + padding * 2,
+      h: est.lines * opts.fontSize * opts.lineHeight + padding * 2,
+      lineCount: est.lines
+    };
+  }
+  measureDom(text, opts) {
+    const el = this.getElement();
+    const padding = opts.padding ?? 0;
+    const s = el.style;
+    s.fontFamily = opts.fontFamily;
+    s.fontSize = `${opts.fontSize}px`;
+    s.fontWeight = opts.fontWeight === void 0 ? "normal" : String(opts.fontWeight);
+    s.lineHeight = String(opts.lineHeight);
+    s.padding = `${padding}px`;
+    s.maxWidth = opts.maxWidth === void 0 ? "none" : `${Math.max(1, opts.maxWidth)}px`;
+    el.textContent = toDisplayText(text);
+    const rect = el.getBoundingClientRect();
+    const lineHeightPx = opts.fontSize * opts.lineHeight;
+    const contentH = Math.max(0, rect.height - padding * 2);
+    const lineCount = lineHeightPx > 0 ? Math.max(1, Math.round(contentH / lineHeightPx)) : 1;
+    return { w: Math.ceil(rect.width * 100) / 100, h: Math.ceil(rect.height * 100) / 100, lineCount };
+  }
+  estimateHtml(html, opts) {
+    const text = htmlToProbeText(html);
+    const padding = paddingPx(opts.padding);
+    const base = this.estimate(text, {
+      fontFamily: opts.fontFamily,
+      fontSize: opts.fontSize,
+      lineHeight: opts.lineHeight,
+      ...opts.fontWeight === void 0 ? {} : { fontWeight: opts.fontWeight },
+      ...opts.maxWidth === void 0 || opts.maxWidth === null ? {} : { maxWidth: opts.maxWidth },
+      padding
+    });
+    const unwrapped = this.estimate(text, { fontFamily: opts.fontFamily, fontSize: opts.fontSize, lineHeight: opts.lineHeight, padding });
+    return { ...base, scrollWidth: opts.measureScrollWidth ? unwrapped.w : base.w };
+  }
+  measureHtmlDom(html, opts) {
+    const el = this.getHtmlElement();
+    const s = el.style;
+    s.fontFamily = opts.fontFamily;
+    s.fontSize = `${opts.fontSize}px`;
+    s.fontWeight = opts.fontWeight === void 0 ? "normal" : String(opts.fontWeight);
+    s.fontStyle = opts.fontStyle ?? "normal";
+    s.lineHeight = String(opts.lineHeight);
+    s.padding = typeof opts.padding === "number" ? `${opts.padding}px` : opts.padding ?? "0px";
+    s.maxWidth = opts.maxWidth === void 0 || opts.maxWidth === null ? "none" : `${Math.max(1, opts.maxWidth)}px`;
+    for (const name of readCustomStyleNames(el)) s.removeProperty(name);
+    for (const [name, value] of Object.entries(opts.otherStyles ?? {})) s.setProperty(name, value);
+    writeCustomStyleNames(el, Object.keys(opts.otherStyles ?? {}));
+    el.innerHTML = html;
+    const rect = el.getBoundingClientRect();
+    const padding = paddingPx(opts.padding);
+    const lineHeightPx = opts.fontSize * opts.lineHeight;
+    const contentH = Math.max(0, rect.height - padding * 2);
+    const lineCount = lineHeightPx > 0 ? Math.max(1, Math.round(contentH / lineHeightPx)) : 1;
+    let scrollWidth = rect.width;
+    if (opts.measureScrollWidth) {
+      const previousMax = s.maxWidth;
+      s.maxWidth = "none";
+      scrollWidth = el.getBoundingClientRect().width;
+      s.maxWidth = previousMax;
+    }
+    return {
+      w: Math.ceil(rect.width * 100) / 100,
+      h: Math.ceil(rect.height * 100) / 100,
+      lineCount,
+      scrollWidth: Math.ceil(scrollWidth * 100) / 100
+    };
+  }
+  getHtmlElement() {
+    if (this.htmlElement && this.htmlElement.isConnected) return this.htmlElement;
+    installHtmlProbeStyles();
+    const el = document.createElement("div");
+    el.setAttribute("aria-hidden", "true");
+    el.className = "mocanvas-text-measure-html";
+    Object.assign(el.style, {
+      position: "fixed",
+      top: "-10000px",
+      left: "-10000px",
+      visibility: "hidden",
+      pointerEvents: "none",
+      whiteSpace: "pre-wrap",
+      overflowWrap: "break-word",
+      wordBreak: "normal",
+      width: "max-content",
+      boxSizing: "border-box",
+      margin: "0",
+      border: "0",
+      zIndex: "-1"
+    });
+    document.body.appendChild(el);
+    this.htmlElement = el;
+    return el;
+  }
+  getElement() {
+    if (this.element && this.element.isConnected) return this.element;
+    const el = document.createElement("div");
+    el.setAttribute("aria-hidden", "true");
+    el.className = "mocanvas-text-measure";
+    Object.assign(el.style, {
+      position: "fixed",
+      top: "-10000px",
+      left: "-10000px",
+      visibility: "hidden",
+      pointerEvents: "none",
+      whiteSpace: "pre-wrap",
+      overflowWrap: "break-word",
+      wordBreak: "normal",
+      width: "max-content",
+      boxSizing: "border-box",
+      margin: "0",
+      border: "0",
+      zIndex: "-1"
+    });
+    document.body.appendChild(el);
+    this.element = el;
+    return el;
+  }
+};
+function cacheKey(text, o) {
+  return `${o.fontFamily}|${o.fontSize}|${o.fontWeight ?? ""}|${o.lineHeight}|${o.maxWidth ?? ""}|${o.padding ?? 0}|${text}`;
+}
+function htmlCacheKey(html, o) {
+  const other = Object.entries(o.otherStyles ?? {}).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([k, v]) => `${k}:${v}`).join(";");
+  return `${o.fontFamily}|${o.fontSize}|${o.fontWeight ?? ""}|${o.fontStyle ?? ""}|${o.lineHeight}|${o.maxWidth ?? ""}|${o.padding ?? 0}|${o.measureScrollWidth ? 1 : 0}|${other}|${html}`;
+}
+function paddingPx(padding) {
+  if (typeof padding === "number") return Number.isFinite(padding) ? padding : 0;
+  if (typeof padding !== "string") return 0;
+  const first = padding.trim().split(/\s+/)[0] ?? "";
+  const value = Number.parseFloat(first);
+  return Number.isFinite(value) ? value : 0;
+}
+var BLOCK_TAG = /<\/?(?:p|div|li|ul|ol|h[1-6]|blockquote|pre|tr|br|hr)\b[^>]*>/gi;
+function htmlToProbeText(html) {
+  return html.replace(BLOCK_TAG, "\n").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/\n{2,}/g, "\n").replace(/^\n|\n$/g, "");
+}
+function readCustomStyleNames(el) {
+  const raw = el.dataset["mocanvasOtherStyles"];
+  return raw === void 0 || raw.length === 0 ? [] : raw.split(",");
+}
+function writeCustomStyleNames(el, names) {
+  if (names.length === 0) delete el.dataset["mocanvasOtherStyles"];
+  else el.dataset["mocanvasOtherStyles"] = names.join(",");
+}
+var htmlProbeStylesInstalled = false;
+function installHtmlProbeStyles() {
+  if (htmlProbeStylesInstalled || typeof document === "undefined") return;
+  htmlProbeStylesInstalled = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-mocanvas", "text-measure");
+  style.textContent = RICH_TEXT_BLOCK_CSS.replace(/__SCOPE__/g, ".mocanvas-text-measure-html");
+  document.head.appendChild(style);
+}
+var RICH_TEXT_BLOCK_CSS = [
+  "__SCOPE__ p,__SCOPE__ h1,__SCOPE__ h2,__SCOPE__ h3,__SCOPE__ h4,__SCOPE__ h5,__SCOPE__ h6,__SCOPE__ blockquote,__SCOPE__ pre,__SCOPE__ ul,__SCOPE__ ol{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;}",
+  "__SCOPE__ ul,__SCOPE__ ol{padding-inline-start:1.4em;}",
+  "__SCOPE__ li{margin:0;}",
+  "__SCOPE__ pre,__SCOPE__ code{font-family:inherit;white-space:pre-wrap;}",
+  "__SCOPE__ hr{margin:0;border:0;border-top:1px solid currentColor;}",
+  "__SCOPE__ a{color:inherit;}"
+].join("");
+var singleton = null;
+function getTextMeasure() {
+  if (!singleton) singleton = new TextMeasure();
+  return singleton;
+}
+
+// src/text/measure-html.ts
+function getRichTextExtensions(editor) {
+  const host = editor;
+  const configured = host?.options?.text?.tipTapConfig?.extensions ?? host?.textOptions?.tipTapConfig?.extensions;
+  return configured && configured.length > 0 ? configured : tipTapDefaultExtensions;
+}
+function renderHtmlFromRichTextForMeasurement(editor, richText) {
+  return richTextToHtml(richText, { extensions: getRichTextExtensions(editor) });
+}
+function renderHtmlFromRichTextWithExtensions(richText, extensions) {
+  return richTextToHtml(richText, { extensions });
+}
+function measureRichText(editor, richText, opts) {
+  return getTextMeasure().measureHtml(renderHtmlFromRichTextForMeasurement(editor, richText), opts);
+}
+function labelFontFamily(props) {
+  return props.fontFamily ?? props.font ?? "draw";
+}
+function labelTextAlign(props) {
+  return props.textAlign ?? props.align ?? "middle";
+}
+function alignToJustify(align) {
+  switch (align) {
+    case "start":
+    case "start-legacy":
+      return "flex-start";
+    case "end":
+    case "end-legacy":
+      return "flex-end";
+    default:
+      return "center";
+  }
+}
+function alignToTextAlign(align) {
+  switch (align) {
+    case "start":
+    case "start-legacy":
+      return "left";
+    case "end":
+    case "end-legacy":
+      return "right";
+    default:
+      return "center";
+  }
+}
+function verticalAlignToAlignItems(align) {
+  switch (align) {
+    case "start":
+      return "flex-start";
+    case "end":
+      return "flex-end";
+    default:
+      return "center";
+  }
+}
+var FLUSH_FALLBACK_MS = 32;
+var stop = (e) => {
+  e.stopPropagation();
+};
+function TextLabel(props) {
+  const { text, richText, isEditing, fontSize, color, verticalAlign, wrap, width, height, padding = 0, placeholder, singleLine } = props;
+  const align = labelTextAlign(props);
+  const font = labelFontFamily(props);
+  const editor = useEditor();
+  const rich = isRichText(richText) ? richText : null;
+  const plain = rich ? richTextToText(rich) : text;
+  const html = useMemo(() => rich ? renderHtmlFromRichTextForMeasurement(editor, rich) : null, [editor, rich]);
+  const textStyle = {
+    position: "relative",
+    fontFamily: getFontFamily(font),
+    fontSize,
+    fontWeight: "normal",
+    lineHeight: LINE_HEIGHT,
+    color,
+    textAlign: alignToTextAlign(align),
+    whiteSpace: wrap ? "pre-wrap" : "pre",
+    overflowWrap: wrap ? "break-word" : "normal",
+    wordBreak: "normal",
+    padding,
+    boxSizing: "border-box",
+    maxWidth: "100%",
+    minWidth: isEditing ? fontSize + padding * 2 : void 0,
+    width: wrap ? "100%" : void 0,
+    margin: 0
+  };
+  const outerStyle = {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: width ?? "max-content",
+    height: height ?? "auto",
+    display: "flex",
+    justifyContent: alignToJustify(align),
+    alignItems: verticalAlignToAlignItems(verticalAlign),
+    pointerEvents: isEditing ? "auto" : "none",
+    userSelect: isEditing ? "text" : "none",
+    WebkitUserSelect: isEditing ? "text" : "none"
+  };
+  if (!isEditing) {
+    const empty = plain.length === 0;
+    if (rich && !(empty && placeholder)) {
+      return /* @__PURE__ */ jsxs("div", { className: "mocanvas-text-label", style: outerStyle, children: [
+        /* @__PURE__ */ jsx(RichTextBlockStyles, {}),
+        /* @__PURE__ */ jsx("div", { className: "mocanvas-rich-text", style: textStyle, dangerouslySetInnerHTML: { __html: html ?? "" } })
+      ] });
+    }
+    const shown = empty && placeholder ? placeholder : toDisplayText(plain);
+    return /* @__PURE__ */ jsx("div", { className: "mocanvas-text-label", style: outerStyle, children: /* @__PURE__ */ jsx("div", { style: { ...textStyle, opacity: empty && placeholder ? 0.5 : 1 }, children: shown }) });
+  }
+  const factory = getRichTextEditorFactory();
+  const useRichSurface = factory !== null && props.onChangeRichText !== void 0 && rich !== null;
+  return /* @__PURE__ */ jsx("div", { className: "mocanvas-text-label mocanvas-text-label-editing", style: outerStyle, children: useRichSurface ? /* @__PURE__ */ jsx(RichTextEditorSurface, { ...props, richText: rich, onChangeRichText: props.onChangeRichText, factory, textStyle, singleLine: singleLine ?? false }) : /* @__PURE__ */ jsx(TextEditor, { ...props, text: plain, textStyle, singleLine: singleLine ?? false }) });
+}
+function RichTextBlockStyles() {
+  return /* @__PURE__ */ jsx("style", { children: RICH_TEXT_BLOCK_CSS.replace(/__SCOPE__/g, ".mocanvas-rich-text") });
+}
+function TextEditor(props) {
+  const { text, onChange, onChangeRichText, richText, textStyle, singleLine, wrap, color } = props;
+  const editor = useEditor();
+  const ref = useRef(null);
+  const [value, setValue] = useState(text);
+  const valueRef = useRef(text);
+  const pendingRef = useRef(null);
+  const rafRef = useRef(0);
+  const timerRef = useRef(0);
+  const richRef = useRef(richText);
+  richRef.current = richText;
+  const onChangeRef = useRef(() => {
+  });
+  onChangeRef.current = (next) => {
+    onChange(next);
+    onChangeRichText?.(applyPlainTextToRichText(richRef.current, next));
+  };
+  const flush = useCallback(() => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = 0;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = 0;
+    }
+    if (pendingRef.current !== null) {
+      const next = pendingRef.current;
+      pendingRef.current = null;
+      onChangeRef.current(next);
+    }
+  }, []);
+  const commit = useCallback(
+    (next) => {
+      valueRef.current = next;
+      setValue(next);
+      pendingRef.current = next;
+      if (!rafRef.current) rafRef.current = requestAnimationFrame(flush);
+      if (!timerRef.current) timerRef.current = window.setTimeout(flush, FLUSH_FALLBACK_MS);
+    },
+    [flush]
+  );
+  useEffect(() => {
+    if (pendingRef.current === null && text !== valueRef.current) {
+      valueRef.current = text;
+      setValue(text);
+    }
+  }, [text]);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el) {
+      el.focus({ preventScroll: true });
+      const end = el.value.length;
+      el.setSelectionRange(end, end);
+    }
+    return () => flush();
+  }, [flush]);
+  const finish = useCallback(() => {
+    flush();
+    editor.setEditingShape(null);
+    editor.complete();
+  }, [editor, flush]);
+  const onKeyDown = (e) => {
+    e.stopPropagation();
+    if (e.key === "Escape") {
+      e.preventDefault();
+      finish();
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Enter" && singleLine && !e.shiftKey) {
+      e.preventDefault();
+      finish();
+    }
+  };
+  const displayed = toDisplayText(value);
+  return /* @__PURE__ */ jsxs("div", { style: textStyle, onPointerDown: stop, onPointerMove: stop, onPointerUp: stop, children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { visibility: "hidden", pointerEvents: "none" }, children: displayed }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: "mocanvas-text-editor",
+        value,
+        rows: 1,
+        wrap: wrap ? "soft" : "off",
+        spellCheck: false,
+        autoCapitalize: "off",
+        autoCorrect: "off",
+        "data-gramm": "false",
+        onChange: (e) => {
+          const raw = e.currentTarget.value;
+          commit(singleLine ? raw.replace(/[\r\n]+/g, "") : raw);
+        },
+        onBlur: flush,
+        onKeyDown,
+        onKeyUp: stop,
+        onPointerDown: stop,
+        onPointerMove: stop,
+        onPointerUp: stop,
+        onContextMenu: stop,
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          display: "block",
+          margin: 0,
+          border: "none",
+          outline: "none",
+          background: "transparent",
+          resize: "none",
+          overflow: "hidden",
+          boxSizing: "border-box",
+          padding: textStyle.padding,
+          fontFamily: textStyle.fontFamily,
+          fontSize: textStyle.fontSize,
+          fontWeight: textStyle.fontWeight,
+          lineHeight: textStyle.lineHeight,
+          color,
+          caretColor: color,
+          textAlign: textStyle.textAlign,
+          whiteSpace: textStyle.whiteSpace,
+          overflowWrap: textStyle.overflowWrap,
+          wordBreak: textStyle.wordBreak,
+          letterSpacing: "inherit",
+          userSelect: "text",
+          WebkitUserSelect: "text",
+          pointerEvents: "auto",
+          cursor: "text",
+          touchAction: "auto"
+        }
+      }
+    )
+  ] });
+}
+function RichTextEditorSurface({ richText, onChangeRichText, factory, textStyle, singleLine }) {
+  const editor = useEditor();
+  const ref = useRef(null);
+  const onChangeRef = useRef(onChangeRichText);
+  onChangeRef.current = onChangeRichText;
+  const initial = useRef(richText);
+  useLayoutEffect(() => {
+    const container = ref.current;
+    if (!container) return;
+    const handle = factory({
+      container,
+      initialValue: initial.current,
+      extensions: getRichTextExtensions(editor),
+      singleLine,
+      onChange: (value) => onChangeRef.current(value),
+      onFinish: () => {
+        editor.setEditingShape(null);
+        editor.complete();
+      }
+    });
+    handle.focus();
+    return () => handle.destroy();
+  }, [editor, factory, singleLine]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "mocanvas-rich-text mocanvas-rich-text-editor",
+      style: { ...textStyle, userSelect: "text", WebkitUserSelect: "text", pointerEvents: "auto", cursor: "text" },
+      onPointerDown: stop,
+      onPointerMove: stop,
+      onPointerUp: stop,
+      onKeyDown: stop,
+      onKeyUp: stop,
+      onContextMenu: stop
+    }
+  );
+}
+
+// src/text/text-layout.ts
+function computeGrowY(labelHeight, boxHeight) {
+  if (!Number.isFinite(labelHeight) || !Number.isFinite(boxHeight)) return 0;
+  return Math.max(0, labelHeight - boxHeight);
+}
+function trimTrailingWhitespace(text) {
+  return text.replace(/\s+$/u, "");
+}
+function labelFontStyle(opts) {
+  return opts.fontFamily ?? opts.font ?? "draw";
+}
+function measureLabel(source, opts) {
+  const fontFamily = getFontFamily(labelFontStyle(opts));
+  if (isRichText(source)) {
+    const html = renderHtmlFromRichTextForMeasurement(opts.editor ?? null, source);
+    return getTextMeasure().measureHtml(html, {
+      fontFamily,
+      fontSize: opts.fontSize,
+      lineHeight: LINE_HEIGHT,
+      ...opts.maxWidth === void 0 ? {} : { maxWidth: opts.maxWidth },
+      padding: opts.padding ?? 0
+    });
+  }
+  return getTextMeasure().measureText(richTextToText(source), {
+    fontFamily,
+    fontSize: opts.fontSize,
+    lineHeight: LINE_HEIGHT,
+    ...opts.maxWidth === void 0 ? {} : { maxWidth: opts.maxWidth },
+    padding: opts.padding ?? 0
+  });
+}
+var OPTICAL_LIFT_CACHE = /* @__PURE__ */ new Map();
+function getLabelOpticalLift(opts) {
+  return getOpticalCentreLift(getFontFamily(labelFontStyle(opts))) * opts.fontSize;
+}
+function getOpticalCentreLift(fontFamily) {
+  const cached = OPTICAL_LIFT_CACHE.get(fontFamily);
+  if (cached !== void 0) return cached;
+  let lift = 0;
+  try {
+    const ctx = document.createElement("canvas").getContext("2d");
+    if (ctx) {
+      const em = 100;
+      ctx.font = `${em}px ${fontFamily}`;
+      const caps = ctx.measureText("H");
+      const ex = ctx.measureText("x");
+      const capHeight = caps.actualBoundingBoxAscent;
+      const xHeight = ex.actualBoundingBoxAscent;
+      const ascent = caps.fontBoundingBoxAscent;
+      const descent = caps.fontBoundingBoxDescent;
+      if (capHeight > 0 && xHeight > 0 && ascent > 0) {
+        const lineHeight = LINE_HEIGHT * em;
+        const baseline = (lineHeight - (ascent + descent)) / 2 + ascent;
+        const optical = baseline - (capHeight + xHeight) / 4;
+        lift = (optical - lineHeight / 2) / em;
+      }
+    }
+  } catch {
+  }
+  if (!Number.isFinite(lift) || lift < 0 || lift > 0.25) lift = 0;
+  OPTICAL_LIFT_CACHE.set(fontFamily, lift);
+  return lift;
+}
+var TEXT_SHAPE_MIN_WIDTH = 8;
+function getTextShapeSize(input) {
+  const { text, fontSize, autoSize, w, editor } = input;
+  const fontFamily = labelFontStyle(input);
+  if (autoSize) {
+    const m2 = measureLabel(text, { fontFamily, fontSize, editor: editor ?? null });
+    return { w: Math.max(TEXT_SHAPE_MIN_WIDTH, m2.w), h: m2.h, lineCount: m2.lineCount };
+  }
+  const width = Math.max(1, w);
+  const m = measureLabel(text, { fontFamily, fontSize, maxWidth: width, editor: editor ?? null });
+  return { w: width, h: m.h, lineCount: m.lineCount };
+}
+var EPS2 = 1e-6;
+var ELBOW_CORNER_STROKES = 2.5;
+var CORNER_SEGMENTS = 4;
+function clamp01(value) {
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+function getDominantAxis(start, end) {
+  return Math.abs(end.x - start.x) >= Math.abs(end.y - start.y) ? "x" : "y";
+}
+function simplify(points) {
+  const out = [];
+  for (const p of points) {
+    const last = out.at(-1);
+    if (last && Vec.Dist2(last, p) < EPS2 * EPS2) continue;
+    out.push(p);
+  }
+  for (let i = out.length - 2; i > 0; i--) {
+    const a = out[i - 1];
+    const b = out[i];
+    const c = out[i + 1];
+    const cross = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+    if (Math.abs(cross) < EPS2) out.splice(i, 1);
+  }
+  return out;
+}
+function roundCorner(a, p, b, radius) {
+  const lenA = Vec.Dist(a, p);
+  const lenB = Vec.Dist(b, p);
+  const r = Math.min(radius, lenA / 2, lenB / 2);
+  if (r < EPS2) return [p];
+  const da = Vec.Div(Vec.Sub(a, p), lenA);
+  const db = Vec.Div(Vec.Sub(b, p), lenB);
+  if (Math.abs(Vec.Dot(da, db)) > 1e-3) return [p];
+  const from = Vec.Add(p, Vec.Mul(da, r));
+  const to = Vec.Add(p, Vec.Mul(db, r));
+  const center = Vec.Add(p, Vec.Mul(Vec.Add(da, db), r));
+  const a0 = Math.atan2(from.y - center.y, from.x - center.x);
+  const a1 = Math.atan2(to.y - center.y, to.x - center.x);
+  let sweep = a1 - a0;
+  while (sweep > Math.PI) sweep -= Math.PI * 2;
+  while (sweep <= -Math.PI) sweep += Math.PI * 2;
+  const out = [];
+  for (let i = 0; i <= CORNER_SEGMENTS; i++) {
+    const angle = a0 + sweep * i / CORNER_SEGMENTS;
+    out.push(new Vec(center.x + r * Math.cos(angle), center.y + r * Math.sin(angle)));
+  }
+  return out;
+}
+function roundElbowCorners(corners, radius) {
+  if (corners.length < 3 || radius < EPS2) return corners.map((p) => p.clone());
+  const out = [corners[0].clone()];
+  for (let i = 1; i < corners.length - 1; i++) {
+    for (const p of roundCorner(corners[i - 1], corners[i], corners[i + 1], radius)) out.push(p);
+  }
+  out.push(corners.at(-1).clone());
+  return simplify(out);
+}
+function getElbowRoute(start, end, options = {}) {
+  const s = Vec.From(start);
+  const e = Vec.From(end);
+  const dominant = getDominantAxis(s, e);
+  const startAxis = options.startAxis ?? dominant;
+  const endAxis = options.endAxis ?? dominant;
+  const t = clamp01(options.midPoint ?? 0.5);
+  let corners;
+  let midLeg = null;
+  let slideAxis = null;
+  if (startAxis === endAxis) {
+    if (startAxis === "x") {
+      const mx = s.x + (e.x - s.x) * t;
+      const a = new Vec(mx, s.y);
+      const b = new Vec(mx, e.y);
+      corners = [s, a, b, e];
+      if (Math.abs(e.y - s.y) > EPS2) {
+        midLeg = [a, b];
+        slideAxis = "x";
+      }
+    } else {
+      const my = s.y + (e.y - s.y) * t;
+      const a = new Vec(s.x, my);
+      const b = new Vec(e.x, my);
+      corners = [s, a, b, e];
+      if (Math.abs(e.x - s.x) > EPS2) {
+        midLeg = [a, b];
+        slideAxis = "y";
+      }
+    }
+  } else {
+    corners = startAxis === "x" ? [s, new Vec(e.x, s.y), e] : [s, new Vec(s.x, e.y), e];
+  }
+  const simplified = simplify(corners);
+  return {
+    corners: simplified,
+    points: roundElbowCorners(simplified, options.cornerRadius ?? 0),
+    midLeg,
+    slideAxis
+  };
+}
+function getElbowBody(start, end, options = {}) {
+  return { kind: "elbow", points: getElbowRoute(start, end, options).points };
+}
+function getElbowMidPointFromPoint(start, end, point, axis) {
+  const span = end[axis] - start[axis];
+  if (Math.abs(span) < EPS2) return 0.5;
+  return clamp01((point[axis] - start[axis]) / span);
+}
+var ARROW_LABEL_PADDING = 8;
+var LABEL_PADDING = ARROW_LABEL_PADDING;
+var ARROW_KINDS = ARROW_SHAPE_KINDS;
+function readArrowShape(shape) {
+  return { ...shape, props: readArrowProps(shape) };
+}
+function readArrowProps(shape) {
+  const p = propsOf(shape);
+  return {
+    kind: readEnum(p, "kind", ARROW_KINDS, "arc"),
+    start: readPoint(p, "start", { x: 0, y: 0 }),
+    end: readPoint(p, "end", { x: 2, y: 0 }),
+    bend: readNumber(p, "bend", 0),
+    elbowMidPoint: readNumber(p, "elbowMidPoint", 0.5),
+    color: readStyle(p, "color", DefaultColorStyle),
+    labelColor: readStyle(p, "labelColor", DefaultLabelColorStyle),
+    fill: readStyle(p, "fill", DefaultFillStyle),
+    dash: readStyle(p, "dash", DefaultDashStyle),
+    size: readStyle(p, "size", DefaultSizeStyle),
+    arrowheadStart: readEnum(p, "arrowheadStart", ARROWHEAD_KINDS, "none"),
+    arrowheadEnd: readEnum(p, "arrowheadEnd", ARROWHEAD_KINDS, "arrow"),
+    font: readStyle(p, "font", DefaultFontStyle),
+    richText: readRichText(p),
+    text: readText(p),
+    labelPosition: readNumber(p, "labelPosition", 0.5),
+    scale: readNumber(p, "scale", 1)
+  };
+}
+function getArrowDisplayValues(editor, shape, theme, colorMode) {
+  const base = getDefaultDisplayValues(editor, shape, theme, colorMode);
+  const scale = readNumber(propsOf(shape), "scale", 1);
+  return {
+    ...base,
+    scaledStrokeWidth: base.strokeWidth * scale,
+    labelFontSize: base.fontSize * scale,
+    labelPadding: ARROW_LABEL_PADDING * scale,
+    labelFontFamily: base.fontFamily
+  };
+}
+var ArrowShapeUtil = class extends ShapeUtil {
+  static type = "arrow";
+  static migrations = arrowShapeMigrations;
+  static options = { getDefaultDisplayValues: getArrowDisplayValues };
+  /**
+   * `kind` is deliberately not among these. A style is shared across shape
+   * types, remembered for the next shape and applied to a whole selection at
+   * once; arc-versus-elbow is routing that belongs to the one arrow, and
+   * declaring it a style would put it in every mixed selection's shared styles
+   * (and in the style panel) with nothing else to share it with.
+   */
+  static props = arrowShapeProps;
+  getDefaultProps() {
+    return {
+      kind: "arc",
+      start: { x: 0, y: 0 },
+      end: { x: 2, y: 0 },
+      bend: 0,
+      elbowMidPoint: 0.5,
+      color: "black",
+      labelColor: "black",
+      fill: "none",
+      dash: "draw",
+      size: "m",
+      arrowheadStart: "none",
+      arrowheadEnd: "arrow",
+      font: "draw",
+      richText: toRichText(""),
+      text: "",
+      labelPosition: 0.5,
+      scale: 1
+    };
+  }
+  /**
+   * The arrow's terminals and the body running between them, in arrow-local
+   * space. `"arc"` bows by `bend`; `"elbow"` routes axis-aligned legs, leaving
+   * a bound shape along its nearest edge's normal, with corners rounded in
+   * proportion to the stroke. The elbow's route is handed back as well, for the
+   * midpoint handle.
+   */
+  resolveBody(shape) {
+    const normalized = readArrowShape(shape);
+    const props = normalized.props;
+    const terminals = getArrowTerminalsInArrowSpace(this.editor, normalized);
+    if (props.kind !== "elbow") {
+      return { props, terminals, body: getArrowBody(terminals.start, terminals.end, props.bend), route: null };
+    }
+    const axes = getBoundElbowAxes(this.editor, normalized, terminals);
+    const route = getElbowRoute(terminals.start, terminals.end, {
+      midPoint: props.elbowMidPoint,
+      startAxis: axes.start,
+      endAxis: axes.end,
+      cornerRadius: STROKE_SIZES[props.size] * props.scale * ELBOW_CORNER_STROKES
+    });
+    return { props, terminals, body: { kind: "elbow", points: route.points }, route };
+  }
+  /**
+   * The label's box in shape space, or `null` when there is no label.
+   *
+   * Three things need it and they must agree: the geometry (which is what gets
+   * hit-tested), the DOM element that paints the text, and the indicator that
+   * outlines it on selection. They were computing it separately.
+   */
+  labelBox(shape) {
+    const { text, labelPosition, font, size, scale } = readArrowProps(shape);
+    if (!text) return null;
+    const m = measureLabel(readRichText(shape.props), {
+      fontFamily: font,
+      fontSize: FONT_SIZES[size] * scale,
+      padding: LABEL_PADDING * scale,
+      editor: this.editor
+    });
+    const c = getPointOnBody(this.resolveBody(shape).body, Math.max(0, Math.min(1, labelPosition)));
+    return { x: c.x - m.w / 2, y: c.y - m.h / 2, w: m.w, h: m.h };
+  }
+  /**
+   * `gapAtLabel` splits the body around the label's box. Only the selection
+   * outline asks for it; the geometry the editor hit-tests keeps the body whole,
+   * so the stroke the label covers is still there to be clicked.
+   */
+  getGeometry(shape, opts) {
+    const { props, terminals, body: full } = this.resolveBody(shape);
+    const { arrowheadStart, arrowheadEnd, size, scale, text, labelPosition, font } = props;
+    const { start, end } = terminals;
+    const strokeWidth = STROKE_SIZES[size] * scale;
+    const length = getBodyLength(full);
+    const headLength = getArrowheadLength(strokeWidth, length);
+    const body = shortenBody(full, getArrowheadInset(arrowheadStart, headLength), getArrowheadInset(arrowheadEnd, headLength));
+    const children = [];
+    const gap = opts?.gapAtLabel ? labelGapOnBody(body, opts.gapAtLabel) : null;
+    if (gap) {
+      const len = getBodyLength(body);
+      if (gap.from > 0) children.push(bodyToGeometry(shortenBody(body, 0, len * (1 - gap.from))));
+      if (gap.to < 1) children.push(bodyToGeometry(shortenBody(body, len * gap.to, 0)));
+    } else {
+      children.push(bodyToGeometry(body));
+    }
+    const startHead = getArrowheadGeometry(arrowheadStart, start, Vec.Mul(getTangentOnBody(full, 0), -1), headLength);
+    if (startHead) children.push(startHead);
+    const endHead = getArrowheadGeometry(arrowheadEnd, end, getTangentOnBody(full, 1), headLength);
+    if (endHead) children.push(endHead);
+    const label = this.labelBox(shape);
+    if (label) {
+      children.push(new Rectangle2d({ x: label.x, y: label.y, width: label.w, height: label.h, isFilled: false, isLabel: true }));
+    }
+    return new Group2d({ children });
+  }
+  /** An arrow needs its family's faces only while it carries a label. */
+  getFontFaces(shape) {
+    return readText(shape.props) ? getLabelFontFaces(readArrowProps(shape).font) : [];
+  }
+  getRenderStyle(shape) {
+    const { color, dash, size, scale } = readArrowProps(shape);
+    const stroke = getStrokeRgba(color, getThemeColors(this.editor));
+    return { stroke, strokeWidth: STROKE_SIZES[size] * scale, fill: stroke, dash: getDashId(dash), opacity: 1 };
+  }
+  component(shape) {
+    const { richText, text, font, size, scale, labelPosition } = readArrowProps(shape);
+    const isEditing = this.editor.getEditingShapeId() === shape.id;
+    if (!text && !isEditing) return null;
+    const display = getDisplayValues(this, shape);
+    const box = this.labelBox(shape) ?? { x: 0, y: 0, w: 0, h: 0 };
+    const background = getThemeColors(this.editor).background;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: box.x,
+          top: box.y,
+          width: box.w,
+          height: box.h,
+          background,
+          borderRadius: LABEL_PADDING * scale * 0.5,
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: "max-content",
+              transform: `translateY(${-getLabelOpticalLift({ fontFamily: font, fontSize: FONT_SIZES[size] * scale })}px)`
+            },
+            children: /* @__PURE__ */ jsx(
+              TextLabel,
+              {
+                shape,
+                text,
+                richText,
+                isEditing,
+                fontFamily: font,
+                fontSize: FONT_SIZES[size] * scale,
+                color: display.labelColor,
+                textAlign: "middle",
+                verticalAlign: "middle",
+                wrap: false,
+                padding: LABEL_PADDING * scale,
+                onChange: (next) => this.editor.updateShape({
+                  id: shape.id,
+                  type: "arrow",
+                  props: { text: next, richText: applyPlainTextToRichText(richText, next) }
+                }),
+                onChangeRichText: (next) => this.editor.updateShape({
+                  id: shape.id,
+                  type: "arrow",
+                  props: { richText: next, text: richTextToText(next) }
+                })
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  getIndicatorPath(shape) {
+    const label = this.labelBox(shape);
+    const labelRadius = () => Math.min(LABEL_PADDING * readArrowProps(shape).scale * 0.5, label.w / 2, label.h / 2);
+    if (label && this.editor.getEditingShapeId() === shape.id) {
+      const p2 = new Path2D();
+      p2.roundRect(label.x, label.y, label.w, label.h, labelRadius());
+      return p2;
+    }
+    const words = label ? this.getGeometry(shape, { gapAtLabel: label }).toPathWords() : this.getGeometry(shape).toPathWords();
+    const p = svgPath(pathWordsToSvgD(words));
+    if (label) p.roundRect(label.x, label.y, label.w, label.h, labelRadius());
+    return p;
+  }
+  /** The GPU keeps drawing the arrow while its label is edited. */
+  needsOverlay(_shape) {
+    return false;
+  }
+  hasOverlayLabel(shape) {
+    return readText(shape.props).trim().length > 0 || this.editor.getEditingShapeId() === shape.id;
+  }
+  canEdit(_shape) {
+    return true;
+  }
+  /** Nothing binds to an arrow (no arrow-to-arrow bindings). */
+  canBind(_opts) {
+    return false;
+  }
+  /** A selected arrow shows its handles instead of a selection box. */
+  hideSelectionBoundsBg(_shape) {
+    return true;
+  }
+  /**
+   * …but the arrow's *own* outline is drawn. This flag suppresses a lone selected
+   * shape's indicator, and the arrow used to set it because the selection frame
+   * was the cue instead. With the frame gone there was no cue at all — a selected
+   * arrow showed nothing. Its indicator is the curve and the label's box, which
+   * is the cue worth having.
+   */
+  hideSelectionBoundsFg(_shape) {
+    return false;
+  }
+  hideResizeHandles(_shape) {
+    return true;
+  }
+  /**
+   * …and no rotate handle either, which is what actually suppresses the box.
+   * `selectionHandles` only drops the frame when resize *and* rotate are both
+   * hidden, so hiding one of the two left a selected arrow wrapped in a
+   * rectangle with a lone rotate dot above it. An arrow has nothing to rotate
+   * about: its ends are the two handles, and turning it means moving them.
+   */
+  hideRotateHandle(_shape) {
+    return true;
+  }
+  getText(shape) {
+    return readText(shape.props);
+  }
+  onEditEnd(shape) {
+    const text = readText(shape.props);
+    const trimmed = trimTrailingWhitespace(text);
+    if (trimmed === text) return;
+    this.editor.updateShape({
+      id: shape.id,
+      type: "arrow",
+      props: { text: trimmed, richText: applyPlainTextToRichText(readRichText(shape.props), trimmed) }
+    });
+  }
+  /**
+   * Start and end handles move (and bind) the terminals. Between them sits one
+   * virtual handle: an arc's `bend` handle rides the middle of the curve, while
+   * an elbow's `midpoint` handle sits on its middle leg and slides that leg.
+   * An elbow with no middle leg (an L route, or a straight run) has neither.
+   */
+  getHandles(shape) {
+    const { terminals, body, route } = this.resolveBody(shape);
+    const { start, end } = terminals;
+    const handles = [{ id: "start", type: "vertex", index: "a1", x: start.x, y: start.y }];
+    if (route) {
+      if (route.midLeg) {
+        const mid = Vec.Lrp(route.midLeg[0], route.midLeg[1], 0.5);
+        handles.push({ id: "midpoint", type: "vertex", index: "a2", x: mid.x, y: mid.y });
+      }
+    } else {
+      const mid = getPointOnBody(body, 0.5);
+      handles.push({ id: "bend", type: "vertex", index: "a2", x: mid.x, y: mid.y });
+    }
+    handles.push({ id: "end", type: "vertex", index: "a3", x: end.x, y: end.y });
+    return handles;
+  }
+  onHandleDrag(shape, info) {
+    const { handle } = info;
+    switch (handle.id) {
+      case "start":
+      case "end":
+        return this.dragTerminal(shape, handle.id, handle, info.isPrecise);
+      case "bend": {
+        const { start, end } = getArrowTerminalsInArrowSpace(this.editor, readArrowShape(shape));
+        return { props: { ...shape.props, bend: getBendFromPoint(start, end, handle) } };
+      }
+      case "midpoint": {
+        const { terminals, route } = this.resolveBody(shape);
+        if (!route?.slideAxis) return;
+        const elbowMidPoint = getElbowMidPointFromPoint(terminals.start, terminals.end, handle, route.slideAxis);
+        return { props: { ...shape.props, elbowMidPoint } };
+      }
+      default:
+        return;
+    }
+  }
+  /**
+   * Move a terminal handle. When the handle lands on a bindable shape the
+   * terminal is bound to it (centered, or at the precise point under the
+   * pointer); otherwise any existing binding is dropped. The static point is
+   * always written so the arrow renders sensibly if the binding goes away.
+   * Holding Ctrl suppresses binding. Targets are found by hit-testing shape
+   * geometry directly (not `editor.getShapeAtPoint`) because the engine treats
+   * unfilled shapes as hollow, and arrows must bind into hollow shapes too.
+   */
+  dragTerminal(shape, terminal, point, isPrecise) {
+    const editor = this.editor;
+    const local = { x: point.x, y: point.y };
+    const pagePoint = applyTransform(editor.getShapePageTransform(shape), local);
+    const existing = getArrowBindings(editor, shape)[terminal];
+    const target = editor.inputs.ctrlKey ? void 0 : getArrowBindingTargetAtPoint(editor, shape, pagePoint);
+    if (target) {
+      const bindingProps = {
+        terminal,
+        normalizedAnchor: isPrecise ? getNormalizedAnchor(editor, target, pagePoint).toJson() : { x: 0.5, y: 0.5 },
+        isPrecise,
+        isExact: false
+      };
+      if (existing && existing.toId === target.id) {
+        editor.updateBinding({ id: existing.id, type: "arrow", props: bindingProps });
+      } else {
+        if (existing) editor.deleteBinding(existing.id);
+        editor.createBinding({ type: "arrow", fromId: shape.id, toId: target.id, props: bindingProps });
+      }
+    } else if (existing) {
+      editor.deleteBinding(existing.id);
+    }
+    return { props: { ...shape.props, [terminal]: local } };
+  }
+  /**
+   * Dragging the arrow on its own detaches it: bindings to shapes that are not
+   * part of the selection are dropped and their terminals frozen in place.
+   * Bindings to shapes moving along with the arrow are kept.
+   */
+  onTranslateStart(shape) {
+    const editor = this.editor;
+    const selected = new Set(editor.getSelectedShapeIds());
+    const stale = editor.getBindingsFromShape(shape, "arrow").filter((b) => !selected.has(b.toId));
+    if (stale.length) editor.deleteBindings(stale, { isolateShapes: true });
+  }
+};
+function getFrameDisplayValues(editor, shape, theme, colorMode) {
+  return {
+    ...getDefaultDisplayValues(editor, shape, theme, colorMode),
+    frameFill: FRAME_FILL,
+    frameStroke: FRAME_STROKE,
+    frameStrokeWidth: FRAME_STROKE_WIDTH,
+    nameFontSize: FRAME_NAME_FONT_SIZE,
+    nameColor: FRAME_NAME_COLOR,
+    nameHeight: FRAME_NAME_HEIGHT
+  };
+}
+var FrameShapeUtil = class extends BaseFrameLikeShapeUtil {
+  static type = "frame";
+  static props = frameShapeProps;
+  static migrations = frameShapeMigrations;
+  static options = { getDefaultDisplayValues: getFrameDisplayValues };
+  getDefaultProps() {
+    return { w: 160, h: 90, name: "" };
+  }
+  getGeometry(shape) {
+    const p = propsOf(shape);
+    return new Rectangle2d({ width: readNumber(p, "w", 160), height: readNumber(p, "h", 90), isFilled: true });
+  }
+  getRenderStyle(_shape) {
+    return { fill: hexToRgba(FRAME_FILL), stroke: hexToRgba(FRAME_STROKE), strokeWidth: FRAME_STROKE_WIDTH, dash: 0, opacity: 1 };
+  }
+  component(shape) {
+    const p = propsOf(shape);
+    const name = readString(p, "name", "");
+    const w = readNumber(p, "w", 160);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: -FRAME_NAME_OFFSET,
+          left: 0,
+          width: w,
+          height: FRAME_NAME_HEIGHT,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ jsx(
+          TextLabel,
+          {
+            shape,
+            text: name,
+            isEditing: this.editor.getEditingShapeId() === shape.id,
+            fontFamily: "sans",
+            fontSize: FRAME_NAME_FONT_SIZE,
+            color: FRAME_NAME_COLOR,
+            textAlign: "start",
+            verticalAlign: "end",
+            wrap: false,
+            width: w,
+            height: FRAME_NAME_HEIGHT,
+            placeholder: "Frame",
+            singleLine: true,
+            onChange: (next) => this.editor.updateShape({ id: shape.id, type: "frame", props: { name: next } })
+          }
+        )
+      }
+    );
+  }
+  getIndicatorPath(shape) {
+    const p = propsOf(shape);
+    return rectPath(readNumber(p, "w", 160), readNumber(p, "h", 90));
+  }
+  /** The GPU draws the frame body while its name is edited. */
+  needsOverlay(_shape) {
+    return false;
+  }
+  hasOverlayLabel(_shape) {
+    return true;
+  }
+  /** A frame draws its name in the sans family, whatever its children use. */
+  getFontFaces(_shape) {
+    return getLabelFontFaces("sans");
+  }
+  canEdit(_shape) {
+    return true;
+  }
+  getText(shape) {
+    return readString(propsOf(shape), "name", "");
+  }
+  onEditEnd(shape) {
+    const name = readString(propsOf(shape), "name", "");
+    const trimmed = name.trim();
+    if (trimmed !== name) this.editor.updateShape({ id: shape.id, type: "frame", props: { name: trimmed } });
+  }
+};
+var BLOBBY_KINDS = /* @__PURE__ */ new Set(["ellipse", "oval", "cloud", "heart"]);
+var DEFAULT_GEO_TYPE_DEFINITIONS = Object.freeze(
+  Object.fromEntries(
+    GEO_SHAPE_KINDS.map((kind) => [
+      kind,
+      {
+        id: kind,
+        getPath: (w, h, opts) => getGeoGeometry(kind, w, h, opts?.isFilled ?? false, { flipX: opts?.flipX, flipY: opts?.flipY }, opts?.strokeWidth ?? 0),
+        snapType: BLOBBY_KINDS.has(kind) ? "blobby" : "polygon",
+        // The icon set names its geo icons after the kind itself.
+        icon: `geo-${kind}`
+      }
+    ])
+  )
+);
+function getGeoTypeDefinition(geo, customGeoTypes) {
+  if (typeof geo !== "string" || geo.length === 0) return void 0;
+  const custom = customGeoTypes?.[geo];
+  if (custom !== void 0) return custom;
+  return DEFAULT_GEO_TYPE_DEFINITIONS[geo];
+}
+var GEO_DEFAULT_SIZE = { w: 100, h: 100 };
+function getGeoDisplayValues(editor, shape, theme, colorMode) {
+  const base = getDefaultDisplayValues(editor, shape, theme, colorMode);
+  const scale = readNumber(propsOf(shape), "scale", 1);
+  return {
+    ...base,
+    labelFontSize: base.fontSize * scale,
+    labelPadding: GEO_LABEL_PADDING * scale,
+    labelFontFamily: base.fontFamily,
+    scaledStrokeWidth: base.strokeWidth * scale
+  };
+}
+var GEO_LABEL_PADDING = 16;
+var LABEL_PADDING2 = GEO_LABEL_PADDING;
+function horizontalAlignToFlex(align) {
+  return alignToJustify(align);
+}
+function horizontalAlignToTextAlign(align) {
+  return alignToTextAlign(align);
+}
+function verticalAlignToFlex(align) {
+  return verticalAlignToAlignItems(align);
+}
+function readGeoProps(shape) {
+  const p = propsOf(shape);
+  return {
+    geo: readStyle(p, "geo", GeoShapeGeoStyle),
+    w: readNumber(p, "w", 100),
+    h: readNumber(p, "h", 100),
+    color: readStyle(p, "color", DefaultColorStyle),
+    labelColor: readStyle(p, "labelColor", DefaultLabelColorStyle),
+    fill: readStyle(p, "fill", DefaultFillStyle),
+    dash: readStyle(p, "dash", DefaultDashStyle),
+    size: readStyle(p, "size", DefaultSizeStyle),
+    font: readStyle(p, "font", DefaultFontStyle),
+    align: readStyle(p, "align", DefaultHorizontalAlignStyle),
+    verticalAlign: readStyle(p, "verticalAlign", DefaultVerticalAlignStyle),
+    growY: readNumber(p, "growY", 0),
+    url: readString(p, "url", ""),
+    richText: readRichText(p),
+    text: readText(p),
+    scale: readNumber(p, "scale", 1),
+    flipX: readBoolean(p, "flipX", false),
+    flipY: readBoolean(p, "flipY", false)
+  };
+}
+function measureGeoLabel(props, editor) {
+  const richText = readRichText(props);
+  const font = readStyle(props, "font", DefaultFontStyle);
+  const size = readStyle(props, "size", DefaultSizeStyle);
+  const scale = readNumber(props, "scale", 1);
+  const w = readNumber(props, "w", 100);
+  return measureLabel(richText, {
+    fontFamily: font,
+    fontSize: FONT_SIZES[size] * scale,
+    maxWidth: Math.max(1, w),
+    padding: LABEL_PADDING2 * scale,
+    editor: editor ?? null
+  });
+}
+function getGeoGrowY(props, editor) {
+  if (!readText(props)) return 0;
+  return computeGrowY(measureGeoLabel(props, editor).h, readNumber(props, "h", 100));
+}
+var LABEL_KEYS = ["richText", "text", "font", "size", "scale", "w", "h"];
+var geoShapeVersions = createBuiltInShapePropsMigrationIds("geo", {
+  AddFlipProps: 1
+});
+var geoShapeMigrations = createShapePropsMigrationSequence({
+  sequence: [
+    {
+      id: geoShapeVersions.AddFlipProps,
+      up(props) {
+        props["flipX"] ??= false;
+        props["flipY"] ??= false;
+      },
+      down(props) {
+        delete props["flipX"];
+        delete props["flipY"];
+      }
+    }
+  ]
+});
+var GeoShapeUtil = class extends BaseBoxShapeUtil {
+  static type = "geo";
+  static migrations = geoShapeMigrations;
+  static options = { getDefaultDisplayValues: getGeoDisplayValues };
+  static props = geoShapeProps;
+  getDefaultProps() {
+    return {
+      geo: "rectangle",
+      w: 100,
+      h: 100,
+      color: "black",
+      labelColor: "black",
+      fill: "none",
+      dash: "draw",
+      size: "m",
+      font: "draw",
+      align: "middle",
+      verticalAlign: "middle",
+      growY: 0,
+      url: "",
+      richText: toRichText(""),
+      text: "",
+      scale: 1,
+      flipX: false,
+      flipY: false
+    };
+  }
+  /**
+   * The silhouette for `geo`, taking this util's `customGeoTypes` into account.
+   * Falls back to the rectangle so an unknown value still draws something.
+   */
+  getGeoTypeDefinition(geo) {
+    return getGeoTypeDefinition(geo, this.options.customGeoTypes) ?? getGeoTypeDefinition("rectangle", this.options.customGeoTypes);
+  }
+  /**
+   * The `geo` value this util will actually draw.
+   *
+   * `props.geo` is a *style* prop, and its validator only knows the built-in
+   * silhouettes — so reading it through the style would turn every custom geo
+   * type back into a rectangle before it ever reached the table. A stored value
+   * this util has a definition for is therefore kept as it is; anything else
+   * falls back to the validated style, which is what keeps a value from another
+   * editor's vocabulary drawing something rather than nothing.
+   */
+  getGeoValue(shape) {
+    const p = propsOf(shape);
+    const raw = readString(p, "geo", "");
+    if (raw !== "" && getGeoTypeDefinition(raw, this.options.customGeoTypes) !== void 0) return raw;
+    return readStyle(p, "geo", GeoShapeGeoStyle);
+  }
+  /**
+   * The engine has a generator for every built-in geo kind, so a built-in
+   * travels as `(kind, w, h, flips)` rather than as its vertices. A custom geo
+   * type returns `undefined` and keeps uploading whatever its `getPath` builds.
+   */
+  getEngineGeometry(shape) {
+    const geo = this.getGeoValue(shape);
+    if (this.options.customGeoTypes?.[geo]) return void 0;
+    const kind = GEO_KIND[geo];
+    if (kind === void 0) return void 0;
+    const { w, h, growY, fill, flipX, flipY, size, scale } = readGeoProps(shape);
+    return {
+      type: "geo",
+      kind,
+      w,
+      h: h + growY,
+      isClosed: true,
+      isFilled: fill !== "none",
+      flipX,
+      flipY,
+      // Only the marks inside an outline use it — the X of an x-box, whose ends
+      // sit on the corners. `getGeometry` has always shortened them by this; the
+      // engine draws its own copy of the path and needs to be told the same.
+      strokeWidth: STROKE_SIZES[size] * scale
+    };
+  }
+  getGeometry(shape) {
+    const props = readGeoProps(shape);
+    const { w, h, growY, fill, text, flipX, flipY, size, scale } = props;
+    const height = h + growY;
+    const body = this.getGeoTypeDefinition(this.getGeoValue(shape)).getPath(w, height, {
+      isFilled: fill !== "none",
+      flipX,
+      flipY,
+      strokeWidth: STROKE_SIZES[size] * scale
+    });
+    if (!text) return body;
+    return new Group2d({ children: [body, this.getLabelRect(props)] });
+  }
+  /** Where the text label sits inside the body, in shape-local space. */
+  getLabelRect(props) {
+    const { w, h, growY, align, verticalAlign } = props;
+    const height = h + growY;
+    const m = measureGeoLabel(props);
+    const lw = Math.min(w, m.w);
+    const lh = Math.min(height, m.h);
+    const x = align === "start" || align === "start-legacy" ? 0 : align === "end" || align === "end-legacy" ? w - lw : (w - lw) / 2;
+    const y = verticalAlign === "start" ? 0 : verticalAlign === "end" ? height - lh : (height - lh) / 2;
+    return new Rectangle2d({ x, y, width: lw, height: lh, isFilled: false, isLabel: true });
+  }
+  getRenderStyle(shape) {
+    const { color, fill, dash, size, scale } = readGeoProps(shape);
+    const colors = getThemeColors(this.editor);
+    return {
+      stroke: getStrokeRgba(color, colors),
+      strokeWidth: STROKE_SIZES[size] * scale,
+      fill: getFillRgba(color, fill, colors),
+      dash: getDashId(dash),
+      opacity: 1
+    };
+  }
+  /** A geo shape needs its family's faces only while it carries a label. */
+  getFontFaces(shape) {
+    return readText(shape.props) ? getLabelFontFaces(readGeoProps(shape).font) : [];
+  }
+  component(shape) {
+    const { richText, text, font, size, scale, align, verticalAlign, w, h, growY } = readGeoProps(shape);
+    const isEditing = this.editor.getEditingShapeId() === shape.id;
+    if (!text && !isEditing) return null;
+    const display = getDisplayValues(this, shape);
+    return /* @__PURE__ */ jsx(
+      TextLabel,
+      {
+        shape,
+        text,
+        richText,
+        isEditing,
+        fontFamily: font,
+        fontSize: FONT_SIZES[size] * scale,
+        color: display.labelColor,
+        textAlign: align,
+        verticalAlign,
+        wrap: true,
+        width: w,
+        height: h + growY,
+        padding: LABEL_PADDING2 * scale,
+        onChange: (next) => this.editor.updateShape({
+          id: shape.id,
+          type: "geo",
+          props: { text: next, richText: applyPlainTextToRichText(richText, next) }
+        }),
+        onChangeRichText: (next) => this.editor.updateShape({
+          id: shape.id,
+          type: "geo",
+          props: { richText: next, text: richTextToText(next) }
+        })
+      }
+    );
+  }
+  getIndicatorPath(shape) {
+    return svgPath(pathWordsToSvgD(this.getGeometry(shape).toPathWords()));
+  }
+  /** The GPU keeps drawing the body while editing; only the label lives in the DOM. */
+  needsOverlay(_shape) {
+    return false;
+  }
+  hasOverlayLabel(shape) {
+    return readText(shape.props).trim().length > 0 || this.editor.getEditingShapeId() === shape.id;
+  }
+  canEdit(_shape) {
+    return true;
+  }
+  getText(shape) {
+    return readText(shape.props);
+  }
+  onBeforeCreate(next) {
+    const growY = getGeoGrowY(next.props, this.editor);
+    if (growY !== next.props.growY) return { ...next, props: { ...next.props, growY } };
+  }
+  onBeforeUpdate(prev, next) {
+    if (!LABEL_KEYS.some((k) => propsOf(prev)[k] !== propsOf(next)[k])) return;
+    const growY = getGeoGrowY(next.props, this.editor);
+    if (growY !== next.props.growY) return { ...next, props: { ...next.props, growY } };
+  }
+  onEditEnd(shape) {
+    const text = readText(shape.props);
+    const trimmed = trimTrailingWhitespace(text);
+    if (trimmed === text) return;
+    this.editor.updateShape({
+      id: shape.id,
+      type: "geo",
+      props: { text: trimmed, richText: applyPlainTextToRichText(readRichText(shape.props), trimmed) }
+    });
+  }
+};
+var NOTE_SIZE = 200;
+var NOTE_PADDING = 16;
+function readNoteProps(shape) {
+  const p = propsOf(shape);
+  return {
+    color: readStyle(p, "color", DefaultColorStyle),
+    labelColor: readStyle(p, "labelColor", DefaultLabelColorStyle),
+    size: readStyle(p, "size", DefaultSizeStyle),
+    font: readStyle(p, "font", DefaultFontStyle),
+    fontSizeAdjustment: readNumber(p, "fontSizeAdjustment", 0),
+    align: readStyle(p, "align", DefaultHorizontalAlignStyle),
+    verticalAlign: readStyle(p, "verticalAlign", DefaultVerticalAlignStyle),
+    growY: readNumber(p, "growY", 0),
+    url: readString(p, "url", ""),
+    richText: readRichText(p),
+    text: readText(p),
+    textFirstEditedBy: readString(p, "textFirstEditedBy", "") || null,
+    scale: readNumber(p, "scale", 1)
+  };
+}
+var MIN_NOTE_FONT_SIZE = 4;
+function getNoteFontSize(shape, theme = DEFAULT_THEME) {
+  const { size, scale, fontSizeAdjustment } = readNoteProps(shape);
+  const styled = theme.fontSize[size] ?? DEFAULT_THEME.fontSize[size];
+  return (fontSizeAdjustment >= MIN_NOTE_FONT_SIZE ? fontSizeAdjustment : styled) * scale;
+}
+function getNoteDisplayValues(editor, shape, theme, colorMode, options = {}) {
+  const base = getDefaultDisplayValues(editor, shape, theme, colorMode);
+  const props = readNoteProps(shape);
+  const colors = theme.colors[colorMode] ?? theme.colors.light;
+  const side = (options.noteSize ?? NOTE_SIZE) * props.scale;
+  const fontSize = getNoteFontSize(shape, theme);
+  const labelColor = props.labelColor === "black" ? getColorValue(colors, props.color, "noteText") : getColorValue(colors, props.labelColor, "solid");
+  return {
+    ...base,
+    labelColor,
+    fill: getColorValue(colors, props.color, "noteFill"),
+    fontSize,
+    lineHeight: fontSize * theme.lineHeight,
+    noteWidth: side,
+    noteHeight: side,
+    labelPadding: (options.labelPadding ?? NOTE_PADDING) * props.scale,
+    labelFontSize: fontSize,
+    labelFontFamily: theme.fonts[props.font] ?? theme.fonts.draw,
+    // SEMANTICS-ASSUMED: a note's label is upright, regular and unshaped. Rich
+    // text carries its own bold/italic runs as marks, so the shape-level
+    // typography is the base every run is measured relative to.
+    labelFontStyle: "normal",
+    labelFontWeight: "normal",
+    labelFontVariant: "normal",
+    labelLineHeight: theme.lineHeight
+  };
+}
+function getNoteGrowY(shape, editor) {
+  const { richText, text, font, scale } = readNoteProps(shape);
+  if (!text) return 0;
+  const side = NOTE_SIZE * scale;
+  const m = measureLabel(richText, {
+    fontFamily: font,
+    fontSize: getNoteFontSize(shape),
+    maxWidth: side,
+    padding: NOTE_PADDING * scale,
+    editor: editor ?? null
+  });
+  return computeGrowY(m.h, side);
+}
+var LABEL_KEYS2 = ["richText", "text", "font", "size", "scale", "fontSizeAdjustment"];
+var NoteShapeUtil = class extends ShapeUtil {
+  static type = "note";
+  // A method, not an arrow: `getDisplayValues` calls it on the options bag, so
+  // `this` is the bag a `configure()` copy actually carries. Closing over
+  // `NoteShapeUtil.options` instead would make every configured copy resolve
+  // against the unconfigured defaults.
+  static options = {
+    getDefaultDisplayValues(editor, shape, theme, colorMode) {
+      return getNoteDisplayValues(editor, shape, theme, colorMode, this);
+    }
+  };
+  static props = noteShapeProps;
+  static migrations = noteShapeMigrations;
+  getDefaultProps() {
+    return {
+      color: "black",
+      labelColor: "black",
+      size: "m",
+      font: "draw",
+      fontSizeAdjustment: 0,
+      align: "middle",
+      verticalAlign: "middle",
+      growY: 0,
+      url: "",
+      richText: toRichText(""),
+      text: "",
+      // Deliberately absent: `textFirstEditedBy` is read and round-tripped but
+      // never written by mocanvas (only the host knows who "a person" is), and
+      // defaulting it would make every file that predates attribution warn on
+      // load about a prop nothing here ever sets.
+      scale: 1
+    };
+  }
+  getGeometry(shape) {
+    const { scale, growY } = readNoteProps(shape);
+    return new Rectangle2d({ width: NOTE_SIZE * scale, height: NOTE_SIZE * scale + growY, isFilled: true });
+  }
+  getRenderStyle(shape) {
+    const colors = getThemeColors(this.editor);
+    return { fill: getNoteFillRgba(readNoteProps(shape).color, colors), stroke: 0, strokeWidth: 0, dash: 0, opacity: 1 };
+  }
+  /** A note is nothing but a label, so it needs its family's faces. */
+  getFontFaces(shape) {
+    return getLabelFontFaces(readNoteProps(shape).font);
+  }
+  component(shape) {
+    const { richText, text, font, color, align, verticalAlign, scale, growY } = readNoteProps(shape);
+    const display = getDisplayValues(this, shape);
+    const colors = getThemeColors(this.editor);
+    const textColor = display.labelColor;
+    const w = NOTE_SIZE * scale;
+    const h = NOTE_SIZE * scale + growY;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: w,
+            height: h,
+            background: getNoteBodyGradientCss(color, colors),
+            boxShadow: getNoteShadowCss(scale),
+            pointerEvents: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextLabel,
+        {
+          shape,
+          text,
+          richText,
+          isEditing: this.editor.getEditingShapeId() === shape.id,
+          fontFamily: font,
+          fontSize: display.labelFontSize,
+          color: textColor,
+          textAlign: align,
+          verticalAlign,
+          wrap: true,
+          width: w,
+          height: h,
+          padding: display.labelPadding,
+          onChange: (next) => this.editor.updateShape({
+            id: shape.id,
+            type: "note",
+            props: { text: next, richText: applyPlainTextToRichText(richText, next) }
+          }),
+          onChangeRichText: (next) => this.editor.updateShape({
+            id: shape.id,
+            type: "note",
+            props: { richText: next, text: richTextToText(next) }
+          })
+        }
+      )
+    ] });
+  }
+  getIndicatorPath(shape) {
+    const { scale, growY } = readNoteProps(shape);
+    return rectPath(NOTE_SIZE * scale, NOTE_SIZE * scale + growY);
+  }
+  /**
+   * The GPU draws the sticky background even while editing; the overlay adds
+   * the gradient and the shadow over it (see `component`).
+   */
+  needsOverlay(_shape) {
+    return false;
+  }
+  hasOverlayLabel(_shape) {
+    return true;
+  }
+  canEdit(_shape) {
+    return true;
+  }
+  hideResizeHandles(_shape) {
+    return true;
+  }
+  getText(shape) {
+    return readText(shape.props);
+  }
+  onBeforeCreate(next) {
+    const growY = getNoteGrowY(next, this.editor);
+    if (growY !== next.props.growY) return { ...next, props: { ...next.props, growY } };
+  }
+  onBeforeUpdate(prev, next) {
+    if (!LABEL_KEYS2.some((k) => propsOf(prev)[k] !== propsOf(next)[k])) return;
+    const growY = getNoteGrowY(next, this.editor);
+    if (growY !== next.props.growY) return { ...next, props: { ...next.props, growY } };
+  }
+  onEditEnd(shape) {
+    const text = readText(shape.props);
+    const trimmed = trimTrailingWhitespace(text);
+    if (trimmed === text) return;
+    this.editor.updateShape({
+      id: shape.id,
+      type: "note",
+      props: { text: trimmed, richText: applyPlainTextToRichText(readRichText(shape.props), trimmed) }
+    });
+  }
+};
+
+// src/text/TextTexture.ts
+var MAX_TEXT_TEXTURE_PX = 4096;
+function textTextureAlign(spec) {
+  return spec.textAlign ?? spec.align ?? "start";
+}
+function textTextureText(spec) {
+  return spec.richText === void 0 || spec.richText === null ? spec.text : richTextToText(spec.richText);
+}
+function getTextTextureKey(spec) {
+  return [
+    "text",
+    spec.fontFamily,
+    spec.fontSize,
+    spec.lineHeight,
+    spec.color,
+    textTextureAlign(spec),
+    spec.verticalAlign,
+    round(spec.width),
+    round(spec.height),
+    spec.maxWidth === void 0 ? "" : round(spec.maxWidth),
+    spec.padding ?? 0,
+    spec.resolution,
+    spec.richText === void 0 || spec.richText === null ? spec.text : JSON.stringify(spec.richText)
+  ].join("|");
+}
+function runWidth(text, spec, style) {
+  if (text.length === 0) return 0;
+  return getTextMeasure().measureText(text, {
+    fontFamily: spec.fontFamily,
+    fontSize: spec.fontSize,
+    lineHeight: spec.lineHeight,
+    ...style?.bold ? { fontWeight: "bold" } : {}
+  }).w;
+}
+function wrapTextTextureLines(spec) {
+  const padding = spec.padding ?? 0;
+  const max = spec.maxWidth === void 0 ? void 0 : Math.max(1, spec.maxWidth - padding * 2);
+  const out = [];
+  for (const paragraph of textTextureText(spec).split("\n")) {
+    if (max === void 0 || paragraph.length === 0) {
+      out.push(paragraph);
+      continue;
+    }
+    let line = "";
+    for (const word of paragraph.split(" ")) {
+      const candidate = line.length === 0 ? word : `${line} ${word}`;
+      if (runWidth(candidate, spec) <= max || line.length === 0) {
+        line = candidate;
+        if (line.length > 0 && runWidth(line, spec) > max) {
+          const parts = breakLongWord(line, spec, max);
+          out.push(...parts.slice(0, -1));
+          line = parts[parts.length - 1] ?? "";
+        }
+        continue;
+      }
+      out.push(line);
+      line = word;
+    }
+    out.push(line);
+  }
+  return out;
+}
+function breakLongWord(word, spec, max) {
+  const parts = [];
+  let current = "";
+  for (const char of word) {
+    const next = current + char;
+    if (current.length > 0 && runWidth(next, spec) > max) {
+      parts.push(current);
+      current = char;
+    } else {
+      current = next;
+    }
+  }
+  parts.push(current);
+  return parts;
+}
+function sameStyle(a, b) {
+  return a.bold === b.bold && a.italic === b.italic && a.underline === b.underline && a.strike === b.strike && a.code === b.code && a.href === b.href;
+}
+function wrapTextTextureRuns(spec) {
+  const padding = spec.padding ?? 0;
+  const max = spec.maxWidth === void 0 ? void 0 : Math.max(1, spec.maxWidth - padding * 2);
+  const source = spec.richText === void 0 || spec.richText === null ? spec.text : spec.richText;
+  const out = [];
+  for (const block of richTextToBlocks(source)) {
+    let line = [];
+    let width = 0;
+    const push = () => {
+      while (line.length > 0 && /^\s+$/u.test(line[line.length - 1].text)) {
+        const dropped = line.pop();
+        width -= runWidth(dropped.text, spec, dropped);
+      }
+      out.push({ runs: mergeRuns(line), width: Math.max(0, width) });
+      line = [];
+      width = 0;
+    };
+    for (const run of block.runs) {
+      for (const token of run.text.split(/(\s+)/u).filter((t) => t.length > 0)) {
+        const isSpace = /^\s+$/u.test(token);
+        const tokenWidth = runWidth(token, spec, run);
+        if (max !== void 0 && !isSpace && line.length > 0 && width + tokenWidth > max) {
+          push();
+        }
+        if (isSpace && line.length === 0) continue;
+        if (max !== void 0 && !isSpace && tokenWidth > max) {
+          for (const piece of breakLongToken(token, spec, run, max, width, line.length > 0)) {
+            if (piece === null) push();
+            else {
+              line.push({ ...run, text: piece });
+              width += runWidth(piece, spec, run);
+            }
+          }
+          continue;
+        }
+        line.push({ ...run, text: token });
+        width += tokenWidth;
+      }
+    }
+    push();
+  }
+  return out;
+}
+function breakLongToken(token, spec, style, max, startWidth, canBreakFirst) {
+  const out = [];
+  if (canBreakFirst && startWidth > 0) out.push(null);
+  let current = "";
+  for (const char of token) {
+    const next = current + char;
+    if (current.length > 0 && runWidth(next, spec, style) > max) {
+      out.push(current, null);
+      current = char;
+    } else {
+      current = next;
+    }
+  }
+  if (current.length > 0) out.push(current);
+  return out;
+}
+function mergeRuns(runs) {
+  const out = [];
+  for (const run of runs) {
+    const last = out[out.length - 1];
+    if (last && sameStyle(last, run)) last.text += run.text;
+    else out.push({ ...run });
+  }
+  return out;
+}
+function getTextTextureScale(spec) {
+  const longest = Math.max(1, spec.width, spec.height);
+  return Math.max(0.05, Math.min(spec.resolution, MAX_TEXT_TEXTURE_PX / longest));
+}
+function renderTextToCanvas(spec) {
+  if (typeof document === "undefined") throw new Error("mocanvas: no document to rasterize text with");
+  const scale = getTextTextureScale(spec);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(spec.width * scale));
+  canvas.height = Math.max(1, Math.ceil(spec.height * scale));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("mocanvas: no 2d context to rasterize text with");
+  const padding = spec.padding ?? 0;
+  const lines = wrapTextTextureRuns(spec);
+  const lineHeightPx = spec.fontSize * spec.lineHeight;
+  const blockHeight = lines.length * lineHeightPx;
+  const align = textTextureAlign(spec);
+  ctx.scale(scale, scale);
+  ctx.fillStyle = spec.color;
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "left";
+  const innerH = Math.max(0, spec.height - padding * 2);
+  const innerW = Math.max(0, spec.width - padding * 2);
+  const top = padding + (spec.verticalAlign === "start" ? 0 : spec.verticalAlign === "end" ? innerH - blockHeight : (innerH - blockHeight) / 2);
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const baseline = top + i * lineHeightPx + lineHeightPx / 2;
+    let x = padding + (align === "start" ? 0 : align === "end" ? innerW - line.width : (innerW - line.width) / 2);
+    for (const run of line.runs) {
+      ctx.font = runFont(run, spec);
+      ctx.fillText(run.text, x, baseline);
+      const width = runWidth(run.text, spec, run);
+      if (run.underline || run.strike) {
+        const thickness = Math.max(1, spec.fontSize / 14);
+        const y = run.underline ? baseline + spec.fontSize * 0.4 : baseline;
+        ctx.fillRect(x, y - thickness / 2, width, thickness);
+      }
+      x += width;
+    }
+  }
+  return canvas;
+}
+function runFont(style, spec) {
+  const parts = [];
+  if (style.italic) parts.push("italic");
+  if (style.bold) parts.push("bold");
+  parts.push(`${spec.fontSize}px`, spec.fontFamily);
+  return parts.join(" ");
+}
+function round(v) {
+  return Math.round(v * 100) / 100;
+}
+var TEXT_ALIGNS = ["start", "middle", "end"];
+function readTextProps(shape) {
+  const p = propsOf(shape);
+  return {
+    color: readStyle(p, "color", DefaultColorStyle),
+    size: readStyle(p, "size", DefaultSizeStyle),
+    font: readStyle(p, "font", DefaultFontStyle),
+    textAlign: readEnum(p, "textAlign", TEXT_ALIGNS, "start"),
+    w: readNumber(p, "w", 100),
+    richText: readRichText(p),
+    text: readText(p),
+    scale: readNumber(p, "scale", 1),
+    autoSize: readBoolean(p, "autoSize", true)
+  };
+}
+function getTextShapeSizeFor(shape, editor) {
+  const { richText, size, scale, w, font, autoSize } = readTextProps(shape);
+  return getTextShapeSize({
+    text: richText,
+    fontFamily: font,
+    fontSize: FONT_SIZES[size] * scale,
+    autoSize,
+    w,
+    editor: editor ?? null
+  });
+}
+function getTextShapeHeight(shape, editor) {
+  return getTextShapeSizeFor(shape, editor).h;
+}
+function getTextShapeBox(shape, editor) {
+  const { w, h } = getTextShapeSizeFor(shape, editor);
+  const props = readTextProps(shape);
+  return { w: Math.max(1, props.autoSize ? Math.max(w, props.w) : props.w), h };
+}
+function getTextShapeTextureSpec(editor, shape) {
+  const { text, font, size, scale, color, textAlign, autoSize } = readTextProps(shape);
+  const box = getTextShapeBox(shape, editor);
+  return {
+    text,
+    fontFamily: getFontFamily(font, getTheme(editor)),
+    fontSize: FONT_SIZES[size] * scale,
+    color: getTextCssColor(color, getThemeColors(editor)),
+    align: textAlign,
+    verticalAlign: "start",
+    lineHeight: LINE_HEIGHT,
+    width: box.w,
+    height: box.h,
+    ...autoSize ? {} : { maxWidth: box.w },
+    resolution: editor.getTextureResolution()
+  };
+}
+function canRasterizeText() {
+  return typeof document !== "undefined";
+}
+var SIZE_KEYS = ["richText", "text", "font", "size", "scale", "autoSize"];
+function getTextDisplayValues(editor, shape, theme, colorMode) {
+  const base = getDefaultDisplayValues(editor, shape, theme, colorMode);
+  const scale = readNumber(propsOf(shape), "scale", 1);
+  return {
+    ...base,
+    labelFontSize: base.fontSize * scale,
+    labelLineHeight: base.fontSize * scale * LINE_HEIGHT,
+    labelFontFamily: base.fontFamily
+  };
+}
+var TextShapeUtil = class extends ShapeUtil {
+  static type = "text";
+  static props = textShapeProps;
+  static migrations = textShapeMigrations;
+  static options = { getDefaultDisplayValues: getTextDisplayValues };
+  getDefaultProps() {
+    return {
+      color: "black",
+      size: "m",
+      font: "draw",
+      textAlign: "start",
+      w: 100,
+      richText: toRichText(""),
+      text: "",
+      scale: 1,
+      autoSize: true
+    };
+  }
+  getGeometry(shape) {
+    const box = getTextShapeBox(shape, this.editor);
+    return new Rectangle2d({ width: box.w, height: box.h, isFilled: true });
+  }
+  /** A text shape is nothing but a label, so it always needs its family's faces. */
+  getFontFaces(shape) {
+    return getLabelFontFaces(readTextProps(shape).font);
+  }
+  /**
+   * A texture of the rasterized label, so the GPU draws the text instead of the
+   * DOM. The shape being edited (and any environment without a canvas) keeps
+   * the DOM path; `fill` is the text colour so the level-of-detail quad the
+   * engine draws below a few pixels still looks right.
+   */
+  getRenderStyle(shape) {
+    const key = this.getTextureKey(shape);
+    if (!key) return null;
+    const texture = this.editor.textures.acquire(key.key, async () => renderTextToCanvas(key.spec));
+    if (!texture) return null;
+    return {
+      fill: getStrokeRgba(readTextProps(shape).color, getThemeColors(this.editor)),
+      stroke: 0,
+      strokeWidth: 0,
+      dash: 0,
+      opacity: 1,
+      texture
+    };
+  }
+  /** The DOM label stands in while editing and until the texture is ready. */
+  needsOverlay(shape) {
+    const key = this.getTextureKey(shape);
+    return key === null || !this.editor.textures.isReady(key.key);
+  }
+  getTextureKey(shape) {
+    if (this.editor.getEditingShapeId() === shape.id) return null;
+    if (readText(shape.props).length === 0) return null;
+    if (!canRasterizeText()) return null;
+    const spec = getTextShapeTextureSpec(this.editor, shape);
+    return { key: getTextTextureKey(spec), spec };
+  }
+  component(shape) {
+    const { richText, text, font, size, scale, textAlign, w, autoSize } = readTextProps(shape);
+    const display = getDisplayValues(this, shape);
+    return /* @__PURE__ */ jsx(
+      TextLabel,
+      {
+        shape,
+        text,
+        richText,
+        isEditing: this.editor.getEditingShapeId() === shape.id,
+        fontFamily: font,
+        fontSize: FONT_SIZES[size] * scale,
+        color: display.color,
+        textAlign,
+        verticalAlign: "start",
+        wrap: !autoSize,
+        width: Math.max(1, w),
+        onChange: (next) => this.editor.updateShape({
+          id: shape.id,
+          type: "text",
+          props: { text: next, richText: applyPlainTextToRichText(richText, next) }
+        }),
+        onChangeRichText: (next) => this.editor.updateShape({
+          id: shape.id,
+          type: "text",
+          props: { richText: next, text: richTextToText(next) }
+        })
+      }
+    );
+  }
+  getIndicatorPath(shape) {
+    const b = this.getGeometry(shape).bounds;
+    return rectPath(b.w, b.h);
+  }
+  canEdit(_shape) {
+    return true;
+  }
+  isAspectRatioLocked(_shape) {
+    return false;
+  }
+  getText(shape) {
+    return readText(shape.props);
+  }
+  /** Auto-sized text keeps `w` in sync with its measured width. */
+  onBeforeCreate(next) {
+    return this.fitWidth(next);
+  }
+  onBeforeUpdate(prev, next) {
+    if (!readTextProps(next).autoSize) return;
+    if (!SIZE_KEYS.some((k) => propsOf(prev)[k] !== propsOf(next)[k])) return;
+    return this.fitWidth(next);
+  }
+  fitWidth(shape) {
+    const props = readTextProps(shape);
+    if (!props.autoSize) return;
+    const { w } = getTextShapeSizeFor(shape, this.editor);
+    if (w !== props.w) return { ...shape, props: { ...shape.props, w } };
+  }
+  /** A text shape left empty after editing is removed. */
+  onEditEnd(shape) {
+    if (readText(shape.props).trim().length === 0) this.editor.deleteShapes([shape.id]);
+  }
+  /** Resizing a text shape changes its wrap width and turns auto-size off. */
+  onResize(shape, info) {
+    const { scaleX, initialShape, newPoint } = info;
+    const w = Math.max(1, Math.abs(readTextProps(initialShape).w * scaleX));
+    return { x: newPoint.x, y: newPoint.y, props: { ...shape.props, w, autoSize: false } };
+  }
+};
+var VIDEO_WIDTH = 640;
+var VIDEO_HEIGHT = 360;
+var VIDEO_PLACEHOLDER_FILL = "#eceff3";
+var VIDEO_PLACEHOLDER_STROKE = "#9fa8b2";
+var VIDEO_PLAY_COLOR = "#5f6670";
+var VIDEO_PLAY_SIZE = 48;
+var VIDEO_TIME_EPSILON = 0.1;
+function isVideoAutoplayAllowed(editor) {
+  return editor?.options?.allowVideoAutoplay !== false;
+}
+function getVideoSource(editor, shape) {
+  const assetId = readString(propsOf(shape), "assetId", "");
+  if (!assetId) return null;
+  const asset = editor.getAsset(assetId);
+  if (!asset || asset.type !== "video") return null;
+  return asset.props.src ?? null;
+}
+function readVideoBox(shape) {
+  const p = propsOf(shape);
+  return { w: readNumber(p, "w", VIDEO_WIDTH), h: readNumber(p, "h", VIDEO_HEIGHT) };
+}
+function getVideoPlayTriangle(w, h, size = VIDEO_PLAY_SIZE) {
+  const s = Math.max(0, Math.min(size, w * 0.6, h * 0.6));
+  const cx = w / 2;
+  const cy = h / 2;
+  const half = s / 2;
+  return [
+    { x: cx - half * 0.6, y: cy - half },
+    { x: cx - half * 0.6, y: cy + half },
+    { x: cx + half * 0.9, y: cy }
+  ];
+}
+function VideoPlayer({ src, time, playing, controls, altText }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const seek = () => {
+      if (Math.abs(el.currentTime - time) <= VIDEO_TIME_EPSILON) return;
+      try {
+        el.currentTime = time;
+      } catch {
+      }
+    };
+    seek();
+    el.addEventListener("loadedmetadata", seek);
+    return () => el.removeEventListener("loadedmetadata", seek);
+  }, [time, src]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (playing) void el.play().catch(() => {
+    });
+    else el.pause();
+  }, [playing, src]);
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref,
+      src,
+      controls,
+      playsInline: true,
+      muted: true,
+      loop: true,
+      preload: "metadata",
+      "aria-label": altText || void 0,
+      draggable: false,
+      style: {
+        display: "block",
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        // Controls are only reachable while editing; otherwise the canvas
+        // keeps the pointer so a drag over a video still pans.
+        pointerEvents: controls ? "auto" : "none",
+        userSelect: "none"
+      }
+    }
+  );
+}
+function getVideoDisplayValues(editor, shape, theme, colorMode) {
+  return {
+    ...getDefaultDisplayValues(editor, shape, theme, colorMode),
+    placeholderFill: VIDEO_PLACEHOLDER_FILL,
+    placeholderStroke: VIDEO_PLACEHOLDER_STROKE,
+    playColor: VIDEO_PLAY_COLOR,
+    playSize: VIDEO_PLAY_SIZE
+  };
+}
+var VideoShapeUtil = class extends BaseBoxShapeUtil {
+  static type = "video";
+  static props = videoShapeProps;
+  static migrations = videoShapeMigrations;
+  static options = { getDefaultDisplayValues: getVideoDisplayValues };
+  getDefaultProps() {
+    return { w: VIDEO_WIDTH, h: VIDEO_HEIGHT, assetId: null, time: 0, playing: true, url: "", altText: "" };
+  }
+  getGeometry(shape) {
+    const { w, h } = readVideoBox(shape);
+    return new Rectangle2d({ width: Math.max(1, w), height: Math.max(1, h), isFilled: true });
+  }
+  /** A moving picture is not a texture the engine owns: video renders in the DOM overlay. */
+  getRenderStyle(_shape) {
+    return null;
+  }
+  component(shape) {
+    const { w, h } = readVideoBox(shape);
+    const p = propsOf(shape);
+    const altText = readString(p, "altText", "");
+    const src = getVideoSource(this.editor, shape);
+    const box = { position: "absolute", left: 0, top: 0, width: w, height: h, overflow: "hidden", boxSizing: "border-box" };
+    if (!src) {
+      const [a, b, c] = getVideoPlayTriangle(w, h);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { ...box, background: VIDEO_PLACEHOLDER_FILL, border: `1px dashed ${VIDEO_PLACEHOLDER_STROKE}`, pointerEvents: "none" },
+          "aria-label": altText || "video",
+          children: /* @__PURE__ */ jsx("svg", { width: w, height: h, viewBox: `0 0 ${Math.max(1, w)} ${Math.max(1, h)}`, style: { display: "block" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polygon", { points: `${a.x},${a.y} ${b.x},${b.y} ${c.x},${c.y}`, fill: VIDEO_PLAY_COLOR }) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { style: box, children: /* @__PURE__ */ jsx(
+      VideoPlayer,
+      {
+        src,
+        time: readNumber(p, "time", 0),
+        playing: readBoolean(p, "playing", true) && isVideoAutoplayAllowed(this.editor),
+        controls: this.editor.getEditingShapeId() === shape.id,
+        altText
+      }
+    ) });
+  }
+  getIndicatorPath(shape) {
+    const { w, h } = readVideoBox(shape);
+    return rectPath(w, h);
+  }
+  /** Editing a video means taking its controls, not typing into it. */
+  canEdit(_shape) {
+    return true;
+  }
+  isAspectRatioLocked(_shape) {
+    return true;
+  }
+};
+function svgNum(v) {
+  if (!Number.isFinite(v)) return "0";
+  const r = Math.round(v * 100) / 100;
+  return String(r === 0 ? 0 : r);
+}
+function escapeXml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function rgbaToHex(word) {
+  const w = word >>> 0;
+  const a = w & 255;
+  if (a === 0) return void 0;
+  const r = w >>> 24 & 255;
+  const g = w >>> 16 & 255;
+  const b = w >>> 8 & 255;
+  const hex = (n) => n.toString(16).padStart(2, "0");
+  return a === 255 ? `#${hex(r)}${hex(g)}${hex(b)}` : `#${hex(r)}${hex(g)}${hex(b)}${hex(a)}`;
+}
+function matrixAttr(m) {
+  return `matrix(${svgNum(m.a)} ${svgNum(m.b)} ${svgNum(m.c)} ${svgNum(m.d)} ${svgNum(m.e)} ${svgNum(m.f)})`;
+}
+function dashArray(dash, strokeWidth) {
+  const sw = Math.max(0.5, strokeWidth);
+  switch (dash) {
+    case 1:
+      return `${svgNum(sw * 2)} ${svgNum(sw * 2)}`;
+    case 2:
+      return `0.1 ${svgNum(sw * 2)}`;
+    default:
+      return void 0;
+  }
+}
+function attrs(values) {
+  const parts = [];
+  for (const [k, v] of Object.entries(values)) {
+    if (v === void 0) continue;
+    parts.push(`${k}="${typeof v === "number" ? svgNum(v) : escapeXml(v)}"`);
+  }
+  return parts.join(" ");
+}
+function strokeAttrs(style) {
+  const stroke = rgbaToHex(style.stroke);
+  if (!stroke || style.strokeWidth <= 0) return { stroke: "none" };
+  return {
+    stroke,
+    "stroke-width": style.strokeWidth,
+    "stroke-linejoin": "round",
+    "stroke-linecap": "round",
+    "stroke-dasharray": dashArray(style.dash, style.strokeWidth)
+  };
+}
+function isGroup(g) {
+  return Array.isArray(g.children);
+}
+function geometryLeaves(geometry) {
+  if (!isGroup(geometry)) return geometry.isLabel ? [] : [geometry];
+  return geometry.children.flatMap((c) => geometryLeaves(c));
+}
+function geometryLabels(geometry) {
+  if (!isGroup(geometry)) return geometry.isLabel ? [geometry] : [];
+  return geometry.children.flatMap((c) => geometryLabels(c));
+}
+function hasPathWords(words) {
+  return words.length > 0 && words[0] === PATH_OP.MOVE;
+}
+function geometryToSvgPaths(geometry, style) {
+  const fill = rgbaToHex(style.fill);
+  const stroke = strokeAttrs(style);
+  const out = [];
+  for (const leaf of geometryLeaves(geometry)) {
+    const words = leaf.toPathWords();
+    if (!hasPathWords(words)) continue;
+    const filled = fill !== void 0 && leaf.isClosed && leaf.isFilled;
+    out.push(`<path ${attrs({ d: pathWordsToSvgD(words), fill: filled ? fill : "none", ...stroke })}/>`);
+  }
+  return out.join("");
+}
+
+// src/export/text-svg.ts
+function alignOf(opts) {
+  return opts.textAlign ?? opts.align ?? "middle";
+}
+function wrapTextLines(text, fontSize, maxWidth = Infinity) {
+  const charW = fontSize * AVG_CHAR_WIDTH;
+  const limit = Number.isFinite(maxWidth) && charW > 0 ? Math.max(1, Math.floor(maxWidth / charW)) : Infinity;
+  const lines = [];
+  for (const paragraph of text.split("\n")) {
+    if (paragraph.length <= limit) {
+      lines.push(paragraph);
+      continue;
+    }
+    let current = "";
+    for (const word of paragraph.split(" ")) {
+      const candidate = current.length === 0 ? word : `${current} ${word}`;
+      if (candidate.length <= limit) {
+        current = candidate;
+        continue;
+      }
+      if (current.length > 0) lines.push(current);
+      let rest = word;
+      while (rest.length > limit) {
+        lines.push(rest.slice(0, limit));
+        rest = rest.slice(limit);
+      }
+      current = rest;
+    }
+    lines.push(current);
+  }
+  return lines;
+}
+function anchorFor(align) {
+  switch (align) {
+    case "start":
+    case "start-legacy":
+      return "start";
+    case "end":
+    case "end-legacy":
+      return "end";
+    default:
+      return "middle";
+  }
+}
+function wrapRichTextLines(source, fontSize, maxWidth = Infinity) {
+  const charW = fontSize * AVG_CHAR_WIDTH;
+  const limit = Number.isFinite(maxWidth) && charW > 0 ? Math.max(1, Math.floor(maxWidth / charW)) : Infinity;
+  const lines = [];
+  for (const block of richTextToBlocks(source)) {
+    let line = [];
+    let length = 0;
+    const push = () => {
+      while (line.length > 0 && /^\s+$/u.test(line[line.length - 1].text)) line.pop();
+      lines.push(mergeSvgRuns(line));
+      line = [];
+      length = 0;
+    };
+    for (const run of block.runs) {
+      for (const token of run.text.split(/(\s+)/u).filter((t) => t.length > 0)) {
+        const isSpace = /^\s+$/u.test(token);
+        if (!isSpace && length > 0 && length + token.length > limit) push();
+        if (isSpace && length === 0) continue;
+        if (!isSpace && token.length > limit) {
+          let rest = token;
+          while (rest.length > limit) {
+            if (length > 0) push();
+            line.push({ ...run, text: rest.slice(0, limit) });
+            length = limit;
+            rest = rest.slice(limit);
+            push();
+          }
+          if (rest.length > 0) {
+            line.push({ ...run, text: rest });
+            length += rest.length;
+          }
+          continue;
+        }
+        line.push({ ...run, text: token });
+        length += token.length;
+      }
+    }
+    push();
+  }
+  return lines;
+}
+function mergeSvgRuns(runs) {
+  const out = [];
+  for (const run of runs) {
+    const last = out[out.length - 1];
+    if (last && last.bold === run.bold && last.italic === run.italic && last.underline === run.underline && last.strike === run.strike && last.code === run.code && last.href === run.href) last.text += run.text;
+    else out.push({ ...run });
+  }
+  return out;
+}
+function runAttrs(run, opts) {
+  const decorations = [];
+  if (run.underline) decorations.push("underline");
+  if (run.strike) decorations.push("line-through");
+  return {
+    "font-weight": run.bold ? "bold" : opts.fontWeight === void 0 ? void 0 : String(opts.fontWeight),
+    "font-style": run.italic ? "italic" : void 0,
+    "text-decoration": decorations.length === 0 ? void 0 : decorations.join(" ")
+  };
+}
+function textToSvg(source, box, opts) {
+  const rich = isRichText(source);
+  const plain = richTextToText(source);
+  if (plain.length === 0) return "";
+  const padding = opts.padding ?? 0;
+  const innerX = box.x + padding;
+  const innerY = box.y + padding;
+  const innerW = Math.max(0, box.w - padding * 2);
+  const innerH = Math.max(0, box.h - padding * 2);
+  const wrapWidth = opts.wrap ? innerW : Infinity;
+  const lineCount = rich ? wrapRichTextLines(source, opts.fontSize, wrapWidth).length : wrapTextLines(plain, opts.fontSize, wrapWidth).length;
+  const lineH = opts.fontSize * LINE_HEIGHT;
+  const blockH = lineCount * lineH;
+  const anchor = anchorFor(alignOf(opts));
+  const x = anchor === "start" ? innerX : anchor === "end" ? innerX + innerW : innerX + innerW / 2;
+  const top = opts.verticalAlign === "start" ? innerY : opts.verticalAlign === "end" ? innerY + innerH - blockH : innerY + (innerH - blockH) / 2;
+  const lineY = (i) => top + lineH * i + lineH / 2;
+  const spans = rich ? wrapRichTextLines(source, opts.fontSize, wrapWidth).map((runs, i) => {
+    const content = runs.length === 0 ? "\u200B" : runs.map((run) => {
+      const a2 = attrs(runAttrs(run, opts));
+      const inner = `<tspan${a2.length === 0 ? "" : ` ${a2}`}>${escapeXml(run.text)}</tspan>`;
+      const href = safeHref(run.href);
+      return href === null ? inner : `<a ${attrs({ href })}>${inner}</a>`;
+    }).join("");
+    return `<tspan x="${svgNum(x)}" y="${svgNum(lineY(i))}">${content}</tspan>`;
+  }).join("") : wrapTextLines(plain, opts.fontSize, wrapWidth).map((line, i) => `<tspan x="${svgNum(x)}" y="${svgNum(lineY(i))}">${line.length === 0 ? "\u200B" : escapeXml(line)}</tspan>`).join("");
+  const a = attrs({
+    "font-family": opts.fontFamily,
+    "font-size": opts.fontSize,
+    "font-weight": opts.fontWeight === void 0 ? void 0 : String(opts.fontWeight),
+    fill: opts.color,
+    "text-anchor": anchor,
+    "dominant-baseline": "central",
+    "xml:space": "preserve"
+  });
+  return `<text ${a}>${spans}</text>`;
+}
+
+// src/export/shape-svg.ts
+function geometryFallbackSvg(editor, shape) {
+  const geometry = editor.getShapeGeometry(shape);
+  const style = editor.getShapeUtil(shape).getRenderStyle(shape) ?? {
+    fill: 0,
+    stroke: hexToRgba(LIGHT_THEME.text),
+    strokeWidth: 1,
+    dash: 0};
+  return geometryToSvgPaths(geometry, style);
+}
+var defaultShapeSvgRenderer = (editor, shape) => geometryFallbackSvg(editor, shape);
+function svgId(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function labelBox(editor, shape) {
+  const label = geometryLabels(editor.getShapeGeometry(shape))[0];
+  if (!label) return void 0;
+  const b = label.bounds;
+  return { x: b.x, y: b.y, w: b.w, h: b.h };
+}
+var geoSvg = (editor, shape) => {
+  const { text, font, size, scale, labelColor, align, verticalAlign } = shape.props;
+  let out = geometryFallbackSvg(editor, shape);
+  if (!text) return out;
+  const box = labelBox(editor, shape);
+  if (!box) return out;
+  out += textToSvg(text, box, {
+    fontFamily: getFontFamily(font),
+    fontSize: FONT_SIZES[size] * scale,
+    color: getTextCssColor(labelColor),
+    align,
+    verticalAlign,
+    padding: GEO_LABEL_PADDING * scale,
+    wrap: true
+  });
+  return out;
+};
+var drawSvg = (editor, shape) => geometryFallbackSvg(editor, shape);
+var lineSvg = (editor, shape) => geometryFallbackSvg(editor, shape);
+var arrowSvg = (editor, shape, ctx) => {
+  const { text, font, size, scale, labelColor } = shape.props;
+  let out = geometryFallbackSvg(editor, shape);
+  if (!text) return out;
+  const box = labelBox(editor, shape);
+  if (!box) return out;
+  out += `<rect ${attrs({ x: box.x, y: box.y, width: box.w, height: box.h, rx: 4, fill: ctx.background })}/>`;
+  out += textToSvg(text, box, {
+    fontFamily: getFontFamily(font),
+    fontSize: FONT_SIZES[size] * scale,
+    color: getTextCssColor(labelColor),
+    align: "middle",
+    verticalAlign: "middle",
+    padding: ARROW_LABEL_PADDING * scale,
+    wrap: false
+  });
+  return out;
+};
+var textSvg = (editor, shape) => {
+  const { text, font, size, scale, color, textAlign, autoSize } = shape.props;
+  const b = editor.getShapeGeometry(shape).bounds;
+  return textToSvg(text, { x: b.x, y: b.y, w: b.w, h: b.h }, {
+    fontFamily: getFontFamily(font),
+    fontSize: FONT_SIZES[size] * scale,
+    color: getTextCssColor(color),
+    align: textAlign,
+    verticalAlign: "start",
+    wrap: !autoSize
+  });
+};
+function noteTrimDefs(shape, bottom, ids) {
+  const scale = shape.props.scale;
+  const gradient = `<linearGradient ${attrs({ id: ids.gradient, x1: 0, y1: 0, x2: 0, y2: 1 })}><stop ${attrs({ offset: 0, "stop-color": getNoteGradientTopFrom(bottom) })}/><stop ${attrs({ offset: 1, "stop-color": bottom })}/></linearGradient>`;
+  const filter = `<filter ${attrs({ id: ids.shadow, x: "-50%", y: "-50%", width: "200%", height: "200%" })}><feGaussianBlur ${attrs({ stdDeviation: getNoteShadowSvgRect(0, 0, scale).stdDeviation })}/></filter>`;
+  return `<defs>${gradient}${filter}</defs>`;
+}
+var noteSvg = (editor, shape) => {
+  const { text, font, color, labelColor, align, verticalAlign, scale, growY } = shape.props;
+  const w = NOTE_SIZE * scale;
+  const h = NOTE_SIZE * scale + growY;
+  const style = editor.getShapeUtil(shape).getRenderStyle(shape);
+  const bottom = (style && rgbaToHex(style.fill)) ?? getNoteFillCssColor(color);
+  const suffix = svgId(shape.id);
+  const ids = { gradient: `mc-note-fill-${suffix}`, shadow: `mc-note-shadow-${suffix}` };
+  let out = noteTrimDefs(shape, bottom, ids);
+  const sh = getNoteShadowSvgRect(w, h, scale);
+  if (sh.w > 0 && sh.h > 0) {
+    out += `<rect ${attrs({
+      x: sh.x,
+      y: sh.y,
+      width: sh.w,
+      height: sh.h,
+      fill: NOTE_SHADOW_COLOR,
+      "fill-opacity": NOTE_SHADOW_OPACITY,
+      filter: `url(#${ids.shadow})`
+    })}/>`;
+  }
+  out += `<rect ${attrs({ x: 0, y: 0, width: w, height: h, fill: `url(#${ids.gradient})` })}/>`;
+  if (!text) return out;
+  const textColor = labelColor === "black" ? getNoteTextCssColor(color) : LIGHT_THEME[labelColor].solid;
+  out += textToSvg(text, { x: 0, y: 0, w, h }, {
+    fontFamily: getFontFamily(font),
+    fontSize: getNoteFontSize(shape),
+    color: textColor,
+    align,
+    verticalAlign,
+    padding: NOTE_PADDING * scale,
+    wrap: true
+  });
+  return out;
+};
+var frameSvg = (_editor, shape) => {
+  const { w, h, name } = shape.props;
+  let out = `<rect ${attrs({ x: 0, y: 0, width: w, height: h, fill: FRAME_FILL, stroke: FRAME_STROKE, "stroke-width": FRAME_STROKE_WIDTH })}/>`;
+  if (name) {
+    const [firstLine = ""] = name.split("\n");
+    out += textToSvg(firstLine, { x: 0, y: -FRAME_NAME_OFFSET, w, h: FRAME_NAME_HEIGHT }, {
+      fontFamily: getFontFamily("sans"),
+      fontSize: FRAME_NAME_FONT_SIZE,
+      color: FRAME_NAME_COLOR,
+      align: "start",
+      verticalAlign: "end",
+      wrap: false
+    });
+  }
+  return out;
+};
+var bookmarkSvg = (editor, shape) => {
+  const { w, h } = shape.props;
+  const card = getBookmarkCard(editor, shape);
+  const layout = getBookmarkLayout(w, h);
+  const sans = getFontFamily("sans");
+  let out = `<rect ${attrs({
+    x: 0,
+    y: 0,
+    width: w,
+    height: h,
+    rx: BOOKMARK_RADIUS,
+    fill: BOOKMARK_FILL,
+    stroke: BOOKMARK_STROKE,
+    "stroke-width": BOOKMARK_STROKE_WIDTH
+  })}/>`;
+  if (layout.banner.h > 0) {
+    out += `<rect ${attrs({ x: 0, y: 0, width: layout.banner.w, height: layout.banner.h, fill: BOOKMARK_BANNER_FILL })}/>`;
+  }
+  const title = card.hasAsset ? card.title : card.hostname || card.url;
+  out += textToSvg(title, layout.title, {
+    fontFamily: sans,
+    fontSize: BOOKMARK_TITLE_FONT_SIZE,
+    color: card.hasAsset ? BOOKMARK_TITLE_COLOR : BOOKMARK_META_COLOR,
+    align: "start",
+    verticalAlign: "start",
+    ...card.hasAsset ? { fontWeight: 600 } : {},
+    wrap: true
+  });
+  if (!card.hasAsset) return out;
+  out += textToSvg(card.description, layout.description, {
+    fontFamily: sans,
+    fontSize: BOOKMARK_TEXT_FONT_SIZE,
+    color: BOOKMARK_TEXT_COLOR,
+    align: "start",
+    verticalAlign: "start",
+    wrap: true
+  });
+  if (card.favicon) {
+    out += `<rect ${attrs({ ...boxAttrs(layout.favicon), rx: 2, fill: BOOKMARK_BANNER_FILL })}/>`;
+  }
+  out += textToSvg(card.hostname, layout.hostname, {
+    fontFamily: sans,
+    fontSize: BOOKMARK_META_FONT_SIZE,
+    color: BOOKMARK_META_COLOR,
+    align: "start",
+    verticalAlign: "middle",
+    wrap: false
+  });
+  return out;
+};
+function boxAttrs(box) {
+  return { x: box.x, y: box.y, width: box.w, height: box.h };
+}
+var embedSvg = (_editor, shape) => {
+  const { w, h, url } = shape.props;
+  const match = getEmbedDefinition(url);
+  const label = match ? `${match.definition.title}
+${url}` : url;
+  let out = `<rect ${attrs({
+    x: 0,
+    y: 0,
+    width: w,
+    height: h,
+    rx: EMBED_RADIUS,
+    fill: EMBED_PLACEHOLDER_FILL,
+    stroke: EMBED_PLACEHOLDER_STROKE,
+    "stroke-width": 1,
+    "stroke-dasharray": "4 4"
+  })}/>`;
+  out += textToSvg(label, { x: 0, y: 0, w, h }, {
+    fontFamily: getFontFamily("sans"),
+    fontSize: EMBED_PLACEHOLDER_FONT_SIZE,
+    color: EMBED_PLACEHOLDER_TEXT,
+    align: "middle",
+    verticalAlign: "middle",
+    padding: EMBED_PLACEHOLDER_PADDING,
+    wrap: true
+  });
+  return out;
+};
+var videoSvg = (editor, shape) => {
+  const { w, h, altText } = shape.props;
+  const hasSource = getVideoSource(editor, shape) !== null;
+  let out = `<rect ${attrs({
+    x: 0,
+    y: 0,
+    width: w,
+    height: h,
+    fill: VIDEO_PLACEHOLDER_FILL,
+    stroke: VIDEO_PLACEHOLDER_STROKE,
+    "stroke-width": 1,
+    "stroke-dasharray": hasSource ? void 0 : "4 4"
+  })}/>`;
+  const points = getVideoPlayTriangle(w, h).map((p) => `${svgNum(p.x)},${svgNum(p.y)}`).join(" ");
+  out += `<polygon ${attrs({ points, fill: VIDEO_PLAY_COLOR })}/>`;
+  if (altText) {
+    out += `<title>${escapeXml(altText)}</title>`;
+  }
+  return out;
+};
+var shapeSvgRenderers = /* @__PURE__ */ new Map([
+  ["geo", geoSvg],
+  ["draw", drawSvg],
+  ["line", lineSvg],
+  ["arrow", arrowSvg],
+  ["text", textSvg],
+  ["note", noteSvg],
+  ["frame", frameSvg],
+  ["bookmark", bookmarkSvg],
+  ["embed", embedSvg],
+  ["video", videoSvg]
+]);
+function registerShapeSvgRenderer(type, renderer) {
+  shapeSvgRenderers.set(type, renderer);
+}
+function svgResultToMarkup(value) {
+  if (value === void 0 || value === null || typeof value === "boolean") return void 0;
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "bigint") return String(value);
+  return renderToStaticMarkup(value);
+}
+function shapeToSvg(editor, shape, ctx) {
+  const util = editor.getShapeUtil(shape);
+  const own = svgResultToMarkup(util.toSvg?.(shape, ctx));
+  if (own !== void 0) return own;
+  const renderer = shapeSvgRenderers.get(shape.type) ?? defaultShapeSvgRenderer;
+  return renderer(editor, shape, ctx);
+}
+function shapeToBackgroundSvg(editor, shape, ctx) {
+  return svgResultToMarkup(editor.getShapeUtil(shape).toBackgroundSvg?.(shape, ctx));
+}
+
+// src/export/svg.ts
+var SVG_EXPORT_DEFAULT_PADDING = 32;
+var SVG_LIGHT_BACKGROUND = "#f9fafb";
+var SVG_DARK_BACKGROUND = "#101011";
+function getExportShapes(editor, ids) {
+  const sorted = editor.getCurrentPageShapesSorted();
+  let roots = ids;
+  if (!roots) {
+    const selected = editor.getSelectedShapeIds();
+    if (selected.length === 0) return sorted;
+    roots = selected;
+  }
+  const included = /* @__PURE__ */ new Set();
+  const visit = (id) => {
+    if (included.has(id)) return;
+    included.add(id);
+    for (const child of editor.getSortedChildIdsForParent(id)) visit(child);
+  };
+  for (const id of roots) if (editor.getShape(id)) visit(id);
+  return sorted.filter((s) => included.has(s.id));
+}
+function getExportBounds(editor, shapes) {
+  const boxes = [];
+  for (const shape of shapes) {
+    const b = editor.getShapePageBounds(shape);
+    if (b) boxes.push(b);
+  }
+  return boxes.length === 0 ? void 0 : Box.Common(boxes);
+}
+var clipCounter = 0;
+function getSvgString(editor, ids, opts = {}) {
+  const padding = typeof opts.padding === "number" ? opts.padding : SVG_EXPORT_DEFAULT_PADDING;
+  const scale = opts.scale ?? 1;
+  const darkMode = opts.darkMode ?? false;
+  const shapes = getExportShapes(editor, ids);
+  if (shapes.length === 0) return void 0;
+  const bounds = getExportBounds(editor, shapes);
+  if (!bounds) return void 0;
+  const view = Box.Expand(bounds, padding);
+  const width = Math.max(1, Math.ceil(view.w * scale));
+  const height = Math.max(1, Math.ceil(view.h * scale));
+  const background = darkMode ? SVG_DARK_BACKGROUND : SVG_LIGHT_BACKGROUND;
+  const ctx = { darkMode, background };
+  const included = new Set(shapes.map((s) => s.id));
+  const defs = [];
+  const backdrop = [];
+  const body = [];
+  const prefix = `mc${(clipCounter++).toString(36)}`;
+  const emit = (shape) => {
+    const transform = editor.getShapePageTransform(shape);
+    const g = attrs({
+      transform: matrixAttr(transform),
+      opacity: shape.opacity < 1 ? shape.opacity : void 0,
+      "data-shape-type": shape.type
+    });
+    const behind = shapeToBackgroundSvg(editor, shape, ctx);
+    if (behind !== void 0) backdrop.push(`<g ${g} data-shape-background="true">${behind}</g>`);
+    const inner = shapeToSvg(editor, shape, ctx);
+    body.push(`<g ${g}>${inner}</g>`);
+    const children = editor.getSortedChildIdsForParent(shape.id).filter((id) => included.has(id));
+    if (children.length === 0) return;
+    if (shape.type === "frame") {
+      const b = editor.getShapeGeometry(shape).bounds;
+      const clipId = `${prefix}-clip-${defs.length}`;
+      defs.push(
+        `<clipPath id="${clipId}"><rect ${attrs({ transform: matrixAttr(transform), x: b.x, y: b.y, width: b.w, height: b.h })}/></clipPath>`
+      );
+      body.push(`<g clip-path="url(#${clipId})">`);
+      for (const id of children) {
+        const child = editor.getShape(id);
+        if (child) emit(child);
+      }
+      body.push(`</g>`);
+      return;
+    }
+    for (const id of children) {
+      const child = editor.getShape(id);
+      if (child) emit(child);
+    }
+  };
+  for (const shape of shapes) {
+    const parentIncluded = included.has(shape.parentId);
+    if (!parentIncluded) emit(shape);
+  }
+  const viewBox = `${svgNum(view.x)} ${svgNum(view.y)} ${svgNum(view.w)} ${svgNum(view.h)}`;
+  const parts = [];
+  parts.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${viewBox}">`);
+  if (defs.length > 0) parts.push(`<defs>${defs.join("")}</defs>`);
+  if (opts.background) {
+    parts.push(`<rect ${attrs({ x: view.x, y: view.y, width: view.w, height: view.h, fill: background })}/>`);
+  }
+  parts.push(...backdrop);
+  parts.push(...body);
+  parts.push(`</svg>`);
+  return { svg: parts.join(""), width, height };
+}
+
+// src/export/image.ts
+var MIME = {
+  svg: "image/svg+xml",
+  png: "image/png",
+  jpeg: "image/jpeg",
+  webp: "image/webp"
+};
+function hasDom() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+async function exportToBlob(editor, opts) {
+  const { ids, format, quality, pixelRatio, ...svgOpts } = opts;
+  const result = getSvgString(editor, ids, svgOpts);
+  if (!result) throw new Error("Nothing to export");
+  const svgBlob = new Blob([result.svg], { type: MIME.svg });
+  if (format === "svg") return svgBlob;
+  if (!hasDom()) {
+    throw new Error(`Raster export ("${format}") needs a browser environment; only "svg" is available here`);
+  }
+  const ratio = pixelRatio ?? (window.devicePixelRatio || 1);
+  const url = URL.createObjectURL(svgBlob);
+  try {
+    const image = await loadImage(url);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(result.width * ratio));
+    canvas.height = Math.max(1, Math.round(result.height * ratio));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Could not create a 2D canvas context");
+    if (format === "jpeg" && !svgOpts.background) {
+      ctx.fillStyle = svgOpts.darkMode ? "#101011" : "#f9fafb";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return await canvasToBlob(canvas, MIME[format], quality);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.decoding = "sync";
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("Could not rasterize the SVG"));
+    image.src = url;
+  });
+}
+function canvasToBlob(canvas, type, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) resolve(blob);
+        else reject(new Error(`Canvas could not encode "${type}"`));
+      },
+      type,
+      quality
+    );
+  });
+}
+function downloadBlob(blob, filename) {
+  if (!hasDom()) return;
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.rel = "noopener";
+  anchor.style.display = "none";
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+async function copyBlobToClipboard(blob) {
+  const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+  if (!clipboard) throw new Error("Clipboard API is not available");
+  if (blob.type === MIME.svg || !("write" in clipboard) || typeof ClipboardItem === "undefined") {
+    if (blob.type !== MIME.svg && !("writeText" in clipboard)) throw new Error("Clipboard does not accept images");
+    await clipboard.writeText(await blob.text());
+    return;
+  }
+  await clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+}
+
+export { ARROW_KINDS, ARROW_LABEL_PADDING, ARROW_TERMINAL_GAP_STROKES, AVG_CHAR_WIDTH, ArrowShapeUtil, DEFAULT_GEO_TYPE_DEFINITIONS, ELBOW_CORNER_STROKES, FALLBACK_THEME_COLORS, FRAME_FILL, FRAME_NAME_COLOR, FRAME_NAME_FONT_SIZE, FRAME_NAME_GAP, FRAME_NAME_HEIGHT, FRAME_NAME_OFFSET, FRAME_STROKE, FRAME_STROKE_WIDTH, FrameShapeUtil, GEO_DEFAULT_SIZE, GEO_LABEL_PADDING, GeoShapeUtil, LINE_HEIGHT, MAX_TEXT_TEXTURE_PX, NOTE_GRADIENT_TOP_SCALE, NOTE_PADDING, NOTE_SHADOW_BLUR, NOTE_SHADOW_COLOR, NOTE_SHADOW_OFFSET_Y, NOTE_SHADOW_OPACITY, NOTE_SHADOW_SPREAD, NOTE_SIZE, NoteShapeUtil, RICH_TEXT_BLOCK_CSS, SVG_DARK_BACKGROUND, SVG_EXPORT_DEFAULT_PADDING, SVG_LIGHT_BACKGROUND, TEXT_SHAPE_MIN_WIDTH, TextLabel, TextMeasure, TextShapeUtil, VIDEO_HEIGHT, VIDEO_PLACEHOLDER_FILL, VIDEO_PLACEHOLDER_STROKE, VIDEO_PLAY_COLOR, VIDEO_PLAY_SIZE, VIDEO_TIME_EPSILON, VIDEO_WIDTH, VideoShapeUtil, alignToJustify, alignToTextAlign, applyTransform, bodyToGeometry, computeGrowY, copyBlobToClipboard, dashArray, defaultShapeSvgRenderer, downloadBlob, escapeXml, estimateTextSize, exportToBlob, geoShapeMigrations, geoShapeVersions, geometryFallbackSvg, geometryToSvgPaths, getAnchorInShapeSpace, getArrowBindingTargetAtPoint, getArrowBindings, getArrowBody, getArrowDisplayValues, getArrowTerminalGap, getArrowTerminalsInArrowSpace, getArrowheadGeometry, getArrowheadInset, getArrowheadLength, getBendFromPoint, getBodyLength, getBoundElbowAxes, getDashId, getDominantAxis, getElbowBody, getElbowMidPointFromPoint, getElbowRoute, getExportBounds, getExportShapes, getFillRgba, getFontFamily, getFrameDisplayValues, getGeoDisplayValues, getGeoGrowY, getGeoTypeDefinition, getLabelFontFaces, getLabelOpticalLift, getNormalizedAnchor, getNoteBodyGradientCss, getNoteDisplayValues, getNoteFillCssColor, getNoteFillRgba, getNoteFontSize, getNoteGradientTopCssColor, getNoteGradientTopFrom, getNoteGrowY, getNoteShadowCss, getNoteShadowSvgRect, getNoteTextCssColor, getOutlineSegments, getPointOnBody, getRichTextExtensions, getStrokeRgba, getSvgString, getTangentOnBody, getTextCssColor, getTextDisplayValues, getTextMeasure, getTextShapeBox, getTextShapeHeight, getTextShapeSize, getTextShapeSizeFor, getTextShapeTextureSpec, getTextTextureKey, getTextTextureScale, getTheme, getThemeColors, getVideoDisplayValues, getVideoPlayTriangle, getVideoSource, hexToCssRgba, horizontalAlignToFlex, horizontalAlignToTextAlign, intersectSegments, isVideoAutoplayAllowed, labelFontFamily, labelFontStyle, labelGapOnBody, labelTextAlign, matrixAttr, measureGeoLabel, measureLabel, measureRichText, readArrowProps, readArrowShape, readGeoProps, readNoteProps, readTextProps, registerShapeSvgRenderer, renderHtmlFromRichTextForMeasurement, renderHtmlFromRichTextWithExtensions, renderTextToCanvas, rgbaToHex, roundElbowCorners, shapeSvgRenderers, shapeToBackgroundSvg, shapeToSvg, shortenBody, svgResultToMarkup, textTextureAlign, textTextureText, textToSvg, toDisplayText, trimTrailingWhitespace, verticalAlignToAlignItems, verticalAlignToFlex, wrapTextLines, wrapTextTextureLines, wrapTextTextureRuns };
+//# sourceMappingURL=chunk-DMCI6V5Y.js.map
+//# sourceMappingURL=chunk-DMCI6V5Y.js.map