@phin-tech/dottie 0.0.0-stage → 0.1.0

package/dist/dottie-player.js

@@ -0,0 +1,3075 @@
+/*! dottie.js 0.1.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value2) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key] = value2;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __publicField = (obj, key, value2) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value2);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BOIL_DRAWINGS: () => BOIL_DRAWINGS,
+  DottieFormatError: () => DottieFormatError,
+  DottiePlayer: () => DottiePlayer,
+  KINDS: () => KINDS,
+  KNOWN_FIELDS: () => KNOWN_FIELDS,
+  MAX_DURATION: () => MAX_DURATION,
+  Playback: () => Playback,
+  SUPPORTED_VERSION: () => SUPPORTED_VERSION,
+  VERSION: () => VERSION,
+  black: () => black,
+  bounds: () => bounds,
+  cameraView: () => cameraView,
+  clampFPS: () => clampFPS,
+  clampTime: () => clampTime,
+  clear: () => clear,
+  cloneElement: () => cloneElement,
+  definePlayer: () => definePlayer,
+  elementIndex: () => elementIndex,
+  frameTimes: () => frameTimes,
+  inkOnDark: () => inkOnDark,
+  inspect: () => inspect,
+  inspectFrame: () => inspectFrame,
+  inspectPage: () => inspectPage,
+  isAutomaticInk: () => isAutomaticInk,
+  luminance: () => luminance,
+  orderedElements: () => orderedElements,
+  pageIndex: () => pageIndex,
+  parseDottie: () => parseDottie,
+  plan: () => plan,
+  posterTime: () => posterTime,
+  render: () => render,
+  repeatIsValid: () => repeatIsValid,
+  resolved: () => resolved,
+  sameColor: () => sameColor,
+  sampleTimes: () => sampleTimes,
+  sceneAt: () => sceneAt,
+  stableSortBy: () => stableSortBy,
+  still: () => still,
+  svg: () => svg,
+  svgParts: () => svgParts,
+  themeNamed: () => themeNamed,
+  themes: () => themes,
+  transientElements: () => transientElements,
+  withRoughness: () => withRoughness
+});
+
+// src/model.ts
+var SUPPORTED_VERSION = 2;
+var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image"];
+var EASES = ["linear", "easeIn", "easeOut", "easeInOut", "hold"];
+var KNOWN_FIELDS = {
+  file: ["version", "pages", "images"],
+  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline"],
+  layer: ["id", "name", "visible", "locked"],
+  rgba: ["r", "g", "b", "a"],
+  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "gridSize", "opacity"],
+  element: [
+    "id",
+    "kind",
+    "x",
+    "y",
+    "width",
+    "height",
+    "style",
+    "seed",
+    "layerID",
+    "text",
+    "connector",
+    "groupID",
+    "points",
+    "path",
+    "subpaths",
+    "evenOdd",
+    "rotation",
+    "link",
+    "anchor",
+    "image",
+    "reveal"
+  ],
+  strokePoint: ["x", "y"],
+  subpath: ["closed", "coords"],
+  inlineImage: ["data", "format"],
+  endpoint: ["elementID", "port", "x", "y"],
+  connector: ["start", "end", "routing", "startHead", "endHead"],
+  timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
+  track: ["element", "keys", "boil", "follow", "repeats"],
+  keyframe: ["t", "x", "y", "width", "height", "rotation", "strokeWidth", "stroke", "fill", "visible", "reveal", "opacity", "ease"],
+  follow: ["path", "start", "end", "ease", "reverse", "orient", "laps"],
+  repeat: ["start", "end", "count"],
+  cameraKey: ["t", "x", "y", "width", "height", "ease"],
+  marker: ["t", "name"]
+};
+var MAX_DURATION = 3600;
+var BOIL_DRAWINGS = 3;
+var black = { r: 0.12, g: 0.12, b: 0.13, a: 1 };
+var clear = { r: 0, g: 0, b: 0, a: 0 };
+var inkOnDark = { r: 0.93, g: 0.93, b: 0.94, a: 1 };
+var DottieFormatError = class extends Error {
+};
+var isObj = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var num = (v) => typeof v === "number" && Number.isFinite(v) ? v : void 0;
+var str = (v) => typeof v === "string" ? v : void 0;
+var bool = (v) => typeof v === "boolean" ? v : void 0;
+var uuid = (v) => typeof v === "string" ? v.toUpperCase() : void 0;
+function clampTime(t) {
+  if (!Number.isFinite(t)) return t === Infinity ? MAX_DURATION : 0;
+  return Math.min(Math.max(t, 0), MAX_DURATION);
+}
+function clampFPS(f) {
+  return Number.isFinite(f) ? Math.min(Math.max(f, 1), 60) : 12;
+}
+function rgba(v) {
+  if (!isObj(v)) return void 0;
+  const r = num(v.r), g = num(v.g), b = num(v.b);
+  if (r === void 0 || g === void 0 || b === void 0) return void 0;
+  return { r, g, b, a: num(v.a) ?? 1 };
+}
+var Reader = class {
+  constructor() {
+    __publicField(this, "warnings", []);
+    __publicField(this, "seen", /* @__PURE__ */ new Set());
+  }
+  warn(message) {
+    if (!this.seen.has(message)) {
+      this.seen.add(message);
+      this.warnings.push(message);
+    }
+  }
+  /** Reports fields this version doesn't read (they're ignored, as Dottie ignores them). */
+  fields(v, kind) {
+    const known = KNOWN_FIELDS[kind];
+    for (const k of Object.keys(v)) if (!known.includes(k)) this.warn(`Unknown field "${k}" on ${kind}, ignored`);
+  }
+  style(v) {
+    const s = isObj(v) ? v : {};
+    this.fields(s, "style");
+    const fillStyle = str(s.fillStyle) ?? "solid";
+    const dash = str(s.dash) ?? "solid";
+    if (!["solid", "hachure", "crossHatch", "grid"].includes(fillStyle)) this.warn(`Unknown fill style "${fillStyle}", drawn solid`);
+    if (!["solid", "dashed", "dotted"].includes(dash)) this.warn(`Unknown dash "${dash}", drawn solid`);
+    return {
+      stroke: rgba(s.stroke) ?? { ...black },
+      fill: rgba(s.fill) ?? { ...clear },
+      fillStyle: ["solid", "hachure", "crossHatch", "grid"].includes(fillStyle) ? fillStyle : "solid",
+      strokeWidth: num(s.strokeWidth) ?? 2,
+      dash: ["solid", "dashed", "dotted"].includes(dash) ? dash : "solid",
+      roughness: num(s.roughness) ?? 1,
+      bowing: num(s.bowing) ?? 1,
+      fontSize: num(s.fontSize) ?? 18,
+      gridSize: num(s.gridSize) ?? null,
+      opacity: num(s.opacity) ?? null
+    };
+  }
+  endpoint(v) {
+    const e = isObj(v) ? v : {};
+    const port = str(e.port);
+    return {
+      elementID: uuid(e.elementID) ?? null,
+      port: port && ["top", "right", "bottom", "left"].includes(port) ? port : null,
+      x: num(e.x) ?? 0,
+      y: num(e.y) ?? 0
+    };
+  }
+  connector(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "connector");
+    const head = (h, d) => {
+      const s = str(h);
+      return s && ["none", "arrow", "triangle", "dot", "bar"].includes(s) ? s : d;
+    };
+    const routing = str(v.routing);
+    return {
+      start: this.endpoint(v.start),
+      end: this.endpoint(v.end),
+      routing: routing && ["straight", "curved", "elbow"].includes(routing) ? routing : "straight",
+      startHead: head(v.startHead, "none"),
+      endHead: head(v.endHead, "arrow")
+    };
+  }
+  image(v, table) {
+    if (!isObj(v)) return null;
+    const ref = str(v.ref);
+    if (ref !== void 0) return table[ref] ?? { data: "", format: "png" };
+    const data = str(v.data);
+    return data === void 0 ? null : this.picture(data, str(v.format));
+  }
+  /** A picture's bytes, only if they really are base64: they go into an attribute of the drawn SVG. */
+  picture(data, format) {
+    if (!BASE64.test(data)) {
+      this.warn("Skipped a picture whose data isn't base64");
+      return { data: "", format: "png" };
+    }
+    return { data: data.replace(/\s+/g, ""), format: format === "jpeg" ? "jpeg" : "png" };
+  }
+  element(v, images) {
+    if (!isObj(v)) return null;
+    this.fields(v, "element");
+    const id = uuid(v.id), kind = str(v.kind), layerID = uuid(v.layerID);
+    if (!id || !kind || !layerID) {
+      this.warn("Skipped an element without an id, kind or layer");
+      return null;
+    }
+    if (!KINDS.includes(kind)) this.warn(`Unknown element kind "${kind}", drawn as a placeholder`);
+    const subpaths = Array.isArray(v.subpaths) ? v.subpaths.filter(isObj).map((s) => ({ closed: bool(s.closed) ?? false, coords: Array.isArray(s.coords) ? s.coords.filter((c) => typeof c === "number") : [] })) : null;
+    return {
+      id,
+      kind,
+      layerID,
+      x: num(v.x) ?? 0,
+      y: num(v.y) ?? 0,
+      width: num(v.width) ?? 0,
+      height: num(v.height) ?? 0,
+      style: this.style(v.style),
+      seed: (num(v.seed) ?? 1) >>> 0,
+      text: str(v.text) ?? null,
+      connector: this.connector(v.connector),
+      groupID: uuid(v.groupID) ?? null,
+      points: Array.isArray(v.points) ? v.points.filter(isObj).map((p) => ({ x: num(p.x) ?? 0, y: num(p.y) ?? 0 })) : null,
+      path: Array.isArray(v.path) ? v.path.filter((c) => typeof c === "number") : null,
+      subpaths,
+      evenOdd: bool(v.evenOdd) ?? null,
+      rotation: num(v.rotation) ?? null,
+      link: uuid(v.link) ?? null,
+      anchor: str(v.anchor) ?? null,
+      image: this.image(v.image, images),
+      reveal: num(v.reveal) ?? null
+    };
+  }
+  ease(v) {
+    const s = str(v);
+    if (s === void 0) return null;
+    if (!EASES.includes(s)) {
+      this.warn(`Unknown ease "${s}", played linear`);
+      return null;
+    }
+    return s;
+  }
+  keyframe(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "keyframe");
+    const t = num(v.t);
+    if (t === void 0) return null;
+    const k = { t };
+    for (const p of ["x", "y", "width", "height", "rotation", "strokeWidth", "reveal", "opacity"]) {
+      const n = num(v[p]);
+      if (n !== void 0) k[p] = n;
+    }
+    const stroke = rgba(v.stroke), fill = rgba(v.fill), visible = bool(v.visible), ease = this.ease(v.ease);
+    if (stroke) k.stroke = stroke;
+    if (fill) k.fill = fill;
+    if (visible !== void 0) k.visible = visible;
+    if (ease) k.ease = ease;
+    return k;
+  }
+  track(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "track");
+    const element = uuid(v.element);
+    if (!element) return null;
+    const keys = (Array.isArray(v.keys) ? v.keys : []).map((k) => this.keyframe(k)).filter((k) => k !== null && k.t >= 0 && k.t <= MAX_DURATION);
+    stableSortBy(keys, (k) => k.t);
+    const follow = Array.isArray(v.follow) ? v.follow.filter(isObj).flatMap((f) => {
+      const path = uuid(f.path), start = num(f.start), end = num(f.end);
+      if (!path || start === void 0 || end === void 0 || start < 0 || end > MAX_DURATION) return [];
+      return [{ path, start, end, ease: this.ease(f.ease), reverse: bool(f.reverse) ?? null, orient: bool(f.orient) ?? null, laps: num(f.laps) ?? null }];
+    }) : null;
+    const repeats = Array.isArray(v.repeats) ? v.repeats.filter(isObj).flatMap((r) => {
+      const start = num(r.start), end = num(r.end);
+      if (start === void 0 || end === void 0) return [];
+      const count = num(r.count);
+      const rep = { start, end, count: count === void 0 ? null : Math.trunc(count) };
+      return repeatIsValid(rep) ? [rep] : [];
+    }) : null;
+    return { element, keys, boil: bool(v.boil) ?? null, follow, repeats };
+  }
+  timeline(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "timeline");
+    const boil = num(v.boil);
+    const camera = Array.isArray(v.camera) ? v.camera.filter(isObj).flatMap((c) => {
+      const t = num(c.t), x = num(c.x), y = num(c.y), width = num(c.width), height = num(c.height);
+      if (t === void 0 || x === void 0 || y === void 0 || width === void 0 || height === void 0) return [];
+      if (!(width > 1 && height > 1 && t >= 0)) return [];
+      return [{ t, x, y, width, height, ease: this.ease(c.ease) }];
+    }) : null;
+    if (camera) stableSortBy(camera, (c) => c.t);
+    const markers = Array.isArray(v.markers) ? v.markers.filter(isObj).flatMap((m) => {
+      const t = num(m.t);
+      return t !== void 0 && t >= 0 ? [{ t, name: str(m.name) ?? "" }] : [];
+    }) : null;
+    if (markers) stableSortBy(markers, (m) => m.t);
+    const poster = num(v.poster);
+    return {
+      fps: clampFPS(num(v.fps) ?? 12),
+      duration: clampTime(num(v.duration) ?? 0),
+      boil: boil !== void 0 && Number.isInteger(boil) && boil > 0 ? Math.min(boil, 1e4) : null,
+      settle: bool(v.settle) ?? null,
+      poster: poster === void 0 ? null : clampTime(poster),
+      tracks: (Array.isArray(v.tracks) ? v.tracks : []).map((t) => this.track(t)).filter((t) => t !== null),
+      camera,
+      markers
+    };
+  }
+  page(v, images, n) {
+    if (!isObj(v)) throw new DottieFormatError(`Page ${n} is not an object`);
+    this.fields(v, "page");
+    const layers = (Array.isArray(v.layers) ? v.layers : []).filter(isObj).flatMap((l) => {
+      const id = uuid(l.id);
+      return id ? [{ id, name: str(l.name) ?? "", visible: bool(l.visible) ?? true, locked: bool(l.locked) ?? false }] : [];
+    });
+    if (layers.length === 0) {
+      this.warn(`Page ${n} has no layers`);
+      layers.push({ id: "LAYER", name: "Layer 1", visible: true, locked: false });
+    }
+    return {
+      id: uuid(v.id) ?? `PAGE-${n}`,
+      name: str(v.name) ?? `Page ${n}`,
+      layers,
+      elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
+      theme: str(v.theme) ?? null,
+      timeline: this.timeline(v.timeline)
+    };
+  }
+};
+var BASE64 = /^[A-Za-z0-9+/=\s]*$/;
+function repeatIsValid(r) {
+  return Number.isFinite(r.start) && Number.isFinite(r.end) && r.start >= 0 && r.end - r.start > 1e-3 && r.end <= MAX_DURATION && (r.count === null || r.count >= 1 && r.count <= 1e4);
+}
+function stableSortBy(a, key) {
+  const indexed = a.map((v, i) => [v, i]);
+  indexed.sort((p, q) => key(p[0]) - key(q[0]) || p[1] - q[1]);
+  for (let i = 0; i < a.length; i++) a[i] = indexed[i][0];
+}
+function parseDottie(source) {
+  let json = source;
+  if (typeof source === "string") {
+    try {
+      json = JSON.parse(source);
+    } catch (e) {
+      throw new DottieFormatError(`Not JSON: ${e.message}`);
+    }
+  }
+  if (!isObj(json)) throw new DottieFormatError("Not a Dottie drawing");
+  const version = num(json.version);
+  if (version === void 0) throw new DottieFormatError("Not a Dottie drawing (no version)");
+  if (!Array.isArray(json.pages) || json.pages.length === 0) throw new DottieFormatError("A drawing needs at least one page");
+  const reader = new Reader();
+  reader.fields(json, "file");
+  if (version > SUPPORTED_VERSION) reader.warn(`File version ${version} is newer than this player knows (${SUPPORTED_VERSION}); some things may not show`);
+  const images = {};
+  if (isObj(json.images)) {
+    for (const [k, v] of Object.entries(json.images)) {
+      if (isObj(v) && typeof v.data === "string") images[k] = reader.picture(v.data, str(v.format));
+    }
+  }
+  const pages = json.pages.map((p, i) => reader.page(p, images, i + 1));
+  if (new Set(pages.map((p) => p.id)).size !== pages.length) throw new DottieFormatError("Two pages share an id");
+  return { version, pages, warnings: reader.warnings };
+}
+function luminance(c) {
+  return 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b;
+}
+function sameColor(a, b) {
+  return a.r === b.r && a.g === b.g && a.b === b.b && a.a === b.a;
+}
+function isAutomaticInk(c) {
+  return sameColor(c, black) || sameColor(c, inkOnDark);
+}
+function cloneElement(e) {
+  return {
+    ...e,
+    style: { ...e.style, stroke: { ...e.style.stroke }, fill: { ...e.style.fill } },
+    connector: e.connector ? { ...e.connector, start: { ...e.connector.start }, end: { ...e.connector.end } } : null
+  };
+}
+function orderedElements(page) {
+  if (page.layers.length <= 1) return page.elements;
+  const rank = /* @__PURE__ */ new Map();
+  page.layers.forEach((l, i) => {
+    if (!rank.has(l.id)) rank.set(l.id, i);
+  });
+  const buckets = page.layers.map(() => []);
+  for (const e of page.elements) buckets[rank.get(e.layerID) ?? 0].push(e);
+  return buckets.flat();
+}
+function elementIndex(page) {
+  const m = /* @__PURE__ */ new Map();
+  for (const e of page.elements) if (!m.has(e.id)) m.set(e.id, e);
+  return m;
+}
+
+// src/path.ts
+var KAPPA = 0.5522847498307936;
+var Path = class _Path {
+  constructor() {
+    __publicField(this, "segments", []);
+  }
+  get isEmpty() {
+    return this.segments.length === 0;
+  }
+  moveTo(p) {
+    this.segments.push({ op: "M", p });
+    return this;
+  }
+  lineTo(p) {
+    this.segments.push({ op: "L", p });
+    return this;
+  }
+  quadTo(p, c) {
+    this.segments.push({ op: "Q", c, p });
+    return this;
+  }
+  curveTo(p, c1, c2) {
+    this.segments.push({ op: "C", c1, c2, p });
+    return this;
+  }
+  close() {
+    this.segments.push({ op: "Z" });
+    return this;
+  }
+  addPath(other) {
+    this.segments.push(...other.segments);
+    return this;
+  }
+  /** move, then a line to each point (CGMutablePath.addLines). */
+  addLines(pts) {
+    pts.forEach((p, i) => i === 0 ? this.moveTo(p) : this.lineTo(p));
+    return this;
+  }
+  /** CGPath(rect:): clockwise (on screen) from the top-left corner. */
+  static rect(r) {
+    return new _Path().addLines([
+      { x: r.x, y: r.y },
+      { x: r.x + r.width, y: r.y },
+      { x: r.x + r.width, y: r.y + r.height },
+      { x: r.x, y: r.y + r.height }
+    ]).close();
+  }
+  /** CGPath(ellipseIn:): four cubics clockwise (on screen) from the right-hand point. */
+  addEllipse(r) {
+    const cx = r.x + r.width / 2, cy = r.y + r.height / 2, rx = r.width / 2, ry = r.height / 2;
+    const kx = rx * KAPPA, ky = ry * KAPPA;
+    this.moveTo({ x: cx + rx, y: cy });
+    this.curveTo({ x: cx, y: cy + ry }, { x: cx + rx, y: cy + ky }, { x: cx + kx, y: cy + ry });
+    this.curveTo({ x: cx - rx, y: cy }, { x: cx - kx, y: cy + ry }, { x: cx - rx, y: cy + ky });
+    this.curveTo({ x: cx, y: cy - ry }, { x: cx - rx, y: cy - ky }, { x: cx - kx, y: cy - ry });
+    this.curveTo({ x: cx + rx, y: cy }, { x: cx + kx, y: cy - ry }, { x: cx + rx, y: cy - ky });
+    return this.close();
+  }
+  static ellipse(r) {
+    return new _Path().addEllipse(r);
+  }
+  translated(dx, dy) {
+    const t = (p) => ({ x: p.x + dx, y: p.y + dy });
+    const out = new _Path();
+    out.segments = this.segments.map((s) => {
+      switch (s.op) {
+        case "M":
+        case "L":
+          return { op: s.op, p: t(s.p) };
+        case "Q":
+          return { op: "Q", c: t(s.c), p: t(s.p) };
+        case "C":
+          return { op: "C", c1: t(s.c1), c2: t(s.c2), p: t(s.p) };
+        case "Z":
+          return s;
+      }
+    });
+    return out;
+  }
+  /** Every contour as points, curves flattened into short segments (CGPath.contours). */
+  contours() {
+    const out = [];
+    let current = [];
+    let start = { x: 0, y: 0 };
+    for (const s of this.segments) {
+      const last = current.length ? current[current.length - 1] : start;
+      switch (s.op) {
+        case "M":
+          if (current.length > 1) out.push(current);
+          start = s.p;
+          current = [s.p];
+          break;
+        case "L":
+          current.push(s.p);
+          break;
+        case "Q":
+          for (let i = 1; i <= 12; i++) {
+            const t = i / 12, u = 1 - t;
+            current.push({ x: u * u * last.x + 2 * u * t * s.c.x + t * t * s.p.x, y: u * u * last.y + 2 * u * t * s.c.y + t * t * s.p.y });
+          }
+          break;
+        case "C":
+          for (let i = 1; i <= 16; i++) {
+            const t = i / 16, u = 1 - t;
+            current.push({
+              x: u * u * u * last.x + 3 * u * u * t * s.c1.x + 3 * u * t * t * s.c2.x + t * t * t * s.p.x,
+              y: u * u * u * last.y + 3 * u * u * t * s.c1.y + 3 * u * t * t * s.c2.y + t * t * t * s.p.y
+            });
+          }
+          break;
+        case "Z":
+          current.push(start);
+          if (current.length > 1) out.push(current);
+          current = [start];
+          break;
+      }
+    }
+    if (current.length > 1) out.push(current);
+    return out;
+  }
+  /** The first `fraction` of the path by length, contours in drawing order: a stroke being drawn on. */
+  trimmed(fraction) {
+    const lines = this.contours().map((c) => new Polyline(c));
+    let left = Math.min(Math.max(fraction, 0), 1) * lines.reduce((s, l) => s + l.length, 0);
+    const out = new _Path();
+    for (const line2 of lines) {
+      if (!(left > 0)) break;
+      out.moveTo(line2.points[0]);
+      for (let i = 1; i < line2.points.length; i++) {
+        const seg = line2.lengths[i] - line2.lengths[i - 1];
+        if (seg <= left) {
+          out.lineTo(line2.points[i]);
+          left -= seg;
+          continue;
+        }
+        const a = line2.points[i - 1], b = line2.points[i], f = left / seg;
+        out.lineTo({ x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f });
+        left = 0;
+        break;
+      }
+    }
+    return out;
+  }
+  /** SVG path data, as Dottie's SVG export writes it. */
+  data() {
+    const d = [];
+    for (const s of this.segments) {
+      switch (s.op) {
+        case "M":
+          d.push(`M${fmt(s.p.x)} ${fmt(s.p.y)}`);
+          break;
+        case "L":
+          d.push(`L${fmt(s.p.x)} ${fmt(s.p.y)}`);
+          break;
+        case "Q":
+          d.push(`Q${fmt(s.c.x)} ${fmt(s.c.y)} ${fmt(s.p.x)} ${fmt(s.p.y)}`);
+          break;
+        case "C":
+          d.push(`C${fmt(s.c1.x)} ${fmt(s.c1.y)} ${fmt(s.c2.x)} ${fmt(s.c2.y)} ${fmt(s.p.x)} ${fmt(s.p.y)}`);
+          break;
+        case "Z":
+          d.push("Z");
+          break;
+      }
+    }
+    return d.join(" ");
+  }
+};
+function roundHalfAway(v) {
+  return v < 0 ? -Math.round(-v) : Math.round(v);
+}
+function fmt(v) {
+  const r = roundHalfAway(v * 100) / 100;
+  if (Number.isInteger(r)) return String(r === 0 ? 0 : r);
+  return String(r);
+}
+var Polyline = class {
+  constructor(points) {
+    __publicField(this, "points");
+    __publicField(this, "lengths");
+    this.points = points;
+    let run = 0;
+    this.lengths = points.map((p, i) => {
+      if (i > 0) run += Math.hypot(p.x - points[i - 1].x, p.y - points[i - 1].y);
+      return run;
+    });
+  }
+  get length() {
+    return this.lengths.length ? this.lengths[this.lengths.length - 1] : 0;
+  }
+  /** The point `u` (0...1) of the way along, by distance. */
+  point(u) {
+    if (this.points.length <= 1 || !(this.length > 0)) return this.points[0] ?? { x: 0, y: 0 };
+    const d = Math.min(Math.max(u, 0), 1) * this.length;
+    let i = 1;
+    while (i < this.lengths.length - 1 && this.lengths[i] < d) i++;
+    const seg = this.lengths[i] - this.lengths[i - 1];
+    const f = seg > 0 ? (d - this.lengths[i - 1]) / seg : 0;
+    const a = this.points[i - 1], b = this.points[i];
+    return { x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f };
+  }
+};
+var midX = (r) => r.x + r.width / 2;
+var midY = (r) => r.y + r.height / 2;
+var maxX = (r) => r.x + r.width;
+var maxY = (r) => r.y + r.height;
+function union(a, b) {
+  if (!a) return { ...b };
+  const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y);
+  return { x, y, width: Math.max(maxX(a), maxX(b)) - x, height: Math.max(maxY(a), maxY(b)) - y };
+}
+function inset(r, dx, dy) {
+  return { x: r.x + dx, y: r.y + dy, width: r.width - 2 * dx, height: r.height - 2 * dy };
+}
+function rotate(p, c, a) {
+  if (a === 0) return p;
+  const dx = p.x - c.x, dy = p.y - c.y;
+  return { x: c.x + dx * Math.cos(a) - dy * Math.sin(a), y: c.y + dx * Math.sin(a) + dy * Math.cos(a) };
+}
+function bezierPoint(b, t) {
+  const s = 1 - t;
+  return {
+    x: b[0].x * (s * s * s) + b[1].x * (3 * t * s * s) + b[2].x * (3 * t * t * s) + b[3].x * (t * t * t),
+    y: b[0].y * (s * s * s) + b[1].y * (3 * t * s * s) + b[2].y * (3 * t * t * s) + b[3].y * (t * t * t)
+  };
+}
+function flatten(cp, maxStep) {
+  const out = [cp[0]];
+  for (let s = 0; s < Math.floor((cp.length - 1) / 3); s++) {
+    const seg = cp.slice(3 * s, 3 * s + 4);
+    let hull = 0;
+    for (let i = 1; i < seg.length; i++) hull += Math.hypot(seg[i].x - seg[i - 1].x, seg[i].y - seg[i - 1].y);
+    const n = Math.min(400, Math.max(4, Math.ceil(hull / Math.max(maxStep, 0.5))));
+    for (let k = 1; k <= n; k++) out.push(bezierPoint(seg, k / n));
+  }
+  return out;
+}
+
+// src/element.ts
+var frame = (e) => ({ x: e.x, y: e.y, width: e.width, height: e.height });
+var angle = (e) => e.rotation ?? 0;
+var center = (e) => ({ x: e.x + e.width / 2, y: e.y + e.height / 2 });
+var rotated = (e, p) => rotate(p, center(e), angle(e));
+var unrotated = (e, p) => rotate(p, center(e), -angle(e));
+function rotatedBounds(e) {
+  const r = frame(e);
+  if (angle(e) === 0) return r;
+  const corners2 = [
+    { x: r.x, y: r.y },
+    { x: maxX(r), y: r.y },
+    { x: maxX(r), y: maxY(r) },
+    { x: r.x, y: maxY(r) }
+  ].map((p) => rotated(e, p));
+  const xs = corners2.map((p) => p.x), ys = corners2.map((p) => p.y);
+  const x = Math.min(...xs), y = Math.min(...ys);
+  return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+function resolvingInk(e, ink) {
+  if (!isAutomaticInk(e.style.stroke)) return e;
+  const copy = cloneElement(e);
+  const covers = e.style.fillStyle === "solid" || e.style.fillStyle === "grid";
+  const onLightFill = covers && e.style.fill.a >= 0.5 && luminance(e.style.fill) > 0.5;
+  copy.style.stroke = luminance(ink) > 0.5 && onLightFill ? { ...black } : { ...ink };
+  return copy;
+}
+function shapeContours(e) {
+  if (e.kind !== "path" || !e.subpaths) return [];
+  const out = [];
+  for (const s of e.subpaths) {
+    if (s.coords.length < 8 || (s.coords.length - 2) % 6 !== 0) continue;
+    const pts = [];
+    for (let i = 0; i < s.coords.length; i += 2) pts.push({ x: e.x + s.coords[i] * e.width, y: e.y + s.coords[i + 1] * e.height });
+    out.push({ closed: s.closed, points: pts });
+  }
+  return out;
+}
+function shapePath(e) {
+  const path = new Path();
+  for (const c of shapeContours(e)) {
+    path.moveTo(c.points[0]);
+    for (let k = 0; k < (c.points.length - 1) / 3; k++) {
+      path.curveTo(c.points[3 * k + 3], c.points[3 * k + 1], c.points[3 * k + 2]);
+    }
+    if (c.closed) path.close();
+  }
+  return path;
+}
+
+// src/connector.ts
+function portPoint(shape, port) {
+  const r = frame(shape);
+  const p = port === "top" ? { x: midX(r), y: r.y } : port === "right" ? { x: maxX(r), y: midY(r) } : port === "bottom" ? { x: midX(r), y: maxY(r) } : { x: r.x, y: midY(r) };
+  return rotated(shape, p);
+}
+function edgePoint(shape, toward) {
+  const r = frame(shape);
+  const c = center(shape);
+  const target = unrotated(shape, toward);
+  const dx = target.x - c.x, dy = target.y - c.y;
+  if (!((dx !== 0 || dy !== 0) && r.width > 0 && r.height > 0)) return c;
+  const hw = r.width / 2, hh = r.height / 2;
+  let t;
+  if (shape.kind === "ellipse") t = 1 / Math.sqrt(dx * dx / (hw * hw) + dy * dy / (hh * hh));
+  else if (shape.kind === "diamond") t = 1 / (Math.abs(dx) / hw + Math.abs(dy) / hh);
+  else t = Math.min(dx !== 0 ? hw / Math.abs(dx) : Infinity, dy !== 0 ? hh / Math.abs(dy) : Infinity);
+  return rotated(shape, { x: c.x + dx * t, y: c.y + dy * t });
+}
+function reference(ep, index) {
+  const s = ep.elementID ? index.get(ep.elementID) : void 0;
+  return s ? center(s) : { x: ep.x, y: ep.y };
+}
+function resolve(ep, other, index) {
+  const s = ep.elementID ? index.get(ep.elementID) : void 0;
+  if (!s) return { x: ep.x, y: ep.y };
+  return ep.port ? portPoint(s, ep.port) : edgePoint(s, other);
+}
+function endpoints(e, index) {
+  const c = e.connector;
+  if (!c) return [{ x: 0, y: 0 }, { x: 0, y: 0 }];
+  return [resolve(c.start, reference(c.end, index), index), resolve(c.end, reference(c.start, index), index)];
+}
+function routePoints(r) {
+  if (r.kind === "polyline") return r.points;
+  const out = [];
+  for (let i = 0; i <= 24; i++) {
+    const t = i / 24, u = 1 - t;
+    out.push({
+      x: u * u * u * r.a.x + 3 * u * u * t * r.b.x + 3 * u * t * t * r.c.x + t * t * t * r.d.x,
+      y: u * u * u * r.a.y + 3 * u * u * t * r.b.y + 3 * u * t * t * r.c.y + t * t * t * r.d.y
+    });
+  }
+  return out;
+}
+function route(e, index) {
+  const c = e.connector;
+  if (!c) return { kind: "polyline", points: [] };
+  const [a, b] = endpoints(e, index);
+  const dx = b.x - a.x, dy = b.y - a.y;
+  const horizontal = Math.abs(dx) >= Math.abs(dy);
+  switch (c.routing) {
+    case "straight":
+      return { kind: "polyline", points: [a, b] };
+    case "curved":
+      if (horizontal) return { kind: "cubic", a, b: { x: a.x + dx / 2, y: a.y }, c: { x: b.x - dx / 2, y: b.y }, d: b };
+      return { kind: "cubic", a, b: { x: a.x, y: a.y + dy / 2 }, c: { x: b.x, y: b.y - dy / 2 }, d: b };
+    case "elbow": {
+      const vertical = (p) => p === null ? null : p === "top" || p === "bottom";
+      const startV = vertical(c.start.port) ?? !horizontal;
+      const endV = vertical(c.end.port) ?? !horizontal;
+      if (startV && endV) {
+        const my = a.y + dy / 2;
+        return { kind: "polyline", points: [a, { x: a.x, y: my }, { x: b.x, y: my }, b] };
+      }
+      if (!startV && !endV) {
+        const mx = a.x + dx / 2;
+        return { kind: "polyline", points: [a, { x: mx, y: a.y }, { x: mx, y: b.y }, b] };
+      }
+      if (startV) return { kind: "polyline", points: [a, { x: a.x, y: b.y }, b] };
+      return { kind: "polyline", points: [a, { x: b.x, y: a.y }, b] };
+    }
+  }
+}
+function arrowhead(tip, from, size) {
+  const a = Math.atan2(tip.y - from.y, tip.x - from.x);
+  const spread = Math.PI / 7;
+  const wing = (s) => ({ x: tip.x - size * Math.cos(a + s), y: tip.y - size * Math.sin(a + s) });
+  return [wing(spread), wing(-spread)];
+}
+function connectorBounds(e, index) {
+  const pts = routePoints(route(e, index));
+  if (pts.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+  let x0 = pts[0].x, y0 = pts[0].y, x1 = x0, y1 = y0;
+  for (const p of pts) {
+    x0 = Math.min(x0, p.x);
+    y0 = Math.min(y0, p.y);
+    x1 = Math.max(x1, p.x);
+    y1 = Math.max(y1, p.y);
+  }
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+}
+function midpoint(e, index) {
+  const pts = routePoints(route(e, index));
+  if (pts.length <= 1) return pts[0] ?? { x: 0, y: 0 };
+  const lengths = [];
+  let total = 0;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const l = Math.hypot(pts[i + 1].x - pts[i].x, pts[i + 1].y - pts[i].y);
+    lengths.push(l);
+    total += l;
+  }
+  let remaining = total / 2;
+  for (let i = 0; i < lengths.length; i++) {
+    const l = lengths[i];
+    if (remaining <= l || i === lengths.length - 1) {
+      const t = l === 0 ? 0 : remaining / l;
+      return { x: pts[i].x + (pts[i + 1].x - pts[i].x) * t, y: pts[i].y + (pts[i + 1].y - pts[i].y) * t };
+    }
+    remaining -= l;
+  }
+  return pts[0];
+}
+function indexOf(page) {
+  const m = /* @__PURE__ */ new Map();
+  for (const e of page.elements) if (!m.has(e.id)) m.set(e.id, e);
+  return m;
+}
+
+// src/rng.ts
+var GOLDEN_HI = 2654435769;
+var GOLDEN_LO = 2135587861;
+var M1_HI = 3210233709;
+var M1_LO = 484763065;
+var M2_HI = 2496678331;
+var M2_LO = 321982955;
+function add(a, bh, bl) {
+  const lo = a[1] + bl >>> 0;
+  const carry = lo < a[1] ? 1 : 0;
+  return [a[0] + bh + carry >>> 0, lo];
+}
+function mul32(a, b) {
+  const a0 = a & 65535, a1 = a >>> 16, b0 = b & 65535, b1 = b >>> 16;
+  const p00 = a0 * b0, p01 = a0 * b1, p10 = a1 * b0, p11 = a1 * b1;
+  const mid = p01 + p10;
+  const lo = p00 + mid % 65536 * 65536;
+  const hi = p11 + Math.floor(mid / 65536) + Math.floor(lo / 4294967296);
+  return [hi >>> 0, lo >>> 0];
+}
+function mul(a, bh, bl) {
+  const low = mul32(a[1], bl);
+  const hi = low[0] + Math.imul(a[0], bl) + Math.imul(a[1], bh) >>> 0;
+  return [hi, low[1]];
+}
+function xorShift(a, s) {
+  const lo = (a[1] >>> s | a[0] << 32 - s) >>> 0;
+  return [(a[0] ^ a[0] >>> s) >>> 0, (a[1] ^ lo) >>> 0];
+}
+function mix(z) {
+  z = mul(xorShift(z, 30), M1_HI, M1_LO);
+  z = mul(xorShift(z, 27), M2_HI, M2_LO);
+  return xorShift(z, 31);
+}
+var SeededRNG = class {
+  constructor(seed) {
+    __publicField(this, "state");
+    this.state = add([0, seed >>> 0], GOLDEN_HI, GOLDEN_LO);
+  }
+  /** The next 64 bits, as (hi, lo). */
+  next() {
+    this.state = add(this.state, GOLDEN_HI, GOLDEN_LO);
+    return mix(this.state);
+  }
+  /** The top 53 bits of `next()`, exactly. */
+  top53() {
+    const [hi, lo] = this.next();
+    return hi * 2097152 + (lo >>> 11);
+  }
+  /** Uniform in -1...1. */
+  signed() {
+    return Math.floor(this.top53()) / 2 ** 52 - 1;
+  }
+  /** Uniform in 0...1. */
+  unit() {
+    return this.top53() / 2 ** 53;
+  }
+};
+function boiled(seed, step) {
+  let z = add([0, seed >>> 0], ...mulConst(step));
+  z = mix(z);
+  return Math.max(1, z[1] >>> 0);
+}
+function mulConst(step) {
+  const p = mul([0, step >>> 0], GOLDEN_HI, GOLDEN_LO);
+  return [p[0], p[1]];
+}
+
+// src/rough.ts
+var offset = (rng, amount, roughness) => rng.signed() * amount * roughness;
+function line(a, b, rng, roughness, bowing, preserveEnds, into) {
+  const length = Math.hypot(b.x - a.x, b.y - a.y);
+  if (!(length > 0.5)) return;
+  const gain = length < 200 ? 1 : length > 500 ? 0.4 : -16668e-7 * length + 1.233334;
+  const maxOff = length < 20 ? length / 10 : 2;
+  for (let pass = 0; pass < 2; pass++) {
+    const spread = (pass === 0 ? 1 : 0.5) * gain;
+    const j = () => offset(rng, maxOff, roughness) * spread;
+    const mid = rng.unit() * 0.4 + 0.3;
+    const bow = offset(rng, length / 60, roughness) * bowing * gain;
+    const dx = b.x - a.x, dy = b.y - a.y;
+    const nx = -dy / length, ny = dx / length;
+    const start = preserveEnds ? a : (() => {
+      const x = a.x + j();
+      return { x, y: a.y + j() };
+    })();
+    const end = preserveEnds ? b : (() => {
+      const x = b.x + j();
+      return { x, y: b.y + j() };
+    })();
+    const c1x = a.x + dx * mid * 0.66 + nx * bow + j() * 0.5;
+    const c1y = a.y + dy * mid * 0.66 + ny * bow + j() * 0.5;
+    const c2x = a.x + dx * (0.5 + mid * 0.5) + nx * bow + j() * 0.5;
+    const c2y = a.y + dy * (0.5 + mid * 0.5) + ny * bow + j() * 0.5;
+    into.moveTo(start);
+    into.curveTo(end, { x: c1x, y: c1y }, { x: c2x, y: c2y });
+  }
+}
+function polygon(pts, rng, roughness, bowing) {
+  const path = new Path();
+  for (let i = 0; i < pts.length; i++) line(pts[i], pts[(i + 1) % pts.length], rng, roughness, bowing, false, path);
+  return path;
+}
+function ellipse(r, rng, roughness) {
+  const path = new Path();
+  const cx = r.x + r.width / 2, cy = r.y + r.height / 2;
+  const rx = r.width / 2, ry = r.height / 2;
+  if (!(rx > 0.5 && ry > 0.5)) return path;
+  const n = Math.max(8, Math.min(24, Math.trunc((rx + ry) / 6)));
+  const wobble = Math.min(2.5, (rx + ry) / 25) * roughness;
+  for (let pass = 0; pass < 2; pass++) {
+    const phase = rng.unit() * 2 * Math.PI;
+    const sweep = 2 * Math.PI * (pass === 0 ? 1 : 1.04);
+    const count = Math.trunc(n * sweep / (2 * Math.PI)) + 1;
+    const pts = [];
+    for (let i = 0; i < count; i++) {
+      const t = phase + sweep * i / n;
+      const wx = rng.signed() * wobble, wy = rng.signed() * wobble;
+      pts.push({ x: cx + rx * Math.cos(t) + wx, y: cy + ry * Math.sin(t) + wy });
+    }
+    catmullRom(pts, path);
+  }
+  return path;
+}
+function catmullRom(p, path) {
+  if (p.length <= 2) return;
+  path.moveTo(p[0]);
+  for (let i = 0; i < p.length - 1; i++) {
+    const p0 = p[Math.max(i - 1, 0)], p1 = p[i], p2 = p[i + 1], p3 = p[Math.min(i + 2, p.length - 1)];
+    path.curveTo(p2, { x: p1.x + (p2.x - p0.x) / 6, y: p1.y + (p2.y - p0.y) / 6 }, { x: p2.x - (p3.x - p1.x) / 6, y: p2.y - (p3.y - p1.y) / 6 });
+  }
+}
+var HACHURE_ANGLE = -41 * Math.PI / 180;
+function hachureLines(polygons, angle2, gap) {
+  if (!(gap > 0)) return [];
+  const c = Math.cos(angle2), s = Math.sin(angle2);
+  const rots = polygons.filter((p) => p.length >= 3).map((poly) => poly.map((p) => ({ x: p.x * c + p.y * s, y: -p.x * s + p.y * c })));
+  const all = rots.flat();
+  if (all.length === 0) return [];
+  let minY = Infinity, maxY2 = -Infinity;
+  for (const p of all) {
+    minY = Math.min(minY, p.y);
+    maxY2 = Math.max(maxY2, p.y);
+  }
+  const back = (x, y2) => ({ x: x * c - y2 * s, y: x * s + y2 * c });
+  const out = [];
+  let y = minY + gap / 2;
+  while (y < maxY2) {
+    const xs = [];
+    for (const rot of rots) {
+      for (let i = 0; i < rot.length; i++) {
+        const a = rot[i], b = rot[(i + 1) % rot.length];
+        if (a.y <= y && y < b.y || b.y <= y && y < a.y) xs.push(a.x + (y - a.y) / (b.y - a.y) * (b.x - a.x));
+      }
+    }
+    xs.sort((p, q) => p - q);
+    for (let k = 0; k + 1 < xs.length; k += 2) {
+      if (xs[k + 1] - xs[k] > 0.5) out.push([back(xs[k], y), back(xs[k + 1], y)]);
+    }
+    y += gap;
+  }
+  return out;
+}
+
+// src/shapes.ts
+var Cache = class {
+  constructor(limit = 6e3) {
+    __publicField(this, "map", /* @__PURE__ */ new Map());
+    __publicField(this, "limit");
+    this.limit = limit;
+  }
+  get(key, make) {
+    const hit = this.map.get(key);
+    if (hit !== void 0) return hit;
+    const v = make();
+    if (this.map.size >= this.limit) this.map.clear();
+    this.map.set(key, v);
+    return v;
+  }
+};
+var shapes = new Cache();
+var connectors = new Cache();
+function shapeKey(e, tag) {
+  const s = e.style;
+  return [
+    tag,
+    e.kind,
+    e.x,
+    e.y,
+    e.width,
+    e.height,
+    e.seed,
+    s.roughness,
+    s.bowing,
+    s.strokeWidth,
+    s.fillStyle,
+    s.fillStyle === "grid" ? cellSize(e) : 0,
+    e.path ? e.path.join(",") : e.subpaths ? JSON.stringify(e.subpaths) : ""
+  ].join("|");
+}
+var cellSize = (e) => Math.max(8, e.style.gridSize ?? 50);
+function outline(e) {
+  if (e.kind === "freehand" && e.path === null) return computeOutline(e);
+  return shapes.get(shapeKey(e, 0), () => computeOutline(e));
+}
+function corners(r) {
+  return [{ x: r.x, y: r.y }, { x: maxX(r), y: r.y }, { x: maxX(r), y: maxY(r) }, { x: r.x, y: maxY(r) }];
+}
+function diamondPoints(r) {
+  return [{ x: midX(r), y: r.y }, { x: maxX(r), y: midY(r) }, { x: midX(r), y: maxY(r) }, { x: r.x, y: midY(r) }];
+}
+function computeOutline(e) {
+  const r = frame(e);
+  const rng = new SeededRNG(e.seed);
+  const rough = e.style.roughness;
+  switch (e.kind) {
+    case "ellipse":
+      return rough <= 0 ? Path.ellipse(r) : ellipse(r, rng, rough);
+    case "diamond":
+      if (rough <= 0) return new Path().addLines(diamondPoints(r)).close();
+      return polygon(diamondPoints(r), rng, rough, e.style.bowing);
+    case "text":
+    case "connector":
+      return Path.rect(r);
+    case "freehand":
+      return freehandPath(e);
+    case "path":
+      return rough <= 0 ? shapePath(e) : sketchyShape(e, rng);
+    default:
+      return rough <= 0 ? Path.rect(r) : polygon(corners(r), rng, rough, e.style.bowing);
+  }
+}
+function sketchyShape(e, rng) {
+  const rough = e.style.roughness;
+  const out = new Path();
+  for (const sub of shapeContours(e)) {
+    const p = sub.points;
+    for (let k = 0; k < (p.length - 1) / 3; k++) {
+      const a = p[3 * k], c1 = p[3 * k + 1], c2 = p[3 * k + 2], b = p[3 * k + 3];
+      if (c1.x === a.x && c1.y === a.y && c2.x === b.x && c2.y === b.y) {
+        line(a, b, rng, rough, e.style.bowing, true, out);
+        continue;
+      }
+      const hull = Math.hypot(c1.x - a.x, c1.y - a.y) + Math.hypot(c2.x - c1.x, c2.y - c1.y) + Math.hypot(b.x - c2.x, b.y - c2.y);
+      const wobble = Math.min(2.5, hull / 30) * rough;
+      for (let pass = 0; pass < 2; pass++) {
+        const spread = pass === 0 ? 1 : 0.5;
+        const j = () => rng.signed() * wobble * spread;
+        out.moveTo(a);
+        const c1x = c1.x + j(), c1y = c1.y + j(), c2x = c2.x + j(), c2y = c2.y + j();
+        out.curveTo(b, { x: c1x, y: c1y }, { x: c2x, y: c2y });
+      }
+    }
+  }
+  return out;
+}
+function freehandPath(e) {
+  const r = frame(e);
+  const flat = e.path;
+  if (flat && flat.length >= 8 && (flat.length - 2) % 6 === 0) {
+    const pt2 = (i) => ({ x: r.x + flat[2 * i] * r.width, y: r.y + flat[2 * i + 1] * r.height });
+    const path2 = new Path().moveTo(pt2(0));
+    for (let s = 0; s < Math.floor((flat.length / 2 - 1) / 3); s++) path2.curveTo(pt2(3 * s + 3), pt2(3 * s + 1), pt2(3 * s + 2));
+    return path2;
+  }
+  const pts = (e.points ?? []).map((p) => ({ x: r.x + p.x * r.width, y: r.y + p.y * r.height }));
+  const path = new Path();
+  if (pts.length === 0) return path;
+  path.moveTo(pts[0]);
+  if (pts.length === 1) return path.lineTo(pts[0]);
+  if (pts.length === 2) return path.lineTo(pts[1]);
+  for (let i = 1; i < pts.length - 1; i++) {
+    path.quadTo({ x: (pts[i].x + pts[i + 1].x) / 2, y: (pts[i].y + pts[i + 1].y) / 2 }, pts[i]);
+  }
+  return path.lineTo(pts[pts.length - 1]);
+}
+function fillPolygons(e) {
+  if (e.kind !== "path") return [fillPolygon(e)];
+  return shapeContours(e).map((c) => flatten(c.points, 3));
+}
+function fillPolygon(e) {
+  const r = frame(e);
+  if (e.kind === "ellipse") {
+    const out = [];
+    for (let i = 0; i < 48; i++) {
+      const t = 2 * Math.PI * i / 48;
+      out.push({ x: midX(r) + r.width / 2 * Math.cos(t), y: midY(r) + r.height / 2 * Math.sin(t) });
+    }
+    return out;
+  }
+  return e.kind === "diamond" ? diamondPoints(r) : corners(r);
+}
+function fillPath(e) {
+  const r = frame(e);
+  if (e.kind === "ellipse") return Path.ellipse(r);
+  if (e.kind === "path") return shapePath(e);
+  if (e.kind === "diamond") return new Path().addLines(diamondPoints(r)).close();
+  return Path.rect(r);
+}
+function hachurePath(e) {
+  if (e.style.fillStyle === "solid" || ["freehand", "connector", "text", "image"].includes(e.kind)) return new Path();
+  return shapes.get(shapeKey(e, 1), () => computeHachure(e));
+}
+function computeHachure(e) {
+  const polys = fillPolygons(e);
+  const rng = new SeededRNG((e.seed ^ 1540483477) >>> 0);
+  const path = new Path();
+  if (e.style.fillStyle === "grid") {
+    for (const [a, b] of gridLines(polys, cellSize(e))) {
+      if (e.style.roughness <= 0) path.moveTo(a).lineTo(b);
+      else line(a, b, rng, e.style.roughness * 0.3, 0.3, false, path);
+    }
+    return path;
+  }
+  const gap = Math.max(4, e.style.strokeWidth * 4);
+  const angles = [HACHURE_ANGLE];
+  if (e.style.fillStyle === "crossHatch") angles.push(HACHURE_ANGLE + Math.PI / 2);
+  for (const angle2 of angles) {
+    for (const [a, b] of hachureLines(polys, angle2, gap)) {
+      if (e.style.roughness <= 0) path.moveTo(a).lineTo(b);
+      else line(a, b, rng, e.style.roughness * 0.6, 0.5, false, path);
+    }
+  }
+  return path;
+}
+function dashPattern(dash, width) {
+  switch (dash) {
+    case "solid":
+      return null;
+    case "dashed":
+      return [Math.max(8, width * 4), Math.max(6, width * 3)];
+    case "dotted":
+      return [0.01, Math.max(5, width * 2.6)];
+  }
+}
+function connectorParts(e, index) {
+  const c = e.connector;
+  if (!c) return [new Path(), new Path()];
+  const [a, b] = endpoints(e, index);
+  const key = [
+    e.seed,
+    e.style.roughness,
+    e.style.bowing,
+    e.style.strokeWidth,
+    c.routing,
+    c.startHead,
+    c.endHead,
+    c.start.port,
+    c.end.port,
+    a.x,
+    a.y,
+    b.x,
+    b.y
+  ].join("|");
+  return connectors.get(key, () => computeConnector(e, index));
+}
+function computeConnector(e, index) {
+  const c = e.connector;
+  const rng = new SeededRNG(e.seed);
+  const rough = e.style.roughness, bow = e.style.bowing;
+  const path = new Path(), solid = new Path();
+  const r = route(e, index);
+  if (r.kind === "polyline") {
+    const pts2 = r.points;
+    for (let i = 0; i < Math.max(pts2.length - 1, 0); i++) {
+      if (rough <= 0) path.moveTo(pts2[i]).lineTo(pts2[i + 1]);
+      else line(pts2[i], pts2[i + 1], rng, rough, bow, true, path);
+    }
+  } else {
+    path.moveTo(r.a);
+    const w = rough * 3;
+    const j = () => rng.signed() * w;
+    const c1x = r.b.x + j(), c1y = r.b.y + j(), c2x = r.c.x + j(), c2y = r.c.y + j();
+    path.curveTo(r.d, { x: c1x, y: c1y }, { x: c2x, y: c2y });
+  }
+  const pts = routePoints(r);
+  const size = Math.max(10, e.style.strokeWidth * 5);
+  const line2 = (p, q) => {
+    if (rough <= 0) path.moveTo(p).lineTo(q);
+    else line(p, q, rng, rough * 0.5, 0, true, path);
+  };
+  const head = (kind, tip, from) => {
+    const [w1, w2] = arrowhead(tip, from, size);
+    switch (kind) {
+      case "arrow":
+        line2(w1, tip);
+        line2(w2, tip);
+        break;
+      case "triangle":
+        line2(w1, tip);
+        line2(w2, tip);
+        line2(w1, w2);
+        solid.moveTo(tip).lineTo(w1).lineTo(w2).close();
+        break;
+      case "dot": {
+        const rad = size * 0.32;
+        const ang = Math.atan2(tip.y - from.y, tip.x - from.x);
+        const cx = tip.x - rad * Math.cos(ang), cy = tip.y - rad * Math.sin(ang);
+        solid.addEllipse({ x: cx - rad, y: cy - rad, width: 2 * rad, height: 2 * rad });
+        break;
+      }
+      case "bar": {
+        const ang = Math.atan2(tip.y - from.y, tip.x - from.x) + Math.PI / 2;
+        const h = size * 0.5;
+        line2({ x: tip.x - h * Math.cos(ang), y: tip.y - h * Math.sin(ang) }, { x: tip.x + h * Math.cos(ang), y: tip.y + h * Math.sin(ang) });
+        break;
+      }
+    }
+  };
+  if (pts.length > 1) {
+    head(c.endHead, pts[pts.length - 1], pts[pts.length - 2]);
+    head(c.startHead, pts[0], pts[1]);
+  }
+  return [path, solid];
+}
+
+// src/dungeon.ts
+var SUB = 2;
+var BAND = 0.75;
+var GROW = 0.8;
+var JITTER = 0.6;
+function gridLines(polygons, cell) {
+  return [...scan(polygons, cell, false), ...scan(polygons, cell, true)];
+}
+function scan(polygons, cell, transposed) {
+  if (!(cell > 0)) return [];
+  const flip = (p) => transposed ? { x: p.y, y: p.x } : p;
+  const polys = polygons.filter((p) => p.length >= 3).map((p) => p.map(flip));
+  const ys = polys.flat().map((p) => p.y);
+  if (ys.length === 0) return [];
+  const minY = Math.min(...ys), maxY2 = Math.max(...ys);
+  const out = [];
+  for (let y = Math.floor(minY / cell) * cell; y < maxY2 - 0.5; y += cell) {
+    if (!(y > minY + 0.5)) continue;
+    const xs = [];
+    for (const poly of polys) {
+      for (let i = 0; i < poly.length; i++) {
+        const a = poly[i], b = poly[(i + 1) % poly.length];
+        if (a.y <= y && y < b.y || b.y <= y && y < a.y) xs.push(a.x + (y - a.y) / (b.y - a.y) * (b.x - a.x));
+      }
+    }
+    xs.sort((p, q) => p - q);
+    for (let k = 0; k + 1 < xs.length; k += 2) {
+      if (xs[k + 1] - xs[k] > 0.5) out.push([flip({ x: xs[k], y }), flip({ x: xs[k + 1], y })]);
+    }
+  }
+  return out;
+}
+function lineColor(floor) {
+  if (0.2126 * floor.r + 0.7152 * floor.g + 0.0722 * floor.b > 0.5) {
+    return { r: floor.r * 0.84, g: floor.g * 0.84, b: floor.b * 0.8, a: floor.a };
+  }
+  return { r: floor.r + (1 - floor.r) * 0.25, g: floor.g + (1 - floor.g) * 0.25, b: floor.b + (1 - floor.b) * 0.25, a: floor.a };
+}
+function isFloor(e) {
+  return e.style.fillStyle === "grid" && e.style.fill.a > 0 && ["rectangle", "ellipse", "diamond", "path"].includes(e.kind);
+}
+function hash01(i, j, salt) {
+  let h = (Math.imul(i, 668265261) ^ Math.imul(j, 374761393) ^ Math.imul(salt, 2654435761)) >>> 0;
+  h = Math.imul(h ^ h >>> 15, 2246822507) >>> 0;
+  h = Math.imul(h ^ h >>> 13, 3266489909) >>> 0;
+  h = (h ^ h >>> 16) >>> 0;
+  return h / 4294967296;
+}
+function spot(i, j, cell) {
+  const s = cell / SUB;
+  return { x: (i + 0.5 + (hash01(i, j, 1) - 0.5) * JITTER) * s, y: (j + 0.5 + (hash01(i, j, 2) - 0.5) * JITTER) * s };
+}
+function clusterSize(i, j, at, cell) {
+  let nearest2 = Infinity;
+  for (let di = -1; di <= 1; di++) {
+    for (let dj = -1; dj <= 1; dj++) {
+      if (di === 0 && dj === 0) continue;
+      const o = spot(i + di, j + dj, cell);
+      nearest2 = Math.min(nearest2, Math.hypot(o.x - at.x, o.y - at.y));
+    }
+  }
+  return nearest2 * GROW;
+}
+function clusterStrokes(c, angle2, size) {
+  const dx = Math.cos(angle2), dy = Math.sin(angle2);
+  const half = size * 0.8, gap = size * 0.5;
+  return [-1, 0, 1].map((k) => {
+    const cx = c.x - dy * gap * k, cy = c.y + dx * gap * k;
+    return [{ x: cx - dx * half, y: cy - dy * half }, { x: cx + dx * half, y: cy + dy * half }];
+  });
+}
+function contains(contours, p) {
+  let inside = false;
+  for (const poly of contours) {
+    if (poly.length < 3) continue;
+    let k = poly.length - 1;
+    for (let i = 0; i < poly.length; i++) {
+      const a = poly[i], b = poly[k];
+      if (a.y > p.y !== b.y > p.y && p.x < (b.x - a.x) * (p.y - a.y) / (b.y - a.y) + a.x) inside = !inside;
+      k = i;
+    }
+  }
+  return inside;
+}
+function distance(p, contours) {
+  let best = Infinity;
+  for (const poly of contours) {
+    if (poly.length < 2) continue;
+    for (let i = 0; i < poly.length; i++) {
+      const a = poly[i], b = poly[(i + 1) % poly.length];
+      const dx = b.x - a.x, dy = b.y - a.y;
+      const len2 = dx * dx + dy * dy;
+      const t = len2 > 0 ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / len2)) : 0;
+      best = Math.min(best, Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy)));
+    }
+  }
+  return best;
+}
+var containsPoint = (r, p) => p.x >= r.x && p.x < r.x + r.width && p.y >= r.y && p.y < r.y + r.height;
+var rockCache = /* @__PURE__ */ new Map();
+function rock(floors) {
+  if (floors.length === 0) return [];
+  const key = floors.map((e) => [
+    e.kind,
+    e.x,
+    e.y,
+    e.width,
+    e.height,
+    e.rotation ?? 0,
+    cellSize(e),
+    JSON.stringify(e.subpaths ?? null),
+    e.style.stroke.r,
+    e.style.stroke.g,
+    e.style.stroke.b,
+    e.style.stroke.a,
+    e.style.roughness,
+    e.style.strokeWidth
+  ].join(",")).join(";");
+  const hit = rockCache.get(key);
+  if (hit) return hit;
+  const v = computeRock(floors);
+  if (rockCache.size >= 16) rockCache.clear();
+  rockCache.set(key, v);
+  return v;
+}
+function computeRock(elements) {
+  const floors = elements.map((e) => {
+    const contours = fillPolygons(e).map((c) => c.map((p) => rotated(e, p)));
+    const pts = contours.flat();
+    const xs = pts.map((p) => p.x), ys = pts.map((p) => p.y);
+    const x0 = xs.length ? Math.min(...xs) : 0, y0 = ys.length ? Math.min(...ys) : 0;
+    const box = { x: x0, y: y0, width: (xs.length ? Math.max(...xs) : 0) - x0, height: (ys.length ? Math.max(...ys) : 0) - y0 };
+    return { contours, box, cell: cellSize(e), element: e };
+  });
+  const strokes = floors.map(() => []);
+  const seen = /* @__PURE__ */ new Set();
+  for (const f of floors) {
+    const subSize = f.cell / SUB;
+    const around = inset(f.box, -f.cell, -f.cell);
+    const i0 = Math.floor(around.x / subSize), i1 = Math.ceil((around.x + around.width) / subSize);
+    const j0 = Math.floor(around.y / subSize), j1 = Math.ceil((around.y + around.height) / subSize);
+    const reach = BAND * f.cell;
+    for (let i = i0; i < i1; i++) {
+      for (let j = j0; j < j1; j++) {
+        const k = `${f.cell}|${i}|${j}`;
+        if (seen.has(k)) continue;
+        seen.add(k);
+        const at = spot(i, j, f.cell);
+        let nearest2 = Infinity, owner = -1;
+        for (let n = 0; n < floors.length; n++) {
+          const g = floors[n];
+          if (!containsPoint(inset(g.box, -reach, -reach), at)) continue;
+          if (contains(g.contours, at)) {
+            nearest2 = 0;
+            break;
+          }
+          const d = distance(at, g.contours);
+          if (d < nearest2) {
+            nearest2 = d;
+            owner = n;
+          }
+        }
+        if (!(nearest2 > 0 && nearest2 <= reach && owner >= 0)) continue;
+        const angle2 = hash01(i, j, 3) * Math.PI;
+        const size = clusterSize(i, j, at, f.cell);
+        const seed = Math.trunc(hash01(i, j, 4) * 4294967296) >>> 0;
+        for (const [a, b] of clusterStrokes(at, angle2, size)) strokes[owner].push([a, b, seed]);
+      }
+    }
+  }
+  const out = [];
+  floors.forEach((f, n) => {
+    if (strokes[n].length === 0) return;
+    const e = f.element;
+    const path = new Path();
+    for (const [a, b, seed] of strokes[n]) {
+      if (e.style.roughness <= 0) path.moveTo(a).lineTo(b);
+      else line(a, b, new SeededRNG(seed), e.style.roughness * 0.35, 0.2, false, path);
+    }
+    out.push({ ink: { ...e.style.stroke, a: e.style.stroke.a * 0.6 }, width: Math.max(0.8, e.style.strokeWidth * 0.45), path });
+  });
+  return out;
+}
+
+// src/metrics.ts
+var ascent = 0.951995849609375;
+var descent = 0.2129974365234375;
+var leading = 0.0279998779296875;
+var boldAscent = 0.975006103515625;
+var boldDescent = 0.2169952392578125;
+var boldLeading = 0.0290069580078125;
+var italicAscent = 0.957000732421875;
+var italicDescent = 0.2129974365234375;
+var italicLeading = 0.0279998779296875;
+var boldItalicAscent = 0.975006103515625;
+var boldItalicDescent = 0.2169952392578125;
+var boldItalicLeading = 0.0290069580078125;
+var monoAdvance = 0.60205078125;
+var monoAscent = 0.92822265625;
+var monoDescent = 0.23583984375;
+var fonts = { "bold": { "k": { "\u2018\u2018": -95, "\u2019\u2019": -95, "\u2019s": -74, "\u2019t": -18, "A\u2019": -74, "AT": -92, "Av": -18, "AV": -46, "Aw": -18, "AW": -24, "Ay": -18, "AY": -74, "F,": -157, "F.": -157, "f\u2019": 18, "FA": -55, "ff": -30, "fi": 20, "fl": 20, "L\u2019": -74, "LT": -92, "LV": -92, "LW": -55, "Ly": -37, "LY": -111, "P,": -179, "P.": -179, "PA": -74, "r-": -55, "r,": -92, "r.": -92, "rc": -18, "rd": -18, "re": -18, "rg": -28, "rn": 18, "ro": -18, "rq": -18, "RT": -18, "RV": -18, "RW": -18, "RY": -37, "T-": -129, "T,": -111, "T;": -111, "T:": -111, "T.": -111, "Ta": -111, "TA": -92, "Tc": -111, "Te": -111, "To": -111, "Tr": -92, "Ts": -111, "Tu": -92, "Tw": -111, "Ty": -111, "V-": -55, "v,": -74, "V,": -129, "V;": -46, "V:": -46, "v.": -74, "V.": -129, "Va": -55, "VA": -46, "Ve": -55, "Vi": -18, "Vo": -55, "Vr": -37, "Vu": -37, "Vy": -18, "w,": -55, "W,": -74, "W;": -18, "W:": -18, "w.": -55, "W.": -74, "Wa": -37, "WA": -24, "We": -57, "Wo": -57, "Wr": -18, "Wu": -18, "Y-": -111, "y,": -74, "Y,": -139, "Y;": -92, "Y:": -92, "y.": -74, "Y.": -139, "Ya": -92, "YA": -74, "Ye": -111, "Yi": -37, "Yo": -111, "Yp": -74, "Yq": -92, "Yu": -74, "Yv": -55 }, "w": { " ": 278, "_": 500, "-": 407, "\u2013": 500, "\u2014": 1e3, ",": 278, ";": 278, ":": 278, "!": 278, "?": 556, ".": 278, "\u2026": 1e3, "\xB7": 278, "'": 278, "\u2018": 278, "\u2019": 278, '"': 463, "\u201C": 463, "\u201D": 463, "(": 296, ")": 296, "[": 333, "]": 333, "{": 333, "}": 333, "@": 800, "*": 407, "/": 371, "\\": 371, "&": 685, "#": 556, "%": 1e3, "\u2022": 350, "`": 259, "^": 600, "\u2190": 1e3, "\u2192": 1e3, "\u2191": 722.66, "\u2193": 722.66, "+": 600, "\xD7": 600, "<": 600, "=": 600, ">": 600, "|": 223, "~": 600, "\u25E6": 608.4, "\u2610": 830.08, "\u2611": 830.08, "\u2713": 764.16, "$": 556, "0": 556, "1": 556, "2": 556, "3": 556, "4": 556, "5": 556, "6": 556, "7": 556, "8": 556, "9": 556, "a": 574, "A": 685, "b": 611, "B": 704, "c": 574, "C": 741, "d": 611, "D": 741, "e": 574, "E": 648, "\xE9": 574, "f": 333, "F": 593, "g": 611, "G": 759, "h": 593, "H": 741, "i": 258, "I": 295, "j": 278, "J": 556, "k": 574, "K": 722, "l": 258, "L": 593, "m": 906, "M": 907, "n": 593, "N": 741, "o": 611, "O": 778, "p": 611, "P": 667, "q": 611, "Q": 778, "r": 389, "R": 722, "s": 537, "S": 649, "t": 352, "T": 611, "u": 593, "U": 741, "v": 520, "V": 630, "w": 814, "W": 944, "x": 537, "X": 667, "y": 519, "Y": 667, "z": 519, "Z": 648 } }, "boldItalic": { "k": { "\u2018\u2018": -95, "\u2019\u2019": -95, "\u2019s": -74, "\u2019t": -18, "A\u2019": -74, "AT": -92, "Av": -18, "AV": -46, "Aw": -18, "AW": -24, "Ay": -18, "AY": -74, "F,": -157, "F.": -157, "f\u2019": 18, "FA": -55, "ff": -68, "L\u2019": -74, "LT": -92, "LV": -92, "LW": -55, "Ly": -37, "LY": -111, "P,": -179, "P.": -179, "PA": -74, "r-": -55, "r,": -92, "r.": -92, "rc": -18, "rd": -18, "re": -18, "rg": -28, "rn": 18, "ro": -18, "rq": -18, "RT": -18, "RV": -18, "RW": -18, "RY": -37, "T-": -129, "T,": -111, "T;": -111, "T:": -111, "T.": -111, "Ta": -111, "TA": -92, "Tc": -111, "Te": -111, "To": -111, "Tr": -92, "Ts": -111, "Tu": -92, "Tw": -111, "Ty": -111, "V-": -55, "v,": -74, "V,": -129, "V;": -46, "V:": -46, "v.": -74, "V.": -129, "Va": -55, "VA": -46, "Ve": -55, "Vi": -18, "Vo": -55, "Vr": -37, "Vu": -37, "Vy": -18, "w,": -55, "W,": -74, "W;": -18, "W:": -18, "w.": -55, "W.": -74, "Wa": -37, "WA": -24, "We": -57, "Wo": -57, "Wr": -18, "Wu": -18, "Y-": -111, "y,": -74, "Y,": -139, "Y;": -92, "Y:": -92, "y.": -74, "Y.": -139, "Ya": -92, "YA": -74, "Ye": -111, "Yi": -37, "Yo": -111, "Yp": -74, "Yq": -92, "Yu": -74, "Yv": -55 }, "w": { " ": 278, "_": 500, "-": 407, "\u2013": 500, "\u2014": 1e3, ",": 278, ";": 278, ":": 278, "!": 296, "?": 574, ".": 278, "\u2026": 1e3, "\xB7": 278, "'": 278, "\u2018": 278, "\u2019": 278, '"': 481, "\u201C": 481, "\u201D": 481, "(": 296, ")": 296, "[": 333, "]": 333, "{": 333, "}": 333, "@": 800, "*": 407, "/": 389, "\\": 389, "&": 685, "#": 556, "%": 963, "\u2022": 350, "`": 259, "^": 600, "\u2190": 1e3, "\u2192": 1e3, "\u2191": 722.66, "\u2193": 722.66, "+": 600, "\xD7": 600, "<": 600, "=": 600, ">": 600, "|": 222, "~": 600, "\u25E6": 608.4, "\u2610": 830.08, "\u2611": 830.08, "\u2713": 764.16, "$": 556, "0": 556, "1": 556, "2": 556, "3": 556, "4": 556, "5": 556, "6": 556, "7": 556, "8": 556, "9": 556, "a": 574, "A": 685, "b": 611, "B": 722, "c": 556, "C": 741, "d": 611, "D": 741, "e": 574, "E": 667, "\xE9": 574, "f": 352, "F": 593, "g": 611, "G": 759, "h": 611, "H": 741, "i": 259, "I": 296, "j": 259, "J": 556, "k": 556, "K": 722, "l": 259, "L": 574, "m": 907, "M": 907, "n": 611, "N": 741, "o": 593, "O": 778, "p": 611, "P": 667, "q": 611, "Q": 778, "r": 389, "R": 722, "s": 519, "S": 648, "t": 370, "T": 611, "u": 611, "U": 741, "v": 519, "V": 630, "w": 815, "W": 944, "x": 519, "X": 667, "y": 519, "Y": 648, "z": 500, "Z": 648 } }, "italic": { "k": { "\u2018\u2018": -95, "\u2019\u2019": -95, "\u2019s": -74, "\u2019t": -18, "A\u2019": -74, "AT": -92, "Av": -18, "AV": -46, "Aw": -18, "AW": -24, "Ay": -18, "AY": -74, "F,": -157, "F.": -157, "f\u2019": 18, "FA": -55, "ff": -15, "fi": 1, "fl": 1, "L\u2019": -74, "LT": -92, "LV": -92, "LW": -55, "Ly": -37, "LY": -111, "P,": -179, "P.": -179, "PA": -74, "r-": -55, "r,": -92, "r.": -92, "rc": -18, "rd": -18, "re": -18, "rg": -28, "rn": 18, "ro": -18, "rq": -18, "RT": -18, "RV": -18, "RW": -18, "RY": -37, "T-": -129, "T,": -111, "T;": -111, "T:": -111, "T.": -111, "Ta": -111, "TA": -92, "Tc": -111, "Te": -111, "To": -111, "Tr": -92, "Ts": -111, "Tu": -92, "Tw": -111, "Ty": -111, "V-": -55, "v,": -74, "V,": -129, "V;": -46, "V:": -46, "v.": -74, "V.": -129, "Va": -55, "VA": -46, "Ve": -55, "Vi": -18, "Vo": -55, "Vr": -37, "Vu": -37, "Vy": -18, "w,": -55, "W,": -74, "W;": -18, "W:": -18, "w.": -55, "W.": -74, "Wa": -37, "WA": -24, "We": -57, "Wo": -57, "Wr": -18, "Wu": -18, "Y-": -111, "y,": -74, "Y,": -139, "Y;": -92, "Y:": -92, "y.": -74, "Y.": -139, "Ya": -92, "YA": -74, "Ye": -111, "Yi": -37, "Yo": -111, "Yp": -74, "Yq": -92, "Yu": -74, "Yv": -55 }, "w": { " ": 278, "_": 500, "-": 389, "\u2013": 500, "\u2014": 1e3, ",": 278, ";": 278, ":": 278, "!": 259, "?": 556, ".": 278, "\u2026": 1e3, "\xB7": 278, "'": 278, "\u2018": 278, "\u2019": 278, '"': 426, "\u201C": 426, "\u201D": 426, "(": 259, ")": 259, "[": 259, "]": 259, "{": 333, "}": 333, "@": 800, "*": 352, "/": 333, "\\": 333, "&": 630, "#": 556, "%": 926, "\u2022": 500, "`": 222, "^": 600, "\u2190": 1e3, "\u2192": 1e3, "\u2191": 645.02, "\u2193": 645.02, "+": 600, "\xD7": 600, "<": 600, "=": 600, ">": 600, "|": 222, "~": 600, "\u25E6": 578.13, "\u2610": 830.08, "\u2611": 830.08, "\u2713": 764.16, "$": 556, "0": 556, "1": 556, "2": 556, "3": 556, "4": 556, "5": 556, "6": 556, "7": 556, "8": 556, "9": 556, "a": 519, "A": 667, "b": 593, "B": 685, "c": 537, "C": 722, "d": 593, "D": 704, "e": 537, "E": 611, "\xE9": 537, "f": 296, "F": 574, "g": 574, "G": 759, "h": 556, "H": 722, "i": 222, "I": 259, "j": 222, "J": 519, "k": 481, "K": 667, "l": 222, "L": 556, "m": 852, "M": 870, "n": 556, "N": 722, "o": 574, "O": 759, "p": 593, "P": 648, "q": 593, "Q": 759, "r": 333, "R": 685, "s": 481, "S": 648, "t": 315, "T": 574, "u": 556, "U": 722, "v": 481, "V": 611, "w": 759, "W": 926, "x": 481, "X": 611, "y": 481, "Y": 611, "z": 444, "Z": 611 } }, "regular": { "k": { "\u2018\u2018": -95, "\u2019\u2019": -95, "\u2019s": -74, "\u2019t": -18, "A\u2019": -74, "AT": -92, "Av": -18, "AV": -46, "Aw": -18, "AW": -24, "Ay": -18, "AY": -74, "F,": -157, "F.": -157, "f\u2019": 18, "FA": -55, "ff": -15, "L\u2019": -74, "LT": -92, "LV": -92, "LW": -55, "Ly": -37, "LY": -111, "P,": -179, "P.": -179, "PA": -74, "r-": -55, "r,": -92, "r.": -92, "rc": -18, "rd": -18, "re": -18, "rg": -28, "rn": 18, "ro": -18, "rq": -18, "RT": -18, "RV": -18, "RW": -18, "RY": -37, "T-": -129, "T,": -111, "T;": -111, "T:": -111, "T.": -111, "Ta": -111, "TA": -92, "Tc": -111, "Te": -111, "To": -111, "Tr": -92, "Ts": -111, "Tu": -92, "Tw": -111, "Ty": -111, "V-": -55, "v,": -74, "V,": -129, "V;": -46, "V:": -46, "v.": -74, "V.": -129, "Va": -55, "VA": -46, "Ve": -55, "Vi": -18, "Vo": -55, "Vr": -37, "Vu": -37, "Vy": -18, "w,": -55, "W,": -74, "W;": -18, "W:": -18, "w.": -55, "W.": -74, "Wa": -37, "WA": -24, "We": -57, "Wo": -57, "Wr": -18, "Wu": -18, "Y-": -111, "y,": -74, "Y,": -139, "Y;": -92, "Y:": -92, "y.": -74, "Y.": -139, "Ya": -92, "YA": -74, "Ye": -111, "Yi": -37, "Yo": -111, "Yp": -74, "Yq": -92, "Yu": -74, "Yv": -55 }, "w": { " ": 278, "_": 500, "-": 389, "\u2013": 500, "\u2014": 1e3, ",": 278, ";": 278, ":": 278, "!": 259, "?": 556, ".": 278, "\u2026": 1e3, "\xB7": 278, "'": 278, "\u2018": 278, "\u2019": 278, '"': 426, "\u201C": 426, "\u201D": 426, "(": 259, ")": 259, "[": 259, "]": 259, "{": 333, "}": 333, "@": 800, "*": 352, "/": 333, "\\": 333, "&": 630, "#": 556, "%": 1e3, "\u2022": 350, "`": 222, "^": 600, "\u2190": 1e3, "\u2192": 1e3, "\u2191": 645.02, "\u2193": 645.02, "+": 600, "\xD7": 600, "<": 600, "=": 600, ">": 600, "|": 222, "~": 600, "\u25E6": 578.13, "\u2610": 830.08, "\u2611": 830.08, "\u2713": 764.16, "$": 556, "0": 556, "1": 556, "2": 556, "3": 556, "4": 556, "5": 556, "6": 556, "7": 556, "8": 556, "9": 556, "a": 537, "A": 648, "b": 593, "B": 685, "c": 537, "C": 722, "d": 593, "D": 704, "e": 537, "E": 611, "\xE9": 537, "f": 296, "F": 574, "g": 574, "G": 759, "h": 556, "H": 722, "i": 222, "I": 259, "j": 222, "J": 519, "k": 519, "K": 667, "l": 222, "L": 556, "m": 853, "M": 871, "n": 556, "N": 722, "o": 574, "O": 760, "p": 593, "P": 648, "q": 593, "Q": 760, "r": 333, "R": 685, "s": 500, "S": 648, "t": 315, "T": 574, "u": 556, "U": 722, "v": 500, "V": 611, "w": 758, "W": 926, "x": 518, "X": 611, "y": 500, "Y": 648, "z": 480, "Z": 611 } } };
+var fallbackMetrics = { "\u2190": [0.966796875, 0.2109375, 0], "\u2192": [0.966796875, 0.2109375, 0], "\u2191": [0.966796875, 0.2109375, 0], "\u2193": [0.966796875, 0.2109375, 0], "\u25E6": [0.966796875, 0.2109375, 0], "\u2610": [0.66650390625, 0.25, 0.08349609375], "\u2611": [0.66650390625, 0.25, 0.08349609375], "\u2713": [0.966796875, 0.2109375, 0] };
+
+// src/svg-util.ts
+function color(c) {
+  const h = (v) => Math.round(Math.min(Math.max(v, 0), 1) * 255).toString(16).padStart(2, "0");
+  return `#${h(c.r)}${h(c.g)}${h(c.b)}`;
+}
+function escapeXML(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/text.ts
+function measure(s, fontSize, face2 = "regular") {
+  const f = fonts[face2];
+  const fallback = f.w["n"];
+  let w = 0;
+  let prev = "";
+  for (const ch of s) {
+    w += f.w[ch] ?? fallback;
+    if (prev) w += f.k[prev + ch] ?? 0;
+    prev = ch;
+  }
+  return w * fontSize / 1e3;
+}
+function lineHeights(fontSize) {
+  const a = Math.round(ascent * fontSize), d = Math.round(descent * fontSize), l = Math.round(leading * fontSize);
+  return [a + d, a + d + l];
+}
+function breaksAfter(ch, next) {
+  if (ch === " ") return true;
+  return (ch === "/" || ch === "-") && next !== "" && !/[\d\s/-]/.test(next);
+}
+function pieces(para) {
+  const chars = [...para];
+  const out = [];
+  let cur = "";
+  chars.forEach((ch, i) => {
+    cur += ch;
+    const next = chars[i + 1] ?? "";
+    if (breaksAfter(ch, next) && next !== " ") {
+      out.push(cur);
+      cur = "";
+    }
+  });
+  if (cur || out.length === 0) out.push(cur);
+  return out;
+}
+function wrap(s, fontSize, maxWidth, face2 = "regular") {
+  const out = [];
+  for (const para of s.split(/\r\n|\n|\r|\u2028|\u2029/)) {
+    let line2 = "";
+    for (const piece of pieces(para)) {
+      const candidate = line2 + piece;
+      if (line2 === "" || measure(candidate.trimEnd(), fontSize, face2) <= maxWidth) {
+        line2 = candidate;
+      } else {
+        out.push(line2);
+        line2 = piece;
+      }
+      while (measure(line2.trimEnd(), fontSize, face2) > maxWidth && [...line2.trimEnd()].length > 1) {
+        const chars = [...line2];
+        let n = chars.length - 1;
+        while (n > 1 && measure(chars.slice(0, n).join(""), fontSize, face2) > maxWidth) n--;
+        out.push(chars.slice(0, n).join(""));
+        line2 = chars.slice(n).join("");
+      }
+    }
+    out.push(line2);
+  }
+  return out;
+}
+function textSize(s, fontSize, maxWidth) {
+  if (s === "") return { width: 0, height: 0 };
+  const lines = wrap(s, fontSize, maxWidth);
+  const width = Math.max(...lines.map((l) => measure(l.trimEnd(), fontSize)));
+  const [first, next] = lineHeights(fontSize);
+  return { width: Math.ceil(width - 1e-9), height: Math.ceil(first + next * (lines.length - 1) - 1e-9) };
+}
+
+// src/note.ts
+var PADDING = 12;
+var SEP = "\u2028";
+function textRect(f) {
+  const dx = Math.min(PADDING, f.width / 2), dy = Math.min(PADDING, f.height / 2);
+  return { x: f.x + dx, y: f.y + dy, width: f.width - 2 * dx, height: f.height - 2 * dy };
+}
+var reHeading = /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/;
+var reRule = /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/;
+var reFence = /^ {0,3}(`{3,}|~{3,})/;
+var reItem = /^( *)([-*+]|\d{1,9}[.)])([ \t]+|$)(.*)$/;
+var reQuote = /^ {0,3}> ?(.*)$/;
+var reTableSep = /^ *\|? *:?-+:? *(\| *:?-+:? *)*\|? *$/;
+function splitRow(line2) {
+  let s = line2.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|") && !s.endsWith("\\|")) s = s.slice(0, -1);
+  return s.split(/(?<!\\)\|/).map((c) => c.trim());
+}
+function parseBlocks(source) {
+  return blocks(source.replace(/\r\n?/g, "\n").split("\n"));
+}
+function blocks(lines) {
+  const out = [];
+  let i = 0;
+  let para = null;
+  const flush = () => {
+    if (para) {
+      out.push({ kind: "paragraph", inline: inline(para.join("\n")) });
+      para = null;
+    }
+  };
+  while (i < lines.length) {
+    const line2 = lines[i];
+    if (line2.trim() === "") {
+      flush();
+      i++;
+      continue;
+    }
+    const fence = reFence.exec(line2);
+    if (fence) {
+      flush();
+      const close = new RegExp(`^ {0,3}${fence[1][0] === "`" ? "`" : "~"}{${fence[1].length},}[ \\t]*$`);
+      const body = [];
+      i++;
+      while (i < lines.length && !close.test(lines[i])) body.push(lines[i++]);
+      i++;
+      out.push({ kind: "code", text: body.join("\n") });
+      continue;
+    }
+    const h = reHeading.exec(line2);
+    if (h) {
+      flush();
+      out.push({ kind: "heading", level: h[1].length, inline: inline(h[2] ?? "") });
+      i++;
+      continue;
+    }
+    if (para && /^ {0,3}(=+|-+)[ \t]*$/.test(line2)) {
+      const level = line2.trim()[0] === "=" ? 1 : 2;
+      out.push({ kind: "heading", level, inline: inline(para.join("\n")) });
+      para = null;
+      i++;
+      continue;
+    }
+    if (reRule.test(line2)) {
+      flush();
+      out.push({ kind: "rule" });
+      i++;
+      continue;
+    }
+    if (reQuote.test(line2)) {
+      flush();
+      const inner = [];
+      while (i < lines.length && lines[i].trim() !== "") {
+        const q = reQuote.exec(lines[i]);
+        inner.push(q ? q[1] : lines[i]);
+        i++;
+      }
+      out.push({ kind: "quote", children: blocks(inner) });
+      continue;
+    }
+    const item = reItem.exec(line2);
+    if (item && (!para || item[4].trim() !== "")) {
+      flush();
+      const list = parseList(lines, i);
+      out.push(list.block);
+      i = list.next;
+      continue;
+    }
+    if (!para && line2.includes("|") && i + 1 < lines.length && reTableSep.test(lines[i + 1]) && lines[i + 1].includes("-")) {
+      const head = splitRow(line2);
+      const align = splitRow(lines[i + 1]).map((c) => c.startsWith(":") && c.endsWith(":") ? "center" : c.endsWith(":") ? "right" : c.startsWith(":") ? "left" : null);
+      const rows = [];
+      i += 2;
+      while (i < lines.length && lines[i].trim() !== "" && !reHeading.test(lines[i]) && !reQuote.test(lines[i]) && !reFence.test(lines[i])) {
+        rows.push(splitRow(lines[i]).slice(0, head.length).map((c) => inline(c)));
+        i++;
+      }
+      out.push({ kind: "table", align, head: head.map((c) => inline(c)), rows });
+      continue;
+    }
+    if (!para) para = [];
+    para.push(line2.replace(/^ +/, ""));
+    i++;
+  }
+  flush();
+  return out;
+}
+function parseList(lines, start) {
+  const first = reItem.exec(lines[start]);
+  const indent = first[1].length;
+  const bullet = /^\d/.test(first[2]) ? null : first[2];
+  const ordered = bullet === null ? parseInt(first[2], 10) : null;
+  const items = [];
+  let i = start;
+  while (i < lines.length) {
+    const m = reItem.exec(lines[i]);
+    if (!m || m[1].length !== indent || bullet === null !== /^\d/.test(m[2]) || bullet !== null && m[2] !== bullet) break;
+    const contentIndent = m[1].length + m[2].length + Math.max(1, Math.min(m[3].length, 4));
+    const body = [m[4]];
+    i++;
+    let blank = false;
+    while (i < lines.length) {
+      const l = lines[i];
+      if (l.trim() === "") {
+        blank = true;
+        body.push("");
+        i++;
+        continue;
+      }
+      const lead = l.length - l.trimStart().length;
+      if (lead >= contentIndent) {
+        body.push(l.slice(contentIndent));
+        blank = false;
+        i++;
+        continue;
+      }
+      if (!blank && !reItem.test(l) && !reHeading.test(l) && !reQuote.test(l) && !reFence.test(l) && !reRule.test(l)) {
+        body.push(l.trimStart());
+        i++;
+        continue;
+      }
+      break;
+    }
+    while (body.length && body[body.length - 1].trim() === "") body.pop();
+    let checkbox = null;
+    const task = /^\[([ xX])\](?:[ \t]+|$)/.exec(body[0] ?? "");
+    if (task) {
+      checkbox = task[1] !== " ";
+      body[0] = body[0].slice(task[0].length);
+    }
+    items.push({ checkbox, children: blocks(body) });
+    if (blank && i < lines.length && lines[i - 1]?.trim() === "") {
+      const next = reItem.exec(lines[i]);
+      if (!next || next[1].length !== indent) break;
+    }
+  }
+  return { block: { kind: "list", ordered, items }, next: i };
+}
+function inline(src, style = {}) {
+  const out = [];
+  const push = (text, s) => {
+    if (text) out.push({ ...s, text });
+  };
+  let i = 0, buf = "";
+  const emit = () => {
+    push(buf, style);
+    buf = "";
+  };
+  while (i < src.length) {
+    const rest = src.slice(i);
+    let m;
+    if (rest[0] === "\\" && /^\\[\\`*_{}[\]()#+\-.!|~>]/.test(rest)) {
+      buf += rest[1];
+      i += 2;
+      continue;
+    }
+    if (rest.startsWith("\\\n")) {
+      buf += SEP;
+      i += 2;
+      while (src[i] === " ") i++;
+      continue;
+    }
+    if (rest[0] === "\n") {
+      buf = buf.replace(/ +$/, "");
+      buf += SEP;
+      i++;
+      while (src[i] === " ") i++;
+      continue;
+    }
+    if (m = /^(`+)([\s\S]*?[^`])\1(?!`)/.exec(rest)) {
+      emit();
+      let code = m[2].replace(/\n/g, " ");
+      if (/^ .* $/.test(code)) code = code.slice(1, -1);
+      push(code, { ...style, mono: true });
+      i += m[0].length;
+      continue;
+    }
+    if (m = /^!\[([^\]]*)\]\([^)]*\)/.exec(rest)) {
+      emit();
+      out.push(...inline(m[1], style));
+      i += m[0].length;
+      continue;
+    }
+    if (m = /^\[([^\]]+)\]\([^)]*\)/.exec(rest)) {
+      emit();
+      out.push(...inline(m[1], { ...style, link: true }));
+      i += m[0].length;
+      continue;
+    }
+    if (m = /^<((?:https?|ftp|mailto):[^>\s]+)>/.exec(rest)) {
+      emit();
+      push(m[1], { ...style, link: true });
+      i += m[0].length;
+      continue;
+    }
+    if (m = /^~~(?=\S)([\s\S]*?\S)~~/.exec(rest)) {
+      emit();
+      out.push(...inline(m[1], { ...style, strike: true }));
+      i += m[0].length;
+      continue;
+    }
+    if (m = /^(\*\*|__)(?=\S)([\s\S]*?\S)\1/.exec(rest)) {
+      emit();
+      out.push(...inline(m[2], { ...style, bold: true }));
+      i += m[0].length;
+      continue;
+    }
+    if ((m = /^(\*|_)(?=\S)([\s\S]*?\S)\1(?!\1)/.exec(rest)) && (m[1] === "*" || !/\w/.test(src[i - 1] ?? ""))) {
+      emit();
+      out.push(...inline(m[2], { ...style, italic: true }));
+      i += m[0].length;
+      continue;
+    }
+    buf += rest[0];
+    i++;
+  }
+  emit();
+  return underlineBareURLs(out);
+}
+function underlineBareURLs(runs) {
+  const url = /\b(?:(?:https?|ftp):\/\/|www\.)[^\s<]*[^\s<.,:;"')\]!?]/g;
+  return runs.flatMap((r) => {
+    if (r.link || r.mono || !(r.text.includes("://") || r.text.includes("www."))) return [r];
+    const out = [];
+    let last = 0;
+    for (const m of r.text.matchAll(url)) {
+      if (m.index > last) out.push({ ...r, text: r.text.slice(last, m.index) });
+      out.push({ ...r, text: m[0], link: true });
+      last = m.index + m[0].length;
+    }
+    if (last < r.text.length) out.push({ ...r, text: r.text.slice(last) });
+    return out;
+  });
+}
+function face(r) {
+  return r.bold ? r.italic ? "boldItalic" : "bold" : r.italic ? "italic" : "regular";
+}
+function charWidth(ch, r) {
+  if (r.mono && fallbackMetrics[ch] === void 0) return monoAdvance * r.size;
+  const f = fonts[face(r)];
+  return (f.w[ch] ?? fonts.regular.w[ch] ?? f.w["n"]) * r.size / 1e3;
+}
+function kern(a, b, r) {
+  if (r.mono) return 0;
+  return (fonts[face(r)].k[a + b] ?? 0) * r.size / 1e3;
+}
+function metrics(ch, r) {
+  const fb = fallbackMetrics[ch];
+  if (fb) return [fb[0] * r.size, fb[1] * r.size, fb[2] * r.size];
+  if (r.mono) return [monoAscent * r.size, monoDescent * r.size, 0];
+  if (r.bold && r.italic) return [boldItalicAscent * r.size, boldItalicDescent * r.size, boldItalicLeading * r.size];
+  if (r.bold) return [boldAscent * r.size, boldDescent * r.size, boldLeading * r.size];
+  if (r.italic) return [italicAscent * r.size, italicDescent * r.size, italicLeading * r.size];
+  return [ascent * r.size, descent * r.size, leading * r.size];
+}
+var Builder = class {
+  constructor(fontSize, width) {
+    __publicField(this, "paras", []);
+    __publicField(this, "nextSpacing", null);
+    __publicField(this, "fontSize");
+    __publicField(this, "width");
+    this.fontSize = fontSize;
+    this.width = width;
+  }
+  get gap() {
+    return this.fontSize * 0.5;
+  }
+  spacing(normal) {
+    return this.paras.length === 0 ? 0 : this.nextSpacing ?? normal;
+  }
+  run(i, size, alpha, base = {}) {
+    const mono = !!i.mono;
+    return {
+      text: i.text,
+      size: mono ? size * 0.9 : size,
+      bold: !!(i.bold || base.bold),
+      italic: !!(i.italic || base.italic),
+      mono,
+      strike: !!i.strike,
+      underline: !!i.link,
+      alpha
+    };
+  }
+  paragraph(p, quote) {
+    this.paras.push({ tabs: [], rule: null, tableRule: null, ...p, quote });
+    this.nextSpacing = null;
+  }
+  text(runs, ctx, spacing, extra = {}) {
+    if (ctx.marker) {
+      const lead = { text: ctx.marker.text + "	", size: this.fontSize, bold: false, italic: false, mono: false, strike: false, underline: false, alpha: 1 };
+      this.paragraph({ runs: [lead, ...runs], spacing, firstIndent: ctx.marker.start, indent: ctx.marker.hang, tabs: [{ align: "left", x: ctx.marker.hang }], ...extra }, ctx.quote);
+    } else {
+      this.paragraph({ runs, spacing, firstIndent: ctx.indent, indent: ctx.indent, ...extra }, ctx.quote);
+    }
+  }
+  block(b, ctx) {
+    const quoted = ctx.quote !== null;
+    const alpha = quoted ? 0.7 : 1;
+    switch (b.kind) {
+      case "heading": {
+        const scale = [1.5, 1.3, 1.15, 1.05, 1, 1][Math.min(Math.max(b.level, 1), 6) - 1];
+        this.text(b.inline.map((i) => this.run(i, this.fontSize * scale, alpha, { bold: true, italic: quoted })), ctx, this.spacing(this.gap * 1.4));
+        break;
+      }
+      case "paragraph":
+        this.text(b.inline.map((i) => this.run(i, this.fontSize, alpha, { italic: quoted })), ctx, this.spacing(this.gap));
+        break;
+      case "list": {
+        const markers = b.items.map((it, i) => it.checkbox === true ? "\u2611" : it.checkbox === false ? "\u2610" : b.ordered !== null ? `${b.ordered + i}.` : ctx.listDepth % 2 === 0 ? "\u2022" : "\u25E6");
+        const plain = (s) => measureRun({ text: s, size: this.fontSize, bold: false, italic: false, mono: false, strike: false, underline: false, alpha: 1 });
+        const widest = Math.max(0, ...markers.map(plain));
+        const hang = ctx.indent + Math.max(widest + this.fontSize * 0.45, this.fontSize * 1.2);
+        b.items.forEach((item, i) => {
+          if (i > 0 || ctx.listDepth > 0 || ctx.marker) this.nextSpacing = this.fontSize * 0.15;
+          const inner = { ...ctx, marker: { text: markers[i], start: ctx.indent, hang }, indent: hang, listDepth: ctx.listDepth + 1 };
+          if (item.children.length === 0) this.text([], inner, this.spacing(this.gap));
+          for (const child of item.children) {
+            this.block(child, inner);
+            inner.marker = null;
+            this.nextSpacing = this.fontSize * 0.3;
+          }
+          this.nextSpacing = null;
+        });
+        break;
+      }
+      case "quote": {
+        const inner = { ...ctx, quote: ctx.indent + 3, indent: ctx.indent + this.fontSize };
+        for (const child of b.children) this.block(child, inner);
+        break;
+      }
+      case "code": {
+        const body = b.text === "" ? " " : b.text.replace(/\n/g, SEP);
+        const run = { text: body, size: this.fontSize * 0.85, bold: false, italic: false, mono: true, strike: false, underline: false, alpha };
+        this.text([run], { ...ctx, indent: ctx.indent + this.fontSize * 0.5 }, this.spacing(this.gap));
+        break;
+      }
+      case "rule": {
+        const run = { text: " ", size: this.fontSize * 0.6, bold: false, italic: false, mono: false, strike: false, underline: false, alpha: 1 };
+        this.text([run], ctx, this.spacing(this.gap), { rule: ctx.indent });
+        break;
+      }
+      case "table":
+        this.table(b, ctx);
+        break;
+    }
+  }
+  table(t, ctx) {
+    const rows = [{ cells: t.head, header: true }, ...t.rows.map((r) => ({ cells: r, header: false }))];
+    const columns = Math.max(1, ...rows.map((r) => r.cells.length));
+    const quoted = ctx.quote !== null;
+    const cell = (c, header, size2) => c.map((i) => ({ ...this.run({ ...i, text: i.text.replaceAll(SEP, " ") }, size2, quoted ? 0.7 : 1, { bold: header, italic: quoted }) }));
+    const widths = (size2) => {
+      const w2 = new Array(columns).fill(0);
+      for (const row of rows) row.cells.forEach((c, i) => {
+        if (i < columns) w2[i] = Math.max(w2[i], cell(c, row.header, size2).reduce((s, r) => s + measureRun(r), 0));
+      });
+      return w2;
+    };
+    const available = Math.max(this.width - ctx.indent, 1);
+    let size = this.fontSize;
+    let w = widths(size);
+    let gutter = size * 1.2;
+    const natural = w.reduce((a, b) => a + b, 0) + gutter * (columns - 1);
+    if (natural > available) {
+      size = Math.max(this.fontSize * available / natural, Math.min(this.fontSize, 9));
+      w = widths(size);
+      gutter = size * 1.2;
+    }
+    const starts = [];
+    let x = ctx.indent;
+    for (const wi of w) {
+      starts.push(x);
+      x += wi + gutter;
+    }
+    const total = x - gutter - ctx.indent;
+    const tabs = [];
+    let leadingTab = false;
+    for (let i = 0; i < columns; i++) {
+      const align = t.align[i] ?? null;
+      if (align === "center") tabs.push({ align: "center", x: starts[i] + w[i] / 2 });
+      else if (align === "right") tabs.push({ align: "right", x: starts[i] + w[i] });
+      else if (i > 0) tabs.push({ align: "left", x: starts[i] });
+      if (i === 0 && (align === "center" || align === "right")) leadingTab = true;
+    }
+    const plain = (s) => ({ text: s, size, bold: false, italic: false, mono: false, strike: false, underline: false, alpha: 1 });
+    rows.forEach((row, n) => {
+      const runs = [];
+      if (leadingTab) runs.push(plain("	"));
+      for (let i = 0; i < columns; i++) {
+        if (i > 0) runs.push(plain("	"));
+        if (i < row.cells.length) runs.push(...cell(row.cells[i], row.header, size));
+      }
+      if (runs.length === 0) runs.push(plain(" "));
+      const before = n === 0 ? this.spacing(this.gap) : n === 1 ? size * 0.45 : size * 0.2;
+      this.paragraph({ runs, spacing: before, firstIndent: ctx.indent, indent: ctx.indent, tabs, tableRule: row.header ? [ctx.indent, total] : null }, ctx.quote);
+    });
+  }
+};
+function measureRun(r) {
+  let w = 0, prev = "";
+  for (const ch of r.text) {
+    w += charWidth(ch, r);
+    if (prev) w += kern(prev, ch, r);
+    prev = ch;
+  }
+  return w;
+}
+var TAB_INTERVAL = 28;
+function layoutLines(paras, width, height, fontSize) {
+  const lines = [];
+  let baseline = 0;
+  let prev = null;
+  paras.forEach((p, pi) => {
+    const runs = pi < paras.length - 1 ? [...p.runs, { text: "\n", size: fontSize, bold: false, italic: false, mono: false, strike: false, underline: false, alpha: 1 }] : p.runs;
+    const chars = [];
+    runs.forEach((r, ri) => {
+      for (const ch of r.text) chars.push({ ch, run: ri });
+    });
+    let k = 0;
+    let firstLine = true;
+    while (k < chars.length || firstLine && chars.length === 0) {
+      const start = firstLine ? p.firstIndent : p.indent;
+      const maxX2 = width;
+      const glyphs = [];
+      let x = start, lastSpace = -1, end = k;
+      for (; end < chars.length; end++) {
+        const { ch, run } = chars[end];
+        const r = runs[run];
+        if (ch === SEP || ch === "\n") {
+          glyphs.push({ ch, run, x, w: 0 });
+          end++;
+          break;
+        }
+        if (ch === "	") {
+          const stop = p.tabs.find((t) => t.x > x + 0.01);
+          let tx;
+          if (stop) {
+            if (stop.align === "left") tx = stop.x;
+            else {
+              let seg = 0, prevCh = "";
+              for (let q = end + 1; q < chars.length && chars[q].ch !== "	" && chars[q].ch !== "\n" && chars[q].ch !== SEP; q++) {
+                const rr = runs[chars[q].run];
+                seg += charWidth(chars[q].ch, rr) + (prevCh ? kern(prevCh, chars[q].ch, rr) : 0);
+                prevCh = chars[q].ch;
+              }
+              tx = Math.max(x, stop.align === "right" ? stop.x - seg : stop.x - seg / 2);
+            }
+          } else tx = (Math.floor(x / TAB_INTERVAL) + 1) * TAB_INTERVAL;
+          glyphs.push({ ch, run, x, w: tx - x });
+          x = tx;
+          continue;
+        }
+        const prevGlyph = glyphs[glyphs.length - 1];
+        const kx = prevGlyph && prevGlyph.run === run && prevGlyph.ch !== "	" ? kern(prevGlyph.ch, ch, r) : 0;
+        if (prevGlyph) {
+          prevGlyph.w += kx;
+          x += kx;
+        }
+        const w = charWidth(ch, r);
+        if (ch !== " " && x + w > maxX2 + 0.01 && glyphs.some((g) => g.ch !== "	")) {
+          if (lastSpace >= 0) {
+            glyphs.length = lastSpace + 1;
+            end = k + lastSpace + 1;
+          }
+          if (prevGlyph) prevGlyph.w -= kx;
+          break;
+        }
+        glyphs.push({ ch, run, x, w });
+        x += w;
+        if (breaksAfter(ch, chars[end + 1]?.ch ?? "")) lastSpace = glyphs.length - 1;
+      }
+      if (glyphs.length === 0 && end === k && k < chars.length) {
+        const { ch, run } = chars[k];
+        glyphs.push({ ch, run, x: start, w: charWidth(ch, runs[run]) });
+        end = k + 1;
+      }
+      let asc = 0, desc = 0, lead = 0;
+      for (const g of glyphs) {
+        const [a, d, l] = metrics(g.ch, runs[g.run]);
+        asc = Math.max(asc, a);
+        desc = Math.max(desc, d);
+        lead = Math.max(lead, l);
+      }
+      if (glyphs.length === 0) [asc, desc, lead] = metrics(" ", runs[0] ?? { text: " ", size: fontSize, bold: false, italic: false, mono: false, strike: false, underline: false, alpha: 1 });
+      baseline = prev ? baseline + Math.round(prev.desc) + Math.round(prev.lead) + (firstLine ? p.spacing : 0) + Math.round(asc) : Math.round(asc);
+      if (baseline + desc > height + 0.5) return;
+      const line2 = { glyphs, asc, desc, lead, baseline, para: p, first: firstLine };
+      line2.glyphs.forEach((g) => {
+        g.r = runs[g.run];
+      });
+      lines.push(line2);
+      prev = line2;
+      firstLine = false;
+      k = end;
+      if (chars.length === 0) break;
+    }
+  });
+  return lines;
+}
+function noteMarkup(source, e) {
+  const rect2 = textRect({ x: e.x, y: e.y, width: e.width, height: e.height });
+  if (!(rect2.width > 1 && rect2.height > 1)) return "";
+  const b = new Builder(e.style.fontSize, rect2.width);
+  for (const block of parseBlocks(source)) b.block(block, { indent: 0, marker: null, quote: null, listDepth: 0 });
+  const lines = layoutLines(b.paras, rect2.width, rect2.height, e.style.fontSize);
+  const ink = color(e.style.stroke);
+  let s = "";
+  const marks = [];
+  for (const l of lines) {
+    const p = l.para;
+    if (p.quote !== null) marks.push([rect2.x + p.quote, rect2.y + l.baseline - l.asc, rect2.x + p.quote, rect2.y + l.baseline + l.desc]);
+    if (p.rule !== null) marks.push([rect2.x + p.rule, rect2.y + l.baseline - 3, rect2.x + rect2.width, rect2.y + l.baseline - 3]);
+    if (p.tableRule) {
+      const y = rect2.y + l.baseline + l.desc + 2;
+      marks.push([rect2.x + p.tableRule[0], y, Math.min(rect2.x + rect2.width, rect2.x + p.tableRule[0] + p.tableRule[1]), y]);
+    }
+    let spans = "";
+    let i = 0;
+    const gs = l.glyphs;
+    while (i < gs.length) {
+      const r = gs[i].r;
+      let j = i;
+      let text = "";
+      const font = fontOf(gs[i].ch);
+      while (j < gs.length && sameStyle(gs[j].r, r) && gs[j].ch !== "	" && fontOf(gs[j].ch) === font) {
+        text += gs[j].ch;
+        j++;
+      }
+      const shown = text.replaceAll("\n", "").replaceAll(SEP, "");
+      if (shown.trim() !== "") {
+        let a = `font-size="${fmt(r.size)}"`;
+        if (r.mono) a += ` font-family="Menlo, Consolas, monospace"`;
+        if (r.bold) a += ` font-weight="bold"`;
+        if (r.italic) a += ` font-style="italic"`;
+        if (r.underline) a += ` text-decoration="underline"`;
+        if (r.alpha < 1) a += ` fill-opacity="${fmt(r.alpha * e.style.stroke.a)}"`;
+        spans += `<tspan x="${fmt(rect2.x + gs[i].x)}" ${a}>${escapeXML(shown)}</tspan>`;
+      }
+      if (r.strike && j > i) {
+        const y = l.baseline - metrics(gs[i].ch, r)[0] * 0.32;
+        marks.push([rect2.x + gs[i].x, rect2.y + y, rect2.x + gs[j - 1].x + gs[j - 1].w, rect2.y + y]);
+      }
+      if (j === i) j++;
+      i = j;
+    }
+    if (spans) s += `<text y="${fmt(rect2.y + l.baseline)}" font-family="Helvetica Neue, Helvetica, Arial, sans-serif" fill="${ink}" xml:space="preserve">${spans}</text>
+`;
+  }
+  const width = fmt(Math.max(1, e.style.fontSize / 14));
+  for (const [x1, y1, x2, y2] of marks) {
+    s += `<line x1="${fmt(x1)}" y1="${fmt(y1)}" x2="${fmt(x2)}" y2="${fmt(y2)}" stroke="${ink}" stroke-width="${width}"/>
+`;
+  }
+  return s;
+}
+function fontOf(ch) {
+  return fallbackMetrics[ch] ? `fb:${ch}` : "";
+}
+function sameStyle(a, b) {
+  return a === b || a.size === b.size && a.bold === b.bold && a.italic === b.italic && a.mono === b.mono && a.strike === b.strike && a.underline === b.underline && a.alpha === b.alpha;
+}
+
+// src/theme.ts
+var rgb = (r, g, b) => ({ r, g, b, a: 1 });
+var themes = [
+  { id: "paper", name: "Paper", background: rgb(0.984, 0.98, 0.965), ink: rgb(0.12, 0.12, 0.13) },
+  { id: "white", name: "White", background: rgb(1, 1, 1), ink: rgb(0.12, 0.12, 0.13) },
+  { id: "sepia", name: "Sepia", background: rgb(0.953, 0.914, 0.824), ink: rgb(0.23, 0.18, 0.13) },
+  { id: "blueprint", name: "Blueprint", background: rgb(0.106, 0.227, 0.361), ink: rgb(0.91, 0.945, 0.984) },
+  { id: "chalkboard", name: "Chalkboard", background: rgb(0.169, 0.227, 0.2), ink: rgb(0.945, 0.945, 0.918) },
+  { id: "midnight", name: "Midnight", background: rgb(0.082, 0.086, 0.102), ink: rgb(0.925, 0.925, 0.94) }
+];
+function themeNamed(id) {
+  return themes.find((t) => t.id === id) ?? null;
+}
+
+// src/timeline.ts
+function applyEase(ease, u) {
+  switch (ease) {
+    case "linear":
+      return u;
+    case "easeIn":
+      return u * u * u;
+    case "easeOut":
+      return 1 - Math.pow(1 - u, 3);
+    case "easeInOut":
+      return u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2;
+    case "hold":
+      return 0;
+  }
+}
+var rem = (a, b) => a % b;
+function localTime(track, t) {
+  const reps = (track.repeats ?? []).filter(repeatIsValid).slice().sort((a, b) => a.start - b.start);
+  if (reps.length === 0) return t;
+  for (const r of reps) {
+    if (!(t >= r.end)) continue;
+    const length = r.end - r.start;
+    if (r.count === null) return r.start + rem(t - r.start, length);
+    const played = length * r.count;
+    if (t < r.start + played) return r.start + rem(t - r.start, length);
+    t -= played - length;
+  }
+  return t;
+}
+function value(track, t, get, base, lerp) {
+  t = localTime(track, t);
+  let before, after;
+  for (const k of track.keys) {
+    if (get(k) === void 0) continue;
+    if (k.t <= t) before = k;
+    else {
+      after = k;
+      break;
+    }
+  }
+  if (!before && !after) return base;
+  if (before && !after) return get(before);
+  if (!before && after) return get(after);
+  const b = before, a = after;
+  const u = a.t - b.t > 0 ? (t - b.t) / (a.t - b.t) : 1;
+  return lerp(get(b), get(a), applyEase(b.ease ?? "linear", u));
+}
+var lerpNum = (a, b, u) => a + (b - a) * u;
+var lerpColor = (a, b, u) => ({
+  r: a.r + (b.r - a.r) * u,
+  g: a.g + (b.g - a.g) * u,
+  b: a.b + (b.b - a.b) * u,
+  a: a.a + (b.a - a.a) * u
+});
+function num2(track, t, p, base) {
+  return value(track, t, (k) => k[p], base, lerpNum);
+}
+function isChanging(track, t) {
+  t = localTime(track, t);
+  const changing = (get, eq) => {
+    let b;
+    for (const k of track.keys) if (k.t <= t && get(k) !== void 0) b = k;
+    const a = track.keys.find((k) => k.t > t && get(k) !== void 0);
+    if (!b || !a) return false;
+    return b.ease !== "hold" && !eq(get(b), get(a));
+  };
+  const n = (p) => changing((k) => k[p], (a, b) => a === b);
+  return n("x") || n("y") || n("width") || n("height") || n("rotation") || n("strokeWidth") || changing((k) => k.stroke, sameColor) || changing((k) => k.fill, sameColor) || n("reveal") || n("opacity");
+}
+function isVisible(track, t) {
+  t = localTime(track, t);
+  const keyed = track.keys.filter((k) => k.visible !== void 0);
+  if (keyed.length === 0) return true;
+  let last;
+  for (const k of keyed) if (k.t <= t) last = k;
+  return last ? last.visible : !keyed[0].visible;
+}
+function applyTrack(track, e, t) {
+  e = cloneElement(e);
+  if (track.keys.some((k) => k.reveal !== void 0)) {
+    const r = num2(track, t, "reveal", e.reveal ?? 1);
+    e.reveal = r >= 1 ? null : Math.max(0, r);
+  }
+  if (track.keys.some((k) => k.opacity !== void 0)) {
+    const o = Math.min(Math.max(num2(track, t, "opacity", e.style.opacity ?? 1), 0), 1);
+    e.style.opacity = o >= 1 ? null : o;
+  }
+  if (e.kind === "connector") return e;
+  e.x = num2(track, t, "x", e.x);
+  e.y = num2(track, t, "y", e.y);
+  e.width = num2(track, t, "width", e.width);
+  e.height = num2(track, t, "height", e.height);
+  if (track.keys.some((k) => k.rotation !== void 0)) e.rotation = num2(track, t, "rotation", angle(e));
+  e.style.strokeWidth = num2(track, t, "strokeWidth", e.style.strokeWidth);
+  e.style.stroke = value(track, t, (k) => k.stroke, e.style.stroke, lerpColor);
+  e.style.fill = value(track, t, (k) => k.fill, e.style.fill, lerpColor);
+  return e;
+}
+function followSpan(track, t) {
+  t = localTime(track, t);
+  let f = null;
+  for (const s of track.follow ?? []) if (s.start <= t && (f === null || s.start > f.start)) f = s;
+  if (!f) return null;
+  const span = f;
+  if (track.keys.some((k) => k.t >= span.end && k.t <= t && (k.x !== void 0 || k.y !== void 0))) return null;
+  return f;
+}
+function tracing(e, page) {
+  if (e.kind === "connector") return new Polyline(routePoints(route(e, indexOf(page))));
+  const clean = cloneElement(e);
+  clean.style.roughness = 0;
+  const pts = outline(clean).contours()[0] ?? [];
+  return new Polyline(angle(e) === 0 ? pts : pts.map((p) => rotated(e, p)));
+}
+function following(track, e, t, page) {
+  const f = followSpan(track, t);
+  if (!f) return e;
+  t = localTime(track, t);
+  const pathElement = page.elements.find((x) => x.id === f.path);
+  if (!pathElement || pathElement.id === e.id) return e;
+  const line2 = tracing(pathElement, page);
+  const span = f.end - f.start;
+  let u = applyEase(f.ease ?? "easeInOut", span > 0 ? Math.min(1, (t - f.start) / span) : 1) * (f.laps ?? 1);
+  if (u > 1) u = rem(u, 1) === 0 ? 1 : rem(u, 1);
+  if (f.reverse === true) u = 1 - u;
+  const p = line2.point(u);
+  const moved = cloneElement(e);
+  moved.x = p.x - e.width / 2;
+  moved.y = p.y - e.height / 2;
+  if (f.orient === true) {
+    const step = f.reverse === true ? -0.01 : 0.01;
+    const a = line2.point(u - step / 2), b = line2.point(u + step / 2);
+    if (a.x !== b.x || a.y !== b.y) moved.rotation = Math.atan2(b.y - a.y, b.x - a.x);
+  }
+  return moved;
+}
+function trackMap(tl) {
+  const m = /* @__PURE__ */ new Map();
+  for (const t of tl.tracks) if (!m.has(t.element)) m.set(t.element, t);
+  return m;
+}
+function resolved(page, t) {
+  const timeline = page.timeline;
+  if (!timeline) return page;
+  t = clampTime(t);
+  const tracks = trackMap(timeline);
+  const reseed = timeline.boil === null ? null : Math.trunc(Math.floor(t * clampFPS(timeline.fps) + 1e-9) / Math.max(1, timeline.boil)) % BOIL_DRAWINGS >>> 0;
+  const hidden = /* @__PURE__ */ new Set();
+  for (const tr of tracks.values()) if (!isVisible(tr, t)) hidden.add(tr.element);
+  let moving = null;
+  if (timeline.settle === true) {
+    moving = /* @__PURE__ */ new Set();
+    for (const tr of tracks.values()) if (isChanging(tr, t)) moving.add(tr.element);
+  }
+  const boils = (e) => {
+    const override = tracks.get(e.id)?.boil;
+    if (override !== void 0 && override !== null) return override;
+    if (!moving) return true;
+    if (e.connector) return [e.connector.start.elementID, e.connector.end.elementID].some((id) => id !== null && moving.has(id));
+    return moving.has(e.id);
+  };
+  let elements = page.elements.map((e) => {
+    const track = tracks.get(e.id);
+    let out = track ? applyTrack(track, e, t) : e;
+    if (reseed !== null && reseed > 0 && boils(e)) {
+      if (out === e) out = cloneElement(e);
+      out.seed = boiled(e.seed, reseed);
+    }
+    return out;
+  });
+  elements = elements.map((e, i) => hidden.has(e.id) ? page.elements[i] : e);
+  const posed = { ...page, elements, timeline: null };
+  elements = elements.map((e) => {
+    const track = tracks.get(e.id);
+    return track ? following(track, e, t, posed) : e;
+  });
+  const current = { ...page, elements, timeline: null };
+  const index = indexOf(current);
+  const gone = new Set(hidden);
+  elements = elements.map((e) => {
+    const c = e.connector;
+    if (!c || ![c.start.elementID, c.end.elementID].some((id) => id !== null && hidden.has(id))) return e;
+    if (!(tracks.get(e.id)?.keys.some((k) => k.visible !== void 0) ?? false)) {
+      gone.add(e.id);
+      return e;
+    }
+    const [a, b] = endpoints(e, index);
+    const pinned = cloneElement(e);
+    pinned.connector.start = { elementID: null, port: c.start.port, x: a.x, y: a.y };
+    pinned.connector.end = { elementID: null, port: c.end.port, x: b.x, y: b.y };
+    return pinned;
+  });
+  return { ...page, elements: elements.filter((e) => !gone.has(e.id)), timeline: null };
+}
+function posterTime(page) {
+  return page.timeline ? page.timeline.poster ?? page.timeline.duration : 0;
+}
+function still(page) {
+  return page.timeline ? resolved(page, posterTime(page)) : page;
+}
+function cameraRect(tl, t) {
+  const keys = tl.camera ?? [];
+  if (keys.length === 0) return null;
+  let before;
+  for (const k of keys) if (k.t <= t) before = k;
+  const after = keys.find((k) => k.t > t);
+  if (!before) return rectOf(keys[0]);
+  if (!after) return rectOf(before);
+  const u = applyEase(before.ease ?? "easeInOut", (t - before.t) / Math.max(after.t - before.t, 1e-9));
+  const mix2 = (p, q) => p + (q - p) * u;
+  return { x: mix2(before.x, after.x), y: mix2(before.y, after.y), width: mix2(before.width, after.width), height: mix2(before.height, after.height) };
+}
+var rectOf = (k) => ({ x: k.x, y: k.y, width: k.width, height: k.height });
+function cameraView(tl, t) {
+  const first = tl.camera?.[0];
+  const r = cameraRect(tl, t);
+  if (!first || !r || !(r.width > 0 && r.height > 0)) return null;
+  return fit(r, first.width / first.height);
+}
+function fit(r, aspect) {
+  if (!(r.width > 0 && r.height > 0 && aspect > 0)) return r;
+  let w = r.width, h = r.height;
+  if (r.width / r.height < aspect) w = r.height * aspect;
+  else h = r.width / aspect;
+  return { x: r.x + r.width / 2 - w / 2, y: r.y + r.height / 2 - h / 2, width: w, height: h };
+}
+function frameCount(tl) {
+  return Math.max(1, Math.ceil(clampTime(tl.duration) * clampFPS(tl.fps)));
+}
+function frameTimes(tl) {
+  const fps = clampFPS(tl.fps);
+  const times = [];
+  for (let i = 0; i < frameCount(tl); i++) times.push(i / fps);
+  const last = times[times.length - 1];
+  if (tl.duration - last > 1e-6) times.push(tl.duration);
+  return times;
+}
+function sceneAt(tl, t) {
+  let s = -1;
+  (tl.markers ?? []).forEach((m, i) => {
+    if (m.t <= t) s = i;
+  });
+  return s;
+}
+function transientElements(page) {
+  const tl = page.timeline;
+  if (!tl) return /* @__PURE__ */ new Set();
+  const end = tl.poster ?? tl.duration;
+  return new Set(tl.tracks.filter((tr) => !isVisible(tr, 0) && !isVisible(tr, end)).map((tr) => tr.element));
+}
+
+// src/svg.ts
+function bounds(page, padding = 24) {
+  const index = indexOf(page);
+  const box = (e) => {
+    if (e.kind === "connector") return connectorBounds(e, index);
+    const reach = isFloor(e) ? (BAND + 0.25) * cellSize(e) : 0;
+    return inset(rotatedBounds(e), -reach, -reach);
+  };
+  if (page.elements.length === 0) return { x: 0, y: 0, width: 200, height: 200 };
+  let r = null;
+  for (const e of page.elements) r = union(r, box(e));
+  return inset(r, -padding, -padding);
+}
+function plan(page) {
+  const tl = page.timeline ?? { fps: 12, duration: 0, boil: null, settle: null, poster: null, tracks: [], camera: null, markers: null };
+  const times = frameTimes(tl);
+  const first = tl.camera?.find((k) => k.width > 1 && k.height > 1);
+  if (first) {
+    const aspect = first.width / first.height;
+    const rects = times.map((t) => cameraView(tl, t) ?? { x: first.x, y: first.y, width: first.width, height: first.height });
+    const width = Math.min(Math.max(...rects.map((r) => r.width)), 4096);
+    return { times, rects, size: { width, height: width / aspect } };
+  }
+  let b = null;
+  for (const t of times) {
+    const f = resolved(page, t);
+    if (f.elements.length > 0) b = union(b, bounds(f));
+  }
+  if (!b) b = bounds(resolved(page, times[0]));
+  return { times, rects: times.map(() => b), size: { width: b.width, height: b.height } };
+}
+var opacity = (c, attr) => c.a < 1 ? ` ${attr}="${fmt(c.a)}"` : "";
+function svgOpen(b, background, paint) {
+  let out = `<svg xmlns="http://www.w3.org/2000/svg" width="${fmt(b.width)}" height="${fmt(b.height)}" viewBox="${fmt(b.x)} ${fmt(b.y)} ${fmt(b.width)} ${fmt(b.height)}">
+`;
+  if (paint && background) {
+    out += `<rect x="${fmt(b.x)}" y="${fmt(b.y)}" width="${fmt(b.width)}" height="${fmt(b.height)}" fill="${color(background)}"/>
+`;
+  }
+  return out;
+}
+function svgParts(page, background, fixed) {
+  const theme = themeNamed(page.theme);
+  const bg = background ? theme?.background ?? background : null;
+  const ink = theme?.ink ?? black;
+  const d = { ...page, elements: page.elements.map((e) => resolvingInk(e, ink)) };
+  const b = fixed ?? bounds(d);
+  const visible = new Set(d.layers.filter((l) => l.visible).map((l) => l.id));
+  const parts = [];
+  const index = indexOf(d);
+  const ordered = orderedElements(d);
+  const floors = ordered.filter((e) => visible.has(e.layerID) && isFloor(e));
+  const rockMarkup = rock(floors).map((r) => `<path d="${r.path.data()}" fill="none" stroke="${color(r.ink)}"${opacity(r.ink, "stroke-opacity")} stroke-width="${fmt(r.width)}" stroke-linecap="round"/>
+`).join("");
+  if (rockMarkup) parts.push({ key: "rock", markup: rockMarkup });
+  for (const e of ordered) {
+    if (!visible.has(e.layerID)) continue;
+    const alpha = Math.min(Math.max(e.style.opacity ?? 1, 0), 1);
+    if (alpha <= 0) continue;
+    let body = svgElement(e, index, bg);
+    if (angle(e) !== 0 && e.kind !== "connector") {
+      body = `<g transform="rotate(${fmt(angle(e) * 180 / Math.PI)} ${fmt(midX(frame(e)))} ${fmt(midY(frame(e)))})">
+${body}</g>
+`;
+    }
+    parts.push({ key: e.id, markup: alpha < 1 ? `<g opacity="${fmt(alpha)}">
+${body}</g>
+` : body });
+  }
+  return { bounds: b, parts };
+}
+function svg(page, background = { r: 1, g: 1, b: 1, a: 1 }, fixed) {
+  const { bounds: b, parts } = svgParts(page, background, fixed);
+  return svgOpen(b, themeNamed(page.theme)?.background ?? background, background !== null) + parts.map((p) => p.markup).join("") + "</svg>\n";
+}
+function labelRect(e, index) {
+  const m = midpoint(e, index);
+  const text = e.text ?? "";
+  const size = textSize(text === "" ? "Label" : text, e.style.fontSize, 200);
+  const w = Math.max(size.width + 12, 44), h = size.height + 6;
+  return { x: m.x - w / 2, y: m.y - h / 2, width: w, height: h };
+}
+function typed(s, progress) {
+  const chars = [...s];
+  return chars.slice(0, Math.floor(chars.length * progress)).join("");
+}
+function revealProgress(e) {
+  return e.reveal !== null && e.reveal < 1 ? Math.max(0, e.reveal) : null;
+}
+function svgElement(e, index, labelBackground) {
+  const stroke = color(e.style.stroke);
+  let strokeAttrs = `stroke="${stroke}" stroke-width="${fmt(e.style.strokeWidth)}" stroke-linecap="round" stroke-linejoin="round"`;
+  const dash = dashPattern(e.style.dash, e.style.strokeWidth);
+  if (dash) strokeAttrs += ` stroke-dasharray="${dash.map(fmt).join(" ")}"`;
+  let text = e.text;
+  const r = revealProgress(e);
+  if (r !== null) {
+    if (e.kind === "text") text = typed(text ?? "", r);
+    else if (e.kind === "connector") {
+      return `<path d="${connectorParts(e, index)[0].trimmed(r).data()}" fill="none" ${strokeAttrs}/>
+`;
+    } else {
+      return `<path d="${outline(e).trimmed(r).data()}" fill="none" ${strokeAttrs}/>
+`;
+    }
+  }
+  switch (e.kind) {
+    case "connector": {
+      const [line2, filled] = connectorParts(e, index);
+      let s = `<path d="${line2.data()}" fill="none" ${strokeAttrs}/>
+`;
+      if (!filled.isEmpty) s += `<path d="${filled.data()}" fill="${stroke}" stroke="none"/>
+`;
+      if (text) {
+        const lr = labelRect(e, index);
+        if (labelBackground) s += `<rect x="${fmt(lr.x)}" y="${fmt(lr.y)}" width="${fmt(lr.width)}" height="${fmt(lr.height)}" fill="${color(labelBackground)}"/>
+`;
+        s += textElement(text, lr, e, true);
+      }
+      return s;
+    }
+    case "text":
+      return textElement(text ?? "", frame(e), e, false);
+    case "image": {
+      const f = frame(e);
+      let s = "";
+      if (e.image) {
+        const mime = e.image.format === "jpeg" ? "image/jpeg" : "image/png";
+        s += `<image x="${fmt(f.x)}" y="${fmt(f.y)}" width="${fmt(f.width)}" height="${fmt(f.height)}" preserveAspectRatio="none" href="data:${mime};base64,${e.image.data}"/>
+`;
+      }
+      if (e.style.stroke.a > 0 && e.style.strokeWidth > 0) s += `<path d="${outline(e).data()}" fill="none" ${strokeAttrs}/>
+`;
+      return s;
+    }
+    case "freehand":
+      return `<path d="${outline(e).data()}" fill="none" ${strokeAttrs}/>
+`;
+    case "rectangle":
+    case "ellipse":
+    case "diamond":
+    case "path":
+    case "note": {
+      let s = "";
+      if (e.kind === "note" && e.style.fill.a > 0) {
+        s += `<path d="${fillPath(e).translated(2, 3).data()}" fill="#000000" fill-opacity="${fmt(0.14 * e.style.fill.a)}" stroke="none"/>
+`;
+      }
+      if (e.style.fill.a > 0) {
+        const rule = e.evenOdd === true ? ` fill-rule="evenodd"` : "";
+        if (e.style.fillStyle === "solid") {
+          s += `<path d="${fillPath(e).data()}" fill="${color(e.style.fill)}"${opacity(e.style.fill, "fill-opacity")}${rule} stroke="none"/>
+`;
+        } else if (e.style.fillStyle === "grid") {
+          const line2 = lineColor(e.style.fill);
+          s += `<path d="${fillPath(e).data()}" fill="${color(e.style.fill)}"${opacity(e.style.fill, "fill-opacity")}${rule} stroke="none"/>
+`;
+          s += `<path d="${hachurePath(e).data()}" fill="none" stroke="${color(line2)}"${opacity(line2, "stroke-opacity")} stroke-width="1" stroke-linecap="round"/>
+`;
+        } else {
+          s += `<path d="${hachurePath(e).data()}" fill="none" stroke="${color(e.style.fill)}"${opacity(e.style.fill, "stroke-opacity")} stroke-width="${fmt(Math.max(1, e.style.strokeWidth / 2))}" stroke-linecap="round"/>
+`;
+        }
+      }
+      s += `<path d="${outline(e).data()}" fill="none" ${strokeAttrs}/>
+`;
+      if (text) s += e.kind === "note" ? noteMarkup(text, e) : textElement(text, frame(e), e, true);
+      return s;
+    }
+    default:
+      return placeholder(e, strokeAttrs);
+  }
+}
+function placeholder(e, strokeAttrs) {
+  const f = frame(e);
+  const p = Path.rect(f).moveTo({ x: f.x, y: f.y }).lineTo({ x: f.x + f.width, y: f.y + f.height });
+  return `<path d="${p.data()}" fill="none" ${strokeAttrs} stroke-opacity="0.5" stroke-dasharray="6 4"/>
+` + textElement(`${e.kind}${e.text ? `: ${e.text}` : ""}`, f, { ...e, style: { ...e.style, fontSize: Math.min(e.style.fontSize, 12) } }, true);
+}
+function textElement(text, f, e, centered) {
+  const size = e.style.fontSize;
+  const lines = text.split("\n");
+  const lineHeight = size * 1.2;
+  const total = lineHeight * lines.length;
+  const x = centered ? midX(f) : f.x;
+  const top = centered ? midY(f) - total / 2 : f.y;
+  let s = `<text x="${fmt(x)}" font-family="Helvetica Neue, Helvetica, Arial, sans-serif" font-size="${fmt(size)}" fill="${color(e.style.stroke)}"${centered ? ` text-anchor="middle"` : ""}>`;
+  lines.forEach((line2, i) => {
+    s += `<tspan x="${fmt(x)}" y="${fmt(top + lineHeight * (i + 0.8))}">${escapeXML(line2)}</tspan>`;
+  });
+  return s + "</text>\n";
+}
+
+// src/player.ts
+var WHITE = { r: 1, g: 1, b: 1, a: 1 };
+function pageIndex(file, spec) {
+  const s = (spec ?? "").trim();
+  if (!s) return 0;
+  const byName = file.pages.findIndex((p) => p.name.toLowerCase() === s.toLowerCase());
+  if (byName >= 0) return byName;
+  const n = Number(s);
+  return Number.isInteger(n) && n >= 1 && n <= file.pages.length ? n - 1 : 0;
+}
+function withRoughness(page, roughness) {
+  return { ...page, elements: page.elements.map((e) => ({ ...e, style: { ...e.style, roughness } })) };
+}
+var STYLE = `
+:host { display: block; position: relative; color: var(--dottie-ink); background: var(--dottie-page);
+  font: 14px -apple-system, system-ui, sans-serif; border-radius: var(--dottie-radius, 0); }
+:host([hidden]) { display: none; }
+.stage { display: block; width: 100%; height: auto; }
+.stage svg { display: block; width: 100%; height: auto; margin: 0 auto; }
+.bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px 12px; max-width: 560px; margin: 0 auto; box-sizing: border-box; }
+.bar[hidden] { display: none; }
+button { font: inherit; color: inherit; background: none; border: 1.5px solid currentColor; border-radius: 6px;
+  width: 34px; height: 30px; cursor: pointer; flex: none; padding: 0; }
+button:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+input[type=range] { flex: 1; min-width: 60px; accent-color: currentColor; }
+output { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
+.scene { min-width: 0; flex: 0 1 auto; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.error { padding: 16px; font-family: ui-monospace, Menlo, monospace; white-space: pre-wrap; }
+`;
+var Playback = class {
+  constructor(page, into, options = {}) {
+    __publicField(this, "page");
+    __publicField(this, "plan");
+    __publicField(this, "scenes");
+    __publicField(this, "sceneNames");
+    __publicField(this, "background");
+    __publicField(this, "ink");
+    __publicField(this, "svg");
+    __publicField(this, "groups", /* @__PURE__ */ new Map());
+    __publicField(this, "order", []);
+    __publicField(this, "frame", -1);
+    __publicField(this, "onFrame", null);
+    this.page = options.clean ? withRoughness(page, 0) : page;
+    this.plan = plan(this.page);
+    const near = (t) => {
+      let best = 0;
+      this.plan.times.forEach((x, i) => {
+        if (Math.abs(x - t) < Math.abs(this.plan.times[best] - t)) best = i;
+      });
+      return best;
+    };
+    this.scenes = (page.timeline?.markers ?? []).map((m) => near(m.t));
+    this.sceneNames = (page.timeline?.markers ?? []).map((m) => m.name);
+    const theme = themeNamed(page.theme);
+    this.background = theme?.background ?? WHITE;
+    this.ink = theme?.ink ?? { r: 0.12, g: 0.12, b: 0.13, a: 1 };
+    const ns = "http://www.w3.org/2000/svg";
+    this.svg = document.createElementNS(ns, "svg");
+    this.svg.setAttribute("width", fmt(this.plan.size.width));
+    this.svg.setAttribute("height", fmt(this.plan.size.height));
+    this.svg.style.maxWidth = `${Math.ceil(this.plan.size.width)}px`;
+    into.replaceChildren(this.svg);
+  }
+  get frameCount() {
+    return this.plan.times.length;
+  }
+  get posterFrame() {
+    const t = posterTime(this.page);
+    let best = 0;
+    this.plan.times.forEach((x, i) => {
+      if (Math.abs(x - t) < Math.abs(this.plan.times[best] - t)) best = i;
+    });
+    return best;
+  }
+  /** Draws frame `i`, replacing only the pieces whose markup changed since the last frame. */
+  show(i) {
+    const n = this.frameCount;
+    i = (i % n + n) % n;
+    this.drawAt(this.plan.times[i], i);
+    this.frame = i;
+    this.onFrame?.(i);
+  }
+  /** Draws the moment `t` (seconds) in the frame-`i` view. */
+  drawAt(t, i = 0) {
+    const r = this.plan.rects[Math.min(i, this.plan.rects.length - 1)];
+    const { parts } = svgParts(resolved(this.page, t), this.background, r);
+    this.svg.setAttribute("viewBox", `${fmt(r.x)} ${fmt(r.y)} ${fmt(r.width)} ${fmt(r.height)}`);
+    const ns = "http://www.w3.org/2000/svg";
+    const keys = parts.map((p) => p.key);
+    for (const p of parts) {
+      const have = this.groups.get(p.key);
+      if (have) {
+        if (have.markup !== p.markup) {
+          have.g.innerHTML = p.markup;
+          have.markup = p.markup;
+        }
+      } else {
+        const g = document.createElementNS(ns, "g");
+        g.innerHTML = p.markup;
+        this.groups.set(p.key, { g, markup: p.markup });
+      }
+    }
+    const live = new Set(keys);
+    for (const [k, v] of this.groups) if (!live.has(k)) {
+      v.g.remove();
+      this.groups.delete(k);
+    }
+    if (keys.length !== this.order.length || keys.some((k, j) => k !== this.order[j])) {
+      this.svg.replaceChildren(...keys.map((k) => this.groups.get(k).g));
+      this.order = keys;
+    }
+  }
+  /** The scene frame `i` is in, or -1 before the first. */
+  sceneAt(i) {
+    let s = -1;
+    this.scenes.forEach((f, j) => {
+      if (f <= i) s = j;
+    });
+    return s;
+  }
+};
+var ElementBase = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var DottiePlayer = class extends ElementBase {
+  constructor() {
+    super();
+    __publicField(this, "file", null);
+    __publicField(this, "playback", null);
+    __publicField(this, "root");
+    __publicField(this, "stage");
+    __publicField(this, "bar");
+    __publicField(this, "playButton");
+    __publicField(this, "scrub");
+    __publicField(this, "time");
+    __publicField(this, "sceneLabel");
+    __publicField(this, "prev");
+    __publicField(this, "next");
+    __publicField(this, "playing", false);
+    __publicField(this, "last", 0);
+    __publicField(this, "acc", 0);
+    __publicField(this, "raf", 0);
+    __publicField(this, "loadToken", 0);
+    __publicField(this, "visible", true);
+    __publicField(this, "observer", null);
+    this.root = this.attachShadow({ mode: "open" });
+    this.root.innerHTML = `<style>${STYLE}</style><div class="stage" part="stage" role="img"></div>
+<div class="bar" part="controls" hidden>
+<button class="play" aria-label="Play">\u25B6</button>
+<button class="prev" aria-label="Previous scene" hidden>\u23EE</button>
+<output class="scene" hidden></output>
+<button class="next" aria-label="Next scene" hidden>\u23ED</button>
+<input class="scrub" type="range" min="0" max="0" value="0" aria-label="Frame">
+<output class="time">0.0s</output>
+</div>`;
+    const q = (s) => this.root.querySelector(s);
+    this.stage = q(".stage");
+    this.bar = q(".bar");
+    this.playButton = q(".play");
+    this.scrub = q(".scrub");
+    this.time = q(".time");
+    this.sceneLabel = q(".scene");
+    this.prev = q(".prev");
+    this.next = q(".next");
+    this.playButton.onclick = () => {
+      const p = this.playback;
+      if (p && !this.playing && p.scenes.length && p.frame >= p.frameCount - 1) p.show(0);
+      this.setPlaying(!this.playing);
+    };
+    this.scrub.oninput = () => {
+      this.setPlaying(false);
+      this.playback?.show(Number(this.scrub.value));
+    };
+    this.next.onclick = () => this.nextScene();
+    this.prev.onclick = () => this.prevScene();
+    this.addEventListener("keydown", (e) => this.key(e));
+  }
+  connectedCallback() {
+    if (!this.hasAttribute("tabindex")) this.tabIndex = 0;
+    if ("IntersectionObserver" in window) {
+      this.observer = new IntersectionObserver((entries) => {
+        this.visible = entries.some((e) => e.isIntersecting);
+        this.schedule();
+      });
+      this.observer.observe(this);
+    }
+    void this.load();
+  }
+  disconnectedCallback() {
+    cancelAnimationFrame(this.raf);
+    this.raf = 0;
+    this.observer?.disconnect();
+  }
+  attributeChangedCallback(name, old, value2) {
+    if (old === value2 || !this.isConnected) return;
+    if (name === "src") void this.load();
+    else if (name === "label") this.stage.setAttribute("aria-label", value2 ?? "");
+    else if (this.file) this.mount();
+  }
+  /** Loads from `src`, or from an inline JSON script child. */
+  async load() {
+    const token = ++this.loadToken;
+    try {
+      let text;
+      const src = this.getAttribute("src");
+      if (src) {
+        const res = await fetch(src);
+        if (!res.ok) throw new Error(`${src}: ${res.status} ${res.statusText}`);
+        text = await res.text();
+      } else {
+        const inline2 = this.querySelector('script[type="application/json"], script[type="application/vnd.dottie+json"]');
+        if (!inline2) return;
+        text = inline2.textContent ?? "";
+      }
+      if (token !== this.loadToken) return;
+      this.setFile(parseDottie(text));
+    } catch (err) {
+      if (token !== this.loadToken) return;
+      this.stage.innerHTML = "";
+      const box = document.createElement("div");
+      box.className = "error";
+      box.textContent = `Couldn't show this drawing: ${err.message}`;
+      this.stage.append(box);
+      this.dispatchEvent(new CustomEvent("error", { detail: err }));
+    }
+  }
+  /** Shows an already-parsed file. */
+  setFile(file) {
+    this.file = file;
+    for (const w of file.warnings) console.warn(`dottie-player: ${w}`);
+    this.mount();
+    this.dispatchEvent(new CustomEvent("load", { detail: { file } }));
+  }
+  mount() {
+    const file = this.file;
+    const page = file.pages[pageIndex(file, this.getAttribute("page"))];
+    const p = new Playback(page, this.stage, { clean: this.hasAttribute("clean") });
+    this.playback = p;
+    this.style.setProperty("--dottie-page", color(p.background));
+    this.style.setProperty("--dottie-ink", color(p.ink));
+    this.style.colorScheme = luminance(p.background) < 0.5 ? "dark" : "light";
+    this.stage.setAttribute("aria-label", this.getAttribute("label") ?? page.name);
+    const at = this.getAttribute("at");
+    const animated = page.timeline !== null && p.frameCount > 1 && at === null;
+    this.bar.hidden = !animated || this.hasAttribute("no-controls");
+    const scenes = p.scenes.length > 0;
+    this.prev.hidden = this.next.hidden = this.sceneLabel.hidden = !scenes;
+    this.scrub.max = String(p.frameCount - 1);
+    p.onFrame = (i) => {
+      this.scrub.value = String(i);
+      this.time.textContent = `${p.plan.times[i].toFixed(1)}s`;
+      if (scenes) {
+        const s = p.sceneAt(i);
+        this.sceneLabel.textContent = s < 0 ? "" : p.sceneNames[s];
+      }
+      this.dispatchEvent(new CustomEvent("frame", { detail: { frame: i, time: p.plan.times[i] } }));
+    };
+    if (!animated) {
+      p.drawAt(at !== null ? Number(at) || 0 : posterTime(page), at !== null ? nearest(p, Number(at) || 0) : p.posterFrame);
+      this.setPlaying(false);
+      return;
+    }
+    p.show(0);
+    const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduced) {
+      p.show(p.posterFrame);
+      this.setPlaying(false);
+      return;
+    }
+    this.setPlaying(!this.hasAttribute("no-autoplay") && !p.scenes.includes(0));
+  }
+  // MARK: Playback
+  get paused() {
+    return !this.playing;
+  }
+  get currentTime() {
+    const p = this.playback;
+    return p && p.frame >= 0 ? p.plan.times[p.frame] : 0;
+  }
+  set currentTime(t) {
+    const p = this.playback;
+    if (p) {
+      this.setPlaying(false);
+      p.show(nearest(p, t));
+    }
+  }
+  get duration() {
+    return this.playback?.page.timeline?.duration ?? 0;
+  }
+  play() {
+    this.setPlaying(true);
+  }
+  pause() {
+    this.setPlaying(false);
+  }
+  /** Plays on to the next scene (from the start after the last). */
+  nextScene() {
+    const p = this.playback;
+    if (!p) return;
+    if (p.frame >= p.frameCount - 1) p.show(0);
+    this.setPlaying(true);
+  }
+  /** Back to the start of this scene, or the one before if already there. */
+  prevScene() {
+    const p = this.playback;
+    if (!p) return;
+    let s = p.sceneAt(p.frame);
+    if (s >= 0 && p.scenes[s] === p.frame) s -= 1;
+    this.setPlaying(false);
+    p.show(s >= 0 ? p.scenes[s] : 0);
+  }
+  setPlaying(on) {
+    const p = this.playback;
+    this.playing = on && !!p && p.frameCount > 1 && p.page.timeline !== null;
+    this.playButton.textContent = this.playing ? "\u275A\u275A" : "\u25B6";
+    this.playButton.setAttribute("aria-label", this.playing ? "Pause" : "Play");
+    this.last = 0;
+    this.acc = 0;
+    this.schedule();
+  }
+  schedule() {
+    if (this.playing && this.visible && !this.raf && this.isConnected) this.raf = requestAnimationFrame((now) => this.tick(now));
+  }
+  /** Steps whole frames at the timeline's rate; with scenes, playing stops at each one and at the end. */
+  tick(now) {
+    this.raf = 0;
+    const p = this.playback;
+    if (!this.playing || !p) return;
+    const step = 1e3 / (p.page.timeline?.fps ?? 12);
+    if (this.last) this.acc += Math.min(now - this.last, 1e3);
+    this.last = now;
+    let advanced = false;
+    while (this.playing && this.acc >= step) {
+      this.acc -= step;
+      const next = p.frame + 1;
+      if (next >= p.frameCount && (p.scenes.length || this.hasAttribute("no-loop"))) {
+        this.setPlaying(false);
+        break;
+      }
+      p.frame = next % p.frameCount;
+      advanced = true;
+      if (p.scenes.includes(p.frame)) {
+        this.setPlaying(false);
+        break;
+      }
+    }
+    if (advanced) p.show(p.frame);
+    if (this.playing && !this.visible) this.last = 0;
+    this.schedule();
+  }
+  key(e) {
+    const p = this.playback;
+    if (!p || p.page.timeline === null || p.frameCount <= 1 || this.hasAttribute("at")) return;
+    if (e.target === this.scrub && e.key !== " ") return;
+    const scenes = p.scenes.length > 0;
+    let handled = true;
+    if (e.key === " ") scenes ? this.playing ? this.setPlaying(false) : this.nextScene() : this.setPlaying(!this.playing);
+    else if (e.key === "ArrowRight") {
+      if (scenes) this.nextScene();
+      else {
+        this.setPlaying(false);
+        p.show(p.frame + 1);
+      }
+    } else if (e.key === "ArrowLeft") {
+      if (scenes) this.prevScene();
+      else {
+        this.setPlaying(false);
+        p.show(p.frame - 1);
+      }
+    } else if (e.key === ".") {
+      this.setPlaying(false);
+      p.show(p.frame + 1);
+    } else if (e.key === ",") {
+      this.setPlaying(false);
+      p.show(p.frame - 1);
+    } else handled = false;
+    if (handled) e.preventDefault();
+  }
+};
+__publicField(DottiePlayer, "observedAttributes", ["src", "page", "at", "clean", "no-controls", "label"]);
+function nearest(p, t) {
+  let best = 0;
+  p.plan.times.forEach((x, i) => {
+    if (Math.abs(x - t) < Math.abs(p.plan.times[best] - t)) best = i;
+  });
+  return best;
+}
+function definePlayer(tag = "dottie-player") {
+  if (typeof customElements !== "undefined" && !customElements.get(tag)) customElements.define(tag, class extends DottiePlayer {
+  });
+}
+
+// src/inspect.ts
+var r4 = (v) => {
+  const r = roundHalfAway(v * 1e4) / 1e4;
+  return r === 0 ? 0 : r;
+};
+var pt = (p) => [r4(p.x), r4(p.y)];
+var rect = (r) => [r4(r.x), r4(r.y), r4(r.width), r4(r.height)];
+var rgba2 = (c) => [r4(c.r), r4(c.g), r4(c.b), r4(c.a)];
+function sampleTimes(page) {
+  const tl = page.timeline;
+  if (!tl) return [0];
+  const d = tl.duration;
+  const times = [0, d];
+  for (let i = 1; i < 16; i++) times.push(d * (i + 0.37) / 16);
+  for (const m of tl.markers ?? []) times.push(m.t);
+  if (tl.poster !== null) times.push(tl.poster);
+  return [...new Set(times.map(r4))].filter((t) => t >= 0 && t <= d).sort((a, b) => a - b);
+}
+function inspectFrame(page, t) {
+  const f = resolved(page, t);
+  const index = indexOf(f);
+  const visible = new Set(f.layers.filter((l) => l.visible).map((l) => l.id));
+  const out = { t: r4(t) };
+  const tl = page.timeline;
+  if (tl) {
+    const v = cameraView(tl, t);
+    out.view = v ? rect(v) : null;
+    let scene = -1;
+    (tl.markers ?? []).forEach((m, i) => {
+      if (m.t <= t) scene = i;
+    });
+    out.scene = scene;
+  }
+  if (!tl?.camera?.length) out.bounds = rect(bounds(f));
+  out.elements = orderedElements(f).map((e, z) => {
+    const d = { id: e.id, kind: e.kind, z, seed: e.seed, frame: rect({ x: e.x, y: e.y, width: e.width, height: e.height }) };
+    if (!visible.has(e.layerID)) d.hiddenLayer = true;
+    if (e.rotation !== null) d.rotation = r4(e.rotation);
+    if (e.style.opacity !== null) d.opacity = r4(e.style.opacity);
+    if (e.reveal !== null) d.reveal = r4(e.reveal);
+    d.strokeWidth = r4(e.style.strokeWidth);
+    d.stroke = rgba2(e.style.stroke);
+    d.fill = rgba2(e.style.fill);
+    if (e.kind === "connector") {
+      const [a, b] = endpoints(e, index);
+      d.start = pt(a);
+      d.end = pt(b);
+      d.route = routePoints(route(e, index)).map(pt);
+    }
+    return d;
+  });
+  return out;
+}
+function inspectPage(page, n, times) {
+  const out = { page: n + 1, name: page.name, id: page.id };
+  const tl = page.timeline;
+  if (tl) {
+    const p = plan(page);
+    out.duration = r4(tl.duration);
+    out.fps = r4(tl.fps);
+    out.frameCount = p.times.length;
+    out.poster = r4(tl.poster ?? tl.duration);
+    out.size = [r4(p.size.width), r4(p.size.height)];
+    if (!tl.camera?.length) out.bounds = rect(p.rects[0]);
+    out.markers = (tl.markers ?? []).map((m) => ({ t: r4(m.t), name: m.name }));
+  } else {
+    out.bounds = rect(bounds(page));
+  }
+  out.frames = times.map((t) => inspectFrame(page, t));
+  return out;
+}
+function inspect(file, times) {
+  return { version: file.version, pages: file.pages.map((p, i) => inspectPage(p, i, times ?? sampleTimes(p))) };
+}
+
+// src/index.ts
+function render(source, options = {}) {
+  const file = isFile(source) ? source : parseDottie(source);
+  let page = file.pages[pageIndex(file, options.page === void 0 ? null : String(options.page))];
+  page = resolved(page, options.at ?? posterTime(page));
+  if (options.clean) page = withRoughness(page, 0);
+  return svg(page, options.background === void 0 ? { r: 1, g: 1, b: 1, a: 1 } : options.background);
+}
+function isFile(v) {
+  return typeof v === "object" && v !== null && Array.isArray(v.pages) && Array.isArray(v.warnings);
+}
+var VERSION = "0.1.0";
+
+// src/player-entry.ts
+definePlayer();
+globalThis.Dottie ?? (globalThis.Dottie = index_exports);
+export {
+  BOIL_DRAWINGS,
+  DottieFormatError,
+  DottiePlayer,
+  KINDS,
+  KNOWN_FIELDS,
+  MAX_DURATION,
+  Playback,
+  SUPPORTED_VERSION,
+  VERSION,
+  black,
+  bounds,
+  cameraView,
+  clampFPS,
+  clampTime,
+  clear,
+  cloneElement,
+  definePlayer,
+  elementIndex,
+  frameTimes,
+  inkOnDark,
+  inspect,
+  inspectFrame,
+  inspectPage,
+  isAutomaticInk,
+  luminance,
+  orderedElements,
+  pageIndex,
+  parseDottie,
+  plan,
+  posterTime,
+  render,
+  repeatIsValid,
+  resolved,
+  sameColor,
+  sampleTimes,
+  sceneAt,
+  stableSortBy,
+  still,
+  svg,
+  svgParts,
+  themeNamed,
+  themes,
+  transientElements,
+  withRoughness
+};