cursedbelt 4.6.0 → 5.0.0

package/dist/styles-areas/media.css

@@ -15,7 +15,7 @@
  *
  * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
  * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 2849 candidate(s) scanned.
+ * when this file is stale. 2777 candidate(s) scanned.
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -156,9 +156,6 @@
     border-block-style: var(--tw-border-style);
     border-block-width: 2px;
   }
-  .border-\[color\:var\(--border-strong\)\] {
-    border-color: var(--border-strong);
-  }
   .border-accent {
     border-color: var(--accent);
   }
@@ -171,12 +168,6 @@
       border-color: color-mix(in oklab, var(--color-white) 90%, transparent);
     }
   }
-  .bg-\[color\:color-mix\(in_srgb\,var\(--accent-solid\)_8\%\,transparent\)\] {
-    background-color: var(--accent-solid);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--accent-solid) 8%,transparent);
-    }
-  }
   .bg-accent\/15 {
     background-color: var(--accent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -283,9 +274,6 @@
   .text-\[color\:var\(--accent\)\] {
     color: var(--accent);
   }
-  .text-\[color\:var\(--muted-foreground\)\] {
-    color: var(--muted-foreground);
-  }
   .accent-white {
     accent-color: var(--color-white);
   }
@@ -322,10 +310,6 @@
   .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
     opacity: 100%;
   }
-  .last\:border-b-0:last-child {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 0px;
-  }
   .focus-within\:opacity-100:focus-within {
     opacity: 100%;
   }

package/dist/styles-areas/nav.css

@@ -15,7 +15,7 @@
  *
  * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
  * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 800 candidate(s) scanned.
+ * when this file is stale. 799 candidate(s) scanned.
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are

package/dist/styles-areas/notifications.css

@@ -15,7 +15,7 @@
  *
  * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
  * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 232 candidate(s) scanned.
+ * when this file is stale. 231 candidate(s) scanned.
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are

package/dist/styles-areas/spreadsheet.css

@@ -15,7 +15,7 @@
  *
  * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
  * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 166 candidate(s) scanned.
+ * when this file is stale. 165 candidate(s) scanned.
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are

package/dist/styles-areas/stats.css

@@ -15,7 +15,7 @@
  *
  * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
  * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 361 candidate(s) scanned.
+ * when this file is stale. 360 candidate(s) scanned.
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are

package/dist/styles-areas/wizard.css

@@ -15,7 +15,7 @@
  *
  * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
  * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 389 candidate(s) scanned.
+ * when this file is stale. 392 candidate(s) scanned.
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are

package/dist/styles-areas/workbook-viewer.css

@@ -15,7 +15,7 @@
  *
  * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
  * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 247 candidate(s) scanned.
+ * when this file is stale. 246 candidate(s) scanned.
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are

package/dist/styles-utilities.css

@@ -1591,9 +1591,6 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .border-\[color\:var\(--border-strong\)\] {
-    border-color: var(--border-strong);
-  }
   .border-\[var\(--border\)\] {
     border-color: var(--border);
   }
@@ -1741,12 +1738,6 @@
   .border-l-warning {
     border-left-color: var(--warning);
   }
-  .bg-\[color\:color-mix\(in_srgb\,var\(--accent-solid\)_8\%\,transparent\)\] {
-    background-color: var(--accent-solid);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--accent-solid) 8%,transparent);
-    }
-  }
   .bg-\[var\(--accent\)\]\/12 {
     background-color: var(--accent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2626,9 +2617,6 @@
   .text-\[color\:var\(--accent\)\] {
     color: var(--accent);
   }
-  .text-\[color\:var\(--muted-foreground\)\] {
-    color: var(--muted-foreground);
-  }
   .text-\[var\(--danger\)\] {
     color: var(--danger);
   }
@@ -3299,10 +3287,6 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
-  .last\:border-b-0:last-child {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 0px;
-  }
   .last\:pr-1:last-child {
     padding-right: var(--spacing);
   }

package/dist/testing/_noBun.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=_noBun.d.ts.map

package/dist/testing/_noBun.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_noBun.d.ts","sourceRoot":"","sources":["../../src/testing/_noBun.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,CAAC"}

package/dist/testing/_noBun.js

@@ -0,0 +1,10 @@
+// Loaded only on non-Bun runtimes (task 2087). The `cursedbelt/testing` export map routes the
+// real module to Bun (the `bun` condition) and everything else here, so importing these helpers
+// from Node fails with a sentence instead of `Named export 'waitFor' not found` — which is what
+// Node said about `@testing-library/react`, a CommonJS module its ESM loader cannot name-import.
+// Same shape as `cwip/testing`'s `_noBun`, and `tools/proveInstall.ts` excuses exactly this: a
+// `bun` condition plus a plain `Error` of the package's own making.
+throw new Error('cursedbelt/testing requires the Bun runtime — it drives @testing-library/react under bun:test + happy-dom. ' +
+    'Import it only from specs run with `bun test`.');
+export {};
+//# sourceMappingURL=_noBun.js.map

package/dist/testing/_noBun.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_noBun.js","sourceRoot":"","sources":["../../src/testing/_noBun.ts"],"names":[],"mappings":"AAAA,8FAA8F;AAC9F,gGAAgG;AAChG,gGAAgG;AAChG,iGAAiG;AACjG,+FAA+F;AAC/F,oEAAoE;AACpE,MAAM,IAAI,KAAK,CACb,6GAA6G;IAC3G,gDAAgD,CACnD,CAAC;AAEF,OAAO,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "4.6.0",
+	"version": "5.0.0",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -13,12 +13,41 @@
 				"typecheck": "typecheck",
 				"e2e": "e2e",
 				"build": "build"
-			},
-			"extraCommands": {
-				"format": "format"
 			}
 		}
 	},
+	"bundlerOnly": {
+		"why": "Entries that load only through a bundler (Vite, Bun), never under plain Node, and why. `css`: they import a stylesheet — their own or a dependency's — so Node refuses them with ERR_UNKNOWN_FILE_EXTENSION \".css\" by design. `directoryImport`: they reach @atlaskit/pragmatic-drag-and-drop, which ships nested package.json directories and no exports map, so Node ESM refuses its subpaths with ERR_UNSUPPORTED_DIR_IMPORT (importing its dist files directly would load a second copy of the drag engine under a bundler). This is the declaration tools/proveInstall.ts reads to excuse exactly that error for exactly these subpaths (task 2087); src/bundlerOnlyEntries.spec.ts fails when a list and the code disagree, in either direction.",
+		"css": [
+			"./react",
+			"./react/activity-bar",
+			"./react/dashboard-grid",
+			"./react/diff-viewer",
+			"./react/file-tree",
+			"./react/markdown-doc",
+			"./react/media",
+			"./react/media-gallery",
+			"./react/media/player-strip",
+			"./react/media/video-player",
+			"./react/pdf-viewer",
+			"./react/rich-text",
+			"./react/spreadsheet",
+			"./react/workbook-viewer"
+		],
+		"directoryImport": [
+			"./react",
+			"./react/disk-usage"
+		]
+	},
+	"unpeered": {
+		"why": "Packages some subpaths import that are deliberately NOT in peerDependencies, because npm cannot resolve them beside this package's own peers: npm checks an optional peer's OWN peer ranges even when nobody installs it, so `npm install cursedbelt` failed ERESOLVE (task 2087, measured on 4.7.0 and on packed probes). @glideapps/glide-data-grid@6 peers react <=18 and marked ^4 (this package: react ^19, marked >=14); @emoji-mart/react@1 peers react <=18; @hookform/resolvers@5 dragged zod 3 against zod ^4. lodash is glide's own peer, which glide does not declare as a dependency. An app that renders ./react/spreadsheet, ./react/workbook-viewer or ./react/media-gallery installs glide + lodash itself; EmojiPicker and makeFormConfig load theirs lazily and name the package when it is missing. Bun installs these without complaint; npm needs --legacy-peer-deps for them, which is the truth about those packages rather than about this one.",
+		"packages": {
+			"@emoji-mart/react": ">=1",
+			"@glideapps/glide-data-grid": ">=6",
+			"@hookform/resolvers": ">=5",
+			"lodash": ">=4.17.19"
+		}
+	},
 	"scripts": {
 		"typecheck": "bun run typecheck:root && bun run typecheck:specs && bun run typecheck:scripts",
 		"typecheck:root": "tsc --noEmit",
@@ -26,8 +55,8 @@
 		"typecheck:scripts": "tsc --noEmit --project tsconfig.scripts.json",
 		"demo:check": "tsc --noEmit --project demo/tsconfig.json",
 		"demo:paths": "bun run demo/generatePaths.ts --write",
-		"guardrails:report": "bun run scripts/guardrailsEnforce.ts no-raw-action-button,no-raw-overflow,no-raw-inputs,no-hardcoded-colors,no-raw-modal-footer,no-unguarded-editing-modal,control-height-tokens,no-raw-zindex,no-raw-data-table,no-tailwind-palette,no-raw-title-attr,micro-typography-floor,choice-needs-empty-state,no-select-as-action-menu,no-native-dialog,no-fast-tooltip --scope cursedbelt src/react src/styles.css",
-		"format": "biome format --write .",
+		"guardrails:report": "bun run scripts/guardrailsEnforce.ts no-raw-action-button,no-raw-overflow,no-raw-inputs,no-hardcoded-colors,no-raw-modal-footer,no-unguarded-editing-modal,control-height-tokens,no-raw-zindex,no-raw-data-table,no-tailwind-palette,no-raw-title-attr,micro-typography-floor,choice-needs-empty-state,no-select-as-action-menu,no-native-dialog,no-fast-tooltip,no-raw-password --scope cursedbelt src/react src/styles.css",
+		"lint": "biome lint src e2e demo scripts",
 		"styles": "bun run styles:static && bun run styles:utilities && bun run styles:areas",
 		"styles:static": "bun run scripts/generateStaticStyles.ts",
 		"styles:utilities": "bun run scripts/generateUtilityStyles.ts",
@@ -404,7 +433,7 @@
 			"types": "./dist/testing/tooltip.d.ts",
 			"bun": "./src/testing/tooltip.ts",
 			"source": "./src/testing/tooltip.ts",
-			"import": "./dist/testing/tooltip.js"
+			"default": "./dist/testing/_noBun.js"
 		},
 		"./theme.css": "./src/theme.css",
 		"./workspace.css": "./src/workspace.css"
@@ -432,12 +461,9 @@
 		"@codemirror/state": ">=6",
 		"@codemirror/view": ">=6",
 		"@emoji-mart/data": ">=1",
-		"@emoji-mart/react": ">=1",
 		"@ffmpeg/ffmpeg": ">=0.12",
 		"@ffmpeg/util": ">=0.12",
 		"@git-diff-view/react": ">=0.1.6",
-		"@glideapps/glide-data-grid": ">=6",
-		"@hookform/resolvers": ">=5",
 		"@lezer/highlight": ">=1",
 		"@tanstack/react-query": ">=5",
 		"@testing-library/react": ">=16",
@@ -500,9 +526,6 @@
 		"@emoji-mart/data": {
 			"optional": true
 		},
-		"@emoji-mart/react": {
-			"optional": true
-		},
 		"@ffmpeg/ffmpeg": {
 			"optional": true
 		},
@@ -512,12 +535,6 @@
 		"@git-diff-view/react": {
 			"optional": true
 		},
-		"@glideapps/glide-data-grid": {
-			"optional": true
-		},
-		"@hookform/resolvers": {
-			"optional": true
-		},
 		"@lezer/highlight": {
 			"optional": true
 		},
@@ -730,6 +747,12 @@
 			{
 				"script": "demo:check"
 			},
+			{
+				"script": "lint"
+			},
+			{
+				"script": "guardrails:report"
+			},
 			{
 				"script": "styles"
 			},

package/scripts/checkAreaStyles.spec.ts

@@ -0,0 +1,71 @@
+import { describe, expect, test } from 'bun:test';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { checkAreaStyles, classesInCss, readBeltSheets, tokensInJs } from './checkAreaStyles';
+
+const BELT = {
+  union: `@layer utilities { .flex { display: flex } .rounded-full { border-radius: 9999px } .hover\\:bg-muted { &:hover { @media (hover: hover) { background: var(--muted) } } } .recharts-tip { opacity: .5; } }`,
+  areas: {
+    core: `.flex { display: flex } .hover\\:bg-muted:hover { background: x }`,
+    charts: `.recharts-tip { opacity: .5 }`,
+    chat: `.rounded-full { border-radius: 9999px }`,
+  },
+};
+
+describe('classesInCss', () => {
+  test('unescapes Tailwind selectors and ignores numbers inside declarations', () => {
+    const names = classesInCss(`.hover\\:bg-muted:hover{a:b} .\\32 xl\\:grid{x:y} .w-\\[1\\.5rem\\]{width:1.5rem} .a{opacity:.5}`);
+    expect([...names].sort()).toEqual(['2xl:grid', 'a', 'hover:bg-muted', 'w-[1.5rem]']);
+  });
+
+  test("reads the real union — cursedbelt's own styles-utilities.css", () => {
+    const { union, areas } = readBeltSheets();
+    const names = classesInCss(union);
+    expect(names.size).toBeGreaterThan(500);
+    expect(names.has('truncate')).toBe(true);
+    expect(Object.keys(areas)).toContain('core');
+  });
+});
+
+describe('checkAreaStyles', () => {
+  test('🔴 a class the JS uses that the CSS does not style is reported WITH its area — the under-selected case', () => {
+    const js = [`const a="flex rounded-full";const b=\`recharts-tip \${x}\`;`];
+    const css = [`.flex{display:flex}.rounded-full{border-radius:9999px}`];
+    const result = checkAreaStyles({ js, css }, BELT);
+    expect(result.missing).toEqual([{ className: 'recharts-tip', area: 'charts' }]);
+    expect(result.referenced).toBe(3);
+  });
+
+  test('complete when every referenced class has a rule; a word that is no belt class is ignored', () => {
+    const js = [`x("flex hover:bg-muted"), y("not-a-belt-class")`];
+    const css = [`.flex{display:flex}.hover\\:bg-muted:hover{background:red}`];
+    expect(checkAreaStyles({ js, css }, BELT).missing).toEqual([]);
+  });
+
+  test('tokensInJs splits on whitespace, quotes and backticks only', () => {
+    expect([...tokensInJs(`a="[&>*]:w-full p-2" b='x'`)]).toContain('[&>*]:w-full');
+  });
+
+  test('the CLI exits 2 on a directory with nothing to compare, 1 on a miss, 0 when complete', () => {
+    const dir = mkdtempSync(join(tmpdir(), 'belt-area-check-'));
+    try {
+      const run = () =>
+        Bun.spawnSync(['bun', join(import.meta.dir, 'checkAreaStyles.ts'), dir], { stdout: 'pipe', stderr: 'pipe' });
+      expect(run().exitCode).toBe(2);
+      const { union } = readBeltSheets();
+      // `truncate` is a core utility in every build of the union.
+      expect(classesInCss(union).has('truncate')).toBe(true);
+      mkdirSync(join(dir, 'assets'));
+      writeFileSync(join(dir, 'assets', 'index.js'), 'const c="truncate";');
+      writeFileSync(join(dir, 'assets', 'index.css'), '.app{color:red}');
+      const miss = run();
+      expect(miss.exitCode).toBe(1);
+      expect(miss.stderr.toString()).toContain('truncate');
+      writeFileSync(join(dir, 'assets', 'index.css'), '.truncate{overflow:hidden}');
+      expect(run().exitCode).toBe(0);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});

package/scripts/checkAreaStyles.ts

@@ -0,0 +1,150 @@
+#!/usr/bin/env bun
+/**
+ * Does an app's BUILT CSS style every cursedbelt class its BUILT JS uses? — the completeness
+ * check the per-area stylesheets need before any app may adopt them (task 079).
+ *
+ * ── Why adopting the areas was blocked on this ──────────────────────────────────────────
+ * `cursedbelt/styles-areas/*.css` lets an app import `core` plus the areas it renders instead
+ * of the 135 KB union (`scripts/generateAreaStyles.ts` has the numbers). The catch is the one
+ * `apps/flix/scripts/check-belt-styles.ts` was built for: under-select ONE area and the app
+ * typechecks, tests and builds green while a component renders unstyled. A byte count cannot
+ * tell "the right ten areas" from "nine of them" — a 4 KB miss is invisible in it.
+ *
+ * ── How it decides, with no new source of truth ─────────────────────────────────────────
+ *   1. The UNION — every utility cursedbelt's components use — is this package's own
+ *      `src/styles-utilities.css`. Its class selectors are the universe.
+ *   2. What the app's JS references: every whitespace/quote-delimited token in the app's built
+ *      `*.js` that is ALSO a union class. (Tailwind's extractor works the same way; a class
+ *      name survives minification because it is a string.)
+ *   3. What the app's CSS styles: every class selector in the app's built `*.css`.
+ *   4. (2) minus (3) is a class cursedbelt draws with and this app ships no rule for. Each one is
+ *      reported with the AREA that carries it (`src/styles-areas/*.css`), which is the fix.
+ *
+ * A false positive is possible — an app string that happens to equal a utility name and is not
+ * used as a class — and it is the cheap direction: adding the area costs bytes, missing one
+ * costs a broken screen on a live hostname. A class that appears in NO area is excluded (the
+ * area split already proves core-plus-every-area equals the union, `src/stylesAreas.spec.ts`).
+ *
+ * Usage, from an app, after its build:
+ *   bun node_modules/cursedbelt/scripts/checkAreaStyles.ts dist
+ * Exit 0 = complete, 1 = a class is unstyled (listed with its area), 2 = could not measure
+ * (no JS or no CSS under the directory — a check that measured nothing has not passed).
+ */
+import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
+import { basename, dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+/** This package's `src`, from `scripts/` (source) or `dist/scripts/` (compiled). */
+const SRC = [resolve(HERE, '../src'), resolve(HERE, '../../src')].find((d) =>
+  existsSync(join(d, 'styles-utilities.css')),
+);
+
+/** Undo CSS identifier escaping: `\:` → `:`, `\32 xl` → `2xl`. */
+function unescapeIdent(raw: string): string {
+  return raw.replace(/\\([0-9a-fA-F]{1,6}) ?|\\(.)/g, (_m, hex: string | undefined, ch: string | undefined) =>
+    hex ? String.fromCodePoint(Number.parseInt(hex, 16)) : (ch ?? ''),
+  );
+}
+
+/** Every class selector in a stylesheet, unescaped. Comments are dropped first. */
+export function classesInCss(css: string): Set<string> {
+  const out = new Set<string>();
+  const code = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  // Only selector text — the part before each `{` — so a `.5rem` in a declaration never counts.
+  for (const selector of code.split('{').map((chunk) => chunk.slice(chunk.lastIndexOf('}') + 1).split(';').pop() ?? '')) {
+    for (const m of selector.matchAll(/\.((?:\\[0-9a-fA-F]{1,6} ?|\\.|[A-Za-z0-9_-])+)/g)) {
+      const name = unescapeIdent(m[1] as string);
+      if (/^[0-9]/.test(name) && !/[a-z]/i.test(name)) continue; // `.5` in a stray number
+      out.add(name);
+    }
+  }
+  return out;
+}
+
+/** Every whitespace/quote/backtick-delimited token in a JS bundle. */
+export function tokensInJs(js: string): Set<string> {
+  return new Set(js.split(/[\s"'`]+/).filter((t) => t.length > 0 && t.length < 200));
+}
+
+function filesUnder(dir: string, ext: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    if (entry === 'node_modules') continue;
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) filesUnder(full, ext, out);
+    else if (entry.endsWith(ext)) out.push(full);
+  }
+  return out;
+}
+
+export interface AreaCheckResult {
+  /** Belt classes the JS uses and the CSS does not style → the area that carries each. */
+  missing: { className: string; area: string }[];
+  jsFiles: number;
+  cssFiles: number;
+  /** How many belt classes the JS references — a zero here means the check saw nothing. */
+  referenced: number;
+}
+
+/** The measurement, over explicit texts — what the spec drives. */
+export function checkAreaStyles(
+  input: { js: string[]; css: string[] },
+  belt: { union: string; areas: Record<string, string> },
+): Omit<AreaCheckResult, 'jsFiles' | 'cssFiles'> {
+  const union = classesInCss(belt.union);
+  const areaOf = new Map<string, string>();
+  for (const [area, css] of Object.entries(belt.areas)) {
+    for (const name of classesInCss(css)) if (!areaOf.has(name)) areaOf.set(name, area);
+  }
+  const emitted = new Set<string>();
+  for (const css of input.css) for (const name of classesInCss(css)) emitted.add(name);
+  const referenced = new Set<string>();
+  for (const js of input.js) for (const token of tokensInJs(js)) if (union.has(token) && areaOf.has(token)) referenced.add(token);
+  const missing = [...referenced]
+    .filter((name) => !emitted.has(name))
+    .sort()
+    .map((className) => ({ className, area: areaOf.get(className) as string }));
+  return { missing, referenced: referenced.size };
+}
+
+/** Read this package's union + area sheets. */
+export function readBeltSheets(src: string | undefined = SRC): { union: string; areas: Record<string, string> } {
+  if (!src) throw new Error("cursedbelt's src/styles-utilities.css is not beside this script — the package is incomplete");
+  const areasDir = join(src, 'styles-areas');
+  const areas: Record<string, string> = {};
+  for (const file of readdirSync(areasDir)) if (file.endsWith('.css')) areas[basename(file, '.css')] = readFileSync(join(areasDir, file), 'utf8');
+  return { union: readFileSync(join(src, 'styles-utilities.css'), 'utf8'), areas };
+}
+
+export function checkDist(distDir: string): AreaCheckResult {
+  const jsFiles = filesUnder(distDir, '.js');
+  const cssFiles = filesUnder(distDir, '.css');
+  const result = checkAreaStyles(
+    { js: jsFiles.map((f) => readFileSync(f, 'utf8')), css: cssFiles.map((f) => readFileSync(f, 'utf8')) },
+    readBeltSheets(),
+  );
+  return { ...result, jsFiles: jsFiles.length, cssFiles: cssFiles.length };
+}
+
+if (import.meta.main) {
+  const dir = resolve(process.argv[2] ?? 'dist');
+  if (!existsSync(dir)) {
+    console.error(`✗ ${dir} does not exist — build the app first. A check that measured nothing has not passed.`);
+    process.exit(2);
+  }
+  const result = checkDist(dir);
+  if (result.jsFiles === 0 || result.cssFiles === 0) {
+    console.error(`✗ ${dir} holds ${result.jsFiles} .js and ${result.cssFiles} .css file(s) — nothing to compare.`);
+    process.exit(2);
+  }
+  if (result.missing.length === 0) {
+    console.log(`✓ belt area styles complete: all ${result.referenced} cursedbelt classes the build references are styled (${result.jsFiles} js, ${result.cssFiles} css).`);
+    process.exit(0);
+  }
+  const byArea = new Map<string, string[]>();
+  for (const { className, area } of result.missing) byArea.set(area, [...(byArea.get(area) ?? []), className]);
+  console.error(`✗ ${result.missing.length} cursedbelt class(es) the built JS uses have NO rule in the built CSS.`);
+  console.error('  Import the area that carries them (after core) — `@import "cursedbelt/styles-areas/<area>.css";`:');
+  for (const [area, names] of [...byArea].sort()) console.error(`    ${area}.css  ← ${names.slice(0, 8).join(' ')}${names.length > 8 ? ` … +${names.length - 8}` : ''}`);
+  process.exit(1);
+}

package/scripts/guardrailsEnforce.spec.ts

@@ -791,6 +791,14 @@ describe('no-native-dialog', () => {
     expect(check('no-native-dialog', prompted)).toHaveLength(0);
   });
 
+  test("🔴 a sibling import with the Node `.js` extension is the belt one too (task 269's spelling)", () => {
+    // DeleteButton's own `import { confirm } from '../confirm.js'` was reported as a native
+    // dialog from the day every relative specifier gained its `.js` until 2026-09-23.
+    const source = `import { confirm, type ConfirmOptions } from '../confirm.js';
+    const ok = await confirm({ title: 'Delete?' });`;
+    expect(check('no-native-dialog', source)).toHaveLength(0);
+  });
+
   test('🔴 a belt import does NOT excuse an explicit window.confirm in the same file', () => {
     // The migration's half-done state: one call site converted, one left behind.
     // Exempting the whole FILE on the strength of its import list is how that
@@ -1176,3 +1184,38 @@ describe('--exclude', () => {
     });
   });
 });
+
+describe('no-raw-password', () => {
+  test('🔴 flags the COMPONENT form no-raw-inputs is blind to', () => {
+    expect(check('no-raw-password', `<Input id="ml-current" type="password" />`)).toHaveLength(1);
+    expect(check('no-raw-inputs', `<Input id="ml-current" type="password" />`)).toHaveLength(0);
+  });
+
+  test('flags a raw input, a JSX expression, a props object and template-literal HTML', () => {
+    expect(check('no-raw-password', `<input type='password' />`)).toHaveLength(1);
+    expect(check('no-raw-password', `<TextField type={"password"} />`)).toHaveLength(1);
+    expect(check('no-raw-password', `const field = { name: 'pw', type: 'password' };`)).toHaveLength(1);
+    expect(check('no-raw-password', 'const html = `<input name="pw" type="password">`;')).toHaveLength(1);
+  });
+
+  test("passes SecretInput's own toggle — a ternary IS the eye", () => {
+    expect(check('no-raw-password', `        type={shown ? 'text' : 'password'}`)).toHaveLength(0);
+  });
+
+  test('passes an ignore-commented line, same line or the block above', () => {
+    expect(
+      check('no-raw-password', `<input type="password" /> {/* guardrails-ignore no-raw-password: server page, own eye */}`),
+    ).toHaveLength(0);
+    expect(
+      check(
+        'no-raw-password',
+        `// guardrails-ignore no-raw-password: server-rendered, carries its own reveal button
+const html = \`<input type="password">\`;`,
+      ),
+    ).toHaveLength(0);
+  });
+
+  test('prose in a comment is not a field', () => {
+    expect(check('no-raw-password', `// never write type="password" by hand`)).toHaveLength(0);
+  });
+});

package/scripts/guardrailsEnforce.ts

@@ -122,6 +122,10 @@
 //     `--reimplements <Name,…>` from `fleet/standards/CURSEDBELT_INVENTORY.md`; with no
 //     list the rule is inert rather than guessing.
 //
+//   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
+//     `no-raw-inputs` cannot see) and in template-literal HTML. Use `SecretInput`.
+//
 // Opt-out (mirrors this repo's existing `biome-ignore lint/<rule>: <reason>` convention —
 // see e.g. packages/cursedbelt/src/react/components/ButtonGroup.tsx): put a same-shaped
 // line comment as the FIRST thing inside the tag's attribute list (for `no-raw-action-button`
@@ -1487,7 +1491,9 @@ function importsBeltDialog(source: string, fn: string): boolean {
 		// static, from the package
 		new RegExp(`import\\s*${named}\\s*from\\s*${spec}`, "s").test(source) ||
 		// static, from a sibling inside cursedbelt itself
-		new RegExp(`import\\s*${named}\\s*from\\s*['"][./]+(?:react/)?${fn}['"]`, "s").test(source) ||
+		// (with or without the `.js` Node ESM needs — task 269 added it to every relative
+		// specifier, and this pattern then reported `DeleteButton`'s own belt `confirm`)
+		new RegExp(`import\\s*${named}\\s*from\\s*['"][./]+(?:react/)?${fn}(?:\\.[jt]sx?)?['"]`, "s").test(source) ||
 		// dynamic — `const { prompt } = await import('cursedbelt/react/prompt')`
 		new RegExp(`${named}\\s*=\\s*(?:await\\s+)?import\\(\\s*${spec}`, "s").test(source) ||
 		// and its type-only companion, `typeof import('…').prompt`
@@ -1626,6 +1632,44 @@ const noFastTooltip: Rule = {
 	},
 };
 
+// ── no-raw-password (owner, 2026-09-18: "all passwords need eye icon") ─────────
+// A password field the person typing into cannot reveal. `SecretInput` has carried the eye
+// (and an opt-out copy button, `showCopy={false}` for a login form) the whole time, and on
+// 2026-09-19 twenty-eight fields across the fleet still typed into the dark — three of them in
+// cursedbelt's OWN master-lock dialog. They accumulated under an enforced guardrails suite
+// because there was no rule about masked fields at all: `no-raw-inputs` is about bare TAGS, and
+// every one of the three belt fields was `<Input type="password">`, a component it never reads.
+//
+// So this rule is on the ATTRIBUTE, on any tag: a raw `<input>`, a component (`<Input`,
+// `<TextField`), a props object (`{ type: 'password' }`), and server-rendered HTML in a
+// template literal (`<input type="password">`), which is the one place a React primitive
+// cannot reach — that markup takes an eye of its own. `SecretInput`'s own
+// `type={shown ? 'text' : 'password'}` does not match: a ternary is a toggle, which is the
+// point. Comments are blanked first; specs are fixtures and are skipped.
+const PASSWORD_TYPE_RE =
+	/\btype\s*=\s*(?:\{\s*)?["'`]password["'`]|\btype\s*:\s*["'`]password["'`]/;
+const PASSWORD_IGNORE_RE = /guardrails-ignore\s+no-raw-password\s*:/;
+
+const noRawPassword: Rule = {
+	name: "no-raw-password",
+	description:
+		"Owner, 2026-09-18: every password field has an eye. A `type=\"password\"` field the person cannot reveal — on any tag, component or props object — must be cursedbelt's `SecretInput` (`showCopy={false}` for a login form, `autoComplete` passed through). Server-rendered HTML that cannot import it carries its own reveal toggle and takes the per-line opt-out naming it.",
+	check(filePath, source) {
+		if (isTestSource(filePath.replace(/\\/g, "/"))) return [];
+		const raws = source.split("\n");
+		const scan = blankComments(source).split("\n");
+		const out: Violation[] = [];
+		for (const [i, line] of scan.entries()) {
+			if (!PASSWORD_TYPE_RE.test(line)) continue;
+			const raw = raws[i] ?? "";
+			if (PASSWORD_IGNORE_RE.test(raw)) continue;
+			if (PASSWORD_IGNORE_RE.test(raws.slice(Math.max(0, i - 3), i).join("\n"))) continue;
+			out.push({ file: filePath, line: i + 1, snippet: raw.trim() });
+		}
+		return out;
+	},
+};
+
 export const RULES: Record<string, Rule> = {
 	[noRawActionButton.name]: noRawActionButton,
 	[noRawOverflow.name]: noRawOverflow,
@@ -1644,6 +1688,7 @@ export const RULES: Record<string, Rule> = {
 	[noSelectAsActionMenu.name]: noSelectAsActionMenu,
 	[noNativeDialog.name]: noNativeDialog,
 	[noFastTooltip.name]: noFastTooltip,
+	[noRawPassword.name]: noRawPassword,
 };
 
 // ── File-scoped allowances ──────────────────────────────────────────────────────