@phin-tech/dottie 0.7.0 → 0.9.0

package/PARITY.md

@@ -27,7 +27,7 @@ fixture, so the gap is visible rather than silent.
 | Waypoints (bends) on every routing, and hops | Supported | [edge/waypoints](../fixtures/edge/waypoints.dottie), [edge/waypoints-symbol](../fixtures/edge/waypoints-symbol.dottie) | Hops need the page, so `connectorParts` takes it; without one a line draws none. |
 | Arrowheads: arrow, triangle, dot, bar | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | |
 | Label colors (`textColor`, apart from the stroke) | Supported | [edge/text-colors](../fixtures/edge/text-colors.dottie) | Text boxes and notes ignore it, as in Dottie |
-| Connector labels | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | Label boxes sized with CoreText's measurements. The player paints them on the page color, like the app; Dottie's flipbook export leaves them unpainted |
+| Connector labels | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | Label boxes sized with CoreText's measurements. The player paints them on the page color, like the app |
 | Keys and eases (linear, in, out, in-out, hold, spring, bounce, elastic) | Supported | [edge/timeline](../fixtures/edge/timeline.dottie), [edge/eases](../fixtures/edge/eases.dottie) | Unknown ease names play linear, with a warning |
 | Visibility, reveal (draw-on, typing), opacity | Supported | [edge/timeline](../fixtures/edge/timeline.dottie) | |
 | Transitions | Supported | [edge/transitions](../fixtures/edge/transitions.dottie) | They are ordinary keys in the file |
@@ -37,19 +37,22 @@ fixture, so the gap is visible rather than silent.
 | Repeats (counted and forever) | Supported | [edge/timeline](../fixtures/edge/timeline.dottie) | |
 | Boil (three drawings) and settle | Supported | [edge/timeline](../fixtures/edge/timeline.dottie) | Boiled seeds match bit for bit |
 | Camera views | Supported | [edge/camera](../fixtures/edge/camera.dottie), [design/zoom](../fixtures/design/zoom.dottie) | |
-| Scenes (markers) and click-through | Supported | [design/tour](../fixtures/design/tour.dottie) | Stops at each scene, as the HTML export does |
+| Scenes (markers) and click-through | Supported | [design/tour](../fixtures/design/tour.dottie) | Stops at each scene. The HTML export is this player |
 | Poster frame, reduced motion | Supported | [edge/timeline](../fixtures/edge/timeline.dottie) | |
 | Damaged timelines (clamped, filtered, sorted) | Supported | [edge/timeline](../fixtures/edge/timeline.dottie) | Read the way DottieKit's decoders read them |
 | Unknown kinds, fields and newer versions | Partial | [js-only/future](../fixtures/js-only/future.dottie) | Drawn as labelled placeholders, reported in `warnings`; Dottie refuses such files |
 | Text fonts | Partial | [edge/fonts](../fixtures/edge/fonts.dottie) | Measured with CoreText's metrics for Helvetica Neue and the bundled handwriting fonts (Caveat, Patrick Hand, Architects Daughter), which the player loads from `dist/fonts` and a compiled drawing carries; browsers without Helvetica Neue draw Helvetica or Arial in the same places, so runs of mixed styles may sit slightly apart. A font of one's own is laid out as Helvetica Neue and drawn in that font where the viewer has it |
 | Symbols: instances on their own clocks (loop, once, still, offset), nested, scaled and turned | Supported | [edge/symbols](../fixtures/edge/symbols.dottie) | Expanded as DottieKit expands them, with the same ids, seeds and limits ([js-only/hostile-symbols](../fixtures/js-only/hostile-symbols.dottie)) |
-| Button symbols (up, over, down, hit) and clickable copies | Supported | [edge/buttons](../fixtures/edge/buttons.dottie) | As the HTML export draws them |
+| Button symbols (up, over, down, hit) and clickable copies | Supported | [edge/buttons](../fixtures/edge/buttons.dottie) | Up, over, down and hit, in the player and the HTML export alike |
 | Symbol parameters (`{{name}}` in a symbol's text, filled per copy) | Supported | [edge/params](../fixtures/edge/params.dottie) | Defaults, undeclared names left as written, values passed into nested copies, filled before text types out |
-| Copies that play when clicked | Supported | [edge/buttons](../fixtures/edge/buttons.dottie) | `<dottie-player>` only: the HTML export is drawn ahead of time and shows them at rest |
-| Clicks: play a scene, open a link, hover looks, keyboard | Supported | [edge/clicks](../fixtures/edge/clicks.dottie) | As the HTML export does; only http, https and mailto links are followed |
+| Copies that play when clicked | Supported | [edge/buttons](../fixtures/edge/buttons.dottie) | In the player and the HTML export |
+| Clicks: play a scene, open a link, hover looks, keyboard | Supported | [edge/clicks](../fixtures/edge/clicks.dottie) | Only http, https and mailto links are followed |
 | Page variables and conditions (`variables`, `when`) | Supported | [edge/state](../fixtures/edge/state.dottie) | Starting values in every still and export; connectors go with a shape the state hides |
-| Clicks that set and toggle variables | Supported | [edge/state](../fixtures/edge/state.dottie) | Change what shows without touching the playhead. The HTML export of a page with state is this player |
-| Looping scenes (`loop` on a marker) | Supported | [edge/state](../fixtures/edge/state.dottie) | As the HTML export plays them: no stop on entering, round from the scene's end to its start |
+| Overrides (`overrides`: restyle and reroute under a condition) | Supported | [edge/state](../fixtures/edge/state.dottie) | Opacity multiplies; a reroute or key that isn't an id is dropped as DottieKit drops it |
+| Traffic flows (`flows`) | Supported | [edge/flows](../fixtures/edge/flows.dottie) | Routed each frame over the connectors drawn, cheapest by connector `cost` (ADR 0002); packet ids derive from the flow's |
+| Volume, capacity, delay, metrics, gauges | Supported | [edge/flows](../fixtures/edge/flows.dottie) (Capacity page) | One implementation: Dottie runs `measure.ts` in JavaScriptCore (ADRs 0003, 0004). Assignment in page order, backlog piles, conditions on metrics, gauges expanded to `.path` elements |
+| Clicks that set and toggle variables | Supported | [edge/state](../fixtures/edge/state.dottie) | Change what shows without touching the playhead |
+| Looping scenes (`loop` on a marker) | Supported | [edge/state](../fixtures/edge/state.dottie) | No stop on entering, round from the scene's end to its start |
 | Links out of the drawing (`url`) | Supported | [edge/links](../fixtures/edge/links.dottie) | A web or mail `url` opens when clicked if there is no `click`, and SVG export wraps it in `<a>`; a link to another drawing does nothing on the web |
 | Links between shapes and pages | Partial | [edge/clicks](../fixtures/edge/clicks.dottie) | A link to a shape on another page shows that page; one on the same page does nothing. The HTML export holds one page, so it has neither |
 | Editing | Missing | | |

package/README.md

@@ -37,8 +37,9 @@ click first fires a cancelable `action` event whose `detail` is `{element, scene
 replay?}`; call `preventDefault()` to handle it yourself.
 
 A click can also set or toggle the page's variables, which show and hide the elements with a `when` while the
-animation keeps playing: a diagram you leave running that people poke. A looping scene plays round until a click
-or next leaves it, instead of stopping.
+animation keeps playing: a diagram you leave running that people poke. Elements can restyle themselves under a
+condition (`overrides`), and a page's `flows` send traffic over whatever connectors are drawn, so it goes round a
+region a click took down. A looping scene plays round until a click or next leaves it, instead of stopping.
 
 The element has `play()`, `pause()`, `nextScene()`, `prevScene()`, `activate(elementId)`, `currentTime`
 (settable), `duration`, `paused`, `variables` and `setState({name: value})`, and fires `load`, `frame`, `action`,
@@ -48,6 +49,13 @@ The element has `play()`, `pause()`, `nextScene()`, `prevScene()`, `activate(ele
 Without modules, `dist/dottie-player.min.js` is a classic script that registers the element and sets
 `window.Dottie`.
 
+**Big animations.** Before it shows an animation without a camera, the player works out the view of every frame,
+which for a long, busy one takes long enough to hold up the page. So it does that in a worker, and the drawing
+appears, exactly as it would have, when the worker is done; `setFile()` returns at once, and the `load` event fires
+when it is showing. The classic script starts the worker from its own source (a `blob:` URL); the module player
+loads `dottie-player.min.js` from beside itself, so host the two together. Where a worker can't start, as under a
+`worker-src` policy that refuses it, the player works it out in place as before. Small drawings always do.
+
 **Fonts.** Text in Dottie's handwriting fonts (Caveat, Patrick Hand, Architects Daughter; SIL Open Font License)
 is drawn in them: the player loads the ones a drawing uses from `fonts/` beside its own script, as `dist/fonts` on
 npm and the CDNs. If you host the player yourself, copy that folder with it, or call `Dottie.setFontBase(url)`

package/dist/compile.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, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -56,7 +56,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"],
@@ -85,6 +87,7 @@ var KNOWN_FIELDS = {
     "click",
     "hover",
     "when",
+    "overrides",
     "symbol",
     "playback",
     "offset",
@@ -93,8 +96,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"],
@@ -102,7 +110,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"],
@@ -111,8 +119,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;
@@ -126,6 +135,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;
@@ -214,7 +225,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) {
@@ -266,6 +278,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,
@@ -277,7 +290,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 style = 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: style === "number" || style === "bar" || style === "dial" ? style : null,
+      label: str(v.label) ?? null
     };
   }
   labelRect(v) {
@@ -321,7 +353,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);
@@ -357,6 +389,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");
@@ -456,7 +517,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
     };
   }
 };
@@ -599,7 +686,12 @@ function compile(source, runtime, options = {}) {
       if (b64) (fonts[family] ?? (fonts[family] = {}))[face] = b64;
     }
   }
-  return runtime.trimEnd() + "\n" + LOADER.replace("DOTTIE_DATA", () => scriptJSON(data)).replace("DOTTIE_OPTIONS", () => scriptJSON(playerAttributes(options))).replace("DOTTIE_FONTS", () => scriptJSON(fonts));
+  const fill = {
+    DOTTIE_DATA: () => scriptJSON(data),
+    DOTTIE_OPTIONS: () => scriptJSON(playerAttributes(options)),
+    DOTTIE_FONTS: () => scriptJSON(fonts)
+  };
+  return runtime.trimEnd() + "\n" + LOADER.replace(/\bDOTTIE_(?:DATA|OPTIONS|FONTS)\b/g, (m) => fill[m]());
 }
 export {
   LOADER,

package/dist/dottie-compile.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! 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, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -64,7 +64,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"],
@@ -93,6 +95,7 @@ var KNOWN_FIELDS = {
     "click",
     "hover",
     "when",
+    "overrides",
     "symbol",
     "playback",
     "offset",
@@ -101,8 +104,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"],
@@ -110,7 +118,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"],
@@ -119,8 +127,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;
@@ -134,6 +143,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;
@@ -222,7 +233,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) {
@@ -274,6 +286,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,
@@ -285,7 +298,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 style = 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: style === "number" || style === "bar" || style === "dial" ? style : null,
+      label: str(v.label) ?? null
     };
   }
   labelRect(v) {
@@ -329,7 +361,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);
@@ -365,6 +397,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");
@@ -464,7 +525,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
     };
   }
 };
@@ -607,11 +694,16 @@ function compile(source2, runtime, options2 = {}) {
       if (b64) (fonts[family] ?? (fonts[family] = {}))[face] = b64;
     }
   }
-  return runtime.trimEnd() + "\n" + LOADER.replace("DOTTIE_DATA", () => scriptJSON(data)).replace("DOTTIE_OPTIONS", () => scriptJSON(playerAttributes(options2))).replace("DOTTIE_FONTS", () => scriptJSON(fonts));
+  const fill = {
+    DOTTIE_DATA: () => scriptJSON(data),
+    DOTTIE_OPTIONS: () => scriptJSON(playerAttributes(options2)),
+    DOTTIE_FONTS: () => scriptJSON(fonts)
+  };
+  return runtime.trimEnd() + "\n" + LOADER.replace(/\bDOTTIE_(?:DATA|OPTIONS|FONTS)\b/g, (m) => fill[m]());
 }
 
 // src/index.ts
-var VERSION = "0.7.0";
+var VERSION = "0.9.0";
 
 // src/cli.ts
 var usage = `dottie-compile ${VERSION}: a Dottie drawing as one script that plays it on any page.