cursedbelt 4.7.0 → 5.0.1

package/dist/styles-areas/master-lock.css

@@ -15,12 +15,118 @@
  *
  * 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. 147 candidate(s) scanned.
+ * when this file is stale. 189 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 @layer theme, base, components, utilities;
-@layer utilities;
+@layer utilities {
+  .self-stretch {
+    align-self: stretch;
+  }
+  .focus-within\:border-field-ring:focus-within {
+    border-color: var(--field-ring);
+  }
+  .focus-within\:ring-2:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-within\:ring-field-ring\/30:focus-within {
+    --tw-ring-color: var(--field-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--field-ring) 30%, transparent);
+    }
+  }
+  .has-\[\[aria-invalid\=true\]\]\:border-field-error:has(:is([aria-invalid=true])) {
+    border-color: var(--field-error);
+  }
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}

package/dist/styles-areas/media-gallery.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. 2162 candidate(s) scanned.
+ * when this file is stale. 2157 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/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. 2775 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. 801 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/overlays.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. 117 candidate(s) scanned.
+ * when this file is stale. 119 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/palette.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. 212 candidate(s) scanned.
+ * when this file is stale. 213 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/virtual.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. 161 candidate(s) scanned.
+ * when this file is stale. 160 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. 395 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/workbench.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. 770 candidate(s) scanned.
+ * when this file is stale. 776 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.7.0",
+	"version": "5.0.1",
 	"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,53 @@
 				"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). 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. 🔴 Nothing the cursedbelt/react barrel reaches may import an unpeered package: Vite stubs only DECLARED optional peers, so 5.0.0 — which listed @emoji-mart/react and @hookform/resolvers here while EmojiPicker and makeFormConfig imported them — failed every consumer's clean-install vite build. 5.0.1 mounts emoji-mart's Picker directly and owns its zod resolver; src/unpeeredStaysOffTheBarrel.spec.ts is the check.",
+		"packages": {
+			"@glideapps/glide-data-grid": ">=6",
+			"lodash": ">=4.17.19"
+		},
+		"subpaths": {
+			"./react/spreadsheet": [
+				"@glideapps/glide-data-grid",
+				"lodash"
+			],
+			"./react/workbook-viewer": [
+				"@glideapps/glide-data-grid",
+				"lodash"
+			],
+			"./react/media-gallery": [
+				"@glideapps/glide-data-grid",
+				"lodash"
+			]
+		}
+	},
 	"scripts": {
 		"typecheck": "bun run typecheck:root && bun run typecheck:specs && bun run typecheck:scripts",
 		"typecheck:root": "tsc --noEmit",
@@ -26,8 +67,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 +445,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 +473,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 +538,6 @@
 		"@emoji-mart/data": {
 			"optional": true
 		},
-		"@emoji-mart/react": {
-			"optional": true
-		},
 		"@ffmpeg/ffmpeg": {
 			"optional": true
 		},
@@ -512,12 +547,6 @@
 		"@git-diff-view/react": {
 			"optional": true
 		},
-		"@glideapps/glide-data-grid": {
-			"optional": true
-		},
-		"@hookform/resolvers": {
-			"optional": true
-		},
 		"@lezer/highlight": {
 			"optional": true
 		},
@@ -612,7 +641,6 @@
 		"@codemirror/state": "^6.7.0",
 		"@codemirror/view": "^6.43.4",
 		"@emoji-mart/data": "^1.2.1",
-		"@emoji-mart/react": "^1.1.1",
 		"@ffmpeg/ffmpeg": "^0.12.15",
 		"@ffmpeg/util": "^0.12.2",
 		"@git-diff-view/react": "^0.1.6",
@@ -730,6 +758,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 });
+    }
+  });
+});