@bezda/rhp-mcp 0.1.7 → 0.1.9

package/skill/recipes/tape.html

@@ -7,7 +7,7 @@
 <meta name="description" content="Tape: the parts of one whole laid end to end along a ruled measure and cut into equal lengths (a Chart per length, an overlap Plot of the parts that fall in it, a Scale of rules, notches and numerals that counts on), names and times inside a part only where the measured text fits, one group lit at rest, a big-number readout and a grouped key that picks too. Use it for how a day, a budget or any whole splits into parts that add up, read as lengths along one measure.">
 <!--
   A recipe gives technique, not a design.
-  Take: the parts of one whole laid end to end (where each starts and ends, summed in order) and cut into equal lengths, a Chart per length with an overlap Plot of the parts that fall in it (a part carried over from the length before is drawn open at its start); a Scale of rules, notches and numerals that counts on from the length before; names and times inside a part only where the text, measured once its font is in, fits; picking a part by pointer, tap, keyboard or its line in the key; one group lit at rest; a big-number readout.
+  Take: the parts of one whole laid end to end (where each starts and ends, summed in order) and cut into equal lengths, a Chart per length with an overlap Plot of the parts that fall in it (a part carried over from the length before is drawn open at its start); a Scale of rules, notches and numerals that counts on from the length before; names and times inside a part only where the text, measured once its font is in, fits; picking a part by pointer, tap, keyboard or its line in the key; section headings that toggle all their parts; one group lit at rest; a big-number readout.
   Leave: the design. This poster was made for its own subject (the average American day as a yellow tape measure in three 8-hour lengths, its numerals and rules printed in black, leisure in one deep blue, a grouped key under the tape).
   Its look, the place of its parts and the way its marks are drawn say that subject: design yours from your own (design.md, section 2).
 -->
@@ -43,10 +43,11 @@
 
   /* The readout: the stretch picked, in big printed numerals; it keeps its height so nothing below moves */
   .readout { grid-area: readout; display: flex; align-items: center; gap: 18px; min-height: 84px; margin: 6px 0 10px; }
-  .readout .big { flex: none; font: 700 clamp(48px, 9vw, 76px)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
+  .readout .big { flex: none; width: 3.1em; font: 700 clamp(48px, 9vw, 76px)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
   .readout .big span { margin: 0 .12em 0 .05em; font-size: .46em; font-weight: 600; }
   .readout .what { min-width: 0; font-size: 16px; line-height: 1.3; color: var(--soft); }
   .readout .what strong { display: block; font: 700 clamp(22px, 3.4vw, 28px)/1.1 var(--display); color: var(--ink); }
+  .readout .detail { display: block; }
 
   /* The tapes: three lengths of 8 hours, one above the other */
   .tapes { grid-area: tapes; display: grid; gap: 14px; min-width: 0; }
@@ -64,12 +65,17 @@
   .key button b { font: 700 16px/1.2 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
   .key button.on { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
   .key button.on i { background: var(--accent); box-shadow: none; }
+  .key h3 button { display: flex; justify-content: space-between; align-items: normal; gap: 10px; padding: 0;
+    color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
 
   @media (min-width: 860px) {
     .poster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 40px;
       grid-template-areas: "kicker kicker" "headline headline" "dek readout" "tapes tapes" "key key" "note note"; }
     .readout { margin: 0; }
   }
+  @media (min-width: 860px) and (max-width: 1000px) {
+    .readout .what strong { min-height: 2lh; }
+  }
   @media (max-width: 640px) {
     body { padding: 16px 16px 32px; }
     .poster { padding: 24px 16px 16px; }
@@ -77,6 +83,10 @@
     .readout { gap: 12px; min-height: 128px; }
     .readout .what { font-size: 14px; }
   }
+  @media (max-width: 390px) {
+    .readout .what strong { min-height: 2lh; }
+    .readout .detail { min-height: 4lh; }
+  }
 </style>
 </head>
 <body>
@@ -153,24 +163,22 @@ const Piece = slat({
   thickness: TAPE,
   room: { start: PAD, end: PAD },
   css: `
-    .seg { pointer-events: none; }
     .bar { pointer-events: auto; --rhp-start-radius: 0px; --rhp-end-radius: 0px; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
-      padding: 0 8px 7px; overflow: hidden; cursor: default; color: var(--rhp-ink);
+      padding: 0 8px 7px; overflow: hidden; cursor: pointer; color: var(--rhp-ink);
       box-shadow: inset 0 3px 0 var(--rhp-ink), inset 0 -3px 0 var(--rhp-ink), inset -3px 0 0 var(--rhp-ink); }
-    .seg.first .bar { box-shadow: inset 0 3px 0 var(--rhp-ink), inset 0 -3px 0 var(--rhp-ink), inset -3px 0 0 var(--rhp-ink), inset 3px 0 0 var(--rhp-ink); }
-    .on .bar { color: var(--rhp-surface); }
+    .bar.first { box-shadow: inset 0 3px 0 var(--rhp-ink), inset 0 -3px 0 var(--rhp-ink), inset -3px 0 0 var(--rhp-ink), inset 3px 0 0 var(--rhp-ink); }
+    .bar.on { color: var(--rhp-surface); }
     .nm { font: 700 19px/1 "Barlow Condensed", Arial, sans-serif; white-space: nowrap; }
     .tm { font: 600 16px/1 "Barlow Condensed", Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
-    .seg:focus-visible { outline: none; }
-    .seg:focus-visible .bar { outline: 3px solid var(--rhp-ink); outline-offset: 2px; }
+    .bar:focus-visible { outline: 3px solid var(--rhp-ink); outline-offset: 2px; }
     @media (max-width: 640px) { .nm { font-size: 17px; } .tm { font-size: 14px; } }
   `,
 }, (d) => html`
-  <div class=${() => `seg${d.on ? " on" : ""}${d.from === 0 ? " first" : ""}`} data-act=${() => d.act} role="img" aria-label=${() => say(d.act)}>
-    <${Bar} from=${() => d.from} to=${() => d.to} color=${() => (d.on ? "series-1" : "series-2")} class="bar" thick=${1}>
-      <span class="nm">${() => nameOf(d)}</span><span class="tm">${() => timeOf(d)}</span>
-    <//>
-  </div>`);
+  <${Bar} from=${() => d.from} to=${() => d.to} color=${() => (d.on ? "series-1" : "series-2")} thick=${1}
+    class=${() => `seg bar${d.on ? " on" : ""}${d.from === 0 ? " first" : ""}`}
+    data-act=${() => d.act} role="button" aria-pressed=${() => d.on} aria-label=${() => say(d.act)}>
+    <span class="nm">${() => nameOf(d)}</span><span class="tm">${() => timeOf(d)}</span>
+  <//>`);
 
 // The tape's printing: a hairline at every hour across the tape (so the hours can be counted), notches at the quarter
 // hours, and a numeral above each hour
@@ -195,32 +203,59 @@ const Hour = slat({
     </div>`;
 });
 
-// Chart component: the stretch the reader points at, taps or reaches with the keyboard is lit, the rest is quiet
+// Chart component: section toggles and individual picks share one selection; hover only previews
 function DayTape() {
+  const members = GROUPS.map((_, g) => ACTS.flatMap((a, i) => a.group === g ? [i] : []));
+  const [selected, setSelected] = createSignal(members[LEAD]);
   const [on, setOn] = createSignal(null);
-  const lit = (i) => (on() == null ? ACTS[i].group === LEAD : on() === i);
-  const shown = () => (on() == null ? null : ACTS[on()]);
+  const lit = (i) => selected().includes(i);
+  const shown = () => ACTS[on() ?? (selected().length === 1 ? selected()[0] : -1)];
+  const allSelected = (g) => members[g].every((i) => selected().includes(i));
+  const groupState = (g) => allSelected(g) ? "true" : members[g].some((i) => selected().includes(i)) ? "mixed" : "false";
+  const selectedGroup = () => {
+    const group = ACTS[selected()[0]]?.group;
+    return group != null && selected().every((i) => ACTS[i].group === group) ? group : null;
+  };
+  const selectedHours = () => selected().reduce((sum, i) => sum + ACTS[i].hours, 0);
 
   // The activity of the element under the pointer or focus, or null
   const actOf = (el) => {
     const hit = el.closest?.("[data-act]");
     return hit ? +hit.dataset.act : null;
   };
-  // A mouse or a pen picks as it moves; a tap, a click or the keyboard picks; on no stretch the pick stays
+  // Hover and keyboard focus inspect an activity without changing the selection
   const pick = (e) => {
     const act = actOf(e.target);
     if (act != null) setOn(act);
+    else if (e.target.closest("[data-group]")) setOn(null);
   };
   const tap = (e) => {
+    const heading = e.target.closest("[data-group]");
+    if (heading) {
+      const group = +heading.dataset.group;
+      heading.focus({ preventScroll: true });
+      const clear = allSelected(group);
+      setSelected((now) => clear ? now.filter((i) => ACTS[i].group !== group)
+        : ACTS.flatMap((a, i) => now.includes(i) || a.group === group ? [i] : []));
+      setOn(null);
+      return;
+    }
     const act = actOf(e.target);
     if (act == null) return;
-    setOn(act);
-    e.currentTarget.querySelector(`.seg[data-act="${act}"]`)?.focus({ preventScroll: true });
+    setSelected((now) => now.includes(act) ? now.filter((i) => i !== act) : [...now, act].sort((a, b) => a - b));
+    e.target.closest("[data-act]")?.focus({ preventScroll: true });
+    setOn(null);
   };
-  // Leaving the poster: back to the stretch that has focus (a keyboard's or a tap's pick), or to the lead
+  const key = (e) => {
+    if (!e.target.closest(".seg") || (e.key !== "Enter" && e.key !== " ")) return;
+    e.preventDefault();
+    if (!e.repeat) tap(e);
+  };
+  // Leaving the poster: back to the keyboard's preview, or the committed selection
   const leave = (e) => {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
-    setOn(actOf(document.activeElement && e.currentTarget.contains(document.activeElement) ? document.activeElement : e.currentTarget));
+    const focused = document.activeElement;
+    setOn(focused && e.currentTarget.contains(focused) && focused.matches(":focus-visible") ? actOf(focused) : null);
   };
   const move = (e) => e.pointerType !== "touch" && (e.target.closest(".tapes, .key") ? pick(e) : leave(e));
 
@@ -243,13 +278,17 @@ function DayTape() {
       title=${HEADLINE}
       dek="The average American day as a tape measure cut into three lengths of 8 hours: each stretch is how long an activity takes in all, laid end to end, so read the numbers as hours used up, not as clock times. Point at or tap a stretch to read it."
       note=${NOTE}
-      onPointerMove=${move} onClick=${tap} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${tap} onFocusIn=${pick} onKeyDown=${key}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setOn(null)}>
       <div class="readout" aria-live="polite">
-        <b class="big">${() => big(shown() ? shown().hours : groupHours[LEAD])}</b>
+        <b class="big">${() => big(shown() ? shown().hours : selectedHours())}</b>
         <span class="what">
-          <strong>${() => (shown() ? shown().name : GROUPS[LEAD])}</strong>
-          ${() => (shown() ? `${share(shown().hours)}, part of ${GROUPS[shown().group].toLowerCase()}` : `${share(groupHours[LEAD])}, all four kinds of it together`)}
+          <strong>${() => shown() ? shown().name : selectedGroup() != null ? GROUPS[selectedGroup()] : selected().length ? "Selected activities" : "No activities selected"}</strong>
+          <span class="detail">${() => shown() ? `${share(shown().hours)}, part of ${GROUPS[shown().group].toLowerCase()}` : selected().length
+            ? selectedGroup() === LEAD && allSelected(LEAD) ? `${share(selectedHours())}, all four kinds of it together`
+              : selectedGroup() != null ? `${share(selectedHours())}, ${selected().length} of ${members[selectedGroup()].length} activities selected`
+                : `${share(selectedHours())}, ${selected().length} activities selected`
+            : "Choose a section heading or an activity."}</span>
         </span>
       </div>
       <div class="tapes">
@@ -263,10 +302,10 @@ function DayTape() {
       <div class="key" onPointerLeave=${leave}>
         ${GROUPS.map((g, gi) => html`
           <section>
-            <h3>${g}<span>${short(groupHours[gi])}</span></h3>
+            <h3><button type="button" data-group=${gi} aria-pressed=${() => groupState(gi)}>${g}<span>${short(groupHours[gi])}</span></button></h3>
             <ul>
               ${ACTS.map((x, i) => (x.group === gi ? html`
-                <li><button type="button" data-act=${i} class=${() => (lit(i) ? "on" : "")}><i></i><span>${x.name}</span><b>${short(x.hours)}</b></button></li>` : null))}
+                <li><button type="button" data-act=${i} aria-pressed=${() => lit(i)} class=${() => (lit(i) ? "on" : "")}><i></i><span>${x.name}</span><b>${short(x.hours)}</b></button></li>` : null))}
             </ul>
           </section>`)}
       </div>
@@ -277,7 +316,7 @@ render(() => html`<${DayTape} />`, document.getElementById("chart"));
 </script>
 <style id="poster-download-styles">
   .poster-download-tools { display: flex; justify-content: flex-end; align-items: center; margin: 0 auto 12px; max-width: 100%; }
-  .poster-actions { display: flex; align-items: center; margin-left: auto; }
+  .poster-actions { position: relative; display: flex; align-items: center; margin-left: auto; }
   .poster-download, .poster-fit-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
   .poster-actions svg { display: block; width: 20px; height: 20px; }
   .poster-actions button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
@@ -288,7 +327,14 @@ render(() => html`<${DayTape} />`, document.getElementById("chart"));
   .poster-fit-frame.is-fitted { display: block; margin: 0 auto; overflow: clip; }
   .poster-fit-frame.is-fitted > .poster-fit-content { display: block; transform-origin: top left; }
   .poster-download-error { margin: 8px auto; font: 14px/1.4 system-ui, sans-serif; color: inherit; }
-  @media print { .poster-download-tools, .poster-actions, .poster-download-error { display: none !important; } }
+  .poster-download-progress { font: 600 11px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
+  .poster-download-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: grid; gap: 2px; min-width: 220px; padding: 6px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: 8px; background: var(--poster-tools-ground, Canvas); box-shadow: 0 8px 24px rgb(0 0 0 / .28); }
+  .poster-download-menu[hidden] { display: none; }
+  .poster-download-menu button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 5px; background: none; color: inherit; font: 600 14px/1.3 system-ui, sans-serif; text-align: left; cursor: pointer; }
+  .poster-download-menu button span { font-weight: 400; font-size: 12.5px; opacity: .8; }
+  .poster-download-menu button:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
+  .poster-download-menu button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+  @media print { .poster-download-tools, .poster-actions, .poster-download-menu, .poster-download-error { display: none !important; } }
 </style>
 <script type="module" id="poster-download-script">
 function addPosterFit(poster, button, changed) {
@@ -366,6 +412,8 @@ function addPosterDownloads() {
         tools.style.color = light[0] * .2126 + light[1] * .7152 + light[2] * .0722 < .179 ? '#eef2f5' : '#1d1b17';
       }
     }
+    const ground = getComputedStyle(document.body).backgroundColor;
+    if (!/^(transparent|rgba\(0, 0, 0, 0\))$/.test(ground)) tools.style.setProperty('--poster-tools-ground', ground);
     const button = document.createElement('button');
     button.type = 'button';
     button.className = 'poster-download';
@@ -411,154 +459,356 @@ function addPosterDownloads() {
     for (const type of ['keydown', 'keyup']) actions.addEventListener(type, event => {
       if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
     });
-    let exporter, retries = 0, busy = false;
-    button.addEventListener('click', async event => {
-      event.stopPropagation();
-      if (busy) return;
+    // A poster that plays through its data gives itself a playback ({ duration, position, seek }): its download then
+    // offers the poster as it is now, a PNG, or the whole playback, an animated GIF
+    let exporter, encoder, retries = 0, busy = false, making = null, cancelled = false;
+    const playable = () => typeof poster.playback?.seek === 'function';
+    const icon = button.innerHTML;
+    const menu = document.createElement('div');
+    menu.className = 'poster-download-menu';
+    menu.setAttribute('role', 'menu');
+    menu.setAttribute('aria-label', 'Download poster');
+    menu.hidden = true;
+    menu.innerHTML = '<button type="button" role="menuitem" data-format="png">PNG image<span>The poster as it is now</span></button>'
+      + '<button type="button" role="menuitem" data-format="gif">Animated GIF<span>The whole playback</span></button>';
+    const items = [...menu.querySelectorAll('[role="menuitem"]')];
+    actions.append(menu);
+    const label = text => { button.setAttribute('aria-label', text); button.title = text; };
+    const rest = () => {
+      label(playable() ? 'Download poster' : 'Download poster as PNG');
+      if (playable()) { button.setAttribute('aria-haspopup', 'menu'); button.setAttribute('aria-expanded', String(!menu.hidden)); }
+    };
+    rest();
+    const closeMenu = focus => {
+      if (menu.hidden) return;
+      menu.hidden = true;
+      rest();
+      if (focus) button.focus();
+    };
+    const openMenu = focus => {
+      menu.hidden = false;
+      rest();
+      if (focus) items[0].focus();
+    };
+    document.addEventListener('pointerdown', event => { if (!actions.contains(event.target)) closeMenu(false); }, true);
+    menu.addEventListener('keydown', event => {
+      const at = items.indexOf(document.activeElement);
+      const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: items.length - 1 }[event.key];
+      if (to !== undefined) { event.preventDefault(); items[(to + items.length) % items.length].focus(); }
+      else if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeMenu(true); }
+      else if (event.key === 'Tab') closeMenu(false);
+    });
+    menu.addEventListener('focusout', event => { if (!menu.contains(event.relatedTarget) && event.relatedTarget !== button) closeMenu(false); });
+    // The capture options, made once for a download and for every frame of a GIF
+    const loadExporter = () => (exporter ||= import('https://cdn.jsdelivr.net/npm/modern-screenshot@4.7.0/+esm' + (retries ? `?retry=${retries}` : '')));
+    async function captureOptions() {
+      await document.fonts.ready;
+      // Preserve author layout rules where computed styles lose the grid's used geometry.
+      // Safari misreports percentage insets in subgrids, and grid auto margins resolve to zero.
+      const autoMargins = new Set(), positioned = new Set();
+      const isMargin = name => name === 'margin' || name.startsWith('margin-');
+      const isInset = name => name === 'inset' || name.startsWith('inset-') || ['top', 'right', 'bottom', 'left'].includes(name);
+      const layoutRules = rules => [...rules].map(rule => {
+        if (rule.selectorText && rule.style) {
+          const margins = [...rule.style].filter(isMargin);
+          if (margins.some(name => /\bauto\b/.test(rule.style.getPropertyValue(name)))) autoMargins.add(rule.selectorText);
+          const insets = [...rule.style].filter(isInset);
+          if (insets.length) positioned.add(rule.selectorText);
+          const layout = [...margins, ...insets];
+          return layout.length ? `${rule.selectorText} { ${layout.map(name => `${name}: ${rule.style.getPropertyValue(name)}${rule.style.getPropertyPriority(name) ? ' !important' : ''};`).join(' ')} }` : '';
+        }
+        if (!rule.cssRules) return /^@layer\b/.test(rule.cssText) ? rule.cssText : '';
+        if (rule instanceof CSSMediaRule) return matchMedia(rule.conditionText).matches ? layoutRules(rule.cssRules) : '';
+        if (rule instanceof CSSSupportsRule) return CSS.supports(rule.conditionText) ? layoutRules(rule.cssRules) : '';
+        return rule.cssText.slice(0, rule.cssText.indexOf('{') + 1) + layoutRules(rule.cssRules) + '}';
+      }).join('\n');
+      const sheets = [...document.styleSheets, ...document.adoptedStyleSheets];
+      const layout = sheets.map(sheet => {
+        try { return layoutRules(sheet.cssRules); } catch (cause) { return ''; }
+      }).join('\n');
+      // Omit display-none HTML subtrees, such as collapsed chart rows, from the image and its SVG payload.
+      const includeNode = node => !(node instanceof HTMLElement) || getComputedStyle(node).display !== 'none';
+      const restoreLayout = (source, clone) => {
+        if (clone.style && source !== poster) {
+          const margins = [...autoMargins].some(selector => source.matches(selector));
+          const computed = getComputedStyle(source);
+          const insets = computed.position === 'absolute' && [...positioned].some(selector => source.matches(selector));
+          const restore = name => (margins && isMargin(name)) || (insets && isInset(name));
+          [...clone.style].filter(restore).forEach(name => clone.style.removeProperty(name));
+          [...source.style].filter(restore).forEach(name => clone.style.setProperty(name, source.style.getPropertyValue(name), source.style.getPropertyPriority(name)));
+          if (insets) {
+            // Only the scaled axis needs its percentage rule. Freeze the other axis in pixels:
+            // Firefox does not reevaluate container queries reliably inside an SVG foreignObject.
+            const axis = source.getAttribute('data-rhp-o');
+            const fixed = axis === 'h' ? ['top', 'bottom'] : axis === 'v' ? ['left', 'right'] : ['top', 'right', 'bottom', 'left'];
+            fixed.forEach(name => clone.style.setProperty(name, computed.getPropertyValue(name), 'important'));
+          }
+        }
+        const children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName) && includeNode(node));
+        [...clone.children].forEach((child, i) => { if (children[i]) restoreLayout(children[i], child); });
+      };
+      // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
+      const fontFiles = new Map();
+      const fontRules = await Promise.all(sheets.map(async sheet => {
+        let css;
+        try { css = [...sheet.cssRules].map(rule => rule.cssText).join('\n'); }
+        catch (cause) {
+          if (!sheet.href) return '';
+          const response = await fetch(sheet.href);
+          if (!response.ok) throw new Error('Font stylesheet could not be loaded');
+          css = await response.text();
+        }
+        const rules = css.match(/@font-face\s*\{[^}]*\}/g) || [];
+        return (await Promise.all(rules.map(async rule => {
+          for (const match of [...rule.matchAll(/url\(["']?([^"')]+)["']?\)/g)]) {
+            const source = new URL(match[1], sheet.href || document.baseURI).href;
+            if (!fontFiles.has(source)) fontFiles.set(source, (async () => {
+              const response = await fetch(source);
+              if (!response.ok) throw new Error('Font could not be loaded');
+              const blob = await response.blob();
+              return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = reject;
+                reader.readAsDataURL(blob);
+              });
+            })());
+            rule = rule.replace(match[1], await fontFiles.get(source));
+          }
+          return rule;
+        }))).join('\n');
+      }));
+      // Rasterize SVG paper textures before nesting them inside the exporter's SVG.
+      // This keeps SVG filter fragment references local to their own image.
+      const textures = new Map();
+      const embedTexture = async (node) => {
+        if (!node.style) return;
+        let background = node.style.backgroundImage;
+        for (const [, source] of background.matchAll(/url\("(data:image\/svg\+xml[^"]+)"\)/g)) {
+          if (!textures.has(source)) textures.set(source, (async () => {
+            const image = new Image();
+            image.src = source;
+            await image.decode();
+            const canvas = document.createElement('canvas');
+            canvas.width = image.naturalWidth;
+            canvas.height = image.naturalHeight;
+            canvas.getContext('2d').drawImage(image, 0, 0);
+            return canvas.toDataURL();
+          })());
+          background = background.replace(source, await textures.get(source));
+        }
+        node.style.backgroundImage = background;
+      };
+      return {
+        ...fit.dimensions(), style: { margin: '0' }, filter: includeNode,
+        font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
+        onCloneNode: clone => {
+          restoreLayout(poster, clone);
+          const style = document.createElement('style');
+          style.textContent = layout;
+          clone.prepend(style);
+        },
+        // CSS content's alternative text follows a slash and must not be painted.
+        onCreateForeignObjectSvg: svg => svg.querySelectorAll('style').forEach(style => {
+          style.textContent = style.textContent.replace(/(content:\s*')([^']*)(')/g, (_, start, text, end) => start + text.split(' / ')[0] + end);
+        }),
+      };
+    }
+    let url;
+    const save = (blob, extension) => {
+      url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      const title = poster.querySelector('.headline')?.textContent || document.title || 'poster';
+      link.download = (title.trim().toLowerCase().replace(/[^\p{L}\p{N}]+/gu, '-').replace(/^-|-$/g, '').slice(0, 100) || 'poster') + '.' + extension;
+      link.href = url;
+      link.addEventListener('click', event => event.stopPropagation(), { once: true });
+      document.body.append(link);
+      link.click();
+      link.remove();
+    };
+    const begin = kind => {
       busy = true;
-      button.setAttribute('aria-disabled', 'true');
+      making = kind;
       button.setAttribute('aria-busy', 'true');
       fitButton.setAttribute('aria-disabled', 'true');
-      button.setAttribute('aria-label', 'Preparing poster PNG');
+      // A GIF takes a while: the button shows its progress and cancels it
+      if (kind === 'gif') label('Cancel the GIF');
+      else { button.setAttribute('aria-disabled', 'true'); label('Preparing poster PNG'); }
       error.hidden = true;
-      let url;
+    };
+    const end = () => {
+      if (url) setTimeout(() => URL.revokeObjectURL(url), 60000);
+      url = null;
+      busy = false;
+      making = null;
+      cancelled = false;
+      button.innerHTML = icon;
+      button.removeAttribute('aria-disabled');
+      button.removeAttribute('aria-busy');
+      fitButton.removeAttribute('aria-disabled');
+      rest();
+    };
+    const fail = message => {
+      exporter = null;
+      encoder = null;
+      retries++;
+      error.textContent = message;
+      error.hidden = false;
+    };
+    async function savePng() {
+      begin('png');
       try {
-        exporter ||= import('https://cdn.jsdelivr.net/npm/modern-screenshot@4.7.0/+esm' + (retries ? `?retry=${retries}` : ''));
-        const { domToBlob } = await exporter;
-        await document.fonts.ready;
-        // Preserve author layout rules where computed styles lose the grid's used geometry.
-        // Safari misreports percentage insets in subgrids, and grid auto margins resolve to zero.
-        const autoMargins = new Set(), positioned = new Set();
-        const isMargin = name => name === 'margin' || name.startsWith('margin-');
-        const isInset = name => name === 'inset' || name.startsWith('inset-') || ['top', 'right', 'bottom', 'left'].includes(name);
-        const layoutRules = rules => [...rules].map(rule => {
-          if (rule.selectorText && rule.style) {
-            const margins = [...rule.style].filter(isMargin);
-            if (margins.some(name => /\bauto\b/.test(rule.style.getPropertyValue(name)))) autoMargins.add(rule.selectorText);
-            const insets = [...rule.style].filter(isInset);
-            if (insets.length) positioned.add(rule.selectorText);
-            const layout = [...margins, ...insets];
-            return layout.length ? `${rule.selectorText} { ${layout.map(name => `${name}: ${rule.style.getPropertyValue(name)}${rule.style.getPropertyPriority(name) ? ' !important' : ''};`).join(' ')} }` : '';
-          }
-          if (!rule.cssRules) return /^@layer\b/.test(rule.cssText) ? rule.cssText : '';
-          if (rule instanceof CSSMediaRule) return matchMedia(rule.conditionText).matches ? layoutRules(rule.cssRules) : '';
-          if (rule instanceof CSSSupportsRule) return CSS.supports(rule.conditionText) ? layoutRules(rule.cssRules) : '';
-          return rule.cssText.slice(0, rule.cssText.indexOf('{') + 1) + layoutRules(rule.cssRules) + '}';
-        }).join('\n');
-        const sheets = [...document.styleSheets, ...document.adoptedStyleSheets];
-        const layout = sheets.map(sheet => {
-          try { return layoutRules(sheet.cssRules); } catch (cause) { return ''; }
-        }).join('\n');
-        // Omit display-none HTML subtrees, such as collapsed chart rows, from the image and its SVG payload.
-        const includeNode = node => !(node instanceof HTMLElement) || getComputedStyle(node).display !== 'none';
-        const restoreLayout = (source, clone) => {
-          if (clone.style && source !== poster) {
-            const margins = [...autoMargins].some(selector => source.matches(selector));
-            const computed = getComputedStyle(source);
-            const insets = computed.position === 'absolute' && [...positioned].some(selector => source.matches(selector));
-            const restore = name => (margins && isMargin(name)) || (insets && isInset(name));
-            [...clone.style].filter(restore).forEach(name => clone.style.removeProperty(name));
-            [...source.style].filter(restore).forEach(name => clone.style.setProperty(name, source.style.getPropertyValue(name), source.style.getPropertyPriority(name)));
-            if (insets) {
-              // Only the scaled axis needs its percentage rule. Freeze the other axis in pixels:
-              // Firefox does not reevaluate container queries reliably inside an SVG foreignObject.
-              const axis = source.getAttribute('data-rhp-o');
-              const fixed = axis === 'h' ? ['top', 'bottom'] : axis === 'v' ? ['left', 'right'] : ['top', 'right', 'bottom', 'left'];
-              fixed.forEach(name => clone.style.setProperty(name, computed.getPropertyValue(name), 'important'));
+        const { domToBlob } = await loadExporter();
+        const blob = await domToBlob(poster, { ...(await captureOptions()), scale: 2 });
+        if (!blob) throw new Error('No PNG was created');
+        save(blob, 'png');
+      } catch (cause) {
+        fail('The PNG could not be saved. Check your connection and try again.');
+      } finally {
+        end();
+      }
+    }
+    // The GIF's clock: while it is made, rhp's motion (performance.now and animation frames) and the page's CSS
+    // animations run on a time of their own, which only moves on when a frame asks it to, so every frame shows the chart
+    // exactly as it is that many milliseconds into playing, its glides and slides included
+    const gifClock = () => {
+      const raf = window.requestAnimationFrame, caf = window.cancelAnimationFrame;
+      const queue = new Map(), started = new Map();
+      let time = performance.now(), id = 0, pump = 0;
+      const flush = () => {
+        const due = [...queue.values()];
+        queue.clear();
+        due.forEach(callback => { try { callback(time); } catch (cause) { reportError(cause); } });
+      };
+      // Callbacks still run every real frame, at the clock's time, so whatever waits for a frame is not held up
+      const loop = () => { flush(); pump = raf.call(window, loop); };
+      window.requestAnimationFrame = callback => { queue.set(++id, callback); return id; };
+      window.cancelAnimationFrame = n => queue.delete(n);
+      performance.now = () => time;
+      pump = raf.call(window, loop);
+      return {
+        // Two of the browser's frames: callbacks that were already waiting for one (rhp's ticker) come over to the clock
+        ready: new Promise(resolve => raf.call(window, () => raf.call(window, resolve))),
+        advance(ms, steps = 1) {
+          for (let i = 0; i < steps; i++) {
+            time += ms / steps;
+            // A frame's motion, then the style writes it schedules
+            flush(); flush(); flush();
+            for (const animation of document.getAnimations()) {
+              if (!started.has(animation)) started.set(animation, time - (animation.currentTime ?? 0));
+              animation.pause();
+              animation.currentTime = time - started.get(animation);
             }
           }
-          const children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName) && includeNode(node));
-          [...clone.children].forEach((child, i) => { if (children[i]) restoreLayout(children[i], child); });
+        },
+        stop() {
+          caf.call(window, pump);
+          window.requestAnimationFrame = raf;
+          window.cancelAnimationFrame = caf;
+          delete performance.now;
+          for (const callback of queue.values()) raf.call(window, callback);
+          started.forEach((_, animation) => animation.play());
+        },
+      };
+    };
+    // The GIF: the playback at its own pace, 25 frames a second, at most 1200 pixels wide. One palette from the
+    // first and the last frame serves every frame; its last color is never drawn and marks the pixels a frame leaves as
+    // the frame before had them, so each frame stores only what changed.
+    async function saveGif() {
+      const playback = poster.playback;
+      const from = playback.position();
+      let clock = null;
+      begin('gif');
+      try {
+        encoder ||= import('https://cdn.jsdelivr.net/npm/gifenc@1.0.3/+esm' + (retries ? `?retry=${retries}` : ''));
+        const [{ domToCanvas }, { GIFEncoder, quantize, applyPalette }] = await Promise.all([loadExporter(), encoder]);
+        const options = await captureOptions();
+        const scale = Math.min(1, 1200 / options.width);
+        // The GIF plays at the chart's own pace: its playback's duration, in frames 40 ms apart
+        const step = 40, count = Math.max(2, Math.round((playback.duration ?? 15000) / step) + 1);
+        const capture = async () => {
+          const canvas = await domToCanvas(poster, { ...options, scale });
+          return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
         };
-        // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
-        const fontFiles = new Map();
-        const fontRules = await Promise.all(sheets.map(async sheet => {
-          let css;
-          try { css = [...sheet.cssRules].map(rule => rule.cssText).join('\n'); }
-          catch (cause) {
-            if (!sheet.href) return '';
-            const response = await fetch(sheet.href);
-            if (!response.ok) throw new Error('Font stylesheet could not be loaded');
-            css = await response.text();
+        clock = gifClock();
+        await clock.ready;
+        // The end and the start, each given a second to settle, for the palette; the start is also the first frame
+        playback.seek(1);
+        clock.advance(1000, 25);
+        const last = await capture();
+        playback.seek(0);
+        clock.advance(1000, 25);
+        const first = await capture();
+        const both = new Uint8ClampedArray(first.data.length + last.data.length);
+        both.set(first.data);
+        both.set(last.data, first.data.length);
+        const palette = quantize(both, 255), kept = palette.length;
+        // A flat color that fills a part of the poster keeps its exact value: it takes the nearest palette entry
+        const counts = new Map(), taken = new Set();
+        for (let j = 0; j < both.length; j += 4) {
+          const color = (both[j] << 16) | (both[j + 1] << 8) | both[j + 2];
+          counts.set(color, (counts.get(color) ?? 0) + 1);
+        }
+        for (const [color] of [...counts].filter(([, n]) => n > both.length / 8000).sort((a, b) => b[1] - a[1])) {
+          const rgb = [color >> 16, (color >> 8) & 255, color & 255];
+          let nearest = -1, distance = Infinity;
+          palette.forEach((entry, k) => {
+            const d = (entry[0] - rgb[0]) ** 2 + (entry[1] - rgb[1]) ** 2 + (entry[2] - rgb[2]) ** 2;
+            if (!taken.has(k) && d < distance) { nearest = k; distance = d; }
+          });
+          if (nearest >= 0) { palette[nearest] = rgb; taken.add(nearest); }
+        }
+        palette.push([255, 0, 255]);
+        const gif = GIFEncoder();
+        let previous = null;
+        for (let i = 0; i < count; i++) {
+          if (cancelled) return;
+          if (i > 0) {
+            playback.seek(i / (count - 1));
+            clock.advance(step);
+            // The last frame is held: it shows the end settled
+            if (i === count - 1) clock.advance(1000, 25);
           }
-          const rules = css.match(/@font-face\s*\{[^}]*\}/g) || [];
-          return (await Promise.all(rules.map(async rule => {
-            for (const match of [...rule.matchAll(/url\(["']?([^"')]+)["']?\)/g)]) {
-              const source = new URL(match[1], sheet.href || document.baseURI).href;
-              if (!fontFiles.has(source)) fontFiles.set(source, (async () => {
-                const response = await fetch(source);
-                if (!response.ok) throw new Error('Font could not be loaded');
-                const blob = await response.blob();
-                return new Promise((resolve, reject) => {
-                  const reader = new FileReader();
-                  reader.onload = () => resolve(reader.result);
-                  reader.onerror = reject;
-                  reader.readAsDataURL(blob);
-                });
-              })());
-              rule = rule.replace(match[1], await fontFiles.get(source));
-            }
-            return rule;
-          }))).join('\n');
-        }));
-        // Rasterize SVG paper textures before nesting them inside the exporter's SVG.
-        // This keeps SVG filter fragment references local to their own image.
-        const textures = new Map();
-        const embedTexture = async (node) => {
-          if (!node.style) return;
-          let background = node.style.backgroundImage;
-          for (const [, source] of background.matchAll(/url\("(data:image\/svg\+xml[^"]+)"\)/g)) {
-            if (!textures.has(source)) textures.set(source, (async () => {
-              const image = new Image();
-              image.src = source;
-              await image.decode();
-              const canvas = document.createElement('canvas');
-              canvas.width = image.naturalWidth;
-              canvas.height = image.naturalHeight;
-              canvas.getContext('2d').drawImage(image, 0, 0);
-              return canvas.toDataURL();
-            })());
-            background = background.replace(source, await textures.get(source));
-          }
-          node.style.backgroundImage = background;
-        };
-        const blob = await domToBlob(poster, {
-          ...fit.dimensions(), scale: 2, style: { margin: '0' }, filter: includeNode,
-          font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
-          onCloneNode: clone => {
-            restoreLayout(poster, clone);
-            const style = document.createElement('style');
-            style.textContent = layout;
-            clone.prepend(style);
-          },
-          // CSS content's alternative text follows a slash and must not be painted.
-          onCreateForeignObjectSvg: svg => svg.querySelectorAll('style').forEach(style => {
-            style.textContent = style.textContent.replace(/(content:\s*')([^']*)(')/g, (_, start, text, end) => start + text.split(' / ')[0] + end);
-          }),
-        });
-        if (!blob) throw new Error('No PNG was created');
-        url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        const title = poster.querySelector('.headline')?.textContent || document.title || 'poster';
-        link.download = (title.trim().toLowerCase().replace(/[^\p{L}\p{N}]+/gu, '-').replace(/^-|-$/g, '').slice(0, 100) || 'poster') + '.png';
-        link.href = url;
-        link.addEventListener('click', event => event.stopPropagation(), { once: true });
-        document.body.append(link);
-        link.click();
-        link.remove();
+          const image = i === 0 ? first : await capture();
+          const index = applyPalette(image.data, palette.slice(0, kept));
+          const pixels = previous ? index.map((p, j) => (p === previous[j] ? kept : p)) : index;
+          gif.writeFrame(pixels, image.width, image.height, {
+            palette: i === 0 ? palette : undefined, delay: i === 0 ? 1000 : i === count - 1 ? 3000 : step,
+            transparent: i > 0, transparentIndex: kept, dispose: 1,
+          });
+          previous = index;
+          const done = Math.round(((i + 1) / count) * 100);
+          button.innerHTML = `<span class="poster-download-progress" aria-hidden="true">${done}%</span>`;
+          label(`Cancel the GIF, ${done}% made`);
+        }
+        gif.finish();
+        save(new Blob([gif.bytes()], { type: 'image/gif' }), 'gif');
       } catch (cause) {
-        exporter = null;
-        retries++;
-        error.textContent = 'The PNG could not be saved. Check your connection and try again.';
-        error.hidden = false;
+        fail('The GIF could not be made. Check your connection and try again.');
       } finally {
-        if (url) setTimeout(() => URL.revokeObjectURL(url), 60000);
-        busy = false;
-        button.removeAttribute('aria-disabled');
-        button.removeAttribute('aria-busy');
-        fitButton.removeAttribute('aria-disabled');
-        button.setAttribute('aria-label', 'Download poster as PNG');
+        clock?.stop();
+        playback.seek(from);
+        end();
       }
+    }
+    button.addEventListener('click', event => {
+      event.stopPropagation();
+      if (busy) {
+        if (making === 'gif') cancelled = true;
+        return;
+      }
+      if (!playable()) return savePng();
+      // A key press is a click with no pointer detail: it opens the menu on its first item
+      if (menu.hidden) openMenu(event.detail === 0);
+      else closeMenu(event.detail === 0);
+    });
+    menu.addEventListener('click', event => {
+      const item = event.target.closest('[data-format]');
+      if (!item) return;
+      event.stopPropagation();
+      closeMenu(event.detail === 0);
+      if (item.dataset.format === 'gif') saveGif();
+      else savePng();
     });
     tools.append(actions);
   });