@phin-tech/dottie 0.6.3 → 0.7.0

package/PARITY.md

@@ -47,6 +47,9 @@ fixture, so the gap is visible rather than silent.
 | 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 |
+| Page variables and conditions (`variables`, `when`) | Supported | [edge/state](../fixtures/edge/state.dottie) | Starting values in every still and export; connectors go with a shape the state hides |
+| Clicks that set and toggle variables | Supported | [edge/state](../fixtures/edge/state.dottie) | Change what shows without touching the playhead. The HTML export of a page with state is this player |
+| Looping scenes (`loop` on a marker) | Supported | [edge/state](../fixtures/edge/state.dottie) | As the HTML export plays them: no stop on entering, round from the scene's end to its start |
 | 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

@@ -33,11 +33,16 @@ Elements the drawing makes clickable work with the mouse and the keyboard (Tab,
 a named scene on to the next one, opens a link in a new tab (only `http`, `https` and `mailto`), or shows the page a
 shape's link points at. Each shows its hover look under the pointer; button symbols show their over and down looks
 and take clicks on their hit area, and a symbol's copy set to play when clicked plays its animation through. Every
-click first fires a cancelable `action` event whose `detail` is `{element, scene | url | page, replay?}`; call
-`preventDefault()` to handle it yourself.
+click first fires a cancelable `action` event whose `detail` is `{element, scene | url | page | state, set?, toggle?,
+replay?}`; call `preventDefault()` to handle it yourself.
+
+A click can also set or toggle the page's variables, which show and hide the elements with a `when` while the
+animation keeps playing: a diagram you leave running that people poke. A looping scene plays round until a click
+or next leaves it, instead of stopping.
 
 The element has `play()`, `pause()`, `nextScene()`, `prevScene()`, `activate(elementId)`, `currentTime`
-(settable), `duration`, `paused`, and fires `load`, `frame`, `action` and `error` events. Its page color comes from the drawing's theme; set
+(settable), `duration`, `paused`, `variables` and `setState({name: value})`, and fires `load`, `frame`, `action`,
+`state` (with `{variables}`, after a change) and `error` events. Its page color comes from the drawing's theme; set
 `--dottie-radius` to round it, and style its parts with `::part(stage)` and `::part(controls)`.
 
 Without modules, `dist/dottie-player.min.js` is a classic script that registers the element and sets

package/dist/compile.js

@@ -1,4 +1,4 @@
-/*! 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, 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);
@@ -44,13 +44,19 @@ function defaultBase() {
 }
 var base = defaultBase();
 
+// src/state.ts
+var MAX_NAME = 64;
+function isName(name) {
+  return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
+}
+
 // 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"],
@@ -78,6 +84,7 @@ var KNOWN_FIELDS = {
     "anchor",
     "click",
     "hover",
+    "when",
     "symbol",
     "playback",
     "offset",
@@ -103,8 +110,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;
@@ -258,6 +265,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,
@@ -293,13 +301,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);
@@ -400,7 +422,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);
@@ -433,7 +455,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)
     };
   }
 };

package/dist/dottie-compile.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! 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, 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);
@@ -52,13 +52,19 @@ function defaultBase() {
 }
 var base = defaultBase();
 
+// src/state.ts
+var MAX_NAME = 64;
+function isName(name) {
+  return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
+}
+
 // 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"],
@@ -86,6 +92,7 @@ var KNOWN_FIELDS = {
     "anchor",
     "click",
     "hover",
+    "when",
     "symbol",
     "playback",
     "offset",
@@ -111,8 +118,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;
@@ -266,6 +273,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,
@@ -301,13 +309,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);
@@ -408,7 +430,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);
@@ -441,7 +463,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)
     };
   }
 };
@@ -588,7 +611,7 @@ function compile(source2, runtime, options2 = {}) {
 }
 
 // src/index.ts
-var VERSION = "0.6.3";
+var VERSION = "0.7.0";
 
 // src/cli.ts
 var usage = `dottie-compile ${VERSION}: a Dottie drawing as one script that plays it on any page.

package/dist/dottie-player.js

@@ -1,4 +1,4 @@
-/*! 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 __export = (target, all) => {
@@ -66,13 +66,67 @@ __export(index_exports, {
   withRoughness: () => withRoughness
 });
 
+// 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"],
@@ -100,6 +154,7 @@ var KNOWN_FIELDS = {
     "anchor",
     "click",
     "hover",
+    "when",
     "symbol",
     "playback",
     "offset",
@@ -125,8 +180,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;
@@ -285,6 +340,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,
@@ -320,13 +376,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);
@@ -427,7 +497,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);
@@ -460,7 +530,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)
     };
   }
 };
@@ -2130,17 +2201,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();
@@ -2179,7 +2253,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;
     }
@@ -2195,7 +2269,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 ?? [];
@@ -2304,7 +2378,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");
@@ -2433,16 +2507,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) {
@@ -3356,6 +3435,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. */
@@ -3415,6 +3498,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 };
@@ -3465,7 +3550,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) => {
@@ -3587,6 +3672,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;
@@ -3740,7 +3839,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() {
@@ -3766,11 +3865,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. */
@@ -3799,6 +3900,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) {
@@ -3806,13 +3909,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;
@@ -3838,7 +3955,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;
@@ -3849,14 +3967,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;
       }
@@ -4006,7 +4124,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";
 
 // src/player-entry.ts
 definePlayer();