@bezda/rhp-mcp 0.1.4 → 0.1.5

package/skill/recipes/log-line.html

@@ -536,6 +536,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -577,12 +579,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -638,7 +642,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/lollipop.html

@@ -195,6 +195,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -236,12 +238,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -297,7 +301,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/multi-line.html

@@ -271,6 +271,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -312,12 +314,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -373,7 +377,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/pyramid.html

@@ -207,6 +207,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -248,12 +250,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -309,7 +313,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/race.html

@@ -321,6 +321,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -362,12 +364,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -423,7 +427,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/radial-bars.html

@@ -200,6 +200,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -241,12 +243,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -302,7 +306,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/scatter.html

@@ -255,6 +255,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -296,12 +298,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -357,7 +361,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/silhouettes.html

@@ -397,6 +397,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -438,12 +440,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -499,7 +503,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/slope.html

@@ -255,6 +255,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -296,12 +298,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -357,7 +361,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/sparklines.html

@@ -218,6 +218,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -259,12 +261,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -320,7 +324,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/stacked-100.html

@@ -201,6 +201,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -242,12 +244,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -303,7 +307,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/stacked-bars.html

@@ -193,6 +193,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -234,12 +236,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -295,7 +299,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/strip.html

@@ -266,6 +266,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -307,12 +309,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -368,7 +372,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/unit-stack.html

@@ -319,6 +319,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -360,12 +362,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -421,7 +425,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/violin.html

@@ -212,6 +212,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -253,12 +255,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -314,7 +318,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/waffle.html

@@ -208,6 +208,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -249,12 +251,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -310,7 +314,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/recipes/waterfall.html

@@ -170,6 +170,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -211,12 +213,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -272,7 +276,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);

package/skill/references/download.md

@@ -58,6 +58,8 @@ function addPosterDownloads() {
       event.stopPropagation();
     });
     button.addEventListener('mousedown', event => {
+      // Pointer activation downloads without taking focus from the selected chart item.
+      event.preventDefault();
       event.stopPropagation();
     });
     poster.addEventListener('focusout', event => {
@@ -99,12 +101,14 @@ function addPosterDownloads() {
         const margins = [...document.styleSheets].map(sheet => {
           try { return marginRules(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 children = [...source.children].filter(node => !['STYLE', 'SCRIPT'].includes(node.tagName));
+          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); });
         };
         // Cross-origin font stylesheets are readable through fetch, but not through cssRules.
@@ -160,7 +164,7 @@ function addPosterDownloads() {
           node.style.backgroundImage = background;
         };
         const blob = await domToBlob(poster, {
-          scale: 2, style: { margin: '0' },
+          scale: 2, style: { margin: '0' }, filter: includeNode,
           font: { cssText: fontRules.join('\n') }, onCloneEachNode: embedTexture,
           onCloneNode: clone => {
             restoreMargins(poster, clone);