cursedbelt 5.30.0 → 5.32.0

package/scripts/guardrailsEnforce.ts

@@ -71,7 +71,7 @@
 //     className="h-8">`, a Progress bar's `h-1.5` track) in some other file never
 //     false-positives.
 //
-//   no-raw-data-table — all-apps-tables.md (owner, 2026-08-14): no hand-rolled `<table>` —
+//   no-raw-data-table — DESIGN.md §3 "Visual Formatting & Data Presentation" (owner, 2026-08-14): no hand-rolled `<table>` —
 //     use `cursedbelt/react/data-table`'s `DataTable`, which carries sorting, a global
 //     filter, column visibility, pagination and the phone card tier. The rule is on the
 //     ELEMENT rather than on "did it remember to sort", because a scanner cannot decide the
@@ -80,7 +80,7 @@
 //     exempt by construction; a genuine exception (a diff, an editable grid) takes an
 //     opt-out with a reason, which is checked over the whole contiguous comment block above.
 //
-//   no-tailwind-palette — DESIGN.md §3 / UX_STANDARDS.md §6.6: no raw Tailwind palette
+//   no-tailwind-palette — DESIGN.md §3 (Visual Formatting & Data Presentation): no raw Tailwind palette
 //     class (`bg-slate-800`, `hover:text-red-500`, `dark:border-zinc-700/40`). Those are
 //     Tailwind's own colours, not the theme's tokens: they do not move when the theme
 //     moves, so an app painted in them has silently opted out of every future design fix.
@@ -134,13 +134,20 @@
 //     which is a request rather than an accident) instead of a literal. The WHY is
 //     `src/react/lib/hoverIntent.ts`.
 //
-//   no-local-reimplementation — all-apps-ux.md (owner, 2026-08-13): an app must not
+//   no-local-reimplementation — DESIGN.md "Core Mandate" (owner, 2026-08-13): an app must not
 //     declare its own component under a name cursedbelt already exports. A local
 //     `EmptyState`/`Modal`/`Badge` compiles, typechecks and looks approximately right,
 //     so nothing reports it — and it is precisely why a fix that landed in the design
 //     system never reached the screen. The name list is passed in with
-//     `--reimplements <Name,…>` from `fleet/standards/CURSEDBELT_INVENTORY.md`; with no
-//     list the rule is inert rather than guessing.
+//     `--reimplements-from-belt` (this package's own react exports) or `--reimplements
+//     <Name,…>`; with no list the rule is inert rather than guessing. Near spellings count
+//     too (task 2381): `CheckBox`, `StatusBadge`, `Stat`, `ToastStack`.
+//
+//   no-inline-style — DESIGN.md §3/§4 (task 2381): `style={{…}}` may carry only a CSS
+//     custom property or COMPUTED geometry; a literal size, colour or font is a violation.
+//
+//   opt-out-count / opt-out-needs-cause — task 2381: every opt-out is counted, and each
+//     leads with a cause from a closed vocabulary. See their block.
 //
 //   no-raw-password — owner, 2026-09-18: every password field has an eye. Flags
 //     `type="password"` on ANY tag or props object (the `<Input type="password">` form that
@@ -170,10 +177,15 @@
 //   // guardrails-ignore no-hardcoded-colors: SVG data-URI icon, not a themeable surface
 //   const icon = "data:image/svg+xml,...#ff0000...";
 //
-// A recognized presentational ARIA role/attribute on the tag (role="tab" | "switch" |
-// "radio" | "menuitemradio" | "presentation", or aria-selected) also counts as an
-// opt-out for `no-raw-action-button` — these are the standard markers for a
-// presentational toggle/tab widget.
+// A presentational ARIA role/attribute on the tag (role="tab" | "switch" | "radio" |
+// "menuitemradio" | "presentation", or aria-selected) exempts a `<button>` from
+// `no-raw-action-button` ONLY inside a belt `Tabs`/`TabsList`/`SegmentedControl`/
+// `RadioGroup`/`ToggleGroup` (task 2381 — a bare marker was the loophole; see the rule).
+//
+// 🔴 Every opt-out is COUNTED (`opt-out-count`) and must lead with its cause
+// (`opt-out-needs-cause`): `guardrails-ignore <rule>: <cause> — <six+ words of why>`, the
+// cause one of `canvas`, `third-party`, `native-media`, `perf`, `a11y-needs`, or a task
+// number. See those two rules' block.
 //
 // File-scoped opt-out — `guardrails-file-allow <rule>[,<rule>...]: <category> — <reason>`:
 // A handful of files legitimately violate several of these rules PERVASIVELY, not at a
@@ -501,13 +513,38 @@ const IGNORE_COMMENT_RE = /guardrails-ignore\s+no-raw-action-button\s*:/;
 const PRESENTATIONAL_MARKER_RE =
 	/role\s*=\s*["'](tab|switch|radio|menuitemradio|presentation)["']|aria-selected\s*=/;
 
+// Task 2381: a role marker used to exempt ANY raw button, so the cheapest way past this rule
+// was `role="switch"` — `apps/family/src/App.tsx:1786-1800` (`EditModeToggle`) says in its
+// own comment the marker is there to satisfy it, beside the belt's `Switch`. A marker now
+// exempts only a button INSIDE a belt group that owns that role (`Tabs`, `SegmentedControl`,
+// `RadioGroup`, `ToggleGroup`) — the one place a raw button with it is the group's own part.
+// Anywhere else it is `Switch` / `Tabs` / `SegmentedControl` / `RadioGroup`, or an opt-out
+// with its cause.
+const BELT_OWN_SRC = `${join(import.meta.dir, "..", "src")}/`;
+const isBeltOwnSource = (filePath: string) =>
+	resolve(filePath).startsWith(BELT_OWN_SRC) || /(^|\/)(?:packages|libs)\/cursedbelt\/src\//.test(filePath.replace(/\\/g, "/"));
+const BELT_CHOICE_GROUPS = ["Tabs", "TabsList", "SegmentedControl", "RadioGroup", "ToggleGroup"];
+
+/** Is `index` inside an open (not yet closed) belt choice-group element in this file? */
+function insideBeltChoiceGroup(scannable: string, index: number): boolean {
+	const before = scannable.slice(0, index);
+	return BELT_CHOICE_GROUPS.some((name) => {
+		const open = Math.max(...[...before.matchAll(new RegExp(`<${name}\\b`, "g"))].map((m) => m.index ?? -1), -1);
+		if (open === -1) return false;
+		const tag = readOpeningTag(scannable, open);
+		if (/\/\s*>$/.test(tag.code.trimEnd())) return false;
+		return !before.slice(open).includes(`</${name}>`);
+	});
+}
+
 const noRawActionButton: Rule = {
 	name: "no-raw-action-button",
 	description:
-		'STANDARDS.md §4a: no hand-rolled <button> for actions — use the cursedbelt Button family.',
+		'DESIGN.md §2 (Component Architecture): no hand-rolled <button> — use the cursedbelt Button family; a toggle is `Switch`, a tab `Tabs`, a choice `SegmentedControl`/`RadioGroup`. A role marker exempts a button only inside one of those groups.',
 	check(filePath, source) {
 		const violations: Violation[] = [];
 		const scannable = blankNonMarkupText(source);
+		let commentless: string | undefined;
 		RAW_BUTTON_RE.lastIndex = 0;
 		for (const match of scannable.matchAll(RAW_BUTTON_RE)) {
 			// Re-read the tag from the ORIGINAL source so opt-out comments (which were
@@ -516,7 +553,13 @@ const noRawActionButton: Rule = {
 			// check is looking for a comment, the marker check for a real attribute, so
 			// prose quoting `role="radio"` opts nothing out.
 			const tag = readOpeningTag(source, match.index);
-			if (IGNORE_COMMENT_RE.test(tag.text) || PRESENTATIONAL_MARKER_RE.test(tag.code)) continue;
+			if (IGNORE_COMMENT_RE.test(tag.text)) continue;
+			if (PRESENTATIONAL_MARKER_RE.test(tag.code)) {
+				// cursedbelt's own source IS those groups (`RatingField`'s stars are its radios).
+				if (isBeltOwnSource(filePath)) continue;
+				commentless ??= blankComments(source);
+				if (insideBeltChoiceGroup(commentless, match.index)) continue;
+			}
 			const line = lineOf(source, match.index);
 			violations.push({
 				file: filePath,
@@ -832,7 +875,7 @@ const noRawZindex: Rule = {
 };
 
 // ── no-raw-data-table ───────────────────────────────────────────────────────
-// The owner, 2026-08-14 (___Unsent-Todos/all-apps-tables.md):
+// The owner, 2026-08-14 (a note in his own queue, not in any tree):
 //
 //   *"find tables of data that are not using standardized cb filters and sorting and make
 //   them use it. I want filters and sorting on all tables in all apps and a single
@@ -870,7 +913,7 @@ const RAW_TABLE_EXEMPT_FRAGMENTS = [
 const noRawDataTable: Rule = {
 	name: "no-raw-data-table",
 	description:
-		"all-apps-tables.md: no hand-rolled <table> — use cursedbelt's DataTable (cursedbelt/react/data-table), which carries sorting, filtering, column visibility and the phone card tier. A hand-rolled table is how a grid ships with no sort and no filter.",
+		"DESIGN.md §3 (Visual Formatting & Data Presentation): no hand-rolled <table> — use cursedbelt's DataTable (cursedbelt/react/data-table), which carries sorting, filtering, column visibility and the phone card tier. A hand-rolled table is how a grid ships with no sort and no filter.",
 	check(filePath, source) {
 		const normalized = filePath.replace(/\\/g, "/");
 		if (RAW_TABLE_EXEMPT_FRAGMENTS.some((fragment) => normalized.includes(fragment))) return [];
@@ -960,7 +1003,7 @@ const EDITING_MODAL_IGNORE_RE = /guardrails-ignore\s+no-unguarded-editing-modal\
  *    deliberately-bad ones written to prove the guard fires.
  */
 const isDialogLibrarySource = (path: string): boolean =>
-	/(^|\/)packages\/cursedbelt\/src\/react\//.test(path) ||
+	/(^|\/)(?:packages|libs)\/cursedbelt\/src\/react\//.test(path) ||
 	/(^|\/)src\/react\/(components|layoutEngine|rich-text|portal)\//.test(path);
 const isTestSource = (path: string): boolean => /\.(spec|test)\.[jt]sx?$/.test(path);
 
@@ -1077,7 +1120,7 @@ const noUnguardedEditingModal: Rule = {
 	},
 };
 
-// ── no-tailwind-palette (DESIGN.md §3 / UX_STANDARDS.md §6.6) ───────────────
+// ── no-tailwind-palette (DESIGN.md §3 (Visual Formatting & Data Presentation)) ───────────────
 // `no-hardcoded-colors` already bans a hex or a literal `rgb()`. It cannot see the
 // OTHER way a colour gets hardcoded, which in a Tailwind codebase is the common one:
 // `bg-slate-800`, `text-red-500`, `border-zinc-700`. Those are not tokens. They are
@@ -1085,7 +1128,7 @@ const noUnguardedEditingModal: Rule = {
 // "one fix per component type" fails — an app painted in `slate-800` has opted out of
 // every future change to `--surface-2`, silently, and nothing anywhere is wrong.
 //
-// UX_STANDARDS.md §6.6 states the law ("One theme system: cursedbelt's tokens. An app
+// The retired UX standard (§6.6) stated the law ("One theme system: cursedbelt's tokens. An app
 // that hardcodes a colour has opted out of every future fix") and DESIGN.md §3 states
 // its visible consequence (badges must clear 4.5:1 in DARK mode — a palette step
 // chosen against a light mock cannot). This rule is that law, checked.
@@ -1120,7 +1163,7 @@ const TAILWIND_PALETTE_RE = new RegExp(
 
 const noTailwindPalette: Rule = makeValueRule(
 	"no-tailwind-palette",
-	"DESIGN.md §3 / UX_STANDARDS.md §6.6: no raw Tailwind palette class (bg-slate-800, text-red-500, …) — those are not tokens and do not move when the theme moves. Use the theme's semantic classes or bg-[var(--token)].",
+	"DESIGN.md §3 (Visual Formatting & Data Presentation): no raw Tailwind palette class (bg-slate-800, text-red-500, …) — those are not tokens and do not move when the theme moves. Use the theme's semantic classes or bg-[var(--token)].",
 	TAILWIND_PALETTE_RE,
 );
 
@@ -1226,7 +1269,7 @@ const themeColoursResolve: Rule = {
 // waits ~500ms before appearing, it cannot be styled or themed, and a screen reader
 // may read it, ignore it, or double it up with the accessible name depending on the
 // element. DESIGN.md §4 asks for explanatory text "behind interactive hover info icon
-// tooltips (i)"; UX_STANDARDS.md §5.1 states the phone half ("a control that only
+// tooltips (i)"; DESIGN.md §5 (Mobile Target Safeguards) carries the phone half ("a control that only
 // exists on hover does not exist on a phone").
 //
 // cursedbelt has both halves already: `Tooltip` (hover + focus + touch long-press,
@@ -1276,7 +1319,7 @@ const noRawTitleAttr: Rule = {
 };
 
 // ── no-local-reimplementation (the reason the Optimized-Tasks queue exists) ─
-// The owner, 2026-08-13 (___Todo-Ready/all-apps-ux.md):
+// The owner, 2026-08-13 (a note in his own queue, not in any tree):
 //
 //   *"apply the quality SaaS product enhancement recommendations everywhere in all the
 //   apps because these patterns were everywhere and we need ONE FIX FOR EACH COMPONENT
@@ -1294,38 +1337,77 @@ const noRawTitleAttr: Rule = {
 // (rename it). Both are worth a line of a person's attention, and neither is
 // detectable any other way — an import cursedbelt does not have is not an error.
 //
-// The inventory that feeds this list is `fleet/standards/CURSEDBELT_INVENTORY.md`;
-// `--reimplements <Name,Name>` passes it in, so the list lives with the inventory and
-// not buried in this file. With no list passed the rule is inert rather than guessing.
+// The list is this package's own react exports (`--reimplements-from-belt`), or a caller's
+// own `--reimplements <Name,Name>`. With no list passed the rule is inert rather than guessing.
 const REIMPL_IGNORE_RE = /guardrails-ignore\s+no-local-reimplementation\s*:/;
 /** Set by `--reimplements` (CLI) or `setReimplementedNames()` (library use). */
 let REIMPLEMENTED_NAMES: string[] = [];
+/** Normalised key → the belt name it stands for (see `nearNameKeys`). */
+let NEAR_NAMES = new Map<string, string>();
 export function setReimplementedNames(names: readonly string[]): void {
 	REIMPLEMENTED_NAMES = [...names];
+	NEAR_NAMES = new Map();
+	for (const name of names) for (const key of nearNameKeys(name, true)) if (!NEAR_NAMES.has(key)) NEAR_NAMES.set(key, name);
+}
+
+// Task 2381: exact-match missed the copies that matter, because a copy is rarely spelled
+// the same — desk's `CheckBox` (belt `Checkbox`), station's `StatusBadge` (`StatusPill`),
+// roms' `Stat` (`StatTile`), desk's `ToastStack` (`Toaster`). The key is lowercase, drops a
+// possessive prefix (`Local|App|My|Custom`) and folds the chip-shaped suffixes
+// (`Badge|Pill|Tile|Chip|Tag`) into one; a belt name carrying one of those suffixes also
+// answers to its bare stem, and `STEM_ALIASES` holds the few a suffix rule cannot reach.
+// It stops there on purpose: `TreeToolbar` → `ListToolbar` is a judgement, and a rule that
+// guesses is one people route around.
+const NEAR_NAME_PREFIX_RE = /^(?:Local|App|My|Custom)(?=[A-Z])/;
+const NEAR_NAME_SUFFIX_RE = /(?<=[a-z0-9])(?:Badge|Pill|Tile|Chip|Tag)$/;
+const STEM_ALIASES: Record<string, readonly string[]> = { Toaster: ["ToastStack", "Toasts", "ToastHost"] };
+const MIN_NEAR_KEY = 3;
+
+function nearNameKeys(name: string, isBelt = false): string[] {
+	const unprefixed = name.replace(NEAR_NAME_PREFIX_RE, "");
+	const suffixed = NEAR_NAME_SUFFIX_RE.test(unprefixed);
+	const stem = unprefixed.replace(NEAR_NAME_SUFFIX_RE, "");
+	const keys = [`${stem.toLowerCase()}${suffixed ? "~chip" : ""}`];
+	if (isBelt && suffixed) keys.push(stem.toLowerCase());
+	if (isBelt) for (const alias of STEM_ALIASES[name] ?? []) keys.push(alias.toLowerCase());
+	return keys.filter((key) => key.replace("~chip", "").length >= MIN_NEAR_KEY);
+}
+
+/** The belt name a locally declared `name` duplicates, exactly or nearly — or null. */
+function reimplementedBeltName(name: string): string | null {
+	if (REIMPLEMENTED_NAMES.includes(name)) return name;
+	for (const key of nearNameKeys(name)) {
+		const belt = NEAR_NAMES.get(key);
+		if (belt) return belt;
+	}
+	return null;
 }
 
+const LOCAL_COMPONENT_DECL_RE = /(?:export\s+)?(?:function|class)\s+([A-Z][A-Za-z0-9]*)\b|(?:export\s+)?const\s+([A-Z][A-Za-z0-9]*)\s*[:=]/g;
+
 const noLocalReimplementation: Rule = {
 	name: "no-local-reimplementation",
 	description:
-		"all-apps-ux.md: an app must not declare its own component under a name cursedbelt already exports — a local copy is why a fix that landed in the design system did not reach the screen. Import the shared one, or rename the local thing so it stops claiming to be it.",
+		"DESIGN.md Core Mandate: an app must not declare its own component under a name cursedbelt already exports, or a near spelling of one (`CheckBox`/`Checkbox`, `StatusBadge`/`StatusPill`, `Stat`/`StatTile`) — a local copy is why a fix that landed in the design system did not reach the screen. Import the shared one, or rename the local thing so it stops claiming to be it.",
 	check(filePath, source) {
 		if (REIMPLEMENTED_NAMES.length === 0) return [];
 		const normalized = filePath.replace(/\\/g, "/");
 		if (/\.(?:spec|test)\.[tj]sx?$/.test(normalized)) return [];
 		// cursedbelt IS the implementation of these names.
-		if (/(^|\/)packages\/cursedbelt\/src\//.test(normalized)) return [];
+		if (/(^|\/)(?:packages|libs)\/cursedbelt\/src\//.test(normalized)) return [];
 		const violations: Violation[] = [];
 		const scannable = blankComments(source);
 		const lines = source.split("\n");
-		for (const name of REIMPLEMENTED_NAMES) {
-			const re = new RegExp(`(?:export\\s+)?(?:function|class)\\s+${name}\\b|(?:export\\s+)?const\\s+${name}\\s*[:=]`, "g");
-			for (const match of scannable.matchAll(re)) {
-				const index = match.index ?? 0;
-				const line = lineOf(source, index);
-				const windowStart = Math.max(0, line - 3);
-				if (REIMPL_IGNORE_RE.test(lines.slice(windowStart, line).join("\n"))) continue;
-				violations.push({ file: filePath, line, snippet: lines[line - 1]?.trim() ?? "" });
-			}
+		LOCAL_COMPONENT_DECL_RE.lastIndex = 0;
+		for (const match of scannable.matchAll(LOCAL_COMPONENT_DECL_RE)) {
+			const name = match[1] ?? match[2] ?? "";
+			const belt = reimplementedBeltName(name);
+			if (!belt) continue;
+			const line = lineOf(source, match.index ?? 0);
+			const windowStart = Math.max(0, line - 3);
+			if (REIMPL_IGNORE_RE.test(lines.slice(windowStart, line).join("\n"))) continue;
+			const snippet = lines[line - 1]?.trim() ?? "";
+			violations.push({ file: filePath, line, snippet: belt === name ? snippet : `${snippet}  ⟵ ≈ cursedbelt's ${belt}` });
 		}
 		return violations;
 	},
@@ -1571,7 +1653,7 @@ const choiceNeedsEmptyState: Rule = {
 	description:
 		"music-app-clicking-favorite-refreshes.md: a choice control whose options come from DATA must pass `emptyLabel` — an empty popup is a dead end that reads as a broken control. Say what belongs in the list, and use ChoiceMenu where making one is possible (it puts 'New <thing>…' first). A list built from a constant is exempt automatically.",
 	check(filePath, source) {
-		if (/(^|\/)packages\/cursedbelt\/src\/react\/components\//.test(filePath.replace(/\\/g, "/"))) {
+		if (/(^|\/)(?:packages|libs)\/cursedbelt\/src\/react\/components\//.test(filePath.replace(/\\/g, "/"))) {
 			return [];
 		}
 		const lines = source.split("\n");
@@ -1588,7 +1670,7 @@ const noSelectAsActionMenu: Rule = {
 	description:
 		"music-app-clicking-favorite-refreshes.md: a select pinned to value=\"\" is an ACTION MENU wearing a form control — and a native <select>'s popup is drawn by the browser outside the page, where no stylesheet reaches it ('the dropdowns open with a gray bland styling'). Use ChoiceMenu: styled, a create row first, and a real empty state.",
 	check(filePath, source) {
-		if (/(^|\/)packages\/cursedbelt\/src\/react\/components\//.test(filePath.replace(/\\/g, "/"))) {
+		if (/(^|\/)(?:packages|libs)\/cursedbelt\/src\/react\/components\//.test(filePath.replace(/\\/g, "/"))) {
 			return [];
 		}
 		const lines = source.split("\n");
@@ -2206,6 +2288,232 @@ const noHandRolledSurface: Rule = {
 	},
 };
 
+// ── no-inline-style (task 2381) ─────────────────────────────────────────────────
+// DESIGN.md §3 ("Visual Formatting & Data Presentation") and §4 ("Typography & Information
+// Density"): the look comes from the theme. Every other rule here reads a className or a
+// colour literal — and `style={{ fontSize: "0.75rem", color: … }}` walks past all of them,
+// because it is neither. The review of 2026-09-30 counted roms 335, family 61, desk 51,
+// fractals 50; `apps/roms/src/views/StatsView.tsx:97-102` hand-rolled a whole stat tile that
+// way, beside the belt's `StatTile`.
+//
+// What an inline style is FOR, and all this rule lets through:
+//   · a CSS custom property (`"--progress": pct`) — the token hand-off to a stylesheet;
+//   · COMPUTED geometry — `width|height|min/max-*|left|top|right|bottom|inset|transform|
+//     translate` whose value is an expression (`${x}px`, `rect.top`, `size * 2`), which a
+//     class cannot carry;
+//   · a spread (`{...rest}`) — the caller's own, and not this file's to judge.
+// Everything else — a literal size, a colour, a font, a literal geometry value a class
+// would carry — is a violation. One per `style={{`, naming the offending keys.
+const INLINE_STYLE_RE = /\bstyle\s*=\s*\{\s*\{/g;
+const INLINE_STYLE_IGNORE_RE = /guardrails-ignore\s+no-inline-style\s*:/;
+const COMPUTED_GEOMETRY_KEYS = new Set([
+	"width",
+	"height",
+	"minWidth",
+	"maxWidth",
+	"minHeight",
+	"maxHeight",
+	"left",
+	"top",
+	"right",
+	"bottom",
+	"inset",
+	"transform",
+	"translate",
+]);
+/** A value a stylesheet could have carried: a number, a quoted string, a template with no `${`. */
+const LITERAL_STYLE_VALUE_RE = /^(?:-?\d+(?:\.\d+)?|"[^"]*"|'[^']*'|`[^`$]*`)$/;
+
+/** Split an object literal's body on its top-level commas (strings, templates and brackets respected). */
+function topLevelEntries(body: string): string[] {
+	const out: string[] = [];
+	let depth = 0;
+	let start = 0;
+	for (let i = 0; i < body.length; i++) {
+		const ch = body[i];
+		if (ch === '"' || ch === "'" || ch === "`") {
+			i = skipQuoted(body, i) - 1;
+			continue;
+		}
+		if (ch === "{" || ch === "(" || ch === "[") depth++;
+		else if (ch === "}" || ch === ")" || ch === "]") depth--;
+		else if (ch === "," && depth === 0) {
+			out.push(body.slice(start, i));
+			start = i + 1;
+		}
+	}
+	out.push(body.slice(start));
+	return out.map((entry) => entry.trim()).filter(Boolean);
+}
+
+/** The keys of one `style={{ … }}` object that are not a custom property or computed geometry. */
+export function disallowedInlineStyleKeys(objectBody: string): string[] {
+	const bad: string[] = [];
+	for (const entry of topLevelEntries(objectBody)) {
+		if (entry.startsWith("...")) continue;
+		const colon = entry.search(/:/);
+		const rawKey = (colon === -1 ? entry : entry.slice(0, colon)).trim();
+		const key = rawKey.replace(/^\[?\s*["'`]?|["'`]?\s*\]?$/g, "");
+		if (key.startsWith("--")) continue;
+		const value = colon === -1 ? key : entry.slice(colon + 1).trim();
+		if (COMPUTED_GEOMETRY_KEYS.has(key) && !LITERAL_STYLE_VALUE_RE.test(value)) continue;
+		bad.push(key);
+	}
+	return bad;
+}
+
+const noInlineStyle: Rule = {
+	name: "no-inline-style",
+	description:
+		"DESIGN.md §3/§4: no inline `style={{…}}` look — a literal size, colour or font belongs to a class or a theme token. An inline style may carry only a CSS custom property (`\"--x\": v`) or COMPUTED geometry (width/height/left/top/transform… from an expression).",
+	check(filePath, source) {
+		const normalized = filePath.replace(/\\/g, "/");
+		if (isTestSource(normalized) || extname(normalized) === ".css") return [];
+		const scannable = blankComments(source);
+		const lines = source.split("\n");
+		const out: Violation[] = [];
+		INLINE_STYLE_RE.lastIndex = 0;
+		for (const match of scannable.matchAll(INLINE_STYLE_RE)) {
+			const inner = (match.index ?? 0) + match[0].length - 1;
+			const bad = disallowedInlineStyleKeys(balancedBraces(scannable, inner));
+			if (bad.length === 0) continue;
+			const line = lineOf(source, match.index ?? 0);
+			if (INLINE_STYLE_IGNORE_RE.test(`${lines[line - 1] ?? ""}\n${blockAbove(lines, line)}`)) continue;
+			out.push({ file: filePath, line, snippet: `${lines[line - 1]?.trim().slice(0, 120) ?? ""}  ⟵ ${bad.join(", ")}` });
+		}
+		return out;
+	},
+};
+
+// ── Opt-outs are counted, and each one names its cause (task 2381) ──────────────
+// A `guardrails-ignore <rule>: <reason>` used to need only the colon. The review of
+// 2026-09-30 counted 421 of them across eleven apps, plus four file-wide allowances — one
+// over all 1,631 lines of `apps/fractals/src/engine/FractalStudio.tsx` — and read them:
+// "fullscreen overlay chrome — UI state only", "control over a video frame". A zero
+// baseline beside that pile does not mean zero raw buttons; it means the cheapest move
+// facing a rule was a comment. Two rules close that:
+//
+//   opt-out-count        — every opt-out (per-line AND file-wide) is one count, so the
+//                          consumer's two-sided baseline row can only fall, and a raise
+//                          needs `allow-raise:` (tools/check-baseline-raises.ts).
+//   opt-out-needs-cause  — the reason must START with a cause from a closed vocabulary —
+//                          `canvas`, `third-party`, `native-media`, `perf`, `a11y-needs` —
+//                          or a task number (`task 2381`, `#2381`), then say why in at
+//                          least six words. A directive naming no known rule suppresses
+//                          nothing and is counted here too. A file-wide allowance's
+//                          category is its cause; its reason still needs six words.
+//
+//   // guardrails-ignore no-raw-inputs: canvas — the hidden input feeds the WebGL caret
+//
+// Neither rule has an opt-out of its own, and neither can be file-allowed: an exemption
+// from counting exemptions is the loophole again.
+const OPT_OUT_CAUSES = ["canvas", "third-party", "native-media", "perf", "a11y-needs"] as const;
+const OPT_OUT_MIN_WORDS = 6;
+const META_RULES: ReadonlySet<string> = new Set(["opt-out-count", "opt-out-needs-cause"]);
+const OPT_OUT_DIRECTIVE_RE = /guardrails-ignore\s+([a-z0-9-]+)\s*:/g;
+const OPT_OUT_CAUSE_RE = new RegExp(`^(?:(?:${OPT_OUT_CAUSES.join("|")})\\b|task[\\s-]*#?\\d+\\b|#\\d+\\b)`, "i");
+
+interface OptOut {
+	rule: string;
+	reason: string;
+	line: number;
+}
+
+/** The reason text after a directive's colon, through the rest of its comment. */
+function optOutReason(source: string, lineStart: number, colonEnd: number): string {
+	const lines = source.slice(colonEnd).split("\n");
+	const first = lines[0] ?? "";
+	const closeAt = first.indexOf("*/");
+	if (closeAt !== -1) return first.slice(0, closeAt);
+	const prefix = source.slice(lineStart, colonEnd);
+	const parts = [first];
+	if (prefix.includes("//")) {
+		for (const next of lines.slice(1, 6)) {
+			const trimmed = next.trim();
+			if (!trimmed.startsWith("//") || /guardrails-(?:ignore|file-allow)/.test(trimmed)) break;
+			parts.push(trimmed.replace(/^\/\/+/, ""));
+		}
+	} else {
+		for (const next of lines.slice(1, 6)) {
+			const close = next.indexOf("*/");
+			parts.push((close === -1 ? next : next.slice(0, close)).trim().replace(/^\*+/, ""));
+			if (close !== -1) break;
+		}
+	}
+	return parts.join(" ");
+}
+
+/** Every `guardrails-ignore` directive written in a COMMENT (prose in a string is not one). */
+export function findOptOuts(source: string): OptOut[] {
+	const scannable = blankComments(source);
+	const out: OptOut[] = [];
+	OPT_OUT_DIRECTIVE_RE.lastIndex = 0;
+	for (const match of source.matchAll(OPT_OUT_DIRECTIVE_RE)) {
+		const at = match.index ?? 0;
+		if (scannable[at] === source[at]) continue; // not inside a comment
+		if (source[at - 1] === "`") continue; // documentation quoting the syntax
+		const lineStart = source.lastIndexOf("\n", at) + 1;
+		const reason = optOutReason(source, lineStart, at + match[0].length)
+			.replace(/\s+/g, " ")
+			.replace(/^[\s—–:-]+/, "")
+			.trim();
+		out.push({ rule: match[1] ?? "", reason, line: lineOf(source, at) });
+	}
+	return out;
+}
+
+const wordCount = (text: string) => (text.match(/[A-Za-z0-9][\w'’.-]*/g) ?? []).length;
+
+/** Why an opt-out's reason does not qualify, or `null` when it does. */
+export function weakOptOutReason(rule: string, reason: string): string | null {
+	if (!(rule in RULES)) return `names no rule "${rule}", so it suppresses nothing`;
+	const cause = reason.match(OPT_OUT_CAUSE_RE);
+	if (!cause) return `starts with no cause — lead with ${OPT_OUT_CAUSES.join(" | ")} | task <n>`;
+	if (wordCount(reason.slice(cause[0].length)) < OPT_OUT_MIN_WORDS)
+		return `says why in fewer than ${OPT_OUT_MIN_WORDS} words after its cause`;
+	return null;
+}
+
+const optOutCount: Rule = {
+	name: "opt-out-count",
+	description:
+		"Task 2381: every `guardrails-ignore` and `guardrails-file-allow` is counted, so an app's opt-outs can only fall. Use the shared component instead of adding one; a genuine new exception raises the row in a commit carrying `allow-raise: <task#>`.",
+	check(filePath, source) {
+		if (isTestSource(filePath.replace(/\\/g, "/"))) return [];
+		const lines = source.split("\n");
+		const perLine = findOptOuts(source).map((o) => ({ file: filePath, line: o.line, snippet: lines[o.line - 1]?.trim() ?? "" }));
+		const fileWide = parseFileAllows(source).allows.map((a) => ({
+			file: filePath,
+			line: a.line,
+			snippet: lines[a.line - 1]?.trim() ?? "",
+		}));
+		return [...perLine, ...fileWide];
+	},
+};
+
+const optOutNeedsCause: Rule = {
+	name: "opt-out-needs-cause",
+	description: `Task 2381: an opt-out reads \`guardrails-ignore <rule>: <cause> — <at least ${OPT_OUT_MIN_WORDS} words of why>\`, the cause one of ${OPT_OUT_CAUSES.join(", ")} or a task number (\`task 2381\`). A file-wide allowance's category is its cause; its reason still needs ${OPT_OUT_MIN_WORDS} words.`,
+	check(filePath, source) {
+		if (isTestSource(filePath.replace(/\\/g, "/"))) return [];
+		const lines = source.split("\n");
+		const out: Violation[] = [];
+		for (const optOut of findOptOuts(source)) {
+			const weak = weakOptOutReason(optOut.rule, optOut.reason);
+			if (weak) out.push({ file: filePath, line: optOut.line, snippet: `${lines[optOut.line - 1]?.trim().slice(0, 120) ?? ""}  ⟵ ${weak}` });
+		}
+		for (const allow of parseFileAllows(source).allows) {
+			if (wordCount(allow.reason) >= OPT_OUT_MIN_WORDS) continue;
+			out.push({
+				file: filePath,
+				line: allow.line,
+				snippet: `${lines[allow.line - 1]?.trim().slice(0, 120) ?? ""}  ⟵ file-wide reason under ${OPT_OUT_MIN_WORDS} words`,
+			});
+		}
+		return out;
+	},
+};
+
 export const RULES: Record<string, Rule> = {
 	[noRawActionButton.name]: noRawActionButton,
 	[noRawOverflow.name]: noRawOverflow,
@@ -2231,6 +2539,9 @@ export const RULES: Record<string, Rule> = {
 	[noRawPopover.name]: noRawPopover,
 	[noHandRolledScrollMemory.name]: noHandRolledScrollMemory,
 	[noHandRolledSurface.name]: noHandRolledSurface,
+	[noInlineStyle.name]: noInlineStyle,
+	[optOutCount.name]: optOutCount,
+	[optOutNeedsCause.name]: optOutNeedsCause,
 };
 
 /**
@@ -2296,6 +2607,11 @@ export function parseFileAllows(source: string): { allows: FileAllow[]; warnings
 			);
 			continue;
 		}
+		const meta = [...rules].filter((r) => META_RULES.has(r));
+		if (meta.length > 0) {
+			warnings.push(`line ${line}: ${meta.join(", ")} cannot be file-allowed — an exemption from counting exemptions is the loophole they close; allowance ignored`);
+			continue;
+		}
 		if (reason.length < FILE_ALLOW_MIN_REASON) {
 			warnings.push(`line ${line}: reason too short — explain why this file qualifies; allowance ignored`);
 			continue;
@@ -2401,7 +2717,7 @@ function baselineDisagreements(rows: FlatBaseline, ruleNames: readonly string[])
 // is a second source of truth that drifts the moment the belt publishes, so the list
 // is read off the react index files of the INSTALLED package — this file's own
 // package, whatever version resolved. `--reimplements <Name,…>` stays for a caller
-// with a list of its own (the CURSEDBELT_INVENTORY.md path in the rule's header).
+// with a list of its own.
 const BELT_REACT_ROOT = join(import.meta.dir, "..", "src", "react");
 
 export function beltExportedComponentNames(reactRoot: string = BELT_REACT_ROOT): string[] {
@@ -2461,9 +2777,8 @@ function main() {
 			i++;
 			continue;
 		}
-		// The inventoried component names `no-local-reimplementation` looks for. Passed
-		// in rather than hardcoded so the list lives beside the inventory it comes from
-		// (fleet/standards/CURSEDBELT_INVENTORY.md) — see that rule's header.
+		// The component names `no-local-reimplementation` looks for, when a caller keeps a
+		// list of its own — `--reimplements-from-belt` is the usual source.
 		if (rest[i] === "--reimplements") {
 			setReimplementedNames((rest[i + 1] ?? "").split(",").map((n) => n.trim()).filter(Boolean));
 			i++;
@@ -2494,6 +2809,7 @@ function main() {
 	}
 
 	let flatBaseline: FlatBaseline | undefined;
+	const missingRows = new Set<string>();
 	if (baselinePath) {
 		if (!existsSync(baselinePath)) {
 			console.error(`--baseline ${baselinePath}: no such file (relative to ${process.cwd()})`);
@@ -2509,7 +2825,11 @@ function main() {
 		if (complaints.length > 0) {
 			console.error(`${baselinePath} and the rules being scanned disagree:`);
 			for (const complaint of complaints) console.error(`  ${complaint}`);
-			process.exit(2);
+			// A row with no rule stops here. A rule with no row — what a belt bump that adds a
+			// rule produces — is still scanned, so the run prints the exact row to record
+			// instead of making the bumping agent find the count by hand; it exits 2 at the end.
+			if (Object.keys(flatBaseline).some((name) => !ruleNames.includes(name))) process.exit(2);
+			for (const name of ruleNames) if (!(name in flatBaseline)) missingRows.add(name);
 		}
 	}
 
@@ -2601,6 +2921,10 @@ function main() {
 			violations.push(...found.filter((v) => !v.absolute));
 		}
 
+		if (missingRows.has(rule.name)) {
+			console.error(`✗ ${rule.name}: no row in ${baselinePath} — record it: "${rule.name}": ${violations.length}`);
+			continue;
+		}
 		const allowedByBaseline = scopeBaseline[rule.name] ?? 0;
 		if (violations.length === allowedByBaseline) {
 			console.log(
@@ -2669,6 +2993,7 @@ function main() {
 		console.error(`✗ ${relative(process.cwd(), v.file)}:${v.line}  ${v.snippet}\n    ${v.absolute}`);
 	}
 
+	if (missingRows.size > 0) process.exit(2);
 	process.exit(anyExceededBaseline || absolutes.length > 0 ? 1 : 0);
 }
 

package/scripts/paths.ts

@@ -38,7 +38,7 @@ import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
 /** The generation's tools this repo runs over its own tree, in the order they should fail. */
-const TOOLS = ["check-paths.ts", "check-doc-citations.ts", "check-gate-graph.ts", "check-test-spawn.ts"];
+const TOOLS = ["check-paths.ts", "check-doc-citations.ts", "check-gate-graph.ts", "check-test-spawn.ts", "check-install.ts"];
 
 /** How far up either walk looks before giving up — a bound, so a misuse is `null` in ms. */
 const MAX_HOPS = 16;

package/src/react/components/ConfirmDialog.tsx

@@ -16,6 +16,9 @@ export interface ConfirmDialogProps {
   destructive?: boolean;
   /** Spinner on the confirm button while an async `onConfirm` runs (caller-controlled). */
   loading?: boolean;
+  /** Added to the dialog's content box — an app that scopes the belt's preflight under a class
+   *  (binary-server's admin: `cb-scope`) passes it here, because the dialog portals to <body>. */
+  className?: string;
 }
 
 /**
@@ -36,6 +39,7 @@ export function ConfirmDialog({
   cancelLabel = 'Cancel',
   destructive = false,
   loading = false,
+  className,
 }: ConfirmDialogProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -53,6 +57,7 @@ export function ConfirmDialog({
           'rounded-xl border border-border bg-popover p-6 text-popover-foreground shadow-overlay',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          className,
         )}
         // Land focus on the safe button for destructive actions; otherwise on confirm.
         // Button isn't a forwardRef component, so target it by data attribute.