@bezda/rhp-mcp 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bezda/rhp-mcp",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Make charts with rhp from any AI agent: an MCP server with rhp's guide, references and recipes, and a checker that renders a chart in a browser and reports what is wrong, with screenshots",
   "keywords": [
     "rhp",

package/skill/SKILL.md

@@ -195,6 +195,10 @@ A chart with fixed data and no interaction gets `static=${true}` on its Chart: r
 
 ### 6. Build it, with the recipe's technique
 
+For every standalone HTML poster page, keep the recipe's PNG download control, or copy the complete block from [download.md](references/download.md) before `</body>`.
+It is an icon above the poster on the right, outside the saved image; on gallery recipe pages it shares the row and color of the gallery link.
+It saves the full poster, including the headline and note, even when the page scrolls.
+
 - Keep the recipe's code format and section order: data, then slat types, then the chart component, then mounting.
   With `ManyDots`, omit slat types and put the collection directly inside the Chart.
 - Use the user's data exactly, every value, in their units.
@@ -444,6 +448,7 @@ Read the ones the chart needs; each is self-contained.
 - [design.md](references/design.md): art direction from the subject (idea, marks, composition, palette, type), the poster, color, type, layout, annotation, charts inside an app, a style the user asks for.
 - [looks.md](references/looks.md): eight looks written out in full (tokens, fonts, texture, type), as examples of how a look is written, not a menu.
 - [interaction.md](references/interaction.md): which interaction for which story, with complete code for each.
+- [download.md](references/download.md): the download icon for standalone HTML posters, with a complete PNG export block.
 - [performance.md](references/performance.md): measured optimizations for an expensive chart, preserving its slats, styling, state, and interactions.
 - [environments.md](references/environments.md): plain HTML, Solid, Astro, React, Next.js, Vue, Svelte and Angular, each verified, and the html template to JSX rules.
 - [api.md](references/api.md): every component, prop, helper and CSS variable, exactly.

package/skill/recipes/area.html

@@ -152,5 +152,204 @@ function PowerChart() {
 
 render(() => html`<${PowerChart} />`, 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-download { 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-download svg { display: block; width: 20px; height: 20px; }
+  .poster-download:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
+  .poster-download:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+  .poster-download[aria-disabled="true"] { cursor: progress; opacity: .5; }
+  .poster-download-error { margin: 8px auto; font: 14px/1.4 system-ui, sans-serif; color: inherit; }
+  @media print { .poster-download-tools, .poster-download, .poster-download-error { display: none !important; } }
+</style>
+<script type="module" id="poster-download-script">
+function addPosterDownloads() {
+  document.querySelectorAll('.poster').forEach((poster, index) => {
+    const navigation = index === 0 && document.querySelector('.recipe-navigation');
+    const tools = navigation || document.createElement('div');
+    if (tools.querySelector('.poster-download')) return;
+    if (!navigation) {
+      tools.className = 'poster-download-tools';
+      poster.before(tools);
+      const align = () => { tools.style.width = `${poster.getBoundingClientRect().width}px`; };
+      new ResizeObserver(align).observe(poster);
+      align();
+      const rgb = getComputedStyle(document.body).backgroundColor.match(/[\d.]+/g);
+      if (rgb) {
+        const light = rgb.slice(0, 3).map(Number).map(v => {
+          v /= 255;
+          return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+        });
+        tools.style.color = light[0] * .2126 + light[1] * .7152 + light[2] * .0722 < .179 ? '#eef2f5' : '#1d1b17';
+      }
+    }
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'poster-download';
+    button.setAttribute('aria-label', 'Download poster as PNG');
+    button.title = 'Download poster as PNG';
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m-5-5 5 5 5-5M5 16v4h14v-4"/></svg>';
+    const error = document.createElement('p');
+    error.className = 'poster-download-error';
+    error.setAttribute('role', 'alert');
+    error.hidden = true;
+    tools.after(error);
+    // Download is part of the poster interaction, even though its control sits outside the image.
+    button.addEventListener('pointerdown', event => {
+      event.stopPropagation();
+    });
+    button.addEventListener('mousedown', event => {
+      event.stopPropagation();
+    });
+    poster.addEventListener('focusout', event => {
+      if (button.contains(event.relatedTarget) || button.matches(':active')) event.stopImmediatePropagation();
+    }, true);
+    poster.addEventListener('pointerleave', event => {
+      if (button.contains(event.relatedTarget) || document.activeElement === button) event.stopImmediatePropagation();
+    }, true);
+    for (const type of ['keydown', 'keyup']) button.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;
+      busy = true;
+      button.setAttribute('aria-disabled', 'true');
+      button.setAttribute('aria-busy', 'true');
+      button.setAttribute('aria-label', 'Preparing poster PNG');
+      error.hidden = true;
+      let url;
+      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;
+        // Grid auto margins resolve to zero in getComputedStyle, so keep their author rules.
+        const autoMargins = new Set();
+        const marginRules = rules => [...rules].map(rule => {
+          if (rule.selectorText && rule.style) {
+            const margins = [...rule.style].filter(name => name === 'margin' || name.startsWith('margin-'));
+            if (margins.some(name => /\bauto\b/.test(rule.style.getPropertyValue(name)))) autoMargins.add(rule.selectorText);
+            return margins.length ? `${rule.selectorText} { ${margins.map(name => `${name}: ${rule.style.getPropertyValue(name)}${rule.style.getPropertyPriority(name) ? ' !important' : ''};`).join(' ')} }` : '';
+          }
+          if (!rule.cssRules) return '';
+          if (rule instanceof CSSMediaRule) return matchMedia(rule.conditionText).matches ? marginRules(rule.cssRules) : '';
+          if (rule instanceof CSSSupportsRule) return CSS.supports(rule.conditionText) ? marginRules(rule.cssRules) : '';
+          return rule.cssText.slice(0, rule.cssText.indexOf('{') + 1) + marginRules(rule.cssRules) + '}';
+        }).join('\n');
+        const margins = [...document.styleSheets].map(sheet => {
+          try { return marginRules(sheet.cssRules); } catch (cause) { return ''; }
+        }).join('\n');
+        const restoreMargins = (source, clone) => {
+          if (clone.style && source !== poster && [...autoMargins].some(selector => source.matches(selector))) {
+            [...clone.style].filter(name => name === 'margin' || name.startsWith('margin-')).forEach(name => clone.style.removeProperty(name));
+            [...source.style].filter(name => name === 'margin' || name.startsWith('margin-')).forEach(name => clone.style.setProperty(name, source.style.getPropertyValue(name), source.style.getPropertyPriority(name)));
+          }
+          const children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          [...clone.children].forEach((child, i) => { if (children[i]) restoreMargins(children[i], child); });
+        };
+        // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
+        const fontFiles = new Map();
+        const fontRules = await Promise.all([...document.styleSheets].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;
+        };
+        const blob = await domToBlob(poster, {
+          scale: 2, style: { margin: '0' },
+          font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
+          onCloneNode: clone => {
+            restoreMargins(poster, clone);
+            const style = document.createElement('style');
+            style.textContent = margins;
+            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();
+      } catch (cause) {
+        exporter = null;
+        retries++;
+        error.textContent = 'The PNG could not be saved. Check your connection and try again.';
+        error.hidden = false;
+      } finally {
+        if (url) setTimeout(() => URL.revokeObjectURL(url), 60000);
+        busy = false;
+        button.removeAttribute('aria-disabled');
+        button.removeAttribute('aria-busy');
+        button.setAttribute('aria-label', 'Download poster as PNG');
+      }
+    });
+    tools.append(button);
+  });
+}
+// A chart module may await fonts or data after DOMContentLoaded has already fired.
+if (document.querySelector('.poster')) addPosterDownloads();
+else {
+  const observer = new MutationObserver(() => {
+    if (!document.querySelector('.poster')) return;
+    observer.disconnect();
+    addPosterDownloads();
+  });
+  observer.observe(document.getElementById('chart') || document.body, { childList: true, subtree: true });
+}
+</script>
 </body>
 </html>

package/skill/recipes/bar.html

@@ -143,5 +143,204 @@ function SpokenLanguages() {
 
 render(() => html`<${SpokenLanguages} />`, 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-download { 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-download svg { display: block; width: 20px; height: 20px; }
+  .poster-download:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
+  .poster-download:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+  .poster-download[aria-disabled="true"] { cursor: progress; opacity: .5; }
+  .poster-download-error { margin: 8px auto; font: 14px/1.4 system-ui, sans-serif; color: inherit; }
+  @media print { .poster-download-tools, .poster-download, .poster-download-error { display: none !important; } }
+</style>
+<script type="module" id="poster-download-script">
+function addPosterDownloads() {
+  document.querySelectorAll('.poster').forEach((poster, index) => {
+    const navigation = index === 0 && document.querySelector('.recipe-navigation');
+    const tools = navigation || document.createElement('div');
+    if (tools.querySelector('.poster-download')) return;
+    if (!navigation) {
+      tools.className = 'poster-download-tools';
+      poster.before(tools);
+      const align = () => { tools.style.width = `${poster.getBoundingClientRect().width}px`; };
+      new ResizeObserver(align).observe(poster);
+      align();
+      const rgb = getComputedStyle(document.body).backgroundColor.match(/[\d.]+/g);
+      if (rgb) {
+        const light = rgb.slice(0, 3).map(Number).map(v => {
+          v /= 255;
+          return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+        });
+        tools.style.color = light[0] * .2126 + light[1] * .7152 + light[2] * .0722 < .179 ? '#eef2f5' : '#1d1b17';
+      }
+    }
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'poster-download';
+    button.setAttribute('aria-label', 'Download poster as PNG');
+    button.title = 'Download poster as PNG';
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m-5-5 5 5 5-5M5 16v4h14v-4"/></svg>';
+    const error = document.createElement('p');
+    error.className = 'poster-download-error';
+    error.setAttribute('role', 'alert');
+    error.hidden = true;
+    tools.after(error);
+    // Download is part of the poster interaction, even though its control sits outside the image.
+    button.addEventListener('pointerdown', event => {
+      event.stopPropagation();
+    });
+    button.addEventListener('mousedown', event => {
+      event.stopPropagation();
+    });
+    poster.addEventListener('focusout', event => {
+      if (button.contains(event.relatedTarget) || button.matches(':active')) event.stopImmediatePropagation();
+    }, true);
+    poster.addEventListener('pointerleave', event => {
+      if (button.contains(event.relatedTarget) || document.activeElement === button) event.stopImmediatePropagation();
+    }, true);
+    for (const type of ['keydown', 'keyup']) button.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;
+      busy = true;
+      button.setAttribute('aria-disabled', 'true');
+      button.setAttribute('aria-busy', 'true');
+      button.setAttribute('aria-label', 'Preparing poster PNG');
+      error.hidden = true;
+      let url;
+      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;
+        // Grid auto margins resolve to zero in getComputedStyle, so keep their author rules.
+        const autoMargins = new Set();
+        const marginRules = rules => [...rules].map(rule => {
+          if (rule.selectorText && rule.style) {
+            const margins = [...rule.style].filter(name => name === 'margin' || name.startsWith('margin-'));
+            if (margins.some(name => /\bauto\b/.test(rule.style.getPropertyValue(name)))) autoMargins.add(rule.selectorText);
+            return margins.length ? `${rule.selectorText} { ${margins.map(name => `${name}: ${rule.style.getPropertyValue(name)}${rule.style.getPropertyPriority(name) ? ' !important' : ''};`).join(' ')} }` : '';
+          }
+          if (!rule.cssRules) return '';
+          if (rule instanceof CSSMediaRule) return matchMedia(rule.conditionText).matches ? marginRules(rule.cssRules) : '';
+          if (rule instanceof CSSSupportsRule) return CSS.supports(rule.conditionText) ? marginRules(rule.cssRules) : '';
+          return rule.cssText.slice(0, rule.cssText.indexOf('{') + 1) + marginRules(rule.cssRules) + '}';
+        }).join('\n');
+        const margins = [...document.styleSheets].map(sheet => {
+          try { return marginRules(sheet.cssRules); } catch (cause) { return ''; }
+        }).join('\n');
+        const restoreMargins = (source, clone) => {
+          if (clone.style && source !== poster && [...autoMargins].some(selector => source.matches(selector))) {
+            [...clone.style].filter(name => name === 'margin' || name.startsWith('margin-')).forEach(name => clone.style.removeProperty(name));
+            [...source.style].filter(name => name === 'margin' || name.startsWith('margin-')).forEach(name => clone.style.setProperty(name, source.style.getPropertyValue(name), source.style.getPropertyPriority(name)));
+          }
+          const children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          [...clone.children].forEach((child, i) => { if (children[i]) restoreMargins(children[i], child); });
+        };
+        // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
+        const fontFiles = new Map();
+        const fontRules = await Promise.all([...document.styleSheets].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;
+        };
+        const blob = await domToBlob(poster, {
+          scale: 2, style: { margin: '0' },
+          font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
+          onCloneNode: clone => {
+            restoreMargins(poster, clone);
+            const style = document.createElement('style');
+            style.textContent = margins;
+            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();
+      } catch (cause) {
+        exporter = null;
+        retries++;
+        error.textContent = 'The PNG could not be saved. Check your connection and try again.';
+        error.hidden = false;
+      } finally {
+        if (url) setTimeout(() => URL.revokeObjectURL(url), 60000);
+        busy = false;
+        button.removeAttribute('aria-disabled');
+        button.removeAttribute('aria-busy');
+        button.setAttribute('aria-label', 'Download poster as PNG');
+      }
+    });
+    tools.append(button);
+  });
+}
+// A chart module may await fonts or data after DOMContentLoaded has already fired.
+if (document.querySelector('.poster')) addPosterDownloads();
+else {
+  const observer = new MutationObserver(() => {
+    if (!document.querySelector('.poster')) return;
+    observer.disconnect();
+    addPosterDownloads();
+  });
+  observer.observe(document.getElementById('chart') || document.body, { childList: true, subtree: true });
+}
+</script>
 </body>
 </html>

package/skill/recipes/box-plot.html

@@ -162,5 +162,204 @@ function CommuteTimes() {
 
 render(() => html`<${CommuteTimes} />`, 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-download { 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-download svg { display: block; width: 20px; height: 20px; }
+  .poster-download:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
+  .poster-download:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+  .poster-download[aria-disabled="true"] { cursor: progress; opacity: .5; }
+  .poster-download-error { margin: 8px auto; font: 14px/1.4 system-ui, sans-serif; color: inherit; }
+  @media print { .poster-download-tools, .poster-download, .poster-download-error { display: none !important; } }
+</style>
+<script type="module" id="poster-download-script">
+function addPosterDownloads() {
+  document.querySelectorAll('.poster').forEach((poster, index) => {
+    const navigation = index === 0 && document.querySelector('.recipe-navigation');
+    const tools = navigation || document.createElement('div');
+    if (tools.querySelector('.poster-download')) return;
+    if (!navigation) {
+      tools.className = 'poster-download-tools';
+      poster.before(tools);
+      const align = () => { tools.style.width = `${poster.getBoundingClientRect().width}px`; };
+      new ResizeObserver(align).observe(poster);
+      align();
+      const rgb = getComputedStyle(document.body).backgroundColor.match(/[\d.]+/g);
+      if (rgb) {
+        const light = rgb.slice(0, 3).map(Number).map(v => {
+          v /= 255;
+          return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+        });
+        tools.style.color = light[0] * .2126 + light[1] * .7152 + light[2] * .0722 < .179 ? '#eef2f5' : '#1d1b17';
+      }
+    }
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'poster-download';
+    button.setAttribute('aria-label', 'Download poster as PNG');
+    button.title = 'Download poster as PNG';
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m-5-5 5 5 5-5M5 16v4h14v-4"/></svg>';
+    const error = document.createElement('p');
+    error.className = 'poster-download-error';
+    error.setAttribute('role', 'alert');
+    error.hidden = true;
+    tools.after(error);
+    // Download is part of the poster interaction, even though its control sits outside the image.
+    button.addEventListener('pointerdown', event => {
+      event.stopPropagation();
+    });
+    button.addEventListener('mousedown', event => {
+      event.stopPropagation();
+    });
+    poster.addEventListener('focusout', event => {
+      if (button.contains(event.relatedTarget) || button.matches(':active')) event.stopImmediatePropagation();
+    }, true);
+    poster.addEventListener('pointerleave', event => {
+      if (button.contains(event.relatedTarget) || document.activeElement === button) event.stopImmediatePropagation();
+    }, true);
+    for (const type of ['keydown', 'keyup']) button.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;
+      busy = true;
+      button.setAttribute('aria-disabled', 'true');
+      button.setAttribute('aria-busy', 'true');
+      button.setAttribute('aria-label', 'Preparing poster PNG');
+      error.hidden = true;
+      let url;
+      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;
+        // Grid auto margins resolve to zero in getComputedStyle, so keep their author rules.
+        const autoMargins = new Set();
+        const marginRules = rules => [...rules].map(rule => {
+          if (rule.selectorText && rule.style) {
+            const margins = [...rule.style].filter(name => name === 'margin' || name.startsWith('margin-'));
+            if (margins.some(name => /\bauto\b/.test(rule.style.getPropertyValue(name)))) autoMargins.add(rule.selectorText);
+            return margins.length ? `${rule.selectorText} { ${margins.map(name => `${name}: ${rule.style.getPropertyValue(name)}${rule.style.getPropertyPriority(name) ? ' !important' : ''};`).join(' ')} }` : '';
+          }
+          if (!rule.cssRules) return '';
+          if (rule instanceof CSSMediaRule) return matchMedia(rule.conditionText).matches ? marginRules(rule.cssRules) : '';
+          if (rule instanceof CSSSupportsRule) return CSS.supports(rule.conditionText) ? marginRules(rule.cssRules) : '';
+          return rule.cssText.slice(0, rule.cssText.indexOf('{') + 1) + marginRules(rule.cssRules) + '}';
+        }).join('\n');
+        const margins = [...document.styleSheets].map(sheet => {
+          try { return marginRules(sheet.cssRules); } catch (cause) { return ''; }
+        }).join('\n');
+        const restoreMargins = (source, clone) => {
+          if (clone.style && source !== poster && [...autoMargins].some(selector => source.matches(selector))) {
+            [...clone.style].filter(name => name === 'margin' || name.startsWith('margin-')).forEach(name => clone.style.removeProperty(name));
+            [...source.style].filter(name => name === 'margin' || name.startsWith('margin-')).forEach(name => clone.style.setProperty(name, source.style.getPropertyValue(name), source.style.getPropertyPriority(name)));
+          }
+          const children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          [...clone.children].forEach((child, i) => { if (children[i]) restoreMargins(children[i], child); });
+        };
+        // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
+        const fontFiles = new Map();
+        const fontRules = await Promise.all([...document.styleSheets].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;
+        };
+        const blob = await domToBlob(poster, {
+          scale: 2, style: { margin: '0' },
+          font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
+          onCloneNode: clone => {
+            restoreMargins(poster, clone);
+            const style = document.createElement('style');
+            style.textContent = margins;
+            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();
+      } catch (cause) {
+        exporter = null;
+        retries++;
+        error.textContent = 'The PNG could not be saved. Check your connection and try again.';
+        error.hidden = false;
+      } finally {
+        if (url) setTimeout(() => URL.revokeObjectURL(url), 60000);
+        busy = false;
+        button.removeAttribute('aria-disabled');
+        button.removeAttribute('aria-busy');
+        button.setAttribute('aria-label', 'Download poster as PNG');
+      }
+    });
+    tools.append(button);
+  });
+}
+// A chart module may await fonts or data after DOMContentLoaded has already fired.
+if (document.querySelector('.poster')) addPosterDownloads();
+else {
+  const observer = new MutationObserver(() => {
+    if (!document.querySelector('.poster')) return;
+    observer.disconnect();
+    addPosterDownloads();
+  });
+  observer.observe(document.getElementById('chart') || document.body, { childList: true, subtree: true });
+}
+</script>
 </body>
 </html>