@phin-tech/dottie 0.3.0 → 0.5.1

package/dist/dottie.js

@@ -1,15 +1,16 @@
-/*! dottie.js 0.3.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.5.1 | 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 __publicField = (obj, key, value2) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value2);
 
 // src/model.ts
 var SUPPORTED_VERSION = 2;
-var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image"];
+var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image", "symbol"];
 var EASES = ["linear", "easeIn", "easeOut", "easeInOut", "hold", "spring", "bounce", "elastic"];
 var KNOWN_FIELDS = {
   file: ["version", "pages", "images"],
-  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline"],
+  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols"],
+  symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
   style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "gridSize", "opacity", "dashOffset"],
@@ -33,6 +34,11 @@ var KNOWN_FIELDS = {
     "rotation",
     "link",
     "anchor",
+    "click",
+    "hover",
+    "symbol",
+    "playback",
+    "offset",
     "image",
     "reveal"
   ],
@@ -47,7 +53,9 @@ var KNOWN_FIELDS = {
   follow: ["path", "start", "end", "ease", "reverse", "orient", "laps"],
   repeat: ["start", "end", "count"],
   cameraKey: ["t", "x", "y", "width", "height", "ease"],
-  marker: ["t", "name"]
+  marker: ["t", "name"],
+  click: ["scene", "url"],
+  hover: ["stroke", "fill", "opacity"]
 };
 var MAX_DURATION = 3600;
 var MAX_MARCH = 1e4;
@@ -70,6 +78,11 @@ function clampTime(t) {
 function clampFPS(f) {
   return Number.isFinite(f) ? Math.min(Math.max(f, 1), 60) : 12;
 }
+function allowedURL(url) {
+  const u = url.trim();
+  if (!/^(https?:\/\/|mailto:)/i.test(u) || [...u].length <= 7 || /[\u0000-\u001f\u007f-\u009f]/.test(u)) return null;
+  return u;
+}
 function rgba(v) {
   if (!isObj(v)) return void 0;
   const r = num(v.r), g = num(v.g), b = num(v.b);
@@ -184,10 +197,61 @@ var Reader = class {
       rotation: num(v.rotation) ?? null,
       link: uuid(v.link) ?? null,
       anchor: str(v.anchor) ?? null,
+      click: this.click(v.click),
+      hover: this.hover(v.hover),
+      symbol: uuid(v.symbol) ?? null,
+      playback: this.playback(v.playback),
+      offset: num(v.offset) ?? null,
       image: this.image(v.image, images),
       reveal: num(v.reveal) ?? null
     };
   }
+  click(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "click");
+    const url = str(v.url);
+    const safe = url === void 0 ? null : allowedURL(url);
+    if (url !== void 0 && safe === null) this.warn("Skipped a click link that isn't http, https or mailto");
+    return { scene: str(v.scene) ?? null, url: safe };
+  }
+  playback(v) {
+    const s = str(v);
+    if (s === void 0) return null;
+    return ["loop", "once", "still", "click"].includes(s) ? s : "loop";
+  }
+  symbol(v, images) {
+    if (!isObj(v)) return null;
+    this.fields(v, "symbol");
+    const id = uuid(v.id);
+    if (!id) {
+      this.warn("Skipped a symbol without an id");
+      return null;
+    }
+    const size = (x) => {
+      const n = num(x);
+      return Math.max(1, n ?? 100);
+    };
+    const layers = (Array.isArray(v.layers) ? v.layers : []).filter(isObj).flatMap((l) => {
+      const lid = uuid(l.id);
+      return lid ? [{ id: lid, name: str(l.name) ?? "", visible: bool(l.visible) ?? true, locked: bool(l.locked) ?? false }] : [];
+    });
+    if (layers.length === 0) layers.push({ id: `${id}-LAYER`, name: "Layer 1", visible: true, locked: false });
+    return {
+      id,
+      name: str(v.name) ?? "Symbol",
+      width: size(v.width),
+      height: size(v.height),
+      layers,
+      elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
+      timeline: this.timeline(v.timeline),
+      button: bool(v.button) ?? null
+    };
+  }
+  hover(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "hover");
+    return { stroke: rgba(v.stroke) ?? null, fill: rgba(v.fill) ?? null, opacity: num(v.opacity) ?? null };
+  }
   ease(v) {
     const s = str(v);
     if (s === void 0) return null;
@@ -280,7 +344,8 @@ var Reader = class {
       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)
+      timeline: this.timeline(v.timeline),
+      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null
     };
   }
 };
@@ -922,6 +987,190 @@ function hachureLines(polygons, angle2, gap) {
   return out;
 }
 
+// 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/shapes.ts
 var Cache = class {
   constructor(limit = 6e3) {
@@ -1174,196 +1423,551 @@ function computeConnector(e, index) {
   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 })]);
-    }
+// 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;
+    case "spring":
+      return spring(u);
+    case "bounce":
+      return bounce(u);
+    case "elastic":
+      return elastic(u);
   }
-  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 spring(u) {
+  if (u <= 0) return 0;
+  if (u >= 1) return 1;
+  const s = (u2) => 1 - Math.exp(-6 * u2) * (Math.cos(3 * Math.PI * u2) + 6 / (3 * Math.PI) * Math.sin(3 * Math.PI * u2));
+  return s(u) + u * (1 - s(1));
 }
-function isFloor(e) {
-  return e.style.fillStyle === "grid" && e.style.fill.a > 0 && ["rectangle", "ellipse", "diamond", "path"].includes(e.kind);
+function bounce(u) {
+  if (u <= 0) return 0;
+  if (u >= 1) return 1;
+  const n = 7.5625, d = 2.75;
+  if (u < 1 / d) return n * u * u;
+  if (u < 2 / d) {
+    const v2 = u - 1.5 / d;
+    return n * v2 * v2 + 0.75;
+  }
+  if (u < 2.5 / d) {
+    const v2 = u - 2.25 / d;
+    return n * v2 * v2 + 0.9375;
+  }
+  const v = u - 2.625 / d;
+  return n * v * v + 0.984375;
 }
-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 elastic(u) {
+  if (u <= 0) return 0;
+  if (u >= 1) return 1;
+  return Math.pow(2, -10 * u) * Math.sin((u * 10 - 0.75) * (2 * Math.PI / 3)) + 1;
 }
-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 };
+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 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));
+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;
     }
   }
-  return nearest2 * GROW;
+  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));
 }
-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 }];
-  });
+var lerpNum = (a, b, u) => a + (b - a) * u;
+var mix01 = (a, b, u) => Math.min(Math.max(a + (b - a) * u, 0), 1);
+var lerpColor = (a, b, u) => ({
+  r: mix01(a.r, b.r, u),
+  g: mix01(a.g, b.g, u),
+  b: mix01(a.b, b.b, u),
+  a: mix01(a.a, b.a, u)
+});
+function num2(track, t, p, base) {
+  return value(track, t, (k) => k[p], base, lerpNum);
 }
-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 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 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)));
-    }
+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);
   }
-  return best;
+  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 = Math.max(0, num2(track, t, "width", e.width));
+  e.height = Math.max(0, 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 = Math.max(0, 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;
 }
-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 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 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;
+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)));
 }
-
-// src/metrics.ts
-var ascent = 0.951995849609375;
-var descent = 0.2129974365234375;
-var leading = 0.0279998779296875;
-var boldAscent = 0.975006103515625;
-var boldDescent = 0.2169952392578125;
+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 = Math.min(Math.max(applyEase(f.ease ?? "easeInOut", span > 0 ? Math.min(1, (t - f.start) / span) : 1), 0), 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 marchOffset(tl, speed, period, t) {
+  if (!(period > 0)) return 0;
+  const d = clampTime(tl.duration);
+  if (d > 0) {
+    const laps = roundHalfAway(speed * d / period);
+    if (laps !== 0) speed = laps * period / d;
+  }
+  const r = rem(speed * t, period);
+  return r < 0 ? -r : r === 0 ? 0 : period - r;
+}
+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) {
+  return expandingSymbols(posed(page, t), clampTime(t));
+}
+function posed(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);
+    }
+    const pattern = track?.march != null ? dashPattern(out.style.dash, out.style.strokeWidth) : null;
+    if (track?.march != null && pattern) {
+      if (out === e) out = cloneElement(e);
+      out.style.dashOffset = marchOffset(timeline, track.march, pattern.reduce((a, b) => a + b, 0), t);
+    }
+    return out;
+  });
+  elements = elements.map((e, i) => hidden.has(e.id) ? page.elements[i] : e);
+  const posed2 = { ...page, elements, timeline: null };
+  elements = elements.map((e) => {
+    const track = tracks.get(e.id);
+    return track ? following(track, e, t, posed2) : 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)) : expandingSymbols(page, 0);
+}
+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 mix3 = (p, q) => p + (q - p) * u;
+  return { x: mix3(before.x, after.x), y: mix3(before.y, after.y), width: Math.max(1, mix3(before.width, after.width)), height: Math.max(1, mix3(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/symbols.ts
+var MAX_DEPTH = 8;
+var MAX_ELEMENTS = 2e4;
+var EPSILON = 1e-9;
+function sceneTime(s, state) {
+  const m = (s.timeline?.markers ?? []).find((x) => x.name.toLowerCase() === state);
+  return m ? Math.min(Math.max(m.t, 0), clampTime(s.timeline?.duration ?? 0)) : null;
+}
+function buttonTime(s, state) {
+  switch (state) {
+    case "up":
+      return sceneTime(s, "up") ?? 0;
+    case "over":
+      return sceneTime(s, "over") ?? buttonTime(s, "up");
+    case "down":
+      return sceneTime(s, "down") ?? buttonTime(s, "over");
+    default:
+      return sceneTime(s, "hit");
+  }
+}
+function symbolTime(s, t, playback, offset2) {
+  const d = clampTime(s.timeline?.duration ?? 0);
+  if (s.button === true) return buttonTime(s, "up") ?? 0;
+  const o = offset2 !== null && Number.isFinite(offset2) ? offset2 : 0;
+  switch (playback ?? "loop") {
+    case "still":
+      return Math.min(s.timeline?.poster ?? d, d);
+    case "click":
+      return Math.min(Math.max(o, 0), d);
+    case "once":
+      return Math.min(Math.max(t + o, 0), d);
+    default: {
+      if (d <= 0) return 0;
+      const x = t + o;
+      let r = x % d;
+      if (r < 0) r += d;
+      if (x > EPSILON && (r < EPSILON || d - r < EPSILON)) return d;
+      return r;
+    }
+  }
+}
+function symbolPage(s) {
+  return { id: s.id, name: s.name, layers: s.layers, elements: s.elements, theme: null, timeline: s.timeline, symbols: null };
+}
+function hasInstances(page) {
+  return page.elements.some((e) => e.kind === "symbol");
+}
+function expandingSymbols(page, t, posing = true, times = /* @__PURE__ */ new Map()) {
+  if (!hasInstances(page)) return page;
+  const budget = { left: MAX_ELEMENTS };
+  return { ...page, elements: expand(page.elements, page, t, symbolTable(page), [], posing, budget, times) };
+}
+function symbolTable(page) {
+  const table = /* @__PURE__ */ new Map();
+  for (const s of page.symbols ?? []) if (!table.has(s.id)) table.set(s.id, s);
+  return table;
+}
+function expand(elements, page, t, table, stack, posing, budget, times = /* @__PURE__ */ new Map()) {
+  const instances = new Set(elements.filter((e) => e.kind === "symbol").map((e) => e.id));
+  if (instances.size === 0) {
+    budget.left -= elements.length;
+    return elements;
+  }
+  const index = indexOf(page);
+  const out = [];
+  for (const e of elements) {
+    if (budget.left <= 0) break;
+    const c = e.connector;
+    if (e.kind === "connector" && c && [c.start.elementID, c.end.elementID].some((id2) => id2 !== null && instances.has(id2))) {
+      const [a, b] = endpoints(e, index);
+      const pinned = cloneElement(e);
+      if (c.start.elementID !== null && instances.has(c.start.elementID)) pinned.connector.start = { elementID: null, port: c.start.port, x: a.x, y: a.y };
+      if (c.end.elementID !== null && instances.has(c.end.elementID)) pinned.connector.end = { elementID: null, port: c.end.port, x: b.x, y: b.y };
+      out.push(pinned);
+      budget.left -= 1;
+      continue;
+    }
+    if (e.kind !== "symbol") {
+      out.push(e);
+      budget.left -= 1;
+      continue;
+    }
+    budget.left -= 1;
+    const id = e.symbol;
+    const symbol = id === null ? void 0 : table.get(id);
+    if (id === null || !symbol || stack.includes(id) || stack.length >= MAX_DEPTH) continue;
+    const override = stack.length === 0 ? times.get(e.id) : void 0;
+    const u = override !== void 0 ? Math.min(Math.max(override, 0), clampTime(symbol.timeline?.duration ?? 0)) : symbolTime(symbol, t, e.playback, e.offset);
+    const inner = posing ? posed(symbolPage(symbol), u) : symbolPage(symbol);
+    const visible = new Set(inner.layers.filter((l) => l.visible).map((l) => l.id));
+    const drawn = {
+      ...inner,
+      elements: orderedElements(inner).filter((x) => visible.has(x.layerID)),
+      layers: [{ id: e.layerID, name: "", visible: true, locked: false }]
+    };
+    for (const x of expand(drawn.elements, drawn, u, table, [...stack, id], posing, budget)) out.push(placed(x, e, symbol));
+  }
+  return out;
+}
+function placed(inner, instance, symbol) {
+  const f = { x: instance.x, y: instance.y, width: instance.width, height: instance.height };
+  const sx = f.width / symbol.width, sy = f.height / symbol.height;
+  const s = Math.sqrt(Math.abs(sx * sy));
+  const center2 = { x: f.x + f.width / 2, y: f.y + f.height / 2 };
+  const a = angle(instance);
+  const point = (p) => rotate({ x: f.x + p.x * sx, y: f.y + p.y * sy }, center2, a);
+  const e = cloneElement(inner);
+  e.id = derivedID(instance.id, inner.id);
+  e.layerID = instance.layerID;
+  e.groupID = null;
+  e.link = inner.link === null ? null : derivedID(instance.id, inner.link);
+  e.seed = boiled(inner.seed, instance.seed);
+  e.click = null;
+  e.hover = null;
+  const scaled = { x: f.x + inner.x * sx, y: f.y + inner.y * sy, width: inner.width * sx, height: inner.height * sy };
+  const moved = rotate({ x: scaled.x + scaled.width / 2, y: scaled.y + scaled.height / 2 }, center2, a);
+  e.x = moved.x - scaled.width / 2;
+  e.y = moved.y - scaled.height / 2;
+  e.width = scaled.width;
+  e.height = scaled.height;
+  if (a !== 0 || inner.rotation !== null) e.rotation = angle(inner) + a;
+  e.style.strokeWidth = inner.style.strokeWidth * s;
+  e.style.fontSize = inner.style.fontSize * s;
+  if (inner.style.gridSize !== null) e.style.gridSize = inner.style.gridSize * s;
+  if (instance.style.opacity !== null) e.style.opacity = (inner.style.opacity ?? 1) * instance.style.opacity;
+  if (inner.connector) {
+    const end = (p) => {
+      if (p.elementID !== null) return { elementID: derivedID(instance.id, p.elementID), port: p.port, x: p.x, y: p.y };
+      const q = point(p);
+      return { elementID: null, port: p.port, x: q.x, y: q.y };
+    };
+    e.connector = { ...inner.connector, start: end(inner.connector.start), end: end(inner.connector.end) };
+  }
+  return e;
+}
+var MASK = (1n << 64n) - 1n;
+function mix2(x) {
+  let z = x + 0x9e3779b97f4a7c15n & MASK;
+  z = (z ^ z >> 30n) * 0xbf58476d1ce4e5b9n & MASK;
+  z = (z ^ z >> 27n) * 0x94d049bb133111ebn & MASK;
+  return z ^ z >> 31n;
+}
+function halves(id) {
+  const hex = id.replace(/-/g, "").padStart(32, "0").slice(-32);
+  return [BigInt(`0x${hex.slice(0, 16)}`), BigInt(`0x${hex.slice(16)}`)];
+}
+function derivedID(instance, inner) {
+  const [a, b] = halves(instance), [c, d] = halves(inner);
+  const hi = mix2(mix2(mix2(mix2(a) ^ b) ^ c) ^ d);
+  const lo = mix2(hi ^ 0x6a09e667f3bcc909n);
+  const h = hi.toString(16).padStart(16, "0") + lo.toString(16).padStart(16, "0");
+  return `${h.slice(0, 8)}-${h.slice(8, 12)}-${h.slice(12, 16)}-${h.slice(16, 20)}-${h.slice(20)}`.toUpperCase();
+}
+
+// src/clicks.ts
+function sceneNamed(name, markers) {
+  const exact = markers.findIndex((m) => m.name === name);
+  return exact >= 0 ? exact : markers.findIndex((m) => m.name.toLowerCase() === name.toLowerCase());
+}
+function clickTargets(page, file) {
+  const markers = page.timeline?.markers ?? [];
+  const out = /* @__PURE__ */ new Map();
+  let pageOf = null;
+  for (const e of page.elements) {
+    const c = e.click;
+    if (c?.scene) {
+      const i = sceneNamed(c.scene, markers);
+      if (i >= 0) {
+        out.set(e.id, { scene: i });
+        continue;
+      }
+    }
+    const url = c?.url ? allowedURL(c.url) : null;
+    if (url) {
+      out.set(e.id, { url });
+      continue;
+    }
+    if (e.link && file && file.pages.length > 1) {
+      if (!pageOf) {
+        pageOf = /* @__PURE__ */ new Map();
+        file.pages.forEach((p, i) => {
+          for (const x of p.elements) if (!pageOf.has(x.id)) pageOf.set(x.id, i);
+        });
+      }
+      const target = pageOf.get(e.link);
+      if (target !== void 0 && file.pages[target] !== page) out.set(e.id, { page: target });
+    }
+  }
+  return out;
+}
+function hoveredElement(e) {
+  const h = e.hover;
+  if (!h) return e;
+  const style = { ...e.style };
+  if (h.stroke) style.stroke = h.stroke;
+  if (h.fill) style.fill = h.fill;
+  if (h.opacity !== null && Number.isFinite(h.opacity)) {
+    const o = Math.min(Math.max(h.opacity, 0), 1);
+    style.opacity = o >= 1 ? null : o;
+  }
+  return { ...e, style };
+}
+function hovered(page, ids) {
+  return { ...page, elements: page.elements.map((e) => ids.has(e.id) ? hoveredElement(e) : e) };
+}
+function hasHover(e) {
+  return !!e.hover && (e.hover.stroke !== null || e.hover.fill !== null || e.hover.opacity !== null);
+}
+function buttonLabel(e, symbolName) {
+  const line2 = (e.text ?? "").split("\n").find((l) => l.length > 0);
+  if (line2) return line2;
+  if (e.anchor) return e.anchor;
+  if (symbolName) return symbolName;
+  return e.kind;
+}
+function partsOf(page, instances) {
+  const out = /* @__PURE__ */ new Map();
+  for (const e of page.elements) {
+    if (!instances.has(e.id) || e.kind !== "symbol") continue;
+    const alone = { ...page, layers: [{ id: e.layerID, name: "", visible: true, locked: false }], elements: [e] };
+    for (const part of expandingSymbols(alone, 0, false).elements) out.set(part.id, e.id);
+  }
+  return out;
+}
+var CLICK_STYLE = `
+.dottie-a { cursor: pointer; outline: none; }
+.dottie-a .dottie-h { display: none; }
+.dottie-a:hover .dottie-h, .dottie-a.dottie-hover .dottie-h, .dottie-a:focus-visible .dottie-h { display: inline; }
+.dottie-a:hover .dottie-n, .dottie-a.dottie-hover .dottie-n, .dottie-a:focus-visible .dottie-n { display: none; }
+.dottie-a:focus-visible { filter: drop-shadow(0 0 3px var(--dottie-focus, #3b82f6)); }
+.dottie-a:not(.dottie-b):active, .dottie-a.dottie-press:not(.dottie-b) { transform: translate(1px, 1px); }
+.dottie-a .dottie-d { display: none; }
+.dottie-b:active .dottie-n, .dottie-b:active .dottie-h, .dottie-b.dottie-press .dottie-n, .dottie-b.dottie-press .dottie-h { display: none; }
+.dottie-b:active .dottie-d, .dottie-b.dottie-press .dottie-d { display: inline; }
+`;
+
+// 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;
@@ -1883,476 +2487,177 @@ function measureRun(r) {
   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;
-    case "spring":
-      return spring(u);
-    case "bounce":
-      return bounce(u);
-    case "elastic":
-      return elastic(u);
-  }
-}
-function spring(u) {
-  if (u <= 0) return 0;
-  if (u >= 1) return 1;
-  const s = (u2) => 1 - Math.exp(-6 * u2) * (Math.cos(3 * Math.PI * u2) + 6 / (3 * Math.PI) * Math.sin(3 * Math.PI * u2));
-  return s(u) + u * (1 - s(1));
-}
-function bounce(u) {
-  if (u <= 0) return 0;
-  if (u >= 1) return 1;
-  const n = 7.5625, d = 2.75;
-  if (u < 1 / d) return n * u * u;
-  if (u < 2 / d) {
-    const v2 = u - 1.5 / d;
-    return n * v2 * v2 + 0.75;
-  }
-  if (u < 2.5 / d) {
-    const v2 = u - 2.25 / d;
-    return n * v2 * v2 + 0.9375;
-  }
-  const v = u - 2.625 / d;
-  return n * v * v + 0.984375;
-}
-function elastic(u) {
-  if (u <= 0) return 0;
-  if (u >= 1) return 1;
-  return Math.pow(2, -10 * u) * Math.sin((u * 10 - 0.75) * (2 * Math.PI / 3)) + 1;
-}
-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 mix01 = (a, b, u) => Math.min(Math.max(a + (b - a) * u, 0), 1);
-var lerpColor = (a, b, u) => ({
-  r: mix01(a.r, b.r, u),
-  g: mix01(a.g, b.g, u),
-  b: mix01(a.b, b.b, u),
-  a: mix01(a.a, b.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 = Math.max(0, num2(track, t, "width", e.width));
-  e.height = Math.max(0, 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 = Math.max(0, 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 = Math.min(Math.max(applyEase(f.ease ?? "easeInOut", span > 0 ? Math.min(1, (t - f.start) / span) : 1), 0), 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 marchOffset(tl, speed, period, t) {
-  if (!(period > 0)) return 0;
-  const d = clampTime(tl.duration);
-  if (d > 0) {
-    const laps = roundHalfAway(speed * d / period);
-    if (laps !== 0) speed = laps * period / d;
-  }
-  const r = rem(speed * t, period);
-  return r < 0 ? -r : r === 0 ? 0 : period - r;
-}
-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);
-    }
-    const pattern = track?.march != null ? dashPattern(out.style.dash, out.style.strokeWidth) : null;
-    if (track?.march != null && pattern) {
-      if (out === e) out = cloneElement(e);
-      out.style.dashOffset = marchOffset(timeline, track.march, pattern.reduce((a, b) => a + b, 0), t);
-    }
-    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;
+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;
     }
-    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: Math.max(1, mix2(before.width, after.width)), height: Math.max(1, 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 };
+  return lines;
 }
-function frameCount(tl) {
-  return Math.max(1, Math.ceil(clampTime(tl.duration) * clampFPS(tl.fps)));
+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 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 fontOf(ch) {
+  return fallbackMetrics[ch] ? `fb:${ch}` : "";
 }
-function sceneAt(tl, t) {
-  let s = -1;
-  (tl.markers ?? []).forEach((m, i) => {
-    if (m.t <= t) s = i;
-  });
-  return s;
+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;
 }
-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/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/svg.ts
 function bounds(page, padding = 24) {
+  if (hasInstances(page)) return bounds(expandingSymbols(page, 0), padding);
   const index = indexOf(page);
   const box = (e) => {
     if (e.kind === "connector") return connectorBounds(e, index);
@@ -2394,6 +2699,7 @@ function svgOpen(b, background, paint) {
   return out;
 }
 function svgParts(page, background, fixed) {
+  if (hasInstances(page)) return svgParts(expandingSymbols(page, 0), background, fixed);
   const theme = themeNamed(page.theme);
   const bg = background ? theme?.background ?? background : null;
   const ink = theme?.ink ?? black;
@@ -2574,8 +2880,9 @@ 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; }
-`;
+${CLICK_STYLE}`;
 var Playback = class {
+  /** `file` is the drawing `page` belongs to, so links to its other pages are clickable. */
   constructor(page, into, options = {}) {
     __publicField(this, "page");
     __publicField(this, "plan");
@@ -2583,6 +2890,22 @@ var Playback = class {
     __publicField(this, "sceneNames");
     __publicField(this, "background");
     __publicField(this, "ink");
+    /** What clicking each clickable element does, by element id. */
+    __publicField(this, "clicks");
+    /** Copies of symbols that play through once when clicked (playback "click"), by id, with their clip's length. */
+    __publicField(this, "replays", /* @__PURE__ */ new Map());
+    /** When each replaying copy was clicked (performance.now() milliseconds). */
+    __publicField(this, "replayStarts", /* @__PURE__ */ new Map());
+    __publicField(this, "hoverIDs");
+    __publicField(this, "labels", /* @__PURE__ */ new Map());
+    /** Each drawn part of a clickable copy, to that copy's id; and each copy's parts in drawing order. */
+    __publicField(this, "owner", /* @__PURE__ */ new Map());
+    __publicField(this, "partsOfOwner", /* @__PURE__ */ new Map());
+    /** The moments of the button copies' over, down and hit states. */
+    __publicField(this, "overTimes", /* @__PURE__ */ new Map());
+    __publicField(this, "downTimes", /* @__PURE__ */ new Map());
+    __publicField(this, "hitTimes", /* @__PURE__ */ new Map());
+    __publicField(this, "last", { t: 0, i: 0 });
     __publicField(this, "svg");
     __publicField(this, "groups", /* @__PURE__ */ new Map());
     __publicField(this, "order", []);
@@ -2590,6 +2913,30 @@ var Playback = class {
     __publicField(this, "onFrame", null);
     this.page = options.clean ? withRoughness(page, 0) : page;
     this.plan = plan(this.page);
+    this.clicks = clickTargets(page, options.file);
+    const table = symbolTable(this.page);
+    for (const e of this.page.elements) {
+      const s = e.kind === "symbol" && e.symbol !== null ? table.get(e.symbol) : void 0;
+      if (!s) continue;
+      if (s.button === true) {
+        for (const [state, times] of [["over", this.overTimes], ["down", this.downTimes], ["hit", this.hitTimes]]) {
+          const at = buttonTime(s, state);
+          if (at !== null) times.set(e.id, at);
+        }
+      } else if (e.playback === "click" && (s.timeline?.duration ?? 0) > 0) {
+        this.replays.set(e.id, s.timeline.duration);
+      }
+    }
+    const clickable2 = /* @__PURE__ */ new Set([...this.clicks.keys(), ...this.replays.keys()]);
+    this.hoverIDs = new Set(this.page.elements.filter((e) => clickable2.has(e.id) && e.kind !== "symbol" && hasHover(e)).map((e) => e.id));
+    const instances = new Set(this.page.elements.filter((e) => clickable2.has(e.id) && e.kind === "symbol").map((e) => e.id));
+    for (const e of this.page.elements) {
+      if (!clickable2.has(e.id)) continue;
+      this.labels.set(e.id, buttonLabel(e, e.symbol !== null ? table.get(e.symbol)?.name : void 0));
+      if (e.kind !== "symbol") this.owner.set(e.id, e.id);
+    }
+    for (const [part, id] of partsOf(this.page, instances)) this.owner.set(part, id);
+    for (const [part, id] of this.owner) this.partsOfOwner.set(id, [...this.partsOfOwner.get(id) ?? [], part]);
     const near = (t) => {
       let best = 0;
       this.plan.times.forEach((x, i) => {
@@ -2628,24 +2975,73 @@ var Playback = class {
     this.frame = i;
     this.onFrame?.(i);
   }
+  /** Starts copy `id` replaying from `at` (performance.now() milliseconds; earlier to start partway). */
+  replay(id, at) {
+    if (this.replays.has(id)) this.replayStarts.set(id, at);
+  }
+  /** Whether a copy is still playing through after a click. */
+  replaying(now = performance.now()) {
+    for (const [id, start] of this.replayStarts) if (now - start < (this.replays.get(id) ?? 0) * 1e3) return true;
+    return false;
+  }
+  /** Draws the last moment drawn again, for copies replaying while the page stands still. */
+  redraw() {
+    this.drawAt(this.last.t, this.last.i);
+  }
   /** Draws the moment `t` (seconds) in the frame-`i` view. */
   drawAt(t, i = 0) {
+    this.last = { t, i };
     const r = this.plan.rects[Math.min(i, this.plan.rects.length - 1)];
-    const { parts } = svgParts(resolved(this.page, t), this.background, r);
+    const now = typeof performance === "undefined" ? 0 : performance.now();
+    const times = /* @__PURE__ */ new Map();
+    for (const [id, start] of this.replayStarts) times.set(id, Math.min((now - start) / 1e3, this.replays.get(id) ?? 0));
+    const tc = clampTime(t);
+    const pose = posed(this.page, tc);
+    const frame2 = expandingSymbols(pose, tc, true, times);
+    const { parts } = svgParts(frame2, this.background, r);
+    const owned = (m, parts2) => {
+      for (const p of parts2) if (this.owner.has(p.key)) m.set(p.key, p.markup);
+      return m;
+    };
+    const state = (st) => st.size === 0 ? /* @__PURE__ */ new Map() : owned(/* @__PURE__ */ new Map(), svgParts(expandingSymbols(pose, tc, true, new Map([...times, ...st])), this.background, r).parts.filter((p) => st.has(this.owner.get(p.key) ?? "")));
+    const hover = this.hoverIDs.size === 0 ? /* @__PURE__ */ new Map() : owned(/* @__PURE__ */ new Map(), svgParts(hovered(frame2, this.hoverIDs), this.background, r).parts.filter((p) => this.hoverIDs.has(p.key)));
+    const over = state(this.overTimes), down = state(this.downTimes), hit = state(this.hitTimes);
+    const normal = owned(/* @__PURE__ */ new Map(), parts);
+    const merged = [];
+    const done = /* @__PURE__ */ new Set();
+    for (const p of parts) {
+      const o = this.owner.get(p.key);
+      if (o === void 0) {
+        merged.push(p);
+        continue;
+      }
+      if (done.has(o)) continue;
+      done.add(o);
+      merged.push(this.buttonPart(o, normal, hover, over, down, hit, pose));
+    }
     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 keys = merged.map((p) => p.key);
+    for (const p of merged) {
+      const markup = p.markup;
       const have = this.groups.get(p.key);
       if (have) {
-        if (have.markup !== p.markup) {
-          have.g.innerHTML = p.markup;
-          have.markup = p.markup;
+        if (have.markup !== markup) {
+          have.g.innerHTML = markup;
+          have.markup = markup;
         }
+        if (p.button !== void 0) have.g.classList.toggle("dottie-b", p.button);
       } else {
         const g = document.createElementNS(ns, "g");
-        g.innerHTML = p.markup;
-        this.groups.set(p.key, { g, markup: p.markup });
+        g.innerHTML = markup;
+        if (p.button !== void 0) {
+          g.setAttribute("class", p.button ? "dottie-a dottie-b" : "dottie-a");
+          g.setAttribute("data-a", p.key);
+          g.setAttribute("tabindex", "0");
+          g.setAttribute("role", "button");
+          g.setAttribute("aria-label", this.labels.get(p.key) ?? "");
+        }
+        this.groups.set(p.key, { g, markup });
       }
     }
     const live = new Set(keys);
@@ -2654,10 +3050,66 @@ var Playback = class {
       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));
+      let at = this.svg.firstChild;
+      for (const k of keys) {
+        const g = this.groups.get(k).g;
+        if (g === at) at = at.nextSibling;
+        else this.svg.insertBefore(g, at);
+      }
+      while (at) {
+        const next = at.nextSibling;
+        at.remove();
+        at = next;
+      }
       this.order = keys;
     }
   }
+  /** What a clickable owner draws as: its normal look, and its hover, over and down looks where they differ. A
+   * symbol's copy keeps its drawing out of the pointer's way and takes clicks on a layer above: its hit state drawn
+   * invisibly, or its frame. `button` is whether it has a down look (the stylesheet nudges the others). */
+  buttonPart(o, normal, hover, over, down, hit, pose) {
+    const keys = this.partsOfOwner.get(o) ?? [o];
+    const join = (m2) => {
+      const s = keys.map((k) => m2.get(k) ?? "").join("");
+      return s === "" ? null : s;
+    };
+    const base = join(normal) ?? "";
+    const instance = pose.elements.find((e) => e.id === o && e.kind === "symbol");
+    const overLook = instance ? join(over) : join(hover);
+    const downLook = instance ? join(down) : null;
+    const shownOver = overLook !== null && overLook !== base ? overLook : null;
+    const shownDown = downLook !== null && downLook !== (overLook ?? base) ? downLook : null;
+    if (!instance && shownOver === null) return { key: o, markup: base, button: false };
+    const still2 = instance ? ` pointer-events="none"` : "";
+    let m = `<g class="dottie-n"${still2}>
+${base}</g>
+`;
+    if (shownOver !== null) m += `<g class="dottie-h"${still2}>
+${shownOver}</g>
+`;
+    if (shownDown !== null) m += `<g class="dottie-d"${still2}>
+${shownDown}</g>
+`;
+    if (instance) {
+      const h = join(hit);
+      if (h !== null) m += `<g class="dottie-hit" opacity="0" pointer-events="all">
+${h}</g>
+`;
+      else {
+        const c = { x: instance.x + instance.width / 2, y: instance.y + instance.height / 2 }, a = instance.rotation ?? 0;
+        const corners2 = [
+          [instance.x, instance.y],
+          [instance.x + instance.width, instance.y],
+          [instance.x + instance.width, instance.y + instance.height],
+          [instance.x, instance.y + instance.height]
+        ].map(([x, y]) => rotate({ x, y }, c, a));
+        const path = new Path().moveTo(corners2[0]).lineTo(corners2[1]).lineTo(corners2[2]).lineTo(corners2[3]).close();
+        m += `<path class="dottie-hit" d="${path.data()}" fill="none" stroke="none" pointer-events="all"/>
+`;
+      }
+    }
+    return { key: o, markup: m, button: shownDown !== null };
+  }
   /** The scene frame `i` is in, or -1 before the first. */
   sceneAt(i) {
     let s = -1;
@@ -2687,6 +3139,7 @@ var DottiePlayer = class extends ElementBase {
     __publicField(this, "last", 0);
     __publicField(this, "acc", 0);
     __publicField(this, "raf", 0);
+    __publicField(this, "replayRaf", 0);
     __publicField(this, "loadToken", 0);
     __publicField(this, "visible", true);
     __publicField(this, "observer", null);
@@ -2720,6 +3173,10 @@ var DottiePlayer = class extends ElementBase {
     };
     this.next.onclick = () => this.nextScene();
     this.prev.onclick = () => this.prevScene();
+    this.stage.addEventListener("click", (e) => {
+      const b = clickable(e.target);
+      if (b) this.activate(b.getAttribute("data-a") ?? "");
+    });
     this.addEventListener("keydown", (e) => this.key(e));
   }
   connectedCallback() {
@@ -2781,7 +3238,7 @@ var DottiePlayer = class extends ElementBase {
   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") });
+    const p = new Playback(page, this.stage, { clean: this.hasAttribute("clean"), file });
     this.playback = p;
     this.style.setProperty("--dottie-page", color(p.background));
     this.style.setProperty("--dottie-ink", color(p.ink));
@@ -2856,6 +3313,50 @@ var DottiePlayer = class extends ElementBase {
     this.setPlaying(false);
     p.show(s >= 0 ? p.scenes[s] : 0);
   }
+  /** Does what clicking element `id` does: jumps to its scene and plays on to the next (with reduced motion, or in a
+   * still, straight to where that stops), opens its link in a new tab, or shows its page. */
+  activate(id) {
+    const p = this.playback;
+    const click = p?.clicks.get(id);
+    const replay = p?.replays.has(id) ?? false;
+    if (!p || !click && !replay) return;
+    const detail = { element: id, ...click ?? {}, ...replay ? { replay: true } : {} };
+    if (!this.dispatchEvent(new CustomEvent("action", { detail, cancelable: true }))) return;
+    const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (replay) {
+      const now = performance.now();
+      p.replay(id, reduced ? now - p.replays.get(id) * 1e3 : now);
+      p.redraw();
+      this.scheduleReplay();
+    }
+    if (!click) return;
+    if ("url" in click) {
+      if (/^(https?:|mailto:)/i.test(click.url)) window.open(click.url, "_blank", "noopener");
+    } else if ("page" in click) {
+      this.setAttribute("page", String(click.page + 1));
+    } else if (click.scene >= 0 && click.scene < p.scenes.length) {
+      if (reduced || this.hasAttribute("at") || p.frameCount < 2) {
+        this.setPlaying(false);
+        p.show(click.scene + 1 < p.scenes.length ? p.scenes[click.scene + 1] : p.frameCount - 1);
+      } else {
+        p.show(p.scenes[click.scene]);
+        this.setPlaying(true);
+      }
+    }
+  }
+  /** Redraws, while the page itself stands still, as long as a clicked copy is playing through. */
+  scheduleReplay() {
+    if (this.replayRaf) return;
+    const step = () => {
+      this.replayRaf = 0;
+      const p = this.playback;
+      if (!p || !this.isConnected) return;
+      if (!this.playing) p.redraw();
+      if (p.replaying()) this.replayRaf = requestAnimationFrame(step);
+      else if (!this.playing) p.redraw();
+    };
+    this.replayRaf = requestAnimationFrame(step);
+  }
   setPlaying(on) {
     const p = this.playback;
     this.playing = on && !!p && p.frameCount > 1 && p.page.timeline !== null;
@@ -2897,8 +3398,15 @@ var DottiePlayer = class extends ElementBase {
   }
   key(e) {
     const p = this.playback;
+    const target = e.composedPath()[0];
+    const b = clickable(target);
+    if (p && b && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      this.activate(b.getAttribute("data-a") ?? "");
+      return;
+    }
     if (!p || p.page.timeline === null || p.frameCount <= 1 || this.hasAttribute("at")) return;
-    if (e.target === this.scrub && e.key !== " ") return;
+    if (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);
@@ -2925,6 +3433,10 @@ var DottiePlayer = class extends ElementBase {
   }
 };
 __publicField(DottiePlayer, "observedAttributes", ["src", "page", "at", "clean", "no-controls", "label"]);
+function clickable(target) {
+  const el = target;
+  return el && typeof el.closest === "function" ? el.closest(".dottie-a") : null;
+}
 function nearest(p, t) {
   let best = 0;
   p.plan.times.forEach((x, i) => {
@@ -3024,7 +3536,7 @@ function render(source, options = {}) {
 function isFile(v) {
   return typeof v === "object" && v !== null && Array.isArray(v.pages) && Array.isArray(v.warnings);
 }
-var VERSION = "0.3.0";
+var VERSION = "0.5.1";
 export {
   BOIL_DRAWINGS,
   DottieFormatError,
@@ -3036,6 +3548,7 @@ export {
   Playback,
   SUPPORTED_VERSION,
   VERSION,
+  allowedURL,
   black,
   bounds,
   cameraView,