@phin-tech/dottie 0.7.0 → 0.9.0

package/dist/dottie-player.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.7.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.9.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value2) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key] = value2;
 var __export = (target, all) => {
@@ -71,10 +71,53 @@ var MAX_NAME = 64;
 function isName(name) {
   return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
 }
+var METRIC_NAMES = ["throughput", "load", "delay", "backlog", "depth", "inFlight", "transit", "backup"];
+var OPS = [">=", "<=", "==", "!=", ">", "<"];
+function metricTerm(term) {
+  const t = trim(term);
+  if (!t.includes("(")) {
+    const op2 = t.search(/[>=<!]/);
+    if (op2 < 0) return null;
+    const name2 = trim(t.slice(0, op2));
+    if (!METRIC_NAMES.includes(name2)) return null;
+    const m = metricTerm(name2 + "() " + t.slice(op2));
+    return m ? { ...m, target: "" } : null;
+  }
+  const open = t.indexOf("("), close = t.indexOf(")");
+  if (open < 0 || close < 0 || open >= close) return null;
+  const name = trim(t.slice(0, open)), target = trim(t.slice(open + 1, close));
+  let rest = trim(t.slice(close + 1));
+  if (!METRIC_NAMES.includes(name) || target.includes("(")) return null;
+  const op = OPS.find((o) => rest.startsWith(o));
+  if (op === void 0) return null;
+  rest = trim(rest.slice(op.length));
+  if (!/^-?[0-9]+(\.[0-9]+)?$/.test(rest)) return null;
+  return { metric: name, target, op, value: Number(rest) };
+}
+function passes(m, v) {
+  switch (m.op) {
+    case ">":
+      return v > m.value;
+    case ">=":
+      return v >= m.value;
+    case "<":
+      return v < m.value;
+    case "<=":
+      return v <= m.value;
+    case "==":
+      return v === m.value;
+    default:
+      return v !== m.value;
+  }
+}
+function mentionsMetric(condition) {
+  return condition.split("||").some((any) => any.split("&&").some((all) => metricTerm(all) !== null));
+}
 function conditionNames(condition) {
   const out = [];
   for (const any of condition.split("||")) {
     for (const all of any.split("&&")) {
+      if (metricTerm(all) !== null) continue;
       let term = trim(all);
       if (term.startsWith("!")) term = trim(term.slice(1));
       if (!isName(term)) return null;
@@ -83,9 +126,14 @@ function conditionNames(condition) {
   }
   return out;
 }
-function holds(condition, state) {
+function holds(condition, state, metric = null) {
   if (conditionNames(condition) === null) return false;
   return condition.split("||").some((any) => any.split("&&").every((all) => {
+    const m = metricTerm(all);
+    if (m !== null) {
+      const v = metric ? metric(m) : null;
+      return v !== null && passes(m, v);
+    }
     let term = trim(all);
     let negated = false;
     if (term.startsWith("!")) {
@@ -107,11 +155,40 @@ function stateHidden(page, choice) {
   for (const e of page.elements) if (e.when !== null && !holds(e.when, values)) out.add(e.id);
   return out;
 }
+function activeOverrides(e, values) {
+  if (!values || !e.overrides) return [];
+  return e.overrides.filter((o) => !mentionsMetric(o.when) && holds(o.when, values));
+}
+function looksOnly(o) {
+  return { ...o, reroute: null, offline: null, cost: null, capacity: null, delay: null };
+}
+function applyOverride(o, e) {
+  const out = cloneElement(e);
+  if (o.stroke) out.style.stroke = { ...o.stroke };
+  if (o.fill) out.style.fill = { ...o.fill };
+  if (o.textColor) out.style.textColor = { ...o.textColor };
+  if (o.strokeWidth !== null) out.style.strokeWidth = Math.max(0, o.strokeWidth);
+  if (o.dash !== null) out.style.dash = o.dash;
+  if (o.text !== null) out.text = o.text;
+  if (o.cost !== null && out.connector) out.connector.cost = Math.min(Math.max(o.cost, 0), 1e6);
+  if (o.capacity !== null) out.capacity = Math.max(o.capacity, 0);
+  if (o.delay !== null && out.kind !== "connector") out.delay = Math.max(o.delay, 0);
+  if (o.opacity !== null) {
+    const v = Math.min(Math.max(o.opacity, 0), 1) * (out.style.opacity ?? 1);
+    out.style.opacity = v >= 1 ? null : v;
+  }
+  return out;
+}
 function changesState(c) {
-  return !!c && (Object.keys(c.set ?? {}).length > 0 || (c.toggle ?? []).length > 0);
+  return !!c && (c.reset === true || Object.keys(c.set ?? {}).length > 0 || (c.toggle ?? []).length > 0);
 }
-function applyClick(c, state) {
-  const out = { ...state };
+function applyClick(c, state, initial = {}) {
+  let out = { ...state };
+  if (c.reset === true) {
+    out = {};
+    for (const k of Object.keys(state)) out[k] = false;
+    Object.assign(out, initial);
+  }
   for (const [k, v] of Object.entries(c.set ?? {})) out[k] = v;
   for (const k of c.toggle ?? []) out[k] = !(out[k] ?? false);
   return out;
@@ -126,7 +203,9 @@ var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand",
 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"],
+  page: ["id", "name", "layers", "elements", "theme", "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"],
@@ -155,6 +234,7 @@ var KNOWN_FIELDS = {
     "click",
     "hover",
     "when",
+    "overrides",
     "symbol",
     "playback",
     "offset",
@@ -163,8 +243,13 @@ var KNOWN_FIELDS = {
     "reveal",
     "ports",
     "labelRect",
-    "extension"
+    "extension",
+    "capacity",
+    "delay",
+    "queue",
+    "gauge"
   ],
+  gauge: ["metric", "of", "max", "warn", "alarm", "style", "label"],
   strokePoint: ["x", "y"],
   subpath: ["closed", "coords"],
   inlineImage: ["data", "format"],
@@ -172,7 +257,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"],
+  connector: ["start", "end", "routing", "startHead", "endHead", "waypoints", "hops", "cost"],
   waypoint: ["x", "y"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
   track: ["element", "keys", "boil", "follow", "repeats", "march"],
@@ -181,8 +266,9 @@ var KNOWN_FIELDS = {
   repeat: ["start", "end", "count"],
   cameraKey: ["t", "x", "y", "width", "height", "ease"],
   marker: ["t", "name", "loop"],
-  click: ["scene", "url", "set", "toggle"],
-  hover: ["stroke", "fill", "opacity"]
+  click: ["scene", "url", "set", "toggle", "reset"],
+  hover: ["stroke", "fill", "opacity"],
+  override: ["when", "stroke", "fill", "textColor", "opacity", "strokeWidth", "dash", "text", "reroute", "offline", "cost", "capacity", "delay"]
 };
 var MAX_DURATION = 3600;
 var MAX_MARCH = 1e4;
@@ -198,6 +284,8 @@ var num = (v) => typeof v === "number" && Number.isFinite(v) ? v : void 0;
 var str = (v) => typeof v === "string" ? v : void 0;
 var strings = (v) => isObj(v) && Object.values(v).every((x) => typeof x === "string") ? { ...v } : null;
 var bool = (v) => typeof v === "boolean" ? v : void 0;
+var NO_ID = "00000000-0000-0000-0000-000000000000";
+var UUID = /^[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{12}$/;
 var uuid = (v) => typeof v === "string" ? v.toUpperCase() : void 0;
 function clampTime(t) {
   if (!Number.isFinite(t)) return t === Infinity ? MAX_DURATION : 0;
@@ -289,7 +377,8 @@ var Reader = class {
         this.fields(w, "waypoint");
         return { x: num(w.x) ?? 0, y: num(w.y) ?? 0 };
       }) : null,
-      hops: typeof v.hops === "boolean" ? v.hops : null
+      hops: typeof v.hops === "boolean" ? v.hops : null,
+      cost: typeof v.cost === "number" && Number.isFinite(v.cost) ? v.cost : null
     };
   }
   image(v, table) {
@@ -341,6 +430,7 @@ var Reader = class {
       click: this.click(v.click),
       hover: this.hover(v.hover),
       when: str(v.when) ?? null,
+      overrides: this.overrides(v.overrides),
       symbol: uuid(v.symbol) ?? null,
       playback: this.playback(v.playback),
       offset: num(v.offset) ?? null,
@@ -352,7 +442,26 @@ var Reader = class {
         return { x: num(o.x) ?? 0, y: num(o.y) ?? 0 };
       }) : null,
       labelRect: this.labelRect(v.labelRect),
-      extension: this.extension(v.extension)
+      extension: this.extension(v.extension),
+      capacity: num(v.capacity) ?? null,
+      delay: num(v.delay) ?? null,
+      queue: v.queue === true ? true : null,
+      gauge: this.gauge(v.gauge)
+    };
+  }
+  gauge(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "gauge");
+    const finite = (x) => typeof x === "number" && Number.isFinite(x) ? x : null;
+    const style2 = str(v.style);
+    return {
+      metric: str(v.metric) ?? "",
+      of: typeof v.of === "string" && UUID.test(v.of) ? v.of.toUpperCase() : NO_ID,
+      max: finite(v.max),
+      warn: finite(v.warn),
+      alarm: finite(v.alarm),
+      style: style2 === "number" || style2 === "bar" || style2 === "dial" ? style2 : null,
+      label: str(v.label) ?? null
     };
   }
   labelRect(v) {
@@ -396,7 +505,7 @@ var Reader = class {
     }
     const raw = typeof v.toggle === "string" ? [v.toggle] : Array.isArray(v.toggle) && v.toggle.every((x) => typeof x === "string") ? v.toggle : null;
     const toggle = raw ? raw.filter(isName) : null;
-    return { scene: str(v.scene) ?? null, url: safe, set, toggle: toggle && toggle.length > 0 ? toggle : null };
+    return { scene: str(v.scene) ?? null, url: safe, set, toggle: toggle && toggle.length > 0 ? toggle : null, reset: v.reset === true ? true : null };
   }
   playback(v) {
     const s = str(v);
@@ -432,6 +541,35 @@ var Reader = class {
       params: strings(v.params)
     };
   }
+  /** As DottieKit reads them: a reroute whose targets aren't all ids is dropped, as are keys that aren't ids. */
+  overrides(v) {
+    if (!Array.isArray(v)) return null;
+    return v.filter(isObj).map((o) => {
+      this.fields(o, "override");
+      const dash = str(o.dash);
+      let reroute = null;
+      if (isObj(o.reroute) && Object.values(o.reroute).every((x) => typeof x === "string" && UUID.test(x))) {
+        reroute = {};
+        for (const [k, x] of Object.entries(o.reroute)) if (UUID.test(k)) reroute[k.toUpperCase()] = x.toUpperCase();
+        if (Object.keys(reroute).length === 0) reroute = null;
+      }
+      return {
+        when: str(o.when) ?? "",
+        stroke: rgba(o.stroke) ?? null,
+        fill: rgba(o.fill) ?? null,
+        textColor: rgba(o.textColor) ?? null,
+        opacity: num(o.opacity) ?? null,
+        strokeWidth: num(o.strokeWidth) ?? null,
+        dash: dash !== void 0 && ["solid", "dashed", "dotted"].includes(dash) ? dash : null,
+        text: str(o.text) ?? null,
+        reroute,
+        offline: o.offline === true ? true : null,
+        cost: typeof o.cost === "number" && Number.isFinite(o.cost) ? o.cost : null,
+        capacity: typeof o.capacity === "number" && Number.isFinite(o.capacity) ? o.capacity : null,
+        delay: typeof o.delay === "number" && Number.isFinite(o.delay) ? o.delay : null
+      };
+    });
+  }
   hover(v) {
     if (!isObj(v)) return null;
     this.fields(v, "hover");
@@ -471,15 +609,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)) };
@@ -531,7 +669,33 @@ var Reader = class {
       theme: str(v.theme) ?? null,
       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)
+      variables: this.variables(v.variables),
+      flows: Array.isArray(v.flows) ? v.flows.filter(isObj).map((f) => this.flow(f)) : null
+    };
+  }
+  /** As DottieKit reads one: a missing or bad id, source or destination sends nothing; bad destinations are dropped. */
+  flow(f) {
+    this.fields(f, "flow");
+    const id = (x) => typeof x === "string" && UUID.test(x) ? x.toUpperCase() : NO_ID;
+    const finite = (x) => {
+      const n = num(x);
+      return n !== void 0 && Number.isFinite(n) ? n : null;
+    };
+    return {
+      id: id(f.id),
+      from: id(f.from),
+      to: Array.isArray(f.to) && f.to.every((x) => typeof x === "string") ? f.to.filter((x) => UUID.test(x)).map((x) => x.toUpperCase()) : [],
+      every: finite(f.every),
+      speed: finite(f.speed),
+      size: finite(f.size),
+      color: isObj(f.color) && ["r", "g", "b", "a"].every((k) => typeof f.color[k] === "number") ? rgba(f.color) ?? null : null,
+      when: str(f.when) ?? null,
+      spread: f.spread === true ? true : null,
+      volume: finite(f.volume),
+      overrides: Array.isArray(f.overrides) && f.overrides.length > 0 ? f.overrides.filter(isObj).map((o) => {
+        this.fields(o, "flowOverride");
+        return { when: str(o.when) ?? "", volume: finite(o.volume) };
+      }) : null
     };
   }
 };
@@ -593,7 +757,8 @@ function cloneElement(e) {
       start: { ...e.connector.start },
       end: { ...e.connector.end },
       waypoints: e.connector.waypoints?.map((w) => ({ ...w })) ?? null
-    } : null
+    } : null,
+    gauge: e.gauge ? { ...e.gauge } : e.gauge
   };
 }
 function orderedElements(page) {
@@ -677,6 +842,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 = [];
@@ -692,8 +872,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("");
       }
@@ -848,13 +1029,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":
@@ -876,9 +1057,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;
       }
     }
@@ -1270,9 +1451,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;
 }
 
@@ -1344,8 +1533,712 @@ function mulConst(step) {
   return [p[0], p[1]];
 }
 
+// src/flows.ts
+var DEFAULT_EVERY = 0.5;
+var DEFAULT_SPEED = 160;
+var DEFAULT_SIZE = 12;
+var DEFAULT_COLOR = { r: 0.95, g: 0.36, b: 0.33, a: 1 };
+var clamp = (v, fallback, lo, hi) => v === null || !Number.isFinite(v) ? fallback : Math.min(Math.max(v, lo), hi);
+function packetID(flow, k) {
+  const n = (k + 2 ** 40) % 2 ** 48;
+  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);
+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;
+    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 Frontier = 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 = new Frontier();
+  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;
+      dist.set(edge.to, d);
+      order.set(edge.to, counter);
+      open.push(edge.to, d, counter++);
+      tree.came.set(edge.to, { from: n, via: edge.via, back: edge.back });
+    }
+  }
+  return tree;
+}
+var FlowTree = class {
+  constructor(from) {
+    __publicField(this, "settled", /* @__PURE__ */ new Set());
+    __publicField(this, "came", /* @__PURE__ */ new Map());
+    __publicField(this, "from");
+    this.from = from;
+  }
+  /** The first of `to` that can be reached; with `spread`, when the first can't be, every other one that can. */
+  goals(to, spread) {
+    const reachable = to.filter((x) => x !== this.from && this.settled.has(x));
+    if (reachable.length === 0) return [];
+    return spread && reachable[0] !== to[0] ? reachable : [reachable[0]];
+  }
+  /** The connectors to `goal`, as [connector, backwards] hops. */
+  hops(goal) {
+    const hops = [];
+    for (let at = goal, step = this.came.get(at); step; at = step.from, step = this.came.get(at)) hops.push([step.via, step.back]);
+    return hops.reverse();
+  }
+};
+
+// src/measure.ts
+var emptyMetrics = () => ({ elements: /* @__PURE__ */ new Map(), flows: /* @__PURE__ */ new Map(), carry: {} });
+function metricValue(m, metric, id) {
+  const f = m.flows.get(id);
+  if (f) {
+    switch (metric) {
+      case "throughput":
+        return f.placed;
+      case "backlog":
+        return f.backlog;
+      case "backup":
+        return f.backup;
+      case "transit":
+        return f.transit;
+      default:
+        return null;
+    }
+  }
+  const e = m.elements.get(id);
+  if (!e) return null;
+  switch (metric) {
+    case "throughput":
+      return e.throughput;
+    case "load":
+      return e.load;
+    case "delay":
+      return e.delay;
+    case "backlog":
+      return e.backlog;
+    case "inFlight":
+      return e.inFlight;
+    case "depth":
+      return e.depth;
+    default:
+      return null;
+  }
+}
+var TINY = 1e-9;
+var amount = (f) => clamp(f.volume, 1, 0, 1e12);
+function amountIn(f, values) {
+  if (values === null || !f.overrides) return amount(f);
+  let v = null;
+  for (const o of f.overrides) if (o.volume !== null && !mentionsMetric(o.when) && holds(o.when, values)) v = o.volume;
+  return v === null ? amount(f) : Math.min(Math.max(Number.isFinite(v) ? v : 1, 0), 1e12);
+}
+function delayOf(e) {
+  const d = e.delay ?? null;
+  if (e.kind === "connector" || d === null || !Number.isFinite(d)) return 0;
+  return Math.min(Math.max(d, 0), 3600);
+}
+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 = 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();
+  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 });
+  }
+  const list = flows ?? [];
+  const room = /* @__PURE__ */ new Map();
+  for (const e of frame2.elements) {
+    const c = e.capacity ?? null;
+    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 hops = [], shapes2 = [];
+    let at = goal;
+    for (let step = tree.came.get(at); step; step = tree.came.get(at)) {
+      hops.push([step.via, step.back]);
+      shapes2.push(at);
+      at = step.from;
+    }
+    shapes2.push(at);
+    return { hops: hops.reverse(), shapes: shapes2.reverse() };
+  };
+  const way = (hops, shapes2) => {
+    const points = [], inside = [], stretches = [];
+    let length = 0;
+    hops.forEach(([id, back], k) => {
+      const c = byID.get(id);
+      if (!c) return;
+      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]);
+        length += gap;
+      }
+      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, start2, length]);
+      points.push(...line2);
+    });
+    return length > 0 ? { line: new Polyline(points), length, inside, stretches } : null;
+  };
+  const along = (w, elapsedAt, speed) => {
+    let elapsed = elapsedAt, d = 0;
+    for (const [a, b, delay] of w.inside) {
+      const reach = (a - d) / speed;
+      if (elapsed <= reach) break;
+      elapsed -= reach;
+      d = a;
+      const stay = (b - a) / speed + delay;
+      if (elapsed < stay) return null;
+      elapsed -= stay;
+      d = b;
+    }
+    d += elapsed * speed;
+    return d >= 0 && d <= w.length ? d : null;
+  };
+  const union2 = (a, b) => /* @__PURE__ */ new Set([...a, ...b]);
+  const bump = (id, f) => {
+    const m = metrics2.elements.get(id);
+    if (m) f(m);
+  };
+  const leaving = /* @__PURE__ */ new Map(), turn = [];
+  for (const flow of list) {
+    const n = leaving.get(flow.from) ?? 0;
+    turn.push(n);
+    leaving.set(flow.from, n + 1);
+  }
+  const biggest = list.length > 0 ? Math.max(...list.map(amount)) : 1;
+  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 ? baseTree(flow.from) : null;
+    if (!source || !base2) continue;
+    const volume = amountIn(flow, values);
+    const fm = { volume, placed: 0, backlog: 0, backup: 0, transit: null };
+    const placements = [];
+    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()), candidates[0]);
+        const goal2 = tree?.goals(candidates, false)[0];
+        if (!tree || goal2 === void 0) break;
+        const r = route2(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);
+        if (!(fits > TINY)) break;
+        for (const id of ids) if (room.has(id)) room.set(id, room.get(id) - fits);
+        placements.push({ hops: r.hops, shapes: r.shapes, goal: goal2, amount: fits });
+        left -= fits;
+      }
+      if (!(left > TINY)) continue;
+      let at = flow.from;
+      const goal = base2.goals(candidates, false)[0];
+      if (goal !== void 0) {
+        const r = route2(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]]);
+        });
+        const first = sequence.find(([id]) => done.has(id));
+        if (first) {
+          at = first[1];
+          const upTo = r.shapes.indexOf(at);
+          for (let q = upTo; q >= 0; q--) {
+            const s = byID.get(r.shapes[q]);
+            if (s && s.queue === true && s.kind !== "connector") {
+              at = r.shapes[q];
+              break;
+            }
+          }
+        }
+        const n = r.shapes.indexOf(at);
+        if (at !== flow.from && n >= 0) {
+          const shapes2 = r.shapes.slice(0, n + 1), hops = r.hops.slice(0, n);
+          for (const id of [...shapes2, ...hops.map(([h]) => h)]) if (room.has(id)) room.set(id, Math.max(0, room.get(id) - left));
+          placements.push({ hops, shapes: shapes2, goal: at, amount: left, waits: true });
+        }
+      }
+      const existing = waiting2.find(([s]) => s === at);
+      if (existing) existing[1] += left;
+      else waiting2.push([at, left]);
+    }
+    waitingBy.set(flow.id, waiting2);
+    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 waiting2) {
+      bump(at, (m) => {
+        m.backlog += a;
+      });
+      fm.backlog += a;
+    }
+    const reachedFirst = placements.filter((p) => !p.waits && p.goal === flow.to[0]).reduce((s, p) => s + p.amount, 0);
+    fm.backup = volume > TINY ? Math.max(0, (volume - reachedFirst) / volume) : 0;
+    const every = everyOf(flow);
+    const speed = clamp(flow.speed, DEFAULT_SPEED, 1, 1e4), size = clamp(flow.size, DEFAULT_SIZE, 2, 200);
+    const phase = turn[i] / leaving.get(flow.from) * every;
+    const color2 = flow.color ?? DEFAULT_COLOR;
+    const cumulative = [];
+    let sum = 0;
+    for (const p of placements) {
+      sum += p.amount / Math.max(volume, TINY);
+      cumulative.push(sum);
+    }
+    if (cumulative.length > 0 && Math.abs(cumulative[cumulative.length - 1] - 1) < 1e-9) cumulative[cumulative.length - 1] = 1;
+    let transitSum = 0;
+    placements.forEach((p, r) => {
+      const w = way(p.hops, p.shapes);
+      if (!w) return;
+      const travel = w.length / speed + w.inside.reduce((s, x) => s + x[2], 0);
+      if (!p.waits) transitSum += travel * p.amount;
+      const lo = Math.ceil((t - phase - travel) / every);
+      const hi = Math.floor((t - phase) / every);
+      const below = r === 0 ? 0 : cumulative[r - 1], upTo = cumulative[r];
+      const dealt = (c, k) => Math.floor((k + 1) * c) - Math.floor(k * c);
+      for (let k = Math.max(lo, hi - 3999); k <= hi; k++) {
+        if (dealt(upTo, k) - dealt(below, k) !== 1) continue;
+        const d = along(w, t - k * every - phase, speed);
+        if (d === null) continue;
+        const s = w.stretches.find(([, a, b]) => d >= a && d <= b);
+        if (s) bump(s[0], (m) => {
+          m.inFlight += 1;
+        });
+        const pt2 = w.line.point(d / w.length);
+        packets.push(packet(packetID(flow.id, k), pt2.x - size / 2, pt2.y - size / 2, size, color2, source.layerID));
+      }
+    });
+    fm.transit = fm.placed > TINY ? transitSum / fm.placed : null;
+    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 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);
+    }
+    if (shapes2.length === 0) continue;
+    const volume = amountIn(flow, values);
+    const every = everyOf(flow);
+    const unit = every * Math.max(volume, TINY);
+    const speed = clamp(flow.speed, DEFAULT_SPEED, 1, 1e4), size = clamp(flow.size, DEFAULT_SIZE, 2, 200);
+    const color2 = flow.color ?? DEFAULT_COLOR;
+    shapes2.forEach((at, j) => {
+      const shape = byID.get(at);
+      if (!shape) return;
+      const layer = byID.get(flow.from)?.layerID ?? shape.layerID;
+      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) {
+        const trial = new Map(room);
+        const outlets = [];
+        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), flow.to[0]);
+          const goal = tree?.goals(flow.to, false)[0];
+          if (!tree || goal === void 0) break;
+          const r = route2(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;
+          const rate = Number.isFinite(spare) ? spare : Math.max(before / 0.5 - total, TINY * 2);
+          if (!(rate > TINY)) break;
+          for (const id of ids) if (trial.has(id)) trial.set(id, trial.get(id) - rate);
+          outlets.push({ hops: r.hops, shapes: r.shapes, rate });
+          total += rate;
+          if (!Number.isFinite(spare)) break;
+        }
+        if (total > TINY) {
+          depth = Math.max(0, before - total * since);
+          if (depth > TINY) {
+            for (const [id, v] of trial) room.set(id, v);
+            for (const o of outlets) for (const id of [...o.shapes, ...o.hops.map(([h]) => h)]) bump(id, (m) => {
+              m.throughput += o.rate;
+            });
+          }
+          const lasts = before / total;
+          outlets.forEach((o, i) => {
+            const w = way(o.hops, o.shapes);
+            if (!w) return;
+            const spacing = Math.max(unit / o.rate, 0.05);
+            for (let k = 0; k * spacing < lasts && k * spacing <= since && k < 2048; k++) {
+              const d = along(w, since - k * spacing, speed);
+              if (d === null) continue;
+              const pt2 = w.line.point(d / w.length);
+              packets.push(packet(packetID(flow.id, 2 ** 39 + 2 ** 20 + j * 2 ** 14 + i * 2 ** 11 + k), pt2.x - size / 2, pt2.y - size / 2, size, color2, layer));
+            }
+          });
+        }
+      }
+      if (!(depth > TINY || backlog > TINY)) return;
+      bump(at, (m) => {
+        m.depth += depth;
+      });
+      if (depth > TINY) metrics2.carry[queueKey(at, flow.id)] = depth;
+      const n = Math.min(Math.max(Math.ceil(depth / unit - 1e-9), 1), 30);
+      const rows = Math.trunc((n + 9) / 10);
+      const base2 = piles.get(at) ?? 0;
+      piles.set(at, base2 + rows);
+      for (let q = 0; q < n; q++) {
+        const cx = shape.x + 2 + size / 2 + q % 10 * (size + 3);
+        const cy = shape.y - 4 - size / 2 - (base2 + Math.trunc(q / 10)) * (size + 3);
+        packets.push(packet(packetID(flow.id, 2 ** 39 + j * 64 + q), cx - size / 2, cy - size / 2, size, color2, layer));
+      }
+    });
+  }
+  for (const e of frame2.elements) {
+    const c = e.capacity ?? null;
+    const m = metrics2.elements.get(e.id);
+    if (c === null || !Number.isFinite(c) || !m) continue;
+    m.load = c > 0 ? m.throughput / c : 1;
+  }
+  return { packets, metrics: metrics2 };
+}
+var BLANK = {
+  seed: 1,
+  text: null,
+  connector: null,
+  groupID: null,
+  points: null,
+  path: null,
+  subpaths: null,
+  evenOdd: null,
+  rotation: null,
+  link: null,
+  url: null,
+  anchor: null,
+  click: null,
+  hover: null,
+  when: null,
+  overrides: null,
+  symbol: null,
+  playback: null,
+  offset: null,
+  args: null,
+  image: null,
+  reveal: null
+};
+function style(stroke, fill, strokeWidth, fillStyle = "solid", opacity2 = null) {
+  return {
+    stroke: { ...stroke },
+    fill: { ...fill },
+    fillStyle,
+    strokeWidth,
+    dash: "solid",
+    roughness: 0,
+    bowing: 1,
+    fontSize: 18,
+    font: null,
+    gridSize: null,
+    opacity: opacity2,
+    dashOffset: null,
+    textColor: null
+  };
+}
+function packet(id, x, y, size, color2, layerID) {
+  return { ...BLANK, id, kind: "ellipse", layerID, x, y, width: size, height: size, style: style(color2, color2, 1.5) };
+}
+function metricLookup(m, frame2) {
+  const anchors = /* @__PURE__ */ new Map();
+  for (const e of frame2.elements) if (e.anchor !== null && !anchors.has(e.anchor)) anchors.set(e.anchor, e.id);
+  const UUID2 = /^[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{12}$/;
+  return (term, own) => {
+    const id = term.target === "" ? own : anchors.get(term.target) ?? (UUID2.test(term.target) ? term.target.toUpperCase() : null);
+    return id === null ? null : metricValue(m, term.metric, id);
+  };
+}
+function finishPlan(elements, metrics2, values, frame2, since = Infinity, carried = {}) {
+  const lookup = metricLookup(metrics2, frame2);
+  const plan2 = [], readings = {};
+  for (const e of elements) {
+    const applied = [];
+    if (values !== null && e.overrides) {
+      e.overrides.forEach((o, k) => {
+        if (mentionsMetric(o.when) && holds(o.when, values, (m) => lookup(m, e.id))) applied.push(k);
+      });
+    }
+    const g = values === null ? null : e.gauge;
+    if (!g) {
+      plan2.push({ applied, gauge: null });
+      continue;
+    }
+    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) {
+      const f = Math.max(0, since / GAUGE_EASE), smooth = f * f * (3 - 2 * f);
+      shown = then + (shown - then) * smooth;
+    }
+    if (shown !== null) readings[gaugeKey(e.id)] = shown;
+    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) => {
+  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");
+function formatted(metric, v) {
+  if (v === null || !Number.isFinite(v)) return "\u2013";
+  switch (metric) {
+    case "load":
+    case "backup":
+      return formatNumber(v * 100, 0) + "%";
+    case "transit":
+    case "delay":
+      return formatNumber(v, Math.abs(v) >= 10 ? 1 : 2) + "s";
+    default:
+      return formatNumber(v, Math.abs(v) >= 100 ? 0 : Math.abs(v) >= 10 ? 1 : 2);
+  }
+}
+function formatNumber(v, places) {
+  const scale = places === 0 ? 1 : places === 1 ? 10 : 100;
+  const n = Math.floor(Math.abs(v) * scale + 0.5);
+  if (!(n < 1e15)) return v < 0 ? "-\u221E" : "\u221E";
+  const whole = Math.trunc(n / scale), part = n - whole * scale;
+  let s = String(whole);
+  if (places > 0 && part > 0) {
+    let digits = String(part);
+    while (digits.length < places) digits = "0" + digits;
+    while (digits.endsWith("0")) digits = digits.slice(0, -1);
+    s += "." + digits;
+  }
+  return (v < 0 && n > 0 ? "-" : "") + s;
+}
+function gauge(e, g, value2, frame2, flows) {
+  const target = frame2.elements.find((x) => x.id === g.of);
+  const full = g.max ?? (g.metric === "load" ? 1 : target?.capacity ?? value2 ?? 1);
+  const fraction = value2 === null ? 0 : full > 0 ? Math.min(Math.max(value2 / full, 0), 1) : 0;
+  const warn = g.warn ?? (g.metric === "load" ? 0.7 : null), alarm = g.alarm ?? (g.metric === "load" ? 0.9 : null);
+  let color2 = warn === null && alarm === null ? GAUGE_BLUE : GAUGE_GREEN;
+  if (value2 !== null && warn !== null && value2 >= warn) color2 = GAUGE_AMBER;
+  if (value2 !== null && alarm !== null && value2 >= alarm) color2 = GAUGE_RED;
+  if (value2 === null) color2 = GAUGE_GRAY;
+  let name = g.label;
+  if (name === null) {
+    const what = target ? target.text !== null ? target.text.split("\n")[0] : target.anchor : null;
+    name = `${g.metric} ${what ?? (flows.some((f) => f.id === g.of) ? "flow" : "?")}`;
+  }
+  const kind = g.style ?? "number";
+  const w = Math.max(e.width, 1), h = Math.max(e.height, 1);
+  const line2 = (a, b) => [
+    a.x / w,
+    a.y / h,
+    (a.x + (b.x - a.x) / 3) / w,
+    (a.y + (b.y - a.y) / 3) / h,
+    (a.x + 2 * (b.x - a.x) / 3) / w,
+    (a.y + 2 * (b.y - a.y) / 3) / h,
+    b.x / w,
+    b.y / h
+  ];
+  const box = (x, y, bw, bh) => {
+    const p = [{ x, y }, { x: x + bw, y }, { x: x + bw, y: y + bh }, { x, y: y + bh }];
+    let coords = line2(p[0], p[1]);
+    for (let k = 1; k < 4; k++) coords = coords.concat(line2(p[k], p[(k + 1) % 4]).slice(2));
+    return { closed: true, coords };
+  };
+  const arc = (c, radius, a0, a1) => {
+    const pieces2 = Math.max(1, Math.ceil(Math.abs(a1 - a0) / (Math.PI / 2) - 1e-9));
+    const step = (a1 - a0) / pieces2, kappa = 4 / 3 * Math.tan(step / 4);
+    const at = (a) => ({ x: c.x + radius * Math.cos(a), y: c.y + radius * Math.sin(a) });
+    const s = at(a0);
+    const coords = [s.x / w, s.y / h];
+    for (let k = 0; k < pieces2; k++) {
+      const a = a0 + k * step, b = a + step;
+      const p0 = at(a), p3 = at(b);
+      const c1 = { x: p0.x - kappa * radius * Math.sin(a), y: p0.y + kappa * radius * Math.cos(a) };
+      const c2 = { x: p3.x + kappa * radius * Math.sin(b), y: p3.y - kappa * radius * Math.cos(b) };
+      coords.push(c1.x / w, c1.y / h, c2.x / w, c2.y / h, p3.x / w, p3.y / h);
+    }
+    return { closed: false, coords };
+  };
+  const part = (k, subpaths, stroke, fill, width) => ({
+    ...BLANK,
+    id: packetID(e.id, -(2 ** 38) - k),
+    kind: "path",
+    layerID: e.layerID,
+    x: e.x,
+    y: e.y,
+    width: e.width,
+    height: e.height,
+    style: style(stroke, fill ?? { r: 0, g: 0, b: 0, a: 0 }, width, "solid", e.style.opacity),
+    subpaths
+  });
+  const back = {
+    ...e,
+    gauge: null,
+    kind: "path",
+    subpaths: [box(0, 0, w, h)],
+    text: name + "\n" + formatted(g.metric, value2),
+    style: { ...e.style }
+  };
+  const parts = [];
+  if (kind === "number") {
+    back.labelRect = { x: 0, y: 0, width: 1, height: 1 };
+    back.style.textColor = { ...color2 };
+  } else if (kind === "bar") {
+    back.labelRect = { x: 0, y: 0, width: 1, height: 0.66 };
+    const inset2 = Math.min(10, w * 0.08), barH = Math.min(12, h * 0.18), top = h * 0.72;
+    const trackW = w - 2 * inset2;
+    parts.push(part(1, [box(inset2, top, trackW, barH)], GAUGE_TRACK, GAUGE_TRACK, 0.5));
+    if (fraction > 0) parts.push(part(2, [box(inset2, top, trackW * fraction, barH)], color2, color2, 0.5));
+  } else {
+    back.labelRect = { x: 0, y: 0.54, width: 1, height: 0.46 };
+    const radius = Math.min(w * 0.38, h * 0.4), center2 = { x: w / 2, y: h * 0.5 };
+    const thick = Math.max(2, radius * 0.16);
+    parts.push(part(1, [arc(center2, radius, Math.PI, 2 * Math.PI)], GAUGE_TRACK, null, thick));
+    if (fraction > 0) parts.push(part(2, [arc(center2, radius, Math.PI, Math.PI + Math.PI * fraction)], color2, null, thick));
+    const a = Math.PI + Math.PI * fraction;
+    const tip = { x: center2.x + radius * 0.85 * Math.cos(a), y: center2.y + radius * 0.85 * Math.sin(a) };
+    parts.push(part(3, [{ closed: false, coords: line2(center2, tip) }], { r: 0.2, g: 0.2, b: 0.2, a: 1 }, null, 2));
+  }
+  return [back, ...parts];
+}
+
 // src/rough.ts
-var offset = (rng, amount, roughness) => rng.signed() * amount * roughness;
+var offset = (rng, amount2, roughness) => rng.signed() * amount2 * roughness;
 function line(a, b, rng, roughness, bowing, preserveEnds, into) {
   const length = Math.hypot(b.x - a.x, b.y - a.y);
   if (!(length > 0.5)) return;
@@ -1358,7 +2251,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() };
     })();
@@ -1370,7 +2263,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 });
   }
 }
@@ -1631,10 +2524,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;
@@ -1858,26 +2751,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(route(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;
@@ -2157,8 +3083,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(route(e, index)));
   const clean = cloneElement(e);
   clean.style.roughness = 0;
   const pts = outline(clean).contours()[0] ?? [];
@@ -2168,9 +3094,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);
@@ -2201,16 +3128,39 @@ function trackMap(tl) {
   for (const t of tl.tracks) if (!m.has(t.element)) m.set(t.element, t);
   return m;
 }
-function resolved(page, t, state = "initial") {
-  return expandingSymbols(posed(page, t, state), clampTime(t));
+function resolved(page, t, state = "initial", since = null, carried = {}) {
+  return expandingSymbols(posed(page, t, state, since, carried), clampTime(t));
 }
 var EMPTY_TIMELINE = { fps: 12, duration: 0, boil: null, settle: null, poster: null, tracks: [], camera: null, markers: null };
-function posed(page, t, state = "initial") {
+function posed(page, t, state = "initial", since = null, carried = {}) {
+  return posedWithMetrics(page, t, state, since, carried).frame;
+}
+function posedWithMetrics(page, t, state = "initial", since = null, carried = {}) {
   const off = stateHidden(page, state);
-  const timeline = page.timeline ?? (off.size === 0 ? null : EMPTY_TIMELINE);
-  if (!timeline) return page;
+  const values = stateValues(page, state);
+  const active = /* @__PURE__ */ new Map();
+  for (const e of page.elements) {
+    const o = activeOverrides(e, values);
+    if (o.length > 0) active.set(e.id, o);
+  }
+  const flowing = (page.flows ?? []).length > 0;
+  const measuring = flowing || page.elements.some((e) => e.gauge || (e.overrides ?? []).some((o) => mentionsMetric(o.when)));
+  const timeline = page.timeline ?? (off.size === 0 && active.size === 0 && !measuring ? null : EMPTY_TIMELINE);
+  if (!timeline) return { frame: page, metrics: emptyMetrics() };
   t = clampTime(t);
   const tracks = trackMap(timeline);
+  for (const [id, overrides] of active) {
+    const track = tracks.get(id);
+    if (!track?.follow || !overrides.some((o) => o.reroute)) continue;
+    tracks.set(id, {
+      ...track,
+      follow: track.follow.map((f) => {
+        let path = f.path;
+        for (const o of overrides) path = o.reroute?.[path] ?? path;
+        return { ...f, path };
+      })
+    });
+  }
   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);
@@ -2230,6 +3180,14 @@ function posed(page, t, state = "initial") {
   let elements = page.elements.map((e) => {
     const track = tracks.get(e.id);
     let out = track ? applyTrack(track, e, t) : e;
+    for (const o of active.get(e.id) ?? []) out = applyOverride(o, out);
+    const list = active.get(e.id);
+    if (list) {
+      const caps = list.map((o) => o.capacity).filter((c) => c !== null && Number.isFinite(c));
+      const delays = list.map((o) => o.delay).filter((d) => d !== null && Number.isFinite(d));
+      if (caps.length > 0) out.capacity = Math.max(Math.min(...caps), 0);
+      if (delays.length > 0 && out.kind !== "connector") out.delay = Math.max(Math.max(...delays), 0);
+    }
     if (reseed !== null && reseed > 0 && boils(e)) {
       if (out === e) out = cloneElement(e);
       out.seed = boiled(e.seed, reseed);
@@ -2263,7 +3221,18 @@ function posed(page, t, state = "initial") {
     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 };
+  elements = elements.filter((e) => !gone.has(e.id));
+  let metrics2 = emptyMetrics();
+  if (measuring) {
+    const offline = new Set([...active].filter(([, list]) => list.some((o) => o.offline === true)).map(([id]) => id));
+    const frame2 = { ...page, elements, timeline: null };
+    const out = flowFrame(page.flows, frame2, t, values, offline, since, carried);
+    metrics2 = out.metrics;
+    const finished = finishing(elements, out.metrics, values, frame2, page.flows ?? [], Math.max(0, Math.min(since ?? t, 1e6)), carried);
+    Object.assign(metrics2.carry, finished.readings);
+    elements = [...finished.elements, ...out.packets];
+  }
+  return { frame: { ...page, elements, timeline: null, flows: measuring ? null : page.flows }, metrics: metrics2 };
 }
 function posterTime(page) {
   return page.timeline ? page.timeline.poster ?? page.timeline.duration : 0;
@@ -2378,22 +3347,35 @@ function filled(s, args) {
   }) };
 }
 function symbolPage(s) {
-  return { id: s.id, name: s.name, layers: s.layers, elements: s.elements, theme: null, timeline: s.timeline, symbols: null, variables: null };
+  return { id: s.id, name: s.name, layers: s.layers, elements: s.elements, theme: null, timeline: s.timeline, symbols: null, variables: null, flows: null };
 }
 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(), memo) {
   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 = memo && memo.page === page && memo.t === t && memo.posing === posing ? memo : 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(), memo) {
   const instances = new Set(elements.filter((e) => e.kind === "symbol").map((e) => e.id));
   if (instances.size === 0) {
     budget.left -= elements.length;
@@ -2418,6 +3400,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 = memo?.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);
@@ -2433,6 +3423,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 (memo && stack.length === 0 && !was) memo.made.set(e, { override: override0, before, after: budget.left, out: out.slice(from) });
   }
   return out;
 }
@@ -2485,8 +3476,8 @@ function mix2(x) {
   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)}`)];
+  const hex2 = id.replace(/-/g, "").padStart(32, "0").slice(-32);
+  return [BigInt(`0x${hex2.slice(0, 16)}`), BigInt(`0x${hex2.slice(16)}`)];
 }
 function derivedID(instance, inner) {
   const [a, b] = halves(instance), [c, d] = halves(inner);
@@ -2507,7 +3498,7 @@ function clickTargets(page, file) {
   let pageOf = null;
   for (const e of page.elements) {
     const c = e.click;
-    const state = c && changesState(c) ? { ...c.set ? { set: c.set } : {}, ...c.toggle ? { toggle: c.toggle } : {} } : null;
+    const state = c && changesState(c) ? { ...c.set ? { set: c.set } : {}, ...c.toggle ? { toggle: c.toggle } : {}, ...c.reset ? { reset: true } : {} } : null;
     if (c?.scene) {
       const i = sceneNamed(c.scene, markers);
       if (i >= 0) {
@@ -2540,14 +3531,14 @@ function clickTargets(page, file) {
 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;
+  const style2 = { ...e.style };
+  if (h.stroke) style2.stroke = h.stroke;
+  if (h.fill) style2.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;
+    style2.opacity = o >= 1 ? null : o;
   }
-  return { ...e, style };
+  return { ...e, style: style2 };
 }
 function hovered(page, ids) {
   return { ...page, elements: page.elements.map((e) => ids.has(e.id) ? hoveredElement(e) : e) };
@@ -2700,13 +3691,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;
@@ -2751,14 +3742,14 @@ function parseList(lines, start) {
   }
   return { block: { kind: "list", ordered, items }, next: i };
 }
-function inline(src, style = {}) {
+function inline(src, style2 = {}) {
   const out = [];
   const push = (text, s) => {
     if (text) out.push({ ...s, text });
   };
   let i = 0, buf = "";
   const emit = () => {
-    push(buf, style);
+    push(buf, style2);
     buf = "";
   };
   while (i < src.length) {
@@ -2786,43 +3777,43 @@ function inline(src, style = {}) {
       emit();
       let code = m[2].replace(/\n/g, " ");
       if (/^ .* $/.test(code)) code = code.slice(1, -1);
-      push(code, { ...style, mono: true });
+      push(code, { ...style2, mono: true });
       i += m[0].length;
       continue;
     }
     if (m = /^!\[([^\]]*)\]\([^)]*\)/.exec(rest)) {
       emit();
-      out.push(...inline(m[1], style));
+      out.push(...inline(m[1], style2));
       i += m[0].length;
       continue;
     }
     if (m = /^\[([^\]]+)\]\([^)]*\)/.exec(rest)) {
       emit();
-      out.push(...inline(m[1], { ...style, link: true }));
+      out.push(...inline(m[1], { ...style2, link: true }));
       i += m[0].length;
       continue;
     }
     if (m = /^<((?:https?|ftp|mailto):[^>\s]+)>/.exec(rest)) {
       emit();
-      push(m[1], { ...style, link: true });
+      push(m[1], { ...style2, link: true });
       i += m[0].length;
       continue;
     }
     if (m = /^~~(?=\S)([\s\S]*?\S)~~/.exec(rest)) {
       emit();
-      out.push(...inline(m[1], { ...style, strike: true }));
+      out.push(...inline(m[1], { ...style2, strike: true }));
       i += m[0].length;
       continue;
     }
     if (m = /^(\*\*|__)(?=\S)([\s\S]*?\S)\1/.exec(rest)) {
       emit();
-      out.push(...inline(m[2], { ...style, bold: true }));
+      out.push(...inline(m[2], { ...style2, bold: true }));
       i += m[0].length;
       continue;
     }
     if ((m = /^(\*|_)(?=\S)([\s\S]*?\S)\1(?!\1)/.exec(rest)) && (m[1] === "*" || !/\w/.test(src[i - 1] ?? ""))) {
       emit();
-      out.push(...inline(m[2], { ...style, italic: true }));
+      out.push(...inline(m[2], { ...style2, italic: true }));
       i += m[0].length;
       continue;
     }
@@ -3035,10 +4026,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];
@@ -3087,7 +4078,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;
@@ -3113,13 +4104,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 = [];
@@ -3208,6 +4224,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);
@@ -3235,8 +4271,8 @@ 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);
+function svgParts(page, background, fixed, links = false, only) {
+  if (hasInstances(page)) return svgParts(expandingSymbols(page, 0), background, fixed, links, only);
   const theme = themeNamed(page.theme);
   const bg = background ? theme?.background ?? background : null;
   const ink = theme?.ink ?? black;
@@ -3247,11 +4283,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);
@@ -3399,6 +4435,110 @@ 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" || false) return null;
+  if (false) {
+    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 (true) {
+    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;
+}
+function servePlans() {
+  const g = globalThis;
+  if (typeof g.WorkerGlobalScope === "undefined" || !(g instanceof g.WorkerGlobalScope)) return;
+  g.addEventListener("message", (ev) => {
+    const id = ev.data?.dottiePlan;
+    if (typeof id !== "number") return;
+    let p = null;
+    try {
+      p = plan(ev.data.page);
+    } catch {
+      p = null;
+    }
+    g.postMessage({ dottiePlan: id, plan: p });
+  });
+}
+
 // src/player.ts
 var WHITE = { r: 1, g: 1, b: 1, a: 1 };
 function pageIndex(file, spec) {
@@ -3439,6 +4579,12 @@ var Playback = class {
     __publicField(this, "sceneLoops");
     /** The page's variables now: their starting values until clicks change them. */
     __publicField(this, "state");
+    /** When the variables last changed (performance.now() milliseconds): backlog piles up from then (ADR 0003). */
+    __publicField(this, "stateSince", typeof performance === "undefined" ? 0 : performance.now());
+    /** A still (the `at` attribute): backlog is drawn for the page time, not the wall clock. */
+    __publicField(this, "still", false);
+    /** What each queue held when the variables last changed, which it drains from (FrameMetrics.carry). */
+    __publicField(this, "carried", {});
     __publicField(this, "background");
     __publicField(this, "ink");
     /** What clicking each clickable element does, by element id. */
@@ -3462,7 +4608,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);
@@ -3510,6 +4656,10 @@ var Playback = class {
     this.svg.style.maxWidth = `${Math.ceil(this.plan.size.width)}px`;
     into.replaceChildren(this.svg);
   }
+  /** Seconds since the variables last changed, or null for a still. */
+  sinceChange(now = typeof performance === "undefined" ? 0 : performance.now()) {
+    return this.still || typeof performance === "undefined" ? null : (now - this.stateSince) / 1e3;
+  }
   get frameCount() {
     return this.plan.times.length;
   }
@@ -3535,7 +4685,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. */
@@ -3548,17 +4698,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);
-    const frame2 = expandingSymbols(pose, tc, true, times);
+    const pose = posed(this.page, tc, this.state, this.sinceChange(now), this.carried);
+    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 = [];
@@ -3687,6 +4844,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 {
@@ -3709,6 +4874,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" });
@@ -3785,9 +4954,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";
@@ -3798,15 +4977,36 @@ 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));
     this.style.setProperty("--dottie-ink", color(p.ink));
@@ -3828,10 +5028,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) {
@@ -3845,8 +5049,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) {
@@ -3900,7 +5106,13 @@ var DottiePlayer = class extends ElementBase {
       this.scheduleReplay();
     }
     if (!click) return;
-    if (click.set || click.toggle) this.setState(applyClick({ scene: null, url: null, set: click.set ?? null, toggle: click.toggle ?? null }, p.state));
+    if (click.set || click.toggle || click.reset) {
+      this.setState(applyClick(
+        { scene: null, url: null, set: click.set ?? null, toggle: click.toggle ?? null, reset: click.reset ?? null },
+        p.state,
+        p.page.variables ?? {}
+      ));
+    }
     if ("state" in click) return;
     if ("url" in click) {
       if (/^(https?:|mailto:)/i.test(click.url)) window.open(click.url, "_blank", "noopener");
@@ -3926,7 +5138,10 @@ var DottiePlayer = class extends ElementBase {
     if (!p) return;
     const next = { ...p.state, ...values };
     if (Object.keys(next).every((k) => next[k] === p.state[k])) return;
+    const t = clampTime(p.last.t);
+    p.carried = posedWithMetrics(p.page, t, p.state, p.sinceChange(), p.carried).metrics.carry;
     p.state = next;
+    p.stateSince = performance.now();
     p.redraw();
     this.dispatchEvent(new CustomEvent("state", { detail: { variables: { ...next } } }));
   }
@@ -4124,9 +5339,10 @@ function render(source, options = {}) {
 function isFile(v) {
   return typeof v === "object" && v !== null && Array.isArray(v.pages) && Array.isArray(v.warnings);
 }
-var VERSION = "0.7.0";
+var VERSION = "0.9.0";
 
 // src/player-entry.ts
+servePlans();
 definePlayer();
 globalThis.Dottie ?? (globalThis.Dottie = index_exports);
 export {