@phin-tech/dottie 0.8.0 → 0.10.0

package/PARITY.md

@@ -24,10 +24,13 @@ fixture, so the gap is visible rather than silent.
 | Ports and edge-following, rotated shapes, free ends | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | |
 | Connectors and labels on outlines (ADR 0001) | Supported | [edge/extensions](../fixtures/edge/extensions.dottie) | Edge-following meets a `.path`'s actual outline, not its box (ray against 16-step flattened curves). Endpoints pinned with `portIndex` attach to the element's `ports`. A path's label goes in its `labelRect`. |
 | Extension shapes as stored (ADR 0001) | Supported | [edge/extensions](../fixtures/edge/extensions.dottie) | Drawn from the stored path with no extension installed. The `extension` field is kept as metadata and nothing runs. Parameters, commands and handles are Dottie-only. |
+| Containers and swimlanes | Supported | [edge/containers](../fixtures/edge/containers.dottie) | Drawn from the stored frame and title band (`labelRect`); the app keeps them fitted (ADR 0006). |
+| Themes of a page's own, and palette colors by name | Supported | [edge/palette](../fixtures/edge/palette.dottie) | Names are resolved when a file is read, by the same rules in `Theme.swift` and `theme.ts` (ADR 0005). |
+| Elbows that go round shapes (`avoid`) | Supported | [edge/elbow-around](../fixtures/edge/elbow-around.dottie) | The same grid router, point for point (`ElbowRouter.swift`, `elbow.ts`). |
 | 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,22 +40,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 |
 | 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) | `measure.ts` mirrors `Metrics.swift` (ADR 0003): 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. 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 |
+| 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

@@ -49,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.8.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.10.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, 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);
@@ -50,19 +50,80 @@ function isName(name) {
   return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
 }
 
+// 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 resolve = (e) => {
+    const n = e.style.named;
+    if (!n) return e;
+    const style = { ...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) style.fill = { ...f };
+    if (s) style.stroke = { ...s };
+    if (t) style.textColor = { ...t };
+    return { ...e, style };
+  };
+  return {
+    ...page,
+    elements: page.elements.map(resolve),
+    symbols: page.symbols ? page.symbols.map((s) => ({ ...s, elements: s.elements.map(resolve) })) : page.symbols
+  };
+}
+
 // src/model.ts
 var SUPPORTED_VERSION = 2;
 var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image", "symbol"];
 var EASES = ["linear", "easeIn", "easeOut", "easeInOut", "hold", "spring", "bounce", "elastic"];
 var KNOWN_FIELDS = {
   file: ["version", "pages", "images"],
-  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables", "flows"],
+  page: ["id", "name", "layers", "elements", "theme", "customTheme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables", "flows"],
   flow: ["id", "from", "to", "every", "speed", "color", "size", "when", "spread", "volume", "overrides"],
   flowOverride: ["when", "volume"],
   symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button", "params"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
-  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor"],
+  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor", "named"],
+  colorNames: ["fill", "stroke", "textColor"],
+  customTheme: ["name", "background", "ink", "palette", "base"],
+  paletteColor: ["name", "color"],
   element: [
     "id",
     "kind",
@@ -100,8 +161,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"],
@@ -110,7 +174,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"],
@@ -192,9 +256,36 @@ var Reader = class {
       gridSize: num(s.gridSize) ?? null,
       opacity: num(s.opacity) ?? null,
       dashOffset: num(s.dashOffset) ?? null,
-      textColor: rgba(s.textColor) ?? null
+      textColor: rgba(s.textColor) ?? null,
+      named: this.colorNames(s.named)
     };
   }
+  container(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "container");
+    return { fixed: v.fixed === true ? true : null, lanes: v.lanes === "rows" || v.lanes === "columns" ? v.lanes : null };
+  }
+  colorNames(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "colorNames");
+    const n = { fill: str(v.fill) ?? null, stroke: str(v.stroke) ?? null, textColor: str(v.textColor) ?? null };
+    return n.fill === null && n.stroke === null && n.textColor === null ? null : n;
+  }
+  customTheme(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "customTheme");
+    const background = rgba(v.background), ink = rgba(v.ink);
+    if (!background || !ink) {
+      this.warn("A custom theme needs a background and an ink; drawn without it");
+      return null;
+    }
+    const palette2 = (Array.isArray(v.palette) ? v.palette : []).filter(isObj).flatMap((p) => {
+      this.fields(p, "paletteColor");
+      const name = str(p.name), color = rgba(p.color);
+      return name && color ? [{ name, color }] : [];
+    });
+    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);
@@ -226,6 +317,7 @@ var Reader = class {
         return { x: num(w.x) ?? 0, y: num(w.y) ?? 0 };
       }) : null,
       hops: typeof v.hops === "boolean" ? v.hops : null,
+      avoid: typeof v.avoid === "boolean" ? v.avoid : null,
       cost: typeof v.cost === "number" && Number.isFinite(v.cost) ? v.cost : null
     };
   }
@@ -294,7 +386,9 @@ var Reader = class {
       capacity: num(v.capacity) ?? null,
       delay: num(v.delay) ?? null,
       queue: v.queue === true ? true : null,
-      gauge: this.gauge(v.gauge)
+      gauge: this.gauge(v.gauge),
+      containerID: uuid(v.containerID) ?? null,
+      container: this.container(v.container)
     };
   }
   gauge(v) {
@@ -515,6 +609,7 @@ var Reader = class {
       layers,
       elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
       theme: str(v.theme) ?? null,
+      customTheme: this.customTheme(v.customTheme),
       timeline: this.timeline(v.timeline),
       symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null,
       variables: this.variables(v.variables),
@@ -578,7 +673,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 };
 }
@@ -686,7 +781,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.8.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.10.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, 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);
@@ -58,19 +58,80 @@ function isName(name) {
   return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
 }
 
+// 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 resolve = (e) => {
+    const n = e.style.named;
+    if (!n) return e;
+    const style = { ...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) style.fill = { ...f };
+    if (s) style.stroke = { ...s };
+    if (t) style.textColor = { ...t };
+    return { ...e, style };
+  };
+  return {
+    ...page,
+    elements: page.elements.map(resolve),
+    symbols: page.symbols ? page.symbols.map((s) => ({ ...s, elements: s.elements.map(resolve) })) : page.symbols
+  };
+}
+
 // src/model.ts
 var SUPPORTED_VERSION = 2;
 var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image", "symbol"];
 var EASES = ["linear", "easeIn", "easeOut", "easeInOut", "hold", "spring", "bounce", "elastic"];
 var KNOWN_FIELDS = {
   file: ["version", "pages", "images"],
-  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables", "flows"],
+  page: ["id", "name", "layers", "elements", "theme", "customTheme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables", "flows"],
   flow: ["id", "from", "to", "every", "speed", "color", "size", "when", "spread", "volume", "overrides"],
   flowOverride: ["when", "volume"],
   symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button", "params"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
-  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor"],
+  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor", "named"],
+  colorNames: ["fill", "stroke", "textColor"],
+  customTheme: ["name", "background", "ink", "palette", "base"],
+  paletteColor: ["name", "color"],
   element: [
     "id",
     "kind",
@@ -108,8 +169,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"],
@@ -118,7 +182,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"],
@@ -200,9 +264,36 @@ var Reader = class {
       gridSize: num(s.gridSize) ?? null,
       opacity: num(s.opacity) ?? null,
       dashOffset: num(s.dashOffset) ?? null,
-      textColor: rgba(s.textColor) ?? null
+      textColor: rgba(s.textColor) ?? null,
+      named: this.colorNames(s.named)
     };
   }
+  container(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "container");
+    return { fixed: v.fixed === true ? true : null, lanes: v.lanes === "rows" || v.lanes === "columns" ? v.lanes : null };
+  }
+  colorNames(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "colorNames");
+    const n = { fill: str(v.fill) ?? null, stroke: str(v.stroke) ?? null, textColor: str(v.textColor) ?? null };
+    return n.fill === null && n.stroke === null && n.textColor === null ? null : n;
+  }
+  customTheme(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "customTheme");
+    const background = rgba(v.background), ink = rgba(v.ink);
+    if (!background || !ink) {
+      this.warn("A custom theme needs a background and an ink; drawn without it");
+      return null;
+    }
+    const palette2 = (Array.isArray(v.palette) ? v.palette : []).filter(isObj).flatMap((p) => {
+      this.fields(p, "paletteColor");
+      const name = str(p.name), color = rgba(p.color);
+      return name && color ? [{ name, color }] : [];
+    });
+    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);
@@ -234,6 +325,7 @@ var Reader = class {
         return { x: num(w.x) ?? 0, y: num(w.y) ?? 0 };
       }) : null,
       hops: typeof v.hops === "boolean" ? v.hops : null,
+      avoid: typeof v.avoid === "boolean" ? v.avoid : null,
       cost: typeof v.cost === "number" && Number.isFinite(v.cost) ? v.cost : null
     };
   }
@@ -302,7 +394,9 @@ var Reader = class {
       capacity: num(v.capacity) ?? null,
       delay: num(v.delay) ?? null,
       queue: v.queue === true ? true : null,
-      gauge: this.gauge(v.gauge)
+      gauge: this.gauge(v.gauge),
+      containerID: uuid(v.containerID) ?? null,
+      container: this.container(v.container)
     };
   }
   gauge(v) {
@@ -523,6 +617,7 @@ var Reader = class {
       layers,
       elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
       theme: str(v.theme) ?? null,
+      customTheme: this.customTheme(v.customTheme),
       timeline: this.timeline(v.timeline),
       symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null,
       variables: this.variables(v.variables),
@@ -586,7 +681,7 @@ function parseDottie(source2) {
       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 };
 }
@@ -694,11 +789,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.8.0";
+var VERSION = "0.10.0";
 
 // src/cli.ts
 var usage = `dottie-compile ${VERSION}: a Dottie drawing as one script that plays it on any page.