@seybel/breakhound 1.0.3 → 1.0.4

package/README.md

@@ -128,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)
 
@@ -159,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
@@ -312,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) |
 
@@ -351,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";
@@ -7136,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;

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;

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/package.json

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