@bezda/rhp-mcp 0.1.5 → 0.1.7

package/src/check/selection.js

@@ -1,7 +1,8 @@
-// A conditional audit of an existing click selection with a temporary hover override.
-// No click selection or no temporary hover means there is no interaction policy to repair here.
+// Conditional audits of existing selection: a control selecting chart data, or click selection with temporary hover.
+// The observed behavior establishes which interaction policy applies; unrelated controls do not change it.
 // Run on a disposable page: clicks must not change the starting state of the normal interaction pass.
 import { seenPixels } from "./png.js";
+import { controlSelection } from "./selection-controls.js";
 
 const SAME = 20;
 const same = (a, b) => seenPixels(a, b) < SAME;
@@ -40,7 +41,22 @@ export async function selectionBehavior(page, { events }) {
   };
   const look = async () => {
     await settle();
-    return page.screenshot({ animations: "disabled", scale: "css" });
+    // Decorative canvas pixels have their own clock, unrelated to chart selection.
+    // Hide only inert backgrounds behind the content, never a chart or its marks.
+    const backgrounds = page.locator('canvas[aria-hidden="true"]');
+    await backgrounds.evaluateAll((canvases) => {
+      for (const canvas of canvases) {
+        const css = getComputedStyle(canvas);
+        if (!canvas.closest(".rhp-chart") && Number(css.zIndex) < 0 && css.pointerEvents === "none") {
+          canvas.setAttribute("data-rhp-selection-background", "");
+        }
+      }
+    });
+    try {
+      return await page.screenshot({ animations: "disabled", scale: "css", style: "canvas[data-rhp-selection-background] { visibility: hidden !important; }" });
+    } finally {
+      await backgrounds.evaluateAll((canvases) => canvases.forEach((canvas) => canvas.removeAttribute("data-rhp-selection-background")));
+    }
   };
   const away = async () => {
     await page.mouse.move(-1, -1);
@@ -51,10 +67,32 @@ export async function selectionBehavior(page, { events }) {
     // Use reachable marks, including marks inside a slat, from the main Plot.
     // Keep the window still throughout the sequence so scrolling and sticky readouts cannot mimic a state change.
     const slats = await page.evaluate(() => window.__rhpProbe.sweepTargets(12));
-    if (slats.length < 2) return audit;
+    if (!slats.length) return audit;
     await page.evaluate((n) => window.__rhpProbe.pointAt(n), slats[0].target);
     await away();
     const position = await page.evaluate(() => [scrollX, scrollY]);
+    const off = await page.evaluate(beside, slats[0].target);
+    if (!off) return audit;
+    doing = "checking selection changed by a control";
+    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) {
       const point = await pointAt(s);
@@ -64,8 +102,6 @@ export async function selectionBehavior(page, { events }) {
       if (candidates.length === 3) break;
     }
     if (candidates.length < 2) return audit;
-    const off = await page.evaluate(beside, candidates[0].target);
-    if (!off) return audit;
     const rest = await look();
     if (!same(rest, await look())) return audit;
     // At most three candidates, so an initial meaningful default on the first mark does not hide click selection.
@@ -98,14 +134,20 @@ export async function selectionBehavior(page, { events }) {
         const selected = await look();
         const hoverBroken = !same(selected, offChart);
         // This click is inside the poster, outside every chart and control.
-        doing = `click beside the chart after selecting ${name(chosen)}`;
-        await page.mouse.click(off.x, off.y);
-        await away();
-        const reset = await look();
-        const resetBroken = !same(rest, reset);
+        let reset = selected;
+        let resetBroken = false;
+        // A proven selection control establishes a persistent choice, rather than the page's initial default.
+        // The control audit already checks that a background click leaves that choice intact.
+        if (!controlled.tested.length) {
+          doing = `click beside the chart after selecting ${name(chosen)}`;
+          await page.mouse.click(off.x, off.y);
+          await away();
+          reset = await look();
+          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;
-        audit.tested = { selected: name(chosen), preview: name(preview), hoverRestoresSelection: !hoverBroken, clickRestoresInitial: !resetBroken };
+        audit.tested = { ...audit.tested, selected: name(chosen), preview: name(preview), hoverRestoresSelection: !hoverBroken, ...(!controlled.tested.length ? { clickRestoresInitial: !resetBroken } : {}) };
         if (hoverBroken) findings.push({ code: "selection-hover-stays", target: name(preview), selected: name(chosen), what: off.what });
         if (resetBroken) findings.push({ code: "selection-reset", target: name(chosen), what: off.what });
         return audit;

package/src/check/source.js

@@ -74,6 +74,27 @@ function walk(node, visit) {
   }
 }
 
+// Literal module dependencies, excluding strings, comments and object properties that look like imports.
+export function moduleSpecifiers(code, file) {
+
+  let ast;
+  try {
+    ast = parseSync(code, { sourceType: "module", configFile: false, babelrc: false, filename: file });
+  } catch {
+    return []; // The caller reports syntax errors separately.
+  }
+  const imports = [];
+  walk(ast.program, (node) => {
+    const source = /^(ImportDeclaration|ExportNamedDeclaration|ExportAllDeclaration|ImportExpression)$/.test(node.type)
+      ? node.source
+      : node.type === "CallExpression" && node.callee.type === "Import" ? node.arguments[0] : null;
+    const value = source?.type === "StringLiteral" ? source.value
+      : source?.type === "TemplateLiteral" && source.expressions.length === 0 ? source.quasis[0].value.cooked : null;
+    if (value != null) imports.push({ source: value, line: node.loc.start.line });
+  });
+  return imports;
+}
+
 const isSpace = (c) => c === " " || c === "\n" || c === "\t" || c === "\r" || c === "\f";
 
 // The attributes in an html template, in order: { tag, name, value, at } with tag { component, expr, name }, value

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 PNG download icon 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.`,
     },
   }],
 }));