@bezda/rhp-mcp 0.1.5 → 0.1.7

package/skill/recipes/waffle.html

@@ -163,24 +163,84 @@ render(() => html`<${BloodTypes} />`, 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-actions { 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); }
+  .poster-actions button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+  .poster-actions button[aria-disabled="true"] { cursor: progress; opacity: .5; }
+  .poster-fit-frame, .poster-fit-content { display: contents; }
+  .poster-fit-frame { max-height: 95svh; }
+  .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-download, .poster-download-error { display: none !important; } }
+  @media print { .poster-download-tools, .poster-actions, .poster-download-error { display: none !important; } }
 </style>
 <script type="module" id="poster-download-script">
+function addPosterFit(poster, button, changed) {
+  const frame = document.createElement('div'), content = document.createElement('div');
+  frame.className = 'poster-fit-frame'; content.className = 'poster-fit-content';
+  poster.before(frame); frame.append(content); content.append(poster);
+  const properties = ['width', 'max-width', 'margin', 'box-sizing'];
+  const original = properties.map(name => [name, poster.style.getPropertyValue(name), poster.style.getPropertyPriority(name)]);
+  let fitted = false, scale = 1, request = 0, layout = null;
+  const availableHeight = () => parseFloat(getComputedStyle(frame).maxHeight) || innerHeight * .95;
+  const layoutKey = () => {
+    const css = getComputedStyle(poster);
+    return [innerWidth, availableHeight(), css.width, css.height].join('/');
+  };
+  const restore = () => original.forEach(([name, value, priority]) => {
+    if (value) poster.style.setProperty(name, value, priority);
+    else poster.style.removeProperty(name);
+  });
+  function update() {
+    request = 0;
+    if (fitted && layout === layoutKey()) return;
+    frame.classList.remove('is-fitted'); frame.style.width = ''; frame.style.height = '';
+    content.style.width = ''; content.style.transform = ''; restore(); scale = 1;
+    if (fitted) {
+      const box = poster.getBoundingClientRect();
+      scale = Math.min(1, availableHeight() / box.height);
+      poster.style.setProperty('box-sizing', 'border-box');
+      poster.style.setProperty('width', `${box.width}px`);
+      poster.style.setProperty('max-width', 'none');
+      poster.style.setProperty('margin', '0');
+      content.style.width = `${box.width}px`;
+      content.style.transform = `scale(${scale})`;
+      frame.style.width = `${box.width * scale}px`; frame.style.height = `${box.height * scale}px`;
+      frame.classList.add('is-fitted');
+    }
+    layout = layoutKey();
+    const label = fitted ? 'Restore poster size' : 'Fit poster to screen';
+    button.setAttribute('aria-label', label); button.title = label;
+    button.setAttribute('aria-pressed', String(fitted));
+    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="${fitted ? 'M15 3h6v6m0-6-7 7M9 21H3v-6m0 6 7-7' : 'M4 4l6 6m0-6v6H4m16 10-6-6m0 6v-6h6'}"/></svg>`;
+    changed();
+    poster.dispatchEvent(new Event('poster-view-change'));
+  }
+  const schedule = () => { if (fitted && !request && layout !== layoutKey()) request = requestAnimationFrame(update); };
+  new ResizeObserver(schedule).observe(poster);
+  addEventListener('resize', schedule);
+  document.fonts.ready.then(schedule);
+  update();
+  return {
+    toggle() { fitted = !fitted; layout = null; cancelAnimationFrame(request); update(); },
+    dimensions() {
+      if (!fitted) { const box = poster.getBoundingClientRect(); return {width:box.width,height:box.height}; }
+      const css = getComputedStyle(poster);
+      return {width:parseFloat(css.width),height:parseFloat(css.height)};
+    },
+  };
+}
 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;
+    const align = () => { if (!navigation) tools.style.width = `${poster.getBoundingClientRect().width}px`; };
     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);
@@ -198,27 +258,43 @@ function addPosterDownloads() {
     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 actions = document.createElement('div'), fitButton = document.createElement('button');
+    actions.className = 'poster-actions'; fitButton.className = 'poster-fit-toggle'; fitButton.type = 'button';
+    if (!poster.id) {
+      let id = `rhp-poster-${index + 1}`;
+      while (document.getElementById(id)) id += '-view';
+      poster.id = id;
+    }
+    fitButton.setAttribute('aria-controls', poster.id);
+    fitButton.setAttribute('data-poster-view-toggle', '');
+    const fit = addPosterFit(poster, fitButton, align);
+    fitButton.addEventListener('click', event => { event.stopPropagation(); if (!busy) fit.toggle(); });
+    actions.append(fitButton, button);
     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 => {
+    actions.addEventListener('pointerdown', event => {
       event.stopPropagation();
     });
-    button.addEventListener('mousedown', event => {
+    actions.addEventListener('mousedown', event => {
       // Pointer activation downloads without taking focus from the selected chart item.
       event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
-      if (button.contains(event.relatedTarget) || button.matches(':active')) event.stopImmediatePropagation();
+      if (actions.contains(event.relatedTarget) || actions.querySelector(':active')) event.stopImmediatePropagation();
     }, true);
     poster.addEventListener('pointerleave', event => {
-      if (button.contains(event.relatedTarget) || document.activeElement === button) event.stopImmediatePropagation();
+      if (actions.contains(event.relatedTarget) || actions.contains(document.activeElement)) event.stopImmediatePropagation();
     }, true);
-    for (const type of ['keydown', 'keyup']) button.addEventListener(type, event => {
+    poster.addEventListener('pointermove', event => {
+      // Safari can move the pointer over the title while a keyboard-triggered download is being prepared.
+      if (actions.contains(document.activeElement) && !event.target.closest('.rhp-chart')) event.stopImmediatePropagation();
+    }, true);
+    for (const type of ['keydown', 'keyup']) actions.addEventListener(type, event => {
       if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
     });
     let exporter, retries = 0, busy = false;
@@ -228,6 +304,7 @@ function addPosterDownloads() {
       busy = true;
       button.setAttribute('aria-disabled', 'true');
       button.setAttribute('aria-busy', 'true');
+      fitButton.setAttribute('aria-disabled', 'true');
       button.setAttribute('aria-label', 'Preparing poster PNG');
       error.hidden = true;
       let url;
@@ -235,35 +312,53 @@ function addPosterDownloads() {
         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 => {
+        // 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(name => name === 'margin' || name.startsWith('margin-'));
+            const margins = [...rule.style].filter(isMargin);
             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(' ')} }` : '';
+            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 '';
-          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) + '}';
+          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 margins = [...document.styleSheets].map(sheet => {
-          try { return marginRules(sheet.cssRules); } catch (cause) { return ''; }
+        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 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 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]) restoreMargins(children[i], child); });
+          [...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([...document.styleSheets].map(async sheet => {
+        const fontRules = await Promise.all(sheets.map(async sheet => {
           let css;
           try { css = [...sheet.cssRules].map(rule => rule.cssText).join('\n'); }
           catch (cause) {
@@ -314,12 +409,12 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' }, filter: includeNode,
+          ...fit.dimensions(), scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
-            restoreMargins(poster, clone);
+            restoreLayout(poster, clone);
             const style = document.createElement('style');
-            style.textContent = margins;
+            style.textContent = layout;
             clone.prepend(style);
           },
           // CSS content's alternative text follows a slash and must not be painted.
@@ -347,10 +442,11 @@ function addPosterDownloads() {
         busy = false;
         button.removeAttribute('aria-disabled');
         button.removeAttribute('aria-busy');
+        fitButton.removeAttribute('aria-disabled');
         button.setAttribute('aria-label', 'Download poster as PNG');
       }
     });
-    tools.append(button);
+    tools.append(actions);
   });
 }
 // A chart module may await fonts or data after DOMContentLoaded has already fired.

package/skill/recipes/waterfall.html

@@ -125,24 +125,84 @@ render(() => html`<${ProfitBridge} />`, 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-actions { 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); }
+  .poster-actions button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+  .poster-actions button[aria-disabled="true"] { cursor: progress; opacity: .5; }
+  .poster-fit-frame, .poster-fit-content { display: contents; }
+  .poster-fit-frame { max-height: 95svh; }
+  .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-download, .poster-download-error { display: none !important; } }
+  @media print { .poster-download-tools, .poster-actions, .poster-download-error { display: none !important; } }
 </style>
 <script type="module" id="poster-download-script">
+function addPosterFit(poster, button, changed) {
+  const frame = document.createElement('div'), content = document.createElement('div');
+  frame.className = 'poster-fit-frame'; content.className = 'poster-fit-content';
+  poster.before(frame); frame.append(content); content.append(poster);
+  const properties = ['width', 'max-width', 'margin', 'box-sizing'];
+  const original = properties.map(name => [name, poster.style.getPropertyValue(name), poster.style.getPropertyPriority(name)]);
+  let fitted = false, scale = 1, request = 0, layout = null;
+  const availableHeight = () => parseFloat(getComputedStyle(frame).maxHeight) || innerHeight * .95;
+  const layoutKey = () => {
+    const css = getComputedStyle(poster);
+    return [innerWidth, availableHeight(), css.width, css.height].join('/');
+  };
+  const restore = () => original.forEach(([name, value, priority]) => {
+    if (value) poster.style.setProperty(name, value, priority);
+    else poster.style.removeProperty(name);
+  });
+  function update() {
+    request = 0;
+    if (fitted && layout === layoutKey()) return;
+    frame.classList.remove('is-fitted'); frame.style.width = ''; frame.style.height = '';
+    content.style.width = ''; content.style.transform = ''; restore(); scale = 1;
+    if (fitted) {
+      const box = poster.getBoundingClientRect();
+      scale = Math.min(1, availableHeight() / box.height);
+      poster.style.setProperty('box-sizing', 'border-box');
+      poster.style.setProperty('width', `${box.width}px`);
+      poster.style.setProperty('max-width', 'none');
+      poster.style.setProperty('margin', '0');
+      content.style.width = `${box.width}px`;
+      content.style.transform = `scale(${scale})`;
+      frame.style.width = `${box.width * scale}px`; frame.style.height = `${box.height * scale}px`;
+      frame.classList.add('is-fitted');
+    }
+    layout = layoutKey();
+    const label = fitted ? 'Restore poster size' : 'Fit poster to screen';
+    button.setAttribute('aria-label', label); button.title = label;
+    button.setAttribute('aria-pressed', String(fitted));
+    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="${fitted ? 'M15 3h6v6m0-6-7 7M9 21H3v-6m0 6 7-7' : 'M4 4l6 6m0-6v6H4m16 10-6-6m0 6v-6h6'}"/></svg>`;
+    changed();
+    poster.dispatchEvent(new Event('poster-view-change'));
+  }
+  const schedule = () => { if (fitted && !request && layout !== layoutKey()) request = requestAnimationFrame(update); };
+  new ResizeObserver(schedule).observe(poster);
+  addEventListener('resize', schedule);
+  document.fonts.ready.then(schedule);
+  update();
+  return {
+    toggle() { fitted = !fitted; layout = null; cancelAnimationFrame(request); update(); },
+    dimensions() {
+      if (!fitted) { const box = poster.getBoundingClientRect(); return {width:box.width,height:box.height}; }
+      const css = getComputedStyle(poster);
+      return {width:parseFloat(css.width),height:parseFloat(css.height)};
+    },
+  };
+}
 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;
+    const align = () => { if (!navigation) tools.style.width = `${poster.getBoundingClientRect().width}px`; };
     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);
@@ -160,27 +220,43 @@ function addPosterDownloads() {
     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 actions = document.createElement('div'), fitButton = document.createElement('button');
+    actions.className = 'poster-actions'; fitButton.className = 'poster-fit-toggle'; fitButton.type = 'button';
+    if (!poster.id) {
+      let id = `rhp-poster-${index + 1}`;
+      while (document.getElementById(id)) id += '-view';
+      poster.id = id;
+    }
+    fitButton.setAttribute('aria-controls', poster.id);
+    fitButton.setAttribute('data-poster-view-toggle', '');
+    const fit = addPosterFit(poster, fitButton, align);
+    fitButton.addEventListener('click', event => { event.stopPropagation(); if (!busy) fit.toggle(); });
+    actions.append(fitButton, button);
     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 => {
+    actions.addEventListener('pointerdown', event => {
       event.stopPropagation();
     });
-    button.addEventListener('mousedown', event => {
+    actions.addEventListener('mousedown', event => {
       // Pointer activation downloads without taking focus from the selected chart item.
       event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
-      if (button.contains(event.relatedTarget) || button.matches(':active')) event.stopImmediatePropagation();
+      if (actions.contains(event.relatedTarget) || actions.querySelector(':active')) event.stopImmediatePropagation();
     }, true);
     poster.addEventListener('pointerleave', event => {
-      if (button.contains(event.relatedTarget) || document.activeElement === button) event.stopImmediatePropagation();
+      if (actions.contains(event.relatedTarget) || actions.contains(document.activeElement)) event.stopImmediatePropagation();
+    }, true);
+    poster.addEventListener('pointermove', event => {
+      // Safari can move the pointer over the title while a keyboard-triggered download is being prepared.
+      if (actions.contains(document.activeElement) && !event.target.closest('.rhp-chart')) event.stopImmediatePropagation();
     }, true);
-    for (const type of ['keydown', 'keyup']) button.addEventListener(type, event => {
+    for (const type of ['keydown', 'keyup']) actions.addEventListener(type, event => {
       if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
     });
     let exporter, retries = 0, busy = false;
@@ -190,6 +266,7 @@ function addPosterDownloads() {
       busy = true;
       button.setAttribute('aria-disabled', 'true');
       button.setAttribute('aria-busy', 'true');
+      fitButton.setAttribute('aria-disabled', 'true');
       button.setAttribute('aria-label', 'Preparing poster PNG');
       error.hidden = true;
       let url;
@@ -197,35 +274,53 @@ function addPosterDownloads() {
         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 => {
+        // 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(name => name === 'margin' || name.startsWith('margin-'));
+            const margins = [...rule.style].filter(isMargin);
             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(' ')} }` : '';
+            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 '';
-          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) + '}';
+          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 margins = [...document.styleSheets].map(sheet => {
-          try { return marginRules(sheet.cssRules); } catch (cause) { return ''; }
+        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 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 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]) restoreMargins(children[i], child); });
+          [...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([...document.styleSheets].map(async sheet => {
+        const fontRules = await Promise.all(sheets.map(async sheet => {
           let css;
           try { css = [...sheet.cssRules].map(rule => rule.cssText).join('\n'); }
           catch (cause) {
@@ -276,12 +371,12 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' }, filter: includeNode,
+          ...fit.dimensions(), scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
-            restoreMargins(poster, clone);
+            restoreLayout(poster, clone);
             const style = document.createElement('style');
-            style.textContent = margins;
+            style.textContent = layout;
             clone.prepend(style);
           },
           // CSS content's alternative text follows a slash and must not be painted.
@@ -309,10 +404,11 @@ function addPosterDownloads() {
         busy = false;
         button.removeAttribute('aria-disabled');
         button.removeAttribute('aria-busy');
+        fitButton.removeAttribute('aria-disabled');
         button.setAttribute('aria-label', 'Download poster as PNG');
       }
     });
-    tools.append(button);
+    tools.append(actions);
   });
 }
 // A chart module may await fonts or data after DOMContentLoaded has already fired.

package/skill/references/api.md

@@ -42,7 +42,7 @@ Both `@bezda/rhp` and `@bezda/rhp/standalone` export rhp's whole API:
 
 - components: `Chart`, `Plot`, `Scale`, `Axis`, `Theme`, `Poster`
 - blocks: `Bar`, `Dot`, `Tick`, `Label`, `Cell`, `Place`, `Area`, `Line`
-- experimental point collection: [`ManyDots`](#manydots-experimental-point-collection), in builds of this repository that export it
+- experimental point collection: [`ManyDots`](#manydots-experimental-point-collection), in rhp 2.0.3 and later
 - functions: `slat`, `restyle`, `linkedCss`, `shape`, `at`, `useOrientation`, `series`, `cycle`, `sortBy`, `extent`, `every`, `nice`, `stackUp`, `shares`, `running`, `summary`, `bins`, `density`, `animated`, `curve`, `drawing`
 - the object `THEME` (the default theme)
 
@@ -661,10 +661,10 @@ render(ChangeChart, document.getElementById("chart"));
 ### ManyDots (experimental point collection)
 
 `ManyDots` draws a bulk collection of points directly inside a `Chart` with `scale` and `cross`.
-It is part of the upcoming npm 2.0.3 release.
+It is in rhp 2.0.3 and later, from npm and from the `@2` CDN URL.
 It is a collection rather than a block in a slat, so do not wrap it in a `Plot` or supply a slat function.
-Use a repository build that exports `ManyDots`; the version-2 CDN URL in the page skeleton does not guarantee this experimental API is available.
-Both package entry points export it in that build, and Solid users can import `ManyDotsProps<T>` and `ManyDotsValue<T, V>` for its types.
+It is experimental: its API may still change.
+Both package entry points export it, and Solid users can import `ManyDotsProps<T>` and `ManyDotsValue<T, V>` for its types.
 
 Choose it explicitly for bulk HTML points, or keep `Dot` for individual blocks, rich point content, and Plot behavior at any point count.
 Neither component switches into the other automatically, including at 500 points.
@@ -1601,8 +1601,8 @@ Every one of these was found by running rhp 2.0.1.
 4. **Use style objects on Chart, Plot and a slat's root.**
    `style="pointer-events: none"` on a Plot or Chart is dropped without a message; write `style=${{ "pointer-events": "none" }}`.
    On a slat's root, a string that changes or a style that becomes `undefined` replaces the whole style attribute and erases the stack position, so keep it an object.
-   Published rhp 2.0.2 has the same problem on Blocks: a Bar can disappear and SVG geometry can be lost, so use `style=${() => ({ "--n": d.n })}` there too.
-   Current source fixes the Block replacement bug for the upcoming 2.0.3 release; Blocks then retain their geometry when strings change or style is removed.
+   rhp 2.0.2 has the same problem on Blocks: a Bar can disappear and SVG geometry can be lost, so use `style=${() => ({ "--n": d.n })}` there too.
+   rhp 2.0.3 fixed it: Blocks keep their geometry when strings change or style is removed.
    Plain children that hold no rhp geometry can use changing strings.
 5. **`className` breaks a block.**
    It replaces rhp's class, so the block is no longer drawn.

package/skill/references/design.md

@@ -537,6 +537,24 @@ At 390px:
   Use an ellipsis only when the full name is in the slat's `aria-label` and in the readout.
 - `room: { start: "auto" }` sizes the names' room to the longest name, up to `--rhp-gutter-max` (40% of the chart).
 
+### Fit the label gutters
+
+For a poster row containing one main plot, usually fit whichever side gutters contain labels to the text that actually occupies them, so the plot uses the remaining width.
+This helps smaller screens and keeps the outer labels aligned with the caption, controls, readout and footer throughout the poster.
+Treat this as a design preference and let the intended composition take priority, including deliberate spacing or different alignments.
+The poster's own padding supplies the outer margins; do not add a second empty buffer past the labels unless the design calls for one.
+
+- Prefer `room: { start: "auto", end: "auto" }` when the labels are direct edge Labels, or use "auto" only on the side that needs it.
+- Labels anchored with `at` are not measured by "auto".
+  Measure their rendered sizes and pass reactive pixel values to the appropriate `room` sides instead of choosing fixed desktop and phone guesses.
+- Measure after fonts load and when text, font size, wrapping or stacking changes, including gradual changes between breakpoints.
+  Keep each label's box tight to its content so an unnecessarily wide wrapper does not become empty gutter space.
+- Include the clearance between a point and its label, but account for a point sitting inside the scale's end so that inset is not reserved twice.
+  The outermost text should reach the poster's content edge without crossing it.
+- Use natural layout sizes, such as `ResizeObserver` border-box sizes, so fitting or zooming the poster does not alter its gutters.
+  Schedule size updates in an animation frame outside ResizeObserver delivery to avoid resize loops.
+- Check both label layouts and the widths between breakpoints, then fit the poster and verify that its labels, marks and PNG export keep the same alignment.
+
 How many slats:
 
 - Horizontal slats of 28 to 50px; up to about 15 read at a glance, about 30 at 22px each.