@phin-tech/dottie 0.7.0 → 0.8.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.8.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");
@@ -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) {
@@ -1344,8 +1509,617 @@ 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);
+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) {
+    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 });
+  }
+  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];
+    tree.settled.add(n);
+    for (const edge of next.get(n) ?? []) {
+      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++);
+      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 = /* @__PURE__ */ new Map();
+  for (const e of frame2.elements) if (!byID.has(e.id)) byID.set(e.id, e);
+  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 ? [...tracing(c, frame2).points].reverse() : tracing(c, frame2).points;
+      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 start = 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]);
+      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);
+  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;
+    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 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 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 = waiting.find(([s]) => s === at);
+      if (existing) existing[1] += left;
+      else waiting.push([at, left]);
+    }
+    waitingBy.set(flow.id, waiting);
+    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) {
+      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();
+  for (const flow of list) {
+    const waiting = waitingBy.get(flow.id) ?? [];
+    const shapes2 = waiting.map(([s]) => s);
+    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 = waiting.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));
+          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 finishing(elements, metrics2, values, frame2, flows, since = Infinity, carried = {}) {
+  const lookup = metricLookup(metrics2, frame2);
+  const out = [], readings = {};
+  for (let e of elements) {
+    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);
+      }
+    }
+    if (!e.gauge || values === null) {
+      out.push(e);
+      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) {
+      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;
+    out.push(...gauge(e, g, shown, frame2, flows));
+  }
+  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;
@@ -2201,16 +2975,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 +3027,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 +3068,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,7 +3194,7 @@ 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");
@@ -2485,8 +3301,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 +3323,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 +3356,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) };
@@ -2751,14 +3567,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 +3602,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;
     }
@@ -3439,6 +4255,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. */
@@ -3510,6 +4332,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;
   }
@@ -3550,7 +4376,7 @@ var Playback = class {
     const times = /* @__PURE__ */ new Map();
     for (const [id, start] of this.replayStarts) times.set(id, Math.min((now - start) / 1e3, this.replays.get(id) ?? 0));
     const tc = clampTime(t);
-    const pose = posed(this.page, tc, this.state);
+    const pose = posed(this.page, tc, this.state, this.sinceChange(now), this.carried);
     const frame2 = expandingSymbols(pose, tc, true, times);
     const { parts } = svgParts(frame2, this.background, r);
     const owned = (m, parts2) => {
@@ -3807,6 +4633,7 @@ var DottiePlayer = class extends ElementBase {
     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 });
+    p.still = this.hasAttribute("at");
     this.playback = p;
     this.style.setProperty("--dottie-page", color(p.background));
     this.style.setProperty("--dottie-ink", color(p.ink));
@@ -3900,7 +4727,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 +4759,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,7 +4960,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.7.0";
+var VERSION = "0.8.0";
 
 // src/player-entry.ts
 definePlayer();