@bezda/rhp-mcp 0.1.6 → 0.1.7

package/src/check/inpage.js

@@ -1188,8 +1188,56 @@ export function install() {
       while (a.parentElement && a.parentElement !== document.body && a.parentElement !== document.documentElement) a = a.parentElement;
       return a;
     }))].map((el) => ({ el, end: el.getBoundingClientRect().bottom + scrollY }));
+    // the texts around the charts, each placed in the box it floats in (see words), and the boxes with a background or
+    // a border around them that hold no chart (a readout's card, a legend's panel), with their size
+    words = [];
+    boxes = [];
+    for (const { el: root } of sections) {
+      for (const el of [root, ...root.querySelectorAll("*")]) {
+        if (words.length >= 600) break;
+        if (el.closest(".rhp-chart") || el.closest(CONTROLS) || !visible(el) || (viewRoot && !viewRoot.contains(el))) continue;
+        const text = ownText(el);
+        if (text && el.getBoundingClientRect().width > 0) {
+          const frame = frameOf(el);
+          words.push({ ...within(el, frame), text, frame });
+        }
+        if (boxes.length < 60 && framed(el) && !el.querySelector(".rhp-chart") && !/fixed|absolute/.test(getComputedStyle(el).position)) {
+          const r = el.getBoundingClientRect();
+          const scale = scaleOf(el);
+          if (r.width >= 24 && r.height >= 16 && el.textContent.trim()) boxes.push({ el, w: r.width / scale, h: r.height / scale, name: snippet(seenText(el)) });
+        }
+      }
+    }
   }
 
+  // A text is placed in the box it floats in when it floats (fixed, sticky or absolute: a readout pinned to the
+  // window, a tooltip that follows the pointer), else on the page: the box may move as a whole, and only a move inside
+  // it counts. Its own text is its text nodes', not its children's, so a label beside a value that changed keeps its own.
+  let words = [];
+  let boxes = [];
+  const frameOf = (el) => {
+    for (let a = el; a && a.nodeType === 1 && a !== document.body; a = a.parentElement) {
+      if (/fixed|sticky|absolute/.test(getComputedStyle(a).position)) return a;
+    }
+    return null;
+  };
+  const ownText = (el) => [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.data).join(" ").replace(/\s+/g, " ").trim();
+  const scaleOf = (el) => (viewRoot?.contains(el) ? viewRoot.getBoundingClientRect().width / viewRoot.offsetWidth : 1);
+  const within = (el, frame) => {
+    if (!frame) return at(el);
+    const r = el.getBoundingClientRect();
+    const f = frame.getBoundingClientRect();
+    const scale = scaleOf(el);
+    return { el, x: (r.left - f.left) / scale, y: (r.top - f.top) / scale };
+  };
+  // a box the reader sees the edges of: a background, a border or a shadow
+  const framed = (el) => {
+    const s = getComputedStyle(el);
+    const paint = (c) => c && c !== "transparent" && !/rgba\([^)]*,\s*0(\.0+)?\)$/.test(c);
+    const border = ["Top", "Right", "Bottom", "Left"].some((side) => parseFloat(s[`border${side}Width`]) >= 1 && paint(s[`border${side}Color`]) && s[`border${side}Style`] !== "none");
+    return paint(s.backgroundColor) || border || s.boxShadow !== "none";
+  };
+
   function moved(n, lit = false) {
 
     const used = window.__rhpTargets[n];
@@ -1226,6 +1274,28 @@ export function install() {
       const grew = Math.round(el.getBoundingClientRect().bottom + scrollY - end);
       if (el.isConnected && far(grew)) out.push({ what: "the end of the chart's section", dx: 0, dy: grew });
     }
+    // lighting a slat leaves a readout's card or a legend's panel its size: one that grows or shrinks with what it says
+    // shows its edges jumping
+    for (const b of lit ? boxes : []) {
+      if (!b.el.isConnected || !visible(b.el)) continue;
+      const r = b.el.getBoundingClientRect();
+      const scale = scaleOf(b.el);
+      const dw = Math.round(r.width / scale - b.w);
+      const dh = Math.round(r.height / scale - b.h);
+      if (far(dw) || far(dh)) out.push({ what: b.name ? `the box of "${b.name}"` : "a box", dx: 0, dy: 0, dw, dh, box: true });
+    }
+    // a text that still says the same thing stays where it was in its box: one that moves because a value beside it got
+    // wider, or because a line above it wrapped, makes the reader lose their place (text-shift)
+    for (const w of words) {
+      if (!w.el.isConnected || !visible(w.el) || ownText(w.el) !== w.text || frameOf(w.el) !== w.frame) continue;
+      const now = within(w.el, w.frame);
+      const dx = Math.round(now.x - w.x);
+      const dy = Math.round(now.y - w.y);
+      // (a phrase of three words or more that only slides along its line, after a name or a value that changed, is a
+      // sentence that reads on: "4.1% of people on Earth speak Hindi". A label of a word or two that slides is not)
+      if (!far(dy) && (w.text.match(/[\p{L}\p{N}]+/gu) ?? []).length >= 3) continue;
+      if (far(dx) || far(dy)) out.push({ what: `"${snippet(w.text)}"`, dx, dy, text: true });
+    }
 
     return out;
   }
@@ -1340,5 +1410,210 @@ export function install() {
     return { what: focusName(el), clip: box };
   }
 
-  window.__rhpProbe = { settle, calm, resized: () => [resizes, mutations], measure, transitions, colorItems, hide, show, contentBox, targets, sweepTargets, breakpoints, pointAt, place, moved, record, stop, unseen, focused, focusStop };
+  // Three pairs of neighboring slats of the main Plot (the first two, two in the middle, the last two), for glide() in
+  // index.js
+  function neighbors() {
+
+    const slats = mainSlats();
+    if (slats.length < 3) return [];
+    const list = (window.__rhpTargets ??= []);
+    const one = (i) => ({ index: i + 1, of: slats.length, name: snippet([...slats[i].querySelectorAll(".rhp-label")].map(seenText).find((x) => x) ?? ""), target: list.push(slats[i]) - 1 });
+
+    return [...new Set([0, Math.floor((slats.length - 1) / 2), slats.length - 2])].map((i) => [one(i), one(i + 1)]);
+  }
+
+  // The middle of a slat's largest mark (a target), in the window: where its own pick shows, for the glide. A slat with
+  // marks of its own (a box and its outlier dots) may show several things; its largest mark shows the slat's own.
+  function markCenter(n, scroll = true) {
+
+    const slat = window.__rhpTargets[n];
+    if (scroll) slat.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+    const area = (r) => r.width * r.height;
+    const mark = [...slat.querySelectorAll(MARKS)].filter(visible).map((m) => m.getBoundingClientRect()).filter((r) => area(r) > 0).sort((a, b) => area(b) - area(a))[0];
+    if (!mark) return null;
+
+    return { x: mark.left + mark.width / 2, y: mark.top + mark.height / 2 };
+  }
+
+  // What the reader sees of a pick, as two short hashes: the page's visible text, and how the main Plot's slats are
+  // drawn (the classes and inline styles of everything in them)
+  function state() {
+
+    const hash = (s) => {
+      let h = 5381;
+      for (let i = 0; i < s.length; i++) {
+        h = (h * 33 + s.charCodeAt(i)) | 0;
+      }
+      return h;
+    };
+    const look = mainSlats().map((s) => [s, ...s.querySelectorAll("*")].map((e) => (e.getAttribute("class") ?? "") + (e.getAttribute("style") ?? "")).join("")).join("|");
+
+    return { text: hash(document.body.innerText), look: hash(look) };
+  }
+
+  // The elements around the charts whose text a pick changes (the readout), noted while the sweep picks every slat
+  let watcher = null;
+  const readout = new Set();
+  function watch(on) {
+
+    watcher?.disconnect();
+    watcher = null;
+    if (!on) return readout.size;
+    watcher = new MutationObserver((list) => {
+      for (const m of list) {
+        const el = m.type === "characterData" ? m.target.parentElement : m.target;
+        if (el?.nodeType === 1 && el !== document.body && !el.closest(".rhp-chart")) readout.add(el);
+      }
+    });
+    watcher.observe(document.body, { subtree: true, childList: true, characterData: true });
+    return 0;
+  }
+
+  // While the main chart is taller than three quarters of the window (height: a phone's is shorter than the page's),
+  // scrolled so that its middle is in the middle of the window: its controls (in its section, outside its slats, not
+  // the poster's fit and download icons) and its readout (what the sweep's picks wrote), when all of them are out of
+  // view. null when they are in view, or there are none.
+  function scrollsAway(height = innerHeight) {
+
+    const area = (el) => el.getBoundingClientRect().width * el.getBoundingClientRect().height;
+    const chart = all().filter((c) => visible(c) && !c.parentElement?.closest(".rhp-chart")).sort((a, b) => area(b) - area(a))[0];
+    if (!chart || chart.getBoundingClientRect().height < height * 0.75) return null;
+    let section = chart;
+    while (section.parentElement && section.parentElement !== document.body && section.parentElement !== document.documentElement) section = section.parentElement;
+    const utility = /\b(fit|download|save|export|png|svg|share|print|full ?screen|restore|enlarge|shrink)\b/i;
+    const controls = [...section.querySelectorAll(CONTROLS)].filter((el) => visible(el) && !el.closest(".rhp-chart") && el.getBoundingClientRect().width > 0 && !utility.test(nameOf(el) || el.textContent));
+    const said = [...readout].filter((el) => el.isConnected && visible(el) && section.contains(el) && seenText(el));
+    if (!controls.length && !said.length) return null;
+
+    const y = scrollY;
+    const r = chart.getBoundingClientRect();
+    scrollTo({ left: scrollX, top: scrollY + r.top + r.height / 2 - height / 2, behavior: "instant" });
+    const inView = (el) => {
+      const b = el.getBoundingClientRect();
+      return b.width * b.height > 0 && b.bottom > 0 && b.top < height && b.right > 0 && b.left < innerWidth;
+    };
+    const out = {
+      controls: controls.some(inView) ? [] : controls.slice(0, 3).map((el) => focusName(el)),
+      readout: said.length && !said.some(inView) ? snippet(seenText(said[0])) : null,
+    };
+    scrollTo({ left: scrollX, top: y, behavior: "instant" });
+
+    return out.controls.length || out.readout ? out : null;
+  }
+
+  // The points the scrub moves the pointer through (see scrub() in index.js), when the reader moves along the chart:
+  // the main chart draws a line or an area (read day by day along its scale), or force (the sweep cannot point at its
+  // slats, or there are one or two). steps points through the middle of the plot, from just inside one end to just
+  // inside the other, with the plot scrolled to the middle of the window: along the scale of the plot that draws the
+  // line or the area, else along the main Plot's scale when it has one or two slats, else across its slats (columns
+  // side by side, or rows one under the other). Points outside the window are left out. { points, target: the plot,
+  // for moved() }
+  function scrubPath(force = false, steps = 40) {
+
+    const slats = mainSlats();
+    const main = slats[0]?.parentElement;
+    const chart = main?.closest(".rhp-chart");
+    const mark = chart ? [...chart.querySelectorAll(".rhp-line, .rhp-area")].find(visible) : null;
+    if (!main || (!mark && !force)) return { points: [] };
+    const plot = mark?.closest(".rhp-plot") ?? main;
+    plot.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+    const r = plot.getBoundingClientRect();
+    const vertical = plot.dataset.rhpO === "v";
+    const across = mark || slats.length <= 2 ? !vertical : vertical;
+    const points = [];
+    for (let k = 0; k <= steps; k++) {
+      const f = 0.02 + (0.96 * k) / steps;
+      const p = across ? { x: r.left + r.width * f, y: r.top + r.height / 2 } : { x: r.left + r.width / 2, y: r.top + r.height * f };
+      if (p.x >= 0 && p.y >= 0 && p.x < innerWidth && p.y < innerHeight) points.push(p);
+    }
+
+    return { points, target: (window.__rhpTargets ??= []).push(plot) - 1 };
+  }
+
+  // The lines of text around the charts (outside them and their controls), for the scrub: each text node's first line
+  // box, in the box it floats in (see frameOf), keyed by where the node sits in the page so that one written again
+  // counts as the same. placeLines() notes them before the pointer moves; slides() then says which moved: a text that
+  // says the same thing and moved, or one whose words changed and that kept none of its edges (its start, its end or,
+  // on one line, its middle) where it was. A number at the start of its line may grow; a label after it that slides as
+  // it grows jitters under the reader's eyes at every step, and so does a whole sentence, on a chart whose readout
+  // changes at every step (a line read day by day). Over separate marks the readout changes once per mark, as a pick
+  // does, and only what a pick counts counts (see moved()): what is strict is left out there, a slide along its line of
+  // a text whose words changed, or of a sentence of three words or more. A text that moves up or down jumps, whatever
+  // it says and however often the readout changes. A text first seen after placeLines() is measured against where it
+  // was first seen.
+  let lines = new Map();
+  const keyOf = (node) => {
+    const path = [];
+    for (let n = node; n && n !== document.body && n.parentNode; n = n.parentNode) path.push([...n.parentNode.childNodes].indexOf(n));
+    return path.join(".");
+  };
+  const textNodes = () => {
+    const out = [];
+    for (const { el: root } of sections) {
+      if (!root.isConnected) continue;
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node && out.length < 800; node = walker.nextNode()) {
+        const el = node.parentElement;
+        if (!el || !node.data.trim() || el.closest(".rhp-chart") || el.closest(CONTROLS) || !visible(el) || (viewRoot && !viewRoot.contains(el))) continue;
+        out.push(node);
+      }
+    }
+    return out;
+  };
+  const lineOf = (node) => {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    const rects = [...range.getClientRects()].filter((q) => q.width > 0 && q.height > 0);
+    if (!rects.length) return null;
+    const el = node.parentElement;
+    const frame = frameOf(el);
+    const f = frame ? frame.getBoundingClientRect() : { left: -scrollX, top: -scrollY };
+    const scale = scaleOf(el);
+    const left = (rects[0].left - f.left) / scale;
+    const right = (rects.at(-1).right - f.left) / scale;
+    // (the line it is part of: its nearest block, which a finding names when it holds more than this text)
+    let block = el;
+    while (block.parentElement && /^(inline|contents)$/.test(getComputedStyle(block).display)) block = block.parentElement;
+    return { text: node.data.replace(/\s+/g, " ").trim(), frame, left, right, mid: (left + right) / 2, top: (rects[0].top - f.top) / scale, one: rects.length === 1, line: snippet(seenText(block)) };
+  };
+  function placeLines() {
+
+    lines = new Map();
+    for (const node of textNodes()) {
+      const line = lineOf(node);
+      if (line) lines.set(keyOf(node), line);
+    }
+    return lines.size;
+  }
+  function slides() {
+
+    const out = [];
+    for (const node of textNodes()) {
+      const now = lineOf(node);
+      if (!now) continue;
+      const key = keyOf(node);
+      const was = lines.get(key);
+      if (!was) {
+        lines.set(key, now);
+        continue;
+      }
+      if (was.frame !== now.frame) continue;
+      const by = (k) => Math.round(now[k] - was[k]);
+      const dy = by("top");
+      let dx = by("left");
+      // (a line that moves up or down jumps whatever it says: only a slide along the line can be strict)
+      const strict = Math.abs(dy) <= 2 && (now.text !== was.text || (was.text.match(/[\p{L}\p{N}]+/gu) ?? []).length >= 3);
+      if (now.text !== was.text) {
+        const edges = [by("left"), by("right"), ...(now.one && was.one ? [by("mid")] : [])];
+        dx = edges.some((v) => Math.abs(v) <= 2) ? 0 : edges.reduce((a, b) => (Math.abs(b) < Math.abs(a) ? b : a));
+      }
+      // (a comma or a dot moves with the words around it, and is not named apart from them)
+      if ((Math.abs(dx) > 2 || Math.abs(dy) > 2) && /[\p{L}\p{N}]/u.test(was.text)) out.push({ what: `"${snippet(was.text)}"`, line: was.line !== snippet(was.text) ? was.line : null, dx, dy, text: true, strict });
+      if (out.length >= 40) break;
+    }
+
+    return out;
+  }
+
+  window.__rhpProbe = { settle, calm, resized: () => [resizes, mutations], measure, transitions, colorItems, hide, show, contentBox, targets, sweepTargets, breakpoints, pointAt, place, moved, record, stop, unseen, focused, focusStop, neighbors, markCenter, state, watch, scrollsAway, scrubPath, placeLines, slides };
 }

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

@@ -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/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.`,
     },
   }],
 }));