@palate/cli 0.0.0-stage → 0.0.2

package/src/loop/floor.mjs

@@ -0,0 +1,677 @@
+// The floor: deterministic checks for what is visibly wrong with a page whatever the taste. Dead bands of
+// nothing, half-empty sections, every section the same template, one flat colour with no imagery, monospace
+// numbers in a sans page, placeholder copy, clipped text, a phone page that is one endless stacked board, a
+// product board whose columns are mostly blank, a system that drifts from section to section (SYSTEM_DRIFT: H2
+// size and left edge, section padding, button height, card style), a tile with a void inside (TILE_VOID), the
+// same photo shown twice (PHOTO_REPEAT), a bento with no lead tile, identical neighbours or a checkerboard of
+// inverted tiles (BENTO_FLAT, BENTO_TWINS, INVERT_OVERUSE), a hero product window floating small (FRAME_SMALL),
+// real words cut by an edge (WORDS_CUT). Rendered at 1440, 1024, 768 and 390: tablet is where the Express
+// landing page's hero broke (Nov 4 2026 retrospective, palate-site/DESIGN-RETROSPECTIVE.md §2, §3, §7).
+// Research (research_notes/AI design quality floor/metrics_and_blocks.md): visual complexity is U-shaped (too
+// empty is as bad as too busy), so the gates are two-sided; and no single metric predicts quality, so these
+// catch clearly-bad, they don't score taste. A page can pass all of them and still be dull.
+//
+// Calibration (Oct 28 2026, this machine, 32px cells, reduced motion; fails/warns). Kiln v1 is the generated
+// pottery-studio landing that passed every other palate check and looked about 5/10 (its build, served
+// statically); Kiln v2 is its rebuild; the rest are pages people consider well designed (home page only,
+// robots.txt respected, one recorded load each, replayed for every measurement):
+//   page                          1440    390    what fired
+//   Kiln v1                       10F/2W  8F/2W  fail: DEAD_SPACE (253, 256px; 189, 192px), HALF_EMPTY (§3), SAME_TEMPLATE
+//                                                (§3/§4, §5/§6), MONOTONE (81% sage), NO_MATERIAL (0.8%), MONO_MISUSE (25
+//                                                numbers), PLACEHOLDER ("Your studio"), CLIPPED (stacked avatars), PHONE_TALL
+//                                                (hero 2.3 screens, board 998px); warn: HALF_EMPTY §4, EMPTY_COLUMNS (the
+//                                                board's end state: an empty Glaze firing column, 9%), DEAD_SPACE 136px,
+//                                                CLIPPED (names ellipsed to 27px). Its board as first shown (one card in
+//                                                three of five columns; the fixture in test/floor.test.mjs) fails
+//                                                EMPTY_COLUMNS: 28% ×3, average 39%.
+//   Kiln v2 (127.0.0.1:5212 /)    0F/0W   0F/0W  (its hero board: 95/95/95/33/80%, quiet)
+//   palate-site-kappa.vercel.app  0F/1W   0F/1W  warn: TOO_BUSY (its live demo, 76% text and lines), CLIPPED (names
+//                                                ellipsed to 30px in its demo)
+//   linear.app                    0F/2W   0F/0W  warn: SAME_TEMPLATE (two chapter sections), MONO_MISUSE (Fig labels, dates)
+//   stripe.com                    0F/2W   0F/2W  warn: PLACEHOLDER (example.com in a demo), CLIPPED (cycling-language labels)
+//   notion.com                    0F/0W   0F/0W
+//   raycast.com                   0F/1W   0F/1W  warn: DEAD_SPACE (4 bands of 405–476px on flat black; 9 at 390)
+//   vercel.com                    0F/2W   0F/1W  warn: DEAD_SPACE (its full-screen hero: 270, 257px)
+// Before AIRY_MATERIAL, Raycast failed DEAD_SPACE 14 times and Vercel 6: raw band height alone can't tell air
+// from holes. Before the section finder's Oct 28 pass, palate-site came back as three overlapping background
+// layers over its hero (so its demo measured as part of a 1368px block) and Notion as one 4687px block (its
+// wrappers are display: contents); both are now their real bands. Not caught: Kiln's pricing section's bare
+// lower left (20.5% of the section; palate-site's centred section measures 19.5%).
+//
+// Calibration of the tablet widths and the three Nov 4 checks (Nov 4 2026; local builds through runFloor, real
+// sites one load at 1440 resized to 1024, 768 and 390; fails/warns of these checks and of the older ones at
+// the new widths):
+//   page                          1440    1024    768     390    what fired
+//   Kiln v2 (127.0.0.1:5212)      1F/0W   0F/0W   0F/0W   0F/0W  fail: SYSTEM_DRIFT H2s in 3 sizes (40px norm; Pricing 56,
+//                                                                its photo band's 28): real drift, kept
+//   Tracewell (127.0.0.1:5231)    0F/3W   0F/0W   0F/2W   0F/0W  warn: SYSTEM_DRIFT H2s 59.4/58.3/53.4 (close: warn),
+//                                                                padding 124/114/94, buttons 44 vs 48; HALF_EMPTY at 768
+//   palate-site-kappa.vercel.app  0F/1W   0F/2W   0F/0W   0F/1W  (only the older TOO_BUSY, CLIPPED)
+//   linear.app                    0F/3W   0F/7W   0F/0W   0F/0W  warn: SYSTEM_DRIFT closing H2 72 vs 48; at 1024
+//                                                                HALF_EMPTY ×5 (section intros over their mocks), DEAD_SPACE
+//   stripe.com                    0F/4W   0F/1W   0F/1W   0F/2W  warn: SYSTEM_DRIFT H2 56 vs 32, a 32px button vs 48
+//   vercel.com                    0F/2W   0F/1W   0F/2W   0F/1W  (only the older DEAD_SPACE, HALF_EMPTY at 768)
+//   apple.com                     0F/1W   0F/0W   0F/0W   0F/0W  warn: SYSTEM_DRIFT buttons 36 vs 44
+// False fails fixed on the way: Linear failed HALF_EMPTY 3× at 1024 (a heading block stacked over a full-width
+// visual is the tablet layout: a bare half there warns); TILE_VOID fired on mock windows whose page is a sibling
+// laid over the frame (Stripe: now what's inside the frame's box counts, whoever owns it), on panels still
+// animating in or lazy pictures not loaded (Linear, Apple: skipped), on a picture bigger than its tile (Apple:
+// counts), on 3px chart bars (Stripe at 390) and on quote cards (Linear: a big quote over a small attribution
+// is a convention); SYSTEM_DRIFT padding read each side alone (palate-site, Vercel 5 values: now one value per
+// section, hero and strips out), a mock's button (Tracewell's "Why slow?", aria-hidden) and centred-copy cards'
+// text inset (Apple, 4 styles: a card without padding matches any inset). PHOTO_REPEAT fired nowhere.
+// Runtime of runFloor, browser start included: Kiln v2 10.3s at 1440+390 before these checks, 11.0s with them,
+// 19.9s at four widths; Tracewell 11.0s, 11.6s, 21.1s. The in-page measure is 0.1–0.4s a width; the rest is
+// loading and scrolling each width. The gate takes its 1024 and 768 views from these renders (no extra loads).
+//
+// Bento grids and product frames (Nov 7 2026; ideas from the stageshow skill, in our own words): BENTO_FLAT, BENTO_TWINS
+// and INVERT_OVERUSE (how a bento is composed: one lead tile, neighbours that contrast, one inverted tile),
+// FRAME_SMALL (the hero's product window floating small) and WORDS_CUT (a heading, paragraph or number cut by a
+// clipping edge). Calibrated through runFloor at all four widths, new findings only (everything else unchanged):
+//   page                                   new    notes
+//   kiln, tracewell, mabels-bakehouse,     none   (r4 builds; no bento; Tracewell's hero mock spans the width,
+//   open-shelf, mira-okafor-photo (r4)            Kiln's board 55% and bleeding right)
+//   kiln-r3, tracewell-r3                  none   their asymmetric bentos (5 tiles, lead 821×646 / 821×812) pass
+//   mabels-bakehouse r1                    1W     FRAME_SMALL: its order window 701px, 49% of 1440, margin all round
+//   linear.app, vercel.com, apple.com/iphone, raycast.com, clerk.com, supabase.com, cal.com,
+//   palate-site-kappa.vercel.app           none
+// False positives fixed on the way: WORDS_CUT on Linear's visually hidden H1 copy (a hashed "visuallyHidden" class
+// in a 1px box: any 1–2px clip box or such class is hidden text now) and on text in Raycast's Embla carousel (a clip
+// with an item beside the text's branch mostly outside it is a strip, ticker or carousel); BENTO_TWINS on
+// Raycast's keycap illustration (tiles are 160×120 and up), on Clerk's 12-tile catalogue (twins only in composed
+// grids of 8 tiles or fewer) and on the state cards inside palate-site's demo window (cards inside a framed box of
+// 24+ small texts are product UI, not tiles). True positives on a real bento: kiln-r3's with every tile set to
+// span 4 → BENTO_FLAT; two stacked tiles of one size plus two dark tiles → BENTO_TWINS and INVERT_OVERUSE; a 40px
+// nowrap tile heading → WORDS_CUT fail. The in-page measure stays 0.15–0.3s a width (Clerk, Raycast).
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { findSections, openPage, shootFull, withBrowser } from "../look.mjs";
+import { craftChecks, measureCraft } from "./craftchecks.mjs";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const gateScript = fs.readFileSync(path.join(here, "..", "page-gate.js"), "utf8").trim().replace(/;\s*$/, "");
+
+// ---- thresholds
+// Grid cell for ink coverage, in CSS px: coarse enough that a line of text inks its row, fine enough for gaps.
+export const CELL = 32;
+// An empty band (no text, image, surface or line) taller than this is dead space; between 390 and 1440 the limit
+// is interpolated. Kiln's were 253–256px at 1440 and 189–192 at 390. Height alone doesn't separate good from bad:
+// Linear and Notion run 213–224px, Vercel 270, Raycast 405–476 (flat dark, measured by pixels too). What does is
+// whether there is anything to breathe around: see AIRY_MATERIAL.
+export const DEAD_WARN = { 390: 120, 1440: 200 };
+export const DEAD_FAIL = { 390: 160, 1440: 240 };
+// Page imagery + texture at or above this, and big empty bands are a choice (air around strong pictures): only
+// bands over the fail limit are reported, as warnings. Below it (Kiln 0.8%) the same air is dead. Good pages
+// measured 15–46%.
+export const AIRY_MATERIAL = 0.1;
+// The padding of a coloured band (the empty run touches a change of background) may be this much taller: the
+// colour edge itself is structure (Notion's grey CTA band: 262/264px).
+export const EDGE_ALLOW = 1.4;
+// A run of rows where one half of a section is bare beside ink in the other (a left heading with nothing next
+// to it), in px and as a share of the section's content frame (run × half width). Kiln: 192px / 11.5% and
+// 128px / 7.1%. Good pages: Vercel's big two-line heading 160px but 3.3% of a tall section; Linear's changelog
+// 96px / 10%.
+export const SIDE_WARN = { px: 128, share: 0.06 };
+export const SIDE_FAIL = { px: 160, share: 0.08 };
+// Largest empty rectangle beside content (left/right/centre), as a share of the section's content frame.
+export const EMPTY_RECT_WARN = 0.3;
+export const EMPTY_RECT_FAIL = 0.35;
+// ...and at least this tall: two lines of text beside a bare strip in a short band aren't a half-empty section.
+export const EMPTY_RECT_MIN_H = 160;
+// A two-column section whose lighter half has less than this share of the heavier half's ink. A short text
+// block beside a big visual is normal (Raycast's keyboard split: 0.17), so only a near-bare half fails.
+export const BALANCE_FAIL = 0.1;
+// Ink share of a section's content frame (cells): below these it is too empty to hold attention.
+export const TOO_EMPTY_FAIL = 0.1;
+export const TOO_EMPTY_WARN = 0.15;
+// Detail share (text, lines, icons; not surfaces or images) above these is a wall: desktop, then phone (where
+// one column of text inks nearly every cell, so the bar is higher).
+export const TOO_BUSY = { desktop: { warn: 0.75, fail: 0.85 }, phone: { warn: 0.85, fail: 0.92 } };
+// One background colour over this share of the page height, with imagery under MONOTONE_IMAGERY, is one flat
+// ground from top to bottom (Kiln: 81% sage, 0.8% imagery; good pages with one ground had 26–46% imagery).
+export const MONOTONE_SHARE = 0.8;
+export const MONOTONE_IMAGERY = 0.04;
+// A marketing page whose imagery + illustration + texture covers less than this of its area has no material
+// (Kiln 0.8%; every good page measured 25%+).
+export const NO_MATERIAL = 0.04;
+// Monospace numbers outside code: a fail at this many snippets when they are most of the page's mono text.
+export const MONO_FAIL_N = 8;
+export const MONO_FAIL_SHARE = 0.7;
+export const MONO_WARN_N = 3;
+// A page set mostly in monospace chose it; nothing to flag.
+export const MONO_LED = 0.6;
+// At phone width, a section taller than this many viewports that is mostly one stacked run of like items.
+export const PHONE_TALL_VH = 2.2;
+export const PHONE_STACK_VH = 0.9;
+export const PHONE_STACK_SHARE = 0.4;
+export const PHONE_STACK_ITEMS = 4;
+// A board (three or more side-by-side columns inside a big framed panel) whose columns are mostly blank: a column
+// is blank when content (text, media, cards) covers less than COLUMN_BLANK of its height. Fail when at least
+// two columns and COLUMN_BLANK_SHARE of them are blank, or the columns average under COLUMN_MEAN_FAIL; warn on
+// a column that is all but empty, or an average under COLUMN_MEAN_WARN. Kiln v1's hero board as first shown
+// (one small card in three of five 420px columns): 0.29 ×3, mean 0.41. Its reduced-motion end state, with the
+// message toast over two columns: [0.48, 0.49, 0.49, 0.09, 0.87]. Kiln v2's full board: [0.95 ×3, 0.33, 0.8].
+export const COLUMN_BLANK = 0.35;
+export const COLUMN_BLANK_SHARE = 0.4;
+export const COLUMN_MEAN_FAIL = 0.35;
+export const COLUMN_MEAN_WARN = 0.5;
+export const COLUMN_BARE = 0.15;
+// Sections shorter than this (a logo strip, a nav) aren't judged as layouts.
+export const MIN_SECTION_H = 160;
+// Imagery share that makes a section's layout a different thing (a split with a photo vs a split with text).
+export const IMAGERY_DISTINCT = 0.15;
+// The widths the floor renders: phone, tablet portrait, tablet landscape, desktop. Tablet is where a hero photo
+// gets blown up behind its text (the Express landing page broke at ~830 after passing 390 and 1440).
+export const FLOOR_WIDTHS = [1440, 1024, 768, 390];
+// SYSTEM_DRIFT: one written system, measured. Values within these tolerances are the same value: H2 font size
+// (px), H2 left edge (px; centred headings and headings that start in the right half of a split are left out),
+// section padding (px, one value per section: the mean of its top and bottom, not the hero, not strips under
+// PAD_MIN_H; at most PAD_VALUES distinct values, cf. rule R35 "at most two section spacings"), filled button
+// height (px; not in the nav, header, footer or an aria-hidden mock), and card style for cards in sets (radius
+// ±2px, padding ±4px, same border, shadow and fill; at most CARD_VARIANTS). Warn past those; fail when the
+// drift is large: H2s in DRIFT_FAIL_VALUES sizes or more spread by H2_FAIL_SPREAD (Kiln v2: 28–56px; Tracewell's
+// 53.4–59.4 only warns), left edges off in DRIFT_FAIL_VALUES - 1 sections or more, paddings in PAD_FAIL_VALUES
+// values, buttons in DRIFT_FAIL_VALUES heights, cards in CARD_FAIL_VARIANTS styles. Strong sites warned at most
+// (a bigger closing H2, one small button) and never failed.
+export const H2_SIZE_TOL = 1;
+export const H2_LEFT_TOL = 4;
+export const PAD_TOL = 8;
+export const PAD_VALUES = 2;
+export const PAD_FAIL_VALUES = 4;
+export const PAD_MIN_H = 300;
+export const H2_FAIL_SPREAD = 1.25;
+export const BUTTON_TOL = 2;
+export const CARD_VARIANTS = 2;
+export const CARD_FAIL_VARIANTS = 4;
+export const DRIFT_FAIL_VALUES = 3;
+// TILE_VOID: the largest empty vertical run inside a card 200px or taller (between blocks, under or above
+// them, inside its padding), as px and share of the tile's height. The retrospective's case: a stat pinned to the
+// bottom of its tile under a void. Not judged: tiles partly off screen, tiles with content still hidden or
+// pictures not loaded, and a statement card's foot (display text over one short line of small text).
+export const TILE_VOID_WARN = { px: 88, share: 0.3 };
+export const TILE_VOID_FAIL = { px: 120, share: 0.4 };
+// PHOTO_REPEAT: the same photo placed this many times, or this many photos placed twice, fails; once twice warns.
+export const PHOTO_REPEAT_FAIL = 3;
+// BENTO_FLAT, BENTO_TWINS, INVERT_OVERUSE: a bento is tiles edge to edge (gaps of 48px or less) in two rows and two
+// columns or more, at least BENTO_TITLED of them saying something (a title, a sentence, a figure, a quote or a UI
+// fragment: a gallery, a logo wall, decorative grid cells or a shop's product grid is not a bento). FLAT:
+// BENTO_MIN_TILES tiles or more, every width and every height within BENTO_EQUAL of each other, one surface, and
+// BENTO_DESCRIBED of them a feature card (a title over a sentence of six words or more; a set of order tickets or
+// framework names is a collection, equal by nature): nothing leads. TWINS: in a composed grid (BENTO_TWINS_MAX
+// tiles or fewer; past that it is a catalogue whose small tiles repeat on purpose, Clerk's 12) with a lead (its
+// largest tile BENTO_LEAD times the smallest or more), two touching tiles that both say something, of one size
+// (within BENTO_TWIN), one surface and one content type. INVERT_OVERUSE: two speaking tiles or more on the inverse
+// ground (7:1 against the ground under the grid), unless every tile is (then the dark tile is the system, not an
+// accent). All warn, at the page-level width only: a bento that becomes equal tiles at tablet is its responsive
+// layout.
+export const BENTO_MIN_TILES = 4;
+export const BENTO_EQUAL = 1.1;
+export const BENTO_LEAD = 1.5;
+export const BENTO_TWIN = 0.04;
+export const BENTO_TITLED = 0.5;
+export const BENTO_TWINS_MAX = 8;
+export const BENTO_DESCRIBED = 0.75;
+// FRAME_SMALL: the hero's product frame (its largest window, screenshot or framed mock) under this share of the
+// section's width and touching no edge: floating small with margin all round. From FRAME_MIN_W up (at tablet and
+// phone it stacks full width); a portrait device isn't judged by width.
+export const FRAME_MIN_SHARE = 0.5;
+export const FRAME_MIN_W = 1024;
+// WORDS_CUT: a heading, paragraph or number cut by a clipping edge fails; past WORDS_CUT_LIST, one count.
+export const WORDS_CUT_LIST = 4;
+
+const PHONE = 768;
+const lerp = (tab, w) => {
+  const t = Math.max(0, Math.min(1, (w - 390) / (1440 - 390)));
+  return Math.round(tab[390] + t * (tab[1440] - tab[390]));
+};
+export const deadLimits = (width) => ({ warn: lerp(DEAD_WARN, width), fail: lerp(DEAD_FAIL, width) });
+
+const STRONG_PLACEHOLDER = /lorem|ipsum|placeholder|^your |\{\{|\[(your|insert)|insert (text|image|copy)|company name|your logo/i;
+
+const short = (s, n = 48) => {
+  const t = String(s ?? "").replace(/\s+/g, " ").trim();
+  return t.length > n ? t.slice(0, n - 1) + "…" : t;
+};
+const ref = (s) => (s ? { index: s.index, heading: short(s.heading ?? s.name, 80) } : null);
+const label = (s) => (s ? `§${s.index} "${short(s.heading ?? s.name, 40)}"` : "the page");
+const isChrome = (s) => ["header", "nav", "footer"].includes(s.tag) || /^(header|footer|navigation)$/i.test(s.name ?? "");
+
+// The sections judged as layouts: not page chrome, not tiny, not nested inside an earlier one.
+function contentSections(metrics) {
+  const out = [];
+  for (const s of metrics.sections ?? []) {
+    if (s.empty || isChrome(s) || s.sticky || (s.rect?.height ?? 0) < MIN_SECTION_H) continue;
+    const r = s.rect;
+    if (out.some((o) => r.y >= o.rect.y - 1 && r.y + r.height <= o.rect.y + o.rect.height + 1)) continue;
+    out.push(s);
+  }
+  return out;
+}
+
+// Groups items whose value is within tol of a group's value (the most common value founds its group first).
+// Largest group first.
+export function clusterBy(items, val, tol) {
+  const counts = new Map();
+  for (const it of items) counts.set(val(it), (counts.get(val(it)) ?? 0) + 1);
+  const order = [...items].sort((a, b) => counts.get(val(b)) - counts.get(val(a)) || val(a) - val(b));
+  const out = [];
+  for (const it of order) {
+    const v = val(it);
+    const g = out.find((c) => Math.abs(c.value - v) <= tol);
+    if (g) g.items.push(it);
+    else out.push({ value: v, items: [it] });
+  }
+  return out.sort((a, b) => b.items.length - a.items.length || b.value - a.value);
+}
+
+// SYSTEM_DRIFT findings from page-gate.js's `system` (H2s, section paddings, filled buttons, card styles), for the
+// content sections only. Each names the page's norm and the sections off it.
+function systemDrift(sys, content, byIndex) {
+  if (!sys) return [];
+  const out = [];
+  const inContent = new Set(content.map((s) => s.index));
+  const where = (items, fmt) => items.slice(0, 5).map((it) => `${it.section != null ? label(byIndex(it.section)) : "the page"} ${fmt(it)}`).join(", ") + (items.length > 5 ? ` and ${items.length - 5} more` : "");
+  const secs = (items) => [...new Set(items.map((it) => it.section).filter((i) => i != null))].map((i) => `§${i}`).join(", ");
+
+  // H2 size: every section's heading from one step of the scale.
+  const hs = (sys.headings ?? []).filter((h) => inContent.has(h.section));
+  const sizes = clusterBy(hs, (h) => h.size, H2_SIZE_TOL);
+  if (hs.length >= 3 && sizes.length > 1 && sizes[0].items.length >= 2) {
+    const off = sizes.slice(1).flatMap((g) => g.items);
+    const spread = Math.max(...hs.map((h) => h.size)) / Math.min(...hs.map((h) => h.size));
+    out.push({
+      severity: sizes.length >= DRIFT_FAIL_VALUES && spread >= H2_FAIL_SPREAD ? "fail" : "warn",
+      section: byIndex(off[0].section),
+      what: `section H2s in ${sizes.length} sizes: ${sizes[0].value}px in ${secs(sizes[0].items)} (the norm); ${where(off, (h) => `${h.size}px`)}`,
+      fix: `Set every section's H2 from one token (${sizes[0].value}px at this width); a section that needs more weight gets it from its content, not a bigger heading.`,
+    });
+  }
+  // H2 left edge: left-aligned headings start on one line (centred ones, and headings that start in the right
+  // half of a split, have their own reason).
+  const lefts = hs.filter((h) => !h.centred && !h.right);
+  const edges = clusterBy(lefts, (h) => h.left, H2_LEFT_TOL);
+  if (lefts.length >= 3 && edges.length > 1 && edges[0].items.length >= 2) {
+    const off = edges.slice(1).flatMap((g) => g.items);
+    out.push({
+      severity: off.length >= DRIFT_FAIL_VALUES - 1 ? "fail" : "warn",
+      section: byIndex(off[0].section),
+      what: `section H2s start at ${edges.length} left edges: x=${edges[0].value}px in ${secs(edges[0].items)} (the norm); ${where(off, (h) => `x=${h.left}px (${h.left - edges[0].value > 0 ? "+" : ""}${h.left - edges[0].value})`)}`,
+      fix: `Put every section in the same container (one max-width and gutter) so its heading starts at x=${edges[0].value}px; a narrower reading column aligns its left edge to the container, not to the centre.`,
+    });
+  }
+  // Section padding: at most two values (R35). One value per section, the mean of its top and bottom (a run
+  // under 8px is a picture bleeding to the edge, not padding: then the other side alone). The first section sits
+  // under the nav and a strip under PAD_MIN_H (a logo row) has its own spacing: neither is the rhythm.
+  const first = content[0]?.index;
+  const samples = [];
+  for (const p of sys.pads ?? []) {
+    if (!inContent.has(p.section) || p.section === first || p.height < PAD_MIN_H) continue;
+    const sides = [p.top, p.bottom].filter((v) => v >= 8 && v <= 0.45 * p.height);
+    if (sides.length) samples.push({ section: p.section, v: Math.round(sides.reduce((a, b) => a + b, 0) / sides.length), sides: `${p.top}/${p.bottom}` });
+  }
+  const padGroups = clusterBy(samples, (s) => s.v, PAD_TOL);
+  if (samples.length >= 3 && padGroups.length > PAD_VALUES) {
+    const norm = padGroups.slice(0, PAD_VALUES);
+    const off = padGroups.slice(PAD_VALUES).flatMap((g) => g.items);
+    out.push({
+      severity: padGroups.length >= PAD_FAIL_VALUES ? "fail" : "warn",
+      section: byIndex(off[0].section),
+      what: `section padding in ${padGroups.length} values: ${norm.map((g) => `${g.value}px (${g.items.length}×)`).join(" and ")} are the rhythm; ${where(off, (s) => `${s.v}px (top/bottom ${s.sides})`)}`,
+      fix: `Use one section padding token (${norm.map((g) => `${g.value}px`).join(" or ")}) top and bottom on every section; spacing inside a section comes from its own gaps, not from extra section padding.`,
+    });
+  }
+  // Filled buttons: one height (a nav button is left out already).
+  const bs = sys.buttons ?? [];
+  const heights = clusterBy(bs, (b) => b.height, BUTTON_TOL);
+  if (bs.length >= 2 && heights.length > 1) {
+    const off = heights.slice(1).flatMap((g) => g.items);
+    out.push({
+      severity: heights.length >= DRIFT_FAIL_VALUES ? "fail" : "warn",
+      section: byIndex(off[0].section),
+      what: `filled buttons in ${heights.length} heights: ${heights[0].value}px (${heights[0].items.length}×, the norm); ${where(off, (b) => `"${short(b.text, 20)}" ${b.height}px`)}`,
+      fix: `Give every filled button the same height (${heights[0].value}px): one button component with one size for page actions.`,
+    });
+  }
+  // Card styles: radius, inset, border, shadow and fill, across the page's sets of cards.
+  const cards = sys.cards ?? [];
+  const variants = [];
+  const order = [...cards].sort((a, b) => cards.filter((c) => c.radius === b.radius && c.inset === b.inset).length - cards.filter((c) => c.radius === a.radius && c.inset === a.inset).length);
+  for (const c of order) {
+    // A card without padding of its own (inset null) matches any inset.
+    const v = variants.find((x) => x.border === c.border && x.shadow === c.shadow && x.fill === c.fill && Math.abs(x.radius - c.radius) <= 2 && (x.inset == null || c.inset == null || Math.abs(x.inset - c.inset) <= 4));
+    if (v) {
+      v.items.push(c);
+      v.inset ??= c.inset;
+    }
+    else variants.push({ radius: c.radius, inset: c.inset, border: c.border, shadow: c.shadow, fill: c.fill, items: [c] });
+  }
+  variants.sort((a, b) => b.items.length - a.items.length);
+  if (variants.length > CARD_VARIANTS) {
+    const desc = (v) => `radius ${v.radius}px${v.inset != null ? `, inset ${v.inset}px` : ""}${v.border ? ", border" : ""}${v.shadow ? ", shadow" : ""}${v.fill ? ", filled" : ""}`;
+    const off = variants.slice(CARD_VARIANTS);
+    out.push({
+      severity: variants.length >= CARD_FAIL_VARIANTS ? "fail" : "warn",
+      section: byIndex(off[0].items[0].section),
+      what: `cards in ${variants.length} styles: ${variants.slice(0, CARD_VARIANTS).map((v) => `${desc(v)} (${v.items.length}×)`).join("; ")} are the norm; ${off.slice(0, 4).map((v) => `${secs(v.items) || "?"}: ${desc(v)}`).join("; ")}`,
+      fix: "One card: one radius, one inset, one way of lifting it (a ground, a border or a shadow, not a mix); a tile that should stand out does it with its content or one inverted ground.",
+    });
+  }
+  return out;
+}
+
+// [{ id, width, section: { index, heading } | null, severity: "fail" | "warn", what, fix }] for one width's metrics.
+// pageLevel: the width that judges the whole page (runFloor: the widest). Checks that don't change with width
+// (one template repeated, flat ground, mono numbers, placeholder copy) aren't repeated at the tablet widths, and
+// SYSTEM_DRIFT and PHOTO_REPEAT run only there.
+export function floorChecks(metrics, { width = metrics?.width ?? 1440, kind = "marketing", pageLevel = width >= 1200 } = {}) {
+  const checks = [];
+  const add = (id, severity, section, what, fix) => checks.push({ id, width, section: ref(section), severity, what, fix });
+  const phone = width < PHONE;
+  const tabletRepeat = !phone && !pageLevel;
+  // Tablet (768–1199): a heading block stacked over a full-width visual is the expected layout there, so a bare
+  // half beside a heading warns instead of failing (Linear at 1024: 224–320px beside its section intros).
+  const tablet = !phone && width < 1200;
+  const marketing = kind !== "app";
+  const all = metrics.sections ?? [];
+  const byIndex = (i) => all.find((s) => s.index === i);
+  const content = contentSections(metrics);
+
+  // DEAD_SPACE: empty bands, between or inside sections.
+  const lim = deadLimits(width);
+  const airy = (metrics.imagery ?? 0) + (metrics.texture ?? 0) >= AIRY_MATERIAL;
+  const deadFix = `Close it to about ${Math.round(lim.warn * 0.6)}px, one step of the section rhythm, or put something there that earns the space (an image, a pulled quote, a change of ground).`;
+  const deadWarns = [];
+  for (const b of metrics.bands ?? []) {
+    const k = b.edge ? EDGE_ALLOW : 1;
+    const sev = airy ? (b.height > lim.fail * k ? "warn" : null) : b.height > lim.fail * k ? "fail" : b.height > lim.warn * k ? "warn" : null;
+    if (!sev) continue;
+    const [a, z] = [byIndex(b.sections?.[0]), byIndex(b.sections?.[b.sections.length - 1])];
+    const where = a && z && a !== z ? `between ${label(a)} and ${label(z)}` : a ? `inside ${label(a)}` : `at y=${b.y}`;
+    const item = { b, a: a ?? z ?? null, where, limit: Math.round((airy ? lim.fail : lim.warn) * k) };
+    if (sev === "warn") deadWarns.push(item);
+    else add("DEAD_SPACE", "fail", item.a, `${b.height}px of nothing ${where} (limit ${item.limit}px at ${width})`, deadFix);
+  }
+  // Several warnings are one finding: the page's rhythm is loose.
+  if (deadWarns.length > 2) {
+    const big = deadWarns.reduce((x, y) => (y.b.height > x.b.height ? y : x));
+    add("DEAD_SPACE", "warn", big.a, `${deadWarns.length} empty bands over ${Math.min(...deadWarns.map((d) => d.limit))}px (largest ${big.b.height}px ${big.where})`, airy ? "Air around strong pictures can be a choice; check each band reads as a pause, not a hole." : deadFix);
+  } else for (const d of deadWarns) add("DEAD_SPACE", "warn", d.a, `${d.b.height}px of nothing ${d.where} (limit ${d.limit}px at ${width})`, deadFix);
+
+  for (const s of content) {
+    // HALF_EMPTY (side-by-side layouts only exist on wider screens).
+    if (!phone) {
+      const se = s.sideEmpty ?? {};
+      const le = s.largestEmpty ?? {};
+      const seShare = s.frame?.height ? se.px / (2 * s.frame.height) : 0;
+      if (se.px >= SIDE_WARN.px && seShare >= SIDE_WARN.share)
+        add("HALF_EMPTY", se.px >= SIDE_FAIL.px && seShare >= SIDE_FAIL.share && !tablet ? "fail" : "warn", s, `${label(s)}: the ${se.side} half is bare for ${se.px}px beside the content on the other side`, `Use the ${se.side} side: set the paragraph, a figure or a key number beside the heading, or centre the heading block over what follows.`);
+      else if (["left", "right", "centre"].includes(le.where) && le.share >= EMPTY_RECT_WARN && le.height >= EMPTY_RECT_MIN_H)
+        add("HALF_EMPTY", le.share >= EMPTY_RECT_FAIL && !tablet ? "fail" : "warn", s, `${label(s)}: an empty ${le.width}×${le.height}px area on the ${le.where} (${Math.round(le.share * 100)}% of the section)`, `Fill or remove the bare ${le.where} area: move content into it, widen what sits beside it, or tighten the section.`);
+      else if (s.layout?.columns === 2 && s.balance && s.balance.ratio < BALANCE_FAIL)
+        add("HALF_EMPTY", "fail", s, `${label(s)}: two columns, but one holds ${Math.round(s.balance.ratio * 100)}% of the other's ink`, "Balance the columns: give the light side real content (a figure, a list, an image) or make it one column.");
+    }
+    // TOO_EMPTY / TOO_BUSY: the two sides of the complexity band.
+    if (s.ink < TOO_EMPTY_WARN)
+      add("TOO_EMPTY", s.ink < TOO_EMPTY_FAIL ? "fail" : "warn", s, `${label(s)}: only ${Math.round(s.ink * 100)}% of it carries anything`, "Give it substance (an image, a figure, real detail) or fold it into its neighbour.");
+    const busy = phone ? TOO_BUSY.phone : TOO_BUSY.desktop;
+    if (s.detail > busy.warn)
+      add("TOO_BUSY", s.detail > busy.fail ? "fail" : "warn", s, `${label(s)}: text and lines cover ${Math.round(s.detail * 100)}% of it`, "Thin it out: fewer items, more air between groups, or split it into two sections.");
+  }
+
+  // EMPTY_COLUMNS: a product board whose columns are mostly blank (cards in a framed panel ink the coarse grid,
+  // so TOO_EMPTY and HALF_EMPTY can't see it). Chrome sections too: a board can sit anywhere.
+  for (const s of all) {
+    if (s.empty) continue;
+    for (const b of s.boards ?? []) {
+      const cols = b.columns ?? [];
+      if (cols.length < 3) continue;
+      const blank = cols.filter((c) => c.fill < COLUMN_BLANK);
+      const bare = cols.filter((c) => c.fill < COLUMN_BARE);
+      const mean = b.mean ?? cols.reduce((a, c) => a + c.fill, 0) / cols.length;
+      const fail = (blank.length >= 2 && blank.length >= COLUMN_BLANK_SHARE * cols.length) || mean < COLUMN_MEAN_FAIL;
+      const warn = blank.length >= 2 || bare.length >= 1 || mean < COLUMN_MEAN_WARN;
+      if (!fail && !warn) continue;
+      const pct = (v) => `${Math.round(v * 100)}%`;
+      const which = (blank.length ? blank : bare).map((c) => cols.indexOf(c) + 1);
+      add(
+        "EMPTY_COLUMNS",
+        fail ? "fail" : "warn",
+        s,
+        `${label(s)}: a ${b.width}×${b.height}px board with ${cols.length} columns ${b.columnHeight ?? ""}px tall, content in ${cols.map((c) => pct(c.fill)).join(" / ")} of their height (average ${pct(mean)}); column${which.length > 1 ? "s" : ""} ${which.join(", ")} mostly blank`,
+        "Fill the board like a real day in the product (several items per column, a varied mix), shorten the columns to their content, or show fewer columns.",
+      );
+    }
+  }
+
+  // SAME_TEMPLATE: adjacent sections built the same way, or one build used three times or more.
+  if (!phone && marketing && !tabletRepeat) {
+    const key = (s) => {
+      const sig = s.layout?.signature;
+      // A single column of content says nothing about the template.
+      if (!sig || !/[2-9]|\d{2}/.test(sig.split(":")[1] ?? "")) return null;
+      return sig + ((s.imagery ?? 0) >= IMAGERY_DISTINCT ? "+img" : "");
+    };
+    const pairs = [];
+    for (let i = 1; i < content.length; i++) if (key(content[i]) && key(content[i]) === key(content[i - 1])) pairs.push([content[i - 1], content[i]]);
+    const uses = new Map();
+    for (const s of content) if (key(s)) uses.set(key(s), [...(uses.get(key(s)) ?? []), s]);
+    const triple = [...uses.values()].filter((v) => v.length >= 3);
+    const sev = pairs.length >= 2 || triple.length ? "fail" : "warn";
+    const describe = (s) => {
+      const L = s.layout;
+      const rows = L.rows?.filter((r) => r.cols >= 2).map((r) => `${r.cols} side by side`) ?? [];
+      return `${L.align === "C" ? "centred" : L.align === "L" ? "left-led" : "headless"} heading over ${rows.join(", then ") || "one column"}`;
+    };
+    const fix = "Build the next one differently: a full-width figure, a centred statement, a split with an image, a list, a quote; not another heading over the same boxes.";
+    for (const [a, b] of pairs) add("SAME_TEMPLATE", sev, b, `${label(a)} and ${label(b)} are built the same way (${describe(b)})`, fix);
+    for (const v of triple) if (!pairs.some(([, b]) => v.includes(b))) add("SAME_TEMPLATE", "fail", v[0], `${v.length} sections share one build (${describe(v[0])}): ${v.map((s) => `§${s.index}`).join(", ")}`, fix);
+  }
+
+  // MONOTONE / NO_MATERIAL: one flat ground, nothing to look at.
+  const top = tabletRepeat ? null : (metrics.bgRuns ?? [])[0];
+  const imagery = metrics.imagery ?? 0;
+  if (marketing && top && top.color !== "image" && top.share >= MONOTONE_SHARE && imagery < MONOTONE_IMAGERY)
+    add("MONOTONE", "fail", null, `one background (${top.color}) covers ${Math.round(top.share * 100)}% of the page height and imagery ${(imagery * 100).toFixed(1)}%`, "Vary the ground: one or two sections on a contrasting band (dark, tinted or photographic), or imagery that breaks the flat colour.");
+  // Product UI built in code counts as material: it is the product on show.
+  const material = imagery + (metrics.texture ?? 0) + (metrics.productUi ?? 0);
+  if (marketing && !tabletRepeat && material < NO_MATERIAL)
+    add("NO_MATERIAL", "fail", null, `imagery, illustration, texture and product UI cover ${(material * 100).toFixed(1)}% of the page`, "Add material: photography, illustration, a texture or a large product image (licensed, or made for this project).");
+
+  // MONO_MISUSE: monospace for times, prices and figures in a sans/serif page.
+  const mono = (!tabletRepeat && metrics.mono) || {};
+  if ((mono.share ?? 0) < MONO_LED && (mono.numeric ?? 0) >= MONO_WARN_N) {
+    const fail = mono.numeric >= MONO_FAIL_N && mono.numeric / Math.max(1, mono.count) >= MONO_FAIL_SHARE && marketing;
+    const eg = (mono.snippets ?? []).filter((m) => m.numeric).slice(0, 4).map((m) => `"${short(m.text, 16)}"`).join(", ");
+    const sec = byIndex((mono.snippets ?? []).find((m) => m.numeric)?.section);
+    add("MONO_MISUSE", fail ? "fail" : "warn", sec ?? null, `${mono.numeric} numbers set in monospace outside code (${eg}${(mono.snippets ?? [])[0]?.family ? `, ${mono.snippets[0].family}` : ""})`, "Set times, prices and figures in the body face with font-variant-numeric: tabular-nums; keep monospace for code.");
+  }
+
+  // PLACEHOLDER: copy that was never written.
+  const ph = tabletRepeat ? [] : (metrics.placeholders ?? []);
+  if (ph.length) {
+    const strong = ph.filter((p) => STRONG_PLACEHOLDER.test(p.match));
+    const list = (strong.length ? strong : ph).slice(0, 3).map((p) => `"${short(p.text, 40)}"`).join(", ");
+    add("PLACEHOLDER", strong.length ? "fail" : "warn", byIndex((strong[0] ?? ph[0]).section) ?? null, `placeholder-looking copy (${[...new Set(ph.map((p) => p.match))].join(", ")}): ${list}`, "Write the real thing: a sample studio with a name, a real-sounding person, the product's own domain.");
+  }
+
+  // CLIPPED: text cut off by its box, or painted over by a neighbour.
+  const clipped = metrics.clipped ?? [];
+  const covered = clipped.filter((c) => c.covered);
+  const roundCut = clipped.filter((c) => !c.covered && c.small && c.rounded && !c.intended);
+  const smallCut = clipped.filter((c) => !c.covered && c.small && !c.rounded && !c.intended);
+  const tinyEllipsis = clipped.filter((c) => c.intended && c.width < 40);
+  if (covered.length) add("CLIPPED", "fail", byIndex(covered[0].section) ?? null, `${covered.length} small round label${covered.length > 1 ? "s" : ""} painted over by the next one (${covered.slice(0, 4).map((c) => `"${c.text}"`).join(", ")})`, "Make room for the text: less overlap between the stacked circles, smaller initials, or bigger circles.");
+  if (roundCut.length) add("CLIPPED", "fail", byIndex(roundCut[0].section) ?? null, `text cut off inside ${roundCut.length} small rounded element${roundCut.length > 1 ? "s" : ""} (${roundCut.slice(0, 4).map((c) => `"${c.text}" in ${c.width}×${c.height}`).join(", ")})`, "Size the box to its text (or the text to the box) so nothing is cut off.");
+  if (smallCut.length) add("CLIPPED", "warn", byIndex(smallCut[0].section) ?? null, `text cut off in ${smallCut.length} small box${smallCut.length > 1 ? "es" : ""} (${smallCut.slice(0, 3).map((c) => `"${short(c.text, 16)}" in ${c.width}×${c.height}`).join(", ")})`, "Check these are meant to be cut (a ticker, a reveal); if not, size the box to its text.");
+  if (tinyEllipsis.length) add("CLIPPED", "warn", byIndex(tinyEllipsis[0].section) ?? null, `${tinyEllipsis.length} label${tinyEllipsis.length > 1 ? "s" : ""} truncated to under 40px (${tinyEllipsis.slice(0, 3).map((c) => `"${c.text}" in ${c.width}px`).join(", ")})`, "An ellipsis that leaves two letters says nothing: give the label room, abbreviate it on purpose, or drop it at this width.");
+
+  // PHONE_TALL: a phone section that is one long stacked board or list.
+  if (phone) {
+    const vh = metrics.vh ?? 844;
+    for (const s of all) {
+      const st = s.stack;
+      if (s.empty || isChrome(s) || !st || (s.rect?.height ?? 0) <= PHONE_TALL_VH * vh) continue;
+      if (st.items < PHONE_STACK_ITEMS || st.height < Math.max(PHONE_STACK_VH * vh, PHONE_STACK_SHARE * s.rect.height)) continue;
+      // A reference list (docs commands, questions), each entry deep-linkable, is read by scanning and linked to
+      // by entry: hiding entries behind tabs would make it worse, so it's only a note. Seen on palate's own docs.
+      if ((st.anchored ?? 0) >= 0.6 * st.items) {
+        add("PHONE_TALL", "warn", s, `${label(s)} is ${s.rect.height}px tall at ${width} (${(s.rect.height / vh).toFixed(1)} screens): a reference list of ${st.items} linked entries`, "Fine for reference content; keep each entry compact and the rail or a filter close at hand.");
+        continue;
+      }
+      add("PHONE_TALL", "fail", s, `${label(s)} is ${s.rect.height}px tall at ${width} (${(s.rect.height / vh).toFixed(1)} screens), ${st.height}px of it ${st.items} items stacked in one column`, "On phones, don't stack the whole thing: show one column at a time with a switcher (tabs, a horizontal scroller), or a summary with a link to the rest.");
+    }
+  }
+
+  // SYSTEM_DRIFT: the page's own system, measured across its sections.
+  if (pageLevel && marketing) for (const d of systemDrift(metrics.system, content, byIndex)) add("SYSTEM_DRIFT", d.severity, d.section, d.what, d.fix);
+
+  // TILE_VOID: a card whose content leaves a large empty run inside it.
+  const voids = (metrics.tiles ?? [])
+    .filter((t) => !t.foot)
+    .map((t) => ({ t, sev: t.run >= TILE_VOID_FAIL.px && t.share >= TILE_VOID_FAIL.share ? "fail" : t.run >= TILE_VOID_WARN.px && t.share >= TILE_VOID_WARN.share ? "warn" : null }))
+    .filter((v) => v.sev)
+    .sort((a, b) => (a.sev === b.sev ? b.t.share - a.t.share : a.sev === "fail" ? -1 : 1));
+  for (const { t, sev } of voids.slice(0, 4)) {
+    const s = byIndex(t.section);
+    const where = t.where === "between" ? `between ${t.above} and ${t.below}` : t.where === "under" ? `under ${t.above}` : `above ${t.below}`;
+    const fix =
+      t.where === "between"
+        ? "Close the gap: set the stat or line close under its copy (no margin-top: auto pinning it to the bottom), or give the space to the tile's picture, pinned to the tile's bottom edge and cropped by it."
+        : t.where === "under"
+          ? "Shorten the tile to its content (align-items: start, or a shorter row), or let the visual fill the space: pinned to the bottom edge and cropped by it, not floating."
+          : "Move the content up to the tile's top, or fill the space above with the tile's visual.";
+    add("TILE_VOID", sev, s ?? null, `${s ? `${label(s)}: ` : ""}a ${t.width}×${t.height}px tile${t.text ? ` ("${short(t.text, 32)}")` : ""} is ${t.run}px empty ${where} (${Math.round(t.share * 100)}% of its height)`, fix);
+  }
+  if (voids.length > 4) add("TILE_VOID", "warn", null, `${voids.length - 4} more tile${voids.length - 4 > 1 ? "s" : ""} with a void inside at ${width}`, "Check every tile of that set: one frame, content close together, the visual pinned to an edge.");
+
+  // PHOTO_REPEAT: the same photo shown more than once.
+  const repeats = pageLevel ? (metrics.photos ?? []).filter((p) => p.count >= 2) : [];
+  if (repeats.length) {
+    const fail = repeats.some((p) => p.count >= PHOTO_REPEAT_FAIL) || repeats.length >= PHOTO_REPEAT_FAIL;
+    const list = repeats.slice(0, 4).map((p) => `${short(p.name, 40)} ${p.count}× (${p.sections.map((i) => (i == null ? "?" : `§${i}`)).join(", ")}; ${p.sizes.join(", ")})`).join("; ");
+    add("PHOTO_REPEAT", fail ? "fail" : "warn", byIndex(repeats[0].sections.find((i) => i != null)) ?? null, `${repeats.length} photo${repeats.length > 1 ? "s" : ""} shown more than once: ${list}`, "Use each photo once: find another real photo for the second place, or show the subject a different way (a detail crop of a different shot, a diagram, a stat).");
+  }
+
+  // BENTO_FLAT, BENTO_TWINS, INVERT_OVERUSE: how a bento grid is composed.
+  if (pageLevel && marketing) for (const f of bentoFindings(metrics.grids ?? [], byIndex)) add(f.id, "warn", f.section, f.what, f.fix);
+
+  // FRAME_SMALL: the hero's product window floating small in the middle.
+  const frame = width >= FRAME_MIN_W && marketing ? (metrics.frames ?? []).find((f) => f.hero) : null;
+  if (frame && !frame.portrait && !frame.bleeds?.length && frame.share < FRAME_MIN_SHARE) {
+    const s = byIndex(frame.section);
+    add("FRAME_SMALL", "warn", s ?? null, `${label(s)}: the product ${frame.kind === "screenshot" ? "screenshot" : "window"}${frame.text ? ` ("${short(frame.text, 28)}")` : ""} is ${frame.width}px wide, ${Math.round(frame.share * 100)}% of the hero's ${frame.stage}px, with a margin on every side`, "Make it the largest thing in the hero: about two thirds of the width, running off one edge (the right edge to the viewport, or the bottom into the next band), cropped through its secondary UI (a sidebar's end, extra rows), never through the part the words describe.");
+  }
+
+  // WORDS_CUT: real words cut by a tile's or section's edge.
+  const cuts = metrics.wordsCut ?? [];
+  for (const c of cuts.slice(0, WORDS_CUT_LIST)) {
+    const s = byIndex(c.section);
+    add("WORDS_CUT", "fail", s ?? null, `${s ? `${label(s)}: ` : ""}a ${c.kind} ("${short(c.text, 40)}", ${c.fontSize}px) is cut by ${c.by}: ${c.over != null ? `its line runs ${c.over}px past the ${c.axis === "x" ? "side" : "top or bottom"} edge` : `${c.hiddenLines} of its ${c.lines} lines are hidden`}`, "A tile may crop a picture or a UI fragment at its edge, never words: give the text room (a taller or wider tile, a shorter line), move it inside the tile's padding, or drop overflow: hidden from the box around it.");
+  }
+  if (cuts.length > WORDS_CUT_LIST) add("WORDS_CUT", "fail", null, `${cuts.length - WORDS_CUT_LIST} more heading${cuts.length - WORDS_CUT_LIST > 1 ? "s, paragraphs or numbers" : ", paragraph or number"} cut by an edge at ${width}`, "Check every tile and band with overflow hidden: words stay whole; only pictures and UI fragments bleed.");
+
+  const rank = { fail: 0, warn: 1 };
+  return checks.sort((a, b) => rank[a.severity] - rank[b.severity]);
+}
+
+// Bento findings from page-gate.js's grids. [{ id, section, what, fix }]
+const rgbOf = (h) => (typeof h === "string" && /^#[0-9a-f]{6}$/i.test(h) ? [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16)) : null);
+const sameSurface = (a, b) => {
+  if ((a.ground == null) !== (b.ground == null) || a.border !== b.border || a.shadow !== b.shadow) return false;
+  if (a.ground == null) return true;
+  const [x, y] = [rgbOf(a.ground), rgbOf(b.ground)];
+  return Boolean(x && y && Math.hypot(x[0] - y[0], x[1] - y[1], x[2] - y[2]) < 12);
+};
+const surfaceOf = (t) => (t.ground == null ? "a picture" : `${t.ground}${t.border ? " with a border" : ""}${t.shadow ? " with a shadow" : ""}`);
+export function bentoFindings(grids, byIndex = () => null) {
+  const out = [];
+  for (const g of grids) {
+    const ts = g.tiles ?? [];
+    const speaks = (t) => t.titled || t.words >= 6 || ["ui", "stat", "quote"].includes(t.type);
+    if (ts.length < 3 || ts.filter(speaks).length < BENTO_TITLED * ts.length) continue;
+    if (ts.filter((t) => t.price).length >= ts.length / 2) continue;
+    const s = byIndex(g.section) ?? null;
+    const at = s ? `${label(s)}: ` : "";
+    const spread = (k) => Math.max(...ts.map((t) => t[k])) / Math.max(1, Math.min(...ts.map((t) => t[k])));
+    const areas = ts.map((t) => t.w * t.h);
+    const lead = Math.max(...areas) / Math.max(1, Math.min(...areas));
+    const one = ts.every((t) => sameSurface(t, ts[0]));
+    if (ts.length >= BENTO_MIN_TILES && spread("w") <= BENTO_EQUAL && spread("h") <= BENTO_EQUAL && one && ts.filter((t) => t.type !== "media" && t.titled && t.words >= 6).length >= BENTO_DESCRIBED * ts.length)
+      out.push({
+        id: "BENTO_FLAT",
+        section: s,
+        what: `${at}${ts.length} tiles in ${g.rows} rows and ${g.cols} columns, all about ${ts[0].w}×${ts[0].h}px on one surface (${surfaceOf(ts[0])}): no tile leads`,
+        fix: "Give the grid one lead tile carrying the main point (two columns or two rows, with the strongest picture or fragment) and let the rest support it, each a different size or kind; or, if the items are equal, set them as a ruled list instead of boxes.",
+      });
+    else if (lead >= BENTO_LEAD && ts.length <= BENTO_TWINS_MAX) {
+      const twins = (g.pairs ?? []).filter(([i, j]) => {
+        const [a, b] = [ts[i], ts[j]];
+        return a && b && speaks(a) && speaks(b) && Math.abs(a.w - b.w) <= BENTO_TWIN * Math.max(a.w, b.w) + 2 && Math.abs(a.h - b.h) <= BENTO_TWIN * Math.max(a.h, b.h) + 2 && sameSurface(a, b) && a.type === b.type;
+      });
+      if (twins.length)
+        out.push({
+          id: "BENTO_TWINS",
+          section: s,
+          what: `${at}${twins.length} pair${twins.length > 1 ? "s" : ""} of neighbouring tiles look the same (one size, one surface, one kind of content): ${twins.slice(0, 3).map(([i, j]) => `"${short(ts[i].text, 20)}" and "${short(ts[j].text, 20)}" (${ts[i].w}×${ts[i].h}px, ${ts[i].type}, ${surfaceOf(ts[i])})`).join("; ")}`,
+          fix: "Make neighbours contrast: a picture tile beside a text tile, a stat beside a fragment, a different size, or the grid's one inverted tile; never two identical boxes side by side.",
+        });
+    }
+    const inv = ts.filter((t) => t.inverse && speaks(t));
+    const grounded = ts.filter((t) => t.ground != null);
+    if (inv.length >= 2 && inv.length < grounded.length)
+      out.push({
+        id: "INVERT_OVERUSE",
+        section: s,
+        what: `${at}${inv.length} of ${ts.length} tiles are on the inverse ground (${[...new Set(inv.map((t) => t.ground))].slice(0, 3).join(", ")}): ${inv.slice(0, 4).map((t) => `"${short(t.text, 20)}"`).join(", ")}`,
+        fix: "Keep one inverted tile per grid, the accent on the tile that matters most; set the others on the grid's normal surface.",
+      });
+  }
+  return out;
+}
+
+// Renders a route at each width and runs the floor. { pass, checks, metrics: { [width]: metrics } }.
+// shots: { [width]: [{ path, full }] }: screenshots to take from the page already open at that width (the gate's
+// tablet views), so they cost no extra load.
+export async function runFloor(dir, route = "/", { url, widths = FLOOR_WIDTHS, kind = "marketing", shots = {} } = {}) {
+  return withBrowser(dir, { url }, async ({ base, browser }) => {
+    const metrics = {};
+    const checks = [];
+    const widest = Math.max(...widths);
+    for (const width of widths) {
+      // Reduced motion: the floor judges what is there, not whether a reveal fired before the measurement.
+      const { page, ctx } = await openPage(browser, base, route, { width, reducedMotion: true });
+      try {
+        const sections = await findSections(page);
+        const m = await page.evaluate(`(${gateScript})(${JSON.stringify({ sections, cell: CELL })})`);
+        metrics[width] = m;
+        checks.push(...floorChecks(m, { width, kind, pageLevel: width === widest }));
+        // Craft edge cases (photo crops, clipped display ink, hyphen breaks, wrapped labels, double numbering).
+        m.craft = await measureCraft(page, { sections });
+        checks.push(...craftChecks(m.craft, { width }));
+        for (const s of [].concat(shots[width] ?? [])) await (s.full ? shootFull(page, s.path) : page.screenshot({ path: s.path })).catch(() => {});
+      } finally {
+        await ctx.close();
+      }
+    }
+    return { pass: !checks.some((c) => c.severity === "fail"), checks, metrics };
+  });
+}
+
+// The floor on a page that's already open (palate section reuses its own page loads instead of loading again).
+export async function floorOnPage(page, { width, sections, kind = "marketing", pageLevel = false } = {}) {
+  const m = await page.evaluate(`(${gateScript})(${JSON.stringify({ sections, cell: CELL })})`);
+  const checks = floorChecks(m, { width, kind, pageLevel });
+  m.craft = await measureCraft(page, { sections });
+  checks.push(...craftChecks(m.craft, { width }));
+  return checks;
+}
+
+// Short Markdown lines for reports: what, where, the fix.
+export function floorLines(result) {
+  const checks = result?.checks ?? [];
+  if (!checks.length) return ["- Floor: nothing clearly wrong (no dead bands, empty halves, repeated templates, flat ground, placeholder or clipped text)."];
+  const fails = checks.filter((c) => c.severity === "fail").length;
+  const head = `- Floor: ${fails ? `**${fails} fail${fails > 1 ? "s" : ""}**` : "passes"}${checks.length - fails ? `, ${checks.length - fails} warning${checks.length - fails > 1 ? "s" : ""}` : ""}`;
+  return [head, ...checks.map((c) => `  - ${c.severity === "fail" ? "**FAIL**" : "warn"} ${c.id} @${c.width}${c.section ? ` §${c.section.index}` : ""}: ${c.what}. Fix: ${c.fix}`)];
+}