@seybel/breakhound 1.0.2 → 1.0.4

package/README.md

@@ -78,7 +78,13 @@ npx @seybel/breakhound --url https://staging.example.com   # every route, on ano
 | Angular | your route definitions, from `src/main.ts` on, with lazily loaded `loadChildren` routes under their path |
 | Anything else | links followed from the home page (up to 50 pages, a few per section) |
 
-**Dynamic routes** like `/blog/[slug]` are scanned once, using a real link found on your pages (routes that share a template share a layout). If no page links to one, it's listed with a hint, and you can give it a URL:
+**Dynamic routes** like `/blog/[slug]` are scanned once, using a real link found on your pages (routes that share a template share a layout). Routes below one reuse its values: once `/cohorts/css-101` is found, `/cohorts/[slug]/settings` is scanned as `/cohorts/css-101/settings`. If something is still missing, it's listed with a hint naming the parameters. Give them a real value once, by name, and every route that uses them is filled in:
+
+```ts
+params: { slug: 'css-101', submissionId: '42' }
+```
+
+Or give one route its own URL, which wins over `params`:
 
 ```ts
 samples: { '/products/[id]': '/products/42' }
@@ -122,15 +128,15 @@ Chromium finds most layout bugs, but Safari and Firefox lay some things out diff
 
 Two differences you'll meet early: Safari gives buttons, inputs and selects an 11px font unless you set one (Chrome and Firefox use about 13px), so unstyled controls show up as tiny text only in WebKit, with `font: inherit` as the fix (that's WebKit on a Mac: Playwright's WebKit on Linux, as in most CI, draws them like Chrome); and Firefox breaks long URLs at their slashes, so a URL that pushes the page wide in Chrome and Safari can wrap fine in Firefox.
 
-### Menus, dialogs and expandable sections
+### Menus, dialogs, tabs and expandable sections
 
-A lot of what breaks on a phone is hidden until you tap: the mobile menu, a sign-up modal, an FAQ answer. After scanning a page as it loads, breakhound opens what it finds there one at a time and sweeps the widths where each can be opened. That covers buttons with `aria-expanded`, `<details>`, popovers, dialogs, Bootstrap toggles, and buttons that are clearly a menu (`hamburger`, `menu-toggle`, an accessible name of "Menu"). Only what breaks while something is open gets reported, with what to open first:
+A lot of what breaks on a phone is hidden until you tap: the mobile menu, a sign-up modal, an FAQ answer, the second tab. After scanning a page as it loads, breakhound opens what it finds there one at a time and sweeps the widths where each can be opened. That covers buttons with `aria-expanded`, `<details>`, popovers, dialogs, tabs (`role="tab"`, as in Radix, shadcn/ui, Headless UI and MUI), Bootstrap toggles, and buttons that are clearly a menu (`hamburger`, `menu-toggle`, an accessible name of "Menu"). Only what breaks while something is open gets reported, with what to open first:
 
 ```
 ✖ 320–399px  Page scrolls horizontally (80px wider than the viewport), with "Menu" open
 ```
 
-It never clicks a link to another page or a button that submits a form, and it opens only one question of an FAQ, since they all share a layout. It opens up to 5 per page. Set `states` to change that, or `--no-states` (or `data-breakhound-ignore="states"` on an element) to leave them closed.
+It never clicks a link to another page or a button that submits a form, and it opens only one question of an FAQ, since they all share a layout, but every tab, since each shows something different. It opens up to 5 per page. Set `states` to change that, or `--no-states` (or `data-breakhound-ignore="states"` on an element) to leave them closed.
 
 ### A second opinion from a vision model (optional)
 
@@ -153,7 +159,7 @@ The folder is for you, not your repo, so it keeps itself out of git: breakhound
 
 ## Chrome extension
 
-The breakhound extension runs the same checks on the tab you have open, with nothing to install in your project. Get it from the [Chrome Web Store](https://chromewebstore.google.com/search/breakhound); it works on any page Chrome can open, from localhost to production. The quickest way in is to right-click the page and choose **Scan with breakhound**: the breakhound panel opens in Chrome's side panel and starts right away. Clicking the breakhound icon in the toolbar opens it ready to scan, and the same panel is a **breakhound** tab in DevTools. The page grows steadily from 320px to 1920px (or the widths you set) while the timeline fills in live: each run of widths that share a layout, every width where the layout changes, and where something breaks. Then you get:
+The breakhound extension runs the same checks on the tab you have open, with nothing to install in your project. Get it from the [Chrome Web Store](https://chromewebstore.google.com/detail/ddnmhnjmcokbfabeileblceehjhefkpc); it works on any page Chrome can open, from localhost to production. The quickest way in is to right-click the page and choose **Scan with breakhound**: the breakhound panel opens in Chrome's side panel and starts right away. Clicking the breakhound icon in the toolbar opens it ready to scan, and the same panel is a **breakhound** tab in DevTools. The page grows steadily from 320px to 1920px (or the widths you set) while the timeline fills in live: each run of widths that share a layout, every width where the layout changes, and where something breaks. Then you get:
 
 - the issues, each with its exact width ranges, the element, the numbers and the likely fix
 - the timeline: the layout bands, the media query widths, the changes no media or container query explains, and a bar for each issue across the widths it covers
@@ -296,7 +302,8 @@ Running breakhound through `npx` without installing it, you get `breakhound.conf
 | `baseUrl` | Scan this server instead of finding or starting the dev server |
 | `routes` | Scan exactly these routes instead of discovering them |
 | `include`, `exclude` | Route globs: `*` is one segment, `**` any number |
-| `samples` | A real URL for each dynamic route |
+| `samples` | A real URL for a dynamic route |
+| `params` | Real values for dynamic route parameters by name, for every route that uses them |
 | `maxRoutes` | Most routes per run (default 100) |
 | `server` | How to start the app: `{ command: 'npm run preview', port: 4173, timeout: 120 }` |
 | `widths` | `{ min, max, step }` in CSS pixels |
@@ -305,7 +312,7 @@ Running breakhound through `npx` without installing it, you get `breakhound.conf
 | `vision` | `true` to add a vision model's opinion, or `{ model, provider, widths }` |
 | `fix` | The model `breakhound fix` uses: `{ provider: 'ollama', model: 'qwen2.5-coder' }` |
 | `browsers` | Engines to check in: `["chromium", "webkit", "firefox"]` (default Chromium only) |
-| `states` | Most menus, dialogs and expandable sections to open per page (default 5), or `false` |
+| `states` | Most menus, dialogs, tabs and expandable sections to open per page (default 5), or `false` |
 | `concurrency` | Browser tabs to use at once (default half your CPU cores, up to 4) |
 | `memoryLimit` | Most memory the dev server and browser may use together, e.g. `"6GB"`, `"50%"` or `"off"` (default 60% of your memory) |
 
@@ -344,7 +351,7 @@ breakhound mcp                 Run the MCP server (your agent starts it)
 --fail-on <level>       Exit 1 at error, warning, info or none (default error)
 --pdf                   Also write report.pdf
 --no-screenshots        Skip screenshots
---no-states             Don't open menus, dialogs and expandable sections
+--no-states             Don't open menus, dialogs, tabs and expandable sections
 --browsers <list>       Also check other engines, e.g. chromium,webkit,firefox
 --vision                Also ask your own vision model what looks off (info only)
 --concurrency <n>       Browser tabs to use at once

package/dist/cli.js

@@ -693,6 +693,8 @@ function describeState(state) {
   switch (state.kind) {
     case "dialog":
       return named ? `with the "${state.label}" dialog open` : "with the dialog open";
+    case "tab":
+      return named ? `with the "${state.label}" tab open` : "with another tab open";
     case "details":
     case "disclosure":
       return named ? `with "${state.label}" expanded` : "with the section expanded";
@@ -1303,6 +1305,24 @@ function plural(n, word) {
 function routeLabel(route) {
   return route.route || new URL(route.url).pathname;
 }
+function leftOutHint(routes) {
+  const skipped = routes.filter((r) => r.status === "skipped");
+  if (!skipped.length) return null;
+  const names = /* @__PURE__ */ new Set();
+  for (const r of skipped) {
+    const named = r.error?.match(/nothing gives (.+) a value/)?.[1] ?? "";
+    for (const m of named.matchAll(/\[([^\]]+)\]/g)) names.add(m[1]);
+  }
+  const key = (n) => /^[A-Za-z_$][\w$]*$/.test(n) ? n : `'${n}'`;
+  if (names.size) return `params: { ${[...names].map((n) => `${key(n)}: '1'`).join(", ")} }`;
+  const first = skipped[0].route;
+  const example = first.replace(/\[\[?\.\.\.[^\]]+\]\]?/g, "a/b").replace(/\[\[?[^\]]+\]\]?/g, "1");
+  return `samples: { '${first}': '${example}' }`;
+}
+
+// ../report/src/brand.ts
+var MARK_PNG = "data:image/png;base64,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";
+var WORDMARK_PNG = "data:image/png;base64,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";
 
 // ../report/src/markdown.ts
 var SEVERITY_ICON = { error: "\u2716", warning: "\u26A0", info: "\u2139" };
@@ -1364,7 +1384,7 @@ function renderSummary(result) {
     [
       "Routes left out",
       result.routes.filter((r) => r.status === "redirect" || r.status === "skipped"),
-      result.routes.some((r) => r.status === "skipped") ? 'Give dynamic routes a real URL with `samples` in your config, e.g. `{ "/products/[id]": "/products/42" }`.' : void 0
+      leftOutHint(result.routes) ? `Give dynamic routes real values in your config, e.g. \`${leftOutHint(result.routes)}\` (replace the 1s with real ones).` : void 0
     ]
   ];
   for (const [title, routes, hint] of sections) {
@@ -1547,6 +1567,7 @@ function buildData(result, options) {
       baseUrl: result.project.baseUrl
     },
     summary: result.summary,
+    leftOutHint: leftOutHint(result.routes),
     routes: result.routes.map((r) => ({
       route: routeLabel(r),
       url: r.url,
@@ -1586,7 +1607,7 @@ function renderHtml(result, options = {}) {
 <body>
 <header class="top">
   <div class="wrap top-inner">
-    <div class="brand"><span class="mark" aria-hidden="true"></span><span>breakhound</span></div>
+    <div class="brand" role="img" aria-label="breakhound"><span class="mark"></span><span class="word"></span></div>
     <div class="top-actions">
       <button type="button" class="btn primary" id="copy-all">Copy fix prompt</button>
     </div>
@@ -1657,8 +1678,10 @@ code, .mono { font-family: var(--mono); font-size: 13px; }
 
 .top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
 .top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
-.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -.01em; }
-.mark { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, var(--accent) 0 55%, var(--error) 55%); }
+.brand { display: flex; align-items: center; gap: 7px; color: var(--text); }
+.brand .mark, .brand .word { display: inline-block; background: currentColor; mask-position: center; mask-size: contain; mask-repeat: no-repeat; }
+.brand .mark { width: 27px; height: 20px; mask-image: url("${MARK_PNG}"); }
+.brand .word { width: 95px; height: 18px; mask-image: url("${WORDMARK_PNG}"); }
 .btn { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
 .btn:hover { border-color: var(--tick); }
 .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
@@ -1773,7 +1796,7 @@ dd code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
   a { color: inherit; }
 }
 `;
-var JS = String.raw`
+var JS = `
 (() => {
   const D = JSON.parse(document.getElementById('bh-data').textContent);
   const $ = (id) => document.getElementById(id);
@@ -1792,7 +1815,7 @@ var JS = String.raw`
     for (const kid of kids.flat(Infinity)) if (kid != null && kid !== false) n.append(kid);
     return n;
   };
-  const range = (r) => (r.from === r.to ? r.from + 'px' : r.from + '–' + r.to + 'px');
+  const range = (r) => (r.from === r.to ? r.from + 'px' : r.from + '\u2013' + r.to + 'px');
   const ranges = (rs) => rs.map(range).join(', ');
   const plural = (n, w) => n + ' ' + w + (n === 1 ? '' : 's');
 
@@ -1818,10 +1841,10 @@ var JS = String.raw`
   const started = new Date(D.meta.startedAt);
   const scanned = D.routes.filter((r) => r.status === 'scanned');
   $('meta').textContent = [
-    D.meta.baseUrl, plural(scanned.length, 'page'), min + '–' + max + 'px',
+    D.meta.baseUrl, plural(scanned.length, 'page'), min + '\u2013' + max + 'px',
     started.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' }),
     (D.meta.durationMs / 1000).toFixed(1) + 's',
-  ].filter(Boolean).join(' · ');
+  ].filter(Boolean).join(' \xB7 ');
   $('version').textContent = D.meta.version;
   $('copy-all').addEventListener('click', () => copy(D.prompt, 'Fix prompt copied. Paste it into your coding agent.'));
   if (!s.issues) $('copy-all').hidden = true;
@@ -1891,11 +1914,9 @@ var JS = String.raw`
   }
   const skipped = D.routes.filter((r) => r.status === 'skipped' || r.status === 'redirect');
   if (skipped.length) {
-    const dynamic = skipped.find((r) => r.status === 'skipped');
-    const example = dynamic && dynamic.route.replace(/\[\[?\.\.\.[^\]]+\]\]?/g, 'a/b').replace(/\[\[?[^\]]+\]\]?/g, '1');
     $('failed').append(el('div', { class: 'callout' },
       el('h2', { text: plural(skipped.length, 'route') + ' left out' }),
-      dynamic ? el('p', {}, 'Give dynamic routes a real URL in your config: ', el('code', { text: "samples: { '" + dynamic.route + "': '" + example + "' }" })) : false,
+      D.leftOutHint ? el('p', {}, 'Give dynamic routes real values in your config (replace the 1s with real ones): ', el('code', { text: D.leftOutHint })) : false,
       listing(skipped)));
   }
   const shaky = D.routes.filter((r) => r.warnings.length);
@@ -2217,9 +2238,6 @@ function globMatches(glob, path) {
   }
   return new RegExp(`^${source}/?$`).test(path);
 }
-function examplePath(path) {
-  return path.replace(/\[\[?\.\.\.[^\]]+\]\]?/g, "a/b").replace(/\[\[?[^\]]+\]\]?/g, "1");
-}
 
 // ../routes/src/syntax.ts
 function joinPaths(base, path) {
@@ -3055,26 +3073,44 @@ function detectProject(cwd) {
 }
 
 // ../routes/src/queue.ts
+function namesIn(label) {
+  return [...label.matchAll(/\[\[?(?:\.\.\.)?([^\]]+)\]\]?/g)].map((m) => m[1]);
+}
+function isPlainParam(s) {
+  return s.kind === "param" && !s.optional && namesIn(s.label).length === 1 && s.label.startsWith("[") && s.label.endsWith("]");
+}
+function prefixOf(segments, i) {
+  return `/${segments.slice(0, i + 1).map((s) => s.kind === "static" ? s.value : s.label).join("/")}`;
+}
 function trimSlash(path) {
   return path.length > 1 ? path.replace(/\/+$/, "") : path;
 }
 var RouteQueue = class {
-  constructor(baseUrl, samples, crawler, hashRouting = false) {
+  constructor(baseUrl, samples, crawler, hashRouting = false, params = {}) {
     this.baseUrl = baseUrl;
     this.samples = samples;
     this.crawler = crawler;
     this.hashRouting = hashRouting;
+    this.params = params;
     this.basePath = baseUrl ? new URL(baseUrl).pathname.replace(/\/+$/, "") : "";
   }
   baseUrl;
   samples;
   crawler;
   hashRouting;
+  params;
   jobs = [];
   /** App paths already scanned or planned, so redirects to them aren't scanned twice. */
   planned = /* @__PURE__ */ new Set();
   /** Dynamic routes still waiting for a link that fits them. */
   waiting = /* @__PURE__ */ new Map();
+  /** For routes left waiting at the end: the parameters nothing gave a value. */
+  missing = /* @__PURE__ */ new Map();
+  /**
+   * Values parameters took in real URLs, under the route they belong to: `/cohorts/[slug]` →
+   * `css-101`. Routes below it reuse them, since a child of a real page is real too.
+   */
+  seen = /* @__PURE__ */ new Map();
   patterns = /* @__PURE__ */ new Map();
   order = 0;
   /** Where the app is mounted on its server, e.g. "/docs"; "" at the root. */
@@ -3128,17 +3164,84 @@ var RouteQueue = class {
       return;
     }
     const sample = this.samples[pattern.path];
-    if (sample) this.add({ url: this.urlFor(sample), route: pattern.path });
-    else this.waiting.set(pattern.path, pattern);
+    if (sample) {
+      const samplePath = /^https?:\/\//i.test(sample) ? this.appPath(new URL(sample).pathname) : sample;
+      if (samplePath !== null) this.learn(pattern, samplePath);
+      this.add({ url: this.urlFor(sample), route: pattern.path });
+    } else this.waiting.set(pattern.path, pattern);
+  }
+  /** Remembers the values a real URL gives a route's parameters. */
+  learn(pattern, path) {
+    if (pattern.segments.some((s) => s.kind === "rest" || s.kind === "param" && s.optional))
+      return;
+    const parts = path.split(/[?#]/)[0].split("/").filter(Boolean);
+    if (parts.length !== pattern.segments.length) return;
+    pattern.segments.forEach((s, i) => {
+      if (isPlainParam(s)) {
+        const key = prefixOf(pattern.segments, i);
+        if (!this.seen.has(key)) this.seen.set(key, parts[i]);
+      }
+    });
+  }
+  /**
+   * A URL for a dynamic route from values already known: a parent route's real URL, then the
+   * config's params by name. Null, with the names still needed, when something is missing.
+   */
+  build(pattern) {
+    const parts = [];
+    const missing = [];
+    pattern.segments.forEach((s, i) => {
+      if (s.kind === "static") {
+        parts.push(s.value);
+        return;
+      }
+      const inherited = isPlainParam(s) ? this.seen.get(prefixOf(pattern.segments, i)) : void 0;
+      if (inherited !== void 0) {
+        parts.push(inherited);
+        return;
+      }
+      const names = namesIn(s.label);
+      const absent = names.filter((n) => this.params[n] === void 0);
+      if (absent.length) {
+        if (!s.optional) missing.push(...absent);
+        return;
+      }
+      let value = s.label;
+      for (const n of names)
+        value = value.replace(/\[\[?(?:\.\.\.)?[^\]]+\]\]?/, () => this.params[n]);
+      parts.push(value.replace(/^\/+|\/+$/g, ""));
+    });
+    return missing.length ? { missing: [...new Set(missing)] } : { path: `/${parts.join("/")}` };
+  }
+  /**
+   * Gives the routes no link fitted a URL from known values, once the links have had their
+   * chance. Returns how many were added; the rest stay waiting, with what they're missing.
+   */
+  fillWaiting() {
+    let added = 0;
+    for (const [key, pattern] of this.waiting) {
+      const built = this.build(pattern);
+      if ("missing" in built) {
+        this.missing.set(key, built.missing);
+        continue;
+      }
+      this.waiting.delete(key);
+      this.missing.delete(key);
+      this.add({ url: this.urlFor(built.path), route: pattern.path });
+      added++;
+    }
+    return added;
   }
   /** Links from a scanned page: samples for dynamic routes, and new pages when crawling. */
   addLinks(found) {
     if (!this.baseUrl) return;
     const links = found.map((link) => this.linkPath(link)).filter((p) => p !== null && isCrawlable(p));
-    if (this.waiting.size) {
+    if (this.patterns.size) {
       for (const link of links) {
         const route = routeFor(link, this.patterns.values());
-        if (route && this.waiting.has(route.path)) {
+        if (!route?.dynamic) continue;
+        this.learn(route, link);
+        if (this.waiting.has(route.path)) {
           this.waiting.delete(route.path);
           this.add({ url: this.urlFor(link), route: route.path });
         }
@@ -4193,6 +4296,7 @@ var KNOWN_KEYS = /* @__PURE__ */ new Set([
   "include",
   "exclude",
   "samples",
+  "params",
   "maxRoutes",
   "server",
   "widths",
@@ -4239,6 +4343,14 @@ function validateConfig(config) {
       );
     }
   }
+  if (config.params !== void 0) {
+    const ok = config.params && typeof config.params === "object" && !Array.isArray(config.params) && Object.values(config.params).every((v) => typeof v === "string" && v !== "");
+    if (!ok) {
+      throw new Error(
+        `params must give dynamic route parameters a real value by name, like { "slug": "css-101" }`
+      );
+    }
+  }
   if (config.states !== void 0 && typeof config.states !== "boolean" && !(Number.isInteger(config.states) && config.states >= 0)) {
     throw new Error("states must be true, false, or the most menus and dialogs to open per page");
   }
@@ -4885,13 +4997,12 @@ function printNotes(result, hasSavedLogin) {
       `  ${styleText4("yellow", "\u25CB")} ${plural22(login, "page needs", "pages need")} a login. ${how}`
     );
   }
-  if (skipped.length) {
+  const hint = leftOutHint(skipped);
+  if (hint) {
     console.log(
-      `  ${styleText4("dim", "\u2013")} ${plural22(skipped.length, "dynamic route", "dynamic routes")} had no link to follow. Give each a real URL with samples in your config, e.g.`
+      `  ${styleText4("dim", "\u2013")} ${plural22(skipped.length, "dynamic route", "dynamic routes")} had no link to follow. Give them real values in your config (replace the 1s), e.g.`
     );
-    const first = skipped[0]?.route;
-    if (first)
-      console.log(styleText4("dim", `     samples: { '${first}': '${examplePath(first)}' }`));
+    console.log(styleText4("dim", `     ${hint}`));
   }
 }
 
@@ -5103,6 +5214,9 @@ async function pool(items, size, work) {
   };
   await Promise.all(Array.from({ length: Math.min(size, items.length) }, worker));
 }
+function leftOutReason(missing) {
+  return missing.length ? `No page links to it, and nothing gives ${missing.map((n) => `[${n}]`).join(", ")} a value.` : "No page links to it, so there was no real URL to try.";
+}
 async function drain(queue, size, work) {
   const active = /* @__PURE__ */ new Set();
   for (; ; ) {
@@ -5111,7 +5225,8 @@ async function drain(queue, size, work) {
       const p = work(job).finally(() => active.delete(p));
       active.add(p);
     }
-    if (!active.size) return;
+    if (!active.size && !queue.fillWaiting()) return;
+    if (!active.size) continue;
     await Promise.race(active);
   }
 }
@@ -5159,7 +5274,8 @@ async function scan(req) {
         app.baseUrl,
         config.samples ?? {},
         plan.crawl ? new Crawler(max2, (path) => isWanted(path, config)) : null,
-        plan.hashRouting
+        plan.hashRouting,
+        config.params ?? {}
       );
       for (const url of plan.urls) queue.add({ url, route: routeOf(url, cwd) });
       for (const p of plan.patterns) {
@@ -5307,7 +5423,7 @@ async function scan(req) {
         url: "",
         finalUrl: "",
         status: "skipped",
-        error: "No page links to it, so there was no real URL to try.",
+        error: leftOutReason(queue.missing.get(pattern.path) ?? []),
         pageErrors: [],
         warnings: [],
         breakpoints: { observed: [], declared: [], unexplained: [] },
@@ -5906,8 +6022,8 @@ var TEMPLATE = (baseUrl, typed) => `${typed ? "import { defineConfig } from '@se
   // Every route is found automatically. To narrow it down:
   // include: ['/blog/**'],
   // exclude: ['/admin/**'],
-  // A real URL for dynamic routes that no page links to:
-  // samples: { '/products/[id]': '/products/42' },
+  // Real values for dynamic route parameters no page links to, by name:
+  // params: { slug: 'my-first-post', id: '42' },
 
   // Viewport widths to sweep, in CSS pixels.
   widths: { min: 320, max: 1920 },
@@ -7022,7 +7138,7 @@ Scan options
   --out <dir>           Report folder (default .breakhound)
   --pdf                 Also write report.pdf
   --no-screenshots      Skip issue screenshots
-  --no-states           Don't open menus, dialogs and expandable sections
+  --no-states           Don't open menus, dialogs, tabs and expandable sections
   --browsers <list>     Also check other engines, e.g. chromium,webkit,firefox
   --vision              Also ask your own vision model what looks off (info only;
                         uses the same model setup as fix)

package/dist/index.d.cts

@@ -37,8 +37,9 @@ export interface IgnoreRule {
 /**
  * What a toggle opens. `menu`: navigation menus, drawers and dropdowns.
  * `disclosure`: anything else with aria-expanded, such as accordions.
+ * `tab`: a tab (role="tab") that isn't selected.
  */
-export type ToggleKind = "menu" | "dialog" | "popover" | "details" | "disclosure";
+export type ToggleKind = "menu" | "dialog" | "popover" | "details" | "disclosure" | "tab";
 export interface WidthRange {
 	from: number;
 	to: number;
@@ -172,6 +173,12 @@ export interface BreakhoundConfig {
 	exclude?: string[];
 	/** A real URL for each dynamic route, e.g. { '/products/[id]': '/products/42' }. */
 	samples?: Record<string, string>;
+	/**
+	 * Values for dynamic route parameters by name, for routes no link on your pages fits,
+	 * e.g. { slug: 'css-101', submissionId: '42' }. Every route using those names is filled in;
+	 * a parent route's real URL fills its own parameters for the routes below it already.
+	 */
+	params?: Record<string, string>;
 	/** Most routes to scan in one run (default 100). */
 	maxRoutes?: number;
 	/** How to start the app when it isn't running, if not with its "dev" script. */

package/dist/index.d.ts

@@ -37,8 +37,9 @@ export interface IgnoreRule {
 /**
  * What a toggle opens. `menu`: navigation menus, drawers and dropdowns.
  * `disclosure`: anything else with aria-expanded, such as accordions.
+ * `tab`: a tab (role="tab") that isn't selected.
  */
-export type ToggleKind = "menu" | "dialog" | "popover" | "details" | "disclosure";
+export type ToggleKind = "menu" | "dialog" | "popover" | "details" | "disclosure" | "tab";
 export interface WidthRange {
 	from: number;
 	to: number;
@@ -172,6 +173,12 @@ export interface BreakhoundConfig {
 	exclude?: string[];
 	/** A real URL for each dynamic route, e.g. { '/products/[id]': '/products/42' }. */
 	samples?: Record<string, string>;
+	/**
+	 * Values for dynamic route parameters by name, for routes no link on your pages fits,
+	 * e.g. { slug: 'css-101', submissionId: '42' }. Every route using those names is filled in;
+	 * a parent route's real URL fills its own parameters for the routes below it already.
+	 */
+	params?: Record<string, string>;
 	/** Most routes to scan in one run (default 100). */
 	maxRoutes?: number;
 	/** How to start the app when it isn't running, if not with its "dev" script. */

package/dist/inject.js

@@ -1804,6 +1804,7 @@
 
   // ../analyzers/src/states.ts
   var CANDIDATES = [
+    '[role="tab"]',
     "[aria-expanded]",
     "[aria-haspopup]",
     "[popovertarget]",
@@ -1866,6 +1867,8 @@
       return details.open || details.querySelector(":scope > summary") !== el ? null : "details";
     }
     if (el.matches('input, select, textarea, [role="combobox"], [contenteditable]')) return null;
+    if (el.getAttribute("role") === "tab")
+      return el.getAttribute("aria-selected") === "true" ? null : "tab";
     if (el.hasAttribute("popovertarget")) {
       return el.getAttribute("popovertargetaction") === "hide" ? null : "popover";
     }
@@ -1894,10 +1897,18 @@
     const href = el instanceof HTMLAnchorElement ? el.getAttribute("href") : null;
     return !href || href.startsWith("#") || /^javascript:/i.test(href);
   }
-  function isShown(el) {
+  function sidewaysScroller(el) {
+    for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+      const { overflowX } = getComputedStyle(p);
+      if ((overflowX === "auto" || overflowX === "scroll") && p.scrollWidth > p.clientWidth) return p;
+    }
+    return null;
+  }
+  function isShown(el, scrolls = false) {
     const r = el.getBoundingClientRect();
     if (r.width < 1 || r.height < 1) return false;
-    if (r.right <= 0 || r.left >= window.innerWidth) return false;
+    if ((r.right <= 0 || r.left >= window.innerWidth) && !(scrolls && sidewaysScroller(el)))
+      return false;
     const check = el.checkVisibility;
     if (check && !check.call(el, { opacityProperty: true, visibilityProperty: true })) return false;
     if (!check && getComputedStyle(el).visibility === "hidden") return false;
@@ -1927,6 +1938,7 @@
     menu: 0,
     dialog: 0,
     popover: 1,
+    tab: 1,
     disclosure: 2,
     details: 3
   };
@@ -1937,7 +1949,7 @@
       if (out.length >= MAX_TOGGLES) break;
       if (el.closest(DEV_OVERLAYS)) continue;
       const kind = kindOf(el);
-      if (!kind || !safeToClick(el) || !isShown(el) || ignored(el, rules)) continue;
+      if (!kind || !safeToClick(el) || !isShown(el, kind === "tab") || ignored(el, rules)) continue;
       const panel = targetOf(el, "aria-controls") ?? targetOf(el, "popovertarget");
       if (panel) {
         if (panels.has(panel)) continue;
@@ -1948,19 +1960,30 @@
         selector: cachedSelector(el),
         kind,
         label: shortLabel(el, kind),
-        group: groupOf(el, kind),
+        // Each tab shows different content, unlike the questions of an FAQ.
+        group: kind === "tab" ? `tab|${cachedSelector(el)}` : groupOf(el, kind),
         priority: PRIORITY[kind] * 2 + (inHeader ? 0 : 1)
       });
     }
     return out;
   }
-  function toggleState(selector) {
+  var toggles = /* @__PURE__ */ new Map();
+  function toggleOf(selector) {
+    const known = toggles.get(selector);
+    if (known?.isConnected) return known;
     const el = resolveSelector(selector);
+    if (el) toggles.set(selector, el);
+    return el;
+  }
+  function toggleState(selector) {
+    const el = toggleOf(selector);
     if (!el) return { shown: false, open: null };
-    const shown = isShown(el);
+    const shown = isShown(el, el.getAttribute("role") === "tab");
     if (el.matches("details > summary")) {
       return { shown, open: el.parentElement.open };
     }
+    if (el.getAttribute("role") === "tab")
+      return { shown, open: el.getAttribute("aria-selected") === "true" };
     const expanded = el.getAttribute("aria-expanded");
     if (expanded === "true" || expanded === "false") return { shown, open: expanded === "true" };
     const target = targetOf(el, "popovertarget") ?? targetOf(el, "commandfor");
@@ -1975,17 +1998,23 @@
     return { shown, open: null };
   }
   function setDetails(selector, open) {
-    const details = resolveSelector(selector)?.parentElement;
+    const details = toggleOf(selector)?.parentElement;
     if (details instanceof HTMLDetailsElement) details.open = open;
   }
   function clickPoint(selector) {
-    const el = resolveSelector(selector);
+    const el = toggleOf(selector);
     if (!el) return null;
     let r = el.getBoundingClientRect();
     if (r.top < 0 || r.bottom > window.innerHeight) {
       el.scrollIntoView({ block: "center", inline: "nearest" });
       r = el.getBoundingClientRect();
     }
+    const row = r.left < 0 || r.right > window.innerWidth ? sidewaysScroller(el) : null;
+    if (row) {
+      const box = row.getBoundingClientRect();
+      row.scrollLeft += r.left + r.width / 2 - (box.left + box.width / 2);
+      r = el.getBoundingClientRect();
+    }
     const x = Math.min(window.innerWidth - 1, Math.max(0, r.left + r.width / 2));
     const y = Math.min(window.innerHeight - 1, Math.max(0, r.top + r.height / 2));
     let hit = document.elementFromPoint(x, y);
@@ -2006,7 +2035,7 @@
     const seen = before;
     before = null;
     if (!seen) return null;
-    const trigger = resolveSelector(toggle);
+    const trigger = toggleOf(toggle);
     let best = null;
     for (const el of document.body.querySelectorAll("*")) {
       if (seen.has(el) || trigger && (trigger === el || trigger.contains(el))) continue;

package/dist/schema.json

@@ -38,6 +38,13 @@
       },
       "description": "A real URL for each dynamic route, e.g. { '/products/[id]': '/products/42' }."
     },
+    "params": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      },
+      "description": "Values for dynamic route parameters by name, for routes no link on your pages fits, e.g. { slug: 'css-101', submissionId: '42' }. Every route using those names is filled in; a parent route's real URL fills its own parameters for the routes below it already."
+    },
     "maxRoutes": {
       "type": "number",
       "description": "Most routes to scan in one run (default 100)."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seybel/breakhound",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Find where your layout breaks across every viewport width, then hand the fix to your coding agent.",
   "keywords": [
     "responsive",