@phin-tech/dottie 0.11.0 → 0.11.1

package/PARITY.md

@@ -59,6 +59,6 @@ fixture, so the gap is visible rather than silent.
 | 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 |
+| 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 of one page has neither; with every page (`--all-pages`, `history`) it shows the page at its own address, and split a page per file (`--split`, `links`) it goes to that page's file |
 | Editing | Missing | | |
 | Ticking task boxes in notes | Missing | | Drawn, not clickable |

package/README.md

@@ -28,6 +28,8 @@ prefer reduced motion. A still page is just the drawing.
 | `clean` | Draw precisely instead of sketchy |
 | `no-controls`, `no-autoplay`, `no-loop` | |
 | `label` | The accessible name; the page name by default |
+| `history` | Each page a link shows gets its own address (`#` and the page's name), so Back and Forward go between pages and a link can open any of them. One such player to a page |
+| `links` | JSON from the id of an element a link points at to the web page that shows it (`{"…": "details.html"}`), for a drawing exported one page per file: a link to another page goes there. Only relative `.html` paths are followed |
 
 Elements the drawing makes clickable work with the mouse and the keyboard (Tab, then Enter or Space). A click plays
 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
@@ -43,7 +45,8 @@ region a click took down. A looping scene plays round until a click or next leav
 
 The element has `play()`, `pause()`, `nextScene()`, `prevScene()`, `activate(elementId)`, `currentTime`
 (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
+`state` (with `{variables}`, after a change), `page` (with `{index, name, first}`, when the page shown changes) 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
@@ -93,7 +96,9 @@ handwriting fonts the drawing uses (15 to 30 KB each), so one file shows it anyw
 ```
 
 `dottie-compile` takes `--page`, `--at`, `--clean`, `--no-controls`, `--no-autoplay`, `--no-loop` and `--label`;
-only the chosen page (and its pictures) goes in. The Dottie Mac app's command-line tool writes the same file:
+only the chosen page (and its pictures) goes in. With `--all-pages` every page goes in, for a drawing people drill
+into: a link to a shape on another page shows that page, each page gets its own address (`tour.html#Details`), and
+Back goes back (`--page` is then the page to start on). The Dottie Mac app's command-line tool writes the same file:
 `dottie render tour.dottie -f js`. From code: `import { compile } from "@phin-tech/dottie/compile"`.
 
 ## Use the library

package/dist/compile.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.11.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.11.1 | 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);
@@ -763,6 +763,10 @@ function playerAttributes(options) {
   if (options.noLoop) out["no-loop"] = "";
   if (options.label !== void 0) out.label = options.label;
   if (options.logicEngine) out["allow-logic"] = "";
+  if (options.allPages) {
+    out.history = "";
+    if (options.page !== void 0) out.page = String(options.page);
+  }
   return out;
 }
 function compile(source, runtime, options = {}) {
@@ -777,28 +781,31 @@ function compile(source, runtime, options = {}) {
   const file = parseDottie(raw);
   const json = raw;
   const i = pageIndex(file, options.page === void 0 ? null : String(options.page));
-  const page = json.pages[i];
+  const chosen = options.allPages ? json.pages.map((_, k) => k) : [i];
+  const pages = chosen.map((k) => json.pages[k]);
   const refs = /* @__PURE__ */ new Set();
-  JSON.stringify(page, (k, v) => {
+  JSON.stringify(pages, (k, v) => {
     if (k === "ref" && typeof v === "string") refs.add(v);
     return v;
   });
   const images = Object.fromEntries(Object.entries(json.images ?? {}).filter(([k]) => refs.has(k)));
-  const data = { version: json.version, pages: [page] };
+  const data = { version: json.version, pages };
   if (Object.keys(images).length) data.images = images;
   const fonts = {};
-  for (const family of options.fontData ? usedFonts(file.pages[i]) : []) {
+  const families2 = new Set(chosen.flatMap((k) => options.fontData ? usedFonts(file.pages[k]) : []));
+  for (const family of families2) {
     for (const face of fontFaces(family)) {
       const b64 = options.fontData(family, face);
       if (b64) (fonts[family] ?? (fonts[family] = {}))[face] = b64;
     }
   }
+  const logic = chosen.some((k) => file.pages[k].logic);
   const fill = {
     DOTTIE_DATA: () => scriptJSON(data),
-    DOTTIE_OPTIONS: () => scriptJSON(playerAttributes(file.pages[i].logic ? options : { ...options, logicEngine: void 0 })),
+    DOTTIE_OPTIONS: () => scriptJSON(playerAttributes(logic ? options : { ...options, logicEngine: void 0 })),
     DOTTIE_FONTS: () => scriptJSON(fonts)
   };
-  const engine = options.logicEngine && file.pages[i].logic ? options.logicEngine.trimEnd() + "\n" : "";
+  const engine = options.logicEngine && logic ? options.logicEngine.trimEnd() + "\n" : "";
   return engine + runtime.trimEnd() + "\n" + LOADER.replace(/\bDOTTIE_(?:DATA|OPTIONS|FONTS)\b/g, (m) => fill[m]());
 }
 export {

package/dist/dottie-compile.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! dottie.js 0.11.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.11.1 | 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);
@@ -771,6 +771,10 @@ function playerAttributes(options2) {
   if (options2.noLoop) out["no-loop"] = "";
   if (options2.label !== void 0) out.label = options2.label;
   if (options2.logicEngine) out["allow-logic"] = "";
+  if (options2.allPages) {
+    out.history = "";
+    if (options2.page !== void 0) out.page = String(options2.page);
+  }
   return out;
 }
 function compile(source2, runtime, options2 = {}) {
@@ -785,33 +789,36 @@ function compile(source2, runtime, options2 = {}) {
   const file = parseDottie(raw);
   const json = raw;
   const i = pageIndex(file, options2.page === void 0 ? null : String(options2.page));
-  const page = json.pages[i];
+  const chosen = options2.allPages ? json.pages.map((_, k) => k) : [i];
+  const pages = chosen.map((k) => json.pages[k]);
   const refs = /* @__PURE__ */ new Set();
-  JSON.stringify(page, (k, v) => {
+  JSON.stringify(pages, (k, v) => {
     if (k === "ref" && typeof v === "string") refs.add(v);
     return v;
   });
   const images = Object.fromEntries(Object.entries(json.images ?? {}).filter(([k]) => refs.has(k)));
-  const data = { version: json.version, pages: [page] };
+  const data = { version: json.version, pages };
   if (Object.keys(images).length) data.images = images;
   const fonts = {};
-  for (const family of options2.fontData ? usedFonts(file.pages[i]) : []) {
+  const families2 = new Set(chosen.flatMap((k) => options2.fontData ? usedFonts(file.pages[k]) : []));
+  for (const family of families2) {
     for (const face of fontFaces(family)) {
       const b64 = options2.fontData(family, face);
       if (b64) (fonts[family] ?? (fonts[family] = {}))[face] = b64;
     }
   }
+  const logic = chosen.some((k) => file.pages[k].logic);
   const fill = {
     DOTTIE_DATA: () => scriptJSON(data),
-    DOTTIE_OPTIONS: () => scriptJSON(playerAttributes(file.pages[i].logic ? options2 : { ...options2, logicEngine: void 0 })),
+    DOTTIE_OPTIONS: () => scriptJSON(playerAttributes(logic ? options2 : { ...options2, logicEngine: void 0 })),
     DOTTIE_FONTS: () => scriptJSON(fonts)
   };
-  const engine = options2.logicEngine && file.pages[i].logic ? options2.logicEngine.trimEnd() + "\n" : "";
+  const engine = options2.logicEngine && logic ? options2.logicEngine.trimEnd() + "\n" : "";
   return engine + runtime.trimEnd() + "\n" + LOADER.replace(/\bDOTTIE_(?:DATA|OPTIONS|FONTS)\b/g, (m) => fill[m]());
 }
 
 // src/index.ts
-var VERSION = "0.11.0";
+var VERSION = "0.11.1";
 
 // src/cli.ts
 var usage = `dottie-compile ${VERSION}: a Dottie drawing as one script that plays it on any page.
@@ -825,10 +832,12 @@ USAGE
 OPTIONS
   -o, --output <path>   Where to write it ("-" for stdout); default drawing.js next to the input
   -p, --page <page>     Page name or 1-based number; only that page is included (default the first)
+      --all-pages       Include every page, with links between them working and Back going back (with
+                        --page, the page to start on)
       --at <seconds>    Show that moment as a still
       --clean           Draw precisely instead of sketchy
       --no-controls, --no-autoplay, --no-loop
-      --allow-logic        let the page's click logic run (ADR 0007); it carries the engine (about 850 KB)
+      --allow-logic     let the page's click logic run (ADR 0007); it carries the engine (about 850 KB)
       --label <text>    The player's accessible name
 `;
 function fail(message, code = 2) {
@@ -868,6 +877,9 @@ for (let i = 0; i < args.length; i++) {
       options.at = t;
       break;
     }
+    case "--all-pages":
+      options.allPages = true;
+      break;
     case "--clean":
       options.clean = true;
       break;

package/dist/dottie-logic.min.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.11.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.11.1 | Apache-2.0 | https://github.com/phin-tech/dottie */
 "use strict";(()=>{var Sx=Object.defineProperty;var w=(x,F)=>()=>(x&&(F=x(x=0)),F);var E0=(x,F)=>{for(var A in F)Sx(x,A,{get:F[A],enumerable:!0})};var T,f0,Z,H,L,K=w(()=>{T={JS_EVAL_TYPE_GLOBAL:0,JS_EVAL_TYPE_MODULE:1,JS_EVAL_TYPE_DIRECT:2,JS_EVAL_TYPE_INDIRECT:3,JS_EVAL_TYPE_MASK:3,JS_EVAL_FLAG_STRICT:8,JS_EVAL_FLAG_STRIP:16,JS_EVAL_FLAG_COMPILE_ONLY:32,JS_EVAL_FLAG_BACKTRACE_BARRIER:64},f0={BaseObjects:1,Date:2,Eval:4,StringNormalize:8,RegExp:16,RegExpCompiler:32,JSON:64,Proxy:128,MapSet:256,TypedArrays:512,Promise:1024,BigInt:2048,BigFloat:4096,BigDecimal:8192,OperatorOverloading:16384,BignumExt:32768},Z={Pending:0,Fulfilled:1,Rejected:2},H={JS_GPN_STRING_MASK:1,JS_GPN_SYMBOL_MASK:2,JS_GPN_PRIVATE_MASK:4,JS_GPN_ENUM_ONLY:16,JS_GPN_SET_ENUM:32,QTS_GPN_NUMBER_MASK:64,QTS_STANDARD_COMPLIANT_NUMBER:128},L={IsStrictlyEqual:0,IsSameValue:1,IsSameValueZero:2}});function J(...x){D0&&console.log("quickjs-emscripten:",...x)}function*xx(x){return yield x}function Ix(x){return xx(i0(x))}function R0(x,F){return(...A)=>{let v=F.call(x,n0,...A);return i0(v)}}function wx(x,F){let A=F.call(x,n0);return i0(A)}function i0(x){function F(A){return A.done?A.value:A.value instanceof Promise?A.value.then(v=>F(x.next(v)),v=>F(x.throw(v))):F(x.next(A.value))}return F(x.next())}function j0(x,F){let A;try{x.dispose()}catch(v){A=v}if(F&&A)throw Object.assign(F,{message:`${F.message}
  Then, failed to dispose scope: ${A.message}`,disposeError:A}),F;if(F||A)throw F||A}function Rx(x){let F=x?Array.from(x):[];function A(){return F.forEach(E=>E.alive?E.dispose():void 0)}function v(){return F.some(E=>E.alive)}return Object.defineProperty(F,C0,{configurable:!0,enumerable:!1,value:A}),Object.defineProperty(F,"dispose",{configurable:!0,enumerable:!1,value:A}),Object.defineProperty(F,"alive",{configurable:!0,enumerable:!1,get:v}),F}function W(x){return!!(x&&(typeof x=="object"||typeof x=="function")&&"alive"in x&&typeof x.alive=="boolean"&&"dispose"in x&&typeof x.dispose=="function")}function Jx(x){if(!x)return 0;let F=0;for(let[A,v]of Object.entries(x)){if(!(A in f0))throw new X0(A);v&&(F|=f0[A])}return F}function Ox(x){if(typeof x=="number")return x;if(x===void 0)return 0;let{type:F,strict:A,strip:v,compileOnly:E,backtraceBarrier:j}=x,e=0;return F==="global"&&(e|=T.JS_EVAL_TYPE_GLOBAL),F==="module"&&(e|=T.JS_EVAL_TYPE_MODULE),A&&(e|=T.JS_EVAL_FLAG_STRICT),v&&(e|=T.JS_EVAL_FLAG_STRIP),E&&(e|=T.JS_EVAL_FLAG_COMPILE_ONLY),j&&(e|=T.JS_EVAL_FLAG_BACKTRACE_BARRIER),e}function Vx(x){if(typeof x=="number")return x;if(x===void 0)return 0;let{strings:F,symbols:A,quickjsPrivate:v,onlyEnumerable:E,numbers:j,numbersAsStrings:e}=x,t=0;return F&&(t|=H.JS_GPN_STRING_MASK),A&&(t|=H.JS_GPN_SYMBOL_MASK),v&&(t|=H.JS_GPN_PRIVATE_MASK),E&&(t|=H.JS_GPN_ENUM_ONLY),j&&(t|=H.QTS_GPN_NUMBER_MASK),e&&(t|=H.QTS_STANDARD_COMPLIANT_NUMBER),t}function Zx(...x){let F=[];for(let A of x)A!==void 0&&(F=F.concat(A));return F}function e0(x){return x>>8}function s0(x,F){F.interruptHandler&&x.setInterruptHandler(F.interruptHandler),F.maxStackSizeBytes!==void 0&&x.setMaxStackSize(F.maxStackSizeBytes),F.memoryLimitBytes!==void 0&&x.setMemoryLimit(F.memoryLimitBytes)}function l0(x,F){F.moduleLoader&&x.setModuleLoader(F.moduleLoader),F.shouldInterrupt&&x.setInterruptHandler(F.shouldInterrupt),F.memoryLimitBytes!==void 0&&x.setMemoryLimit(F.memoryLimitBytes),F.maxStackSizeBytes!==void 0&&x.setMaxStackSize(F.maxStackSizeBytes)}var gx,Tx,D0,Hx,t0,V0,b0,Z0,K0,U0,yx,Nx,X0,W0,Y0,z0,$,n0,m,C0,M0,k,y,P0,q,o0,Mx,Px,R,Lx,vx,i8,o8,Kx,L0,J0,X,Ux,O0,Xx,Wx,Yx,zx,a0,Bx,rx=w(()=>{K();K();gx=Object.defineProperty,Tx=(x,F)=>{for(var A in F)gx(x,A,{get:F[A],enumerable:!0})},D0=!1;Hx={};Tx(Hx,{QuickJSAsyncifyError:()=>K0,QuickJSAsyncifySuspended:()=>U0,QuickJSEmptyGetOwnPropertyNames:()=>Y0,QuickJSEmscriptenModuleError:()=>Nx,QuickJSHostRefInvalid:()=>$,QuickJSHostRefRangeExceeded:()=>z0,QuickJSMemoryLeakDetected:()=>yx,QuickJSNotImplemented:()=>Z0,QuickJSPromisePending:()=>W0,QuickJSUnknownIntrinsic:()=>X0,QuickJSUnwrapError:()=>t0,QuickJSUseAfterFree:()=>b0,QuickJSWrongOwner:()=>V0});t0=class extends Error{constructor(x,F){let A=typeof x=="object"&&x&&"message"in x?String(x.message):String(x);super(A),this.cause=x,this.context=F,this.name="QuickJSUnwrapError"}},V0=class extends Error{constructor(){super(...arguments),this.name="QuickJSWrongOwner"}},b0=class extends Error{constructor(){super(...arguments),this.name="QuickJSUseAfterFree"}},Z0=class extends Error{constructor(){super(...arguments),this.name="QuickJSNotImplemented"}},K0=class extends Error{constructor(){super(...arguments),this.name="QuickJSAsyncifyError"}},U0=class extends Error{constructor(){super(...arguments),this.name="QuickJSAsyncifySuspended"}},yx=class extends Error{constructor(){super(...arguments),this.name="QuickJSMemoryLeakDetected"}},Nx=class extends Error{constructor(){super(...arguments),this.name="QuickJSEmscriptenModuleError"}},X0=class extends TypeError{constructor(){super(...arguments),this.name="QuickJSUnknownIntrinsic"}},W0=class extends Error{constructor(){super(...arguments),this.name="QuickJSPromisePending"}},Y0=class extends Error{constructor(){super(...arguments),this.name="QuickJSEmptyGetOwnPropertyNames"}},z0=class extends Error{constructor(){super(...arguments),this.name="QuickJSHostRefRangeExceeded"}},$=class extends Error{constructor(){super(...arguments),this.name="QuickJSHostRefInvalid"}};n0=xx;n0.of=Ix;m=class{[Symbol.dispose](){return this.dispose()}},C0=Symbol.dispose??Symbol.for("Symbol.dispose"),M0=m.prototype;M0[C0]||(M0[C0]=function(){return this.dispose()});k=class Ax extends m{constructor(F,A,v,E){super(),this._value=F,this.copier=A,this.disposer=v,this._owner=E,this._alive=!0,this._constructorStack=D0?new Error("Lifetime constructed").stack:void 0}get alive(){return this._alive}get value(){return this.assertAlive(),this._value}get owner(){return this._owner}get dupable(){return!!this.copier}dup(){if(this.assertAlive(),!this.copier)throw new Error("Non-dupable lifetime");return new Ax(this.copier(this._value),this.copier,this.disposer,this._owner)}consume(F){this.assertAlive();let A=F(this);return this.dispose(),A}map(F){return this.assertAlive(),F(this)}tap(F){return F(this),this}dispose(){this.assertAlive(),this.disposer&&this.disposer(this._value),this._alive=!1}assertAlive(){if(!this.alive)throw this._constructorStack?new b0(`Lifetime not alive
 ${this._constructorStack}

package/dist/dottie-player.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.11.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.11.1 | 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) => {
@@ -4030,7 +4030,7 @@ function sceneNamed(name, markers) {
   const exact = markers.findIndex((m) => m.name === name);
   return exact >= 0 ? exact : markers.findIndex((m) => m.name.toLowerCase() === name.toLowerCase());
 }
-function clickTargets(page, file) {
+function clickTargets(page, file, hrefs) {
   const markers = page.timeline?.markers ?? [];
   const out = /* @__PURE__ */ new Map();
   let pageOf = null;
@@ -4066,11 +4066,19 @@ function clickTargets(page, file) {
         });
       }
       const target = pageOf.get(e.link);
-      if (target !== void 0 && file.pages[target] !== page) out.set(e.id, { page: target });
+      if (target !== void 0 && file.pages[target] !== page) {
+        out.set(e.id, { page: target });
+        continue;
+      }
     }
+    const href = e.link && hrefs && Object.prototype.hasOwnProperty.call(hrefs, e.link) ? pageHref(hrefs[e.link]) : null;
+    if (href) out.set(e.id, { href });
   }
   return out;
 }
+function pageHref(href) {
+  return typeof href === "string" && /^[A-Za-z0-9._~%/-]+\.html(#[^\s:]*)?$/.test(href) && !href.startsWith("//") ? href : null;
+}
 function hoveredElement(e) {
   const h = e.hover;
   if (!h) return e;
@@ -5143,7 +5151,8 @@ output { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right
 .error { padding: 16px; font-family: ui-monospace, Menlo, monospace; white-space: pre-wrap; }
 ${CLICK_STYLE}`;
 var Playback = class {
-  /** `file` is the drawing `page` belongs to, so links to its other pages are clickable. */
+  /** `file` is the drawing `page` belongs to, so links to its other pages are clickable; `hrefs`, the web pages that
+   * show the elements links point at, for pages that aren't in it (clickTargets). */
   constructor(page, into, options = {}) {
     __publicField(this, "page");
     __publicField(this, "plan");
@@ -5185,7 +5194,7 @@ var Playback = class {
     this.page = options.clean ? cleanCopy(page) : page;
     addFonts(usedFonts(this.page));
     this.plan = plan(this.page);
-    this.clicks = clickTargets(page, options.file);
+    this.clicks = clickTargets(page, options.file, options.hrefs);
     const table = symbolTable(this.page);
     for (const e of this.page.elements) {
       const s = e.kind === "symbol" && e.symbol !== null ? table.get(e.symbol) : void 0;
@@ -5454,6 +5463,11 @@ var DottiePlayer = class extends ElementBase {
     __publicField(this, "stillTime", null);
     __publicField(this, "visible", true);
     __publicField(this, "observer", null);
+    /** The page last shown, so `page` fires only when it changes. */
+    __publicField(this, "shownPage", null);
+    __publicField(this, "onPopState", () => {
+      if (this.file) this.mount();
+    });
     /** 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());
@@ -5502,15 +5516,21 @@ var DottiePlayer = class extends ElementBase {
       });
       this.observer.observe(this);
     }
+    if (this.hasAttribute("history")) window.addEventListener("popstate", this.onPopState);
     void this.load();
   }
   disconnectedCallback() {
     cancelAnimationFrame(this.raf);
     this.raf = 0;
     this.observer?.disconnect();
+    window.removeEventListener("popstate", this.onPopState);
   }
   attributeChangedCallback(name, old, value2) {
     if (old === value2 || !this.isConnected) return;
+    if (name === "history") {
+      if (value2 === null) window.removeEventListener("popstate", this.onPopState);
+      else window.addEventListener("popstate", this.onPopState);
+    }
     if (name === "src") void this.load();
     else if (name === "label") this.stage.setAttribute("aria-label", value2 ?? "");
     else if (this.file) this.mount();
@@ -5559,6 +5579,7 @@ var DottiePlayer = class extends ElementBase {
   }
   showFile(file) {
     this.file = file;
+    this.shownPage = null;
     for (const w of file.warnings) console.warn(`dottie-player: ${w}`);
     this.mount(() => this.dispatchEvent(new CustomEvent("load", { detail: { file } })));
   }
@@ -5566,7 +5587,7 @@ var DottiePlayer = class extends ElementBase {
    * showing stays until it is ready; a newer mount, file or failed load in the meantime wins. */
   mount(mounted) {
     const file = this.file;
-    const page = file.pages[pageIndex(file, this.getAttribute("page"))];
+    const page = file.pages[this.addressedPage(file) ?? pageIndex(file, this.getAttribute("page"))];
     const clean = this.hasAttribute("clean");
     const token = ++this.mountToken;
     const shown = clean ? cleanCopy(page) : page;
@@ -5581,10 +5602,41 @@ var DottiePlayer = class extends ElementBase {
       mounted?.();
     });
   }
+  /** With `history`, the page the address names after its `#` (by name, any case), if it names one. */
+  addressedPage(file) {
+    if (!this.hasAttribute("history") || typeof location === "undefined" || location.hash.length < 2) return null;
+    let name;
+    try {
+      name = decodeURIComponent(location.hash.slice(1));
+    } catch {
+      return null;
+    }
+    const i = file.pages.findIndex((p) => p.name.toLowerCase() === name.toLowerCase());
+    return i >= 0 ? i : null;
+  }
+  /** The `links` attribute read: element id to web page, the pages that can't be named left out. */
+  hrefs() {
+    const raw = this.getAttribute("links");
+    if (!raw) return void 0;
+    let v;
+    try {
+      v = JSON.parse(raw);
+    } catch {
+      console.warn("dottie-player: links isn't JSON");
+      return void 0;
+    }
+    if (v === null || typeof v !== "object" || Array.isArray(v)) return void 0;
+    return v;
+  }
   mountPage(file, page, clean) {
-    const p = new Playback(page, this.stage, { clean, file });
+    const p = new Playback(page, this.stage, { clean, file, hrefs: this.hrefs() });
     p.still = this.hasAttribute("at");
     this.playback = p;
+    if (this.shownPage !== page) {
+      const first = this.shownPage === null;
+      this.shownPage = page;
+      queueMicrotask(() => this.dispatchEvent(new CustomEvent("page", { detail: { index: file.pages.indexOf(page), name: page.name, first } })));
+    }
     this.style.setProperty("--dottie-page", color(p.background));
     this.style.setProperty("--dottie-ink", color(p.ink));
     this.style.colorScheme = luminance(p.background) < 0.5 ? "dark" : "light";
@@ -5696,7 +5748,15 @@ var DottiePlayer = class extends ElementBase {
     if ("url" in click) {
       if (/^(https?:|mailto:)/i.test(click.url)) window.open(click.url, "_blank", "noopener");
     } else if ("page" in click) {
-      this.setAttribute("page", String(click.page + 1));
+      const target = this.file?.pages[click.page];
+      if (this.hasAttribute("history") && target) {
+        history.pushState(null, "", "#" + encodeURIComponent(target.name));
+        this.mount();
+      } else {
+        this.setAttribute("page", String(click.page + 1));
+      }
+    } else if ("href" in click) {
+      location.assign(click.href);
     } else if (click.scene >= 0 && click.scene < p.scenes.length) {
       if (reduced || this.hasAttribute("at") || p.frameCount < 2) {
         this.setPlaying(false);
@@ -5842,7 +5902,7 @@ var DottiePlayer = class extends ElementBase {
     if (handled) e.preventDefault();
   }
 };
-__publicField(DottiePlayer, "observedAttributes", ["src", "page", "at", "clean", "no-controls", "label", "allow-logic"]);
+__publicField(DottiePlayer, "observedAttributes", ["src", "page", "at", "clean", "no-controls", "label", "allow-logic", "history", "links"]);
 function clickable(target) {
   const el = target;
   return el && typeof el.closest === "function" ? el.closest(".dottie-a") : null;
@@ -5947,7 +6007,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.11.0";
+var VERSION = "0.11.1";
 
 // src/player-entry.ts
 servePlans();