@seybel/breakhound 1.0.9 → 1.0.10

package/dist/cli.js

@@ -77,6 +77,7 @@ function findingKey(f) {
 }
 function severityScore(f) {
   const e = f.evidence;
+  if (typeof e.dayWidthPx === "number") return -e.dayWidthPx;
   if (typeof e.overflowPx === "number") return e.overflowPx;
   if (typeof e.overlapWidth === "number" && typeof e.overlapHeight === "number") {
     return e.overlapWidth * e.overlapHeight;
@@ -173,6 +174,9 @@ function buildIssues(route, widths, results) {
       evidence = { ...evidence, fixedWidthPx: onlyWidth };
       suggestion = `It stays ${onlyWidth}px wide no matter the screen size. Replace the fixed width with max-width: 100% (or a fluid width) so it can shrink.`;
     }
+    if (f.detector === "calendar") {
+      suggestion = calendarSuggestion(ranges, widths[widths.length - 1] ?? 0, f.evidence);
+    }
     const issue = {
       id: issueId(route, f),
       fingerprint: findingKey(f),
@@ -195,6 +199,18 @@ function buildIssues(route, widths, results) {
     (a, b) => order[a.severity] - order[b.severity] || (a.ranges[0]?.from ?? 0) - (b.ranges[0]?.from ?? 0)
   );
 }
+function calendarSuggestion(ranges, widest, evidence) {
+  const last = ranges[ranges.length - 1]?.to ?? widest;
+  const list = (where) => `show the days as a list ${where} (an agenda view, one day per row), the usual choice for calendars on phones`;
+  if (last >= widest) {
+    return `Its 7 days don't fit side by side at any width up to ${widest}px. Give the calendar more room or show less in each day, and ${list("on small screens")}.`;
+  }
+  const below = `below ${last + 1}px`;
+  if (evidence.scrollsSideways) {
+    return `It already scrolls sideways, but its days are still too narrow ${below}. Give the grid a min-width so each day keeps its room as it scrolls, or ${list(below)}. Narrower days, or fewer than 7 columns, won't fix it.`;
+  }
+  return `A calendar needs its 7 days side by side, and ${below} they don't fit. Narrower days, or fewer than 7 columns, won't fix it. Either let it scroll sideways inside its own box ${below} (a wrapper with overflow-x: auto, and a min-width on the grid), which keeps one layout; or ${list(below)}.`;
+}
 function joinRanges(ranges) {
   const sorted = [...ranges].sort((a, b) => a.from - b.from);
   const out = [];
@@ -918,6 +934,7 @@ var DETECTOR_IDS = [
   "unexpected-wrap",
   "clipped-text",
   "squished-text",
+  "calendar",
   "distorted-media",
   "small-tap-target",
   "tiny-text",
@@ -1272,6 +1289,7 @@ var DETECTOR_LABELS = {
   "unexpected-wrap": "Unexpected wrap",
   "clipped-text": "Clipped text",
   "squished-text": "Squished text",
+  calendar: "Calendar too narrow",
   "distorted-media": "Distorted image",
   "small-tap-target": "Small tap target",
   "tiny-text": "Tiny text",
@@ -5317,12 +5335,34 @@ function enabledDetectors(config) {
   if (!overrides) return void 0;
   return DETECTOR_IDS.filter((id) => overrides[id] !== false);
 }
+var SEVERITY_RANK = { error: 0, warning: 1, info: 2 };
+function calendarChecks(issue, overrides) {
+  return String(issue.evidence.checksInside ?? "").split(" ").filter(Boolean).map((part) => {
+    const [id = "", severity = "error"] = part.split(":");
+    const o = overrides[id];
+    return { id, severity: typeof o === "string" ? o : severity };
+  }).filter((c) => overrides[c.id] !== false);
+}
+function keepIssue(issue, overrides) {
+  if (overrides[issue.detector] === false) return false;
+  if (issue.detector !== "calendar" || !issue.evidence.checksInside) return true;
+  return calendarChecks(issue, overrides).length > 0;
+}
 function applySeverity(routes, config) {
   const overrides = config.detectors ?? {};
   for (const route of routes) {
     for (const issue of route.issues) {
       const o = overrides[issue.detector];
       if (o === "error" || o === "warning" || o === "info") issue.severity = o;
+      else if (issue.detector === "calendar") {
+        const checks = calendarChecks(issue, overrides);
+        if (checks.length) {
+          issue.severity = checks.reduce(
+            (worst, c) => SEVERITY_RANK[c.severity] < SEVERITY_RANK[worst] ? c.severity : worst,
+            "info"
+          );
+        }
+      }
     }
   }
 }
@@ -5600,7 +5640,7 @@ async function saveExtensionScan(sent, config, cwd) {
   const off = config.detectors ?? {};
   const routes = sent.routes.map((r) => ({
     ...r,
-    issues: r.issues.filter((i) => off[i.detector] !== false)
+    issues: r.issues.filter((i) => keepIssue(i, off))
   }));
   applySeverity(routes, config);
   relativeSources(routes, project?.root ?? cwd, project?.basePath ?? "", project?.workspace);
@@ -5772,7 +5812,7 @@ async function runVerify(req) {
       root: req.cwd
     });
     const off = req.config.detectors ?? {};
-    for (const r of now.routes) r.issues = r.issues.filter((i) => off[i.detector] !== false);
+    for (const r of now.routes) r.issues = r.issues.filter((i) => keepIssue(i, off));
     return finishVerify(req, baseline, now);
   }
   const { settings } = baseline;
@@ -6294,6 +6334,12 @@ function checkRoutes(value) {
     }
     for (const i of r.issues) {
       const element = isObject(i) ? i.element : null;
+      if (isObject(i) && typeof i.detector === "string" && !DETECTOR_IDS.includes(i.detector)) {
+        throw new HttpError(
+          400,
+          `This project's breakhound doesn't know the check "${i.detector.slice(0, 40)}" yet. Restart your agent with the latest breakhound to send it.`
+        );
+      }
       if (!isObject(i) || typeof i.id !== "string" || typeof i.title !== "string" || !DETECTOR_IDS.includes(i.detector) || !SEVERITIES.has(String(i.severity)) || !Array.isArray(i.ranges) || !isObject(element) || typeof element.selector !== "string") {
         throw new HttpError(400, "Bad issue");
       }
@@ -6349,7 +6395,9 @@ async function startBridge(opts) {
           name: "breakhound",
           version: opts.version,
           root: opts.root,
-          project: projectName(opts.root)
+          project: projectName(opts.root),
+          // So a newer extension sends only checks this version knows.
+          detectors: DETECTOR_IDS
         });
       case "/breakhound/match": {
         if (typeof body.url !== "string") throw new HttpError(400, "No url");
@@ -6430,7 +6478,14 @@ async function startBridge(opts) {
         checks.delete(check.id);
         clearTimeout(check.timer);
         if (typeof body.error === "string") check.reject(new Error(body.error.slice(0, 500)));
-        else check.resolve(checkRoutes(body.routes));
+        else {
+          try {
+            check.resolve(checkRoutes(body.routes));
+          } catch (error) {
+            check.reject(error instanceof Error ? error : new Error(String(error)));
+            throw error;
+          }
+        }
         return reply({});
       }
       default:
@@ -6543,7 +6598,7 @@ Before finishing, run verify with no routes to check every page.
 
 scan and verify answer within about 45 seconds. When one says it's still running, it carries on: call it again with the same arguments to get its result, rather than something else. It says what it's waiting for; if that's the developer's browser tab, ask them to bring it into view.
 
-Issues sent from the extension are checked again in the developer's own browser: verify asks the open breakhound panel to scan the pages, so their login and browser carry over. If no panel is open, verify says so; ask the developer to open it rather than calling scan, which replaces their issues with a headless scan.`;
+Issues sent from the extension are checked again in the developer's own browser: verify asks the open breakhound panel to scan the pages, so their login and browser carry over. If no panel is open, verify says so; ask the developer to open it rather than calling scan, which replaces their issues with a headless scan. Chrome doesn't draw a tab that's out of view, so before you first verify them, tell the developer in one line that breakhound is about to check your fixes in their Chrome tab, and that the tab needs to be in view (beside their editor is fine) until it's done.`;
 var FIX_PROMPT = `Fix the responsive layout issues breakhound found in this project.
 
 Start with list_issues: if I sent them from the breakhound extension they are already there, so don't scan again. Only scan when there are none.
@@ -6698,7 +6753,7 @@ function createTools() {
     {
       name: "verify",
       kind: "long",
-      description: "Scan routes again and compare with the baseline from scan: which issues are fixed, which are still there, and which are new (a change broke something, maybe at another width or on another route). Pass the routes you changed for a quick check, and nothing to check every route before you finish.",
+      description: "Scan routes again and compare with the baseline from scan: which issues are fixed, which are still there, and which are new (a change broke something, maybe at another width or on another route). Pass the routes you changed for a quick check, and nothing to check every route before you finish. Issues sent from the browser extension are checked in the developer's Chrome tab, which must be in view: tell them before you first call it.",
       inputSchema: {
         type: "object",
         properties: {
@@ -7124,11 +7179,16 @@ import { createInterface as createInterface3 } from "readline/promises";
 import { styleText as styleText8 } from "util";
 var SERVER_NAME = "breakhound";
 var PACKAGE = "@seybel/breakhound";
+var LATEST = `${PACKAGE}@latest`;
 function startsOtherPackage(args) {
-  return Array.isArray(args) && args.includes("breakhound") && !args.includes(PACKAGE);
+  return Array.isArray(args) && args.includes("breakhound") && !args.some((a) => typeof a === "string" && a.startsWith(PACKAGE));
+}
+function wroteUntagged(args) {
+  return Array.isArray(args) && args.includes(PACKAGE) && args.includes("mcp");
 }
+var toLatest = (args) => args.map((a) => a === PACKAGE ? LATEST : a);
 function serverCommand(platform = process.platform) {
-  const args = ["-y", PACKAGE, "mcp"];
+  const args = ["-y", LATEST, "mcp"];
   return platform === "win32" ? { command: "cmd", args: ["/c", "npx", ...args] } : { command: "npx", args };
 }
 function jsonClient(id, name, file, key, entry) {
@@ -7149,8 +7209,11 @@ ${JSON.stringify({ [SERVER_NAME]: entry }, null, 2)}`
         }
       }
       const existing = data[key]?.[SERVER_NAME];
-      if (existing && !startsOtherPackage(existing.args)) return null;
-      data[key] = { ...data[key], [SERVER_NAME]: entry };
+      if (existing && !startsOtherPackage(existing.args) && !wroteUntagged(existing.args)) {
+        return null;
+      }
+      const next = existing && wroteUntagged(existing.args) ? { ...existing, args: toLatest(existing.args) } : entry;
+      data[key] = { ...data[key], [SERVER_NAME]: next };
       return `${JSON.stringify(data, null, 2)}
 `;
     }
@@ -7170,6 +7233,9 @@ args = ${JSON.stringify(args).replaceAll(",", ", ")}
       const table = /^\[mcp_servers\.breakhound\]\n(?:(?!\[)[^\n]*\n?)*/m;
       const found = current?.match(table)?.[0];
       if (found) {
+        if (found.includes(`"${PACKAGE}"`)) {
+          return current.replace(table, found.replace(`"${PACKAGE}"`, `"${LATEST}"`));
+        }
         if (found.includes(PACKAGE) || !/["']breakhound["']/.test(found)) return null;
         return current.replace(table, `${block}${found.endsWith("\n\n") ? "\n" : ""}`);
       }
@@ -7256,7 +7322,10 @@ async function installMcp(cwd, options = {}) {
         console.log(
           `${styleText8("green", "\u2714")} ${client.name}: already set up in ${show(client.file, cwd)}`
         );
-      } else changes.push({ client, next });
+      } else {
+        const updating2 = !!current && /["']@?(?:seybel\/)?breakhound["']/.test(current);
+        changes.push({ client, next, updating: updating2 });
+      }
     } catch (error) {
       console.log(`${styleText8("yellow", "!")} ${client.name}: ${error.message}`);
     }
@@ -7266,10 +7335,20 @@ async function installMcp(cwd, options = {}) {
 ${NOT_SHOWING_UP}`);
     return 0;
   }
-  console.log("\nbreakhound will add its MCP server to:\n");
   const { command, args } = serverCommand();
-  for (const { client } of changes) {
-    console.log(`  ${client.name.padEnd(12)} ${show(client.file, cwd)}`);
+  const adding = changes.filter((c) => !c.updating);
+  const updating = changes.filter((c) => c.updating);
+  if (adding.length) {
+    console.log("\nbreakhound will add its MCP server to:\n");
+    for (const { client } of adding)
+      console.log(`  ${client.name.padEnd(12)} ${show(client.file, cwd)}`);
+  }
+  if (updating.length) {
+    console.log(
+      "\nbreakhound will update its MCP server, so your agent always starts the latest, in:\n"
+    );
+    for (const { client } of updating)
+      console.log(`  ${client.name.padEnd(12)} ${show(client.file, cwd)}`);
   }
   console.log(styleText8("dim", `
   The server runs: ${command} ${args.join(" ")}
@@ -7280,17 +7359,19 @@ ${NOT_SHOWING_UP}`);
       return 1;
     }
     const rl = createInterface3({ input: process.stdin, output: process.stdout });
-    const answer = (await rl.question("Add it? [Y/n] ")).trim().toLowerCase();
+    const answer = (await rl.question(adding.length ? "Add it? [Y/n] " : "Update it? [Y/n] ")).trim().toLowerCase();
     rl.close();
     if (answer && answer !== "y" && answer !== "yes") {
       console.log("Nothing changed.");
       return 0;
     }
   }
-  for (const { client, next } of changes) {
+  for (const { client, next, updating: updating2 } of changes) {
     mkdirSync3(dirname5(client.file), { recursive: true });
     writeFileSync8(client.file, next);
-    console.log(`${styleText8("green", "\u2714")} ${client.name}: added to ${show(client.file, cwd)}`);
+    console.log(
+      `${styleText8("green", "\u2714")} ${client.name}: ${updating2 ? "updated in" : "added to"} ${show(client.file, cwd)}`
+    );
   }
   console.log(
     `
@@ -7401,7 +7482,7 @@ function normalizeBaseUrl(url) {
     throw new Error(`--url must be a URL like http://localhost:3000 (got "${url}")`);
   }
 }
-var SEVERITY_RANK = { error: 0, warning: 1, info: 2 };
+var SEVERITY_RANK2 = { error: 0, warning: 1, info: 2 };
 function positiveInt(name, value) {
   if (value === void 0) return void 0;
   const n = Number(value);
@@ -7458,7 +7539,7 @@ async function main(argv) {
   const cwd = process.cwd();
   const [command, ...rest2] = positionals;
   const askedFailOn = values["fail-on"];
-  if (askedFailOn !== void 0 && askedFailOn !== "none" && !Object.hasOwn(SEVERITY_RANK, askedFailOn)) {
+  if (askedFailOn !== void 0 && askedFailOn !== "none" && !Object.hasOwn(SEVERITY_RANK2, askedFailOn)) {
     throw new Error("--fail-on must be one of: error, warning, info, none");
   }
   if (command === "init") {
@@ -7610,7 +7691,7 @@ ${formatVerify(v, severities.length ? severities : severitiesAtOrAbove("info"))}
   const concurrency = positiveInt("concurrency", values.concurrency);
   const maxRoutes = positiveInt("max-routes", values["max-routes"]);
   const failOn = values["fail-on"] ?? fileConfig.failOn ?? "error";
-  if (failOn !== "none" && !Object.hasOwn(SEVERITY_RANK, failOn)) {
+  if (failOn !== "none" && !Object.hasOwn(SEVERITY_RANK2, failOn)) {
     throw new Error("--fail-on must be one of: error, warning, info, none");
   }
   const browsers = values.browsers?.split(",").map((b) => b.trim().toLowerCase()).filter(Boolean);
@@ -7648,9 +7729,9 @@ ${formatVerify(v, severities.length ? severities : severitiesAtOrAbove("info"))}
   }
   if (result.routes.some((r) => FAILED_STATUSES.includes(r.status))) return 2;
   if (failOn === "none") return 0;
-  const threshold = SEVERITY_RANK[failOn];
+  const threshold = SEVERITY_RANK2[failOn];
   const failing = result.routes.some(
-    (r) => r.issues.some((i) => SEVERITY_RANK[i.severity] <= threshold)
+    (r) => r.issues.some((i) => SEVERITY_RANK2[i.severity] <= threshold)
   );
   return failing ? 1 : 0;
 }

package/dist/index.d.cts

@@ -1,5 +1,7 @@
 export type Severity = "error" | "warning" | "info";
-export type DetectorId = "page-overflow" | "content-overflow" | "media-overflow" | "overlap" | "unexpected-wrap" | "clipped-text" | "squished-text" | "distorted-media" | "small-tap-target" | "tiny-text" | "oversized-text" | "edge-gutter" | "viewport-meta"
+export type DetectorId = "page-overflow" | "content-overflow" | "media-overflow" | "overlap" | "unexpected-wrap" | "clipped-text" | "squished-text"
+/** What breaks inside a month or week calendar, reported once as the calendar. */
+ | "calendar" | "distorted-media" | "small-tap-target" | "tiny-text" | "oversized-text" | "edge-gutter" | "viewport-meta"
 /** Opt-in: what a vision model noticed in screenshots. Never run in the page. */
  | "vision";
 /** Where an element comes from in the project's code. */

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export type Severity = "error" | "warning" | "info";
-export type DetectorId = "page-overflow" | "content-overflow" | "media-overflow" | "overlap" | "unexpected-wrap" | "clipped-text" | "squished-text" | "distorted-media" | "small-tap-target" | "tiny-text" | "oversized-text" | "edge-gutter" | "viewport-meta"
+export type DetectorId = "page-overflow" | "content-overflow" | "media-overflow" | "overlap" | "unexpected-wrap" | "clipped-text" | "squished-text"
+/** What breaks inside a month or week calendar, reported once as the calendar. */
+ | "calendar" | "distorted-media" | "small-tap-target" | "tiny-text" | "oversized-text" | "edge-gutter" | "viewport-meta"
 /** Opt-in: what a vision model noticed in screenshots. Never run in the page. */
  | "vision";
 /** Where an element comes from in the project's code. */

package/dist/inject.js

@@ -559,6 +559,169 @@
     return info;
   }
 
+  // ../analyzers/src/detectors/calendar.ts
+  var FOLDED = /* @__PURE__ */ new Set([
+    "page-overflow",
+    "content-overflow",
+    "media-overflow",
+    "overlap",
+    "clipped-text",
+    "squished-text"
+  ]);
+  var EVENT_CELL_HEIGHT = 56;
+  var ALIGN_PX = 2;
+  var MAX_LEVELS = 10;
+  var ALIASES = { weds: "wednesday" };
+  var normalize = (text) => text.replace(/\s+/g, " ").trim().toLowerCase().replace(/[.,:]$/, "");
+  var names = null;
+  function weekNames() {
+    const langs = [document.documentElement.lang, navigator.language, "en"].filter(Boolean);
+    const key = langs.join("|");
+    if (names?.key === key) return names.weeks;
+    const weeks = [];
+    for (const lang of new Set(langs)) {
+      try {
+        const format = (weekday) => new Intl.DateTimeFormat(lang, { weekday, timeZone: "UTC" });
+        const days = Array.from({ length: 7 }, (_, i) => new Date(Date.UTC(2024, 0, 1 + i)));
+        const long = days.map((d) => normalize(format("long").format(d)));
+        const exact = days.map(
+          (d, i) => /* @__PURE__ */ new Set([
+            long[i],
+            normalize(format("short").format(d)),
+            normalize(format("narrow").format(d))
+          ])
+        );
+        weeks.push({ long, exact });
+      } catch {
+      }
+    }
+    names = { key, weeks };
+    return weeks;
+  }
+  function isDay(text, week, day) {
+    if (week.exact[day]?.has(text) || ALIASES[text] === week.long[day]) return true;
+    return text.length >= 2 && (week.long[day]?.startsWith(text) ?? false);
+  }
+  function isWeek(texts) {
+    if (texts.length !== 7 || texts.some((t) => !t)) return false;
+    return weekNames().some(
+      (week) => Array.from({ length: 7 }, (_, start) => start).some(
+        (start) => texts.every((t, i) => isDay(t, week, (start + i) % 7))
+      )
+    );
+  }
+  var lined = (a, b) => Math.abs(a.rect.left - b.rect.left) <= ALIGN_PX && Math.abs(a.rect.width - b.rect.width) <= ALIGN_PX;
+  function dayCells(snap, scope, weekdays) {
+    const header = new Set(weekdays.map((w) => w.el));
+    const out = [];
+    for (const el of scope.querySelectorAll("*")) {
+      if (header.has(el) || weekdays.some((w) => w.el.contains(el))) continue;
+      const rec = snap.byElement.get(el);
+      if (!rec || rec.rect.height < 1) continue;
+      if (out.some((o) => o.el.contains(el))) continue;
+      if (weekdays.some((w) => lined(w, rec)) && rec.rect.top >= (weekdays[0]?.rect.bottom ?? 0) - 1)
+        out.push(rec);
+    }
+    return out;
+  }
+  function holdsEvents(days) {
+    const heights = days.map((d) => d.rect.height).sort((a, b) => a - b);
+    return (heights[Math.floor(heights.length / 2)] ?? 0) >= EVENT_CELL_HEIGHT;
+  }
+  function shownText(el) {
+    const text = el instanceof HTMLElement ? el.innerText : el.textContent;
+    return normalize((text ?? "").replace(/\d+/g, " "));
+  }
+  function weekRow(snap, cells) {
+    for (let start = 0; start <= 1 && start + 7 <= cells.length; start++) {
+      const row = cells.slice(start, start + 7).map((c) => snap.byElement.get(c)).filter((r) => !!r && r.rect.width > 0);
+      if (row.length !== 7 || !isWeek(row.map((r) => shownText(r.el)))) continue;
+      const tops = row.map((r) => Math.round(r.rect.top));
+      if (Math.max(...tops) - Math.min(...tops) <= ALIGN_PX) return row;
+    }
+    return null;
+  }
+  function scrollsSideways(snap, el) {
+    for (let p = el; p && p !== document.body; p = composedParent(p)) {
+      const overflow = snap.byElement.get(p)?.style.overflowX;
+      if (overflow === "auto" || overflow === "scroll") return true;
+    }
+    return false;
+  }
+  function findCalendars(snap) {
+    const found = [];
+    for (const rec of snap.records) {
+      const children = renderedChildren(rec.el);
+      if (children.length < 7) continue;
+      if (found.some((c) => c.root.contains(rec.el))) continue;
+      const weekdays = weekRow(snap, children);
+      if (!weekdays) continue;
+      let scope = rec.el;
+      for (let level = 0; scope && level < MAX_LEVELS; level++, scope = composedParent(scope)) {
+        if (scope === document.body) break;
+        const days = dayCells(snap, scope, weekdays);
+        const columns = new Set(days.map((d) => weekdays.findIndex((w) => lined(w, d))));
+        if (days.length < 7 || columns.size < 7) continue;
+        if (holdsEvents(days)) {
+          found.push({ root: scope, weekdays, days, scrolls: scrollsSideways(snap, scope) });
+        }
+        break;
+      }
+    }
+    return found;
+  }
+  var RANK = { error: 0, warning: 1, info: 2 };
+  function inside(root, el) {
+    for (let p = el ?? null; p; p = composedParent(p)) if (p === root) return true;
+    return false;
+  }
+  function foldCalendars(snap, findings, keep) {
+    const calendars = findCalendars(snap).filter((c) => keep(c.root));
+    if (!calendars.length) return findings;
+    const folded = /* @__PURE__ */ new Map();
+    const rest = [];
+    for (const f of findings) {
+      const calendar = FOLDED.has(f.detector) ? calendars.find(
+        (c) => inside(c.root, elementOf(f.element)) && (!f.related || inside(c.root, elementOf(f.related)))
+      ) : void 0;
+      if (!calendar) {
+        rest.push(f);
+        continue;
+      }
+      folded.set(calendar, [...folded.get(calendar) ?? [], f]);
+    }
+    for (const [calendar, list] of folded) {
+      const severity = list.reduce(
+        (worst, f) => RANK[f.severity] < RANK[worst] ? f.severity : worst,
+        "info"
+      );
+      const dayWidth = Math.round(Math.min(...calendar.weekdays.map((w) => w.rect.width)) * 10) / 10;
+      const kinds = [...new Map(list.map((f) => [f.detector, f])).values()];
+      const checks = /* @__PURE__ */ new Map();
+      for (const f of list) {
+        const was = checks.get(f.detector);
+        if (!was || RANK[f.severity] < RANK[was]) checks.set(f.detector, f.severity);
+      }
+      rest.push({
+        detector: "calendar",
+        severity,
+        title: "Calendar's 7 days don't fit side by side",
+        element: describe(calendar.root),
+        evidence: {
+          dayWidthPx: dayWidth,
+          elementsInside: new Set(list.map((f) => f.element.selector)).size,
+          found: kinds.map((f) => `${f.title} at ${f.element.selector}`).join("; "),
+          checksInside: [...checks].map(([id, s]) => `${id}:${s}`).join(" "),
+          ...calendar.scrolls ? { scrollsSideways: true } : {}
+        },
+        styles: {},
+        suggestion: "A calendar needs its 7 days side by side, so narrower days or fewer columns won't fix it. Let it scroll sideways inside its own box, or show the days as a list (an agenda view) on small screens.",
+        lineage: lineage(calendar.root)
+      });
+    }
+    return rest;
+  }
+
   // ../analyzers/src/detectors/page-overflow.ts
   var TOLERANCE = 0.5;
   var SIDEWAYS_CONTENT = /* @__PURE__ */ new Set(["TABLE", "PRE", "CODE"]);
@@ -1117,6 +1280,13 @@
   function name(rec) {
     return `\`${describe(rec.el).selector}\``;
   }
+  function itemsFit(grid) {
+    const { left, right } = grid.rect;
+    return Array.from(grid.el.children).every((child) => {
+      const r = child.getBoundingClientRect();
+      return r.width === 0 || r.left >= left - 1 && r.right <= right + 1;
+    });
+  }
   function suggestionFor(g) {
     if (g.spill?.direction === "down") {
       return `The content of ${name(g.spill.box)} is taller than its box at this width and runs down over what comes next. Its height is fixed (height or max-height) and the content no longer fits once it wraps; use min-height instead, or let it grow with its content.`;
@@ -1130,7 +1300,10 @@
       return `They sit side by side in the flex row ${name(lca)}, which runs out of room at this width. Let the row wrap (flex-wrap: wrap), let the item that should give way shrink (min-width: 0), or stack them below this width with a media query.`;
     }
     if (lca && display.includes("grid")) {
-      return `They share the grid ${name(lca)}, whose columns are too narrow here for what is in them. Use minmax(0, 1fr) columns so items can shrink, or switch to fewer columns below this width.`;
+      if (!itemsFit(lca)) {
+        return `They share the grid ${name(lca)}, whose columns are too narrow here for what is in them. Use minmax(0, 1fr) columns so items can shrink, or switch to fewer columns below this width.`;
+      }
+      return `They share the grid ${name(lca)}, whose columns have already shrunk as far as they go and are too narrow here for what is in them. Switch to fewer columns below this width.`;
     }
     return "These two areas stop making room for each other at this width. Stack them earlier with a media query, or let the narrower one shrink (min-width: 0).";
   }
@@ -1735,10 +1908,10 @@
     for (const rec of snap.records) {
       const s = rec.style;
       if (!s.containerType || s.containerType === "normal") continue;
-      const names = s.containerName.split(/\s+/);
+      const names2 = s.containerName.split(/\s+/);
       const size = rec.rect.width - (Number.parseFloat(s.paddingLeft) || 0) - (Number.parseFloat(s.paddingRight) || 0) - (Number.parseFloat(s.borderLeftWidth) || 0) - (Number.parseFloat(s.borderRightWidth) || 0);
       for (const q of queries) {
-        if (q.name && !names.includes(q.name)) continue;
+        if (q.name && !names2.includes(q.name)) continue;
         const unit = q.unit === "px" ? 1 : q.unit === "em" ? Number.parseFloat(s.fontSize) || 16 : rootFont;
         const threshold = q.value * unit;
         bits += (q.after ? size > threshold : size >= threshold) ? "1" : "0";
@@ -1854,12 +2027,12 @@
     }
   }
   function looksLikeMenu(el) {
-    const names = [
+    const names2 = [
       typeof el.className === "string" ? el.className : "",
       el.id,
       el.getAttribute("data-testid") ?? ""
     ].join(" ");
-    return MENU_CLASS.test(names) || MENU_LABEL.test(nameOf(el));
+    return MENU_CLASS.test(names2) || MENU_LABEL.test(nameOf(el));
   }
   function kindOf(el) {
     if (el.matches("details > summary")) {
@@ -2061,6 +2234,7 @@
     "unexpected-wrap",
     "clipped-text",
     "squished-text",
+    "calendar",
     "distorted-media",
     "small-tap-target",
     "tiny-text",
@@ -2196,7 +2370,7 @@
     const enabled = new Set(options.detectors ?? DETECTOR_IDS);
     const rules = options.ignore ?? [];
     const snap = snapshot();
-    const findings = [];
+    let findings = [];
     for (const [id, run] of Object.entries(DETECTORS)) {
       if (!enabled.has(id)) continue;
       for (const f of run(snap)) {
@@ -2204,6 +2378,13 @@
         findings.push(f);
       }
     }
+    if (enabled.has("calendar")) {
+      findings = foldCalendars(
+        snap,
+        findings,
+        (root) => !isIgnored(describe(root), "calendar", rules)
+      );
+    }
     const wraps = enabled.has("unexpected-wrap") ? wrapStats(snap).filter((w) => !isIgnored(w.element, "unexpected-wrap", rules)) : [];
     const containers = containerSignature(snap);
     return {

package/dist/schema.json

@@ -223,6 +223,25 @@
             }
           ]
         },
+        "calendar": {
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "string",
+              "const": "error"
+            },
+            {
+              "type": "string",
+              "const": "warning"
+            },
+            {
+              "type": "string",
+              "const": "info"
+            }
+          ]
+        },
         "distorted-media": {
           "anyOf": [
             {
@@ -386,6 +405,7 @@
                     "unexpected-wrap",
                     "clipped-text",
                     "squished-text",
+                    "calendar",
                     "distorted-media",
                     "small-tap-target",
                     "tiny-text",

package/package.json

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