@bezda/rhp-mcp 0.1.1 → 0.1.2

package/README.md

@@ -173,13 +173,27 @@ npx -y @bezda/rhp-mcp install-browser
 It downloads Chromium's headless shell into Playwright's usual folder and leaves the other browsers there alone.
 Other options go to Playwright's installer: on Linux, `install-browser --with-deps` also installs the system libraries the browser needs.
 
-## Nothing leaves your machine
+## Local checking
 
-The checker renders your chart in a browser on your machine, and your chart's code and screenshots stay there.
+The checker renders your chart in a browser on your machine and does not upload its source or screenshots.
 It answers the page's requests for `@bezda/rhp` from the copy of rhp it ships with.
 The only other requests are the ones your chart's page makes itself, such as its Google Fonts, and each gets 5 seconds before the check goes on without it.
 There is no telemetry.
 
+The checker treats the chart's page as code it did not write, and gives it only what a chart needs to render:
+
+- It permits public HTTP GET, HEAD and OPTIONS requests for assets and data, without forwarding request bodies; POST and other methods are blocked.
+  WebSockets are blocked because they can send arbitrary messages.
+  This is not a guarantee against data sent in a public URL or its headers.
+- It reaches public addresses only: never this machine (`localhost`), your network or a cloud's metadata service, including through a redirect or a DNS answer.
+  Remote responses have a 5-second overall deadline across redirects and a 64 MB size limit, including decompressed content.
+  A rejecting local proxy blocks browser connections that bypass the asset router, including worker sockets.
+- It reads the files next to the chart and in folders under it, but not hidden ones (`.env`, `.git`) and nothing outside the chart's folder, including through symlinks.
+  These restrictions apply to standalone HTML pages and bundled charts.
+- The browser runs with Chromium's sandbox on (without it only where it cannot start, as in some Linux containers), with no service workers and no downloads.
+
+A request the checker refuses is reported in the check, and the check goes on without it.
+
 ## For maintainers
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bezda/rhp-mcp",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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",
@@ -47,11 +47,11 @@
   "scripts": {
     "build": "node scripts/build.js",
     "prepack": "npm run build",
-    "test": "node test/settle-regression.js && node test/mcp.js && node test/run.js"
+    "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.3",
+    "@bezda/rhp": "^2.0.4",
     "@modelcontextprotocol/sdk": "^1.32.0",
     "babel-preset-solid": "^1.9.15",
     "esbuild": "^0.28.2",

package/skill/SKILL.md

@@ -350,13 +350,15 @@ function FruitChart() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setOn(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster}
       kicker="Market stall, Saturday"
       title="Bananas outsell everything else"
       dek=${() => (on() == null ? "Crates sold by midday. Tap or point at a fruit." : `${fruit[on()]}: ${sold[on()]} crates by midday.`)}
       note="Illustrative data."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setOn(null)}>
       <${Chart} scale=${[scale.min, scale.max]} ticks=${scale.ticks} label="Crates of fruit sold by midday"
         theme=${{ font: "Inter, system-ui, sans-serif", ink: "#1f1a14", muted: "#6f665a", grid: "#e6dfd2" }}>
@@ -442,6 +444,7 @@ Read the ones the chart needs; each is self-contained.
 - [design.md](references/design.md): art direction from the subject (idea, marks, composition, palette, type), the poster, color, type, layout, annotation, charts inside an app, a style the user asks for.
 - [looks.md](references/looks.md): eight looks written out in full (tokens, fonts, texture, type), as examples of how a look is written, not a menu.
 - [interaction.md](references/interaction.md): which interaction for which story, with complete code for each.
+- [performance.md](references/performance.md): measured optimizations for an expensive chart, preserving its slats, styling, state, and interactions.
 - [environments.md](references/environments.md): plain HTML, Solid, Astro, React, Next.js, Vue, Svelte and Angular, each verified, and the html template to JSX rules.
 - [api.md](references/api.md): every component, prop, helper and CSS variable, exactly.
 - [pitfalls.md](references/pitfalls.md): mistakes and their fixes.

package/skill/recipes/bar.html

@@ -118,13 +118,15 @@ function SpokenLanguages() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster}
       kicker="The world's languages"
       title=${html`<em>English</em> is the world's most spoken language`}
       dek="Total speakers in millions, counting everyone who speaks it as a first or a second language. Mandarin has more native speakers; English has more learners. Tap or point at a language."
       note="Source: Ethnologue, 2023 (speakers); United Nations, 2023 (world population, 8.05 billion)."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <p class="readout" aria-live="polite">
         <b>${() => percent.format(LANGUAGES[lit()].millions / WORLD)}</b>

package/skill/recipes/box-plot.html

@@ -132,13 +132,15 @@ function CommuteTimes() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster}
       kicker="Commute times, door to door"
       title="Bikes beat cars, and keep to time"
       dek=${`One-way commutes timed over a month, ${MODES.reduce((n, m) => n + m.trips, 0)} trips in all. A cyclist's trips stay within a few minutes of each other; a driver's can take twice as long on a bad day. Tap or point at a mode for its numbers.`}
       note="Illustrative data."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <ul class="key">
         <li><i class="box"></i>Middle half of trips</li>

package/skill/recipes/candlestick.html

@@ -149,13 +149,15 @@ function SharePrice() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster}
       kicker="Share price · March 2026"
       title="A 15% drop on earnings day erased the month's gains"
       dek="Each candle is a trading day. Its body runs from the opening price to the closing price, hollow when the price rose and filled when it fell; its wick spans the day's low to its high."
       note="Illustrative data. Point at a day, tap it, or Tab into the chart and use the arrow keys."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <p class="ticker">
         <b>${() => day.format(new Date(shown().date))}</b>

package/skill/recipes/dial.html

@@ -85,7 +85,7 @@
   .key ul { margin: 0; padding: 0; list-style: none; }
   .key li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 15px; line-height: 1.35; cursor: default; }
   .key li i { align-self: center; width: 16px; height: 7px; border-radius: 2px; background: var(--quiet); }
-  .key li b { font: 600 15px/1.35 var(--display); font-stretch: 108%; font-variant-numeric: tabular-nums; }
+  .key li b { font: 600 15px/1.35 var(--display); font-stretch: 108%; font-variant-numeric: tabular-nums; white-space: nowrap; }
   .key li.on { color: var(--accent); }
   .key li.on i { background: var(--accent); }
 
@@ -131,7 +131,7 @@ const DAY = [
   { group: 2, name: "Shopping and errands", short: "Errands", hours: 0.69 },
   { group: 2, name: "Caring for others", short: "Care", hours: 0.64 }, // household members (0.49) and others (0.15)
   { group: 3, name: "Watching TV", short: "TV", hours: 2.61 },
-  { group: 3, name: "Reading, games and other leisure", short: "Leisure", hours: 1.63 }, // leisure (5.16) less the three around it
+  { group: 3, name: "Reading, games and leisure", short: "Leisure", hours: 1.63 }, // leisure (5.16) less the three around it
   { group: 3, name: "Socializing", short: "Social", hours: 0.58 },
   { group: 3, name: "Sports and exercise", short: "Sport", hours: 0.34 },
   { group: 4, name: "Worship, volunteering, calls, mail and other", short: "Other", hours: 0.74 }, // 0.28 + 0.19 + 0.27

package/skill/recipes/donut.html

@@ -199,6 +199,8 @@ function PhoneMakers() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setOn(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   const company = () => (on() == null ? null : COMPANIES[on()]);
   return html`
     <${Poster}
@@ -206,7 +208,7 @@ function PhoneMakers() {
       title=${html`<em>Apple</em> and <em>Samsung</em> ship more than a third of all smartphones`}
       dek="Of 1.24 billion smartphones shipped in 2024, the two biggest companies shipped 455.5 million. The next three together shipped 380.2 million. Tap or point at a slice."
       note="Source: IDC Worldwide Quarterly Mobile Phone Tracker, preliminary results for 2024 (January 2025), in millions of phones."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setOn(null)}>
       <${Chart} class="chart" aspect=${1} ticks=${false} label="Smartphones shipped in 2024 by company, as shares of the total"
         theme=${{ font: "Geist, 'Helvetica Neue', Arial, sans-serif", ink: "#16181b", muted: "#5d636c", surface: "#f1f1ef" }}>

package/skill/recipes/gantt.html

@@ -169,13 +169,15 @@ function LaunchPlan() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster}
       kicker=${`Launch plan · week ${Math.floor(now) + 1} of ${WEEKS}`}
       title="The build is a week behind, and testing waits on it"
       dek=${html`<span>Twelve weeks from scope to launch day, as of ${long.format(dateOf(now))}. Each bar is a task: <i class="done"></i>done, <i class="late"></i>should be done by now, <i class="todo"></i>still to do.</span>`}
       note="Illustrative data. Point at a task or tap it to see what it waits on, or Tab into the chart and use the arrow keys."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <p class="readout">
         ${ROWS.map((t) => html`

package/skill/recipes/heatmap.html

@@ -148,6 +148,8 @@ function Commits() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setAt(e.currentTarget.contains(document.activeElement) ? held : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   const readout = () => {
     const [day, hour] = at() ?? [1, 15];
     const lead = at() ? "" : "Busiest hour: ";
@@ -163,7 +165,7 @@ function Commits() {
       title="More than half of all commits land on weekday afternoons"
       dek="One team's commits over a year, by weekday and hour. The keys darken from 2 to 5 pm on every working day, the lunch hour dips, and weekends barely move."
       note="Illustrative data, in local time. Point at a key or tap it to read its hour; Tab into the chart and use the arrow keys to read a day."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${click} onFocusIn=${focusDay}
+      onPointerMove=${move} onClick=${click} onFocusIn=${focusDay}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setAt(null)}>
       <div class="readout">
         <output aria-live="polite">${readout}</output>

package/skill/recipes/histogram.html

@@ -169,6 +169,8 @@ function FinishTimes() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => (e.pointerType !== "touch" || sideways(e)) && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster}
       kicker=${`City marathon · ${count.format(FINISH_TIMES.length)} finishers`}
@@ -177,7 +179,7 @@ function FinishTimes() {
         finished between ${clock(FOCUS)} and ${clock(FOCUS + BIN - 1)}, and only ${count.format(tally[opening + 1])} in the 5 minutes after.</span>`}
       note="Illustrative data. Point at a column, tap it or drag across the chart, or Tab into it and use the arrow keys."
       onPointerDown=${(e) => (start = [e.clientX, e.clientY])}
-      onPointerMove=${(e) => (e.pointerType !== "touch" || sideways(e)) && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <div class="board">
         <div><b>${() => `${clock(x0[shown()])} to ${clock(x1[shown()] - 1)}`}</b><span>Finish time</span></div>

package/skill/recipes/pyramid.html

@@ -132,6 +132,8 @@ function AgeingJapan() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   const older = () => MEN.slice(from()).concat(WOMEN.slice(from())).reduce((sum, v) => sum + v, 0);
   return html`
     <${Poster}
@@ -139,7 +141,7 @@ function AgeingJapan() {
       title="Nearly three in ten people in Japan are 65 or older"
       dek="Men to the left, women to the right, in millions, the oldest at the top. Two bulges show the baby booms of the late 1940s and early 1970s; the base keeps shrinking."
       note="Source: Statistics Bureau of Japan, population estimates for October 1, 2023 (124.35 million people), rounded to the nearest 10,000. Point at an age band, tap it, or Tab into the chart and use the arrow keys."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <p class="readout" aria-live="polite">
         <b>${() => percent.format(older() / TOTAL)}</b>

package/skill/recipes/scatter.html

@@ -135,6 +135,7 @@ const Country = slat({
 // keys, and the United States otherwise
 function WealthChart() {
   const [picked, setPicked] = createSignal(null);
+  const [pinned, setPinned] = createSignal(null); // the dot a click or a tap picked: the chart comes back to it
   const shown = () => COUNTRIES[picked() ?? STORY];
   let plot;
   const nearest = (e) => {
@@ -161,18 +162,30 @@ function WealthChart() {
     const i = nearest(e);
     if (i != null) setPicked(i);
   };
+  // A tap or a click picks it too, and pins it
+  const pin = (e) => {
+    point(e);
+    setPinned(picked());
+  };
   // The keyboard picks the dot it focuses
   const focus = (e) => {
     const i = rowOf(e.target);
     if (i != null) setPicked(i);
   };
-  // Leaving the chart: back to the dot that has focus (the keyboard's pick), or none
+  // Leaving the chart: back to the dot that has focus (the keyboard's pick), else the pinned one, else none
   const leave = (e) => {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
-    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
+    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : pinned());
+  };
+  // Clicking poster text or margin resets this existing pick to the chart's original default.
+  const reset = (e) => {
+    if (e.target.closest(".plot, a, button, input, select, textarea, label, [role=button], [role=slider]")) return;
+    setPinned(null);
+    setPicked(null);
   };
   return html`
     <${Poster}
+      onClick=${reset}
       kicker="Wealth and health of nations"
       title="Life expectancy climbs fast with income, then levels off"
       dek="Twenty countries in 2023. Above about $25,000 a person, higher income goes with little extra life: the United States, richer than all but Norway here, has a lower life expectancy than Costa Rica, with about a third of its income. Tap or point at a dot."
@@ -180,8 +193,8 @@ function WealthChart() {
       <p class="readout"><b>${() => shown().name}</b><span>${() => `: ${dollars.format(shown().gdp)} a person, ${years.format(shown().life)} years`}</span></p>
       <p class="axis">Life expectancy at birth, years</p>
       <div class="plot"
-        onPointerMove=${(e) => e.pointerType !== "touch" && point(e)} onClick=${point} onFocusIn=${focus}
-        onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
+        onPointerMove=${(e) => e.pointerType !== "touch" && point(e)} onClick=${pin} onFocusIn=${focus}
+        onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(pinned())}>
         <${Chart} scale=${X} cross=${Y} crossTicks=${[50, 60, 70, 80, 90]} height=${340}
           label="Life expectancy at birth against GDP per person, twenty countries, 2023"
           theme=${{ font: 'Manrope, "Helvetica Neue", Arial, sans-serif', ink: "#191c1f", muted: "#686b70", grid: "#dfdbd0" }}>

package/skill/recipes/silhouettes.html

@@ -72,7 +72,7 @@
     .poster .headline, .poster .kicker, .poster .dek { position: relative; z-index: 2; }
     .poster .headline { padding-right: 28px; }
     .poster .dek { align-self: start; margin-top: 2px; padding-right: 20px; font-size: 16px; }
-    .poster .stage { grid-area: 1 / 1 / 4 / 4; align-self: end; margin-top: 64px; }
+    .poster .stage { grid-area: 1 / 1 / 4 / 4; align-self: end; margin-top: 32px; }
     .poster .key { display: none; }
   }
   @media (max-width: 640px) {
@@ -273,7 +273,7 @@ const tower = (d) => html`
     <//>
   </div>`;
 // The same tower with the room each width needs: names on the street on wide screens, ranks on narrow ones
-const TowerNamed = slat({ room: { start: 88, end: 0, after: 0 }, css: TOWER_CSS }, tower);
+const TowerNamed = slat({ room: { start: 88, end: 32, after: 32 }, css: TOWER_CSS }, tower);
 const TowerRanked = slat({ room: { start: 32, end: 32, after: 46 }, css: TOWER_CSS }, tower);
 
 // The chart's font and colors, read from the page's tokens
@@ -310,6 +310,8 @@ function Skyline() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   const towers = (type) => html`
     <${Plot} rows=${BUILDINGS} order=${POS} keyboard=${true} rank=${RANK} outline=${OUTLINE} shift=${SHIFT}
       lit=${(d) => d.index === lit()} lead=${(d) => d.index === LEAD} span=${(d) => span(d.index)}
@@ -320,7 +322,7 @@ function Skyline() {
       title=${`${cap(word(AS_OF - lead.year))} years on, the ${lead.name} still tops the rest by ${metres(margin)}`}
       dek=${`The ${word(BUILDINGS.length)} tallest finished buildings on Earth, from ${word(cities)} cities, share one street here, each in its own outline and all at one scale. Heights in metres.`}
       note=${SOURCE}
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <div class="stage" style=${() => `--street: ${wide() ? 88 : 32}px`}>
         <${Chart} orientation="vertical" height=${() => (wide() ? 680 : 420)} scale=${[scale.min, scale.max]} ticks=${false}

package/skill/recipes/slope.html

@@ -138,6 +138,7 @@ const Item = slat({
 // picked out and the others fade
 function GroceryChart() {
   const [picked, setPicked] = createSignal(null);
+  const [pinned, setPinned] = createSignal(null); // the item a click or a tap picked: the chart comes back to it
   let plot;
   const nearest = (e) => {
     const r = plot.getBoundingClientRect();
@@ -164,24 +165,36 @@ function GroceryChart() {
     const i = nearest(e);
     if (i != null) setPicked(i);
   };
+  // A tap or a click picks it too, and pins it
+  const pin = (e) => {
+    point(e);
+    setPinned(picked());
+  };
   // The keyboard picks the item it focuses
   const focus = (e) => {
     const i = rowOf(e.target);
     if (i != null) setPicked(i);
   };
-  // Leaving the chart: back to the item that has focus (the keyboard's pick), or none
+  // Leaving the chart: back to the item that has focus (the keyboard's pick), else the pinned one, else none
   const leave = (e) => {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
-    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
+    setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : pinned());
+  };
+  // Clicking poster text or margin resets this existing pick to the chart's original default.
+  const reset = (e) => {
+    if (e.target.closest(".plot, a, button, input, select, textarea, label, [role=button], [role=slider]")) return;
+    setPinned(null);
+    setPicked(null);
   };
   return html`
     <${Poster}
+      onClick=${reset}
       kicker="Price check, US city average"
       title="A dozen eggs cost twice as much in 2024 as in 2020"
       dek="Six staples, each at its average price in 2020 and in 2024. Coffee went up 43%, bread 36%, beef 31% and milk 20%; bananas went up 4 cents."
       note="Source: US Bureau of Labor Statistics, average price data for 2020 and 2024 (the mean of each year's twelve monthly prices). Point at a line, tap it, or Tab into the chart and use the arrow keys.">
-      <div class="plot" onPointerMove=${(e) => e.pointerType !== "touch" && point(e)} onClick=${point} onFocusIn=${focus}
-        onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
+      <div class="plot" onPointerMove=${(e) => e.pointerType !== "touch" && point(e)} onClick=${pin} onFocusIn=${focus}
+        onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(pinned())}>
         <${Chart} scale=${[0, 1]} cross=${[0, TOP]} crossTicks=${false} height=${HEIGHT}
           label=${`Average US prices of six groceries in ${YEARS[0]} and ${YEARS[1]}`}
           theme=${{ font: '"Azeret Mono", ui-monospace, Menlo, monospace', ink: "#1d1d1b", muted: "#55534e" }}>

package/skill/recipes/strip.html

@@ -192,13 +192,15 @@ function RestaurantRatings() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setPicked(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster}
       kicker="City food guide · ratings out of 5"
       title="Burger places are hit or miss"
       dek="Every dot is a restaurant, placed by its average rating. Ethiopian kitchens all score between 4.3 and 4.8; burgers run from under 3 to almost 5."
       note="Illustrative data for invented restaurants. Point at a dot or tap it for the restaurant, or Tab into a cuisine and use the arrow keys."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setPicked(null)}>
       <div class="readout">
         <span class="stars">${() => one.format(place().rating)} ★</span>

package/skill/references/interaction.md

@@ -142,9 +142,11 @@ function RainChart() {
     if (e.pointerType === "touch") return; // a finger sends pointerleave as it lifts after a tap
     setOn(e.currentTarget.contains(document.activeElement) ? rowOf(document.activeElement) : null);
   };
+  // Off the chart (on the headline, the readout or the note), pointing is as if the pointer had left the poster
+  const move = (e) => e.pointerType !== "touch" && (e.target.closest(".rhp-chart") ? pick(e) : leave(e));
   return html`
     <${Poster} title="City A gets more than three times City D's October rain" note="Illustrative data."
-      onPointerMove=${(e) => e.pointerType !== "touch" && pick(e)} onClick=${pick} onFocusIn=${pick}
+      onPointerMove=${move} onClick=${pick} onFocusIn=${pick}
       onPointerLeave=${leave} onFocusOut=${(e) => !e.currentTarget.contains(e.relatedTarget) && setOn(null)}>
       <p class="readout" aria-hidden="true">${() => (on() == null ? "Tap or point at a city." : say(on()))}</p>
       <${Chart} scale=${[0, 200]} ticks=${[0, 50, 100, 150, 200]} label="Rain in October, in mm">
@@ -183,6 +185,7 @@ render(() => html`<${RainChart} />`, document.getElementById("chart"));
 Checked: the checker reported a change for each slat it pointed at (City A, City C, City F) and tapped (City A, City F); its Tab reached City A and ArrowDown moved focus to City B.
 Playwright with a mouse: at rest City A was lit and the readout gave the hint; on City C's bar the readout named City C, City C was lit, and the five others were at opacity .3 with rhp's transition still on their bars; from City F down onto the axis the readout stayed on City F; leaving the poster cleared it all.
 With focus on City A, the mouse over City D took the readout, and leaving the poster gave it back to City A.
+Off the chart, in Chromium and WebKit: from City C onto the headline the readout went back to the hint, and with City A clicked, from City D onto the readout it went back to City A; the checker reported nothing.
 At 390px with touch: a tap on City B kept the readout after the finger lifted, a scroll that started on City E moved the page and left the readout on City B, a tap on City E's number picked City E, and a tap on the headline or below the poster cleared it.
 With slats 110px thick (a chart taller than a 390 × 664 screen), a readout pinned with `position: sticky` and `z-index: 2`, after the chart or above it, showed City B on screen, and City E after a scroll, with its hairline edge; without `z-index: 2` the slats covered it.
 Scrolled to the chart before any pick, the readout above it that pins only while a pick exists was out of the way, and one pinned at rest covered the plot's top.

package/skill/references/performance.md

@@ -0,0 +1,143 @@
+# Keeping a big chart light
+
+Use this reference when a finished chart has measurable interaction or loading costs, particularly with many slats or many blocks per slat.
+Measure the chart before choosing an optimization.
+These patterns preserve rhp's slats, blocks, nested Plots, and public APIs.
+They do not require any particular interaction.
+
+## Measure the work
+
+Count elements in the page and hidden slats, and observe attribute and child-list mutations during a representative action.
+Separate DOM writes from rendering cost: fewer JavaScript writes can still cause the browser to restyle and paint many marks.
+Compare actual interaction latency as well as counts when speed matters.
+
+```js
+const chart = document.querySelector('.rhp-chart');
+console.log(chart.querySelectorAll('*').length);
+const changes = [];
+const observer = new MutationObserver(records => changes.push(...records));
+observer.observe(chart, { subtree: true, attributes: true, childList: true });
+// Perform the action, then disconnect and inspect changes.
+```
+
+## Switch mark colors through a slat class
+
+When one slat's state changes many marks' colors, give the marks their colors once and switch a CSS variable through a class on the owning slat.
+Keep the `color` API so all consumers of the mark's color, including outlines or descendant styling, continue to see the active color.
+A generic `background` shorthand override can erase background images and changes only that paint property.
+Use an override of a specific paint property only when that is the intended behavior of the existing chart.
+
+```js
+const Segment = slat({
+  css: `
+    .seg { --active-tone: var(--base-tone); }
+    .lit .seg { --active-tone: var(--lit-tone); }
+  `,
+}, s => html`
+  <${Bar} class="seg" from=${() => s.from} to=${() => s.to}
+    color="var(--active-tone)"
+    style=${() => ({ '--base-tone': s.tone, '--lit-tone': s.gold })} />`);
+
+const Shelf = slat({ thickness: 24, room: { start: 70, end: 40 } }, d => html`
+  <div class=${() => d.lit ? 'shelf lit' : 'shelf'}>
+    <${Label} edge="start">${() => d.name}<//>
+    <${Plot} overlap=${true} from=${() => d.from} to=${() => d.to}
+      tone=${() => d.tones} gold=${() => d.golds}>${Segment}<//>
+  </div>`);
+```
+
+`tone` and `gold` here are CSS colors, including theme variables such as `var(--rhp-series-8)`, rather than bare theme-key strings.
+Keep their data groups independent of the interaction state.
+Continue passing reactive getters when the underlying data or palette can change.
+Only the shelf's `lit` data group needs to read the state that chooses the highlighted shelf.
+This does not change how the chart chooses that state.
+
+Put the rule in the `css` of the slat type that owns the mark, here `Segment`.
+Its selector may name ancestors inside the same chart, including the shelf root.
+A shelf's slat CSS does not style another nested slat type's marks.
+See api.md, “Slat CSS scope”.
+
+## Put shared dimming state on a parent
+
+When a shared selection dims many slats, a class on their Plot or grouping slat can replace a flag rewritten on every row.
+Keep the classes that identify the exceptions.
+For example, inside the mark-owning slat's CSS:
+
+```css
+.picking .shelf:not(.lit):not(.pointed) .seg { opacity: .3; }
+```
+
+Set `picking` on a Plot or slat root inside the chart when the existing interaction has an active selection.
+Keep `lit` and `pointed` consistent with the existing selection and preview behavior.
+Charts with multiple selections, disabled marks, separate groups, or other exceptions need selectors that preserve all those states.
+A class outside the chart, on the poster for example, is outside slat CSS's ancestor scope.
+
+## Render hidden slats' contents conditionally
+
+A Plot row whose `d.position` is `null` is hidden, but its contents normally remain mounted and reactive.
+For expensive rows hidden by a filter or top-N view, Solid's `Show` can leave only the slat root mounted:
+
+```js
+const Shelf = slat({ thickness: 24, room: { start: 70, end: 40 } }, d => html`
+  <div class=${() => d.lit ? 'shelf lit' : 'shelf'}>
+    <${Show} when=${() => d.position != null}>
+      <${Label} edge="start">${() => d.name}<//>
+      <${Plot} overlap=${true} from=${() => d.from} to=${() => d.to}
+        tone=${() => d.tones} gold=${() => d.golds}>${Segment}<//>
+    <//>
+  </div>`);
+```
+
+This is normal Solid composition and retains rhp's slat design.
+Keep the root outside `Show`, so rhp retains its identity, position, focus target, and keyboard order.
+The contents mount when the row receives a position and unmount when it loses that position.
+Check leaving animations against when the chart's own order actually becomes `null`.
+
+State owned by the slat root survives this cycle.
+State, native input values, subscriptions, and effects owned inside the conditional content follow Solid's mount and cleanup lifecycle.
+Keep state that must survive in the root or application, or leave that content mounted.
+Showing many rows at once can cost more because their blocks must be created then.
+Measure that action before deciding whether this tradeoff suits the chart.
+
+Automatic gutters already follow the visible edge labels in the tested eager and conditional versions.
+Both widened when a longer label became visible, with identical widths before and after filtering.
+Conditional rendering does not by itself require fixed room.
+Verify the chart's gutter geometry, including its own sizing constraints, when changing which labels are mounted.
+
+## Verified example and limits
+
+The vocabulary article already uses these patterns.
+A review on 2026-10-16 compared four isolated variants of the article at source commit `4101fdb`: eager contents with per-mark color and dimming updates, then each optimization added in turn.
+The test used Chromium and WebKit, widths 1280 and 390, and dark and light themes, for 32 configurations.
+
+| Measurement | Earlier implementation | Optimized implementation |
+|---|---:|---:|
+| Style writes for one tested shelf hover | 14 | 0 |
+| Shelf class changes for that hover | 1 | 1 |
+| Changed DOM nodes in the era chart after opening a rapper | 122 | 9 |
+| Page elements at desktop rest | 3,101 | 1,449 |
+| Descendants retained inside hidden ranking slats | 1,652 | 0 |
+| Retained JS heap after collection, Chromium desktop | 16.7 MB | about 10 MB |
+
+These figures describe this page and these actions, not a complexity or frame-rate guarantee.
+Visible mark geometry, computed colors and opacity, readout text, tab order, and accessible breakdown content matched in seven states: rest, hover, open breakdown, normalized measure, era filter, show all, and search.
+The hovered ranking screenshots matched pixel for pixel in all eight engine/width/theme combinations.
+Color transition values matched at 0, 100, and 200ms, and face dimming matched at 0, 100, and 250ms in both engines.
+A separate lifecycle fixture verified root identity, root-owned state, arrow-key navigation, nested state reset, native input reset, and cleanup behavior in both engines.
+The color-variable example above was also checked with reactive palette changes, an outline that consumes the mark color, and a background image in both engines.
+
+In five fresh-page trials per action at 390px with Chromium CPU throttled 4 times, showing all 149 rows took a median 175ms with mounted contents and 258ms with conditional contents, measured from the action through two animation frames with reduced motion.
+Search medians were 239ms and 217ms respectively, with overlapping ranges (206 to 310ms and 195 to 310ms), so these trials establish no consistent search advantage or regression.
+CPU throttling is a reproducible browser test setting, not a measurement on a particular phone.
+
+## Validate the specific chart
+
+Compare before and after at the same viewport, theme, scroll position, and interaction state.
+Check geometry, colors, labels, readouts, keyboard navigation, touch actions, and accessibility content.
+For motion, pause animations at equal times from their starts and compare intermediate frames as well as settled output.
+Use a before-versus-before control when screenshots vary between identical builds.
+Run the checker again after the change.
+
+Use the class patterns when they reduce measured work and preserve the chart's styling and state semantics.
+Choose conditional contents when their lifecycle and reveal cost fit the chart, and explain a material tradeoff to the user before changing existing behavior.
+No pattern here removes an rhp capability or calls for replacing slats with a different rendering model.

package/src/check/README.md

@@ -88,7 +88,7 @@ The tests read this table: every code in it must have a chart in `test/broken/`
 | `interaction-error` | error | A step of the interaction pass threw or logged an error. | As for `runtime-error`. |
 | `rhp-warning` | error | rhp printed one of its `rhp:` warnings. | Do what the warning says. |
 | `request-failed` | error | A file next to the chart (or in the bundle) failed to load. | Fix the path, or add the file. |
-| `remote-failed` | info | A remote file (fonts, a CDN) could not be fetched; the check goes on without it. | Check the URL; offline, fonts fall back. |
+| `remote-failed` | info | A remote file (fonts, a CDN) could not be fetched, or the page asked for something the checker does not fetch (a request that sends data, an address that is not public); the check goes on without it. | Check the URL; offline, fonts fall back. Load data and assets with plain GET requests from public URLs, or from files next to the chart. |
 
 ### How rhp is used (the guard)
 
@@ -145,6 +145,23 @@ The tests read this table: every code in it must have a chart in `test/broken/`
 | `out-of-view` | warning | At a phone's width, in a window 664px tall, a tap on a slat that is in the window changes text the reader can see, and all of it lies outside the window (above, below or beside it), even when the tap lights the slat in view: a readout above a tall chart, when the last slat is tapped. | A readout next to the slat (in the slat, or in a Label of it), or one kept in view (`position: sticky`, with a z-index over the plot's 1). |
 | `focus-invisible` | warning | Tab reaches a slat or a control, and a screenshot of its box (with 12px around it) focused and blurred differ in under 20 pixels: `outline: none` with nothing in its place. | Keep the focus ring, or a `:focus-visible` style that shows in its place (on a slat, in the slat type's css). |
 
+### Conditional selection repair
+
+The shared checker runs this audit after creation, through both `rhp_check` and the CLI (`npx -y @bezda/rhp-mcp check <file>`).
+It does not require either click selection or hover, and these checks do not choose an interaction for the chart.
+On an isolated page, it first verifies that a click persists after the pointer leaves the poster, another slat's hover overrides it, and leaving the poster restores the clicked selection.
+Only that observed combination qualifies.
+It then checks a pointer move and a click on noninteractive text or margin inside the same poster, outside every chart and control.
+The initial appearance is the reset reference, preserving an existing default without guessing which subject should be selected.
+Moving pages, unreachable marks and sequences that scroll are inconclusive rather than findings.
+The audit samples up to three reachable slats of the main Plot at the first checked width.
+It never changes the source; its conditional fix is returned to the authoring agent through the skill's existing check-and-fix step, with explicit user interaction instructions taking precedence.
+
+| Code | Level | What triggers it | Fix it gives |
+|---|---|---|---|
+| `selection-hover-stays` | warning | Verified click selection with a temporary hover override: moving off the chart but staying in the poster does not restore the clicked selection, although leaving the poster does. | Clear only the hover preview on leaving the chart area; preserve the clicked selection, unless the user explicitly asked for different behavior. |
+| `selection-reset` | warning | The same verified pattern: clicking noninteractive poster space outside the chart fails to restore the initial appearance. | Clear the selection if no default existed, or restore the chart's meaningful default; preserve explicitly requested behavior and other controls. |
+
 ### Colors (read from screenshots)
 
 | Code | Level | What triggers it | Fix it gives |