@phin-tech/dottie 0.9.0 → 0.11.0

package/dist/dottie-player.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.9.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.11.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) => {
@@ -44,6 +44,8 @@ __export(index_exports, {
   luminance: () => luminance,
   orderedElements: () => orderedElements,
   pageIndex: () => pageIndex,
+  pageTheme: () => pageTheme,
+  paletteColor: () => paletteColor,
   parseDottie: () => parseDottie,
   plan: () => plan,
   posterTime: () => posterTime,
@@ -66,82 +68,332 @@ __export(index_exports, {
   withRoughness: () => withRoughness
 });
 
-// src/state.ts
+// src/expression.ts
+var METRIC_NAMES = ["throughput", "load", "delay", "backlog", "depth", "inFlight", "transit", "backup"];
+var FUNCTIONS = { min: null, max: null, abs: 1, floor: 1, ceil: 1, round: 1, clamp: 3 };
 var MAX_NAME = 64;
-function isName(name) {
-  return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
+var truthy = (v) => typeof v === "boolean" ? v : v !== 0 && !Number.isNaN(v);
+var num = (v) => typeof v === "boolean" ? v ? 1 : 0 : v;
+var parsed = /* @__PURE__ */ new Map();
+function parseExpr(text) {
+  const hit = parsed.get(text);
+  if (hit !== void 0) return hit;
+  const p = new Parser(text);
+  let e = p.or();
+  if (e && !p.atEnd()) e = null;
+  if (parsed.size > 4096) parsed.clear();
+  parsed.set(text, e);
+  return e;
 }
-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 evaluate(e, state, metric = null) {
+  switch (e.k) {
+    case "lit":
+      return e.v;
+    case "name":
+      return state[e.name] ?? false;
+    case "metric":
+      return metric?.(e.metric, e.target) ?? NaN;
+    case "not":
+      return !truthy(evaluate(e.e, state, metric));
+    case "neg":
+      return -num(evaluate(e.e, state, metric));
+    case "call": {
+      const xs = e.args.map((a) => num(evaluate(a, state, metric)));
+      const fold = (better) => {
+        if (xs.some(Number.isNaN)) return NaN;
+        let out = xs[0];
+        for (const x of xs.slice(1)) if (better(x, out)) out = x;
+        return out;
+      };
+      switch (e.fn) {
+        case "min":
+          return fold((a, b) => a < b);
+        case "max":
+          return fold((a, b) => a > b);
+        case "abs":
+          return Math.abs(xs[0]);
+        case "floor":
+          return Math.floor(xs[0]);
+        case "ceil":
+          return Math.ceil(xs[0]);
+        case "round":
+          return Math.floor(xs[0] + 0.5);
+        default:
+          if (xs.some(Number.isNaN)) return NaN;
+          return xs[0] < xs[1] ? xs[1] : xs[0] > xs[2] ? xs[2] : xs[0];
+      }
+    }
+    case "bin": {
+      if (e.op === "&&") return truthy(evaluate(e.l, state, metric)) && truthy(evaluate(e.r, state, metric));
+      if (e.op === "||") return truthy(evaluate(e.l, state, metric)) || truthy(evaluate(e.r, state, metric));
+      const a = evaluate(e.l, state, metric), b = evaluate(e.r, state, metric);
+      const x = num(a), y = num(b);
+      switch (e.op) {
+        case "+":
+          return x + y;
+        case "-":
+          return x - y;
+        case "*":
+          return x * y;
+        case "/":
+          return x / y;
+        case "%":
+          return x % y;
+      }
+      if (Number.isNaN(x) || Number.isNaN(y)) return false;
+      switch (e.op) {
+        case "<":
+          return x < y;
+        case "<=":
+          return x <= y;
+        case ">":
+          return x > y;
+        case ">=":
+          return x >= y;
+        case "==":
+          return typeof a === "boolean" && typeof b === "boolean" ? a === b : x === y;
+        default:
+          return typeof a === "boolean" && typeof b === "boolean" ? a !== b : x !== y;
+      }
+    }
   }
 }
-function mentionsMetric(condition) {
-  return condition.split("||").some((any) => any.split("&&").some((all) => metricTerm(all) !== null));
+function exprNames(e) {
+  const out = [];
+  const walk = (x) => {
+    switch (x.k) {
+      case "name":
+        if (!out.includes(x.name)) out.push(x.name);
+        break;
+      case "not":
+      case "neg":
+        walk(x.e);
+        break;
+      case "bin":
+        walk(x.l);
+        walk(x.r);
+        break;
+      case "call":
+        x.args.forEach(walk);
+        break;
+    }
+  };
+  walk(e);
+  return out;
 }
-function conditionNames(condition) {
+function exprMetrics(e) {
   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;
-      out.push(term);
+  const walk = (x) => {
+    switch (x.k) {
+      case "metric":
+        out.push({ metric: x.metric, target: x.target });
+        break;
+      case "not":
+      case "neg":
+        walk(x.e);
+        break;
+      case "bin":
+        walk(x.l);
+        walk(x.r);
+        break;
+      case "call":
+        x.args.forEach(walk);
+        break;
     }
-  }
+  };
+  walk(e);
   return out;
 }
+var isDigit = (c) => c !== void 0 && c >= "0" && c <= "9";
+var isLetter = (c) => c !== void 0 && (c === "_" || c >= "a" && c <= "z" || c >= "A" && c <= "Z");
+var Parser = class {
+  constructor(text) {
+    __publicField(this, "s");
+    __publicField(this, "i", 0);
+    this.s = [...text];
+  }
+  atEnd() {
+    this.skip();
+    return this.i === this.s.length;
+  }
+  skip() {
+    while (this.i < this.s.length && " 	\n\r".includes(this.s[this.i])) this.i++;
+  }
+  eat(token) {
+    this.skip();
+    const t = [...token];
+    if (this.i + t.length > this.s.length) return false;
+    for (let k = 0; k < t.length; k++) if (this.s[this.i + k] !== t[k]) return false;
+    if (t.length === 1 && this.s[this.i + 1] === "=" && "<>!=".includes(t[0])) return false;
+    this.i += t.length;
+    return true;
+  }
+  or() {
+    let l = this.and();
+    if (!l) return null;
+    while (this.eat("||")) {
+      const r = this.and();
+      if (!r) return null;
+      l = { k: "bin", op: "||", l, r };
+    }
+    return l;
+  }
+  and() {
+    let l = this.compare();
+    if (!l) return null;
+    while (this.eat("&&")) {
+      const r = this.compare();
+      if (!r) return null;
+      l = { k: "bin", op: "&&", l, r };
+    }
+    return l;
+  }
+  compare() {
+    const l = this.sum();
+    if (!l) return null;
+    for (const op of ["<=", ">=", "==", "!=", "<", ">"]) {
+      if (this.eat(op)) {
+        const r = this.sum();
+        return r ? { k: "bin", op, l, r } : null;
+      }
+    }
+    return l;
+  }
+  sum() {
+    let l = this.product();
+    if (!l) return null;
+    for (; ; ) {
+      const op = this.eat("+") ? "+" : this.eat("-") ? "-" : null;
+      if (!op) return l;
+      const r = this.product();
+      if (!r) return null;
+      l = { k: "bin", op, l, r };
+    }
+  }
+  product() {
+    let l = this.unary();
+    if (!l) return null;
+    for (; ; ) {
+      const op = ["*", "/", "%"].find((o) => this.eat(o));
+      if (!op) return l;
+      const r = this.unary();
+      if (!r) return null;
+      l = { k: "bin", op, l, r };
+    }
+  }
+  unary() {
+    if (this.eat("!")) {
+      const e = this.unary();
+      return e ? { k: "not", e } : null;
+    }
+    if (this.eat("-")) {
+      const e = this.unary();
+      return e ? { k: "neg", e } : null;
+    }
+    return this.primary();
+  }
+  primary() {
+    this.skip();
+    if (this.i >= this.s.length) return null;
+    if (this.eat("(")) {
+      const e = this.or();
+      return e && this.eat(")") ? e : null;
+    }
+    const s = this.s;
+    const c = s[this.i];
+    if (isDigit(c)) {
+      const start3 = this.i;
+      while (isDigit(s[this.i])) this.i++;
+      if (s[this.i] === "." && isDigit(s[this.i + 1])) {
+        this.i++;
+        while (isDigit(s[this.i])) this.i++;
+      }
+      return { k: "lit", v: Number(s.slice(start3, this.i).join("")) };
+    }
+    if (!isLetter(c)) return null;
+    const start2 = this.i;
+    while (isLetter(s[this.i]) || isDigit(s[this.i])) this.i++;
+    const name = s.slice(start2, this.i).join("");
+    if (name.length > MAX_NAME) return null;
+    let j = this.i;
+    while (s[j] === " " || s[j] === "	") j++;
+    const called = s[j] === "(";
+    if (METRIC_NAMES.includes(name)) {
+      if (!called) return { k: "metric", metric: name, target: "" };
+      this.eat("(");
+      const from = this.i;
+      while (this.i < s.length && s[this.i] !== ")" && s[this.i] !== "(") this.i++;
+      if (s[this.i] !== ")") return null;
+      const target = s.slice(from, this.i).join("").replace(/^[ \t]+|[ \t]+$/g, "");
+      this.i++;
+      return { k: "metric", metric: name, target };
+    }
+    if (name in FUNCTIONS) {
+      if (!called || !this.eat("(")) return null;
+      const args = [];
+      if (!this.eat(")")) {
+        do {
+          const a = this.or();
+          if (!a) return null;
+          args.push(a);
+        } while (this.eat(","));
+        if (!this.eat(")")) return null;
+      }
+      const arity = FUNCTIONS[name];
+      if (arity !== null ? args.length !== arity : args.length === 0) return null;
+      return { k: "call", fn: name, args };
+    }
+    if (called) return null;
+    if (name === "true") return { k: "lit", v: true };
+    if (name === "false") return { k: "lit", v: false };
+    return { k: "name", name };
+  }
+};
+function describeVar(v) {
+  return typeof v === "boolean" ? v ? "true" : "false" : formatTwo(v);
+}
+function formatTwo(v) {
+  const n = Math.floor(Math.abs(v) * 100 + 0.5);
+  if (!(n < 1e15)) return v < 0 ? "-\u221E" : "\u221E";
+  const whole = Math.floor(n / 100), part = n - whole * 100;
+  let s = String(whole);
+  if (part > 0) s += "." + String(part).padStart(2, "0").replace(/0+$/, "");
+  return (v < 0 && n > 0 ? "-" : "") + s;
+}
+function filling(text, values) {
+  if (!text.includes("{")) return text;
+  let out = "", rest = text;
+  for (let open = rest.indexOf("{"); open >= 0; open = rest.indexOf("{")) {
+    out += rest.slice(0, open);
+    const close = rest.indexOf("}", open);
+    if (close < 0) {
+      out += rest.slice(open);
+      rest = "";
+      break;
+    }
+    const inner = rest.slice(open + 1, close);
+    const e = inner.includes("{") ? null : parseExpr(inner);
+    const names = e ? exprNames(e) : [];
+    if (e && exprMetrics(e).length === 0 && names.length > 0 && names.every((n) => values[n] !== void 0)) out += describeVar(evaluate(e, values));
+    else out += rest.slice(open, close + 1);
+    rest = rest.slice(close + 1);
+  }
+  return out + rest;
+}
+
+// src/state.ts
+var MAX_NAME2 = 64;
+function isName(name) {
+  return name.length <= MAX_NAME2 && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
+}
+function mentionsMetric(condition) {
+  const e = parseExpr(condition);
+  return e !== null && exprMetrics(e).length > 0;
+}
 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("!")) {
-      negated = true;
-      term = trim(term.slice(1));
-    }
-    return (state[term] ?? false) !== negated;
-  }));
+  const e = parseExpr(condition);
+  if (!e) return false;
+  return truthy(evaluate(e, state, metric ? (m, target) => metric({ metric: m, target, op: "", value: 0 }) : null));
 }
 function stateValues(page, choice) {
   if (choice === "all") return null;
@@ -180,7 +432,7 @@ function applyOverride(o, e) {
   return out;
 }
 function changesState(c) {
-  return !!c && (c.reset === true || 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 || !!c.run);
 }
 function applyClick(c, state, initial = {}) {
   let out = { ...state };
@@ -189,27 +441,91 @@ function applyClick(c, state, initial = {}) {
     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);
+  const before = { ...out };
+  for (const [k, v] of Object.entries(c.set ?? {})) out[k] = clickValue(v, before, before[k]);
+  for (const k of c.toggle ?? []) out[k] = !truthy(out[k] ?? false);
   return out;
 }
-function trim(s) {
-  return s.replace(/^[ \t ]+|[ \t ]+$/g, "");
+function clickValue(v, state, current) {
+  if (typeof v !== "string") return v;
+  const e = parseExpr(v);
+  return e ? evaluate(e, state) : current ?? false;
+}
+
+// src/theme.ts
+var rgb = (r, g, b) => ({ r, g, b, a: 1 });
+function hex(h) {
+  const n = parseInt(h.slice(1), 16);
+  return { r: (n >> 16 & 255) / 255, g: (n >> 8 & 255) / 255, b: (n & 255) / 255, a: 1 };
+}
+var PALETTE_NAMES = ["accent", "muted", "danger", "warning", "success", "info"];
+var palette = (colors) => PALETTE_NAMES.map((name, i) => ({ name, color: hex(colors[i]) }));
+var LIGHT_PALETTE = palette(["#2563eb", "#6b7280", "#dc2626", "#d97706", "#16a34a", "#0891b2"]);
+var DARK_PALETTE = palette(["#93c5fd", "#cbd5e1", "#fca5a5", "#fcd34d", "#86efac", "#67e8f9"]);
+var themes = [
+  { id: "paper", name: "Paper", background: rgb(0.984, 0.98, 0.965), ink: rgb(0.12, 0.12, 0.13), palette: LIGHT_PALETTE },
+  { id: "white", name: "White", background: rgb(1, 1, 1), ink: rgb(0.12, 0.12, 0.13), palette: LIGHT_PALETTE },
+  {
+    id: "sepia",
+    name: "Sepia",
+    background: rgb(0.953, 0.914, 0.824),
+    ink: rgb(0.23, 0.18, 0.13),
+    palette: palette(["#9a3412", "#78716c", "#b91c1c", "#b45309", "#4d7c0f", "#0e7490"])
+  },
+  { id: "blueprint", name: "Blueprint", background: rgb(0.106, 0.227, 0.361), ink: rgb(0.91, 0.945, 0.984), palette: DARK_PALETTE },
+  { id: "chalkboard", name: "Chalkboard", background: rgb(0.169, 0.227, 0.2), ink: rgb(0.945, 0.945, 0.918), palette: DARK_PALETTE },
+  { id: "midnight", name: "Midnight", background: rgb(0.082, 0.086, 0.102), ink: rgb(0.925, 0.925, 0.94), palette: DARK_PALETTE }
+];
+function themeNamed(id) {
+  return themes.find((t) => t.id === id) ?? null;
+}
+function pageTheme(page) {
+  const c = page.customTheme;
+  if (c) return { id: "custom", name: c.name, background: c.background, ink: c.ink, palette: c.palette };
+  return themeNamed(page.theme);
+}
+function paletteColor(page, name) {
+  const n = name.trim().toLowerCase();
+  return (pageTheme(page)?.palette ?? LIGHT_PALETTE).find((p) => p.name.toLowerCase() === n)?.color ?? null;
+}
+function resolvingPalette(page) {
+  const named = (e) => !!e.style.named;
+  if (!page.elements.some(named) && !(page.symbols ?? []).some((s) => s.elements.some(named))) return page;
+  const resolve2 = (e) => {
+    const n = e.style.named;
+    if (!n) return e;
+    const style2 = { ...e.style };
+    const f = n.fill !== null ? paletteColor(page, n.fill) : null;
+    const s = n.stroke !== null ? paletteColor(page, n.stroke) : null;
+    const t = n.textColor !== null ? paletteColor(page, n.textColor) : null;
+    if (f) style2.fill = { ...f };
+    if (s) style2.stroke = { ...s };
+    if (t) style2.textColor = { ...t };
+    return { ...e, style: style2 };
+  };
+  return {
+    ...page,
+    elements: page.elements.map(resolve2),
+    symbols: page.symbols ? page.symbols.map((s) => ({ ...s, elements: s.elements.map(resolve2) })) : page.symbols
+  };
 }
 
 // src/model.ts
-var SUPPORTED_VERSION = 2;
+var SUPPORTED_VERSION = 3;
 var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image", "symbol"];
 var EASES = ["linear", "easeIn", "easeOut", "easeInOut", "hold", "spring", "bounce", "elastic"];
 var KNOWN_FIELDS = {
   file: ["version", "pages", "images"],
-  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables", "flows"],
+  page: ["id", "name", "layers", "elements", "theme", "customTheme", "logic", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables", "flows"],
   flow: ["id", "from", "to", "every", "speed", "color", "size", "when", "spread", "volume", "overrides"],
   flowOverride: ["when", "volume"],
   symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button", "params"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
-  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor"],
+  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor", "named"],
+  colorNames: ["fill", "stroke", "textColor"],
+  customTheme: ["name", "background", "ink", "palette", "base"],
+  paletteColor: ["name", "color"],
   element: [
     "id",
     "kind",
@@ -247,8 +563,11 @@ var KNOWN_FIELDS = {
     "capacity",
     "delay",
     "queue",
-    "gauge"
+    "gauge",
+    "containerID",
+    "container"
   ],
+  container: ["fixed", "lanes"],
   gauge: ["metric", "of", "max", "warn", "alarm", "style", "label"],
   strokePoint: ["x", "y"],
   subpath: ["closed", "coords"],
@@ -257,7 +576,7 @@ var KNOWN_FIELDS = {
   extensionRef: ["id", "shape", "version", "params"],
   normalizedPoint: ["x", "y"],
   normalizedRect: ["x", "y", "width", "height"],
-  connector: ["start", "end", "routing", "startHead", "endHead", "waypoints", "hops", "cost"],
+  connector: ["start", "end", "routing", "startHead", "endHead", "waypoints", "hops", "avoid", "cost"],
   waypoint: ["x", "y"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
   track: ["element", "keys", "boil", "follow", "repeats", "march"],
@@ -266,7 +585,7 @@ var KNOWN_FIELDS = {
   repeat: ["start", "end", "count"],
   cameraKey: ["t", "x", "y", "width", "height", "ease"],
   marker: ["t", "name", "loop"],
-  click: ["scene", "url", "set", "toggle", "reset"],
+  click: ["scene", "url", "set", "toggle", "reset", "run"],
   hover: ["stroke", "fill", "opacity"],
   override: ["when", "stroke", "fill", "textColor", "opacity", "strokeWidth", "dash", "text", "reroute", "offline", "cost", "capacity", "delay"]
 };
@@ -280,7 +599,7 @@ var inkOnDark = { r: 0.93, g: 0.93, b: 0.94, a: 1 };
 var DottieFormatError = class extends Error {
 };
 var isObj = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
-var num = (v) => typeof v === "number" && Number.isFinite(v) ? v : void 0;
+var num2 = (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;
@@ -304,9 +623,9 @@ function webLink(url) {
 }
 function rgba(v) {
   if (!isObj(v)) return void 0;
-  const r = num(v.r), g = num(v.g), b = num(v.b);
+  const r = num2(v.r), g = num2(v.g), b = num2(v.b);
   if (r === void 0 || g === void 0 || b === void 0) return void 0;
-  return { r, g, b, a: num(v.a) ?? 1 };
+  return { r, g, b, a: num2(v.a) ?? 1 };
 }
 var Reader = class {
   constructor() {
@@ -335,28 +654,55 @@ var Reader = class {
       stroke: rgba(s.stroke) ?? { ...black },
       fill: rgba(s.fill) ?? { ...clear },
       fillStyle: ["solid", "hachure", "crossHatch", "grid"].includes(fillStyle) ? fillStyle : "solid",
-      strokeWidth: num(s.strokeWidth) ?? 2,
+      strokeWidth: num2(s.strokeWidth) ?? 2,
       dash: ["solid", "dashed", "dotted"].includes(dash) ? dash : "solid",
-      roughness: num(s.roughness) ?? 1,
-      bowing: num(s.bowing) ?? 1,
-      fontSize: num(s.fontSize) ?? 18,
+      roughness: num2(s.roughness) ?? 1,
+      bowing: num2(s.bowing) ?? 1,
+      fontSize: num2(s.fontSize) ?? 18,
       font: str(s.font) || null,
-      gridSize: num(s.gridSize) ?? null,
-      opacity: num(s.opacity) ?? null,
-      dashOffset: num(s.dashOffset) ?? null,
-      textColor: rgba(s.textColor) ?? null
+      gridSize: num2(s.gridSize) ?? null,
+      opacity: num2(s.opacity) ?? null,
+      dashOffset: num2(s.dashOffset) ?? null,
+      textColor: rgba(s.textColor) ?? null,
+      named: this.colorNames(s.named)
     };
   }
+  container(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "container");
+    return { fixed: v.fixed === true ? true : null, lanes: v.lanes === "rows" || v.lanes === "columns" ? v.lanes : null };
+  }
+  colorNames(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "colorNames");
+    const n = { fill: str(v.fill) ?? null, stroke: str(v.stroke) ?? null, textColor: str(v.textColor) ?? null };
+    return n.fill === null && n.stroke === null && n.textColor === null ? null : n;
+  }
+  customTheme(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "customTheme");
+    const background = rgba(v.background), ink = rgba(v.ink);
+    if (!background || !ink) {
+      this.warn("A custom theme needs a background and an ink; drawn without it");
+      return null;
+    }
+    const palette2 = (Array.isArray(v.palette) ? v.palette : []).filter(isObj).flatMap((p) => {
+      this.fields(p, "paletteColor");
+      const name = str(p.name), color2 = rgba(p.color);
+      return name && color2 ? [{ name, color: color2 }] : [];
+    });
+    return { name: str(v.name) ?? "Custom", background, ink, palette: palette2, base: str(v.base) ?? null };
+  }
   endpoint(v) {
     const e = isObj(v) ? v : {};
     const port = str(e.port);
-    const portIndex = num(e.portIndex);
+    const portIndex = num2(e.portIndex);
     return {
       elementID: uuid(e.elementID) ?? null,
       port: port && ["top", "right", "bottom", "left"].includes(port) ? port : null,
       portIndex: portIndex !== void 0 && Number.isInteger(portIndex) && portIndex >= 0 ? portIndex : null,
-      x: num(e.x) ?? 0,
-      y: num(e.y) ?? 0
+      x: num2(e.x) ?? 0,
+      y: num2(e.y) ?? 0
     };
   }
   connector(v) {
@@ -375,9 +721,10 @@ var Reader = class {
       endHead: head(v.endHead, "arrow"),
       waypoints: Array.isArray(v.waypoints) ? v.waypoints.filter(isObj).map((w) => {
         this.fields(w, "waypoint");
-        return { x: num(w.x) ?? 0, y: num(w.y) ?? 0 };
+        return { x: num2(w.x) ?? 0, y: num2(w.y) ?? 0 };
       }) : null,
       hops: typeof v.hops === "boolean" ? v.hops : null,
+      avoid: typeof v.avoid === "boolean" ? v.avoid : null,
       cost: typeof v.cost === "number" && Number.isFinite(v.cost) ? v.cost : null
     };
   }
@@ -410,20 +757,20 @@ var Reader = class {
       id,
       kind,
       layerID,
-      x: num(v.x) ?? 0,
-      y: num(v.y) ?? 0,
-      width: num(v.width) ?? 0,
-      height: num(v.height) ?? 0,
+      x: num2(v.x) ?? 0,
+      y: num2(v.y) ?? 0,
+      width: num2(v.width) ?? 0,
+      height: num2(v.height) ?? 0,
       style: this.style(v.style),
-      seed: (num(v.seed) ?? 1) >>> 0,
+      seed: (num2(v.seed) ?? 1) >>> 0,
       text: str(v.text) ?? null,
       connector: this.connector(v.connector),
       groupID: uuid(v.groupID) ?? null,
-      points: Array.isArray(v.points) ? v.points.filter(isObj).map((p) => ({ x: num(p.x) ?? 0, y: num(p.y) ?? 0 })) : null,
+      points: Array.isArray(v.points) ? v.points.filter(isObj).map((p) => ({ x: num2(p.x) ?? 0, y: num2(p.y) ?? 0 })) : null,
       path: Array.isArray(v.path) ? v.path.filter((c) => typeof c === "number") : null,
       subpaths,
       evenOdd: bool(v.evenOdd) ?? null,
-      rotation: num(v.rotation) ?? null,
+      rotation: num2(v.rotation) ?? null,
       link: uuid(v.link) ?? null,
       url: str(v.url) ?? null,
       anchor: str(v.anchor) ?? null,
@@ -433,20 +780,22 @@ var Reader = class {
       overrides: this.overrides(v.overrides),
       symbol: uuid(v.symbol) ?? null,
       playback: this.playback(v.playback),
-      offset: num(v.offset) ?? null,
+      offset: num2(v.offset) ?? null,
       args: strings(v.args),
       image: this.image(v.image, images),
-      reveal: num(v.reveal) ?? null,
+      reveal: num2(v.reveal) ?? null,
       ports: Array.isArray(v.ports) ? v.ports.map((p) => {
         const o = isObj(p) ? p : {};
-        return { x: num(o.x) ?? 0, y: num(o.y) ?? 0 };
+        return { x: num2(o.x) ?? 0, y: num2(o.y) ?? 0 };
       }) : null,
       labelRect: this.labelRect(v.labelRect),
       extension: this.extension(v.extension),
-      capacity: num(v.capacity) ?? null,
-      delay: num(v.delay) ?? null,
+      capacity: num2(v.capacity) ?? null,
+      delay: num2(v.delay) ?? null,
       queue: v.queue === true ? true : null,
-      gauge: this.gauge(v.gauge)
+      gauge: this.gauge(v.gauge),
+      containerID: uuid(v.containerID) ?? null,
+      container: this.container(v.container)
     };
   }
   gauge(v) {
@@ -467,7 +816,7 @@ var Reader = class {
   labelRect(v) {
     if (!isObj(v)) return null;
     this.fields(v, "normalizedRect");
-    return { x: num(v.x) ?? 0, y: num(v.y) ?? 0, width: num(v.width) ?? 0, height: num(v.height) ?? 0 };
+    return { x: num2(v.x) ?? 0, y: num2(v.y) ?? 0, width: num2(v.width) ?? 0, height: num2(v.height) ?? 0 };
   }
   extension(v) {
     if (!isObj(v)) return null;
@@ -488,7 +837,7 @@ var Reader = class {
   variables(v) {
     if (!isObj(v)) return null;
     const out = {};
-    for (const [k, b] of Object.entries(v)) if (typeof b === "boolean") out[k] = b;
+    for (const [k, b] of Object.entries(v)) if (typeof b === "boolean" || typeof b === "number" && Number.isFinite(b)) out[k] = b;
     return Object.keys(out).length > 0 ? out : null;
   }
   click(v) {
@@ -500,12 +849,22 @@ var Reader = class {
     let set = null;
     if (isObj(v.set)) {
       set = {};
-      for (const [k, b] of Object.entries(v.set)) if (typeof b === "boolean" && isName(k)) set[k] = b;
+      for (const [k, b] of Object.entries(v.set)) {
+        if (isName(k) && (typeof b === "boolean" || typeof b === "string" || typeof b === "number" && Number.isFinite(b))) set[k] = b;
+      }
       if (Object.keys(set).length === 0) set = null;
     }
     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, reset: v.reset === true ? true : null };
+    const run = str(v.run);
+    return {
+      scene: str(v.scene) ?? null,
+      url: safe,
+      set,
+      toggle: toggle && toggle.length > 0 ? toggle : null,
+      reset: v.reset === true ? true : null,
+      run: run !== void 0 && isName(run) ? run : null
+    };
   }
   playback(v) {
     const s = str(v);
@@ -521,7 +880,7 @@ var Reader = class {
       return null;
     }
     const size = (x) => {
-      const n = num(x);
+      const n = num2(x);
       return Math.max(1, n ?? 100);
     };
     const layers = (Array.isArray(v.layers) ? v.layers : []).filter(isObj).flatMap((l) => {
@@ -558,8 +917,8 @@ var Reader = class {
         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,
+        opacity: num2(o.opacity) ?? null,
+        strokeWidth: num2(o.strokeWidth) ?? null,
         dash: dash !== void 0 && ["solid", "dashed", "dotted"].includes(dash) ? dash : null,
         text: str(o.text) ?? null,
         reroute,
@@ -573,7 +932,7 @@ var Reader = class {
   hover(v) {
     if (!isObj(v)) return null;
     this.fields(v, "hover");
-    return { stroke: rgba(v.stroke) ?? null, fill: rgba(v.fill) ?? null, opacity: num(v.opacity) ?? null };
+    return { stroke: rgba(v.stroke) ?? null, fill: rgba(v.fill) ?? null, opacity: num2(v.opacity) ?? null };
   }
   ease(v) {
     const s = str(v);
@@ -587,11 +946,11 @@ var Reader = class {
   keyframe(v) {
     if (!isObj(v)) return null;
     this.fields(v, "keyframe");
-    const t = num(v.t);
+    const t = num2(v.t);
     if (t === void 0) return null;
     const k = { t };
     for (const p of ["x", "y", "width", "height", "rotation", "strokeWidth", "reveal", "opacity"]) {
-      const n = num(v[p]);
+      const n = num2(v[p]);
       if (n !== void 0) k[p] = n;
     }
     const stroke = rgba(v.stroke), fill = rgba(v.fill), visible = bool(v.visible), ease = this.ease(v.ease);
@@ -609,39 +968,39 @@ 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), start2 = num(f.start), end = num(f.end);
+      const path = uuid(f.path), start2 = num2(f.start), end = num2(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 }];
+      return [{ path, start: start2, end, ease: this.ease(f.ease), reverse: bool(f.reverse) ?? null, orient: bool(f.orient) ?? null, laps: num2(f.laps) ?? null }];
     }) : null;
     const repeats = Array.isArray(v.repeats) ? v.repeats.filter(isObj).flatMap((r) => {
-      const start2 = num(r.start), end = num(r.end);
+      const start2 = num2(r.start), end = num2(r.end);
       if (start2 === void 0 || end === void 0) return [];
-      const count = num(r.count);
+      const count = num2(r.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)) };
+    return { element, keys, boil: bool(v.boil) ?? null, follow, repeats, march: clampMarch(num2(v.march)) };
   }
   timeline(v) {
     if (!isObj(v)) return null;
     this.fields(v, "timeline");
-    const boil = num(v.boil);
+    const boil = num2(v.boil);
     const camera = Array.isArray(v.camera) ? v.camera.filter(isObj).flatMap((c) => {
-      const t = num(c.t), x = num(c.x), y = num(c.y), width = num(c.width), height = num(c.height);
+      const t = num2(c.t), x = num2(c.x), y = num2(c.y), width = num2(c.width), height = num2(c.height);
       if (t === void 0 || x === void 0 || y === void 0 || width === void 0 || height === void 0) return [];
       if (!(width > 1 && height > 1 && t >= 0)) return [];
       return [{ t, x, y, width, height, ease: this.ease(c.ease) }];
     }) : null;
     if (camera) stableSortBy(camera, (c) => c.t);
     const markers = Array.isArray(v.markers) ? v.markers.filter(isObj).flatMap((m) => {
-      const t = num(m.t);
+      const t = num2(m.t);
       return t !== void 0 && t >= 0 ? [{ t, name: str(m.name) ?? "", loop: bool(m.loop) ?? null }] : [];
     }) : null;
     if (markers) stableSortBy(markers, (m) => m.t);
-    const poster = num(v.poster);
+    const poster = num2(v.poster);
     return {
-      fps: clampFPS(num(v.fps) ?? 12),
-      duration: clampTime(num(v.duration) ?? 0),
+      fps: clampFPS(num2(v.fps) ?? 12),
+      duration: clampTime(num2(v.duration) ?? 0),
       boil: boil !== void 0 && Number.isInteger(boil) && boil > 0 ? Math.min(boil, 1e4) : null,
       settle: bool(v.settle) ?? null,
       poster: poster === void 0 ? null : clampTime(poster),
@@ -667,6 +1026,8 @@ var Reader = class {
       layers,
       elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
       theme: str(v.theme) ?? null,
+      customTheme: this.customTheme(v.customTheme),
+      logic: typeof v.logic === "string" && v.logic.length > 0 ? v.logic : 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),
@@ -678,7 +1039,7 @@ var Reader = class {
     this.fields(f, "flow");
     const id = (x) => typeof x === "string" && UUID.test(x) ? x.toUpperCase() : NO_ID;
     const finite = (x) => {
-      const n = num(x);
+      const n = num2(x);
       return n !== void 0 && Number.isFinite(n) ? n : null;
     };
     return {
@@ -718,7 +1079,7 @@ function parseDottie(source) {
     }
   }
   if (!isObj(json)) throw new DottieFormatError("Not a Dottie drawing");
-  const version = num(json.version);
+  const version = num2(json.version);
   if (version === void 0) throw new DottieFormatError("Not a Dottie drawing (no version)");
   if (!Array.isArray(json.pages) || json.pages.length === 0) throw new DottieFormatError("A drawing needs at least one page");
   const reader = new Reader();
@@ -730,7 +1091,7 @@ function parseDottie(source) {
       if (isObj(v) && typeof v.data === "string") images[k] = reader.picture(v.data, str(v.format));
     }
   }
-  const pages = json.pages.map((p, i) => reader.page(p, images, i + 1));
+  const pages = json.pages.map((p, i) => resolvingPalette(reader.page(p, images, i + 1)));
   if (new Set(pages.map((p) => p.id)).size !== pages.length) throw new DottieFormatError("Two pages share an id");
   return { version, pages, warnings: reader.warnings };
 }
@@ -750,7 +1111,8 @@ function cloneElement(e) {
       ...e.style,
       stroke: { ...e.style.stroke },
       fill: { ...e.style.fill },
-      textColor: e.style.textColor ? { ...e.style.textColor } : null
+      textColor: e.style.textColor ? { ...e.style.textColor } : null,
+      named: e.style.named ? { ...e.style.named } : e.style.named
     },
     connector: e.connector ? {
       ...e.connector,
@@ -1240,6 +1602,165 @@ function shapePath(e) {
   return path;
 }
 
+// src/elbow.ts
+var MARGIN = 16;
+var BEND = 24;
+var SMALLEST = 24;
+var MOST = 48;
+function obstacle(e) {
+  if (e.kind === "connector" || e.kind === "text" || e.kind === "freehand") return null;
+  if (e.kind === "path" && !e.extension) return null;
+  if (e.style.opacity !== null && e.style.opacity <= 0) return null;
+  const r = rotatedBounds(e);
+  return r.width < SMALLEST || r.height < SMALLEST ? null : r;
+}
+function crosses(points, r) {
+  const x1 = r.x + r.width, y1 = r.y + r.height;
+  for (let k = 1; k < points.length; k++) {
+    const p = points[k - 1], q = points[k];
+    if (p.y === q.y) {
+      if (r.y < p.y && p.y < y1 && Math.min(p.x, q.x) < x1 && Math.max(p.x, q.x) > r.x) return true;
+    } else if (p.x === q.x) {
+      if (r.x < p.x && p.x < x1 && Math.min(p.y, q.y) < y1 && Math.max(p.y, q.y) > r.y) return true;
+    }
+  }
+  return false;
+}
+var padded = (r) => ({ x: r.x - MARGIN, y: r.y - MARGIN, width: r.width + 2 * MARGIN, height: r.height + 2 * MARGIN });
+var inside = (p, r) => r.x < p.x && p.x < r.x + r.width && r.y < p.y && p.y < r.y + r.height;
+var memo = /* @__PURE__ */ new Map();
+function avoiding(plain, a, b, startVertical, endVertical, elements, except) {
+  const usable = (r) => !inside(a, padded(r)) && !inside(b, padded(r));
+  const all = [];
+  let crossed = false;
+  for (const e of elements) {
+    if (except.has(e.id)) continue;
+    const r = obstacle(e);
+    if (!r || !usable(r)) continue;
+    all.push(r);
+    if (!crossed && crosses(plain, r)) crossed = true;
+  }
+  if (!crossed) return plain;
+  const key = JSON.stringify([a.x, a.y, b.x, b.y, startVertical, endVertical, all.map((r) => [r.x, r.y, r.width, r.height])]);
+  const hit = memo.get(key);
+  if (hit) return hit;
+  const out = route(plain, a, b, startVertical, endVertical, all);
+  if (memo.size >= 512) memo.clear();
+  memo.set(key, out);
+  return out;
+}
+function route(plain, a, b, startVertical, endVertical, usable) {
+  let chosen = usable.map((_, i) => i).filter((i) => crosses(plain, usable[i]));
+  if (chosen.length === 0) return plain;
+  for (let round = 0; round < 4; round++) {
+    if (chosen.length > MOST) return plain;
+    const path = grid(a, b, startVertical, endVertical, chosen.map((i) => padded(usable[i])));
+    if (!path) return plain;
+    const more = usable.map((_, i) => i).filter((i) => !chosen.includes(i) && crosses(path, usable[i]));
+    if (more.length === 0) return path;
+    chosen = [...chosen, ...more].sort((p, q) => p - q);
+  }
+  return plain;
+}
+function grid(a, b, startVertical, endVertical, boxes) {
+  let xs = [a.x, b.x, (a.x + b.x) / 2], ys = [a.y, b.y, (a.y + b.y) / 2];
+  for (const r of boxes) {
+    xs.push(r.x, r.x + r.width);
+    ys.push(r.y, r.y + r.height);
+  }
+  xs = [...new Set(xs)].sort((p, q) => p - q);
+  ys = [...new Set(ys)].sort((p, q) => p - q);
+  const nx = xs.length, ny = ys.length;
+  const ia = xs.indexOf(a.x), ja = ys.indexOf(a.y), ib = xs.indexOf(b.x), jb = ys.indexOf(b.y);
+  if (ia < 0 || ja < 0 || ib < 0 || jb < 0) return null;
+  const at = new Map(xs.map((x, k) => [x, k])), bt = new Map(ys.map((y, k) => [y, k]));
+  const inner = new Uint8Array(nx * ny), acrossBlocked = new Uint8Array(nx * ny), downBlocked = new Uint8Array(nx * ny);
+  for (const r of boxes) {
+    const i0 = at.get(r.x), i1 = at.get(r.x + r.width), j0 = bt.get(r.y), j1 = bt.get(r.y + r.height);
+    if (i0 === void 0 || i1 === void 0 || j0 === void 0 || j1 === void 0) continue;
+    for (let i = i0; i < i1; i++) for (let j = j0; j < j1; j++) {
+      if (j > j0) acrossBlocked[i * ny + j] = 1;
+      if (i > i0) downBlocked[i * ny + j] = 1;
+      if (i > i0 && j > j0) inner[i * ny + j] = 1;
+    }
+  }
+  const blocked = (i, j) => inner[i * ny + j] === 1;
+  const across = (i0, i1, j) => acrossBlocked[Math.min(i0, i1) * ny + j] === 1;
+  const down = (j0, j1, i) => downBlocked[i * ny + Math.min(j0, j1)] === 1;
+  const count = nx * ny * 2;
+  const dist = new Array(count).fill(Infinity), prev = new Array(count).fill(-1);
+  const done = new Array(count).fill(false);
+  const heap = new Frontier();
+  const first = (ia * ny + ja) * 2 + (startVertical ? 1 : 0);
+  dist[first] = 0;
+  heap.push(0, first);
+  const want = (ib * ny + jb) * 2 + (endVertical ? 1 : 0);
+  for (let top = heap.pop(); top; top = heap.pop()) {
+    const [cost, s] = top;
+    if (done[s]) continue;
+    done[s] = true;
+    if (s === want) break;
+    const node = Math.floor(s / 2), axis = s % 2, i = Math.floor(node / ny), j = node % ny;
+    for (const [di, dj] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) {
+      const ni = i + di, nj = j + dj;
+      if (ni < 0 || ni >= nx || nj < 0 || nj >= ny || blocked(ni, nj)) continue;
+      const turn = di !== 0 ? 0 : 1;
+      if (di !== 0 ? across(i, ni, j) : down(j, nj, i)) continue;
+      const length = Math.abs(xs[ni] - xs[i]) + Math.abs(ys[nj] - ys[j]);
+      const c = cost + length + (turn !== axis ? BEND : 0);
+      const t = (ni * ny + nj) * 2 + turn;
+      if (c < dist[t]) {
+        dist[t] = c;
+        prev[t] = s;
+        heap.push(c, t);
+      }
+    }
+  }
+  if (!done[want]) return null;
+  const points = [];
+  for (let s = want; s >= 0; s = prev[s]) {
+    const node = Math.floor(s / 2);
+    points.push({ x: xs[Math.floor(node / ny)], y: ys[node % ny] });
+  }
+  return points.reverse();
+}
+var Frontier = class {
+  constructor() {
+    __publicField(this, "heap", []);
+    __publicField(this, "next", 0);
+  }
+  less(i, j) {
+    const a = this.heap[i], b = this.heap[j];
+    return a[0] < b[0] || a[0] === b[0] && a[1] < b[1];
+  }
+  push(cost, state) {
+    this.heap.push([cost, this.next++, state]);
+    for (let i = this.heap.length - 1; i > 0; ) {
+      const up = i - 1 >> 1;
+      if (!this.less(i, up)) break;
+      [this.heap[i], this.heap[up]] = [this.heap[up], this.heap[i]];
+      i = up;
+    }
+  }
+  pop() {
+    if (this.heap.length === 0) return null;
+    const top = this.heap[0], last = this.heap.pop();
+    if (this.heap.length > 0) {
+      this.heap[0] = last;
+      for (let i = 0; ; ) {
+        const l = 2 * i + 1, r = l + 1;
+        let m = i;
+        if (l < this.heap.length && this.less(l, m)) m = l;
+        if (r < this.heap.length && this.less(r, m)) m = r;
+        if (m === i) break;
+        [this.heap[i], this.heap[m]] = [this.heap[m], this.heap[i]];
+        i = m;
+      }
+    }
+    return [top[0], top[2]];
+  }
+};
+
 // src/connector.ts
 function portPoint(shape, port) {
   const r = frame(shape);
@@ -1383,7 +1904,7 @@ function routeThrough(p, c) {
     }
   }
 }
-function route(e, index) {
+function route2(e, index) {
   const c = e.connector;
   if (!c) return { kind: "polyline", points: [] };
   const [a, b] = endpoints(e, index);
@@ -1399,16 +1920,19 @@ function route(e, index) {
     case "elbow": {
       const startV = vertical(c.start.port) ?? !horizontal;
       const endV = vertical(c.end.port) ?? !horizontal;
+      let plain;
       if (startV && endV) {
         const my = a.y + dy / 2;
-        return { kind: "polyline", points: [a, { x: a.x, y: my }, { x: b.x, y: my }, b] };
-      }
-      if (!startV && !endV) {
+        plain = [a, { x: a.x, y: my }, { x: b.x, y: my }, b];
+      } else if (!startV && !endV) {
         const mx = a.x + dx / 2;
-        return { kind: "polyline", points: [a, { x: mx, y: a.y }, { x: mx, y: b.y }, b] };
-      }
-      if (startV) return { kind: "polyline", points: [a, { x: a.x, y: b.y }, b] };
-      return { kind: "polyline", points: [a, { x: b.x, y: a.y }, b] };
+        plain = [a, { x: mx, y: a.y }, { x: mx, y: b.y }, b];
+      } else if (startV) plain = [a, { x: a.x, y: b.y }, b];
+      else plain = [a, { x: b.x, y: a.y }, b];
+      if (c.avoid !== true) return { kind: "polyline", points: plain };
+      const ends = new Set([c.start.elementID, c.end.elementID].filter((x) => x !== null));
+      const routed = avoiding(plain, a, b, startV, endV, index.values(), ends);
+      return { kind: "polyline", points: routed === plain ? plain : simplified(routed) };
     }
   }
 }
@@ -1419,7 +1943,7 @@ function arrowhead(tip, from, size) {
   return [wing(spread), wing(-spread)];
 }
 function connectorBounds(e, index) {
-  const pts = routePoints(route(e, index));
+  const pts = routePoints(route2(e, index));
   if (pts.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
   let x0 = pts[0].x, y0 = pts[0].y, x1 = x0, y1 = y0;
   for (const p of pts) {
@@ -1431,7 +1955,7 @@ function connectorBounds(e, index) {
   return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
 }
 function midpoint(e, index) {
-  const pts = routePoints(route(e, index));
+  const pts = routePoints(route2(e, index));
   if (pts.length <= 1) return pts[0] ?? { x: 0, y: 0 };
   const lengths = [];
   let total = 0;
@@ -1580,7 +2104,7 @@ function graphOf(frame2) {
   graphs.set(els, { members: [...els], graph });
   return graph;
 }
-var Frontier = class {
+var Frontier2 = class {
   constructor() {
     __publicField(this, "heap", []);
   }
@@ -1634,7 +2158,7 @@ function grow({ shapes: shapes2, next }, from, offline, until) {
   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();
+  const open = new Frontier2();
   open.push(from, 0, 0);
   while (open.size > 0) {
     const { id: n, order: o } = open.pop();
@@ -1740,6 +2264,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     return pts;
   };
   const metrics2 = emptyMetrics();
+  const routes = /* @__PURE__ */ new Map();
   for (const e of frame2.elements) {
     if (e.kind === "connector" && !e.connector) continue;
     metrics2.elements.set(e.id, { throughput: 0, load: null, delay: e.kind !== "connector" ? delayOf(e) : 0, backlog: 0, inFlight: 0, depth: 0 });
@@ -1751,7 +2276,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     if (c !== null && Number.isFinite(c)) room.set(e.id, Math.max(c, 0));
   }
   const full = () => new Set([...room].filter(([, v]) => v <= TINY).map(([id]) => id));
-  const route2 = (tree, goal) => {
+  const route3 = (tree, goal) => {
     const hops = [], shapes2 = [];
     let at = goal;
     for (let step = tree.came.get(at); step; step = tree.came.get(at)) {
@@ -1763,7 +2288,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     return { hops: hops.reverse(), shapes: shapes2.reverse() };
   };
   const way = (hops, shapes2) => {
-    const points = [], inside = [], stretches = [];
+    const points = [], inside2 = [], stretches = [];
     let length = 0;
     hops.forEach(([id, back], k) => {
       const c = byID.get(id);
@@ -1774,7 +2299,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
       if (last) {
         const gap = Math.hypot(line2[0].x - last.x, line2[0].y - last.y);
         const shape = byID.get(shapes2[k]);
-        inside.push([length, length + gap, shape ? delayOf(shape) : 0]);
+        inside2.push([length, length + gap, shape ? delayOf(shape) : 0]);
         length += gap;
       }
       const start2 = length;
@@ -1782,7 +2307,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
       stretches.push([id, start2, length]);
       points.push(...line2);
     });
-    return length > 0 ? { line: new Polyline(points), length, inside, stretches } : null;
+    return length > 0 ? { line: new Polyline(points), length, inside: inside2, stretches } : null;
   };
   const along = (w, elapsedAt, speed) => {
     let elapsed = elapsedAt, d = 0;
@@ -1823,6 +2348,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     if (flow.when !== null && values !== null && !holds(flow.when, values)) continue;
     const source = byID.get(flow.from);
     const base2 = source ? baseTree(flow.from) : null;
+    routes.set(flow.id, []);
     if (!source || !base2) continue;
     const volume = amountIn(flow, values);
     const fm = { volume, placed: 0, backlog: 0, backup: 0, transit: null };
@@ -1837,7 +2363,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
         const tree = flowTree(flow.from, frame2, union2(offline, full()), candidates[0]);
         const goal2 = tree?.goals(candidates, false)[0];
         if (!tree || goal2 === void 0) break;
-        const r = route2(tree, goal2);
+        const r = route3(tree, goal2);
         const ids = [...r.shapes, ...r.hops.map(([id]) => id)];
         const rooms = ids.filter((id) => room.has(id)).map((id) => room.get(id));
         const fits = Math.min(left, rooms.length > 0 ? Math.min(...rooms) : Infinity);
@@ -1850,7 +2376,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
       let at = flow.from;
       const goal = base2.goals(candidates, false)[0];
       if (goal !== void 0) {
-        const r = route2(base2, goal), done = full();
+        const r = route3(base2, goal), done = full();
         const sequence = [[r.shapes[0], r.shapes[0]]];
         r.hops.forEach(([id], k) => {
           sequence.push([id, r.shapes[k]], [r.shapes[k + 1], r.shapes[k]]);
@@ -1879,6 +2405,13 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
       else waiting2.push([at, left]);
     }
     waitingBy.set(flow.id, waiting2);
+    routes.set(flow.id, placements.map((p) => ({
+      goal: p.goal,
+      hops: p.hops,
+      amount: p.amount,
+      waits: p.waits === true,
+      cost: p.hops.reduce((s, [id]) => s + routeCost(byID.get(id)?.connector?.cost ?? null), 0)
+    })));
     for (const p of placements) {
       for (const id of [...p.shapes, ...p.hops.map(([h]) => h)]) bump(id, (m) => {
         m.throughput += p.amount;
@@ -1961,7 +2494,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
           const tree = flowTree(at, frame2, union2(offline, blocked), flow.to[0]);
           const goal = tree?.goals(flow.to, false)[0];
           if (!tree || goal === void 0) break;
-          const r = route2(tree, goal);
+          const r = route3(tree, goal);
           const ids = [...r.shapes.slice(1), ...r.hops.map(([id]) => id)];
           const rooms = ids.filter((id) => trial.has(id)).map((id) => trial.get(id));
           const spare = rooms.length > 0 ? Math.min(...rooms) : Infinity;
@@ -2016,7 +2549,7 @@ function flowFrame(flows, frame2, t, values, offline = /* @__PURE__ */ new Set()
     if (c === null || !Number.isFinite(c) || !m) continue;
     m.load = c > 0 ? m.throughput / c : 1;
   }
-  return { packets, metrics: metrics2 };
+  return { packets, metrics: metrics2, routes };
 }
 var BLANK = {
   seed: 1,
@@ -2110,16 +2643,16 @@ function finishing(elements, metrics2, values, frame2, flows, since = Infinity,
 }
 var gaugeKey = (id) => "gauge|" + id;
 var GAUGE_EASE = 1;
-var hex = (h) => {
+var hex2 = (h) => {
   const v = parseInt(h.slice(1), 16);
   return { r: (v >> 16 & 255) / 255, g: (v >> 8 & 255) / 255, b: (v & 255) / 255, a: 1 };
 };
-var GAUGE_GREEN = hex("#16a34a");
-var GAUGE_AMBER = hex("#d97706");
-var GAUGE_RED = hex("#dc2626");
-var GAUGE_BLUE = hex("#2f6fdf");
-var GAUGE_TRACK = hex("#e5e7eb");
-var GAUGE_GRAY = hex("#9ca3af");
+var GAUGE_GREEN = hex2("#16a34a");
+var GAUGE_AMBER = hex2("#d97706");
+var GAUGE_RED = hex2("#dc2626");
+var GAUGE_BLUE = hex2("#2f6fdf");
+var GAUGE_TRACK = hex2("#e5e7eb");
+var GAUGE_GRAY = hex2("#9ca3af");
 function formatted(metric, v) {
   if (v === null || !Number.isFinite(v)) return "\u2013";
   switch (metric) {
@@ -2405,17 +2938,17 @@ function clusterStrokes(c, angle2, size) {
   });
 }
 function contains(contours, p) {
-  let inside = false;
+  let inside2 = false;
   for (const poly of contours) {
     if (poly.length < 3) continue;
     let k = poly.length - 1;
     for (let i = 0; i < poly.length; i++) {
       const a = poly[i], b = poly[k];
-      if (a.y > p.y !== b.y > p.y && p.x < (b.x - a.x) * (p.y - a.y) / (b.y - a.y) + a.x) inside = !inside;
+      if (a.y > p.y !== b.y > p.y && p.x < (b.x - a.x) * (p.y - a.y) / (b.y - a.y) + a.x) inside2 = !inside2;
       k = i;
     }
   }
-  return inside;
+  return inside2;
 }
 function distance(p, contours) {
   let best = Infinity;
@@ -2692,7 +3225,7 @@ function connectorParts(e, index, page) {
   const c = e.connector;
   if (!c) return [new Path(), new Path()];
   const [a, b] = endpoints(e, index);
-  const r = route(e, index);
+  const r = route2(e, index);
   const hops = c.hops === true && page ? hopCrossings(e, r, page, index) : [];
   const key = [
     e.seed,
@@ -2780,7 +3313,7 @@ function linesBeneath(e, page, index) {
   }
   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));
+    const points = routePoints(route2(f.under[f.lines.length], index));
     f.lines.push({ points, box: boxOf(points) });
   }
   return { lines: f.lines, count };
@@ -2794,7 +3327,7 @@ function hopCrossings(e, r, page, index) {
   for (const samples of segments) {
     const along = runningLengths(samples);
     const length = along[along.length - 1];
-    const found = [];
+    const found2 = [];
     const near = [];
     const whole = boxOf(samples);
     for (let n = 0; n < count; n++) if (touching(whole, lines[n].box)) near.push(lines[n]);
@@ -2811,12 +3344,12 @@ function hopCrossings(e, r, page, index) {
           if (Math.abs(det) < 1e-9) continue;
           const wx = a.x - p.x, wy = a.y - p.y;
           const t = (wx * ey - wy * ex) / det, s = (wx * dy - wy * dx) / det;
-          if (t > 0 && t < 1 && s >= 0 && s <= 1) found.push(along[i] + t * (along[i + 1] - along[i]));
+          if (t > 0 && t < 1 && s >= 0 && s <= 1) found2.push(along[i] + t * (along[i + 1] - along[i]));
         }
       }
     }
     const kept = [];
-    for (const at of found.sort((x, y) => x - y)) {
+    for (const at of found2.sort((x, y) => x - y)) {
       if (at < rad + 2 || at > length - rad - 2) continue;
       if (kept.length > 0 && at - kept[kept.length - 1] < 2 * rad + 2) continue;
       kept.push(at);
@@ -3030,7 +3563,7 @@ var lerpColor = (a, b, u) => ({
   b: mix01(a.b, b.b, u),
   a: mix01(a.a, b.a, u)
 });
-function num2(track, t, p, base2) {
+function num3(track, t, p, base2) {
   return value(track, t, (k) => k[p], base2, lerpNum);
 }
 function isChanging(track, t) {
@@ -3056,20 +3589,20 @@ function isVisible(track, t) {
 function applyTrack(track, e, t) {
   e = cloneElement(e);
   if (track.keys.some((k) => k.reveal !== void 0)) {
-    const r = num2(track, t, "reveal", e.reveal ?? 1);
+    const r = num3(track, t, "reveal", e.reveal ?? 1);
     e.reveal = r >= 1 ? null : Math.max(0, r);
   }
   if (track.keys.some((k) => k.opacity !== void 0)) {
-    const o = Math.min(Math.max(num2(track, t, "opacity", e.style.opacity ?? 1), 0), 1);
+    const o = Math.min(Math.max(num3(track, t, "opacity", e.style.opacity ?? 1), 0), 1);
     e.style.opacity = o >= 1 ? null : o;
   }
   if (e.kind === "connector") return e;
-  e.x = num2(track, t, "x", e.x);
-  e.y = num2(track, t, "y", e.y);
-  e.width = Math.max(0, num2(track, t, "width", e.width));
-  e.height = Math.max(0, num2(track, t, "height", e.height));
-  if (track.keys.some((k) => k.rotation !== void 0)) e.rotation = num2(track, t, "rotation", angle(e));
-  e.style.strokeWidth = Math.max(0, num2(track, t, "strokeWidth", e.style.strokeWidth));
+  e.x = num3(track, t, "x", e.x);
+  e.y = num3(track, t, "y", e.y);
+  e.width = Math.max(0, num3(track, t, "width", e.width));
+  e.height = Math.max(0, num3(track, t, "height", e.height));
+  if (track.keys.some((k) => k.rotation !== void 0)) e.rotation = num3(track, t, "rotation", angle(e));
+  e.style.strokeWidth = Math.max(0, num3(track, t, "strokeWidth", e.style.strokeWidth));
   e.style.stroke = value(track, t, (k) => k.stroke, e.style.stroke, lerpColor);
   e.style.fill = value(track, t, (k) => k.fill, e.style.fill, lerpColor);
   return e;
@@ -3084,7 +3617,7 @@ function followSpan(track, t) {
   return f;
 }
 function tracing(e, page, index = indexOf(page)) {
-  if (e.kind === "connector") return new Polyline(routePoints(route(e, index)));
+  if (e.kind === "connector") return new Polyline(routePoints(route2(e, index)));
   const clean = cloneElement(e);
   clean.style.roughness = 0;
   const pts = outline(clean).contours()[0] ?? [];
@@ -3145,7 +3678,8 @@ function posedWithMetrics(page, t, state = "initial", since = null, carried = {}
   }
   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);
+  const fills = values !== null && Object.keys(values).length > 0 && page.elements.some((e) => e.text?.includes("{") || (e.overrides ?? []).some((o) => o.text?.includes("{")));
+  const timeline = page.timeline ?? (off.size === 0 && active.size === 0 && !measuring && !fills ? null : EMPTY_TIMELINE);
   if (!timeline) return { frame: page, metrics: emptyMetrics() };
   t = clampTime(t);
   const tracks = trackMap(timeline);
@@ -3181,6 +3715,10 @@ function posedWithMetrics(page, t, state = "initial", since = null, carried = {}
     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);
+    if (fills && values && out.text) {
+      const text = filling(out.text, values);
+      if (text !== out.text) out = { ...out, text };
+    }
     const list = active.get(e.id);
     if (list) {
       const caps = list.map((o) => o.capacity).filter((c) => c !== null && Number.isFinite(c));
@@ -3364,10 +3902,10 @@ var Expansions = class {
     this.posing = posing;
   }
 };
-function expandingSymbols(page, t, posing = true, times = /* @__PURE__ */ new Map(), memo) {
+function expandingSymbols(page, t, posing = true, times = /* @__PURE__ */ new Map(), memo2) {
   if (!hasInstances(page)) return page;
   const budget = { left: MAX_ELEMENTS };
-  const m = memo && memo.page === page && memo.t === t && memo.posing === posing ? memo : void 0;
+  const m = memo2 && memo2.page === page && memo2.t === t && memo2.posing === posing ? memo2 : void 0;
   return { ...page, elements: expand(page.elements, page, t, symbolTable(page), [], posing, budget, times, m) };
 }
 function symbolTable(page) {
@@ -3375,7 +3913,7 @@ function symbolTable(page) {
   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(), memo) {
+function expand(elements, page, t, table, stack, posing, budget, times = /* @__PURE__ */ new Map(), memo2) {
   const instances = new Set(elements.filter((e) => e.kind === "symbol").map((e) => e.id));
   if (instances.size === 0) {
     budget.left -= elements.length;
@@ -3401,7 +3939,7 @@ function expand(elements, page, t, table, stack, posing, budget, times = /* @__P
       continue;
     }
     const override0 = stack.length === 0 ? times.get(e.id) : void 0;
-    const was = memo?.made.get(e);
+    const was = memo2?.made.get(e);
     if (was && was.override === override0 && was.after > 0 && budget.left - (was.before - was.after) > 0) {
       budget.left -= was.before - was.after;
       for (const x of was.out) out.push(x);
@@ -3423,7 +3961,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) });
+    if (memo2 && stack.length === 0 && !was) memo2.made.set(e, { override: override0, before, after: budget.left, out: out.slice(from) });
   }
   return out;
 }
@@ -3476,8 +4014,8 @@ function mix2(x) {
   return z ^ z >> 31n;
 }
 function halves(id) {
-  const hex2 = id.replace(/-/g, "").padStart(32, "0").slice(-32);
-  return [BigInt(`0x${hex2.slice(0, 16)}`), BigInt(`0x${hex2.slice(16)}`)];
+  const hex3 = id.replace(/-/g, "").padStart(32, "0").slice(-32);
+  return [BigInt(`0x${hex3.slice(0, 16)}`), BigInt(`0x${hex3.slice(16)}`)];
 }
 function derivedID(instance, inner) {
   const [a, b] = halves(instance), [c, d] = halves(inner);
@@ -3498,7 +4036,12 @@ 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 } : {}, ...c.reset ? { reset: true } : {} } : null;
+    const state = c && changesState(c) ? {
+      ...c.set ? { set: c.set } : {},
+      ...c.toggle ? { toggle: c.toggle } : {},
+      ...c.reset ? { reset: true } : {},
+      ...c.run ? { run: c.run } : {}
+    } : null;
     if (c?.scene) {
       const i = sceneNamed(c.scene, markers);
       if (i >= 0) {
@@ -3805,12 +4348,23 @@ function inline(src, style2 = {}) {
       i += m[0].length;
       continue;
     }
-    if (m = /^(\*\*|__)(?=\S)([\s\S]*?\S)\1/.exec(rest)) {
+    if (m = /^(\*\*\*|___)(?=\S)([\s\S]*?\S)\1(?!\*|_)/.exec(rest)) {
       emit();
-      out.push(...inline(m[2], { ...style2, bold: true }));
+      out.push(...inline(m[2], { ...style2, bold: true, italic: true }));
       i += m[0].length;
       continue;
     }
+    if (m = /^(\*\*|__)(?=\S)([\s\S]*?\S)\1/.exec(rest)) {
+      let body = m[2], length = m[0].length;
+      if (m[1] === "**" && rest[length] === "*" && (body.replace(/\*\*/g, "").match(/\*/g) ?? []).length % 2 === 1) {
+        body += "*";
+        length++;
+      }
+      emit();
+      out.push(...inline(body, { ...style2, bold: true }));
+      i += length;
+      continue;
+    }
     if ((m = /^(\*|_)(?=\S)([\s\S]*?\S)\1(?!\1)/.exec(rest)) && (m[1] === "*" || !/\w/.test(src[i - 1] ?? ""))) {
       emit();
       out.push(...inline(m[2], { ...style2, italic: true }));
@@ -4194,20 +4748,6 @@ function sameStyle(a, b) {
   return a === b || a.size === b.size && a.bold === b.bold && a.italic === b.italic && a.mono === b.mono && a.strike === b.strike && a.underline === b.underline && a.alpha === b.alpha;
 }
 
-// src/theme.ts
-var rgb = (r, g, b) => ({ r, g, b, a: 1 });
-var themes = [
-  { id: "paper", name: "Paper", background: rgb(0.984, 0.98, 0.965), ink: rgb(0.12, 0.12, 0.13) },
-  { id: "white", name: "White", background: rgb(1, 1, 1), ink: rgb(0.12, 0.12, 0.13) },
-  { id: "sepia", name: "Sepia", background: rgb(0.953, 0.914, 0.824), ink: rgb(0.23, 0.18, 0.13) },
-  { id: "blueprint", name: "Blueprint", background: rgb(0.106, 0.227, 0.361), ink: rgb(0.91, 0.945, 0.984) },
-  { id: "chalkboard", name: "Chalkboard", background: rgb(0.169, 0.227, 0.2), ink: rgb(0.945, 0.945, 0.918) },
-  { id: "midnight", name: "Midnight", background: rgb(0.082, 0.086, 0.102), ink: rgb(0.925, 0.925, 0.94) }
-];
-function themeNamed(id) {
-  return themes.find((t) => t.id === id) ?? null;
-}
-
 // src/svg.ts
 function bounds(page, padding = 24) {
   if (hasInstances(page)) return bounds(expandingSymbols(page, 0), padding);
@@ -4273,7 +4813,7 @@ function svgOpen(b, background, paint) {
 }
 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 theme = pageTheme(page);
   const bg = background ? theme?.background ?? background : null;
   const ink = theme?.ink ?? black;
   const d = { ...page, elements: page.elements.map((e) => resolvingInk(e, ink)) };
@@ -4309,7 +4849,7 @@ ${body}</a>
 }
 function svg(page, background = { r: 1, g: 1, b: 1, a: 1 }, fixed) {
   const { bounds: b, parts } = svgParts(page, background, fixed, true);
-  return svgOpen(b, themeNamed(page.theme)?.background ?? background, background !== null) + parts.map((p) => p.markup).join("") + "</svg>\n";
+  return svgOpen(b, pageTheme(page)?.background ?? background, background !== null) + parts.map((p) => p.markup).join("") + "</svg>\n";
 }
 function labelRect(e, index) {
   const m = midpoint(e, index);
@@ -4403,7 +4943,7 @@ function svgElement(e, index, labelBackground, page) {
       }
       s += `<path d="${outline(e).data()}" fill="none" ${strokeAttrs}/>
 `;
-      if (text) s += e.kind === "note" ? noteMarkup(text, e) : textElement(text, e.kind === "path" ? pathLabelBox(e) : frame(e), e, true);
+      if (text) s += e.kind === "note" ? noteMarkup(text, e) : textElement(text, e.kind === "path" || e.kind === "rectangle" ? pathLabelBox(e) : frame(e), e, true);
       return s;
     }
     default:
@@ -4539,6 +5079,40 @@ function servePlans() {
   });
 }
 
+// src/logic-loader.ts
+var scriptSrc = typeof document !== "undefined" ? document.currentScript?.src ?? null : null;
+var found = null;
+var present = () => globalThis.DottieLogic;
+function logicEngine() {
+  found ?? (found = (async () => {
+    if (!present()) {
+      const here = import.meta.url;
+      const base2 = here ?? scriptSrc;
+      if (!base2) throw new Error("No dottie-logic.min.js on the page, and no address to find it from");
+      const url = new URL("./dottie-logic.min.js", base2).href;
+      if (here) await import(
+        /* @vite-ignore */
+        url
+      );
+      else await new Promise((resolve2, reject) => {
+        const s = document.createElement("script");
+        s.src = url;
+        s.onload = () => resolve2();
+        s.onerror = () => reject(new Error(`Couldn't load ${url}`));
+        document.head.append(s);
+      });
+    }
+    const engine = present();
+    if (!engine) throw new Error("dottie-logic.min.js didn't load");
+    await engine.loadLogic();
+    return engine;
+  })());
+  found.catch(() => {
+    found = null;
+  });
+  return found;
+}
+
 // src/player.ts
 var WHITE = { r: 1, g: 1, b: 1, a: 1 };
 function pageIndex(file, spec) {
@@ -4646,7 +5220,7 @@ var Playback = class {
     this.sceneNames = (page.timeline?.markers ?? []).map((m) => m.name);
     this.sceneLoops = (page.timeline?.markers ?? []).map((m) => m.loop === true);
     this.state = { ...page.variables ?? {} };
-    const theme = themeNamed(page.theme);
+    const theme = pageTheme(page);
     this.background = theme?.background ?? WHITE;
     this.ink = theme?.ink ?? { r: 0.12, g: 0.12, b: 0.13, a: 1 };
     const ns = "http://www.w3.org/2000/svg";
@@ -4880,6 +5454,9 @@ var DottiePlayer = class extends ElementBase {
     __publicField(this, "stillTime", null);
     __publicField(this, "visible", true);
     __publicField(this, "observer", null);
+    /** Runs handler `handler` from the page's logic for a click on `id` (DottieDocument.clicked). Clicks take turns, so
+     * each handler sees the state the one before left. */
+    __publicField(this, "logicQueue", Promise.resolve());
     this.root = this.attachShadow({ mode: "open" });
     this.root.innerHTML = `<style>${STYLE}</style><div class="stage" part="stage" role="img"></div>
 <div class="bar" part="controls" hidden>
@@ -5106,7 +5683,9 @@ var DottiePlayer = class extends ElementBase {
       this.scheduleReplay();
     }
     if (!click) return;
-    if (click.set || click.toggle || click.reset) {
+    if (click.run && p.page.logic && this.hasAttribute("allow-logic")) {
+      this.runLogic(click.run, id, click.reset === true);
+    } else 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,
@@ -5128,6 +5707,35 @@ var DottiePlayer = class extends ElementBase {
       }
     }
   }
+  runLogic(handler, id, reset) {
+    const p = this.playback;
+    if (!p) return;
+    const e = p.page.elements.find((x) => x.id === id);
+    const s = p.sceneAt(p.frame);
+    const event = {
+      id,
+      anchor: e?.anchor ?? null,
+      text: e?.text?.split("\n")[0] ?? null,
+      time: this.currentTime,
+      scene: s < 0 ? null : p.sceneNames[s]
+    };
+    this.logicQueue = this.logicQueue.then(async () => {
+      const engine = await logicEngine();
+      const now = this.playback;
+      if (!now || now !== p || !now.page.logic) return;
+      let start2 = now.state;
+      if (reset) {
+        start2 = {};
+        for (const k of Object.keys(now.state)) start2[k] = false;
+        Object.assign(start2, now.page.variables ?? {});
+      }
+      const r = engine.runLogic(now.page.logic, handler, start2, event);
+      if (r.ok) this.setState({ ...start2, ...r.set });
+      else this.dispatchEvent(new CustomEvent("logicerror", { detail: { element: id, handler, error: r.error } }));
+    }).catch((err) => {
+      this.dispatchEvent(new CustomEvent("logicerror", { detail: { element: id, handler, error: err.message } }));
+    });
+  }
   /** The page's variables now. */
   get variables() {
     return { ...this.playback?.state ?? {} };
@@ -5234,7 +5842,7 @@ var DottiePlayer = class extends ElementBase {
     if (handled) e.preventDefault();
   }
 };
-__publicField(DottiePlayer, "observedAttributes", ["src", "page", "at", "clean", "no-controls", "label"]);
+__publicField(DottiePlayer, "observedAttributes", ["src", "page", "at", "clean", "no-controls", "label", "allow-logic"]);
 function clickable(target) {
   const el = target;
   return el && typeof el.closest === "function" ? el.closest(".dottie-a") : null;
@@ -5300,7 +5908,7 @@ function inspectFrame(page, t) {
       const [a, b] = endpoints(e, index);
       d.start = pt(a);
       d.end = pt(b);
-      d.route = routePoints(route(e, index)).map(pt);
+      d.route = routePoints(route2(e, index)).map(pt);
     }
     return d;
   });
@@ -5339,7 +5947,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.9.0";
+var VERSION = "0.11.0";
 
 // src/player-entry.ts
 servePlans();
@@ -5380,6 +5988,8 @@ export {
   luminance,
   orderedElements,
   pageIndex,
+  pageTheme,
+  paletteColor,
   parseDottie,
   plan,
   posterTime,