@phin-tech/dottie 0.8.0 → 0.10.0

package/dist/dottie.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.8.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.10.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 __publicField = (obj, key, value2) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value2);
@@ -134,19 +134,80 @@ function trim(s) {
   return s.replace(/^[ \t ]+|[ \t ]+$/g, "");
 }
 
+// src/theme.ts
+var rgb = (r, g, b) => ({ r, g, b, a: 1 });
+function hex(h) {
+  const n = parseInt(h.slice(1), 16);
+  return { r: (n >> 16 & 255) / 255, g: (n >> 8 & 255) / 255, b: (n & 255) / 255, a: 1 };
+}
+var PALETTE_NAMES = ["accent", "muted", "danger", "warning", "success", "info"];
+var palette = (colors) => PALETTE_NAMES.map((name, i) => ({ name, color: hex(colors[i]) }));
+var LIGHT_PALETTE = palette(["#2563eb", "#6b7280", "#dc2626", "#d97706", "#16a34a", "#0891b2"]);
+var DARK_PALETTE = palette(["#93c5fd", "#cbd5e1", "#fca5a5", "#fcd34d", "#86efac", "#67e8f9"]);
+var themes = [
+  { id: "paper", name: "Paper", background: rgb(0.984, 0.98, 0.965), ink: rgb(0.12, 0.12, 0.13), palette: LIGHT_PALETTE },
+  { id: "white", name: "White", background: rgb(1, 1, 1), ink: rgb(0.12, 0.12, 0.13), palette: LIGHT_PALETTE },
+  {
+    id: "sepia",
+    name: "Sepia",
+    background: rgb(0.953, 0.914, 0.824),
+    ink: rgb(0.23, 0.18, 0.13),
+    palette: palette(["#9a3412", "#78716c", "#b91c1c", "#b45309", "#4d7c0f", "#0e7490"])
+  },
+  { id: "blueprint", name: "Blueprint", background: rgb(0.106, 0.227, 0.361), ink: rgb(0.91, 0.945, 0.984), palette: DARK_PALETTE },
+  { id: "chalkboard", name: "Chalkboard", background: rgb(0.169, 0.227, 0.2), ink: rgb(0.945, 0.945, 0.918), palette: DARK_PALETTE },
+  { id: "midnight", name: "Midnight", background: rgb(0.082, 0.086, 0.102), ink: rgb(0.925, 0.925, 0.94), palette: DARK_PALETTE }
+];
+function themeNamed(id) {
+  return themes.find((t) => t.id === id) ?? null;
+}
+function pageTheme(page) {
+  const c = page.customTheme;
+  if (c) return { id: "custom", name: c.name, background: c.background, ink: c.ink, palette: c.palette };
+  return themeNamed(page.theme);
+}
+function paletteColor(page, name) {
+  const n = name.trim().toLowerCase();
+  return (pageTheme(page)?.palette ?? LIGHT_PALETTE).find((p) => p.name.toLowerCase() === n)?.color ?? null;
+}
+function resolvingPalette(page) {
+  const named = (e) => !!e.style.named;
+  if (!page.elements.some(named) && !(page.symbols ?? []).some((s) => s.elements.some(named))) return page;
+  const resolve2 = (e) => {
+    const n = e.style.named;
+    if (!n) return e;
+    const style2 = { ...e.style };
+    const f = n.fill !== null ? paletteColor(page, n.fill) : null;
+    const s = n.stroke !== null ? paletteColor(page, n.stroke) : null;
+    const t = n.textColor !== null ? paletteColor(page, n.textColor) : null;
+    if (f) style2.fill = { ...f };
+    if (s) style2.stroke = { ...s };
+    if (t) style2.textColor = { ...t };
+    return { ...e, style: style2 };
+  };
+  return {
+    ...page,
+    elements: page.elements.map(resolve2),
+    symbols: page.symbols ? page.symbols.map((s) => ({ ...s, elements: s.elements.map(resolve2) })) : page.symbols
+  };
+}
+
 // src/model.ts
 var SUPPORTED_VERSION = 2;
 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", "symbols", "variables", "flows"],
+  page: ["id", "name", "layers", "elements", "theme", "customTheme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables", "flows"],
   flow: ["id", "from", "to", "every", "speed", "color", "size", "when", "spread", "volume", "overrides"],
   flowOverride: ["when", "volume"],
   symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button", "params"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
-  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor"],
+  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor", "named"],
+  colorNames: ["fill", "stroke", "textColor"],
+  customTheme: ["name", "background", "ink", "palette", "base"],
+  paletteColor: ["name", "color"],
   element: [
     "id",
     "kind",
@@ -184,8 +245,11 @@ var KNOWN_FIELDS = {
     "capacity",
     "delay",
     "queue",
-    "gauge"
+    "gauge",
+    "containerID",
+    "container"
   ],
+  container: ["fixed", "lanes"],
   gauge: ["metric", "of", "max", "warn", "alarm", "style", "label"],
   strokePoint: ["x", "y"],
   subpath: ["closed", "coords"],
@@ -194,7 +258,7 @@ var KNOWN_FIELDS = {
   extensionRef: ["id", "shape", "version", "params"],
   normalizedPoint: ["x", "y"],
   normalizedRect: ["x", "y", "width", "height"],
-  connector: ["start", "end", "routing", "startHead", "endHead", "waypoints", "hops", "cost"],
+  connector: ["start", "end", "routing", "startHead", "endHead", "waypoints", "hops", "avoid", "cost"],
   waypoint: ["x", "y"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
   track: ["element", "keys", "boil", "follow", "repeats", "march"],
@@ -281,9 +345,36 @@ var Reader = class {
       gridSize: num(s.gridSize) ?? null,
       opacity: num(s.opacity) ?? null,
       dashOffset: num(s.dashOffset) ?? null,
-      textColor: rgba(s.textColor) ?? null
+      textColor: rgba(s.textColor) ?? null,
+      named: this.colorNames(s.named)
     };
   }
+  container(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "container");
+    return { fixed: v.fixed === true ? true : null, lanes: v.lanes === "rows" || v.lanes === "columns" ? v.lanes : null };
+  }
+  colorNames(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "colorNames");
+    const n = { fill: str(v.fill) ?? null, stroke: str(v.stroke) ?? null, textColor: str(v.textColor) ?? null };
+    return n.fill === null && n.stroke === null && n.textColor === null ? null : n;
+  }
+  customTheme(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "customTheme");
+    const background = rgba(v.background), ink = rgba(v.ink);
+    if (!background || !ink) {
+      this.warn("A custom theme needs a background and an ink; drawn without it");
+      return null;
+    }
+    const palette2 = (Array.isArray(v.palette) ? v.palette : []).filter(isObj).flatMap((p) => {
+      this.fields(p, "paletteColor");
+      const name = str(p.name), color2 = rgba(p.color);
+      return name && color2 ? [{ name, color: color2 }] : [];
+    });
+    return { name: str(v.name) ?? "Custom", background, ink, palette: palette2, base: str(v.base) ?? null };
+  }
   endpoint(v) {
     const e = isObj(v) ? v : {};
     const port = str(e.port);
@@ -315,6 +406,7 @@ var Reader = class {
         return { x: num(w.x) ?? 0, y: num(w.y) ?? 0 };
       }) : null,
       hops: typeof v.hops === "boolean" ? v.hops : null,
+      avoid: typeof v.avoid === "boolean" ? v.avoid : null,
       cost: typeof v.cost === "number" && Number.isFinite(v.cost) ? v.cost : null
     };
   }
@@ -383,7 +475,9 @@ var Reader = class {
       capacity: num(v.capacity) ?? null,
       delay: num(v.delay) ?? null,
       queue: v.queue === true ? true : null,
-      gauge: this.gauge(v.gauge)
+      gauge: this.gauge(v.gauge),
+      containerID: uuid(v.containerID) ?? null,
+      container: this.container(v.container)
     };
   }
   gauge(v) {
@@ -546,15 +640,15 @@ var Reader = class {
     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 }];
+      const path = uuid(f.path), start2 = num(f.start), end = num(f.end);
+      if (!path || start2 === void 0 || end === void 0 || start2 < 0 || end > MAX_DURATION) return [];
+      return [{ path, start: start2, 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 start2 = num(r.start), end = num(r.end);
+      if (start2 === void 0 || end === void 0) return [];
       const count = num(r.count);
-      const rep = { start, end, count: count === void 0 ? null : Math.trunc(count) };
+      const rep = { start: start2, end, count: count === void 0 ? null : Math.trunc(count) };
       return repeatIsValid(rep) ? [rep] : [];
     }) : null;
     return { element, keys, boil: bool(v.boil) ?? null, follow, repeats, march: clampMarch(num(v.march)) };
@@ -604,6 +698,7 @@ 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,
+      customTheme: this.customTheme(v.customTheme),
       timeline: this.timeline(v.timeline),
       symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null,
       variables: this.variables(v.variables),
@@ -667,7 +762,7 @@ function parseDottie(source) {
       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));
+  const pages = json.pages.map((p, i) => resolvingPalette(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 };
 }
@@ -687,7 +782,8 @@ function cloneElement(e) {
       ...e.style,
       stroke: { ...e.style.stroke },
       fill: { ...e.style.fill },
-      textColor: e.style.textColor ? { ...e.style.textColor } : null
+      textColor: e.style.textColor ? { ...e.style.textColor } : null,
+      named: e.style.named ? { ...e.style.named } : e.style.named
     },
     connector: e.connector ? {
       ...e.connector,
@@ -779,6 +875,21 @@ function pieces(para) {
   if (cur || out.length === 0) out.push(cur);
   return out;
 }
+function prefixWidths(chars, fontSize, face, font) {
+  const fam = familyMetrics(font);
+  const f = fam.faces[face] ?? fam.faces.regular;
+  const fallback = f.w["n"];
+  const out = [0];
+  let w = 0;
+  let prev = "";
+  for (const ch of chars) {
+    w += f.w[ch] ?? fallback;
+    if (prev) w += f.k[prev + ch] ?? 0;
+    prev = ch;
+    out.push(w * fontSize / 1e3);
+  }
+  return out;
+}
 function wrap(s, fontSize, maxWidth, face = "regular", font) {
   const width = (t) => measure(t, fontSize, face, font);
   const out = [];
@@ -794,8 +905,9 @@ function wrap(s, fontSize, maxWidth, face = "regular", font) {
       }
       while (width(line2.trimEnd()) > maxWidth && [...line2.trimEnd()].length > 1) {
         const chars = [...line2];
+        const prefix = prefixWidths(chars, fontSize, face, font);
         let n = chars.length - 1;
-        while (n > 1 && width(chars.slice(0, n).join("")) > maxWidth) n--;
+        while (n > 1 && prefix[n] > maxWidth) n--;
         out.push(chars.slice(0, n).join(""));
         line2 = chars.slice(n).join("");
       }
@@ -950,13 +1062,13 @@ var Path = class _Path {
   contours() {
     const out = [];
     let current = [];
-    let start = { x: 0, y: 0 };
+    let start2 = { x: 0, y: 0 };
     for (const s of this.segments) {
-      const last = current.length ? current[current.length - 1] : start;
+      const last = current.length ? current[current.length - 1] : start2;
       switch (s.op) {
         case "M":
           if (current.length > 1) out.push(current);
-          start = s.p;
+          start2 = s.p;
           current = [s.p];
           break;
         case "L":
@@ -978,9 +1090,9 @@ var Path = class _Path {
           }
           break;
         case "Z":
-          current.push(start);
+          current.push(start2);
           if (current.length > 1) out.push(current);
-          current = [start];
+          current = [start2];
           break;
       }
     }
@@ -1161,6 +1273,165 @@ function shapePath(e) {
   return path;
 }
 
+// src/elbow.ts
+var MARGIN = 16;
+var BEND = 24;
+var SMALLEST = 24;
+var MOST = 48;
+function obstacle(e) {
+  if (e.kind === "connector" || e.kind === "text" || e.kind === "freehand") return null;
+  if (e.kind === "path" && !e.extension) return null;
+  if (e.style.opacity !== null && e.style.opacity <= 0) return null;
+  const r = rotatedBounds(e);
+  return r.width < SMALLEST || r.height < SMALLEST ? null : r;
+}
+function crosses(points, r) {
+  const x1 = r.x + r.width, y1 = r.y + r.height;
+  for (let k = 1; k < points.length; k++) {
+    const p = points[k - 1], q = points[k];
+    if (p.y === q.y) {
+      if (r.y < p.y && p.y < y1 && Math.min(p.x, q.x) < x1 && Math.max(p.x, q.x) > r.x) return true;
+    } else if (p.x === q.x) {
+      if (r.x < p.x && p.x < x1 && Math.min(p.y, q.y) < y1 && Math.max(p.y, q.y) > r.y) return true;
+    }
+  }
+  return false;
+}
+var padded = (r) => ({ x: r.x - MARGIN, y: r.y - MARGIN, width: r.width + 2 * MARGIN, height: r.height + 2 * MARGIN });
+var inside = (p, r) => r.x < p.x && p.x < r.x + r.width && r.y < p.y && p.y < r.y + r.height;
+var memo = /* @__PURE__ */ new Map();
+function avoiding(plain, a, b, startVertical, endVertical, elements, except) {
+  const usable = (r) => !inside(a, padded(r)) && !inside(b, padded(r));
+  const all = [];
+  let crossed = false;
+  for (const e of elements) {
+    if (except.has(e.id)) continue;
+    const r = obstacle(e);
+    if (!r || !usable(r)) continue;
+    all.push(r);
+    if (!crossed && crosses(plain, r)) crossed = true;
+  }
+  if (!crossed) return plain;
+  const key = JSON.stringify([a.x, a.y, b.x, b.y, startVertical, endVertical, all.map((r) => [r.x, r.y, r.width, r.height])]);
+  const hit = memo.get(key);
+  if (hit) return hit;
+  const out = route(plain, a, b, startVertical, endVertical, all);
+  if (memo.size >= 512) memo.clear();
+  memo.set(key, out);
+  return out;
+}
+function route(plain, a, b, startVertical, endVertical, usable) {
+  let chosen = usable.map((_, i) => i).filter((i) => crosses(plain, usable[i]));
+  if (chosen.length === 0) return plain;
+  for (let round = 0; round < 4; round++) {
+    if (chosen.length > MOST) return plain;
+    const path = grid(a, b, startVertical, endVertical, chosen.map((i) => padded(usable[i])));
+    if (!path) return plain;
+    const more = usable.map((_, i) => i).filter((i) => !chosen.includes(i) && crosses(path, usable[i]));
+    if (more.length === 0) return path;
+    chosen = [...chosen, ...more].sort((p, q) => p - q);
+  }
+  return plain;
+}
+function grid(a, b, startVertical, endVertical, boxes) {
+  let xs = [a.x, b.x, (a.x + b.x) / 2], ys = [a.y, b.y, (a.y + b.y) / 2];
+  for (const r of boxes) {
+    xs.push(r.x, r.x + r.width);
+    ys.push(r.y, r.y + r.height);
+  }
+  xs = [...new Set(xs)].sort((p, q) => p - q);
+  ys = [...new Set(ys)].sort((p, q) => p - q);
+  const nx = xs.length, ny = ys.length;
+  const ia = xs.indexOf(a.x), ja = ys.indexOf(a.y), ib = xs.indexOf(b.x), jb = ys.indexOf(b.y);
+  if (ia < 0 || ja < 0 || ib < 0 || jb < 0) return null;
+  const at = new Map(xs.map((x, k) => [x, k])), bt = new Map(ys.map((y, k) => [y, k]));
+  const inner = new Uint8Array(nx * ny), acrossBlocked = new Uint8Array(nx * ny), downBlocked = new Uint8Array(nx * ny);
+  for (const r of boxes) {
+    const i0 = at.get(r.x), i1 = at.get(r.x + r.width), j0 = bt.get(r.y), j1 = bt.get(r.y + r.height);
+    if (i0 === void 0 || i1 === void 0 || j0 === void 0 || j1 === void 0) continue;
+    for (let i = i0; i < i1; i++) for (let j = j0; j < j1; j++) {
+      if (j > j0) acrossBlocked[i * ny + j] = 1;
+      if (i > i0) downBlocked[i * ny + j] = 1;
+      if (i > i0 && j > j0) inner[i * ny + j] = 1;
+    }
+  }
+  const blocked = (i, j) => inner[i * ny + j] === 1;
+  const across = (i0, i1, j) => acrossBlocked[Math.min(i0, i1) * ny + j] === 1;
+  const down = (j0, j1, i) => downBlocked[i * ny + Math.min(j0, j1)] === 1;
+  const count = nx * ny * 2;
+  const dist = new Array(count).fill(Infinity), prev = new Array(count).fill(-1);
+  const done = new Array(count).fill(false);
+  const heap = new Frontier();
+  const first = (ia * ny + ja) * 2 + (startVertical ? 1 : 0);
+  dist[first] = 0;
+  heap.push(0, first);
+  const want = (ib * ny + jb) * 2 + (endVertical ? 1 : 0);
+  for (let top = heap.pop(); top; top = heap.pop()) {
+    const [cost, s] = top;
+    if (done[s]) continue;
+    done[s] = true;
+    if (s === want) break;
+    const node = Math.floor(s / 2), axis = s % 2, i = Math.floor(node / ny), j = node % ny;
+    for (const [di, dj] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) {
+      const ni = i + di, nj = j + dj;
+      if (ni < 0 || ni >= nx || nj < 0 || nj >= ny || blocked(ni, nj)) continue;
+      const turn = di !== 0 ? 0 : 1;
+      if (di !== 0 ? across(i, ni, j) : down(j, nj, i)) continue;
+      const length = Math.abs(xs[ni] - xs[i]) + Math.abs(ys[nj] - ys[j]);
+      const c = cost + length + (turn !== axis ? BEND : 0);
+      const t = (ni * ny + nj) * 2 + turn;
+      if (c < dist[t]) {
+        dist[t] = c;
+        prev[t] = s;
+        heap.push(c, t);
+      }
+    }
+  }
+  if (!done[want]) return null;
+  const points = [];
+  for (let s = want; s >= 0; s = prev[s]) {
+    const node = Math.floor(s / 2);
+    points.push({ x: xs[Math.floor(node / ny)], y: ys[node % ny] });
+  }
+  return points.reverse();
+}
+var Frontier = class {
+  constructor() {
+    __publicField(this, "heap", []);
+    __publicField(this, "next", 0);
+  }
+  less(i, j) {
+    const a = this.heap[i], b = this.heap[j];
+    return a[0] < b[0] || a[0] === b[0] && a[1] < b[1];
+  }
+  push(cost, state) {
+    this.heap.push([cost, this.next++, state]);
+    for (let i = this.heap.length - 1; i > 0; ) {
+      const up = i - 1 >> 1;
+      if (!this.less(i, up)) break;
+      [this.heap[i], this.heap[up]] = [this.heap[up], this.heap[i]];
+      i = up;
+    }
+  }
+  pop() {
+    if (this.heap.length === 0) return null;
+    const top = this.heap[0], last = this.heap.pop();
+    if (this.heap.length > 0) {
+      this.heap[0] = last;
+      for (let i = 0; ; ) {
+        const l = 2 * i + 1, r = l + 1;
+        let m = i;
+        if (l < this.heap.length && this.less(l, m)) m = l;
+        if (r < this.heap.length && this.less(r, m)) m = r;
+        if (m === i) break;
+        [this.heap[i], this.heap[m]] = [this.heap[m], this.heap[i]];
+        i = m;
+      }
+    }
+    return [top[0], top[2]];
+  }
+};
+
 // src/connector.ts
 function portPoint(shape, port) {
   const r = frame(shape);
@@ -1304,7 +1575,7 @@ function routeThrough(p, c) {
     }
   }
 }
-function route(e, index) {
+function route2(e, index) {
   const c = e.connector;
   if (!c) return { kind: "polyline", points: [] };
   const [a, b] = endpoints(e, index);
@@ -1320,16 +1591,19 @@ function route(e, index) {
     case "elbow": {
       const startV = vertical(c.start.port) ?? !horizontal;
       const endV = vertical(c.end.port) ?? !horizontal;
+      let plain;
       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) {
+        plain = [a, { x: a.x, y: my }, { x: b.x, y: my }, b];
+      } else 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] };
+        plain = [a, { x: mx, y: a.y }, { x: mx, y: b.y }, b];
+      } else if (startV) plain = [a, { x: a.x, y: b.y }, b];
+      else plain = [a, { x: b.x, y: a.y }, b];
+      if (c.avoid !== true) return { kind: "polyline", points: plain };
+      const ends = new Set([c.start.elementID, c.end.elementID].filter((x) => x !== null));
+      const routed = avoiding(plain, a, b, startV, endV, index.values(), ends);
+      return { kind: "polyline", points: routed === plain ? plain : simplified(routed) };
     }
   }
 }
@@ -1340,7 +1614,7 @@ function arrowhead(tip, from, size) {
   return [wing(spread), wing(-spread)];
 }
 function connectorBounds(e, index) {
-  const pts = routePoints(route(e, index));
+  const pts = routePoints(route2(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) {
@@ -1352,7 +1626,7 @@ function connectorBounds(e, index) {
   return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
 }
 function midpoint(e, index) {
-  const pts = routePoints(route(e, index));
+  const pts = routePoints(route2(e, index));
   if (pts.length <= 1) return pts[0] ?? { x: 0, y: 0 };
   const lengths = [];
   let total = 0;
@@ -1372,9 +1646,17 @@ function midpoint(e, index) {
   }
   return pts[0];
 }
+var indexes = /* @__PURE__ */ new WeakMap();
+function isIndexOf(page, index) {
+  return indexes.get(page.elements)?.index === index;
+}
 function indexOf(page) {
+  const els = page.elements;
+  const hit = indexes.get(els);
+  if (hit && hit.members.length === els.length && hit.members.every((e, i) => e === els[i])) return hit.index;
   const m = /* @__PURE__ */ new Map();
-  for (const e of page.elements) if (!m.has(e.id)) m.set(e.id, e);
+  for (const e of els) if (!m.has(e.id)) m.set(e.id, e);
+  indexes.set(els, { members: [...els], index: m });
   return m;
 }
 
@@ -1457,43 +1739,112 @@ function packetID(flow, k) {
   return flow.slice(0, 24) + (n < 0 ? n + 2 ** 48 : n).toString(16).toUpperCase().padStart(12, "0");
 }
 var routeCost = (cost) => cost === null || !Number.isFinite(cost) ? 1 : Math.min(Math.max(cost, 0), 1e6);
-function flowTree(from, frame2, offline = /* @__PURE__ */ new Set()) {
-  const shapes2 = new Set(frame2.elements.filter((e) => e.kind !== "connector" && !offline.has(e.id)).map((e) => e.id));
-  if (!shapes2.has(from)) return null;
-  const next = /* @__PURE__ */ new Map();
-  const add2 = (a, edge) => {
-    const list = next.get(a);
-    if (list) list.push(edge);
-    else next.set(a, [edge]);
-  };
-  for (const e of frame2.elements) {
+var graphs = /* @__PURE__ */ new WeakMap();
+var networks = /* @__PURE__ */ new Map();
+function graphOf(frame2) {
+  const els = frame2.elements;
+  const hit = graphs.get(els);
+  if (hit && hit.members.length === els.length && hit.members.every((e, i) => e === els[i])) return hit.graph;
+  const shapes2 = new Set(els.filter((e) => e.kind !== "connector").map((e) => e.id));
+  const lines = [];
+  for (const e of els) {
     const c = e.connector;
-    const a = c?.start.elementID ?? null, b = c?.end.elementID ?? null;
-    if (!c || offline.has(e.id) || a === null || b === null || a === b || !shapes2.has(a) || !shapes2.has(b)) continue;
-    const cost = routeCost(c.cost);
-    add2(a, { to: b, via: e.id, back: false, cost });
-    if (c.startHead !== "none") add2(b, { to: a, via: e.id, back: true, cost });
+    if (c) lines.push([e.id, c.start.elementID, c.end.elementID, String(routeCost(c.cost)), c.startHead !== "none" ? "both" : "one"]);
+  }
+  const key = JSON.stringify([[...shapes2], lines]);
+  let graph = networks.get(key);
+  if (!graph) {
+    const next = /* @__PURE__ */ new Map();
+    const add2 = (a, edge) => {
+      const list = next.get(a);
+      if (list) list.push(edge);
+      else next.set(a, [edge]);
+    };
+    for (const e of els) {
+      const c = e.connector;
+      const a = c?.start.elementID ?? null, b = c?.end.elementID ?? null;
+      if (!c || a === null || b === null || a === b || !shapes2.has(a) || !shapes2.has(b)) continue;
+      const cost = routeCost(c.cost);
+      add2(a, { to: b, via: e.id, back: false, cost });
+      if (c.startHead !== "none") add2(b, { to: a, via: e.id, back: true, cost });
+    }
+    graph = { shapes: shapes2, next, trees: /* @__PURE__ */ new Map() };
+    if (networks.size >= 16) networks.clear();
+    networks.set(key, graph);
+  }
+  graphs.set(els, { members: [...els], graph });
+  return graph;
+}
+var Frontier2 = class {
+  constructor() {
+    __publicField(this, "heap", []);
+  }
+  get size() {
+    return this.heap.length;
+  }
+  less(i, j) {
+    const a = this.heap[i], b = this.heap[j];
+    return a.dist < b.dist || a.dist === b.dist && a.order < b.order;
+  }
+  swap(i, j) {
+    [this.heap[i], this.heap[j]] = [this.heap[j], this.heap[i]];
+  }
+  push(id, dist, order) {
+    this.heap.push({ id, dist, order });
+    for (let i = this.heap.length - 1; i > 0; ) {
+      const up = i - 1 >> 1;
+      if (!this.less(i, up)) break;
+      this.swap(i, up);
+      i = up;
+    }
+  }
+  pop() {
+    const top = this.heap[0], last = this.heap.pop();
+    if (this.heap.length > 0) {
+      this.heap[0] = last;
+      for (let i = 0; ; ) {
+        const l = 2 * i + 1, r = l + 1;
+        let m = i;
+        if (l < this.heap.length && this.less(l, m)) m = l;
+        if (r < this.heap.length && this.less(r, m)) m = r;
+        if (m === i) break;
+        this.swap(i, m);
+        i = m;
+      }
+    }
+    return top;
   }
+};
+function flowTree(from, frame2, offline = /* @__PURE__ */ new Set(), until) {
+  const graph = graphOf(frame2);
+  const key = JSON.stringify([from, until ?? null, [...offline].sort()]);
+  if (graph.trees.has(key)) return graph.trees.get(key);
+  const tree = grow(graph, from, offline, until);
+  if (graph.trees.size >= 4096) graph.trees.clear();
+  graph.trees.set(key, tree);
+  return tree;
+}
+function grow({ shapes: shapes2, next }, from, offline, until) {
+  if (!shapes2.has(from) || offline.has(from)) return null;
   const dist = /* @__PURE__ */ new Map([[from, 0]]), order = /* @__PURE__ */ new Map([[from, 0]]);
   let counter = 1;
   const tree = new FlowTree(from);
-  const open = [from];
-  while (open.length > 0) {
-    let best = 0;
-    for (let i = 1; i < open.length; i++) {
-      const da = dist.get(open[i]), db = dist.get(open[best]);
-      if (da < db || da === db && order.get(open[i]) < order.get(open[best])) best = i;
-    }
-    const n = open.splice(best, 1)[0];
+  const open = new Frontier2();
+  open.push(from, 0, 0);
+  while (open.size > 0) {
+    const { id: n, order: o } = open.pop();
+    if (tree.settled.has(n) || order.get(n) !== o) continue;
     tree.settled.add(n);
+    if (n === until && n !== from) break;
     for (const edge of next.get(n) ?? []) {
+      if (offline.has(edge.via) || offline.has(edge.to)) continue;
       if (tree.settled.has(edge.to)) continue;
       const d = dist.get(n) + edge.cost;
       const old = dist.get(edge.to);
       if (old !== void 0 && old <= d) continue;
-      if (old === void 0) open.push(edge.to);
       dist.set(edge.to, d);
-      order.set(edge.to, counter++);
+      order.set(edge.to, counter);
+      open.push(edge.to, d, counter++);
       tree.came.set(edge.to, { from: n, via: edge.via, back: edge.back });
     }
   }
@@ -1573,9 +1924,18 @@ function delayOf(e) {
 var queueKey = (shape, flow) => shape + "|" + flow;
 function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set(), sinceChange = null, carried = {}) {
   const since = Math.max(0, Math.min(sinceChange ?? t, 1e6));
-  const byID = /* @__PURE__ */ new Map();
-  for (const e of frame2.elements) if (!byID.has(e.id)) byID.set(e.id, e);
+  const byID = indexOf(frame2);
+  const traced = /* @__PURE__ */ new Map();
+  const traceOf = (c) => {
+    let pts = traced.get(c.id);
+    if (!pts) {
+      pts = tracing(c, frame2, byID).points;
+      traced.set(c.id, pts);
+    }
+    return pts;
+  };
   const metrics2 = emptyMetrics();
+  const routes = /* @__PURE__ */ new Map();
   for (const e of frame2.elements) {
     if (e.kind === "connector" && !e.connector) continue;
     metrics2.elements.set(e.id, { throughput: 0, load: null, delay: e.kind !== "connector" ? delayOf(e) : 0, backlog: 0, inFlight: 0, depth: 0 });
@@ -1587,7 +1947,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     if (c !== null && Number.isFinite(c)) room.set(e.id, Math.max(c, 0));
   }
   const full = () => new Set([...room].filter(([, v]) => v <= TINY).map(([id]) => id));
-  const route2 = (tree, goal) => {
+  const route3 = (tree, goal) => {
     const hops = [], shapes2 = [];
     let at = goal;
     for (let step = tree.came.get(at); step; step = tree.came.get(at)) {
@@ -1599,26 +1959,26 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     return { hops: hops.reverse(), shapes: shapes2.reverse() };
   };
   const way = (hops, shapes2) => {
-    const points = [], inside = [], stretches = [];
+    const points = [], inside2 = [], stretches = [];
     let length = 0;
     hops.forEach(([id, back], k) => {
       const c = byID.get(id);
       if (!c) return;
-      const line2 = back ? [...tracing(c, frame2).points].reverse() : tracing(c, frame2).points;
+      const line2 = back ? [...traceOf(c)].reverse() : traceOf(c);
       if (line2.length === 0) return;
       const last = points[points.length - 1];
       if (last) {
         const gap = Math.hypot(line2[0].x - last.x, line2[0].y - last.y);
         const shape = byID.get(shapes2[k]);
-        inside.push([length, length + gap, shape ? delayOf(shape) : 0]);
+        inside2.push([length, length + gap, shape ? delayOf(shape) : 0]);
         length += gap;
       }
-      const start = length;
+      const start2 = length;
       for (let q = 1; q < line2.length; q++) length += Math.hypot(line2[q].x - line2[q - 1].x, line2[q].y - line2[q - 1].y);
-      stretches.push([id, start, length]);
+      stretches.push([id, start2, length]);
       points.push(...line2);
     });
-    return length > 0 ? { line: new Polyline(points), length, inside, stretches } : null;
+    return length > 0 ? { line: new Polyline(points), length, inside: inside2, stretches } : null;
   };
   const along = (w, elapsedAt, speed) => {
     let elapsed = elapsedAt, d = 0;
@@ -1650,25 +2010,31 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
   const packets = [];
   const waitingBy = /* @__PURE__ */ new Map();
   const everyOf = (flow) => Math.min(Math.max(clamp(flow.every, DEFAULT_EVERY, 0.05, 60) * biggest / Math.max(amountIn(flow, values), TINY), 0.05), 60);
+  const bases = /* @__PURE__ */ new Map();
+  const baseTree = (from) => {
+    if (!bases.has(from)) bases.set(from, flowTree(from, frame2, offline));
+    return bases.get(from);
+  };
   for (const [i, flow] of list.entries()) {
     if (flow.when !== null && values !== null && !holds(flow.when, values)) continue;
     const source = byID.get(flow.from);
-    const base2 = source ? flowTree(flow.from, frame2, offline) : null;
+    const base2 = source ? baseTree(flow.from) : null;
+    routes.set(flow.id, []);
     if (!source || !base2) continue;
     const volume = amountIn(flow, values);
     const fm = { volume, placed: 0, backlog: 0, backup: 0, transit: null };
     const placements = [];
-    const waiting = [];
+    const waiting2 = [];
     const goals = base2.goals(flow.to, flow.spread === true);
     const shares = goals.length > 1 ? goals.map((g) => [[g], volume / goals.length]) : [[flow.to, volume]];
     for (const [candidates, share] of shares) {
       if (!(share > TINY)) continue;
       let left = share;
       for (let n = 0; n < 32 && left > TINY; n++) {
-        const tree = flowTree(flow.from, frame2, union2(offline, full()));
+        const tree = flowTree(flow.from, frame2, union2(offline, full()), candidates[0]);
         const goal2 = tree?.goals(candidates, false)[0];
         if (!tree || goal2 === void 0) break;
-        const r = route2(tree, goal2);
+        const r = route3(tree, goal2);
         const ids = [...r.shapes, ...r.hops.map(([id]) => id)];
         const rooms = ids.filter((id) => room.has(id)).map((id) => room.get(id));
         const fits = Math.min(left, rooms.length > 0 ? Math.min(...rooms) : Infinity);
@@ -1681,7 +2047,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
       let at = flow.from;
       const goal = base2.goals(candidates, false)[0];
       if (goal !== void 0) {
-        const r = route2(base2, goal), done = full();
+        const r = route3(base2, goal), done = full();
         const sequence = [[r.shapes[0], r.shapes[0]]];
         r.hops.forEach(([id], k) => {
           sequence.push([id, r.shapes[k]], [r.shapes[k + 1], r.shapes[k]]);
@@ -1705,18 +2071,25 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
           placements.push({ hops, shapes: shapes2, goal: at, amount: left, waits: true });
         }
       }
-      const existing = waiting.find(([s]) => s === at);
+      const existing = waiting2.find(([s]) => s === at);
       if (existing) existing[1] += left;
-      else waiting.push([at, left]);
-    }
-    waitingBy.set(flow.id, waiting);
+      else waiting2.push([at, left]);
+    }
+    waitingBy.set(flow.id, waiting2);
+    routes.set(flow.id, placements.map((p) => ({
+      goal: p.goal,
+      hops: p.hops,
+      amount: p.amount,
+      waits: p.waits === true,
+      cost: p.hops.reduce((s, [id]) => s + routeCost(byID.get(id)?.connector?.cost ?? null), 0)
+    })));
     for (const p of placements) {
       for (const id of [...p.shapes, ...p.hops.map(([h]) => h)]) bump(id, (m) => {
         m.throughput += p.amount;
       });
       if (!p.waits) fm.placed += p.amount;
     }
-    for (const [at, a] of waiting) {
+    for (const [at, a] of waiting2) {
       bump(at, (m) => {
         m.backlog += a;
       });
@@ -1761,10 +2134,12 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     metrics2.flows.set(flow.id, fm);
   }
   const piles = /* @__PURE__ */ new Map();
+  const carriedKeys = Object.keys(carried).filter((k) => carried[k] > TINY);
   for (const flow of list) {
-    const waiting = waitingBy.get(flow.id) ?? [];
-    const shapes2 = waiting.map(([s]) => s);
-    for (const e of frame2.elements) {
+    const waiting2 = waitingBy.get(flow.id) ?? [];
+    const shapes2 = waiting2.map(([s]) => s);
+    const suffix = "|" + flow.id;
+    if (carriedKeys.some((k) => k.endsWith(suffix))) for (const e of frame2.elements) {
       const c = carried[queueKey(e.id, flow.id)];
       if (c !== void 0 && c > TINY && !shapes2.includes(e.id)) shapes2.push(e.id);
     }
@@ -1778,7 +2153,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
       const shape = byID.get(at);
       if (!shape) return;
       const layer = byID.get(flow.from)?.layerID ?? shape.layerID;
-      const backlog = waiting.find(([s]) => s === at)?.[1] ?? 0;
+      const backlog = waiting2.find(([s]) => s === at)?.[1] ?? 0;
       const before = Math.max(0, carried[queueKey(at, flow.id)] ?? 0);
       let depth = before + backlog * since;
       if (backlog <= TINY && before > TINY) {
@@ -1787,10 +2162,10 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
         let total = 0;
         for (let n2 = 0; n2 < 32; n2++) {
           const blocked = new Set([...trial].filter(([, v]) => v <= TINY).map(([id]) => id));
-          const tree = flowTree(at, frame2, union2(offline, blocked));
+          const tree = flowTree(at, frame2, union2(offline, blocked), flow.to[0]);
           const goal = tree?.goals(flow.to, false)[0];
           if (!tree || goal === void 0) break;
-          const r = route2(tree, goal);
+          const r = route3(tree, goal);
           const ids = [...r.shapes.slice(1), ...r.hops.map(([id]) => id)];
           const rooms = ids.filter((id) => trial.has(id)).map((id) => trial.get(id));
           const spare = rooms.length > 0 ? Math.min(...rooms) : Infinity;
@@ -1845,7 +2220,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     if (c === null || !Number.isFinite(c) || !m) continue;
     m.load = c > 0 ? m.throughput / c : 1;
   }
-  return { packets, metrics: metrics2 };
+  return { packets, metrics: metrics2, routes };
 }
 var BLANK = {
   seed: 1,
@@ -1900,21 +2275,21 @@ function metricLookup(m, frame2) {
     return id === null ? null : metricValue(m, term.metric, id);
   };
 }
-function finishing(elements, metrics2, values, frame2, flows, since = Infinity, carried = {}) {
+function finishPlan(elements, metrics2, values, frame2, since = Infinity, carried = {}) {
   const lookup = metricLookup(metrics2, frame2);
-  const out = [], readings = {};
-  for (let e of elements) {
+  const plan2 = [], readings = {};
+  for (const e of elements) {
+    const applied = [];
     if (values !== null && e.overrides) {
-      for (const o of e.overrides) {
-        const own = e.id;
-        if (mentionsMetric(o.when) && holds(o.when, values, (m) => lookup(m, own))) e = applyOverride(looksOnly(o), e);
-      }
+      e.overrides.forEach((o, k) => {
+        if (mentionsMetric(o.when) && holds(o.when, values, (m) => lookup(m, e.id))) applied.push(k);
+      });
     }
-    if (!e.gauge || values === null) {
-      out.push(e);
+    const g = values === null ? null : e.gauge;
+    if (!g) {
+      plan2.push({ applied, gauge: null });
       continue;
     }
-    const g = e.gauge;
     let shown = metricValue(metrics2, g.metric, g.of);
     const then = carried[gaugeKey(e.id)];
     if (shown !== null && then !== void 0 && g.metric !== "depth" && g.metric !== "inFlight" && since < GAUGE_EASE) {
@@ -1922,22 +2297,33 @@ function finishing(elements, metrics2, values, frame2, flows, since = Infinity,
       shown = then + (shown - then) * smooth;
     }
     if (shown !== null) readings[gaugeKey(e.id)] = shown;
-    out.push(...gauge(e, g, shown, frame2, flows));
+    plan2.push({ applied, gauge: { value: shown } });
   }
+  return { plan: plan2, readings };
+}
+function finishing(elements, metrics2, values, frame2, flows, since = Infinity, carried = {}) {
+  const { plan: plan2, readings } = finishPlan(elements, metrics2, values, frame2, since, carried);
+  const out = [];
+  elements.forEach((e, i) => {
+    for (const k of plan2[i].applied) e = applyOverride(looksOnly(e.overrides[k]), e);
+    const g = plan2[i].gauge;
+    if (g && e.gauge) out.push(...gauge(e, e.gauge, g.value, frame2, flows));
+    else out.push(e);
+  });
   return { elements: out, readings };
 }
 var gaugeKey = (id) => "gauge|" + id;
 var GAUGE_EASE = 1;
-var hex = (h) => {
+var hex2 = (h) => {
   const v = parseInt(h.slice(1), 16);
   return { r: (v >> 16 & 255) / 255, g: (v >> 8 & 255) / 255, b: (v & 255) / 255, a: 1 };
 };
-var GAUGE_GREEN = hex("#16a34a");
-var GAUGE_AMBER = hex("#d97706");
-var GAUGE_RED = hex("#dc2626");
-var GAUGE_BLUE = hex("#2f6fdf");
-var GAUGE_TRACK = hex("#e5e7eb");
-var GAUGE_GRAY = hex("#9ca3af");
+var GAUGE_GREEN = hex2("#16a34a");
+var GAUGE_AMBER = hex2("#d97706");
+var GAUGE_RED = hex2("#dc2626");
+var GAUGE_BLUE = hex2("#2f6fdf");
+var GAUGE_TRACK = hex2("#e5e7eb");
+var GAUGE_GRAY = hex2("#9ca3af");
 function formatted(metric, v) {
   if (v === null || !Number.isFinite(v)) return "\u2013";
   switch (metric) {
@@ -2069,7 +2455,7 @@ function line(a, b, rng, roughness, bowing, preserveEnds, into) {
     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 start2 = preserveEnds ? a : (() => {
       const x = a.x + j();
       return { x, y: a.y + j() };
     })();
@@ -2081,7 +2467,7 @@ function line(a, b, rng, roughness, bowing, preserveEnds, into) {
     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.moveTo(start2);
     into.curveTo(end, { x: c1x, y: c1y }, { x: c2x, y: c2y });
   }
 }
@@ -2223,17 +2609,17 @@ function clusterStrokes(c, angle2, size) {
   });
 }
 function contains(contours, p) {
-  let inside = false;
+  let inside2 = 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;
+      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) inside2 = !inside2;
       k = i;
     }
   }
-  return inside;
+  return inside2;
 }
 function distance(p, contours) {
   let best = Infinity;
@@ -2342,10 +2728,10 @@ var Cache = class {
     __publicField(this, "limit");
     this.limit = limit;
   }
-  get(key, make) {
+  get(key, make2) {
     const hit = this.map.get(key);
     if (hit !== void 0) return hit;
-    const v = make();
+    const v = make2();
     if (this.map.size >= this.limit) this.map.clear();
     this.map.set(key, v);
     return v;
@@ -2510,7 +2896,7 @@ function connectorParts(e, index, page) {
   const c = e.connector;
   if (!c) return [new Path(), new Path()];
   const [a, b] = endpoints(e, index);
-  const r = route(e, index);
+  const r = route2(e, index);
   const hops = c.hops === true && page ? hopCrossings(e, r, page, index) : [];
   const key = [
     e.seed,
@@ -2569,26 +2955,59 @@ function subCubic(p, t0, t1) {
   const left = split(p, t1)[0];
   return t1 > 0 ? split(left, t0 / t1)[1] : [p[0], p[0], p[0], p[0]];
 }
+function boxOf(pts) {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  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 { x0, y0, x1, y1 };
+}
+function touching(a, b) {
+  const eps = 1e-6;
+  return a.x0 <= b.x1 + eps && b.x0 <= a.x1 + eps && a.y0 <= b.y1 + eps && b.y0 <= a.y1 + eps;
+}
+var hopFrames = /* @__PURE__ */ new WeakMap();
+function linesBeneath(e, page, index) {
+  let f = hopFrames.get(index);
+  if (!f || f.layers !== page.layers || !isIndexOf(page, index)) {
+    const visible = new Set(page.layers.filter((l) => l.visible).map((l) => l.id));
+    const first = /* @__PURE__ */ new Map(), under = [];
+    for (const o of orderedElements(page)) {
+      if (!first.has(o.id)) first.set(o.id, under.length);
+      if (o.kind === "connector" && visible.has(o.layerID)) under.push(o);
+    }
+    f = { layers: page.layers, first, under, lines: [] };
+    if (isIndexOf(page, index)) hopFrames.set(index, f);
+  }
+  const count = f.first.get(e.id) ?? f.under.length;
+  while (f.lines.length < count) {
+    const points = routePoints(route2(f.under[f.lines.length], index));
+    f.lines.push({ points, box: boxOf(points) });
+  }
+  return { lines: f.lines, count };
+}
 function hopCrossings(e, r, page, index) {
   const segments = hopSamples(r);
   if (segments.length === 0) return [];
-  const visible = new Set(page.layers.filter((l) => l.visible).map((l) => l.id));
-  const beneath = [];
-  for (const o of orderedElements(page)) {
-    if (o.id === e.id) break;
-    if (o.kind !== "connector" || !visible.has(o.layerID)) continue;
-    beneath.push(routePoints(route(o, index)));
-  }
+  const { lines, count } = linesBeneath(e, page, index);
   const rad = hopRadius(e.style.strokeWidth);
   const out = [];
   for (const samples of segments) {
     const along = runningLengths(samples);
     const length = along[along.length - 1];
     const found = [];
+    const near = [];
+    const whole = boxOf(samples);
+    for (let n = 0; n < count; n++) if (touching(whole, lines[n].box)) near.push(lines[n]);
     for (let i = 0; i < samples.length - 1; i++) {
       const p = samples[i], q = samples[i + 1];
       const dx = q.x - p.x, dy = q.y - p.y;
-      for (const line2 of beneath) {
+      const box = boxOf([p, q]);
+      for (const { points: line2, box: lineBox } of near) {
+        if (!touching(box, lineBox)) continue;
         for (let k = 0; k < line2.length - 1; k++) {
           const a = line2[k], b = line2[k + 1];
           const ex = b.x - a.x, ey = b.y - a.y;
@@ -2868,8 +3287,8 @@ function followSpan(track, t) {
   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))));
+function tracing(e, page, index = indexOf(page)) {
+  if (e.kind === "connector") return new Polyline(routePoints(route2(e, index)));
   const clean = cloneElement(e);
   clean.style.roughness = 0;
   const pts = outline(clean).contours()[0] ?? [];
@@ -2879,9 +3298,10 @@ 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);
+  const index = indexOf(page);
+  const pathElement = index.get(f.path);
   if (!pathElement || pathElement.id === e.id) return e;
-  const line2 = tracing(pathElement, page);
+  const line2 = tracing(pathElement, page, index);
   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);
@@ -3136,17 +3556,30 @@ function symbolPage(s) {
 function hasInstances(page) {
   return page.elements.some((e) => e.kind === "symbol");
 }
-function expandingSymbols(page, t, posing = true, times = /* @__PURE__ */ new Map()) {
+var Expansions = class {
+  constructor(page, t, posing) {
+    __publicField(this, "page");
+    __publicField(this, "t");
+    __publicField(this, "posing");
+    /** For each instance: its time override, the budget it found and left, and what it made. */
+    __publicField(this, "made", /* @__PURE__ */ new Map());
+    this.page = page;
+    this.t = t;
+    this.posing = posing;
+  }
+};
+function expandingSymbols(page, t, posing = true, times = /* @__PURE__ */ new Map(), memo2) {
   if (!hasInstances(page)) return page;
   const budget = { left: MAX_ELEMENTS };
-  return { ...page, elements: expand(page.elements, page, t, symbolTable(page), [], posing, budget, times) };
+  const m = memo2 && memo2.page === page && memo2.t === t && memo2.posing === posing ? memo2 : void 0;
+  return { ...page, elements: expand(page.elements, page, t, symbolTable(page), [], posing, budget, times, m) };
 }
 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()) {
+function expand(elements, page, t, table, stack, posing, budget, times = /* @__PURE__ */ new Map(), memo2) {
   const instances = new Set(elements.filter((e) => e.kind === "symbol").map((e) => e.id));
   if (instances.size === 0) {
     budget.left -= elements.length;
@@ -3171,6 +3604,14 @@ function expand(elements, page, t, table, stack, posing, budget, times = /* @__P
       budget.left -= 1;
       continue;
     }
+    const override0 = stack.length === 0 ? times.get(e.id) : void 0;
+    const was = memo2?.made.get(e);
+    if (was && was.override === override0 && was.after > 0 && budget.left - (was.before - was.after) > 0) {
+      budget.left -= was.before - was.after;
+      for (const x of was.out) out.push(x);
+      continue;
+    }
+    const before = budget.left, from = out.length;
     budget.left -= 1;
     const id = e.symbol;
     const symbol = id === null ? void 0 : table.get(id);
@@ -3186,6 +3627,7 @@ function expand(elements, page, t, table, stack, posing, budget, times = /* @__P
       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));
+    if (memo2 && stack.length === 0 && !was) memo2.made.set(e, { override: override0, before, after: budget.left, out: out.slice(from) });
   }
   return out;
 }
@@ -3238,8 +3680,8 @@ function mix2(x) {
   return z ^ z >> 31n;
 }
 function halves(id) {
-  const hex2 = id.replace(/-/g, "").padStart(32, "0").slice(-32);
-  return [BigInt(`0x${hex2.slice(0, 16)}`), BigInt(`0x${hex2.slice(16)}`)];
+  const hex3 = id.replace(/-/g, "").padStart(32, "0").slice(-32);
+  return [BigInt(`0x${hex3.slice(0, 16)}`), BigInt(`0x${hex3.slice(16)}`)];
 }
 function derivedID(instance, inner) {
   const [a, b] = halves(instance), [c, d] = halves(inner);
@@ -3453,13 +3895,13 @@ function blocks(lines) {
   flush();
   return out;
 }
-function parseList(lines, start) {
-  const first = reItem.exec(lines[start]);
+function parseList(lines, start2) {
+  const first = reItem.exec(lines[start2]);
   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;
+  let i = start2;
   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;
@@ -3567,12 +4009,23 @@ function inline(src, style2 = {}) {
       i += m[0].length;
       continue;
     }
-    if (m = /^(\*\*|__)(?=\S)([\s\S]*?\S)\1/.exec(rest)) {
+    if (m = /^(\*\*\*|___)(?=\S)([\s\S]*?\S)\1(?!\*|_)/.exec(rest)) {
       emit();
-      out.push(...inline(m[2], { ...style2, bold: true }));
+      out.push(...inline(m[2], { ...style2, bold: true, italic: true }));
       i += m[0].length;
       continue;
     }
+    if (m = /^(\*\*|__)(?=\S)([\s\S]*?\S)\1/.exec(rest)) {
+      let body = m[2], length = m[0].length;
+      if (m[1] === "**" && rest[length] === "*" && (body.replace(/\*\*/g, "").match(/\*/g) ?? []).length % 2 === 1) {
+        body += "*";
+        length++;
+      }
+      emit();
+      out.push(...inline(body, { ...style2, bold: true }));
+      i += 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], { ...style2, italic: true }));
@@ -3788,10 +4241,10 @@ function layoutLines(paras, width, height, fontSize, fam) {
     let k = 0;
     let firstLine = true;
     while (k < chars.length || firstLine && chars.length === 0) {
-      const start = firstLine ? p.firstIndent : p.indent;
+      const start2 = firstLine ? p.firstIndent : p.indent;
       const maxX2 = width;
       const glyphs = [];
-      let x = start, lastSpace = -1, end = k;
+      let x = start2, lastSpace = -1, end = k;
       for (; end < chars.length; end++) {
         const { ch, run } = chars[end];
         const r = runs[run];
@@ -3840,7 +4293,7 @@ function layoutLines(paras, width, height, fontSize, fam) {
       }
       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], fam) });
+        glyphs.push({ ch, run, x: start2, w: charWidth(ch, runs[run], fam) });
         end = k + 1;
       }
       let asc = 0, desc = 0, lead = 0;
@@ -3866,13 +4319,38 @@ function layoutLines(paras, width, height, fontSize, fam) {
   });
   return lines;
 }
+var Memo = class {
+  constructor(limit) {
+    __publicField(this, "map", /* @__PURE__ */ new Map());
+    __publicField(this, "limit");
+    this.limit = limit;
+  }
+  get(key, make2) {
+    const hit = this.map.get(key);
+    if (hit !== void 0) return hit;
+    const v = make2();
+    if (this.map.size >= this.limit) this.map.clear();
+    this.map.set(key, v);
+    return v;
+  }
+};
+var layouts = new Memo(500);
+var markups = new Memo(500);
 function noteMarkup(source, e) {
+  const st = e.style, ink = st.stroke;
+  const key = JSON.stringify([...[e.x, e.y, e.width, e.height, st.fontSize, ink.r, ink.g, ink.b, ink.a].map(String), st.font ?? "", source]);
+  return markups.get(key, () => computeNoteMarkup(source, e));
+}
+function computeNoteMarkup(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 fam = familyMetrics(e.style.font);
-  const b = new Builder(e.style.fontSize, rect2.width, fam);
-  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, fam);
+  const layoutKey = JSON.stringify([...[rect2.width, rect2.height, e.style.fontSize].map(String), e.style.font ?? "", source]);
+  const lines = layouts.get(layoutKey, () => {
+    const b = new Builder(e.style.fontSize, rect2.width, fam);
+    for (const block of parseBlocks(source)) b.block(block, { indent: 0, marker: null, quote: null, listDepth: 0 });
+    return layoutLines(b.paras, rect2.width, rect2.height, e.style.fontSize, fam);
+  });
   const ink = color(e.style.stroke);
   let s = "";
   const marks = [];
@@ -3931,20 +4409,6 @@ 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/svg.ts
 function bounds(page, padding = 24) {
   if (hasInstances(page)) return bounds(expandingSymbols(page, 0), padding);
@@ -3961,6 +4425,26 @@ function bounds(page, padding = 24) {
   return inset(r, -padding, -padding);
 }
 function plan(page) {
+  const hit = plans.get(page);
+  if (hit && unchanged(page, hit.fields)) return hit.plan;
+  const made = makePlan(page);
+  plans.set(page, { fields: { ...page }, plan: made });
+  return made;
+}
+var plans = /* @__PURE__ */ new WeakMap();
+function hasPlan(page) {
+  const hit = plans.get(page);
+  return !!hit && unchanged(page, hit.fields);
+}
+function rememberPlan(page, made) {
+  plans.set(page, { fields: { ...page }, plan: made });
+}
+function unchanged(page, fields) {
+  const a = page, b = fields;
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((k) => a[k] === b[k]);
+}
+function makePlan(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);
@@ -3988,9 +4472,9 @@ function svgOpen(b, background, paint) {
   }
   return out;
 }
-function svgParts(page, background, fixed, links = false) {
-  if (hasInstances(page)) return svgParts(expandingSymbols(page, 0), background, fixed, links);
-  const theme = themeNamed(page.theme);
+function svgParts(page, background, fixed, links = false, only) {
+  if (hasInstances(page)) return svgParts(expandingSymbols(page, 0), background, fixed, links, only);
+  const theme = pageTheme(page);
   const bg = background ? theme?.background ?? background : null;
   const ink = theme?.ink ?? black;
   const d = { ...page, elements: page.elements.map((e) => resolvingInk(e, ink)) };
@@ -4000,11 +4484,11 @@ function svgParts(page, background, fixed, links = false) {
   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"/>
+  const rockMarkup = only && !only("rock") ? "" : 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;
+    if (!visible.has(e.layerID) || only && !only(e.id)) continue;
     const alpha = Math.min(Math.max(e.style.opacity ?? 1, 0), 1);
     if (alpha <= 0) continue;
     let body = svgElement(e, index, bg, d);
@@ -4026,7 +4510,7 @@ ${body}</a>
 }
 function svg(page, background = { r: 1, g: 1, b: 1, a: 1 }, fixed) {
   const { bounds: b, parts } = svgParts(page, background, fixed, true);
-  return svgOpen(b, themeNamed(page.theme)?.background ?? background, background !== null) + parts.map((p) => p.markup).join("") + "</svg>\n";
+  return svgOpen(b, pageTheme(page)?.background ?? background, background !== null) + parts.map((p) => p.markup).join("") + "</svg>\n";
 }
 function labelRect(e, index) {
   const m = midpoint(e, index);
@@ -4120,7 +4604,7 @@ function svgElement(e, index, labelBackground, page) {
       }
       s += `<path d="${outline(e).data()}" fill="none" ${strokeAttrs}/>
 `;
-      if (text) s += e.kind === "note" ? noteMarkup(text, e) : textElement(text, e.kind === "path" ? pathLabelBox(e) : frame(e), e, true);
+      if (text) s += e.kind === "note" ? noteMarkup(text, e) : textElement(text, e.kind === "path" || e.kind === "rectangle" ? pathLabelBox(e) : frame(e), e, true);
       return s;
     }
     default:
@@ -4152,6 +4636,95 @@ function textElement(text, f, e, centered) {
   return s + "</text>\n";
 }
 
+// src/planner.ts
+var WORKER_WORK = 3e4;
+function planWork(page) {
+  const tl = page.timeline;
+  if (!tl || tl.camera?.some((k) => k.width > 1 && k.height > 1)) return 0;
+  const elements = page.elements.length + (page.symbols ?? []).reduce((n, s) => n + s.elements.length, 0);
+  return frameTimes(tl).length * elements;
+}
+function workerMaker() {
+  if (typeof Worker === "undefined" || typeof __DOTTIE_WORKER__ === "undefined") return null;
+  if (__DOTTIE_WORKER__ === "self" && typeof dottiePlayerScript === "function") {
+    const source = `(${dottiePlayerScript.toString()})();
+`;
+    return () => {
+      const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
+      try {
+        return new Worker(url);
+      } finally {
+        setTimeout(() => URL.revokeObjectURL(url), 6e4);
+      }
+    };
+  }
+  if (__DOTTIE_WORKER__ === "sibling") {
+    const here = import.meta.url;
+    if (!here) return null;
+    return () => new Worker(new URL("./dottie-player.min.js", here));
+  }
+  return null;
+}
+var make;
+var worker = null;
+var failed = false;
+var nextID = 1;
+var waiting = /* @__PURE__ */ new Map();
+function plansInWorker(page) {
+  if (failed || hasPlan(page) || planWork(page) < WORKER_WORK) return false;
+  if (make === void 0) make = workerMaker();
+  return make !== null;
+}
+function planInWorker(page) {
+  return new Promise((resolve2) => {
+    const done = (p) => {
+      if (p) rememberPlan(page, p);
+      resolve2();
+    };
+    let w;
+    try {
+      w = worker ?? start();
+    } catch {
+      failed = true;
+      done(null);
+      return;
+    }
+    const id = nextID++;
+    waiting.set(id, { page, done });
+    try {
+      w.postMessage({ dottiePlan: id, page });
+    } catch {
+      waiting.delete(id);
+      done(null);
+    }
+  });
+}
+function start() {
+  const w = make();
+  w.onmessage = (ev) => {
+    const { dottiePlan: id, plan: p } = ev.data ?? {};
+    const job = id === void 0 ? void 0 : waiting.get(id);
+    if (!job) return;
+    waiting.delete(id);
+    job.done(p ?? null);
+    if (waiting.size === 0 && worker === w) {
+      w.terminate();
+      worker = null;
+    }
+  };
+  w.onerror = (ev) => {
+    ev.preventDefault?.();
+    failed = true;
+    if (worker === w) worker = null;
+    w.terminate();
+    const jobs = [...waiting.values()];
+    waiting.clear();
+    for (const job of jobs) job.done(null);
+  };
+  worker = w;
+  return w;
+}
+
 // src/player.ts
 var WHITE = { r: 1, g: 1, b: 1, a: 1 };
 function pageIndex(file, spec) {
@@ -4221,7 +4794,7 @@ var Playback = class {
     __publicField(this, "order", []);
     __publicField(this, "frame", -1);
     __publicField(this, "onFrame", null);
-    this.page = options.clean ? withRoughness(page, 0) : page;
+    this.page = options.clean ? cleanCopy(page) : page;
     addFonts(usedFonts(this.page));
     this.plan = plan(this.page);
     this.clicks = clickTargets(page, options.file);
@@ -4259,7 +4832,7 @@ var Playback = class {
     this.sceneNames = (page.timeline?.markers ?? []).map((m) => m.name);
     this.sceneLoops = (page.timeline?.markers ?? []).map((m) => m.loop === true);
     this.state = { ...page.variables ?? {} };
-    const theme = themeNamed(page.theme);
+    const theme = pageTheme(page);
     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";
@@ -4298,7 +4871,7 @@ var Playback = class {
   }
   /** 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;
+    for (const [id, start2] of this.replayStarts) if (now - start2 < (this.replays.get(id) ?? 0) * 1e3) return true;
     return false;
   }
   /** Draws the last moment drawn again, for copies replaying while the page stands still. */
@@ -4311,17 +4884,24 @@ var Playback = class {
     const r = this.plan.rects[Math.min(i, this.plan.rects.length - 1)];
     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));
+    for (const [id, start2] of this.replayStarts) times.set(id, Math.min((now - start2) / 1e3, this.replays.get(id) ?? 0));
     const tc = clampTime(t);
     const pose = posed(this.page, tc, this.state, this.sinceChange(now), this.carried);
-    const frame2 = expandingSymbols(pose, tc, true, times);
+    const made = new Expansions(pose, tc, true);
+    const frame2 = expandingSymbols(pose, tc, true, times, made);
     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 state = (st) => st.size === 0 ? /* @__PURE__ */ new Map() : owned(/* @__PURE__ */ new Map(), svgParts(
+      expandingSymbols(pose, tc, true, new Map([...times, ...st]), made),
+      this.background,
+      r,
+      false,
+      (key) => st.has(this.owner.get(key) ?? "")
+    ).parts);
+    const hover = this.hoverIDs.size === 0 ? /* @__PURE__ */ new Map() : owned(/* @__PURE__ */ new Map(), svgParts(hovered(frame2, this.hoverIDs), this.background, r, false, (key) => this.hoverIDs.has(key)).parts);
     const over = state(this.overTimes), down = state(this.downTimes), hit = state(this.hitTimes);
     const normal = owned(/* @__PURE__ */ new Map(), parts);
     const merged = [];
@@ -4450,6 +5030,14 @@ ${h}</g>
     return { frame: next, stop: entered >= 0 && !this.sceneLoops[entered] };
   }
 };
+var cleanCopies = /* @__PURE__ */ new WeakMap();
+function cleanCopy(page) {
+  const hit = cleanCopies.get(page);
+  if (hit && unchanged(page, hit.fields)) return hit.page;
+  const clean = withRoughness(page, 0);
+  cleanCopies.set(page, { fields: { ...page }, page: clean });
+  return clean;
+}
 var ElementBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
 var DottiePlayer = class extends ElementBase {
@@ -4472,6 +5060,10 @@ var DottiePlayer = class extends ElementBase {
     __publicField(this, "raf", 0);
     __publicField(this, "replayRaf", 0);
     __publicField(this, "loadToken", 0);
+    /** Counts mounts, so a plan that comes back from a worker after a newer one is dropped. */
+    __publicField(this, "mountToken", 0);
+    /** The time a still shows; null while the drawing is animated. */
+    __publicField(this, "stillTime", null);
     __publicField(this, "visible", true);
     __publicField(this, "observer", null);
     this.root = this.attachShadow({ mode: "open" });
@@ -4548,9 +5140,19 @@ var DottiePlayer = class extends ElementBase {
         text = inline2.textContent ?? "";
       }
       if (token !== this.loadToken) return;
-      this.setFile(parseDottie(text));
+      this.showFile(parseDottie(text));
     } catch (err) {
       if (token !== this.loadToken) return;
+      this.setPlaying(false);
+      cancelAnimationFrame(this.raf);
+      cancelAnimationFrame(this.replayRaf);
+      this.raf = 0;
+      this.replayRaf = 0;
+      this.playback = null;
+      this.file = null;
+      this.mountToken++;
+      this.stillTime = null;
+      this.bar.hidden = true;
       this.stage.innerHTML = "";
       const box = document.createElement("div");
       box.className = "error";
@@ -4561,15 +5163,35 @@ var DottiePlayer = class extends ElementBase {
   }
   /** Shows an already-parsed file. */
   setFile(file) {
+    this.loadToken++;
+    this.showFile(file);
+  }
+  showFile(file) {
     this.file = file;
     for (const w of file.warnings) console.warn(`dottie-player: ${w}`);
-    this.mount();
-    this.dispatchEvent(new CustomEvent("load", { detail: { file } }));
+    this.mount(() => this.dispatchEvent(new CustomEvent("load", { detail: { file } })));
   }
-  mount() {
+  /** Shows the file's page; then `mounted`. A big animation is planned in a worker first (planner.ts), and what was
+   * showing stays until it is ready; a newer mount, file or failed load in the meantime wins. */
+  mount(mounted) {
     const file = this.file;
     const page = file.pages[pageIndex(file, this.getAttribute("page"))];
-    const p = new Playback(page, this.stage, { clean: this.hasAttribute("clean"), file });
+    const clean = this.hasAttribute("clean");
+    const token = ++this.mountToken;
+    const shown = clean ? cleanCopy(page) : page;
+    if (!plansInWorker(shown)) {
+      this.mountPage(file, page, clean);
+      mounted?.();
+      return;
+    }
+    void planInWorker(shown).then(() => {
+      if (token !== this.mountToken || this.file !== file) return;
+      this.mountPage(file, page, clean);
+      mounted?.();
+    });
+  }
+  mountPage(file, page, clean) {
+    const p = new Playback(page, this.stage, { clean, file });
     p.still = this.hasAttribute("at");
     this.playback = p;
     this.style.setProperty("--dottie-page", color(p.background));
@@ -4592,10 +5214,14 @@ var DottiePlayer = class extends ElementBase {
       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);
+      const i = at !== null ? nearest(p, Number(at) || 0) : p.posterFrame;
+      this.stillTime = at !== null ? Number(at) || 0 : posterTime(page);
+      p.drawAt(this.stillTime, i);
+      p.frame = i;
       this.setPlaying(false);
       return;
     }
+    this.stillTime = null;
     p.show(0);
     const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (reduced) {
@@ -4609,8 +5235,10 @@ var DottiePlayer = class extends ElementBase {
   get paused() {
     return !this.playing;
   }
+  /** The moment shown: a still's own time (its `at`, or the poster), else the current frame's. */
   get currentTime() {
     const p = this.playback;
+    if (p && this.stillTime !== null) return this.stillTime;
     return p && p.frame >= 0 ? p.plan.times[p.frame] : 0;
   }
   set currentTime(t) {
@@ -4858,7 +5486,7 @@ function inspectFrame(page, t) {
       const [a, b] = endpoints(e, index);
       d.start = pt(a);
       d.end = pt(b);
-      d.route = routePoints(route(e, index)).map(pt);
+      d.route = routePoints(route2(e, index)).map(pt);
     }
     return d;
   });
@@ -4897,7 +5525,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.8.0";
+var VERSION = "0.10.0";
 export {
   BOIL_DRAWINGS,
   BUNDLED_FONTS,
@@ -4933,6 +5561,8 @@ export {
   luminance,
   orderedElements,
   pageIndex,
+  pageTheme,
+  paletteColor,
   parseDottie,
   plan,
   posterTime,