cursedbelt 3.0.2 → 4.0.0

package/dist/styles.css

@@ -6,29 +6,32 @@
  * This `@source` makes Tailwind v4 scan cursedbelt's source files so the utility
  * classes used by its components are generated in the app's stylesheet.
  *
- * ── Two ways in, and which one an app wants ──────────────────────────────────
+ * ── Three ways in, and which one an app wants ────────────────────────────────
  * `@source "."` is the expensive half: it points Tailwind's JIT at cursedbelt's
  * ENTIRE source tree, so the app emits the union of the whole design system
  * whether it renders three components or eighty, and its own build walks 827
  * files it does not own. Everything else in this file is CSS the components
  * genuinely need and no app can do without.
  *
- * A CSS `@import` takes the whole file, so the split is two more subpaths:
+ * A CSS `@import` takes the whole file, so the split is more subpaths:
  *
- *   cursedbelt/styles.css            this file — the real CSS + the `@source` scan
- *   cursedbelt/styles-static.css     the same file MINUS the `@source` line
- *   cursedbelt/styles-utilities.css  the utilities that `@source` line would have
- *                                    produced, precompiled at cursedbelt's build
+ *   cursedbelt/styles.css              this file — the real CSS + the `@source` scan
+ *   cursedbelt/styles-static.css       the same file MINUS the `@source` line
+ *   cursedbelt/styles-utilities.css    the utilities that `@source` line would have
+ *                                      produced, precompiled at cursedbelt's build
+ *   cursedbelt/styles-areas/<area>.css the same utilities, split by component family
  *
- * The second two are a PAIR and neither is usable alone — `styles-static.css` on
- * its own gets the tooltip pointer-events fix, the Progress keyframes, the
- * lightbox bridge, the ambient/glass layer and `tw-animate-css`, and emits none
- * of cursedbelt's utility classes, i.e. an unstyled app:
+ * `styles-static.css` is never usable alone — on its own it gets the tooltip
+ * pointer-events fix, the Progress keyframes, the lightbox bridge, the
+ * ambient/glass layer and `tw-animate-css`, and emits none of cursedbelt's
+ * utility classes, i.e. an unstyled app. It pairs with EITHER of the other two:
  *
- *   @import "tailwindcss";
- *   @import "cursedbelt/styles-static.css";
- *   @import "cursedbelt/styles-utilities.css";
- *   @import "cursedbelt/theme.css";
+ *   @import "tailwindcss";                        @import "tailwindcss";
+ *   @import "cursedbelt/styles-static.css";       @import "cursedbelt/styles-static.css";
+ *   @import "cursedbelt/styles-utilities.css";    @import "cursedbelt/styles-areas/core.css";
+ *   @import "cursedbelt/theme.css";               @import "cursedbelt/styles-areas/data-table.css";
+ *                                                 @import "cursedbelt/theme.css";
+ *      the whole design system                       what this app renders
  *
  * 🔴 Do NOT hand-list cursedbelt's component files to get the utilities back.
  * Tailwind v4 resolves every `@source` to a DIRECTORY and scans it recursively —
@@ -38,22 +41,30 @@
  * into this package's source tree is also a `file:` dependency wearing a
  * stylesheet's clothes, and it buys nothing: it is the thing the previous
  * generation's 29-line-per-app arrangement is remembered for, and those 29 lines
- * were never file-level scoping either.
+ * were never file-level scoping either. Three apps hand-maintained such a list
+ * and one of them ran to 173 lines; all three were deleted, because every one of
+ * them was a directory list wearing a costume.
  *
- * The pair is not SMALLER than this file — measured, both routes emit the same
- * rules within 54 bytes. What it buys is a build that scans nothing of another
- * package's source tree, and a `styles-static.css` that finally has a correct
- * use. The measurements, and what would actually shrink a consumer, are in the
- * header of `scripts/generateUtilityStyles.ts`.
+ * `styles-utilities.css` is not SMALLER than this file — measured, both routes
+ * emit the same rules within 54 bytes; the union is the union however it is
+ * assembled. What it buys is a build that scans nothing of another package's
+ * source tree. 🔴 What makes a consumer smaller is the AREAS, and only the
+ * package could build them: Tailwind cannot aim a `@source` at anything finer
+ * than a directory, but `@tailwindcss/oxide` can be handed a FILE LIST, which is
+ * what `scripts/generateAreaStyles.ts` does. Measured on the fixture consumer
+ * `demo/fixtures/lean-app`, the area route emits 30% less CSS than the union, and
+ * `src/fixtureAppCss.spec.ts` is the ratchet that stops it climbing back. The
+ * area map, and a sentence on what each area is for, is `scripts/styleAreas.ts`.
  *
  * 🔴 This header is in BOTH of the first two files, because one is generated from
  * the other and a test holds them byte-identical apart from the `@source` line.
  * Always edit `src/styles.css`; never `src/styles-static.css`, which
  * `scripts/generateStaticStyles.ts` rewrites on every `bun run build` and
  * `src/stylesStaticMatches.spec.ts` fails on when it is stale. Editing this file
- * invalidates `src/styles-utilities.css` too — it is compiled against the static
- * variant, `scripts/generateUtilityStyles.ts` rewrites it in the same build step,
- * and `src/stylesUtilitiesMatches.spec.ts` is what fails when it is stale.
+ * invalidates `src/styles-utilities.css` and every `src/styles-areas/*.css` too —
+ * all of them are compiled against the static variant, `bun run styles` rewrites
+ * them in the same build step, and `src/stylesUtilitiesMatches.spec.ts` /
+ * `src/stylesAreas.spec.ts` are what fail when they are stale.
  */
 
 /* Animation utilities (animate-in/out, fade/zoom/slide-in-from-*) consumed by the

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "cursedbelt",
-	"version": "3.0.2",
+	"version": "4.0.0",
 	"license": "ISC",
 	"type": "module",
-	"description": "The React design system of the cursedbelt split \u2014 components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
+	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
 	"cursed": {
 		"schemaVersion": 1,
 		"app": {
@@ -20,30 +20,35 @@
 		}
 	},
 	"scripts": {
-		"typecheck": "bun run typecheck:root && bun run typecheck:specs",
+		"typecheck": "bun run typecheck:root && bun run typecheck:specs && bun run typecheck:scripts",
 		"typecheck:root": "tsc --noEmit",
 		"typecheck:specs": "tsc --noEmit --project tsconfig.specs.json",
+		"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 .",
-		"styles": "bun run styles:static && bun run styles:utilities",
+		"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",
-		"test": "NODE_ENV=development bun test src",
+		"test": "NODE_ENV=development bun test src --parallel=6",
 		"demo": "vite --config demo/vite.config.ts",
 		"demo:build": "vite build --config demo/vite.config.ts",
 		"demo:serve": "bun run demo:build && vite preview --config demo/vite.config.ts",
-		"build": "rm -rf dist.next dist.prev && bun run scripts/generateStaticStyles.ts && bun run scripts/generateUtilityStyles.ts && tsc --project tsconfig.build.json --outDir dist.next && CURSEDBELT_DIST_DIR=dist.next bun run scripts/copyDistAssets.ts && { [ -d dist ] && mv dist dist.prev || true; } && mv dist.next dist && rm -rf dist.prev",
+		"build": "rm -rf dist.next dist.prev && bun run scripts/generateStaticStyles.ts && bun run scripts/generateUtilityStyles.ts && bun run scripts/generateAreaStyles.ts && tsc --project tsconfig.build.json --outDir dist.next && tsc --project tsconfig.scripts.build.json --outDir dist.next/scripts && CURSEDBELT_DIST_DIR=dist.next bun run scripts/copyDistAssets.ts && CURSEDBELT_DIST_DIR=dist.next bun run scripts/checkDistExports.ts &&{ [ -d dist ] && mv dist dist.prev || true; } && mv dist.next dist && rm -rf dist.prev",
 		"e2e": "playwright test --config e2e/playwright.config.ts",
 		"e2e:filter-rail": "playwright test --config e2e/playwright.config.ts filter-rail.spec.ts",
 		"e2e:table-layout": "playwright test --config e2e/playwright.config.ts table-layout.spec.ts",
 		"e2e:stage-layout": "playwright test --config e2e/playwright.config.ts stage-layout.spec.ts",
+		"e2e:dialog-reach": "playwright test --config e2e/playwright.config.ts dialog-reach.spec.ts",
+		"e2e:video-turn": "playwright test --config e2e/playwright.config.ts video-turn.spec.ts",
+		"e2e:resize-grip": "playwright test --config e2e/playwright.config.ts resize-grip-rail.spec.ts",
 		"e2e:touch": "playwright test --config e2e/playwright.config.ts --project=touch",
 		"done:serial": "bun run typecheck && bun run lint && bun run test && bun run build",
 		"paths": "bun ../../tools/check-paths.ts .",
 		"verify": "bun run scripts/verify.ts",
-		"prepublishOnly": "bun run verify"
+		"prepublishOnly": "bun run verify",
+		"styles:areas": "bun run scripts/generateAreaStyles.ts"
 	},
 	"exports": {
 		".": {
@@ -53,7 +58,7 @@
 			"import": "./dist/index.js"
 		},
 		"./guardrails": {
-			"types": "./scripts/guardrailsEnforce.ts",
+			"types": "./dist/scripts/guardrailsEnforce.d.ts",
 			"bun": "./scripts/guardrailsEnforce.ts",
 			"source": "./scripts/guardrailsEnforce.ts",
 			"default": "./scripts/guardrailsEnforce.ts"
@@ -317,6 +322,49 @@
 			"import": "./dist/react/workbook-viewer/index.js"
 		},
 		"./styles-static.css": "./src/styles-static.css",
+		"./styles-areas/activity-bar.css": "./src/styles-areas/activity-bar.css",
+		"./styles-areas/analytics.css": "./src/styles-areas/analytics.css",
+		"./styles-areas/auth.css": "./src/styles-areas/auth.css",
+		"./styles-areas/calendar.css": "./src/styles-areas/calendar.css",
+		"./styles-areas/chart-table.css": "./src/styles-areas/chart-table.css",
+		"./styles-areas/charts.css": "./src/styles-areas/charts.css",
+		"./styles-areas/chat.css": "./src/styles-areas/chat.css",
+		"./styles-areas/clipboard.css": "./src/styles-areas/clipboard.css",
+		"./styles-areas/code-editor.css": "./src/styles-areas/code-editor.css",
+		"./styles-areas/companion-link.css": "./src/styles-areas/companion-link.css",
+		"./styles-areas/core.css": "./src/styles-areas/core.css",
+		"./styles-areas/dashboard-grid.css": "./src/styles-areas/dashboard-grid.css",
+		"./styles-areas/data-table.css": "./src/styles-areas/data-table.css",
+		"./styles-areas/deep-link.css": "./src/styles-areas/deep-link.css",
+		"./styles-areas/diff-viewer.css": "./src/styles-areas/diff-viewer.css",
+		"./styles-areas/disk-usage.css": "./src/styles-areas/disk-usage.css",
+		"./styles-areas/emoji.css": "./src/styles-areas/emoji.css",
+		"./styles-areas/fields.css": "./src/styles-areas/fields.css",
+		"./styles-areas/file-tree.css": "./src/styles-areas/file-tree.css",
+		"./styles-areas/filter-rail.css": "./src/styles-areas/filter-rail.css",
+		"./styles-areas/folder-tree.css": "./src/styles-areas/folder-tree.css",
+		"./styles-areas/keep-awake.css": "./src/styles-areas/keep-awake.css",
+		"./styles-areas/layout-engine.css": "./src/styles-areas/layout-engine.css",
+		"./styles-areas/markdown.css": "./src/styles-areas/markdown.css",
+		"./styles-areas/master-detail.css": "./src/styles-areas/master-detail.css",
+		"./styles-areas/master-lock.css": "./src/styles-areas/master-lock.css",
+		"./styles-areas/media.css": "./src/styles-areas/media.css",
+		"./styles-areas/media-gallery.css": "./src/styles-areas/media-gallery.css",
+		"./styles-areas/nav.css": "./src/styles-areas/nav.css",
+		"./styles-areas/notifications.css": "./src/styles-areas/notifications.css",
+		"./styles-areas/overlays.css": "./src/styles-areas/overlays.css",
+		"./styles-areas/palette.css": "./src/styles-areas/palette.css",
+		"./styles-areas/pdf-viewer.css": "./src/styles-areas/pdf-viewer.css",
+		"./styles-areas/problem-detail.css": "./src/styles-areas/problem-detail.css",
+		"./styles-areas/rich-text.css": "./src/styles-areas/rich-text.css",
+		"./styles-areas/sharing.css": "./src/styles-areas/sharing.css",
+		"./styles-areas/spreadsheet.css": "./src/styles-areas/spreadsheet.css",
+		"./styles-areas/stats.css": "./src/styles-areas/stats.css",
+		"./styles-areas/test-report.css": "./src/styles-areas/test-report.css",
+		"./styles-areas/virtual.css": "./src/styles-areas/virtual.css",
+		"./styles-areas/wizard.css": "./src/styles-areas/wizard.css",
+		"./styles-areas/workbench.css": "./src/styles-areas/workbench.css",
+		"./styles-areas/workbook-viewer.css": "./src/styles-areas/workbook-viewer.css",
 		"./styles-utilities.css": "./src/styles-utilities.css",
 		"./styles.css": "./src/styles.css",
 		"./testing": {
@@ -350,10 +398,14 @@
 		"@codemirror/legacy-modes": ">=6",
 		"@codemirror/state": ">=6",
 		"@codemirror/view": ">=6",
-		"@lezer/highlight": ">=1",
+		"@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",
 		"@tiptap/core": ">=3",
@@ -366,17 +418,21 @@
 		"@tiptap/react": ">=3",
 		"@tiptap/starter-kit": ">=3",
 		"@vidstack/react": ">=1",
+		"diff": ">=9",
+		"emoji-mart": ">=5",
 		"hls.js": ">=1",
 		"lowlight": ">=3",
+		"marked": ">=14",
+		"pdfjs-dist": ">=4",
 		"react": "^19",
 		"react-dom": "^19",
+		"react-grid-layout": "2.2.3",
 		"react-photo-album": ">=3",
 		"recharts": ">=3",
 		"tiptap-markdown": ">=0.9",
+		"xlsx": ">=0.20",
 		"yet-another-react-lightbox": ">=3",
-		"zod": "^4.4.0",
-		"pdfjs-dist": ">=4",
-		"xlsx": ">=0.20"
+		"zod": "^4.4.0"
 	},
 	"peerDependenciesMeta": {
 		"@codemirror/commands": {
@@ -406,7 +462,10 @@
 		"@codemirror/view": {
 			"optional": true
 		},
-		"@lezer/highlight": {
+		"@emoji-mart/data": {
+			"optional": true
+		},
+		"@emoji-mart/react": {
 			"optional": true
 		},
 		"@ffmpeg/ffmpeg": {
@@ -415,9 +474,18 @@
 		"@ffmpeg/util": {
 			"optional": true
 		},
+		"@git-diff-view/react": {
+			"optional": true
+		},
 		"@glideapps/glide-data-grid": {
 			"optional": true
 		},
+		"@hookform/resolvers": {
+			"optional": true
+		},
+		"@lezer/highlight": {
+			"optional": true
+		},
 		"@testing-library/react": {
 			"optional": true
 		},
@@ -451,29 +519,41 @@
 		"@vidstack/react": {
 			"optional": true
 		},
+		"diff": {
+			"optional": true
+		},
+		"emoji-mart": {
+			"optional": true
+		},
 		"hls.js": {
 			"optional": true
 		},
 		"lowlight": {
 			"optional": true
 		},
-		"react-photo-album": {
+		"marked": {
 			"optional": true
 		},
-		"recharts": {
+		"pdfjs-dist": {
 			"optional": true
 		},
-		"tiptap-markdown": {
+		"react-grid-layout": {
 			"optional": true
 		},
-		"yet-another-react-lightbox": {
+		"react-photo-album": {
 			"optional": true
 		},
-		"pdfjs-dist": {
+		"recharts": {
+			"optional": true
+		},
+		"tiptap-markdown": {
 			"optional": true
 		},
 		"xlsx": {
 			"optional": true
+		},
+		"yet-another-react-lightbox": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
@@ -490,12 +570,16 @@
 		"@codemirror/search": "^6.7.1",
 		"@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",
 		"@glideapps/glide-data-grid": "^6.0.3",
 		"@happy-dom/global-registrator": "^20.10.6",
+		"@hookform/resolvers": "^5.4.0",
 		"@lezer/highlight": "^1.2.3",
-		"@playwright/test": "^1.61.0",
+		"@playwright/test": "1.62.1",
 		"@tailwindcss/node": "^4.3.1",
 		"@tailwindcss/oxide": "^4.3.1",
 		"@tailwindcss/vite": "^4.3.1",
@@ -520,12 +604,17 @@
 		"@types/react-dom": "^19.2.3",
 		"@vidstack/react": "1.15.6",
 		"@vitejs/plugin-react": "^5.2.0",
+		"cursedbelt-server": "^1.0.1",
+		"diff": "^9.0.0",
+		"emoji-mart": "^5.6.0",
 		"hls.js": "^1.5.0",
 		"hono": "4.12.28",
 		"lowlight": "^3.3.0",
+		"marked": "^14.0.0",
 		"pdfjs-dist": "^4.10.38",
 		"react": "19.2.7",
 		"react-dom": "19.2.7",
+		"react-grid-layout": "2.2.3",
 		"react-photo-album": "^3.6.0",
 		"recharts": "^3.8.1",
 		"tailwindcss": "^4.3.1",
@@ -534,8 +623,7 @@
 		"vite": "^7.3.6",
 		"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
 		"yet-another-react-lightbox": "^3.32.0",
-		"zod": "4.4.3",
-		"cursedbelt-server": "^1.0.1"
+		"zod": "4.4.3"
 	},
 	"dependencies": {
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
@@ -543,11 +631,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
 		"@base-ui/react": "^1.6.0",
 		"@daypicker/react": "^10.0.1",
-		"@emoji-mart/data": "^1.2.1",
-		"@emoji-mart/react": "^1.1.1",
 		"@floating-ui/react": "^0.27.19",
-		"@git-diff-view/react": "^0.1.6",
-		"@hookform/resolvers": "^5.4.0",
 		"@radix-ui/react-accordion": "^1.2.14",
 		"@radix-ui/react-checkbox": "^1.3.5",
 		"@radix-ui/react-collapsible": "^1.1.14",
@@ -568,19 +652,15 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
+		"cursedbelt-core": "^1.1.0",
 		"cwip": "^3.0.2",
-		"diff": "^9.0.0",
-		"emoji-mart": "^5.6.0",
 		"lucide-react": "^1.21.0",
-		"marked": "^14.0.0",
-		"react-grid-layout": "2.2.3",
 		"react-hook-form": "^7.80.0",
 		"react-resizable-panels": "^4.12.0",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.6.0",
 		"tw-animate-css": "^1.4.0",
-		"zustand": "^5.0.14",
-		"cursedbelt-core": "^1.1.0"
+		"zustand": "^5.0.14"
 	},
 	"publishConfig": {
 		"access": "public"

package/scripts/checkDistExports.ts

@@ -0,0 +1,67 @@
+#!/usr/bin/env bun
+/**
+ * Every `exports` target that points into `dist/` must EXIST in the build that just ran.
+ *
+ * ── Why this is a build step and not a spec ────────────────────────────────────────
+ * A missing target does not throw. Node and tsc walk the conditions in order and take the
+ * first one that matches an ACTIVE condition — but a `types` (or `import`) target whose
+ * file is absent makes the resolver fall through to the next condition, which for this
+ * package is `bun`/`source`/`default`: the raw `.ts`. So an export that stops being built
+ * silently reverts to the exact defect task 172 fixed — a consumer's `tsc` compiling our
+ * source again — and every test in this repo stays green while it happens.
+ *
+ * It has to run inside `build`, against `CURSEDBELT_DIST_DIR`, because `dist/` is the one
+ * thing no spec here may read: `build` runs BESIDE `test` and `e2e` in the verify graph
+ * (`src/verifyGraph.spec.ts` asserts no spec opens `dist/`), so a spec looking at it would
+ * be reading a directory another stage is in the middle of swapping.
+ *
+ * Declarations are checked the same as runtime files on purpose — a `.d.ts` that was not
+ * emitted is not a smaller problem than a `.js` that was not emitted; it is a quieter one.
+ */
+import path from "node:path";
+
+const root = path.resolve(import.meta.dir, "..");
+const outDir = process.env.CURSEDBELT_DIST_DIR || "dist";
+
+const pkg = (await Bun.file(path.join(root, "package.json")).json()) as {
+	exports: Record<string, string | Record<string, string>>;
+};
+
+/** `[subpath, condition, target]` for every export target inside `dist/`. */
+const distTargets: [string, string, string][] = [];
+for (const [subpath, entry] of Object.entries(pkg.exports)) {
+	const conditions = typeof entry === "string" ? { default: entry } : entry;
+	for (const [condition, target] of Object.entries(conditions)) {
+		if (typeof target === "string" && target.startsWith("./dist/")) {
+			distTargets.push([subpath, condition, target]);
+		}
+	}
+}
+
+// A manifest this script cannot read is a manifest it cannot check; passing silently on
+// zero targets would make the whole step decorative.
+if (distTargets.length === 0) {
+	console.error("🔴 no exports target resolves into dist/ — checkDistExports is checking nothing.");
+	process.exit(1);
+}
+
+const missing: string[] = [];
+for (const [subpath, condition, target] of distTargets) {
+	// `./dist/react/index.js` → `<outDir>/react/index.js`, so a staged build (dist.next)
+	// is checked where it actually is rather than where it will be after the swap.
+	const staged = path.join(root, outDir, target.slice("./dist/".length));
+	if (!(await Bun.file(staged).exists())) {
+		missing.push(`${subpath} [${condition}] → ${target}   (not emitted at ${outDir}/${target.slice(7)})`);
+	}
+}
+
+if (missing.length > 0) {
+	console.error(
+		`\n🔴 the build did not emit ${missing.length} file(s) package.json exports promise:\n  ${missing.join("\n  ")}\n\n` +
+			"A consumer does not get an error for these — the resolver falls through to the next\n" +
+			"condition, which is our raw `.ts`, and the consumer's tsc compiles our source instead.\n",
+	);
+	process.exit(1);
+}
+
+console.log(`✅ all ${distTargets.length} dist export target(s) present in ${outDir}`);

package/scripts/cssRules.ts

@@ -0,0 +1,125 @@
+/**
+ * Compare two compiled stylesheets by the RULES they emit, not by their bytes.
+ *
+ * Every split this package has made to its CSS — `styles-static.css`,
+ * `styles-utilities.css`, and now `styles-areas/*.css` — can fail in exactly one
+ * way that matters: the new route emits FEWER rules than the old one, so some
+ * component renders unstyled in the apps that adopted it. That failure is
+ * invisible to `tsc` (it is CSS), to Biome (nothing is wrong with the file), and
+ * to a byte count read in the only direction anybody reads it, because a smaller
+ * stylesheet is what the whole exercise was asked for.
+ *
+ * So the specs compare rule sets. These helpers were written inside
+ * `src/stylesUtilitiesMatches.spec.ts` and live here now because
+ * `src/stylesAreas.spec.ts` needs the same comparison against the same two
+ * normalisations — a second copy of a CSS flattener is a second copy that can
+ * drift from the assertions relying on it.
+ */
+
+/**
+ * Flatten a stylesheet into `at-rule ‖ … ‖ selector` → the set of declarations in
+ * that block, merging blocks that repeat (both routes emit `@keyframes spin`
+ * twice; a consumer's browser does not care, and neither should a comparison).
+ *
+ * A hand-rolled walk rather than a CSS parser because the only input is Tailwind's
+ * own output: well-formed, and the one construct that could confuse brace counting
+ * — a `{` inside a string or a comment — is skipped explicitly.
+ */
+export const flatten = (css: string): Map<string, Set<string>> => {
+	const out = new Map<string, Set<string>>();
+	const stack: string[] = [];
+	const open: string[][] = [[]];
+	let buf = '';
+	const push = (raw: string): void => {
+		const decl = raw.trim();
+		if (decl) open[open.length - 1]?.push(decl);
+	};
+	for (let i = 0; i < css.length; i++) {
+		const ch = css[i];
+		if (ch === '/' && css[i + 1] === '*') {
+			i = css.indexOf('*/', i) + 1;
+			continue;
+		}
+		if (ch === '"' || ch === "'") {
+			const end = css.indexOf(ch, i + 1);
+			buf += css.slice(i, end + 1);
+			i = end;
+			continue;
+		}
+		if (ch === '{') {
+			stack.push(buf.trim().replace(/\s+/g, ' '));
+			buf = '';
+			open.push([]);
+			continue;
+		}
+		if (ch === '}') {
+			push(buf);
+			buf = '';
+			const key = stack.join(' ‖ ');
+			const set = out.get(key) ?? new Set<string>();
+			for (const decl of open.pop() ?? []) set.add(decl);
+			out.set(key, set);
+			stack.pop();
+			continue;
+		}
+		// At depth 0 a `;` ends a statement at-rule (`@layer a, b;`, `@import …`),
+		// which carries no declarations and must not stick to the next selector.
+		if (ch === ';') {
+			if (stack.length) push(buf);
+			buf = '';
+			continue;
+		}
+		buf += ch;
+	}
+	return out;
+};
+
+/** `var(--x, <anything>)` → `var(--x)`, so a fallback reads as the same declaration. */
+export const dropFallbacks = (decl: string): string => decl.replace(/var\((\s*--[\w-]+)[^)]*\)/g, 'var($1)');
+
+export const CUSTOM_PROPERTY = /^(--[\w-]+)\s*:/;
+
+/** Every custom property a stylesheet actually reads through `var()`. */
+export const referenced = (css: string): Set<string> => {
+	const out = new Set<string>();
+	for (const m of css.matchAll(/var\(\s*(--[\w-]+)/g)) out.add(m[1] as string);
+	return out;
+};
+
+/** Every custom property a stylesheet declares, including `@property` registrations. */
+export const declared = (css: string): Set<string> => {
+	const out = new Set<string>();
+	for (const m of css.matchAll(/(?:^|[;{\s])(--[\w-]+)\s*:/g)) out.add(m[1] as string);
+	for (const m of css.matchAll(/@property\s+(--[\w-]+)/g)) out.add(m[1] as string);
+	return out;
+};
+
+/**
+ * Rules and declarations `before` emits that `after` does not — the whole point.
+ *
+ * `ignoreProperty` is how a caller excuses the `@theme inline` alias declarations
+ * that one route writes into `:root` and nothing ever reads; everything else is a
+ * real difference.
+ */
+export const lostRules = (
+	before: Map<string, Set<string>>,
+	after: Map<string, Set<string>>,
+	ignoreProperty: (prop: string) => boolean = () => false,
+): { rules: string[]; declarations: string[] } => {
+	const rules: string[] = [];
+	const declarations: string[] = [];
+	for (const [key, decls] of before) {
+		const mine = after.get(key);
+		if (!mine) {
+			rules.push(key);
+			continue;
+		}
+		const theirs = new Set([...mine].map(dropFallbacks));
+		for (const decl of decls) {
+			const prop = CUSTOM_PROPERTY.exec(decl)?.[1];
+			if (prop && ignoreProperty(prop)) continue;
+			if (!theirs.has(dropFallbacks(decl))) declarations.push(`${key} → ${decl}`);
+		}
+	}
+	return { rules, declarations };
+};