@bezda/rhp-mcp 0.1.6 → 0.1.8

package/src/check/interact.js

@@ -94,9 +94,21 @@ export async function interact(page, { events, capture, shoot, taps = false }) {
       window.__rhpProbe.record(keep);
     }, {keep:texts,view});
     if (!error) await attempt(act);
+    // a control that sets the page moving (Play) is read as it moves too: a text that jitters while the values run
+    // may be back in place at the end
+    const passing = [];
+    for (let k = 0; !lit && !error && k < 5; k++) {
+      await page.waitForTimeout(200);
+      passing.push(...(await page.evaluate((n) => window.__rhpProbe.moved(n, false), used).catch(() => [])).filter((m) => m.text));
+    }
     await page.evaluate(() => window.__rhpProbe.settle(1500)).catch(() => {});
     const seen = await page.evaluate(() => window.__rhpProbe.stop()).catch(() => null);
     const moved = await page.evaluate(([n, l]) => window.__rhpProbe.moved(n, l), [used, lit]).catch(() => []);
+    for (const m of passing) {
+      const was = moved.find((x) => x.what === m.what);
+      if (!was) moved.push(m);
+      else if (Math.abs(m.dx) + Math.abs(m.dy) > Math.abs(was.dx) + Math.abs(was.dy)) Object.assign(was, m);
+    }
     // a value a slat read once, and that this interaction changed, is shown stale (the guard reads them again)
     await page.evaluate(() => globalThis.__rhpCheck?.recheck?.()).catch(() => {});
     const thrown = events.slice(before).filter((e) => e.kind === "pageerror" || e.kind === "console-error");

package/src/check/report.js

@@ -5,7 +5,7 @@
 const PASSES = [
   [["runtime-error", "console-error", "syntax-error", "missing-import", "missing-import-map", "plain-script-tag", "interaction-error", "missing-export"], "no errors thrown"],
   [["rhp-warning"], "no rhp warnings"],
-  [["unknown-prop", "bad-prop", "bad-scale", "dot-size", "missing-group", "plot-typo", "group-lengths", "no-component", "bare-boolean", "handler-at-render", "style-string", "class-name", "two-solids", "series-past-theme", "page-css-ignored", "block-transition", "stale-read", "static-chart"], "rhp used as documented"],
+  [["unknown-prop", "bad-prop", "bad-scale", "dot-size", "missing-group", "plot-typo", "group-lengths", "no-component", "bare-boolean", "handler-at-render", "style-string", "class-name", "two-solids", "series-past-theme", "page-css-ignored", "page-css-reaches", "block-transition", "stale-read", "static-chart"], "rhp used as documented"],
   [["no-chart", "empty-plot", "small-plot", "collapsed-chart", "plot-outside-chart"], null],
   [["nan-value"], "no NaN values"],
   [["value-past-scale", "points-past-scale"], "values inside the scale"],
@@ -44,6 +44,7 @@ export function report(r) {
     list.forEach((f, i) => {
       lines.push(`${i + 1}. [${f.code}] ${f.message}${widthsOf(f)}`);
       if (f.fix) lines.push(`   Fix: ${f.fix}`);
+      if (f.see) lines.push(`   See: ${f.see}`);
     });
   };
 
@@ -88,9 +89,15 @@ export function report(r) {
       if (quiet.includes(x.kind)) continue;
       lines.push(`- ${x.kind} ${x.target}${x.width !== r.interactedAt ? ` at ${x.width}px` : ""}: ${x.how}${x.error ? `, and it threw: ${x.error}` : ""}`);
     }
-    // the sweep: one line, every width at which every slat was picked in turn
+    // the sweep: a line for the pointer moved along the chart, where it was, and one for every slat picked in turn, at
+    // every width at which it was (none when no slat could be reached: nothing was picked)
     const swept = (r.swept ?? []).filter((x) => x.slats);
-    if (swept.length) lines.push(`- every slat picked in turn (${swept[0].slats}) at ${swept.map((x) => `${x.width}px`).join(", ")}: ${swept.some((x) => x.jumps) ? "the layout jumped (see the warnings)" : "nothing else moved"}`);
+    const at = (list) => list.map((x) => `${x.width}px`).join(", ");
+    const scrubbed = swept.filter((x) => x.scrubbed);
+    if (scrubbed.length) lines.push(`- pointer moved along the chart (${scrubbed[0].scrubbed.points} steps) at ${at(scrubbed)}: ${scrubbed.some((x) => x.scrubbed.moved) ? "the layout or the readout moved (see the warnings)" : "nothing else moved"}`);
+    const picked = swept.filter((x) => x.reached ?? x.slats);
+    if (picked.length) lines.push(`- every slat picked in turn (${picked[0].reached < picked[0].slats ? `${picked[0].reached} of ${picked[0].slats} reached` : picked[0].slats}) at ${at(picked)}: ${picked.some((x) => x.jumps) ? "the layout jumped (see the warnings)" : "nothing else moved"}`);
+    else if (swept.length) lines.push(`- no slat picked in turn: something covers the slats' marks at ${at(swept)}`);
   } else if (r.charts?.length && r.interactedAt) {
     lines.push("", "Interactions: nothing to interact with (no slats to point at, no buttons, ranges or selects).");
   }

package/src/check/selection.js

@@ -77,6 +77,21 @@ export async function selectionBehavior(page, { events }) {
     const controlled = await controlSelection(page, { slats, off, look, away, settle });
     findings.push(...controlled.findings);
     if (controlled.tested.length) audit.tested = { controls: controlled.tested };
+    // The control audit leaves focus on the last control it tried. Its focus ring is not the chart's state,
+    // and a click beside the chart takes it away, so the reset would differ from the rest by that ring alone.
+    await page.evaluate(() => document.activeElement?.blur?.());
+    // The reset is the chart's state and its readout, not the controls' own look: a control keeps a focus ring, a hover
+    // or a pressed state of its own after the clicks, so the reset leaves out the controls' boxes (as the control audit
+    // does), with room for a ring around them
+    const controls = await page.evaluate((target) => {
+      const poster = window.__rhpTargets[target]?.closest(".poster, figure") ?? document.body;
+      return [...poster.querySelectorAll('button, input, select, textarea, summary, [role="button"], [role="slider"], [role="switch"], [role="tab"]')]
+        .filter((el) => !el.closest(".rhp-chart"))
+        .map((el) => el.getBoundingClientRect())
+        .filter((r) => r.width > 0 && r.height > 0)
+        .map((r) => ({ left: r.left - 8, right: r.right + 8, top: r.top - 8, bottom: r.bottom + 8 }));
+    }, slats[0].target);
+    const quiet = (a, b) => seenPixels(a, b, controls) < SAME;
     if (slats.length < 2) return audit;
     const candidates = [];
     for (const s of slats) {
@@ -128,7 +143,7 @@ export async function selectionBehavior(page, { events }) {
           await page.mouse.click(off.x, off.y);
           await away();
           reset = await look();
-          resetBroken = !same(rest, reset);
+          resetBroken = !quiet(rest, reset);
         }
         const end = await page.evaluate(() => [scrollX, scrollY]);
         if (position.some((v, i) => v !== end[i]) || !same(reset, await look())) return audit;

package/src/check/source.js

@@ -13,10 +13,11 @@ import { closest } from "../guard/rules.js";
 const STANDALONE = "@bezda/rhp/standalone";
 
 // The props of rhp's components (and Solid's Show) that take a boolean, and what "" (false) does to each
-const BOOLEANS = { Chart: ["animate", "static"], Plot: ["overlap", "static", "keyboard", "animate"], Area: ["mirror", "smooth"], Line: ["fill", "smooth"], Show: ["keyed"] };
+const BOOLEANS = { Chart: ["animate", "static", "noCssGuard"], Plot: ["overlap", "static", "keyboard", "animate"], Area: ["mirror", "smooth"], Line: ["fill", "smooth"], Show: ["keyed"] };
 const OFF = {
   overlap: "its slats don't share one band",
   static: "the chart is not static",
+  noCssGuard: "the chart keeps the guard",
   keyboard: "its slats take no focus",
   animate: "the JS version stays off",
   mirror: "the Area is not mirrored",

package/src/guard/rules.js

@@ -25,7 +25,7 @@ export const SETTING_VALUE = {
   children: (v) => typeof v === "function",
 };
 
-export const CHART_PROPS = ["scale", "orientation", "height", "aspect", "ticks", "grid", "format", "animate", "theme", "static", "cross", "crossTicks", "crossGrid", "crossFormat", "label", "id", "class", "role", "style", "ref", "children"];
+export const CHART_PROPS = ["scale", "orientation", "height", "aspect", "ticks", "grid", "format", "animate", "theme", "static", "noCssGuard", "cross", "crossTicks", "crossGrid", "crossFormat", "label", "id", "class", "role", "style", "ref", "children"];
 
 export const THEME_KEYS = ["series", "positive", "negative", "ink", "muted", "grid", "surface", "low", "high", "font"];
 
@@ -58,7 +58,7 @@ export const RENAMES = {
   Label: { value: "at", x: "at", y: "cross", position: "side", align: "side", text: "children", label: "children" },
   Area: { data: "points", values: "points", max: "peak", fill: "color", colour: "color", curved: "smooth" },
   Line: { data: "points", values: "points", max: "peak", curved: "smooth", area: "fill", colour: "color" },
-  Chart: { domain: "scale", range: "scale", extent: "scale", horizontal: "orientation", vertical: "orientation", direction: "orientation", colors: "theme", palette: "theme", tickFormat: "format", ariaLabel: "label", title: "label" },
+  Chart: { domain: "scale", range: "scale", extent: "scale", horizontal: "orientation", vertical: "orientation", direction: "orientation", colors: "theme", palette: "theme", tickFormat: "format", ariaLabel: "label", title: "label", noGuard: "noCssGuard", unguarded: "noCssGuard", noCSSGuard: "noCssGuard" },
   Poster: { headline: "title", heading: "title", subtitle: "dek", subheading: "dek", subhead: "dek", description: "dek", lede: "dek", standfirst: "dek", source: "note", footnote: "note", credit: "note", credits: "note", caption: "note", footer: "note", eyebrow: "kicker", overline: "kicker", tag: "kicker" },
   slat: { height: "thickness", width: "thickness", size: "thickness", thick: "thickness", pitch: "thickness", padding: "room", margin: "room", gutter: "room", gutters: "room", gap: "inset", style: "css", styles: "css", class: "css", className: "css" },
   theme: { colors: "series", palette: "series", accent: "series", text: "ink", foreground: "ink", color: "ink", background: "surface", bg: "surface", paper: "surface", gridline: "grid", gridlines: "grid", axis: "grid", fontFamily: "font", family: "font", typeface: "font" },

package/src/server.js

@@ -21,7 +21,7 @@ const LIMIT = 50;
 const MAX_WIDTH = 1280;
 const MAX_HEIGHT = 2000;
 
-const INSTRUCTIONS = `rhp 2 (@bezda/rhp) makes charts out of HTML elements and CSS with SolidJS. It came out in September 2026, after your training data, so what you remember about rhp is wrong or belongs to the unrelated rhp 1. Before you write or change any rhp code, call rhp_guide and follow its workflow. Take each chart's technique from the closest recipe (rhp_recipe) and design the chart for its own subject, and look up every prop you are unsure of with rhp_reference instead of guessing. After every edit, call rhp_check with the chart file's absolute path, fix what it reports and look at its screenshots, until it reports no errors and no warnings.`;
+const INSTRUCTIONS = `rhp 2 (@bezda/rhp) makes charts out of HTML elements and CSS with SolidJS. It came out in September 2026, after your training data, so what you remember about rhp is wrong or belongs to the unrelated rhp 1. Before you write or change any rhp code, call rhp_guide and follow its workflow. Take each chart's technique from the closest recipe (rhp_recipe) and design the chart for its own subject. Choose interaction behavior and presentation for the reader's task and the intended design; familiar patterns are welcome when they fit. Look up every prop you are unsure of with rhp_reference instead of guessing. After every edit, call rhp_check with the chart file's absolute path, fix what it reports and look at its screenshots, until it reports no errors and no warnings.`;
 
 const text = (body) => ({ content: [{ type: "text", text: body }] });
 const failure = (body) => ({ content: [{ type: "text", text: body }], isError: true });
@@ -185,7 +185,7 @@ server.registerTool("rhp_guide", {
 
 server.registerTool("rhp_reference", {
   title: "rhp reference",
-  description: "Returns one of rhp's references by name: api (every component, prop, helper and CSS variable, exactly), design (art direction from the subject, the editorial poster, color, type, layout), looks (eight looks written out in full, as examples), interaction (which interaction for which story, with code), download (the fit-to-screen and PNG download icons for standalone poster pages), environments (plain HTML, Solid, React, Next.js, Vue, Svelte, Angular, Astro), forms (the subject's own form, which chart for which data and story), pitfalls (mistakes and their fixes). Look props up here instead of guessing. A long reference comes back as its list of sections: call again with section to get the one you need.",
+  description: "Returns one of rhp's references by name: api (every component, prop, helper and CSS variable, exactly), design (art direction from the subject, the editorial poster, color, type, layout), looks (eight looks written out in full, as examples), interaction (choosing behavior and presentation for the reader's task, with implementation examples), download (the fit-to-screen and PNG download icons for standalone poster pages), environments (plain HTML, Solid, React, Next.js, Vue, Svelte, Angular, Astro), forms (the subject's own form, which chart for which data and story), pitfalls (mistakes and their fixes). Look props up here instead of guessing. A long reference comes back as its list of sections: call again with section to get the one you need.",
   inputSchema: {
     name: z.string().describe("The reference: api, design, environments, forms, interaction, looks or pitfalls"),
     section: z.string().optional().describe('One "##" section of the reference, by its number or title, for example "4" or "Plot"'),
@@ -200,7 +200,7 @@ server.registerTool("rhp_reference", {
 
 server.registerTool("rhp_recipe", {
   title: "rhp recipe",
-  description: 'Lists rhp\'s recipes (call it with no type), or returns one recipe\'s complete HTML file (type, for example "bar"). A recipe is a tested chart page that shows the technique for one kind of chart: take its technique (how its Plots, slats and blocks are composed, its interaction, its phone rules) and leave its design, which was made for its own subject.',
+  description: 'Lists rhp\'s recipes (call it with no type), or returns one recipe\'s complete HTML file (type, for example "bar"). A recipe is a tested chart page demonstrating composition, state and event handling, accessibility and responsive techniques. Choose the chart\'s interaction behavior and presentation for the reader\'s task and intended design. Familiar patterns are welcome when they fit; the recipe\'s controls, feedback, layout and transitions are choices to reconsider.',
   inputSchema: {
     type: z.string().optional().describe('The recipe, for example "bar", "line" or "donut"; leave it out for the list'),
   },
@@ -239,7 +239,7 @@ server.registerPrompt("chart", {
     role: "user",
     content: {
       type: "text",
-      text: `Make this chart with rhp (@bezda/rhp): ${request}\n\nFirst call rhp_guide and follow its workflow: write the brief, take the technique from the closest recipe (rhp_recipe), design the chart for its own subject, and look up props with rhp_reference instead of guessing. After every edit, call rhp_check with the chart file's absolute path, fix what it reports and look at its screenshots, until it reports no errors and no warnings.`,
+      text: `Make this chart with rhp (@bezda/rhp): ${request}\n\nFirst call rhp_guide and follow its workflow: write the brief, take the technique from the closest recipe (rhp_recipe), design the chart for its own subject, and look up props with rhp_reference instead of guessing. Choose interaction behavior and presentation for the reader's task and intended design, keeping familiar patterns when they fit. After every edit, call rhp_check with the chart file's absolute path, fix what it reports and look at its screenshots, until it reports no errors and no warnings.`,
     },
   }],
 }));