diff --git a/internal/check-tab-radius-token.mjs b/internal/check-tab-radius-token.mjs new file mode 100644 index 000000000..db5c2b924 --- /dev/null +++ b/internal/check-tab-radius-token.mjs @@ -0,0 +1,176 @@ +#!/usr/bin/env node +/** + * check-tab-radius-token.mjs — the vertical tab rows must read the shared radius token, not a + * hard-coded pill. + * + * THE DEFECT THIS EXISTS FOR. The tabs shipped at border-radius:999px — a full stadium on a 48px + * row — under a real instruction to imitate the YouTube active row. Measured against the rest of + * the product that is the only thing shaped that way: .vtl-collapse is 8px, the filter toggles in + * library/components/search are 8px, and 8px is already the most common radius in the layout file. + * The Driver reversed it: "there is nowhere else in the app that has that same roundedness." + * + * ★ WHY A GATE AND NOT JUST THE FIX. The 999px rationale is still in the file, kept deliberately as + * history. A superseded rationale that still reads as current is exactly how a reversed decision + * gets quietly undone — the same trap another agent hit today with a stale "navy pin >= 7:1 PASS" + * acceptance line that no longer described anything that ships. A future reader who trusts that + * comment would restore the pill and believe they were fixing a regression. + * + * WHAT IT ASSERTS, and why each assertion is here rather than the obvious one: + * A. .vtl-tab declares its radius through var(--vtl-radius,…), not a literal. Asserting the + * TOKEN rather than the value "8px" is the point: the Driver's requirement is that the tabs, + * the collapse button and the filter toggles agree, which a shared knob guarantees and three + * matching literals only coincidentally satisfy. + * B. The token's fallback equals .vtl-collapse's literal radius, READ FROM THE FILE. A hard-coded + * expectation of 8px here would pass while the collapse button moved to 10px and the two + * surfaces silently diverged — the gate would be asserting a number instead of the rule. + * C. Neither .vtl-tab copy carries a pill radius (anything >= 100px). This is the actual + * regression: a literal reintroduced beside the token would leave A passing. + * + * NOT ASSERTED, deliberately: .vtl-cap keeps border-radius:999px and should. The complaint was + * about the ratio of radius to size — a 16px badge at 999px is a chip, a 48px row at 999px is a + * stadium. A gate that banned 999px everywhere would over-apply the correction. + * + * ★ BOTH COPIES. VerticalTabsLayout.vue carries this CSS TWICE (VTL_SHADOW_CSS and the scoped + *