@phin-tech/dottie 0.6.3 → 0.7.0

package/dist/dottie.js

@@ -1,15 +1,69 @@
-/*! dottie.js 0.6.3 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.7.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 __publicField = (obj, key, value2) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value2);
 
+// src/state.ts
+var MAX_NAME = 64;
+function isName(name) {
+  return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
+}
+function conditionNames(condition) {
+  const out = [];
+  for (const any of condition.split("||")) {
+    for (const all of any.split("&&")) {
+      let term = trim(all);
+      if (term.startsWith("!")) term = trim(term.slice(1));
+      if (!isName(term)) return null;
+      out.push(term);
+    }
+  }
+  return out;
+}
+function holds(condition, state) {
+  if (conditionNames(condition) === null) return false;
+  return condition.split("||").some((any) => any.split("&&").every((all) => {
+    let term = trim(all);
+    let negated = false;
+    if (term.startsWith("!")) {
+      negated = true;
+      term = trim(term.slice(1));
+    }
+    return (state[term] ?? false) !== negated;
+  }));
+}
+function stateValues(page, choice) {
+  if (choice === "all") return null;
+  if (choice === "initial") return { ...page.variables ?? {} };
+  return { ...page.variables ?? {}, ...choice };
+}
+function stateHidden(page, choice) {
+  const values = stateValues(page, choice);
+  const out = /* @__PURE__ */ new Set();
+  if (!values) return out;
+  for (const e of page.elements) if (e.when !== null && !holds(e.when, values)) out.add(e.id);
+  return out;
+}
+function changesState(c) {
+  return !!c && (Object.keys(c.set ?? {}).length > 0 || (c.toggle ?? []).length > 0);
+}
+function applyClick(c, state) {
+  const out = { ...state };
+  for (const [k, v] of Object.entries(c.set ?? {})) out[k] = v;
+  for (const k of c.toggle ?? []) out[k] = !(out[k] ?? false);
+  return out;
+}
+function trim(s) {
+  return s.replace(/^[ \t ]+|[ \t ]+$/g, "");
+}
+
 // 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"],
+  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables"],
   symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button", "params"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
@@ -37,6 +91,7 @@ var KNOWN_FIELDS = {
     "anchor",
     "click",
     "hover",
+    "when",
     "symbol",
     "playback",
     "offset",
@@ -62,8 +117,8 @@ var KNOWN_FIELDS = {
   follow: ["path", "start", "end", "ease", "reverse", "orient", "laps"],
   repeat: ["start", "end", "count"],
   cameraKey: ["t", "x", "y", "width", "height", "ease"],
-  marker: ["t", "name"],
-  click: ["scene", "url"],
+  marker: ["t", "name", "loop"],
+  click: ["scene", "url", "set", "toggle"],
   hover: ["stroke", "fill", "opacity"]
 };
 var MAX_DURATION = 3600;
@@ -222,6 +277,7 @@ var Reader = class {
       anchor: str(v.anchor) ?? null,
       click: this.click(v.click),
       hover: this.hover(v.hover),
+      when: str(v.when) ?? null,
       symbol: uuid(v.symbol) ?? null,
       playback: this.playback(v.playback),
       offset: num(v.offset) ?? null,
@@ -257,13 +313,27 @@ var Reader = class {
     }
     return { id, shape, version, params };
   }
+  variables(v) {
+    if (!isObj(v)) return null;
+    const out = {};
+    for (const [k, b] of Object.entries(v)) if (typeof b === "boolean") out[k] = b;
+    return Object.keys(out).length > 0 ? out : null;
+  }
   click(v) {
     if (!isObj(v)) return null;
     this.fields(v, "click");
     const url = str(v.url);
     const safe = url === void 0 ? null : allowedURL(url);
     if (url !== void 0 && safe === null) this.warn("Skipped a click link that isn't http, https or mailto");
-    return { scene: str(v.scene) ?? null, url: safe };
+    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;
+      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 };
   }
   playback(v) {
     const s = str(v);
@@ -364,7 +434,7 @@ var Reader = class {
     if (camera) stableSortBy(camera, (c) => c.t);
     const markers = Array.isArray(v.markers) ? v.markers.filter(isObj).flatMap((m) => {
       const t = num(m.t);
-      return t !== void 0 && t >= 0 ? [{ t, name: str(m.name) ?? "" }] : [];
+      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);
@@ -397,7 +467,8 @@ var Reader = class {
       elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
       theme: str(v.theme) ?? null,
       timeline: this.timeline(v.timeline),
-      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null
+      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null,
+      variables: this.variables(v.variables)
     };
   }
 };
@@ -2067,17 +2138,20 @@ function trackMap(tl) {
   for (const t of tl.tracks) if (!m.has(t.element)) m.set(t.element, t);
   return m;
 }
-function resolved(page, t) {
-  return expandingSymbols(posed(page, t), clampTime(t));
+function resolved(page, t, state = "initial") {
+  return expandingSymbols(posed(page, t, state), clampTime(t));
 }
-function posed(page, t) {
-  const timeline = page.timeline;
+var EMPTY_TIMELINE = { fps: 12, duration: 0, boil: null, settle: null, poster: null, tracks: [], camera: null, markers: null };
+function posed(page, t, state = "initial") {
+  const off = stateHidden(page, state);
+  const timeline = page.timeline ?? (off.size === 0 ? null : EMPTY_TIMELINE);
   if (!timeline) return page;
   t = clampTime(t);
   const tracks = trackMap(timeline);
   const reseed = timeline.boil === null ? null : Math.trunc(Math.floor(t * clampFPS(timeline.fps) + 1e-9) / Math.max(1, timeline.boil)) % BOIL_DRAWINGS >>> 0;
   const hidden = /* @__PURE__ */ new Set();
   for (const tr of tracks.values()) if (!isVisible(tr, t)) hidden.add(tr.element);
+  for (const id of off) hidden.add(id);
   let moving = null;
   if (timeline.settle === true) {
     moving = /* @__PURE__ */ new Set();
@@ -2116,7 +2190,7 @@ function posed(page, t) {
   elements = elements.map((e) => {
     const c = e.connector;
     if (!c || ![c.start.elementID, c.end.elementID].some((id) => id !== null && hidden.has(id))) return e;
-    if (!(tracks.get(e.id)?.keys.some((k) => k.visible !== void 0) ?? false)) {
+    if (!(tracks.get(e.id)?.keys.some((k) => k.visible !== void 0) ?? false) || [c.start.elementID, c.end.elementID].some((id) => id !== null && off.has(id))) {
       gone.add(e.id);
       return e;
     }
@@ -2132,7 +2206,7 @@ function posterTime(page) {
   return page.timeline ? page.timeline.poster ?? page.timeline.duration : 0;
 }
 function still(page) {
-  return page.timeline ? resolved(page, posterTime(page)) : expandingSymbols(page, 0);
+  return page.timeline ? resolved(page, posterTime(page)) : expandingSymbols(posed(page, 0), 0);
 }
 function cameraRect(tl, t) {
   const keys = tl.camera ?? [];
@@ -2241,7 +2315,7 @@ function filled(s, args) {
   }) };
 }
 function symbolPage(s) {
-  return { id: s.id, name: s.name, layers: s.layers, elements: s.elements, theme: null, timeline: s.timeline, symbols: null };
+  return { id: s.id, name: s.name, layers: s.layers, elements: s.elements, theme: null, timeline: s.timeline, symbols: null, variables: null };
 }
 function hasInstances(page) {
   return page.elements.some((e) => e.kind === "symbol");
@@ -2370,16 +2444,21 @@ function clickTargets(page, file) {
   let pageOf = null;
   for (const e of page.elements) {
     const c = e.click;
+    const state = c && changesState(c) ? { ...c.set ? { set: c.set } : {}, ...c.toggle ? { toggle: c.toggle } : {} } : null;
     if (c?.scene) {
       const i = sceneNamed(c.scene, markers);
       if (i >= 0) {
-        out.set(e.id, { scene: i });
+        out.set(e.id, { scene: i, ...state });
         continue;
       }
     }
     const url = (c?.url ? allowedURL(c.url) : null) ?? webLink(e.url);
     if (url) {
-      out.set(e.id, { url });
+      out.set(e.id, { url, ...state });
+      continue;
+    }
+    if (state) {
+      out.set(e.id, { state: true, ...state });
       continue;
     }
     if (e.link && file && file.pages.length > 1) {
@@ -3293,6 +3372,10 @@ var Playback = class {
     __publicField(this, "plan");
     __publicField(this, "scenes");
     __publicField(this, "sceneNames");
+    /** Whether each scene loops (Marker.loop). */
+    __publicField(this, "sceneLoops");
+    /** The page's variables now: their starting values until clicks change them. */
+    __publicField(this, "state");
     __publicField(this, "background");
     __publicField(this, "ink");
     /** What clicking each clickable element does, by element id. */
@@ -3352,6 +3435,8 @@ var Playback = class {
     };
     this.scenes = (page.timeline?.markers ?? []).map((m) => near(m.t));
     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);
     this.background = theme?.background ?? WHITE;
     this.ink = theme?.ink ?? { r: 0.12, g: 0.12, b: 0.13, a: 1 };
@@ -3402,7 +3487,7 @@ var Playback = class {
     const times = /* @__PURE__ */ new Map();
     for (const [id, start] of this.replayStarts) times.set(id, Math.min((now - start) / 1e3, this.replays.get(id) ?? 0));
     const tc = clampTime(t);
-    const pose = posed(this.page, tc);
+    const pose = posed(this.page, tc, this.state);
     const frame2 = expandingSymbols(pose, tc, true, times);
     const { parts } = svgParts(frame2, this.background, r);
     const owned = (m, parts2) => {
@@ -3524,6 +3609,20 @@ ${h}</g>
     });
     return s;
   }
+  /** The frame after scene `s`'s last: the next scene's, or the frame count after the last scene. */
+  sceneEnd(s) {
+    return this.scenes.find((f, j) => j > s && f > this.scenes[s]) ?? this.frameCount;
+  }
+  /** Where playing goes from frame `i`, and whether it stops there: on into a looping scene, round to the start of
+   * the looping scene `i` ends, or a stop at a scene or the end (`loops`: whether the timeline loops at its end). */
+  step(i, loops) {
+    const next = i + 1;
+    const s = this.sceneAt(i);
+    if (s >= 0 && this.sceneLoops[s] && next >= this.sceneEnd(s)) return { frame: this.scenes[s], stop: false };
+    if (next >= this.frameCount) return { frame: 0, stop: !loops || this.scenes.length > 0 };
+    const entered = this.scenes.indexOf(next);
+    return { frame: next, stop: entered >= 0 && !this.sceneLoops[entered] };
+  }
 };
 var ElementBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
@@ -3677,7 +3776,7 @@ var DottiePlayer = class extends ElementBase {
       this.setPlaying(false);
       return;
     }
-    this.setPlaying(!this.hasAttribute("no-autoplay") && !p.scenes.includes(0));
+    this.setPlaying(!this.hasAttribute("no-autoplay") && (!p.scenes.includes(0) || p.sceneLoops[p.scenes.indexOf(0)]));
   }
   // MARK: Playback
   get paused() {
@@ -3703,11 +3802,13 @@ var DottiePlayer = class extends ElementBase {
   pause() {
     this.setPlaying(false);
   }
-  /** Plays on to the next scene (from the start after the last). */
+  /** Plays on to the next scene (from the start after the last). Out of a looping scene it jumps to the next. */
   nextScene() {
     const p = this.playback;
     if (!p) return;
-    if (p.frame >= p.frameCount - 1) p.show(0);
+    const s = p.sceneAt(p.frame);
+    if (s >= 0 && p.sceneLoops[s]) p.show(s + 1 < p.scenes.length ? p.scenes[s + 1] : 0);
+    else if (p.frame >= p.frameCount - 1) p.show(0);
     this.setPlaying(true);
   }
   /** Back to the start of this scene, or the one before if already there. */
@@ -3736,6 +3837,8 @@ var DottiePlayer = class extends ElementBase {
       this.scheduleReplay();
     }
     if (!click) return;
+    if (click.set || click.toggle) this.setState(applyClick({ scene: null, url: null, set: click.set ?? null, toggle: click.toggle ?? null }, p.state));
+    if ("state" in click) return;
     if ("url" in click) {
       if (/^(https?:|mailto:)/i.test(click.url)) window.open(click.url, "_blank", "noopener");
     } else if ("page" in click) {
@@ -3743,13 +3846,27 @@ var DottiePlayer = class extends ElementBase {
     } else if (click.scene >= 0 && click.scene < p.scenes.length) {
       if (reduced || this.hasAttribute("at") || p.frameCount < 2) {
         this.setPlaying(false);
-        p.show(click.scene + 1 < p.scenes.length ? p.scenes[click.scene + 1] : p.frameCount - 1);
+        p.show(p.sceneLoops[click.scene] ? p.scenes[click.scene] : click.scene + 1 < p.scenes.length ? p.scenes[click.scene + 1] : p.frameCount - 1);
       } else {
         p.show(p.scenes[click.scene]);
         this.setPlaying(true);
       }
     }
   }
+  /** The page's variables now. */
+  get variables() {
+    return { ...this.playback?.state ?? {} };
+  }
+  /** Gives the page's variables these values (the others keep theirs), redraws, and fires `state`. */
+  setState(values) {
+    const p = this.playback;
+    if (!p) return;
+    const next = { ...p.state, ...values };
+    if (Object.keys(next).every((k) => next[k] === p.state[k])) return;
+    p.state = next;
+    p.redraw();
+    this.dispatchEvent(new CustomEvent("state", { detail: { variables: { ...next } } }));
+  }
   /** Redraws, while the page itself stands still, as long as a clicked copy is playing through. */
   scheduleReplay() {
     if (this.replayRaf) return;
@@ -3775,7 +3892,8 @@ var DottiePlayer = class extends ElementBase {
   schedule() {
     if (this.playing && this.visible && !this.raf && this.isConnected) this.raf = requestAnimationFrame((now) => this.tick(now));
   }
-  /** Steps whole frames at the timeline's rate; with scenes, playing stops at each one and at the end. */
+  /** Steps whole frames at the timeline's rate; with scenes, playing stops at each one and at the end, except that a
+   * looping scene plays round (Playback.step). */
   tick(now) {
     this.raf = 0;
     const p = this.playback;
@@ -3786,14 +3904,14 @@ var DottiePlayer = class extends ElementBase {
     let advanced = false;
     while (this.playing && this.acc >= step) {
       this.acc -= step;
-      const next = p.frame + 1;
-      if (next >= p.frameCount && (p.scenes.length || this.hasAttribute("no-loop"))) {
+      const { frame: frame2, stop } = p.step(p.frame, !this.hasAttribute("no-loop"));
+      if (stop && frame2 === 0 && p.frame + 1 >= p.frameCount) {
         this.setPlaying(false);
         break;
       }
-      p.frame = next % p.frameCount;
+      p.frame = frame2;
       advanced = true;
-      if (p.scenes.includes(p.frame)) {
+      if (stop) {
         this.setPlaying(false);
         break;
       }
@@ -3943,7 +4061,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.6.3";
+var VERSION = "0.7.0";
 export {
   BOIL_DRAWINGS,
   BUNDLED_FONTS,

package/dist/types/clicks.d.ts

@@ -1,12 +1,18 @@
 import { type DottieFile, type Element, type Marker, type Page } from "./model.ts";
 /** Jump to scene `scene` (an index into the page's markers) and play on to the next; open `url` in a new tab; or,
- * in <dottie-player> only, show page `page` (an index into the file's pages), where the element's link points. */
-export type Click = {
+ * in <dottie-player> only, show page `page` (an index into the file's pages), where the element's link points. Any
+ * of them may first `set` and `toggle` page variables (ClickAction.set, .toggle), and a click may do only that. */
+export type Click = ({
     scene: number;
 } | {
     url: string;
 } | {
     page: number;
+} | {
+    state: true;
+}) & {
+    set?: Record<string, boolean>;
+    toggle?: string[];
 };
 /** The marker called `name`: an exact match, else one that differs only in case. */
 export declare function sceneNamed(name: string, markers: Marker[]): number;

package/dist/types/index.d.ts

@@ -20,4 +20,4 @@ export interface RenderOptions {
 /** One page of a drawing as an SVG document, as Dottie's own SVG export draws it. */
 export declare function render(source: string | DottieFile | unknown, options?: RenderOptions): string;
 /** The library's version. */
-export declare const VERSION = "0.6.3";
+export declare const VERSION = "0.7.0";

package/dist/types/model.d.ts

@@ -68,10 +68,13 @@ export interface EmbeddedImage {
     data: string;
     format: string;
 }
-/** What clicking an element does in a played drawing: a scene to jump to and play on from, or a link. */
+/** What clicking an element does in a played drawing: a scene to jump to and play on from, or a link; and page
+ * variables to set and flip (ClickAction.set, .toggle), which change what shows without touching the playhead. */
 export interface ClickAction {
     scene: string | null;
     url: string | null;
+    set: Record<string, boolean> | null;
+    toggle: string[] | null;
 }
 /** How a clickable element looks under the pointer or with keyboard focus; null keeps its own. */
 export interface HoverLook {
@@ -105,6 +108,8 @@ export interface Element {
     anchor: string | null;
     click: ClickAction | null;
     hover: HoverLook | null;
+    /** A condition on the page's variables: drawn only while it holds (Element.when; see state.ts). */
+    when: string | null;
     /** For a `symbol` element: the page's symbol it shows, how it plays it, and from how far in. */
     symbol: string | null;
     playback: SymbolPlayback | null;
@@ -179,9 +184,11 @@ export interface CameraKey {
     height: number;
     ease: Ease | null;
 }
+/** A scene; `loop` plays it round until something leaves it, instead of stopping on it (Marker.loop). */
 export interface Marker {
     t: number;
     name: string;
+    loop: boolean | null;
 }
 export interface Timeline {
     fps: number;
@@ -201,6 +208,8 @@ export interface Page {
     theme: string | null;
     timeline: Timeline | null;
     symbols: Symbol[] | null;
+    /** The page's variables and their starting values (DottieDocument.variables). */
+    variables: Record<string, boolean> | null;
 }
 /** A drawing defined once on a page and placed by `symbol` elements, with its own timeline (Symbol). */
 export interface Symbol {

package/dist/types/player.d.ts

@@ -10,6 +10,10 @@ export declare class Playback {
     readonly plan: Plan;
     readonly scenes: number[];
     readonly sceneNames: string[];
+    /** Whether each scene loops (Marker.loop). */
+    readonly sceneLoops: boolean[];
+    /** The page's variables now: their starting values until clicks change them. */
+    state: Record<string, boolean>;
     readonly background: RGBA;
     readonly ink: RGBA;
     /** What clicking each clickable element does, by element id. */
@@ -56,6 +60,14 @@ export declare class Playback {
     private buttonPart;
     /** The scene frame `i` is in, or -1 before the first. */
     sceneAt(i: number): number;
+    /** The frame after scene `s`'s last: the next scene's, or the frame count after the last scene. */
+    sceneEnd(s: number): number;
+    /** Where playing goes from frame `i`, and whether it stops there: on into a looping scene, round to the start of
+     * the looping scene `i` ends, or a stop at a scene or the end (`loops`: whether the timeline loops at its end). */
+    step(i: number, loops: boolean): {
+        frame: number;
+        stop: boolean;
+    };
 }
 /** HTMLElement where there is a DOM; a stand-in elsewhere, so the library still loads in Node (to render SVG). */
 declare const ElementBase: typeof HTMLElement;
@@ -95,18 +107,23 @@ export declare class DottiePlayer extends ElementBase {
     get duration(): number;
     play(): void;
     pause(): void;
-    /** Plays on to the next scene (from the start after the last). */
+    /** Plays on to the next scene (from the start after the last). Out of a looping scene it jumps to the next. */
     nextScene(): void;
     /** Back to the start of this scene, or the one before if already there. */
     prevScene(): void;
     /** Does what clicking element `id` does: jumps to its scene and plays on to the next (with reduced motion, or in a
      * still, straight to where that stops), opens its link in a new tab, or shows its page. */
     activate(id: string): void;
+    /** The page's variables now. */
+    get variables(): Record<string, boolean>;
+    /** Gives the page's variables these values (the others keep theirs), redraws, and fires `state`. */
+    setState(values: Record<string, boolean>): void;
     /** Redraws, while the page itself stands still, as long as a clicked copy is playing through. */
     private scheduleReplay;
     private setPlaying;
     private schedule;
-    /** Steps whole frames at the timeline's rate; with scenes, playing stops at each one and at the end. */
+    /** Steps whole frames at the timeline's rate; with scenes, playing stops at each one and at the end, except that a
+     * looping scene plays round (Playback.step). */
     private tick;
     private key;
 }

package/dist/types/state.d.ts

@@ -0,0 +1,20 @@
+import type { ClickAction, Page } from "./model.ts";
+/** Whether `name` can name a variable: a letter or underscore, then letters, digits and underscores. */
+export declare function isName(name: string): boolean;
+/** The variable names `condition` reads, or null when it isn't one: names, each optionally after `!`, joined by
+ * `&&` and `||` (`&&` binds tighter). */
+export declare function conditionNames(condition: string): string[] | null;
+/** Whether `condition` holds with these values. A missing variable is false; a condition that can't be read never
+ * holds. */
+export declare function holds(condition: string, state: Record<string, boolean>): boolean;
+/** Which elements a page shows as far as its variables go: their starting values ("initial"), these values (a
+ * missing one takes its starting value), or every element ("all"). */
+export type StateChoice = "initial" | "all" | Record<string, boolean>;
+/** The values `choice` gives each variable; null for "all". */
+export declare function stateValues(page: Page, choice: StateChoice): Record<string, boolean> | null;
+/** The ids of the elements whose `when` doesn't hold under `choice`. */
+export declare function stateHidden(page: Page, choice: StateChoice): Set<string>;
+/** Whether a click sets or flips a variable. */
+export declare function changesState(c: ClickAction | null): boolean;
+/** `state` after the click: its `set` values, then each `toggle` flipped (a missing variable starts false). */
+export declare function applyClick(c: ClickAction, state: Record<string, boolean>): Record<string, boolean>;

package/dist/types/timeline.d.ts

@@ -1,5 +1,6 @@
 import { type Ease, type Element, type Follow, type Page, type Timeline, type Track } from "./model.ts";
 import { Polyline, type Point, type Rect } from "./path.ts";
+import { type StateChoice } from "./state.ts";
 export declare function applyEase(ease: Ease, u: number): number;
 /** The time inside the track's own keys that `t` plays (repeats folded back). */
 export declare function localTime(track: Track, t: number): number;
@@ -20,9 +21,10 @@ export declare function following(track: Track, e: Element, t: number, page: Pag
 export declare function marchOffset(tl: Timeline, speed: number, period: number, t: number): number;
 /** The page as a still drawing at `t` seconds, symbol instances expanded (DottieDocument.resolved(at:)). A page with
  * no timeline and no instances is returned as is. */
-export declare function resolved(page: Page, t: number): Page;
-/** The page posed at `t` seconds, instances kept (DottieDocument.posed(at:)). */
-export declare function posed(page: Page, t: number): Page;
+export declare function resolved(page: Page, t: number, state?: StateChoice): Page;
+/** The page posed at `t` seconds, instances kept, and the elements whose `when` doesn't hold under `state` left out
+ * with their connectors (DottieDocument.posed(at:state:)). */
+export declare function posed(page: Page, t: number, state?: StateChoice): Page;
 /** The moment a still picture of the page shows: its poster, else the end. */
 export declare function posterTime(page: Page): number;
 /** The page as a still picture (its poster frame when animated). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phin-tech/dottie",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "Render, play and compile Dottie (.dottie) drawings and animations in the browser",
   "type": "module",
   "license": "Apache-2.0",