@bezda/rhp-mcp 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bezda/rhp-mcp",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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",
@@ -44,11 +44,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "node scripts/build.js",
-    "prepack": "npm run build",
-    "test": "node test/network.js && node test/settle-regression.js && node test/isolation.js && node test/selection-regression.js && node test/mcp.js && node test/run.js"
-  },
   "dependencies": {
     "@babel/core": "^7.29.7",
     "@bezda/rhp": "^2.0.5",

package/skill/recipes/area.html

@@ -199,6 +199,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 => {
@@ -240,12 +242,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.
@@ -301,7 +305,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/bar.html

@@ -190,6 +190,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 => {
@@ -231,12 +233,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.
@@ -292,7 +296,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/box-plot.html

@@ -209,6 +209,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 => {
@@ -250,12 +252,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.
@@ -311,7 +315,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/bubble.html

@@ -231,6 +231,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 => {
@@ -272,12 +274,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.
@@ -333,7 +337,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/bullet.html

@@ -181,6 +181,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 => {
@@ -222,12 +224,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.
@@ -283,7 +287,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/candlestick.html

@@ -224,6 +224,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 => {
@@ -265,12 +267,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.
@@ -326,7 +330,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/column.html

@@ -181,6 +181,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 => {
@@ -222,12 +224,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.
@@ -283,7 +287,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/dial.html

@@ -392,6 +392,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 => {
@@ -433,12 +435,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.
@@ -494,7 +498,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/diverging-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/donut.html

@@ -276,6 +276,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 => {
@@ -317,12 +319,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.
@@ -378,7 +382,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/dumbbell.html

@@ -180,6 +180,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 => {
@@ -221,12 +223,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.
@@ -282,7 +286,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/gantt.html

@@ -241,6 +241,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 => {
@@ -282,12 +284,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.
@@ -343,7 +347,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/grouped-bars.html

@@ -185,6 +185,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 => {
@@ -226,12 +228,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.
@@ -287,7 +291,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/heatmap.html

@@ -228,6 +228,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 => {
@@ -269,12 +271,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.
@@ -330,7 +334,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/histogram.html

@@ -244,6 +244,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 => {
@@ -285,12 +287,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.
@@ -346,7 +350,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/line.html

@@ -213,6 +213,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 => {
@@ -254,12 +256,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.
@@ -315,7 +319,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/live.html

@@ -298,6 +298,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 => {
@@ -339,12 +341,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.
@@ -400,7 +404,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);