From 192c78e5aad36813744ac0f19af0f0ed367c5582 Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:13:49 +0100
Subject: [PATCH 01/17] Serve the built bundle in development, not the HTML
 entry point

Development ran Bun's HTML dev server, a second implementation of the
bundler `bun run build` uses. Serving `dist/` in both means the page under
e2e is the bundle production ships, and a defect the bundler introduces is
under the browser suite rather than only under build.test.ts.

It also unblocks CSS modules: the dev server cannot emit their class-name
mapping (oven-sh/bun#18258, open, fix PR #33405 unmerged), so a component
importing one would read undefined off a binding nothing defined.

The cost is hot module replacement, traded for a rebuild on change. The
asset lookup is its own module so its listing guard can be exercised
without starting a server.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 PLAN.md              |  6 +++--
 README.md            | 15 ++++++-----
 build.test.ts        | 36 +++++++++++++++++++++++++++
 dist-routes.ts       | 40 ++++++++++++++++++++++++++++++
 package.json         |  2 +-
 playwright.config.ts |  7 +++---
 scripts/dev.ts       | 59 ++++++++++++++++++++++++++++++++++++++++++++
 server.ts            | 35 +++++++++++++++++---------
 8 files changed, 174 insertions(+), 26 deletions(-)
 create mode 100644 dist-routes.ts
 create mode 100644 scripts/dev.ts

diff --git a/PLAN.md b/PLAN.md
index c4784c4..37f297b 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -171,8 +171,10 @@ Kept because no single file in the tree is where a reader would look for them.
 - **camelCase in every JSON payload** — `types.ts`, the fixture, the generator
   and the bundle contract all take renamed keys on import.
 - **Bun's native bundler, no Vite** — `bun run build` is `bun build
-  ./index.html --outdir=dist` plus the copy steps; `bun run dev` is `server.ts`
-  under `--hot`.
+  ./index.html --outdir=dist` plus the copy steps; `bun run dev` is
+  `scripts/dev.ts`, which runs the same bundle, watches it and serves it.
+  Bun's HTML dev server is not used: it never defines a CSS module's
+  class-name mapping (oven-sh/bun#18258).
 - **Dependabot, not Renovate** — first-party, so no third-party GitHub App
   gets write access to a hardening-focused repository. The trade is no
   dependency dashboard and no lockfile maintenance; the nightly `bun audit`
diff --git a/README.md b/README.md
index 651c96f..845114a 100644
--- a/README.md
+++ b/README.md
@@ -28,14 +28,13 @@ One fact lives in exactly one file; everything else links to it.
 
 ## Running it
 
-- `bun run dev` — `server.ts` under `--hot` on http://localhost:3000. It
-  bundles `index.html` on request and serves the two things the bundler
-  cannot: `/fonts/*` and `/snapshot.json`.
-- `bun run build` — bundles into `dist/`, then copies the fonts and the
-  snapshot in. `dist/` is fully static: `cd dist && python3 -m http.server`
-  serves a working app. `server.ts` is the other way to run in production —
-  it bundles from source instead of serving `dist/`, so the two are
-  alternatives, not a pipeline.
+- `bun run dev` — `scripts/dev.ts` on http://localhost:3000: it bundles into
+  `dist/`, rebuilds on a change under `src/`, and starts `server.ts` over the
+  result. The page in development is the bundle production ships.
+- `bun run build` — the same bundle minified, plus the fonts and the snapshot
+  copied in. `dist/` is fully static: `cd dist && python3 -m http.server`
+  serves a working app. `server.ts` serves `dist/` too, adding the two routes
+  a static server cannot give their headers: `/fonts/*` and `/snapshot.json`.
 - `bun test` — the whole unit suite. It shells out to `bun run build` once, so
   a broken copy step or a bundler upgrade that starts inlining the fonts fails
   here rather than in the browser. `e2e/` is excluded (`pathIgnorePatterns` in
diff --git a/build.test.ts b/build.test.ts
index d5c3d27..454fd8e 100644
--- a/build.test.ts
+++ b/build.test.ts
@@ -1,9 +1,13 @@
 import { beforeAll, describe, expect, test } from "bun:test";
+import { distFile } from "./dist-routes.ts";
 
 /**
  * The build is a bundler call plus two `cp` steps, and the font arrangement
  * rests on Bun leaving an inline `<style>` alone. All three fail silently:
  * the app still builds, it just cannot load its fonts or its snapshot.
+ *
+ * Serving that output is checked here too, because this is where a built
+ * `dist/` already exists.
  */
 
 const dist = `${import.meta.dir}/dist`;
@@ -47,3 +51,35 @@ describe("build output", () => {
 		expect(text).not.toContain("data:font");
 	});
 });
+
+describe("serving the build output", () => {
+	test("hands back the document at the root", async () => {
+		expect(await distFile("/")?.text()).toContain('<div id="app">');
+	});
+
+	// A module script served as text/html is refused by the browser, and a
+	// non-empty body is what it would have either way.
+	test.each([
+		["js", "javascript"],
+		["css", "text/css"],
+	])("hands back the hashed %s asset as %s", async (ext, type) => {
+		const [name] = [...new Bun.Glob(`*.${ext}`).scanSync(dist)];
+		const response = distFile(`/${name}`);
+
+		expect(response?.headers.get("content-type")).toContain(type);
+		expect((await response?.text())?.length).toBeGreaterThan(0);
+	});
+
+	// The listing is the whole guard: a name it does not carry is not a file.
+	// `/snapshot.json` is the sharp case — the build copies one into `dist`, and
+	// serving it from there would drop the `no-cache` its own route carries.
+	test.each([
+		"/nothing-here.js",
+		"/../package.json",
+		"/..%2f..%2fpackage.json",
+		"/snapshot.json",
+		"/fonts/fonts.css",
+	])("refuses %s", (path) => {
+		expect(distFile(path)).toBeNull();
+	});
+});
diff --git a/dist-routes.ts b/dist-routes.ts
new file mode 100644
index 0000000..16f8a57
--- /dev/null
+++ b/dist-routes.ts
@@ -0,0 +1,40 @@
+/**
+ * The built bundle, as a lookup `Bun.serve` can hand a request to.
+ *
+ * Kept apart from `server.ts` for the reason `static-routes.ts` is —
+ * so it can be exercised without starting a server.
+ */
+
+import { staticRoutes } from "./static-routes.ts";
+
+/** Exported so a caller can say what is missing before asking for a file:
+ * listing a directory that is not there throws rather than coming up empty. */
+export const distDir = new URL("./dist/", import.meta.url);
+
+/**
+ * The paths served from source, with headers of their own — the build copies
+ * both into `dist` as well, and answering them from there would drop those
+ * headers. Read off the routes rather than restated, so the two cannot drift.
+ */
+const owned = new Set(Object.keys(staticRoutes()));
+
+/**
+ * The file a request names, or `null` if `dist/` does not list one. Built from
+ * the directory listing, so a request can only ever name a file that is
+ * actually there — there is no path for it to traverse out of. Listed per
+ * call, because a rebuild renames every hashed asset.
+ *
+ * The listing is scoped by what it exempts: an asset the bundler emits under
+ * an extension nobody thought of is served, rather than 404ing while the
+ * document links it.
+ */
+export function distFile(pathname: string): Response | null {
+	if (owned.has(pathname)) return null;
+
+	const name = pathname === "/" ? "index.html" : pathname.slice(1);
+	const listed = new Set(new Bun.Glob("**/*").scanSync(distDir.pathname));
+
+	return listed.has(name)
+		? new Response(Bun.file(new URL(name, distDir)))
+		: null;
+}
diff --git a/package.json b/package.json
index 3703d67..e3cf1ab 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"dev": "bun --hot server.ts",
+		"dev": "bun scripts/dev.ts",
 		"build": "rm -rf dist && bun build ./index.html --outdir=dist --minify && cp -R src/app/styles/fonts dist/fonts && cp src/fixtures/snapshot.json dist/snapshot.json",
 		"lint": "biome ci .",
 		"lint:fix": "biome check --write .",
diff --git a/playwright.config.ts b/playwright.config.ts
index 25f56fe..1b1579d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,9 +1,10 @@
 import { defineConfig, devices } from "@playwright/test";
 
 /**
- * The suite runs against `bun run dev`, not against `dist/` — the dev server
- * is the only thing that serves `/snapshot.json`, and the build output's
- * contents are already asserted by `build.test.ts`.
+ * The suite runs against `bun run dev`, which builds and serves `dist/` — the
+ * same bundle production ships, so a defect the bundler introduces is under
+ * test here rather than only in `build.test.ts`. `/snapshot.json` and the
+ * fonts keep their own routes and are served from source either way.
  *
  * The port follows `Bun.serve`'s own precedence rather than hard-coding 3000:
  * `webServer` inherits this environment, so a developer with `PORT` set gets
diff --git a/scripts/dev.ts b/scripts/dev.ts
new file mode 100644
index 0000000..0b693bd
--- /dev/null
+++ b/scripts/dev.ts
@@ -0,0 +1,59 @@
+/**
+ * `bun run dev`: build, watch, serve. The bundle is what the server hands out
+ * (see `server.ts` for why the HTML entry point is not served directly), so a
+ * change has to be rebuilt before it is visible.
+ *
+ * Not minified — that is the one difference from the production build, and
+ * `build.test.ts` runs the real one. What this arrangement exists for is the
+ * bundler's behaviour, not the minifier's.
+ */
+
+import { watch } from "node:fs";
+import { rm } from "node:fs/promises";
+
+const root = new URL("..", import.meta.url).pathname;
+const dist = `${root}dist`;
+
+// `bun run build`'s own first act, for the same reason: whatever is in there
+// was emitted by a build nobody is running now, and the server answers from
+// the listing rather than from what the document links.
+await rm(dist, { recursive: true, force: true });
+
+let building: Promise<unknown> = Promise.resolve();
+let emitted = new Set<string>();
+
+const build = () => {
+	building = Bun.build({ entrypoints: [`${root}index.html`], outdir: dist })
+		.then(async (result) => {
+			// Every rebuild names its assets by content, so the previous ones
+			// would otherwise pile up for the whole session — and go on being
+			// served under names nothing links to any more.
+			const built = new Set(result.outputs.map((output) => output.path));
+			for (const path of emitted) {
+				if (!built.has(path)) await Bun.file(path).delete();
+			}
+			emitted = built;
+			console.log("bundled");
+		})
+		.catch((error) => console.error(error));
+	return building;
+};
+
+await build();
+
+// One save fires several events, so a rebuild already in flight absorbs them
+// rather than queueing a build per event.
+let pending = false;
+const rebuild = () => {
+	if (pending) return;
+	pending = true;
+	building.then(() => {
+		pending = false;
+		build();
+	});
+};
+
+watch(`${root}src`, { recursive: true }, rebuild);
+watch(`${root}index.html`, rebuild);
+
+await import("../server.ts");
diff --git a/server.ts b/server.ts
index 02cec96..4a14b3d 100644
--- a/server.ts
+++ b/server.ts
@@ -1,23 +1,34 @@
 /**
- * Dev and production server.
+ * Dev and production server. Both serve `dist/`, so the page opened in
+ * development is the page that ships.
  *
- * Bun's HTML entry point bundles the app, but its CSS bundler inlines every
- * `url()` asset as base64 — which would put ~80 KB of fonts inside a
- * render-blocking stylesheet. Serving the woff2 files from their own routes
- * keeps them cacheable and the stylesheet small; `fonts.css` therefore stays
- * out of the bundle and is pulled in by an inline `@import` in index.html.
+ * The HTML entry point is deliberately not a route here. Bun's HTML dev
+ * bundler is a second implementation of the one `bun build` runs, and it
+ * cannot emit a CSS module's class-name mapping (oven-sh/bun#18258), so a
+ * component that imported one would read `undefined` off a binding that was
+ * never defined. `bun run dev` builds and watches instead.
+ *
+ * The fonts and the snapshot keep their own routes rather than being read out
+ * of `dist`: their headers are the contract `static-routes.test.ts` asserts,
+ * and the woff2 files stay out of the bundle so they remain cacheable files.
  */
 
 import { serve } from "bun";
-import homepage from "./index.html";
+import { distDir, distFile } from "./dist-routes.ts";
 import { staticRoutes } from "./static-routes.ts";
 
+// Nothing to serve otherwise, and an empty page is a worse answer than this.
+if (!(await Bun.file(new URL("index.html", distDir)).exists())) {
+	throw new Error(
+		"dist/ carries no index.html — run `bun run build`, or `bun run dev` to build and watch",
+	);
+}
+
 const server = serve({
-	development: { hmr: true },
-	routes: {
-		...staticRoutes(),
-		"/": homepage,
-	},
+	routes: staticRoutes(),
+	fetch: (request) =>
+		distFile(new URL(request.url).pathname) ??
+		new Response("Not found", { status: 404 }),
 });
 
 console.log(`listening on ${server.url}`);

From 560900bab5e12981f46ff3f1a3d0987ec8b944ca Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:52:33 +0100
Subject: [PATCH 02/17] Cache the dist listing and keep it off the request path
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The listing ran a synchronous recursive scan per request, 40µs on a
twelve-entry directory. Keyed on the directory's mtime it costs 2.7µs,
with no coupling to the build: a rebuild adds and removes entries. In
nanoseconds, not milliseconds — two writes inside one millisecond are one
timestamp, and the second would be served from a stale listing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 build.test.ts  | 11 +++++++++++
 dist-routes.ts | 36 ++++++++++++++++++++++++++++--------
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/build.test.ts b/build.test.ts
index 454fd8e..a34a740 100644
--- a/build.test.ts
+++ b/build.test.ts
@@ -70,6 +70,17 @@ describe("serving the build output", () => {
 		expect((await response?.text())?.length).toBeGreaterThan(0);
 	});
 
+	// The listing is cached, so what it costs is a stale answer after a rebuild.
+	test("follows an asset appearing and disappearing", async () => {
+		const probe = `${dist}/probe-listing.js`;
+
+		expect(distFile("/probe-listing.js")).toBeNull();
+		await Bun.write(probe, "//\n");
+		expect(distFile("/probe-listing.js")).not.toBeNull();
+		await Bun.file(probe).delete();
+		expect(distFile("/probe-listing.js")).toBeNull();
+	});
+
 	// The listing is the whole guard: a name it does not carry is not a file.
 	// `/snapshot.json` is the sharp case — the build copies one into `dist`, and
 	// serving it from there would drop the `no-cache` its own route carries.
diff --git a/dist-routes.ts b/dist-routes.ts
index 16f8a57..d6b7e14 100644
--- a/dist-routes.ts
+++ b/dist-routes.ts
@@ -5,6 +5,7 @@
  * so it can be exercised without starting a server.
  */
 
+import { statSync } from "node:fs";
 import { staticRoutes } from "./static-routes.ts";
 
 /** Exported so a caller can say what is missing before asking for a file:
@@ -18,23 +19,42 @@ export const distDir = new URL("./dist/", import.meta.url);
  */
 const owned = new Set(Object.keys(staticRoutes()));
 
+// Nanoseconds, not `mtimeMs`: two writes inside the same millisecond are one
+// timestamp, and the second would be served from a stale listing.
+let listedAt = -1n;
+let listing = new Set<string>();
+
+/**
+ * What `dist/` holds, scoped by what it exempts: an asset the bundler emits
+ * under an extension nobody thought of is served, rather than 404ing while the
+ * document links it.
+ *
+ * The scan is recursive and synchronous, so it does not belong on the request
+ * path. A rebuild renames every hashed asset — it adds and removes entries —
+ * so the directory's own mtime is what says the set is stale, and a `stat`
+ * costs a fiftieth of the scan. Content that changes under an unchanged name
+ * needs no refresh: `Bun.file` reads it when the response is sent.
+ */
+function listed(): Set<string> {
+	const at = statSync(distDir, { bigint: true }).mtimeNs;
+	if (at !== listedAt) {
+		listing = new Set(new Bun.Glob("**/*").scanSync(distDir.pathname));
+		listedAt = at;
+	}
+	return listing;
+}
+
 /**
  * The file a request names, or `null` if `dist/` does not list one. Built from
  * the directory listing, so a request can only ever name a file that is
- * actually there — there is no path for it to traverse out of. Listed per
- * call, because a rebuild renames every hashed asset.
- *
- * The listing is scoped by what it exempts: an asset the bundler emits under
- * an extension nobody thought of is served, rather than 404ing while the
- * document links it.
+ * actually there — there is no path for it to traverse out of.
  */
 export function distFile(pathname: string): Response | null {
 	if (owned.has(pathname)) return null;
 
 	const name = pathname === "/" ? "index.html" : pathname.slice(1);
-	const listed = new Set(new Bun.Glob("**/*").scanSync(distDir.pathname));
 
-	return listed.has(name)
+	return listed().has(name)
 		? new Response(Bun.file(new URL(name, distDir)))
 		: null;
 }

From f009ae12b5654d107923287c41608f9a098a93cd Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:16:19 +0100
Subject: [PATCH 03/17] Deliver styles through the bundle, not a document link

index.html no longer names the stylesheet; main.tsx imports it. The
ambient declaration is what tsc needs to resolve a CSS import at all.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 index.html       | 1 -
 src/app/main.tsx | 3 +++
 src/css.d.ts     | 7 +++++++
 3 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/css.d.ts

diff --git a/index.html b/index.html
index a23b152..3ca4272 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,6 @@
 		<style>
 			@import url("/fonts/fonts.css");
 		</style>
-		<link rel="stylesheet" href="./src/app/styles/styles.css" />
 	</head>
 	<body>
 		<div id="app"></div>
diff --git a/src/app/main.tsx b/src/app/main.tsx
index 595e8ff..40de1ce 100644
--- a/src/app/main.tsx
+++ b/src/app/main.tsx
@@ -1,5 +1,8 @@
 import { render } from "preact";
 import { App } from "./app.tsx";
+// The stylesheet index.html used to link. Delivering it through the bundle is
+// what lets component rules travel with the components that import them.
+import "./styles/styles.css";
 
 const root = document.getElementById("app");
 if (!root) throw new Error("mount point #app is missing from index.html");
diff --git a/src/css.d.ts b/src/css.d.ts
new file mode 100644
index 0000000..50be7c3
--- /dev/null
+++ b/src/css.d.ts
@@ -0,0 +1,7 @@
+// Bun's bundler loads stylesheets; TypeScript has to be told they resolve.
+// A `.module.css` default export is the bundler's class-name mapping, whose
+// keys exist only after it runs — so the type is the shape, not the names.
+declare module "*.css" {
+	const classes: Record<string, string>;
+	export default classes;
+}

From c3fc1fc6ddd0fec5d28d948f4d2472e74a5ea36a Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:16:19 +0100
Subject: [PATCH 04/17] Assert the build emits a stylesheet and the document
 links it

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 build.test.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/build.test.ts b/build.test.ts
index a34a740..d10f78c 100644
--- a/build.test.ts
+++ b/build.test.ts
@@ -44,6 +44,17 @@ describe("build output", () => {
 		expect(html).toContain('@import url("/fonts/fonts.css")');
 	});
 
+	// Styles reach the page through the entry point now, so nothing in the
+	// source `index.html` names them: a stylesheet that stopped being bundled
+	// is a missing import rather than a 404, and this is what would notice.
+	test("emits one stylesheet and links it from the document", async () => {
+		const sheets = [...new Bun.Glob("*.css").scanSync(dist)];
+		const html = await Bun.file(`${dist}/index.html`).text();
+
+		expect(sheets).toHaveLength(1);
+		expect(html).toContain(`href="./${sheets[0]}"`);
+	});
+
 	test("leaves no font inlined as a data URI", async () => {
 		const [css] = [...new Bun.Glob("*.css").scanSync(dist)];
 		const text = await Bun.file(`${dist}/${css}`).text();

From ff708644f298cb870dd939d58d8bad159ae64d46 Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:16:19 +0100
Subject: [PATCH 05/17] Move the hero tile, the re-pick marker and the dialogs
 into modules

One commit for the move: the picker rings the tile Enter would take and
fades the tile of a hero already drafted, so its rules reach into the
tile's own. Splitting it would ship a commit with both broken. The reach
is now two inherited custom properties, since a scoped class name cannot
cross a module boundary.

The confirm dialog is app.tsx's, so its rules go to app.module.css rather
than the picker's; the bare <dialog> panel both share has no class to
scope and goes to base.css.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/app.module.css             |  44 +++++
 src/app/app.tsx                    |   7 +-
 src/app/board/board.tsx            |   5 +-
 src/app/board/hero-tile.module.css |  57 +++++++
 src/app/board/hero-tile.tsx        |  17 +-
 src/app/cx.test.ts                 |  18 ++
 src/app/cx.ts                      |   8 +
 src/app/picker/picker.module.css   | 140 ++++++++++++++++
 src/app/picker/picker.tsx          |  27 +--
 src/app/styles/app.css             | 253 -----------------------------
 src/app/styles/base.css            |  14 ++
 11 files changed, 321 insertions(+), 269 deletions(-)
 create mode 100644 src/app/app.module.css
 create mode 100644 src/app/board/hero-tile.module.css
 create mode 100644 src/app/cx.test.ts
 create mode 100644 src/app/cx.ts
 create mode 100644 src/app/picker/picker.module.css

diff --git a/src/app/app.module.css b/src/app/app.module.css
new file mode 100644
index 0000000..f502cd5
--- /dev/null
+++ b/src/app/app.module.css
@@ -0,0 +1,44 @@
+/* The shell's own styles — currently the reset dialog (screens-spec §4).
+   Every value is a token reference — literals belong in tokens/ only. */
+
+.confirm {
+	width: min(320px, 100% - var(--sp-8));
+	padding: var(--sp-7);
+}
+
+.confirm h2 {
+	margin-bottom: var(--sp-2);
+	font-size: var(--fs-body);
+	font-weight: 600;
+}
+
+.confirm p {
+	margin-bottom: var(--sp-6);
+	color: var(--text-4);
+	font-size: var(--fs-meta);
+}
+
+.confirmActions {
+	display: flex;
+	gap: var(--sp-3);
+	justify-content: flex-end;
+}
+
+.confirmActions button {
+	padding: var(--sp-2) var(--sp-5);
+	border: 1px solid var(--border-3);
+	border-radius: var(--r-control);
+	background: var(--bg-2);
+	color: var(--text-2);
+	font-family: var(--font-ui);
+	font-size: var(--fs-control);
+	font-weight: 600;
+}
+
+/* The design tints this button with its own colour rather than a new one, so
+   the tint is mixed from the token instead of restating the palette here. */
+.confirmActions .danger {
+	border-color: color-mix(in srgb, var(--dire) 45%, transparent);
+	background: color-mix(in srgb, var(--dire) 8%, transparent);
+	color: var(--dire);
+}
diff --git a/src/app/app.tsx b/src/app/app.tsx
index 87efe75..74b949a 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { computeModel } from "../model.ts";
 import type { HeroId, SnapshotBundle } from "../types.ts";
+import s from "./app.module.css";
 import { Board } from "./board/board.tsx";
 import { Header } from "./header.tsx";
 import { Picker } from "./picker/picker.tsx";
@@ -213,7 +214,7 @@ function ResetDialog({ onAnswer }: { onAnswer: (confirmed: boolean) => void }) {
 
 	return (
 		<dialog
-			class="confirm"
+			class={s.confirm}
 			ref={dialog}
 			aria-labelledby="reset-title"
 			onClose={() => onAnswer(dialog.current?.returnValue === "reset")}
@@ -221,13 +222,13 @@ function ResetDialog({ onAnswer }: { onAnswer: (confirmed: boolean) => void }) {
 			<form method="dialog">
 				<h2 id="reset-title">Reset draft?</h2>
 				<p>Bans and all picks will be cleared. Side and role stay.</p>
-				<div class="confirm-actions">
+				<div class={s.confirmActions}>
 					<button type="submit" value="cancel">
 						Cancel
 					</button>
 					{/* `showModal()` honours `autofocus`, which is what makes `Enter`
 					    confirm — without it the first control, Cancel, would answer. */}
-					<button type="submit" value="reset" class="danger" autofocus>
+					<button type="submit" value="reset" class={s.danger} autofocus>
 						Reset
 					</button>
 				</div>
diff --git a/src/app/board/board.tsx b/src/app/board/board.tsx
index 9925ae2..7c6ce03 100644
--- a/src/app/board/board.tsx
+++ b/src/app/board/board.tsx
@@ -25,6 +25,9 @@ import {
 	scoreTone,
 	topRoles,
 } from "./format.ts";
+// The re-pick marker is the tile's other half: it stands in for a hero the
+// snapshot dropped, so its rule lives beside the tile it replaces.
+import s from "./hero-tile.module.css";
 import { HeroTile } from "./hero-tile.tsx";
 
 type Apply = (action: Action) => void;
@@ -107,7 +110,7 @@ function RemoveButton({
 /** A hero the loaded snapshot no longer carries (screens-spec §6.4): the entry
  * stays put, says so, and waits to be replaced. */
 const RepickBadge = ({ hero }: { hero: HeroEntry | undefined }) =>
-	hero === undefined ? <span class="repick-badge">re-pick</span> : null;
+	hero === undefined ? <span class={s.repickBadge}>re-pick</span> : null;
 
 const ThinBadge = ({ hero }: { hero: HeroEntry | undefined }) =>
 	hero?.sufficient === false ? (
diff --git a/src/app/board/hero-tile.module.css b/src/app/board/hero-tile.module.css
new file mode 100644
index 0000000..be9f5e1
--- /dev/null
+++ b/src/app/board/hero-tile.module.css
@@ -0,0 +1,57 @@
+/* The hero tile, and the marker for a hero the snapshot no longer carries.
+   Every value is a token reference — literals belong in tokens/ only. */
+
+.tile {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	border-radius: var(--r-tile);
+	/* Both knobs belong to whoever places the tile: the picker rings the one
+	   `Enter` would take and fades the one already in the draft. A scoped class
+	   name cannot cross a module boundary; an inherited custom property can. */
+	box-shadow: var(--tile-ring, var(--tile-inset));
+	opacity: var(--tile-fade, 1);
+	font-family: var(--font-mono);
+	font-weight: 700;
+}
+
+.tileLg {
+	width: var(--tile-lg);
+	height: var(--tile-lg);
+	font-size: var(--fs-tile-lg);
+}
+
+.tileMd {
+	width: var(--tile-md);
+	height: var(--tile-md);
+	border-radius: var(--r-control);
+	font-size: var(--fs-tile-md);
+}
+
+.tileSm {
+	width: var(--tile-sm);
+	height: var(--tile-sm);
+	border-radius: var(--r-tile-sm);
+	font-size: var(--fs-tile-sm);
+}
+
+.tileInkDark {
+	color: var(--tile-ink-dark);
+}
+
+.tileInkLight {
+	color: var(--tile-ink-light);
+}
+
+/* re-pick marker: the hero left the snapshot (screens-spec §6.4) */
+
+.repickBadge {
+	padding: 2px var(--sp-2);
+	border: 1px solid var(--accent-border);
+	border-radius: var(--r-kbd);
+	background: var(--accent-banner-bg);
+	color: var(--accent);
+	font-family: var(--font-mono);
+	font-size: var(--fs-kbd);
+}
diff --git a/src/app/board/hero-tile.tsx b/src/app/board/hero-tile.tsx
index 930008b..3d83e17 100644
--- a/src/app/board/hero-tile.tsx
+++ b/src/app/board/hero-tile.tsx
@@ -1,8 +1,23 @@
 import type { HeroEntry } from "../../types.ts";
+import { cx } from "../cx.ts";
 import { heroAbbr, type Ink, tileInk } from "./format.ts";
+import s from "./hero-tile.module.css";
 
 type TileSize = "lg" | "md" | "sm";
 
+/** The bundler owns the class names, so a variant is looked up rather than
+ * spelled out from the prop — a name assembled here would match nothing. */
+const SIZE: Record<TileSize, string | undefined> = {
+	lg: s.tileLg,
+	md: s.tileMd,
+	sm: s.tileSm,
+};
+
+const INK: Record<Ink, string | undefined> = {
+	dark: s.tileInkDark,
+	light: s.tileInkLight,
+};
+
 /**
  * The palette lives in `tokens/colors.css` and is never restated here: the
  * background is a `var()` with the design's own fallback, and the lettering
@@ -47,7 +62,7 @@ export function HeroTile({
 
 	return (
 		<span
-			class={`tile tile-${size} tile-ink-${inkFor(slug)}`}
+			class={cx(s.tile, SIZE[size], INK[inkFor(slug)])}
 			style={{ background: `var(--hero-${slug}, var(--hero-fallback))` }}
 			{...(label === undefined
 				? { "aria-hidden": true }
diff --git a/src/app/cx.test.ts b/src/app/cx.test.ts
new file mode 100644
index 0000000..4347985
--- /dev/null
+++ b/src/app/cx.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "bun:test";
+import { cx } from "./cx.ts";
+
+describe("joining the class names a module hands back", () => {
+	test("a name the stylesheet does not carry leaves nothing behind", () => {
+		expect(cx(undefined, undefined)).toBe("");
+	});
+
+	test("names keep the order they were given", () => {
+		expect(cx("tile", "tileLg")).toBe("tile tileLg");
+	});
+
+	// The reason the helper exists: a plain join writes "tile  tileLg", and a
+	// template literal writes "tile undefined tileLg".
+	test("an absent name between two present ones leaves no gap", () => {
+		expect(cx("tile", undefined, "tileLg")).toBe("tile tileLg");
+	});
+});
diff --git a/src/app/cx.ts b/src/app/cx.ts
new file mode 100644
index 0000000..c457be5
--- /dev/null
+++ b/src/app/cx.ts
@@ -0,0 +1,8 @@
+/**
+ * Joins the class names a CSS module hands back. A name the stylesheet does
+ * not carry drops out of the attribute instead of reaching the DOM as the
+ * string "undefined" — the mapping is built by the bundler, so its keys are
+ * unknown to the type checker and a stale name is only ever a missing rule.
+ */
+export const cx = (...names: (string | undefined)[]) =>
+	names.filter(Boolean).join(" ");
diff --git a/src/app/picker/picker.module.css b/src/app/picker/picker.module.css
new file mode 100644
index 0000000..c1f0989
--- /dev/null
+++ b/src/app/picker/picker.module.css
@@ -0,0 +1,140 @@
+/* The hero picker (screens-spec §3). Every value is a token reference —
+   literals belong in tokens/ only. */
+
+.picker {
+	width: min(640px, 100% - var(--sp-8));
+	padding: 0;
+	overflow: hidden;
+}
+
+.pickerHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--sp-5) var(--sp-6) var(--sp-4);
+}
+
+.pickerTitle {
+	font-size: var(--fs-body);
+	font-weight: 600;
+}
+
+.pickerClose {
+	width: var(--tile-sm);
+	height: var(--tile-sm);
+	border: 1px solid var(--border-3);
+	border-radius: var(--r-tile-sm);
+	background: transparent;
+	color: var(--text-4);
+	font-size: var(--fs-meta);
+}
+
+.pickerSearch {
+	display: block;
+	padding: 0 var(--sp-6) var(--sp-4);
+}
+
+.pickerSearch input {
+	width: 100%;
+	padding: var(--sp-3) var(--sp-4);
+	border: 1px solid var(--border-3);
+	border-radius: var(--r-control);
+	background: var(--bg-0);
+	color: var(--text-1);
+	font-family: var(--font-ui);
+	font-size: var(--fs-body);
+}
+
+.pickerEmpty {
+	padding: 0 var(--sp-6) var(--sp-5);
+	color: var(--text-4);
+	font-size: var(--fs-control);
+}
+
+.pickerGrid {
+	display: grid;
+	grid-template-columns: repeat(8, 1fr);
+	gap: var(--sp-3) var(--sp-2);
+	max-height: 50vh;
+	padding: var(--sp-1) var(--sp-6) var(--sp-5);
+	overflow-y: auto;
+}
+
+.pickerTile {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 5px;
+	padding: var(--sp-2) 2px;
+	border: 0;
+	border-radius: var(--r-tile);
+	background: transparent;
+	color: var(--text-4);
+	font-family: var(--font-ui);
+	font-size: var(--fs-kbd);
+	text-align: center;
+}
+
+.pickerFirst {
+	background: var(--bg-3);
+	--tile-ring: var(--tile-inset), 0 0 0 2px var(--accent);
+}
+
+.pickerTile[aria-disabled="true"] {
+	cursor: not-allowed;
+	/* The design fades the whole cell; fading the words with it would leave the
+	   one thing a taken tile has to say — where the hero already sits — below any
+	   readable contrast. Only the artwork dims, so the fade is handed to the
+	   tile alone and the name is coloured on its own. */
+	--tile-fade: 0.35;
+}
+
+.pickerTile[aria-disabled="true"] .pickerName {
+	color: var(--text-5);
+}
+
+.pickerUsed {
+	color: var(--accent);
+}
+
+.pickerHints {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--sp-5);
+	padding: var(--sp-3) var(--sp-6);
+	border-top: 1px solid var(--border-0);
+	color: var(--text-5);
+	font-family: var(--font-mono);
+	font-size: var(--fs-kbd);
+}
+
+/* One column: the board has to fit a phone held beside the game (US-25). */
+
+@media (max-width: 720px) {
+	/* Full-screen picker: the search field has to be reachable with a thumb
+	   and the grid still has to show whole rows (screens-spec §3). */
+	.picker {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: none;
+		height: 100%;
+		max-height: none;
+		margin: 0;
+		border: 0;
+		border-radius: 0;
+	}
+
+	/* The grid is the only part that may shrink, so the hint bar stays on
+	   screen and the heroes scroll inside instead of being clipped away. */
+	.pickerGrid {
+		grid-template-columns: repeat(4, 1fr);
+		min-height: 0;
+		max-height: none;
+	}
+
+	.pickerHints {
+		margin-top: auto;
+		gap: var(--sp-4);
+	}
+}
diff --git a/src/app/picker/picker.tsx b/src/app/picker/picker.tsx
index 93ad93a..dab9a42 100644
--- a/src/app/picker/picker.tsx
+++ b/src/app/picker/picker.tsx
@@ -9,8 +9,10 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import type { HeroEntry, HeroId, SnapshotBundle } from "../../types.ts";
 import { HeroTile } from "../board/hero-tile.tsx";
+import { cx } from "../cx.ts";
 import type { PickTarget, Used } from "../session.ts";
 import { ROLE_UI } from "../session-controls.tsx";
+import s from "./picker.module.css";
 import { matchHeroes } from "./search.ts";
 
 /** What the header says we are picking for. */
@@ -123,19 +125,19 @@ export function Picker({
 
 	return (
 		<dialog
-			class="picker"
+			class={s.picker}
 			ref={dialog}
 			aria-labelledby="picker-title"
 			// `close` covers every way out — `Esc`, the ✕, the backdrop, a pick.
 			onClose={onClose}
 		>
-			<div class="picker-head">
-				<h2 class="picker-title" id="picker-title">
+			<div class={s.pickerHead}>
+				<h2 class={s.pickerTitle} id="picker-title">
 					Pick for: {targetLabel(target)}
 				</h2>
 				<button
 					type="button"
-					class="picker-close"
+					class={s.pickerClose}
 					aria-label="Close the picker"
 					onClick={() => dialog.current?.close()}
 				>
@@ -143,7 +145,7 @@ export function Picker({
 				</button>
 			</div>
 
-			<label class="picker-search">
+			<label class={s.pickerSearch}>
 				<span class="visually-hidden">Search heroes</span>
 				<input
 					ref={search}
@@ -166,18 +168,21 @@ export function Picker({
 			</label>
 
 			{matches.length === 0 ? (
-				<p class="picker-empty" role="status">
+				<p class={s.pickerEmpty} role="status">
 					No hero matches “{query.trim()}”
 				</p>
 			) : (
-				<div class="picker-grid" ref={grid}>
+				<div class={s.pickerGrid} ref={grid}>
 					{matches.map((hero) => {
 						const used = usedOf(hero.id);
 						return (
 							<button
 								type="button"
 								key={hero.id}
-								class={`picker-tile${hero.id === first?.id ? " picker-first" : ""}`}
+								class={cx(
+									s.pickerTile,
+									hero.id === first?.id ? s.pickerFirst : undefined,
+								)}
 								// Taken heroes stay focusable so the arrow keys keep the grid's
 								// geometry; `aria-disabled` is what tells everyone they are out.
 								aria-disabled={used !== null}
@@ -185,15 +190,15 @@ export function Picker({
 								onClick={() => choose(hero)}
 							>
 								<HeroTile hero={hero} size="lg" />
-								<span class="picker-name">{hero.name}</span>
-								{used !== null && <span class="picker-used">{used}</span>}
+								<span class={s.pickerName}>{hero.name}</span>
+								{used !== null && <span class={s.pickerUsed}>{used}</span>}
 							</button>
 						);
 					})}
 				</div>
 			)}
 
-			<p class="picker-hints">
+			<p class={s.pickerHints}>
 				<span>type to filter</span>
 				<span>Enter — pick first</span>
 				<span>← ↑ ↓ → — move</span>
diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index d55de65..d69bcfb 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -587,229 +587,6 @@
 	color: var(--text-3);
 }
 
-/* hero tile */
-
-.tile {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	border-radius: var(--r-tile);
-	box-shadow: var(--tile-inset);
-	font-family: var(--font-mono);
-	font-weight: 700;
-}
-
-.tile-lg {
-	width: var(--tile-lg);
-	height: var(--tile-lg);
-	font-size: var(--fs-tile-lg);
-}
-
-.tile-md {
-	width: var(--tile-md);
-	height: var(--tile-md);
-	border-radius: var(--r-control);
-	font-size: var(--fs-tile-md);
-}
-
-.tile-sm {
-	width: var(--tile-sm);
-	height: var(--tile-sm);
-	border-radius: var(--r-tile-sm);
-	font-size: var(--fs-tile-sm);
-}
-
-.tile-ink-dark {
-	color: var(--tile-ink-dark);
-}
-
-.tile-ink-light {
-	color: var(--tile-ink-light);
-}
-
-/* re-pick marker: the hero left the snapshot (screens-spec §6.4) */
-
-.repick-badge {
-	padding: 2px var(--sp-2);
-	border: 1px solid var(--accent-border);
-	border-radius: var(--r-kbd);
-	background: var(--accent-banner-bg);
-	color: var(--accent);
-	font-family: var(--font-mono);
-	font-size: var(--fs-kbd);
-}
-
-/* picker and dialogs */
-
-dialog {
-	border: 1px solid var(--border-2);
-	border-radius: var(--r-panel);
-	background: var(--bg-1);
-	color: var(--text-1);
-	box-shadow: var(--shadow-modal);
-}
-
-dialog::backdrop {
-	background: var(--backdrop);
-}
-
-.picker {
-	width: min(640px, 100% - var(--sp-8));
-	padding: 0;
-	overflow: hidden;
-}
-
-.picker-head {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--sp-5) var(--sp-6) var(--sp-4);
-}
-
-.picker-title {
-	font-size: var(--fs-body);
-	font-weight: 600;
-}
-
-.picker-close {
-	width: var(--tile-sm);
-	height: var(--tile-sm);
-	border: 1px solid var(--border-3);
-	border-radius: var(--r-tile-sm);
-	background: transparent;
-	color: var(--text-4);
-	font-size: var(--fs-meta);
-}
-
-.picker-search {
-	display: block;
-	padding: 0 var(--sp-6) var(--sp-4);
-}
-
-.picker-search input {
-	width: 100%;
-	padding: var(--sp-3) var(--sp-4);
-	border: 1px solid var(--border-3);
-	border-radius: var(--r-control);
-	background: var(--bg-0);
-	color: var(--text-1);
-	font-family: var(--font-ui);
-	font-size: var(--fs-body);
-}
-
-.picker-empty {
-	padding: 0 var(--sp-6) var(--sp-5);
-	color: var(--text-4);
-	font-size: var(--fs-control);
-}
-
-.picker-grid {
-	display: grid;
-	grid-template-columns: repeat(8, 1fr);
-	gap: var(--sp-3) var(--sp-2);
-	max-height: 50vh;
-	padding: var(--sp-1) var(--sp-6) var(--sp-5);
-	overflow-y: auto;
-}
-
-.picker-tile {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 5px;
-	padding: var(--sp-2) 2px;
-	border: 0;
-	border-radius: var(--r-tile);
-	background: transparent;
-	color: var(--text-4);
-	font-family: var(--font-ui);
-	font-size: var(--fs-kbd);
-	text-align: center;
-}
-
-.picker-first {
-	background: var(--bg-3);
-}
-
-.picker-first .tile {
-	box-shadow:
-		var(--tile-inset),
-		0 0 0 2px var(--accent);
-}
-
-.picker-tile[aria-disabled="true"] {
-	cursor: not-allowed;
-}
-
-/* The design fades the whole cell; fading the words with it would leave the
-   one thing a taken tile has to say — where the hero already sits — below any
-   readable contrast. Only the artwork dims. */
-.picker-tile[aria-disabled="true"] .tile {
-	opacity: 0.35;
-}
-
-.picker-tile[aria-disabled="true"] .picker-name {
-	color: var(--text-5);
-}
-
-.picker-used {
-	color: var(--accent);
-}
-
-.picker-hints {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--sp-5);
-	padding: var(--sp-3) var(--sp-6);
-	border-top: 1px solid var(--border-0);
-	color: var(--text-5);
-	font-family: var(--font-mono);
-	font-size: var(--fs-kbd);
-}
-
-.confirm {
-	width: min(320px, 100% - var(--sp-8));
-	padding: var(--sp-7);
-}
-
-.confirm h2 {
-	margin-bottom: var(--sp-2);
-	font-size: var(--fs-body);
-	font-weight: 600;
-}
-
-.confirm p {
-	margin-bottom: var(--sp-6);
-	color: var(--text-4);
-	font-size: var(--fs-meta);
-}
-
-.confirm-actions {
-	display: flex;
-	gap: var(--sp-3);
-	justify-content: flex-end;
-}
-
-.confirm-actions button {
-	padding: var(--sp-2) var(--sp-5);
-	border: 1px solid var(--border-3);
-	border-radius: var(--r-control);
-	background: var(--bg-2);
-	color: var(--text-2);
-	font-family: var(--font-ui);
-	font-size: var(--fs-control);
-	font-weight: 600;
-}
-
-/* The design tints this button with its own colour rather than a new one, so
-   the tint is mixed from the token instead of restating the palette here. */
-.confirm-actions .danger {
-	border-color: color-mix(in srgb, var(--dire) 45%, transparent);
-	background: color-mix(in srgb, var(--dire) 8%, transparent);
-	color: var(--dire);
-}
-
 /* undo toast — the transient half of the undo window (screens-spec §4) */
 
 .toast {
@@ -910,34 +687,4 @@ dialog::backdrop {
 		color: var(--text-4);
 		font-size: var(--fs-kbd);
 	}
-
-	/* Full-screen picker: the search field has to be reachable with a thumb
-	   and the grid still has to show whole rows (screens-spec §3). */
-	.picker {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		max-width: none;
-		height: 100%;
-		max-height: none;
-		margin: 0;
-		border: 0;
-		border-radius: 0;
-	}
-
-	/* The grid is the only part that may shrink, so the hint bar stays on
-	   screen and the heroes scroll inside instead of being clipped away. */
-	.picker-grid {
-		grid-template-columns: repeat(4, 1fr);
-		min-height: 0;
-		max-height: none;
-	}
-
-	.picker-hints {
-		margin-top: auto;
-	}
-
-	.picker-hints {
-		gap: var(--sp-4);
-	}
 }
diff --git a/src/app/styles/base.css b/src/app/styles/base.css
index d2aa38a..bf5e65f 100644
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -18,3 +18,17 @@ body {
 	outline: 2px solid var(--accent);
 	outline-offset: 2px;
 }
+
+/* The picker and the reset dialog are both bare <dialog>s, so the panel they
+   share has no class to scope and stays here rather than in either module. */
+dialog {
+	border: 1px solid var(--border-2);
+	border-radius: var(--r-panel);
+	background: var(--bg-1);
+	color: var(--text-1);
+	box-shadow: var(--shadow-modal);
+}
+
+dialog::backdrop {
+	background: var(--backdrop);
+}

From f0d26b7ca9b6219d3616ff2865d706c3309fec4d Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:16:19 +0100
Subject: [PATCH 06/17] Record what step 1 decided that its plan did not

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 openspec/changes/file-size-cap/design.md   | 36 ++++++++++++++++++++++
 openspec/changes/file-size-cap/proposal.md | 17 ++++++++--
 openspec/changes/file-size-cap/tasks.md    | 28 ++++++++++++-----
 3 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/openspec/changes/file-size-cap/design.md b/openspec/changes/file-size-cap/design.md
index 2f8d273..abec36b 100644
--- a/openspec/changes/file-size-cap/design.md
+++ b/openspec/changes/file-size-cap/design.md
@@ -85,6 +85,42 @@ Bun's bundler detects `.module.css` with no configuration and rewrites locally
 scoped class names to unique identifiers — checked in Bun's bundler
 documentation, not recalled.
 
+### Development serves the built bundle
+
+The documentation describes `bun build`. Bun's *other* implementation — the
+HTML entry point served by `Bun.serve` — emits the scoped stylesheet correctly
+and never defines the class-name mapping the components import, so every
+component reading one throws and the page renders nothing (oven-sh/bun#18258,
+open since March 2025; fix PR #33405 unmerged as of Bun 1.3.14). Only the dev
+path is affected.
+
+So `bun run dev` is `scripts/dev.ts`: it bundles into `dist/`, rebuilds on a
+change under `src/`, and starts `server.ts` over the result. `server.ts` no
+longer routes the HTML entry point; it serves `dist/` in development and in
+production alike. It ships ahead of step 1 rather than inside it: it changes
+how the application is served, which is its own reviewable unit.
+
+That costs hot module replacement and buys a development page that is the
+bundle production ships — so a defect the bundler introduces is under the e2e
+suite rather than only under `build.test.ts`. The asset lookup is
+`dist-routes.ts` rather than inline in `server.ts`, for the reason
+`static-routes.ts` is its own file: its listing guard, which is what keeps a
+request from naming a path outside `dist/`, can then be exercised without
+starting a server.
+
+### A picker rule that reaches into the hero tile becomes a custom property
+
+Two rules crossed what became a module boundary: the picker rings the tile
+`Enter` would take and fades the tile of a hero already drafted. A scoped class
+name cannot be written from another module's stylesheet, so the tile reads
+`box-shadow: var(--tile-ring, …)` and `opacity: var(--tile-fade, 1)`, and the
+picker sets those two on its own classes.
+
+Custom properties inherit, so nothing crosses the boundary and specificity
+never enters it. The alternative — a `class` prop on `HeroTile` carrying one of
+the picker's classes — puts two single-class selectors on the same declaration
+and lets emission order decide, which the source does not state.
+
 Fonts are the exception and do not move at all. `index.html` owns
 `@import url("/fonts/fonts.css")` in an inline `<style>`, so the faces are
 requested from the document rather than from the bundle; `build.test.ts`
diff --git a/openspec/changes/file-size-cap/proposal.md b/openspec/changes/file-size-cap/proposal.md
index 436ac10..74e3c69 100644
--- a/openspec/changes/file-size-cap/proposal.md
+++ b/openspec/changes/file-size-cap/proposal.md
@@ -89,12 +89,23 @@ implementing it has to stop enumerating a directory.
 ## Impact
 
 - New: a cap check and its test; one `*.module.css` beside each component; new
-  modules for the eight splits.
+  modules for the eight splits; `src/css.d.ts` so TypeScript resolves a
+  stylesheet import at all, and `src/app/cx.ts` to join the names a module
+  hands back.
+- New, and not foreseen when this was written, each shipping as its own pull
+  request beside step 1: `scripts/dev.ts` and `dist-routes.ts`, because Bun's
+  HTML dev server never defines a CSS module's class-name mapping
+  (oven-sh/bun#18258) and development therefore builds and serves `dist/` — see
+  `design.md`; and `src/app/module-classes.test.ts`, which checks that a
+  component reads only names its module defines.
 - Deleted: `src/app/styles/app.css`.
 - Modified: `index.html`, every `.tsx` that carries a `class`, `styles.css`,
+  `base.css` (the bare `dialog` panel has no class to scope),
   `src/app/styles/styles.test.ts`, `build.test.ts` (it globs `*.css` in `dist`
-  and asserts on the single emitted stylesheet), `README.md`'s ownership map,
-  and `openspec/specs/change-slicing/`.
+  and asserts on the single emitted stylesheet), `server.ts`, `package.json`,
+  `playwright.config.ts`, `README.md`'s ownership map and its "Running it"
+  section, `PLAN.md`'s bundler constraint, and
+  `openspec/specs/change-slicing/`.
 - The e2e suite is the safety net for the CSS migration, and it is a usable
   one: `docs/testing.md` forbids CSS and class selectors in e2e, and a grep of
   `e2e/smoke.spec.ts` finds none, so scoped class names cannot break a locator.
diff --git a/openspec/changes/file-size-cap/tasks.md b/openspec/changes/file-size-cap/tasks.md
index d58946c..4782982 100644
--- a/openspec/changes/file-size-cap/tasks.md
+++ b/openspec/changes/file-size-cap/tasks.md
@@ -15,6 +15,14 @@ Moving a rule counts twice in the diff budget — once removed, once added — s
 the 943 lines of `app.css` are ~1900 budgeted lines on their own. That, not
 caution, is why the migration takes three steps.
 
+Step 1 turned out to need one thing this list did not foresee, and it shipped
+ahead of the step rather than inside it: Bun's HTML dev server cannot emit a
+CSS module's class-name mapping, so development now builds and serves `dist/`.
+It is its own pull request because it changes how the application is served and
+stands on its own — `design.md` records the decision. The scan that checks a
+component reads only names its module defines follows the step for the same
+reason, in a third.
+
 `/zombies` in diff mode runs before each pull request, per the pre-PR sequence.
 Only step 8 introduces logic for it to find; the test tasks in steps 1–7 are
 the existing suites, which must stay green unchanged except where a file is
@@ -23,28 +31,32 @@ this proposal.
 
 ## 1. Styles arrive through the bundle, and the first components own theirs
 
-- [ ] 1.1 Import `src/app/styles/styles.css` from `src/app/main.tsx` and drop
+- [x] 1.1 Import `src/app/styles/styles.css` from `src/app/main.tsx` and drop
       the `<link rel="stylesheet">` from `index.html`, leaving the `@import`
       chain and every rule exactly as they are — this changes the delivery path
       and nothing else, and it is the commit to bisect to if styles vanish
-- [ ] 1.2 Update `build.test.ts`, which globs `*.css` in `dist` and asserts on
+- [x] 1.2 Update `build.test.ts`, which globs `*.css` in `dist` and asserts on
       the single emitted stylesheet; confirm the `@import url("/fonts/fonts.css")`
       assertion still holds, since fonts stay a served file
-- [ ] 1.3 Move the `hero tile` and `re-pick marker` blocks out of `app.css`
+- [x] 1.3 Move the `hero tile` and `re-pick marker` blocks out of `app.css`
       into `src/app/board/hero-tile.module.css`, imported by `hero-tile.tsx`;
       each explanatory comment moves with the rules it describes
-- [ ] 1.4 Move the `picker and dialogs` block into
-      `src/app/picker/picker.module.css`
-- [ ] 1.5 Rewrite every `class` on the migrated markup to read from the
+- [x] 1.4 Move the `picker and dialogs` block into
+      `src/app/picker/picker.module.css` — except the confirm dialog, which is
+      `app.tsx`'s and goes to `src/app/app.module.css` (step 3's file, brought
+      forward) rather than making the shell import the picker's stylesheet, and
+      the bare `dialog` panel both share, which has no class to scope and goes
+      to `base.css`
+- [x] 1.5 Rewrite every `class` on the migrated markup to read from the
       imported mapping — `class={s.heroTile}`, not `class="hero-tile"` — in
       `hero-tile.tsx`, `picker.tsx` and wherever else those classes are
       written, `board.tsx`'s re-pick badge included. The bundler rewrites the
       names in the stylesheet, so a literal left behind matches nothing and the
       rule silently stops applying. Every step that moves a block owes this,
       not only this one
-- [ ] 1.6 Confirm no rule was left behind and none duplicated: `app.css` shrinks
+- [x] 1.6 Confirm no rule was left behind and none duplicated: `app.css` shrinks
       by exactly the lines the two modules gained, comments included
-- [ ] 1.7 Run the e2e suite and confirm the rendered page is unchanged — a
+- [x] 1.7 Run the e2e suite and confirm the rendered page is unchanged — a
       mistake here is a blank stylesheet, which is loud
 
 ## 2. The board owns its styles

From 3be72bd86cc7c75cf4cc21c6057d70de406caa9b Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:18:41 +0100
Subject: [PATCH 07/17] Mark step 1 applied in the queue

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 PLAN.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/PLAN.md b/PLAN.md
index 37f297b..5e6036d 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -96,7 +96,7 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
   its entries means anything about.
 
 ### Open
-- [ ] **`file-size-cap`** — proposed, eight steps, not yet applied. The
+- [ ] **`file-size-cap`** — proposed, eight steps, the first applied. The
       file-size cap half of "reverse two non-goals": 300 lines for `.ts`/`.tsx`,
       200 for `.css`, adopted with no exemption list because the same change
       decomposes all nine files currently over the line. `app.css` (943 lines)
@@ -104,7 +104,10 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
       JavaScript bundle. Not an `/opsx:update` on `reviewable-diff-gates` as
       this entry used to ask: that change is archived, and the growth protocol
       above forbids editing an archive to receive a fact discovered later, so
-      the cap lands in the living `change-slicing` spec.
+      the cap lands in the living `change-slicing` spec. Step 1 cost a change
+      to how the application is served, which shipped beside it: Bun's HTML dev
+      server cannot emit a CSS module's class-name mapping, so development
+      builds and serves `dist/` — the constraint below carries it.
 - [ ] **The comment scan goes quiet on a regex literal.** A backtick inside one
       — `` /[`]/ `` — opens what `scripts/mutation-floor.ts:183-199` takes for a
       template literal and runs to end of input, so every comment below it is

From 36ff3828721b3d34925eae658610c41bccbce88b Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:53:14 +0100
Subject: [PATCH 08/17] Declare the CSS module pattern before the plain one

`declare module "*.css"` gave a plain stylesheet a class mapping it does
not export. The order is what makes both resolve: with it reversed, every
read off a module fails to compile.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/css.d.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/css.d.ts b/src/css.d.ts
index 50be7c3..7f5e829 100644
--- a/src/css.d.ts
+++ b/src/css.d.ts
@@ -1,7 +1,16 @@
 // Bun's bundler loads stylesheets; TypeScript has to be told they resolve.
-// A `.module.css` default export is the bundler's class-name mapping, whose
-// keys exist only after it runs — so the type is the shape, not the names.
-declare module "*.css" {
+//
+// The order is load-bearing. Both patterns match `x.module.css`, and the one
+// declared first wins, so `*.css` above would give a module's class mapping the
+// type of a plain stylesheet and every read off it would fail to compile.
+declare module "*.module.css" {
+	// The bundler builds the mapping, so its keys exist only after it runs —
+	// the type is the shape, not the names.
 	const classes: Record<string, string>;
 	export default classes;
 }
+
+// A plain stylesheet is imported for its side effect and exports nothing.
+declare module "*.css" {
+	export {};
+}

From c9c9804188b30dc33961590c5395da75bede7faf Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:16:38 +0100
Subject: [PATCH 09/17] Check every class name a component reads is one its
 module defines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The migration's silent failure: the bundler owns the names, so a read
that matches nothing is undefined rather than an error. The rule stops
applying, the component still renders, and neither the type checker nor
the e2e locators — role and text, never class — say a word.

The scan carries string, comment and regex-literal state left to right,
and covers every tracked file but prose rather than the two extensions it
would otherwise have named.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/module-classes.test.ts | 192 +++++++++++++++++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 src/app/module-classes.test.ts

diff --git a/src/app/module-classes.test.ts b/src/app/module-classes.test.ts
new file mode 100644
index 0000000..6342a67
--- /dev/null
+++ b/src/app/module-classes.test.ts
@@ -0,0 +1,192 @@
+import { describe, expect, test } from "bun:test";
+import { lstatSync, readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+
+/**
+ * Every class a component reads off a CSS module is one that module defines.
+ *
+ * This is the migration's one silent failure: the bundler owns the names, so a
+ * read that matches nothing is `undefined` rather than an error. The rule stops
+ * applying, the component still renders, and neither the type checker nor the
+ * e2e suite — which locates by role and text, never by class — says a word.
+ */
+
+// The listing is taken at the repository root, never at `cwd`, the shape
+// `scripts/no-suppressions.ts` uses: `git ls-files` run in a subdirectory
+// reports only what is under it and names it relative to it.
+const top = Bun.spawnSync(["git", "rev-parse", "--show-toplevel"]);
+if (top.exitCode !== 0) throw new Error(top.stderr.toString());
+const root = top.stdout.toString().trim();
+
+const ls = Bun.spawnSync(["git", "ls-files", "-z"], { cwd: root });
+if (ls.exitCode !== 0) throw new Error(ls.stderr.toString());
+
+/**
+ * Exempt because it is prose, and prose is the only thing here that writes an
+ * import of a stylesheet without performing one — the four artefacts of this
+ * change all do. Naming the source extensions instead is a list that grows
+ * silently: `.ts` and `.tsx` would leave `.jsx` and `.mjs` unscanned, and the
+ * first such file to arrive would be exempt with nobody deciding that.
+ */
+const PROSE = [".md"];
+
+const tracked = ls.stdout
+	.toString()
+	.split("\0")
+	.filter(Boolean)
+	.filter((path) => !PROSE.some((ext) => path.endsWith(ext)))
+	// Tracked but absent from the work tree, or a gitlink that reads as a
+	// directory — neither is a file to open.
+	.filter((path) =>
+		lstatSync(join(root, path), { throwIfNoEntry: false })?.isFile(),
+	);
+
+const read = (path: string) => readFileSync(join(root, path), "utf8");
+
+/**
+ * `source` with its comments and regex literals — and, when `strings` is set,
+ * its string literals — replaced by spaces, so what is left at a given offset
+ * is code and nothing else. Lengths and newlines are preserved, so the result
+ * can be matched in place of the original.
+ *
+ * A left-to-right scan carrying state, because deciding what a character means
+ * without knowing what it sits inside is one mistake, and the shapes it takes
+ * — an escaped quote ending a string early, a `/*` inside a line comment, a
+ * quote inside a regex literal swallowing the rest of the file — are one bug.
+ * Not a parser: the only question asked of each character is what encloses it.
+ */
+function blank(source: string, strings: boolean): string {
+	const out = [...source];
+	const erase = (from: number, to: number) => {
+		for (let k = from; k < to && k < out.length; k++) {
+			if (out[k] !== "\n") out[k] = " ";
+		}
+	};
+
+	// A `/` opens a regex literal only where a value may begin; after one it is
+	// division. The last non-space character is what tells them apart.
+	const OPENS_VALUE = "(,=:[!&|?{};+-*%~^<>";
+	let previous = "";
+	let i = 0;
+
+	while (i < source.length) {
+		const c = source[i] as string;
+		const next = source[i + 1];
+
+		if (c === "'" || c === '"' || c === "`") {
+			const start = i;
+			i++;
+			while (i < source.length && source[i] !== c) {
+				if (source[i] === "\\") {
+					i += 2;
+					continue;
+				}
+				// A raw newline cannot sit inside a '' or "" literal, so a quote
+				// that opened no string stops here instead of swallowing the rest
+				// of the file and taking the scan silent with it.
+				if (source[i] === "\n" && c !== "`") break;
+				i++;
+			}
+			if (source[i] === c) i++;
+			if (strings) erase(start, i);
+			previous = c;
+		} else if (c === "/" && next === "/") {
+			const start = i;
+			while (i < source.length && source[i] !== "\n") i++;
+			erase(start, i);
+		} else if (c === "/" && next === "*") {
+			const start = i;
+			i += 2;
+			while (i < source.length && !(source[i] === "*" && source[i + 1] === "/"))
+				i++;
+			i += 2;
+			erase(start, i);
+		} else if (
+			c === "/" &&
+			(previous === "" || OPENS_VALUE.includes(previous))
+		) {
+			const start = i;
+			i++;
+			let inClass = false;
+			while (i < source.length) {
+				if (source[i] === "\\") {
+					i += 2;
+					continue;
+				}
+				if (source[i] === "[") inClass = true;
+				else if (source[i] === "]") inClass = false;
+				// An unterminated literal is a syntax error, not something to scan
+				// past: stop at the newline rather than run to end of input.
+				else if (source[i] === "\n") break;
+				else if (source[i] === "/" && !inClass) break;
+				i++;
+			}
+			if (source[i] === "/") i++;
+			erase(start, i);
+			previous = "/";
+		} else {
+			if (c.trim() !== "") previous = c;
+			i++;
+		}
+	}
+
+	return out.join("");
+}
+
+/** The class selectors a module defines. */
+const defined = (css: string) =>
+	new Set(
+		[...blank(css, false).matchAll(/\.([A-Za-z][\w-]*)/g)].map(
+			(match) => match[1] as string,
+		),
+	);
+
+/** Every `<binding>.<name>` a source file reads off an imported CSS module, as
+ * `[module path relative to the repository root, name]`. */
+function reads(path: string, source: string): [string, string][] {
+	const found: [string, string][] = [];
+	// The import's specifier is itself a string, so it is read from the source
+	// that still has them; the reads are read from the source that does not.
+	const spelled = blank(source, false);
+	const code = blank(source, true);
+
+	for (const [, binding, specifier] of spelled.matchAll(
+		/import\s+(\w+)\s+from\s+["']([^"']+\.module\.css)["']/g,
+	)) {
+		const module = resolve(
+			dirname(join(root, path)),
+			specifier as string,
+		).slice(root.length + 1);
+		for (const [, name] of code.matchAll(
+			new RegExp(`(?<![\\w.])${binding}\\.(\\w+)`, "g"),
+		)) {
+			found.push([module, name as string]);
+		}
+	}
+
+	return found;
+}
+
+const classes = new Map(
+	tracked
+		.filter((path) => path.endsWith(".module.css"))
+		.map((module) => [module, defined(read(module))] as const),
+);
+
+const readers = tracked
+	.map((path) => [path, reads(path, read(path))] as const)
+	.filter(([, names]) => names.length > 0);
+
+describe("class names read off a CSS module", () => {
+	// A sweep that found nothing would pass every assertion below vacuously.
+	test("there are modules, and files reading them", () => {
+		expect(classes.size).toBeGreaterThan(0);
+		expect(readers.length).toBeGreaterThan(0);
+	});
+
+	test.each(readers)("%s reads only names its module defines", (_, names) => {
+		for (const [module, name] of names) {
+			expect(classes.get(module) ?? new Set()).toContain(name);
+		}
+	});
+});

From a1805cec703a4ee11154ec1a1f9dc2c8556e451d Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:19:43 +0100
Subject: [PATCH 10/17] Point the queued scanner fix at the implementation this
 branch adds

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 PLAN.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/PLAN.md b/PLAN.md
index 5e6036d..f1c6646 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -116,7 +116,10 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
       nothing is passing wrongly yet. Either teach the scanner that `/` in
       expression position starts one, or assert that the file contains none —
       the second is a line and fails loudly, the first ends the family of bugs
-      that produced five holes in one session.
+      that produced five holes in one session. The first now has a worked
+      implementation to copy: `src/app/module-classes.test.ts` treats a `/`
+      whose last non-space predecessor opens a value as a regex literal, and
+      stops it at a newline rather than at end of input.
 - [ ] **The rule of two** — the other half, still outstanding and **not yet
       written anywhere**. Lift a helper on the second consumer, never the
       first. `reviewable-diff-gates` prescribed its vehicle when it deferred it

From 9196548b4cf3354eb680818d825d07964eae8749 Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 15:49:14 +0100
Subject: [PATCH 11/17] Close the scanner's two holes: template expressions and
 regex position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The scan erased a whole template literal, so a read inside ${...} was
never checked — the direction that passes wrongly — and it judged a regex
literal by the preceding character alone, so one after `return` was read
as code. It now blanks template text but not its expressions, and tracks
the last token rather than the last character. Both cases have
regressions.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/module-classes.test.ts | 121 +++++++++++++++++++++++++++++++--
 1 file changed, 115 insertions(+), 6 deletions(-)

diff --git a/src/app/module-classes.test.ts b/src/app/module-classes.test.ts
index 6342a67..3d17705 100644
--- a/src/app/module-classes.test.ts
+++ b/src/app/module-classes.test.ts
@@ -43,6 +43,29 @@ const tracked = ls.stdout
 
 const read = (path: string) => readFileSync(join(root, path), "utf8");
 
+/**
+ * A `/` opens a regex literal only where a value may begin; after one it is
+ * division. The token before it is what tells them apart — a character for
+ * punctuation, a word for the keywords a value may follow.
+ */
+const OPENS_VALUE = "(,=:[!&|?{};+-*%~^<>";
+const OPENS_VALUE_WORDS = new Set([
+	"return",
+	"typeof",
+	"instanceof",
+	"in",
+	"of",
+	"case",
+	"do",
+	"else",
+	"yield",
+	"await",
+	"new",
+	"delete",
+	"void",
+	"throw",
+]);
+
 /**
  * `source` with its comments and regex literals — and, when `strings` is set,
  * its string literals — replaced by spaces, so what is left at a given offset
@@ -53,6 +76,9 @@ const read = (path: string) => readFileSync(join(root, path), "utf8");
  * without knowing what it sits inside is one mistake, and the shapes it takes
  * — an escaped quote ending a string early, a `/*` inside a line comment, a
  * quote inside a regex literal swallowing the rest of the file — are one bug.
+ * A template literal is two things at once, so its text is blanked and its
+ * `${…}` is not: the expression is code, and a read inside one is a read.
+ *
  * Not a parser: the only question asked of each character is what encloses it.
  */
 function blank(source: string, strings: boolean): string {
@@ -63,17 +89,46 @@ function blank(source: string, strings: boolean): string {
 		}
 	};
 
-	// A `/` opens a regex literal only where a value may begin; after one it is
-	// division. The last non-space character is what tells them apart.
-	const OPENS_VALUE = "(,=:[!&|?{};+-*%~^<>";
+	// One entry per template literal currently open, holding the `{` nesting
+	// inside its interpolation, or `null` while its text rather than an
+	// expression is being read. An empty stack is ordinary code.
+	const templates: (number | null)[] = [];
+	let span = 0; // where the template text being blanked started
 	let previous = "";
 	let i = 0;
 
+	const word = (at: number) => {
+		let end = at;
+		while (end < source.length && /[A-Za-z_$]/.test(source[end] as string))
+			end++;
+		return source.slice(at, end);
+	};
+
 	while (i < source.length) {
 		const c = source[i] as string;
 		const next = source[i + 1];
+		const inText = templates.length > 0 && templates.at(-1) === null;
 
-		if (c === "'" || c === '"' || c === "`") {
+		if (inText) {
+			if (c === "\\") {
+				i += 2;
+			} else if (c === "`") {
+				if (strings) erase(span, i);
+				templates.pop();
+				i++;
+				previous = "`";
+			} else if (c === "$" && next === "{") {
+				if (strings) erase(span, i);
+				templates[templates.length - 1] = 0;
+				i += 2;
+				previous = "{";
+			} else {
+				i++;
+			}
+			continue;
+		}
+
+		if (c === "'" || c === '"') {
 			const start = i;
 			i++;
 			while (i < source.length && source[i] !== c) {
@@ -84,12 +139,30 @@ function blank(source: string, strings: boolean): string {
 				// A raw newline cannot sit inside a '' or "" literal, so a quote
 				// that opened no string stops here instead of swallowing the rest
 				// of the file and taking the scan silent with it.
-				if (source[i] === "\n" && c !== "`") break;
+				if (source[i] === "\n") break;
 				i++;
 			}
 			if (source[i] === c) i++;
 			if (strings) erase(start, i);
 			previous = c;
+		} else if (c === "`") {
+			templates.push(null);
+			span = i + 1;
+			i++;
+		} else if (c === "}" && templates.length > 0 && templates.at(-1) === 0) {
+			// The brace that closes the interpolation, so its template's text
+			// resumes here.
+			templates[templates.length - 1] = null;
+			span = i + 1;
+			i++;
+		} else if (c === "{" && templates.length > 0 && templates.at(-1) !== null) {
+			templates[templates.length - 1] = (templates.at(-1) as number) + 1;
+			previous = c;
+			i++;
+		} else if (c === "}" && templates.length > 0 && templates.at(-1) !== null) {
+			templates[templates.length - 1] = (templates.at(-1) as number) - 1;
+			previous = c;
+			i++;
 		} else if (c === "/" && next === "/") {
 			const start = i;
 			while (i < source.length && source[i] !== "\n") i++;
@@ -103,7 +176,9 @@ function blank(source: string, strings: boolean): string {
 			erase(start, i);
 		} else if (
 			c === "/" &&
-			(previous === "" || OPENS_VALUE.includes(previous))
+			(previous === "" ||
+				OPENS_VALUE.includes(previous) ||
+				OPENS_VALUE_WORDS.has(previous))
 		) {
 			const start = i;
 			i++;
@@ -124,6 +199,10 @@ function blank(source: string, strings: boolean): string {
 			if (source[i] === "/") i++;
 			erase(start, i);
 			previous = "/";
+		} else if (/[A-Za-z_$]/.test(c)) {
+			const found = word(i);
+			previous = found;
+			i += found.length;
 		} else {
 			if (c.trim() !== "") previous = c;
 			i++;
@@ -177,6 +256,36 @@ const readers = tracked
 	.map((path) => [path, reads(path, read(path))] as const)
 	.filter(([, names]) => names.length > 0);
 
+describe("what the scan counts as code", () => {
+	const kept = (source: string) => blank(source, true).includes("s.name");
+
+	// The fixtures are written as template literals so an interpolation can be
+	// escaped into them: a plain string spelling `${` reads as one nobody meant.
+	test.each([
+		["a plain read", "const a = s.name;"],
+		["a read inside a template expression", `const a = \`\${s.name}\`;`],
+		["a read inside a nested template", `const a = \`\${\`\${s.name}\`}\`;`],
+		["a read after an interpolation closes", `const a = \`\${1}\` + s.name;`],
+	])("keeps %s", (_, source) => expect(kept(source)).toBe(true));
+
+	test.each([
+		["a string", "const a = 's.name';"],
+		["a line comment", "// s.name"],
+		["a block comment", "/* s.name */"],
+		["template text", "const a = `text s.name`;"],
+		["a regex literal", "const a = /s.name/;"],
+		["a regex after return", "function f() { return /s.name/; }"],
+		["a regex after an arrow", "const f = () => /s.name/;"],
+		["a regex after typeof", "const a = typeof /s.name/;"],
+	])("drops %s", (_, source) => expect(kept(source)).toBe(false));
+
+	test("a division is not a regex, so what follows it is still code", () => {
+		expect(blank("const a = 1 / 2; const b = s.name;", true)).toContain(
+			"s.name",
+		);
+	});
+});
+
 describe("class names read off a CSS module", () => {
 	// A sweep that found nothing would pass every assertion below vacuously.
 	test("there are modules, and files reading them", () => {

From dfa8a82c41e811d4801bc811307782e55d1e8c45 Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 16:12:51 +0100
Subject: [PATCH 12/17] Prove the import, the CSS value and the bracket read
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three ways the scan could be wrong about what it read. A quoted `.name`
in a CSS value defined a class nobody can select, so a read of it passed.
An import spelled inside a string registered a module, so an unrelated
read of that binding failed against a module that does not exist. And a
bracket read went unmatched, which is the only way a hyphenated name can
be spelled — and `defined` accepts those.

Both an import's specifier and a bracket read's name are strings, so the
blanked source no longer carries them; blanking preserves offsets, so
each is taken back out of the source where the surrounding code was
proved to be code.

The fixtures assert `reads` rather than the private scan, per
docs/testing.md: a test that mirrors the implementation can pass while
the thing it stands for does not.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/module-classes.test.ts | 126 ++++++++++++++++++++++++---------
 1 file changed, 92 insertions(+), 34 deletions(-)

diff --git a/src/app/module-classes.test.ts b/src/app/module-classes.test.ts
index 3d17705..8e752e1 100644
--- a/src/app/module-classes.test.ts
+++ b/src/app/module-classes.test.ts
@@ -67,10 +67,14 @@ const OPENS_VALUE_WORDS = new Set([
 ]);
 
 /**
- * `source` with its comments and regex literals — and, when `strings` is set,
- * its string literals — replaced by spaces, so what is left at a given offset
- * is code and nothing else. Lengths and newlines are preserved, so the result
- * can be matched in place of the original.
+ * `source` with its comments — and, as asked, its string and regex literals —
+ * replaced by spaces, so what is left at a given offset is code and nothing
+ * else. Lengths and newlines are preserved, so a token found in the result can
+ * be read back out of the original at the same place.
+ *
+ * `regex` is off for CSS, which has no regex literals: a `/` there opens a
+ * path inside `url()`, and treating it as a literal would erase to the next
+ * one.
  *
  * A left-to-right scan carrying state, because deciding what a character means
  * without knowing what it sits inside is one mistake, and the shapes it takes
@@ -81,7 +85,10 @@ const OPENS_VALUE_WORDS = new Set([
  *
  * Not a parser: the only question asked of each character is what encloses it.
  */
-function blank(source: string, strings: boolean): string {
+function blank(
+	source: string,
+	{ strings, regex }: { strings: boolean; regex: boolean },
+): string {
 	const out = [...source];
 	const erase = (from: number, to: number) => {
 		for (let k = from; k < to && k < out.length; k++) {
@@ -176,6 +183,7 @@ function blank(source: string, strings: boolean): string {
 			erase(start, i);
 		} else if (
 			c === "/" &&
+			regex &&
 			(previous === "" ||
 				OPENS_VALUE.includes(previous) ||
 				OPENS_VALUE_WORDS.has(previous))
@@ -212,34 +220,59 @@ function blank(source: string, strings: boolean): string {
 	return out.join("");
 }
 
-/** The class selectors a module defines. */
+/** The class selectors a module defines. Strings go, because a quoted `.name`
+ * in a `content` or a `url()` names no class and would define one. */
 const defined = (css: string) =>
 	new Set(
-		[...blank(css, false).matchAll(/\.([A-Za-z][\w-]*)/g)].map(
-			(match) => match[1] as string,
-		),
+		[
+			...blank(css, { strings: true, regex: false }).matchAll(
+				/\.([A-Za-z][\w-]*)/g,
+			),
+		].map((match) => match[1] as string),
 	);
 
-/** Every `<binding>.<name>` a source file reads off an imported CSS module, as
- * `[module path relative to the repository root, name]`. */
+/**
+ * Every class a source file reads off an imported CSS module, as `[module path
+ * relative to the repository root, name]`.
+ *
+ * Both an import's specifier and a bracket read's name are strings, and the
+ * blanked source no longer carries either. Blanking preserves offsets, so each
+ * is taken back out of the source at the place the surrounding code was proved
+ * to be code — rather than matched in a source where a string spelling
+ * `import s from "./x.module.css"` would read as an import.
+ */
 function reads(path: string, source: string): [string, string][] {
 	const found: [string, string][] = [];
-	// The import's specifier is itself a string, so it is read from the source
-	// that still has them; the reads are read from the source that does not.
-	const spelled = blank(source, false);
-	const code = blank(source, true);
-
-	for (const [, binding, specifier] of spelled.matchAll(
-		/import\s+(\w+)\s+from\s+["']([^"']+\.module\.css)["']/g,
-	)) {
-		const module = resolve(
-			dirname(join(root, path)),
-			specifier as string,
-		).slice(root.length + 1);
-		for (const [, name] of code.matchAll(
-			new RegExp(`(?<![\\w.])${binding}\\.(\\w+)`, "g"),
+	const code = blank(source, { strings: true, regex: true });
+	const after = (match: RegExpExecArray | RegExpMatchArray) =>
+		source.slice((match.index as number) + match[0].length);
+
+	// `from` is not followed by `\s+` here: the specifier is blanked to spaces,
+	// so a greedy run would swallow it and `after` would point past the string.
+	for (const statement of code.matchAll(/\bimport\s+(\w+)\s+from\b/g)) {
+		const specifier = /^\s*(["'])([^"']+)\1/.exec(after(statement));
+		if (specifier === null) continue;
+		const target = specifier[2] as string;
+		if (!target.endsWith(".module.css")) continue;
+
+		const module = resolve(dirname(join(root, path)), target).slice(
+			root.length + 1,
+		);
+		// `binding` is `\w+` by construction, so it carries nothing to escape.
+		const binding = statement[1] as string;
+
+		for (const access of code.matchAll(
+			new RegExp(`(?<![\\w.])${binding}(?:\\.(\\w+)|\\[)`, "g"),
 		)) {
-			found.push([module, name as string]);
+			const dotted = access[1];
+			if (dotted !== undefined) {
+				found.push([module, dotted]);
+				continue;
+			}
+			// A bracket read is how a hyphenated class name is spelled, and
+			// `defined` accepts those, so leaving it unmatched leaves it unchecked.
+			const quoted = /^\s*(["'])([A-Za-z][\w-]*)\1\s*\]/.exec(after(access));
+			if (quoted !== null) found.push([module, quoted[2] as string]);
 		}
 	}
 
@@ -256,8 +289,28 @@ const readers = tracked
 	.map((path) => [path, reads(path, read(path))] as const)
 	.filter(([, names]) => names.length > 0);
 
-describe("what the scan counts as code", () => {
-	const kept = (source: string) => blank(source, true).includes("s.name");
+describe("the classes a module defines", () => {
+	test("a selector", () => {
+		expect(defined(".real { color: red; }")).toEqual(new Set(["real"]));
+	});
+
+	test("not one named inside a value, which selects nothing", () => {
+		expect(defined('.real { content: ".fake"; }')).toEqual(new Set(["real"]));
+	});
+});
+
+describe("the classes a file reads", () => {
+	// Placed beside a real module, so the resolved path is the real one.
+	const at = "src/app/board/probe.tsx";
+	const module = "src/app/board/hero-tile.module.css";
+	const imports = 'import s from "./hero-tile.module.css";\n';
+	const names = (body: string) => reads(at, imports + body).map(([, n]) => n);
+
+	test("resolves the module a read belongs to", () => {
+		expect(reads(at, `${imports}const a = s.name;`)).toEqual([
+			[module, "name"],
+		]);
+	});
 
 	// The fixtures are written as template literals so an interpolation can be
 	// escaped into them: a plain string spelling `${` reads as one nobody meant.
@@ -266,7 +319,13 @@ describe("what the scan counts as code", () => {
 		["a read inside a template expression", `const a = \`\${s.name}\`;`],
 		["a read inside a nested template", `const a = \`\${\`\${s.name}\`}\`;`],
 		["a read after an interpolation closes", `const a = \`\${1}\` + s.name;`],
-	])("keeps %s", (_, source) => expect(kept(source)).toBe(true));
+		["a bracket read", 'const a = s["name"];'],
+		["a division before a read", "const a = 1 / 2; const b = s.name;"],
+	])("finds %s", (_, body) => expect(names(body)).toEqual(["name"]));
+
+	test("finds a hyphenated name, which only a bracket read can spell", () => {
+		expect(names('const a = s["hero-name"];')).toEqual(["hero-name"]);
+	});
 
 	test.each([
 		["a string", "const a = 's.name';"],
@@ -277,12 +336,11 @@ describe("what the scan counts as code", () => {
 		["a regex after return", "function f() { return /s.name/; }"],
 		["a regex after an arrow", "const f = () => /s.name/;"],
 		["a regex after typeof", "const a = typeof /s.name/;"],
-	])("drops %s", (_, source) => expect(kept(source)).toBe(false));
+	])("ignores %s", (_, body) => expect(names(body)).toEqual([]));
 
-	test("a division is not a regex, so what follows it is still code", () => {
-		expect(blank("const a = 1 / 2; const b = s.name;", true)).toContain(
-			"s.name",
-		);
+	test("ignores an import spelled inside a string, which imports nothing", () => {
+		const source = `const a = "import s from './fake.module.css'";\nconst b = s.name;`;
+		expect(reads(at, source)).toEqual([]);
 	});
 });
 

From 47065f97d1b172cfa5da5fa5fefb743d141e4fe7 Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 16:42:16 +0100
Subject: [PATCH 13/17] Read CSS as CSS, and count an optional read
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS has no `//` comment and no regex literal, so parsing either blanked
real rules — `url(//cdn/x.png)` would have hidden every selector after it
on the line. The two configurations the scan needs are a language, not a
pair of booleans, and naming them states the exemptions in one place.

Fixing that exposed its sibling: `x.png` inside a `url()` read as a class.
A class selector lives in a rule's prelude and nowhere else, so that is
now the only place looked at — which also covers the quoted value.

An optional read is what `noUncheckedIndexedAccess` invites, and `s?.name`
matched nothing, so those names went unchecked.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/module-classes.test.ts | 118 +++++++++++++++++++++------------
 1 file changed, 75 insertions(+), 43 deletions(-)

diff --git a/src/app/module-classes.test.ts b/src/app/module-classes.test.ts
index 8e752e1..c4ba0d5 100644
--- a/src/app/module-classes.test.ts
+++ b/src/app/module-classes.test.ts
@@ -67,14 +67,23 @@ const OPENS_VALUE_WORDS = new Set([
 ]);
 
 /**
- * `source` with its comments — and, as asked, its string and regex literals —
- * replaced by spaces, so what is left at a given offset is code and nothing
- * else. Lengths and newlines are preserved, so a token found in the result can
- * be read back out of the original at the same place.
- *
- * `regex` is off for CSS, which has no regex literals: a `/` there opens a
- * path inside `url()`, and treating it as a literal would erase to the next
- * one.
+ * What each language encloses text in, and therefore what this scan erases.
+ * Stated here rather than left to a default, because the two mistakes worth
+ * making are both silent: CSS has no `//` comment, so reading one would blank
+ * a rule from `url(//cdn/x.png)` to the end of the line, and it has no regex
+ * literal, so a `/` inside a path would erase to the next one.
+ */
+const SYNTAX = {
+	css: { lineComments: false, regex: false, templates: false },
+	ts: { lineComments: true, regex: true, templates: true },
+} as const;
+
+/**
+ * `source` with its comments, strings and — where the language has them —
+ * template text and regex literals replaced by spaces, so what is left at a
+ * given offset is code and nothing else. Lengths and newlines are preserved,
+ * so a token found in the result can be read back out of the original at the
+ * same place.
  *
  * A left-to-right scan carrying state, because deciding what a character means
  * without knowing what it sits inside is one mistake, and the shapes it takes
@@ -85,10 +94,8 @@ const OPENS_VALUE_WORDS = new Set([
  *
  * Not a parser: the only question asked of each character is what encloses it.
  */
-function blank(
-	source: string,
-	{ strings, regex }: { strings: boolean; regex: boolean },
-): string {
+function blank(source: string, language: keyof typeof SYNTAX): string {
+	const { lineComments, regex, templates } = SYNTAX[language];
 	const out = [...source];
 	const erase = (from: number, to: number) => {
 		for (let k = from; k < to && k < out.length; k++) {
@@ -99,7 +106,7 @@ function blank(
 	// One entry per template literal currently open, holding the `{` nesting
 	// inside its interpolation, or `null` while its text rather than an
 	// expression is being read. An empty stack is ordinary code.
-	const templates: (number | null)[] = [];
+	const open: (number | null)[] = [];
 	let span = 0; // where the template text being blanked started
 	let previous = "";
 	let i = 0;
@@ -114,19 +121,19 @@ function blank(
 	while (i < source.length) {
 		const c = source[i] as string;
 		const next = source[i + 1];
-		const inText = templates.length > 0 && templates.at(-1) === null;
+		const inText = open.length > 0 && open.at(-1) === null;
 
 		if (inText) {
 			if (c === "\\") {
 				i += 2;
 			} else if (c === "`") {
-				if (strings) erase(span, i);
-				templates.pop();
+				erase(span, i);
+				open.pop();
 				i++;
 				previous = "`";
 			} else if (c === "$" && next === "{") {
-				if (strings) erase(span, i);
-				templates[templates.length - 1] = 0;
+				erase(span, i);
+				open[open.length - 1] = 0;
 				i += 2;
 				previous = "{";
 			} else {
@@ -150,27 +157,27 @@ function blank(
 				i++;
 			}
 			if (source[i] === c) i++;
-			if (strings) erase(start, i);
+			erase(start, i);
 			previous = c;
-		} else if (c === "`") {
-			templates.push(null);
+		} else if (c === "`" && templates) {
+			open.push(null);
 			span = i + 1;
 			i++;
-		} else if (c === "}" && templates.length > 0 && templates.at(-1) === 0) {
+		} else if (c === "}" && open.length > 0 && open.at(-1) === 0) {
 			// The brace that closes the interpolation, so its template's text
 			// resumes here.
-			templates[templates.length - 1] = null;
+			open[open.length - 1] = null;
 			span = i + 1;
 			i++;
-		} else if (c === "{" && templates.length > 0 && templates.at(-1) !== null) {
-			templates[templates.length - 1] = (templates.at(-1) as number) + 1;
+		} else if (c === "{" && open.length > 0 && open.at(-1) !== null) {
+			open[open.length - 1] = (open.at(-1) as number) + 1;
 			previous = c;
 			i++;
-		} else if (c === "}" && templates.length > 0 && templates.at(-1) !== null) {
-			templates[templates.length - 1] = (templates.at(-1) as number) - 1;
+		} else if (c === "}" && open.length > 0 && open.at(-1) !== null) {
+			open[open.length - 1] = (open.at(-1) as number) - 1;
 			previous = c;
 			i++;
-		} else if (c === "/" && next === "/") {
+		} else if (lineComments && c === "/" && next === "/") {
 			const start = i;
 			while (i < source.length && source[i] !== "\n") i++;
 			erase(start, i);
@@ -220,16 +227,25 @@ function blank(
 	return out.join("");
 }
 
-/** The class selectors a module defines. Strings go, because a quoted `.name`
- * in a `content` or a `url()` names no class and would define one. */
-const defined = (css: string) =>
-	new Set(
-		[
-			...blank(css, { strings: true, regex: false }).matchAll(
-				/\.([A-Za-z][\w-]*)/g,
-			),
-		].map((match) => match[1] as string),
-	);
+/**
+ * The class selectors a module defines.
+ *
+ * Only a rule's prelude is read — the text running up to the `{` that opens
+ * its block. That is the one place a class selector can be: inside a block a
+ * `.` opens a decimal or a file extension in `url(...)`, and a quoted `.name`
+ * in a `content` selects nothing either.
+ */
+const defined = (css: string) => {
+	const found = new Set<string>();
+
+	for (const rule of blank(css, "css").matchAll(/([^;{}]*)\{/g)) {
+		for (const name of (rule[1] as string).matchAll(/\.([A-Za-z][\w-]*)/g)) {
+			found.add(name[1] as string);
+		}
+	}
+
+	return found;
+};
 
 /**
  * Every class a source file reads off an imported CSS module, as `[module path
@@ -243,7 +259,7 @@ const defined = (css: string) =>
  */
 function reads(path: string, source: string): [string, string][] {
 	const found: [string, string][] = [];
-	const code = blank(source, { strings: true, regex: true });
+	const code = blank(source, "ts");
 	const after = (match: RegExpExecArray | RegExpMatchArray) =>
 		source.slice((match.index as number) + match[0].length);
 
@@ -262,7 +278,12 @@ function reads(path: string, source: string): [string, string][] {
 		const binding = statement[1] as string;
 
 		for (const access of code.matchAll(
-			new RegExp(`(?<![\\w.])${binding}(?:\\.(\\w+)|\\[)`, "g"),
+			new RegExp(
+				// Optional access is what `noUncheckedIndexedAccess` invites, so a
+				// read spelled `s?.name` is a read like any other.
+				`(?<![\\w.])${binding}(?:\\??\\.(\\w+)|(?:\\?\\.)?\\[)`,
+				"g",
+			),
 		)) {
 			const dotted = access[1];
 			if (dotted !== undefined) {
@@ -297,6 +318,12 @@ describe("the classes a module defines", () => {
 	test("not one named inside a value, which selects nothing", () => {
 		expect(defined('.real { content: ".fake"; }')).toEqual(new Set(["real"]));
 	});
+
+	// CSS has no `//` comment; reading one would blank the rest of the line.
+	test("one after an unquoted URL on the same line", () => {
+		const css = ".a { background: url(//cdn/x.png); } .b { color: red; }";
+		expect(defined(css)).toEqual(new Set(["a", "b"]));
+	});
 });
 
 describe("the classes a file reads", () => {
@@ -320,12 +347,17 @@ describe("the classes a file reads", () => {
 		["a read inside a nested template", `const a = \`\${\`\${s.name}\`}\`;`],
 		["a read after an interpolation closes", `const a = \`\${1}\` + s.name;`],
 		["a bracket read", 'const a = s["name"];'],
+		["an optional read", "const a = s?.name;"],
+		["an optional bracket read", 'const a = s?.["name"];'],
 		["a division before a read", "const a = 1 / 2; const b = s.name;"],
 	])("finds %s", (_, body) => expect(names(body)).toEqual(["name"]));
 
-	test("finds a hyphenated name, which only a bracket read can spell", () => {
-		expect(names('const a = s["hero-name"];')).toEqual(["hero-name"]);
-	});
+	test.each([
+		["a bracket read", 'const a = s["hero-name"];'],
+		["an optional bracket read", 'const a = s?.["hero-name"];'],
+	])("finds a hyphenated name, which only %s can spell", (_, body) =>
+		expect(names(body)).toEqual(["hero-name"]),
+	);
 
 	test.each([
 		["a string", "const a = 's.name';"],

From ad25482e6d6f240575afedbbad6de6a7efb8d395 Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 16:51:28 +0100
Subject: [PATCH 14/17] Lift the source scan into its own module
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`module-classes.test.ts` had grown to 391 lines against the 300 this
change is about to enforce, and the seam was already there: the scan is
general, the class check is one caller. `mutation-floor.ts` now has a
module to switch to instead of the copy PLAN.md records a hole in.

The syntax matrix moves with it — asserting `blank` is asserting that
module's own contract, not mirroring a private helper.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 PLAN.md                        |  13 ++-
 scripts/scan.test.ts           |  57 ++++++++++
 scripts/scan.ts                | 193 ++++++++++++++++++++++++++++++++
 src/app/module-classes.test.ts | 199 +--------------------------------
 4 files changed, 263 insertions(+), 199 deletions(-)
 create mode 100644 scripts/scan.test.ts
 create mode 100644 scripts/scan.ts

diff --git a/PLAN.md b/PLAN.md
index f1c6646..a44bc46 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -116,10 +116,11 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
       nothing is passing wrongly yet. Either teach the scanner that `/` in
       expression position starts one, or assert that the file contains none —
       the second is a line and fails loudly, the first ends the family of bugs
-      that produced five holes in one session. The first now has a worked
-      implementation to copy: `src/app/module-classes.test.ts` treats a `/`
-      whose last non-space predecessor opens a value as a regex literal, and
-      stops it at a newline rather than at end of input.
+      that produced five holes in one session. The first is now done and lives
+      in `scripts/scan.ts`: it treats a `/` whose last token opens a value as a
+      regex literal and stops it at a newline rather than at end of input, and
+      it tells the two languages apart, CSS having neither `//` nor a regex
+      literal. What is left here is switching `mutation-floor.ts` to it.
 - [ ] **The rule of two** — the other half, still outstanding and **not yet
       written anywhere**. Lift a helper on the second consumer, never the
       first. `reviewable-diff-gates` prescribed its vehicle when it deferred it
@@ -130,7 +131,9 @@ change decided lives in its archived proposal under `openspec/changes/archive/`.
       in both `scripts/spec-coverage.test.ts` and `scripts/mutation-floor.ts`,
       the second is strictly better, and the Code rule the first implements was
       replaced on 2026-08-13. What that costs the older copy is commented at the
-      line it costs it.
+      line it costs it. `scripts/scan.ts` is where that lift lands: extracted
+      to bring its file under the cap, and already the module the older copy
+      should switch to — which is what makes it a lift and not speculation.
 - [ ] **Task 7** — Docker + VPS deploy (open decisions: registry GHCR or Docker
       Hub, same VPS or a new one). Carries `ui-foundation` **(e2e)** 1.5, which
       Task 4 deferred here: serving `dist/` under a plain static server is
diff --git a/scripts/scan.test.ts b/scripts/scan.test.ts
new file mode 100644
index 0000000..ab57187
--- /dev/null
+++ b/scripts/scan.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, test } from "bun:test";
+import { blank } from "./scan.ts";
+
+/** `MARK` stands in for whatever a caller is looking for: it survives the scan
+ * when it sits in code, and goes when it sits in something the language quotes
+ * or comments out. */
+const kept = (source: string, language: "css" | "ts") =>
+	blank(source, language).includes("MARK");
+
+describe("scanning TypeScript", () => {
+	test.each([
+		["a string", "const a = 'MARK';"],
+		["a line comment", "// MARK"],
+		["a block comment", "/* MARK */"],
+		["template text", "const a = `text MARK`;"],
+		["a regex literal", "const a = /MARK/;"],
+		["a regex after return", "function f() { return /MARK/; }"],
+		["a regex after an arrow", "const f = () => /MARK/;"],
+		["a regex after typeof", "const a = typeof /MARK/;"],
+	])("erases %s", (_, source) => expect(kept(source, "ts")).toBe(false));
+
+	test.each([
+		["plain code", "const MARK = 1;"],
+		["a template expression", `const a = \`\${MARK}\`;`],
+		["a nested template expression", `const a = \`\${\`\${MARK}\`}\`;`],
+		["code after an interpolation closes", `const a = \`\${1}\` + MARK;`],
+		["code after a division, which is not a regex", "const a = 1 / 2; MARK;"],
+		// A quote that opened no string — one inside a regex literal, say — would
+		// otherwise swallow the rest of the file and take the scan silent with it.
+		["code after a quote left open on its line", "const a = 'x\nMARK;"],
+		["code after a comment that names a quote", "// it's fine\nMARK;"],
+	])("keeps %s", (_, source) => expect(kept(source, "ts")).toBe(true));
+
+	test("preserves offsets, so a match reads back out of the source", () => {
+		const source = 'const a = "hidden"; const b = 1;';
+
+		expect(blank(source, "ts")).toHaveLength(source.length);
+		expect(blank(source, "ts").indexOf("const b")).toBe(
+			source.indexOf("const b"),
+		);
+	});
+});
+
+describe("scanning CSS", () => {
+	test.each([
+		["a comment", "/* MARK */ .a {}"],
+		["a string", '.a { content: "MARK"; }'],
+	])("erases %s", (_, source) => expect(kept(source, "css")).toBe(false));
+
+	// CSS has neither, and reading one would erase a rule that is really there.
+	test.each([
+		["a line comment", ".a { background: url(//cdn/MARK.png); }"],
+		["a regex literal", ".a { margin: /MARK/; }"],
+	])("keeps what TypeScript would take for %s", (_, source) =>
+		expect(kept(source, "css")).toBe(true),
+	);
+});
diff --git a/scripts/scan.ts b/scripts/scan.ts
new file mode 100644
index 0000000..bacbf14
--- /dev/null
+++ b/scripts/scan.ts
@@ -0,0 +1,193 @@
+/**
+ * Blanks out everything in a source file that is not code, so a pattern found
+ * in the result is one the language actually evaluates.
+ *
+ * Its own module rather than a helper inside its caller, so `mutation-floor.ts`
+ * has something to switch to: it carries a scanner of the same shape, and
+ * `PLAN.md` records both the hole left in it and that this family of bugs
+ * produced five of them in one session.
+ */
+
+/**
+ * A `/` opens a regex literal only where a value may begin; after one it is
+ * division. The token before it is what tells them apart — a character for
+ * punctuation, a word for the keywords a value may follow.
+ */
+const OPENS_VALUE = "(,=:[!&|?{};+-*%~^<>";
+const OPENS_VALUE_WORDS = new Set([
+	"return",
+	"typeof",
+	"instanceof",
+	"in",
+	"of",
+	"case",
+	"do",
+	"else",
+	"yield",
+	"await",
+	"new",
+	"delete",
+	"void",
+	"throw",
+]);
+
+/**
+ * What each language encloses text in, and therefore what this scan erases.
+ * Stated here rather than left to a default, because the two mistakes worth
+ * making are both silent: CSS has no `//` comment, so reading one would blank
+ * a rule from `url(//cdn/x.png)` to the end of the line, and it has no regex
+ * literal, so a `/` inside a path would erase to the next one.
+ */
+const SYNTAX = {
+	css: { lineComments: false, regex: false, templates: false },
+	ts: { lineComments: true, regex: true, templates: true },
+} as const;
+
+/**
+ * `source` with its comments, strings and — where the language has them —
+ * template text and regex literals replaced by spaces, so what is left at a
+ * given offset is code and nothing else. Lengths and newlines are preserved,
+ * so a token found in the result can be read back out of the original at the
+ * same place.
+ *
+ * A left-to-right scan carrying state, because deciding what a character means
+ * without knowing what it sits inside is one mistake, and the shapes it takes
+ * — an escaped quote ending a string early, a `/*` inside a line comment, a
+ * quote inside a regex literal swallowing the rest of the file — are one bug.
+ * A template literal is two things at once, so its text is blanked and its
+ * `${…}` is not: the expression is code, and a read inside one is a read.
+ *
+ * Not a parser: the only question asked of each character is what encloses it.
+ */
+export function blank(source: string, language: keyof typeof SYNTAX): string {
+	const { lineComments, regex, templates } = SYNTAX[language];
+	const out = [...source];
+	const erase = (from: number, to: number) => {
+		for (let k = from; k < to && k < out.length; k++) {
+			if (out[k] !== "\n") out[k] = " ";
+		}
+	};
+
+	// One entry per template literal currently open, holding the `{` nesting
+	// inside its interpolation, or `null` while its text rather than an
+	// expression is being read. An empty stack is ordinary code.
+	const open: (number | null)[] = [];
+	let span = 0; // where the template text being blanked started
+	let previous = "";
+	let i = 0;
+
+	const word = (at: number) => {
+		let end = at;
+		while (end < source.length && /[A-Za-z_$]/.test(source[end] as string))
+			end++;
+		return source.slice(at, end);
+	};
+
+	while (i < source.length) {
+		const c = source[i] as string;
+		const next = source[i + 1];
+		const inText = open.length > 0 && open.at(-1) === null;
+
+		if (inText) {
+			if (c === "\\") {
+				i += 2;
+			} else if (c === "`") {
+				erase(span, i);
+				open.pop();
+				i++;
+				previous = "`";
+			} else if (c === "$" && next === "{") {
+				erase(span, i);
+				open[open.length - 1] = 0;
+				i += 2;
+				previous = "{";
+			} else {
+				i++;
+			}
+			continue;
+		}
+
+		if (c === "'" || c === '"') {
+			const start = i;
+			i++;
+			while (i < source.length && source[i] !== c) {
+				if (source[i] === "\\") {
+					i += 2;
+					continue;
+				}
+				// A raw newline cannot sit inside a '' or "" literal, so a quote
+				// that opened no string stops here instead of swallowing the rest
+				// of the file and taking the scan silent with it.
+				if (source[i] === "\n") break;
+				i++;
+			}
+			if (source[i] === c) i++;
+			erase(start, i);
+			previous = c;
+		} else if (c === "`" && templates) {
+			open.push(null);
+			span = i + 1;
+			i++;
+		} else if (c === "}" && open.length > 0 && open.at(-1) === 0) {
+			// The brace that closes the interpolation, so its template's text
+			// resumes here.
+			open[open.length - 1] = null;
+			span = i + 1;
+			i++;
+		} else if (c === "{" && open.length > 0 && open.at(-1) !== null) {
+			open[open.length - 1] = (open.at(-1) as number) + 1;
+			previous = c;
+			i++;
+		} else if (c === "}" && open.length > 0 && open.at(-1) !== null) {
+			open[open.length - 1] = (open.at(-1) as number) - 1;
+			previous = c;
+			i++;
+		} else if (lineComments && c === "/" && next === "/") {
+			const start = i;
+			while (i < source.length && source[i] !== "\n") i++;
+			erase(start, i);
+		} else if (c === "/" && next === "*") {
+			const start = i;
+			i += 2;
+			while (i < source.length && !(source[i] === "*" && source[i + 1] === "/"))
+				i++;
+			i += 2;
+			erase(start, i);
+		} else if (
+			c === "/" &&
+			regex &&
+			(previous === "" ||
+				OPENS_VALUE.includes(previous) ||
+				OPENS_VALUE_WORDS.has(previous))
+		) {
+			const start = i;
+			i++;
+			let inClass = false;
+			while (i < source.length) {
+				if (source[i] === "\\") {
+					i += 2;
+					continue;
+				}
+				if (source[i] === "[") inClass = true;
+				else if (source[i] === "]") inClass = false;
+				// An unterminated literal is a syntax error, not something to scan
+				// past: stop at the newline rather than run to end of input.
+				else if (source[i] === "\n") break;
+				else if (source[i] === "/" && !inClass) break;
+				i++;
+			}
+			if (source[i] === "/") i++;
+			erase(start, i);
+			previous = "/";
+		} else if (/[A-Za-z_$]/.test(c)) {
+			const found = word(i);
+			previous = found;
+			i += found.length;
+		} else {
+			if (c.trim() !== "") previous = c;
+			i++;
+		}
+	}
+
+	return out.join("");
+}
diff --git a/src/app/module-classes.test.ts b/src/app/module-classes.test.ts
index c4ba0d5..8163897 100644
--- a/src/app/module-classes.test.ts
+++ b/src/app/module-classes.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, test } from "bun:test";
 import { lstatSync, readFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
+import { blank } from "../../scripts/scan.ts";
 
 /**
  * Every class a component reads off a CSS module is one that module defines.
@@ -43,190 +44,6 @@ const tracked = ls.stdout
 
 const read = (path: string) => readFileSync(join(root, path), "utf8");
 
-/**
- * A `/` opens a regex literal only where a value may begin; after one it is
- * division. The token before it is what tells them apart — a character for
- * punctuation, a word for the keywords a value may follow.
- */
-const OPENS_VALUE = "(,=:[!&|?{};+-*%~^<>";
-const OPENS_VALUE_WORDS = new Set([
-	"return",
-	"typeof",
-	"instanceof",
-	"in",
-	"of",
-	"case",
-	"do",
-	"else",
-	"yield",
-	"await",
-	"new",
-	"delete",
-	"void",
-	"throw",
-]);
-
-/**
- * What each language encloses text in, and therefore what this scan erases.
- * Stated here rather than left to a default, because the two mistakes worth
- * making are both silent: CSS has no `//` comment, so reading one would blank
- * a rule from `url(//cdn/x.png)` to the end of the line, and it has no regex
- * literal, so a `/` inside a path would erase to the next one.
- */
-const SYNTAX = {
-	css: { lineComments: false, regex: false, templates: false },
-	ts: { lineComments: true, regex: true, templates: true },
-} as const;
-
-/**
- * `source` with its comments, strings and — where the language has them —
- * template text and regex literals replaced by spaces, so what is left at a
- * given offset is code and nothing else. Lengths and newlines are preserved,
- * so a token found in the result can be read back out of the original at the
- * same place.
- *
- * A left-to-right scan carrying state, because deciding what a character means
- * without knowing what it sits inside is one mistake, and the shapes it takes
- * — an escaped quote ending a string early, a `/*` inside a line comment, a
- * quote inside a regex literal swallowing the rest of the file — are one bug.
- * A template literal is two things at once, so its text is blanked and its
- * `${…}` is not: the expression is code, and a read inside one is a read.
- *
- * Not a parser: the only question asked of each character is what encloses it.
- */
-function blank(source: string, language: keyof typeof SYNTAX): string {
-	const { lineComments, regex, templates } = SYNTAX[language];
-	const out = [...source];
-	const erase = (from: number, to: number) => {
-		for (let k = from; k < to && k < out.length; k++) {
-			if (out[k] !== "\n") out[k] = " ";
-		}
-	};
-
-	// One entry per template literal currently open, holding the `{` nesting
-	// inside its interpolation, or `null` while its text rather than an
-	// expression is being read. An empty stack is ordinary code.
-	const open: (number | null)[] = [];
-	let span = 0; // where the template text being blanked started
-	let previous = "";
-	let i = 0;
-
-	const word = (at: number) => {
-		let end = at;
-		while (end < source.length && /[A-Za-z_$]/.test(source[end] as string))
-			end++;
-		return source.slice(at, end);
-	};
-
-	while (i < source.length) {
-		const c = source[i] as string;
-		const next = source[i + 1];
-		const inText = open.length > 0 && open.at(-1) === null;
-
-		if (inText) {
-			if (c === "\\") {
-				i += 2;
-			} else if (c === "`") {
-				erase(span, i);
-				open.pop();
-				i++;
-				previous = "`";
-			} else if (c === "$" && next === "{") {
-				erase(span, i);
-				open[open.length - 1] = 0;
-				i += 2;
-				previous = "{";
-			} else {
-				i++;
-			}
-			continue;
-		}
-
-		if (c === "'" || c === '"') {
-			const start = i;
-			i++;
-			while (i < source.length && source[i] !== c) {
-				if (source[i] === "\\") {
-					i += 2;
-					continue;
-				}
-				// A raw newline cannot sit inside a '' or "" literal, so a quote
-				// that opened no string stops here instead of swallowing the rest
-				// of the file and taking the scan silent with it.
-				if (source[i] === "\n") break;
-				i++;
-			}
-			if (source[i] === c) i++;
-			erase(start, i);
-			previous = c;
-		} else if (c === "`" && templates) {
-			open.push(null);
-			span = i + 1;
-			i++;
-		} else if (c === "}" && open.length > 0 && open.at(-1) === 0) {
-			// The brace that closes the interpolation, so its template's text
-			// resumes here.
-			open[open.length - 1] = null;
-			span = i + 1;
-			i++;
-		} else if (c === "{" && open.length > 0 && open.at(-1) !== null) {
-			open[open.length - 1] = (open.at(-1) as number) + 1;
-			previous = c;
-			i++;
-		} else if (c === "}" && open.length > 0 && open.at(-1) !== null) {
-			open[open.length - 1] = (open.at(-1) as number) - 1;
-			previous = c;
-			i++;
-		} else if (lineComments && c === "/" && next === "/") {
-			const start = i;
-			while (i < source.length && source[i] !== "\n") i++;
-			erase(start, i);
-		} else if (c === "/" && next === "*") {
-			const start = i;
-			i += 2;
-			while (i < source.length && !(source[i] === "*" && source[i + 1] === "/"))
-				i++;
-			i += 2;
-			erase(start, i);
-		} else if (
-			c === "/" &&
-			regex &&
-			(previous === "" ||
-				OPENS_VALUE.includes(previous) ||
-				OPENS_VALUE_WORDS.has(previous))
-		) {
-			const start = i;
-			i++;
-			let inClass = false;
-			while (i < source.length) {
-				if (source[i] === "\\") {
-					i += 2;
-					continue;
-				}
-				if (source[i] === "[") inClass = true;
-				else if (source[i] === "]") inClass = false;
-				// An unterminated literal is a syntax error, not something to scan
-				// past: stop at the newline rather than run to end of input.
-				else if (source[i] === "\n") break;
-				else if (source[i] === "/" && !inClass) break;
-				i++;
-			}
-			if (source[i] === "/") i++;
-			erase(start, i);
-			previous = "/";
-		} else if (/[A-Za-z_$]/.test(c)) {
-			const found = word(i);
-			previous = found;
-			i += found.length;
-		} else {
-			if (c.trim() !== "") previous = c;
-			i++;
-		}
-	}
-
-	return out.join("");
-}
-
 /**
  * The class selectors a module defines.
  *
@@ -359,16 +176,10 @@ describe("the classes a file reads", () => {
 		expect(names(body)).toEqual(["hero-name"]),
 	);
 
-	test.each([
-		["a string", "const a = 's.name';"],
-		["a line comment", "// s.name"],
-		["a block comment", "/* s.name */"],
-		["template text", "const a = `text s.name`;"],
-		["a regex literal", "const a = /s.name/;"],
-		["a regex after return", "function f() { return /s.name/; }"],
-		["a regex after an arrow", "const f = () => /s.name/;"],
-		["a regex after typeof", "const a = typeof /s.name/;"],
-	])("ignores %s", (_, body) => expect(names(body)).toEqual([]));
+	// What the scan erases is `scripts/scan.test.ts`'s; this is only that a
+	// binding named in something erased is not a read.
+	test("ignores a name in a comment", () =>
+		expect(names("// s.name")).toEqual([]));
 
 	test("ignores an import spelled inside a string, which imports nothing", () => {
 		const source = `const a = "import s from './fake.module.css'";\nconst b = s.name;`;

From 8916b24cda9787d365b7a268bc573486b7e3dc45 Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 16:56:00 +0100
Subject: [PATCH 15/17] Tighten the source-scan rule, and add what it did not
 cover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nine findings across three review rounds, all in one scanner, and the bot
wrote three times that no rule covered the shape. String and comment
state was not the whole of it: a template's expression is code, a regex
literal is not, and which of those exist is the language's answer.

The second rule is the other half — an import's specifier and a bracket
read's name are both literals, and both were read out of a copy that no
longer carried them.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 CLAUDE.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 251f8ee..75b8aaa 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -229,7 +229,10 @@ describes is rewritten, the rule is a candidate for deletion.
 - Scope a scan by what it exempts, never by an enumeration of what it covers.
 - State a scan's exemptions in the scan; never inherit them from another tool's
   configuration.
-- Scan source left to right carrying string and comment state, never line by line.
+- Scan source left to right carrying string, comment, template-expression and
+  regex-literal state, and name which of those the language being scanned has.
+- Read a literal's contents from the source at the offset the scan reached,
+  never from the copy the scan blanked.
 - Comment what a reader would otherwise "fix": a deliberate departure from the
   obvious implementation, or a precondition the code does not check.
 

From f50dbfe1bed29331925473921635f213a7592afd Mon Sep 17 00:00:00 2001
From: Vladimir <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 17:06:20 +0100
Subject: [PATCH 16/17] Update scripts/scan.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 scripts/scan.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/scripts/scan.ts b/scripts/scan.ts
index bacbf14..f91800e 100644
--- a/scripts/scan.ts
+++ b/scripts/scan.ts
@@ -61,7 +61,9 @@ const SYNTAX = {
  */
 export function blank(source: string, language: keyof typeof SYNTAX): string {
 	const { lineComments, regex, templates } = SYNTAX[language];
-	const out = [...source];
+	// Indexed by UTF-16 unit, as `source[i]` is, so an astral character does not
+	// shift every offset after it.
+	const out = source.split("");
 	const erase = (from: number, to: number) => {
 		for (let k = from; k < to && k < out.length; k++) {
 			if (out[k] !== "\n") out[k] = " ";

From e468f17533657b1d55926eb5530aa28cd0be4382 Mon Sep 17 00:00:00 2001
From: Vladimir Lazarev <laidrivm@gmail.com>
Date: Thu, 13 Aug 2026 18:17:10 +0100
Subject: [PATCH 17/17] Scan TSX through the transpiler, and pin what the
 listing rests on
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

JSX is not TypeScript: to a lexical scan `/>` and `</span>` open regex
literals and an apostrophe in element text opens a string, each erasing
the rest of its line and losing a read — the direction that passes
wrongly. All three were reproduced before the fix. Bun's transpiler
removes JSX and keeps both the import and the reads, so what is scanned
is plain JavaScript; the heuristics that would otherwise be needed are
the family of bugs the rule already names.

A binding may be spelled with a dollar, which the identifier pattern
excluded and the access pattern would not have escaped.

CodeRabbit read the dist listing as able to serve a symlink out of the
tree. Measured against Bun 1.3.14, `scanSync` does not follow symlinks
unless asked, so one planted in dist/ is never listed. That default is
what the containment rests on and now carries a test: turning
followSymlinks on fails it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 build.test.ts                              | 19 ++++++++-
 dist-routes.ts                             |  4 ++
 openspec/changes/file-size-cap/proposal.md |  6 ++-
 openspec/changes/file-size-cap/tasks.md    | 11 ++++--
 src/app/module-classes.test.ts             | 46 +++++++++++++++++++---
 5 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/build.test.ts b/build.test.ts
index 7ccb0ba..b940b13 100644
--- a/build.test.ts
+++ b/build.test.ts
@@ -1,4 +1,5 @@
 import { beforeAll, describe, expect, test } from "bun:test";
+import { symlinkSync, unlinkSync } from "node:fs";
 import { distFile } from "./dist-routes.ts";
 
 /**
@@ -52,7 +53,11 @@ describe("build output", () => {
 		const html = await Bun.file(`${dist}/index.html`).text();
 
 		expect(sheets).toHaveLength(1);
-		expect(html).toContain(`href="./${sheets[0]}"`);
+		// The element, not the string: an `href` anywhere in the document would
+		// satisfy a substring match without the browser loading anything.
+		expect(html).toMatch(
+			new RegExp(`<link[^>]+rel="stylesheet"[^>]+href="\\./${sheets[0]}"`),
+		);
 	});
 
 	test("leaves no font inlined as a data URI", async () => {
@@ -81,6 +86,18 @@ describe("serving the build output", () => {
 		expect((await response?.text())?.length).toBeGreaterThan(0);
 	});
 
+	// `Bun.file` follows a symlink, so the listing has to resolve one.
+	test("refuses an entry that resolves outside dist/", async () => {
+		const planted = `${dist}/escape.js`;
+		symlinkSync(`${import.meta.dir}/package.json`, planted);
+
+		try {
+			expect(distFile("/escape.js")).toBeNull();
+		} finally {
+			unlinkSync(planted);
+		}
+	});
+
 	// The listing is cached, so what it costs is a stale answer after a rebuild.
 	test("follows an asset appearing and disappearing", async () => {
 		const probe = `${dist}/probe-listing.js`;
diff --git a/dist-routes.ts b/dist-routes.ts
index 77f9e2c..aad787f 100644
--- a/dist-routes.ts
+++ b/dist-routes.ts
@@ -44,6 +44,10 @@ let listing = new Set<string>();
 function listed(): Set<string> {
 	const at = statSync(distDir, { bigint: true }).mtimeNs;
 	if (at !== listedAt) {
+		// `scanSync` does not follow symlinks unless asked to, measured against
+		// Bun 1.3.14, so a link planted in `dist/` is not listed and `Bun.file`
+		// never receives one. That default is what the containment above rests
+		// on, and `build.test.ts` pins it.
 		listing = new Set(new Bun.Glob("*").scanSync(distDir.pathname));
 		listedAt = at;
 	}
diff --git a/openspec/changes/file-size-cap/proposal.md b/openspec/changes/file-size-cap/proposal.md
index 74e3c69..5860618 100644
--- a/openspec/changes/file-size-cap/proposal.md
+++ b/openspec/changes/file-size-cap/proposal.md
@@ -96,8 +96,10 @@ implementing it has to stop enumerating a directory.
   request beside step 1: `scripts/dev.ts` and `dist-routes.ts`, because Bun's
   HTML dev server never defines a CSS module's class-name mapping
   (oven-sh/bun#18258) and development therefore builds and serves `dist/` — see
-  `design.md`; and `src/app/module-classes.test.ts`, which checks that a
-  component reads only names its module defines.
+  `design.md`. And `src/app/module-classes.test.ts` with `scripts/scan.ts`
+  behind it, which check that a component reads only names its module defines —
+  opened separately and merged into step 1's own pull request rather than
+  landing behind it.
 - Deleted: `src/app/styles/app.css`.
 - Modified: `index.html`, every `.tsx` that carries a `class`, `styles.css`,
   `base.css` (the bare `dialog` panel has no class to scope),
diff --git a/openspec/changes/file-size-cap/tasks.md b/openspec/changes/file-size-cap/tasks.md
index 4782982..5a05aa0 100644
--- a/openspec/changes/file-size-cap/tasks.md
+++ b/openspec/changes/file-size-cap/tasks.md
@@ -20,8 +20,8 @@ ahead of the step rather than inside it: Bun's HTML dev server cannot emit a
 CSS module's class-name mapping, so development now builds and serves `dist/`.
 It is its own pull request because it changes how the application is served and
 stands on its own — `design.md` records the decision. The scan that checks a
-component reads only names its module defines follows the step for the same
-reason, in a third.
+component reads only names its module defines was opened as a third, and merged
+into this step's pull request rather than behind it, so it ships here.
 
 `/zombies` in diff mode runs before each pull request, per the pre-PR sequence.
 Only step 8 introduces logic for it to find; the test tasks in steps 1–7 are
@@ -54,8 +54,11 @@ this proposal.
       names in the stylesheet, so a literal left behind matches nothing and the
       rule silently stops applying. Every step that moves a block owes this,
       not only this one
-- [x] 1.6 Confirm no rule was left behind and none duplicated: `app.css` shrinks
-      by exactly the lines the two modules gained, comments included
+- [x] 1.6 Confirm no rule was left behind and none duplicated. Not by counting
+      lines: the block splits across two modules, `app.module.css` and
+      `base.css`, and two rules become custom properties, so no equality holds.
+      Compare the multiset of declarations and of selectors before and after,
+      and account for every difference
 - [x] 1.7 Run the e2e suite and confirm the rendered page is unchanged — a
       mistake here is a blank stylesheet, which is loud
 
diff --git a/src/app/module-classes.test.ts b/src/app/module-classes.test.ts
index 8163897..519671f 100644
--- a/src/app/module-classes.test.ts
+++ b/src/app/module-classes.test.ts
@@ -3,6 +3,8 @@ import { lstatSync, readFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { blank } from "../../scripts/scan.ts";
 
+const TSX = new Bun.Transpiler({ loader: "tsx" });
+
 /**
  * Every class a component reads off a CSS module is one that module defines.
  *
@@ -75,14 +77,30 @@ const defined = (css: string) => {
  * `import s from "./x.module.css"` would read as an import.
  */
 function reads(path: string, source: string): [string, string][] {
+	// JSX is not TypeScript. To a lexical scan `/>` opens a regex literal, so
+	// does `</span>`, and an apostrophe in element text opens a string — each
+	// erasing the rest of its line and losing a read, which is the direction
+	// that passes wrongly. Bun's transpiler removes JSX and keeps both the
+	// import and the reads, so what gets scanned is plain JavaScript.
+	let transpiled: string;
+	try {
+		transpiled = TSX.transformSync(source);
+	} catch {
+		// It does not parse, so it performs no import of a CSS module. Every
+		// tracked file is offered here, most of them not source at all.
+		return [];
+	}
+
 	const found: [string, string][] = [];
-	const code = blank(source, "ts");
+	const code = blank(transpiled, "ts");
 	const after = (match: RegExpExecArray | RegExpMatchArray) =>
-		source.slice((match.index as number) + match[0].length);
+		transpiled.slice((match.index as number) + match[0].length);
 
 	// `from` is not followed by `\s+` here: the specifier is blanked to spaces,
 	// so a greedy run would swallow it and `after` would point past the string.
-	for (const statement of code.matchAll(/\bimport\s+(\w+)\s+from\b/g)) {
+	for (const statement of code.matchAll(
+		/\bimport\s+([A-Za-z_$][\w$]*)\s+from\b/g,
+	)) {
 		const specifier = /^\s*(["'])([^"']+)\1/.exec(after(statement));
 		if (specifier === null) continue;
 		const target = specifier[2] as string;
@@ -91,14 +109,15 @@ function reads(path: string, source: string): [string, string][] {
 		const module = resolve(dirname(join(root, path)), target).slice(
 			root.length + 1,
 		);
-		// `binding` is `\w+` by construction, so it carries nothing to escape.
-		const binding = statement[1] as string;
+		// A `$` is a valid identifier character and a regex metacharacter, so the
+		// binding is escaped before it becomes part of a pattern.
+		const binding = (statement[1] as string).replace(/[$]/g, "\\$&");
 
 		for (const access of code.matchAll(
 			new RegExp(
 				// Optional access is what `noUncheckedIndexedAccess` invites, so a
 				// read spelled `s?.name` is a read like any other.
-				`(?<![\\w.])${binding}(?:\\??\\.(\\w+)|(?:\\?\\.)?\\[)`,
+				`(?<![\\w.$])${binding}(?:\\??\\.(\\w+)|(?:\\?\\.)?\\[)`,
 				"g",
 			),
 		)) {
@@ -176,6 +195,21 @@ describe("the classes a file reads", () => {
 		expect(names(body)).toEqual(["hero-name"]),
 	);
 
+	// JSX is what a lexical scan reads as regex and string syntax; each of these
+	// erased the rest of its line before the transpiler was put in front of it.
+	test.each([
+		["a self-closing tag", "<T hero={hero} /> {s.name}"],
+		["a closing tag", "<p>x</p> {s.name}"],
+		["an apostrophe in element text", "<p>it's fine</p> {s.name}"],
+	])("finds a read after %s", (_, body) =>
+		expect(names(`export const T = () => <>${body}</>;`)).toEqual(["name"]),
+	);
+
+	test("finds a read off a binding spelled with a dollar", () => {
+		const source = `import $s from "./hero-tile.module.css";\nconst a = $s.name;`;
+		expect(reads(at, source)).toEqual([[module, "name"]]);
+	});
+
 	// What the scan erases is `scripts/scan.test.ts`'s; this is only that a
 	// binding named in something erased is not a read.
 	test("ignores a name in a comment", () =>