chore: Tailwind v4 cleanup — drop cssnano + tokenize hardcoded colors

[stid]

Follow-up to the Tailwind v3→v4 upgrade (#179), executing the two tech-debt items parked in DECISIONS.md D-006 plus a latent bug surfaced while scoping them. Logged as D-007.

What changed

1. Drop cssnano — redundant under v4: @tailwindcss/postcss + Vite already minify CSS in production (verified the emitted dist CSS is minified without it). One dep + one config line gone.
2. Repair two dead tokens — components referenced bg-surface-hover (7×) and text-text-disabled (11×), but neither token existed in tokens.ts/the adapter, so those classes emitted no CSS (missing hover lift on rows/buttons, uncolored disabled flags/buttons). Added surface.hover (#334155) and text.disabled (#6B7280) — fixes all ~18 call sites with zero component edits.
3. Tokenize hardcoded colors — bg-black/{40,20} → bg-surface-sunken/{40,20} (new surface.sunken #000000; identical CSS via opacity modifier) across Info, PaginatedTableView, StackViewer, MemoryViewerPaginated (10 sites); unmapped-cell text-gray-500! → text-text-tertiary!.

Out of scope (deferred): error reds (Error.tsx/AppContent), text-black contrast text, index.css base defaults. CRT colors exempt (CLAUDE.md).

Why the broken tokens slipped through

The token-parity test only guards adapter → config (forward: "every token is in the theme"), never component → token (reverse: "every class resolves"). So dead class references were invisible to CI.

Verification

• yarn test:ci green — 759 passed, 20 skipped (the skipped are browser-only WASM parity/benchmark tests). Parity test extended to lock the 3 new hex values.
• dist CSS grep (the deterministic RENDER check — Tailwind v4 only emits a utility when the class is used AND maps to a real token):
  • bg-surface-hover{background-color:#334155} — now emits (was absent)
  • text-text-disabled,.text-text-muted{color:#6b7280} — now emits (was absent)
  • bg-surface-sunken/40 → oklab(0% none none/.4) — byte-identical to old bg-black/40
• Production build succeeds; dist CSS still minified.

Version bumped 4.51.1 → 4.51.2 (chore = patch).

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Fixed missing semantic color tokens causing incomplete CSS generation.
  • Enhanced memory viewer with keyboard shortcuts (Tab, Enter, Escape) for better editing.
  • Updated component styling consistency with new color system.

• Tests

  • Added validation for color token and theme compatibility.

• Chores

  • Removed CSS optimization dependency.
  • Version bumped to 4.51.2.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 5c459102-c4aa-43b3-b3fc-4baf5afebc05

📥 Commits

Reviewing files that changed from the base of the PR and between 71d30d7 and 5515142.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (13)

• docs/active/consolidated_roadmap.md
• docs/lcd/DECISIONS.md
• docs/lcd/work/tw4-cleanup/JOURNAL.md
• package.json
• postcss.config.js
• src/components/Info.tsx
• src/components/MemoryViewerPaginated.tsx
• src/components/PaginatedTableView.tsx
• src/components/StackViewer.tsx
• src/styles/__tests__/token-tailwind-parity.vitest.test.ts
• src/styles/tailwind-tokens.ts
• src/styles/tokens.ts
• src/version.ts

💤 Files with no reviewable changes (1)

• package.json

---

📝 Walkthrough

Walkthrough

Tailwind v4 cleanup continuation: introduces three semantic color tokens, removes cssnano from the build, updates component styling to use the new surface-sunken background token, refactors the memory viewer with performance optimizations and enhanced keyboard navigation, and documents the changes via decision logs and version bump.

Changes

Tailwind v4 Cleanup & Component Improvements

Layer / File(s)	Summary
Design Token System Definition src/styles/tokens.ts, src/styles/tailwind-tokens.ts, src/styles/__tests__/token-tailwind-parity.vitest.test.ts	Three new semantic color tokens are added: surface.hover and surface.sunken to surface colors, and text.disabled to text colors. tokenDerivedTheme maps these into the Tailwind config, and a new test asserts the tokens resolve correctly through the Tailwind theme adapter.
PostCSS and Dependency Cleanup package.json, postcss.config.js	cssnano devDependency is removed and the production-conditional plugin entry is deleted from the PostCSS config, simplifying the CSS pipeline to only use @tailwindcss/postcss.
UI Component Styling Updates src/components/Info.tsx, src/components/StackViewer.tsx, src/components/PaginatedTableView.tsx	Three components migrate to the new surface-sunken background token, replacing bg-black/* classes. Info.tsx restructures the TAB hint and updates code block displays; StackViewer normalizes hex casing to lowercase and refactors the stack entry rendering; PaginatedTableView reformats the interface, adds address input sanitization, improves keyboard navigation, and updates header layout.
Memory Viewer Refactoring src/components/MemoryViewerPaginated.tsx	MemoryRow is memoized with destructured props; row count is now dynamically calculated via ResizeObserver and window resize events; memory reads are optimized with a diff check to skip redundant state updates; keyboard handling is enhanced with Enter (commit), Tab (commit + move to next cell), and Escape (cancel); address bounds consistently use 0xffff; and styling switches to surface-sunken background.
Documentation and Version docs/active/consolidated_roadmap.md, docs/lcd/DECISIONS.md, docs/lcd/work/tw4-cleanup/JOURNAL.md, src/version.ts	Roadmap entries are refined, decision D-007 is added to document the cssnano removal and token repairs, the cleanup work journal is initialized with status and completion log, and APP_VERSION is bumped to 4.51.2.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• stid/Apple1JS#155: Extends the token-driven design system by adding new semantic tokens and repairing designTokens + tokenDerivedTheme mappings, directly building on the single-source token→Tailwind adapter introduced in #155.
• stid/Apple1JS#179: Continues the Tailwind v3→v4 migration workstream by removing cssnano, extending token mappings and tests, and updating UI classes to use tokenized styles that originated in the #179 upgrade.
• stid/Apple1JS#180: Both PRs modify the project's cssnano setup—chore: update dependencies (JS incl. cssnano 7→8 + Rust Cargo.lock) #180 bumps the devDependency while this PR removes cssnano entirely, including the conditional plugin entry in postcss.config.js.

Poem

🐰 A rabbit hops through tokens bright,
Surface sunken, colors right,
Memory viewers skip the glance,
Keyboard Tab leads a merry dance,
Building blocks with cleaner sight! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main changes: removing cssnano and tokenizing hardcoded colors as part of Tailwind v4 cleanup.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/tw4-cleanup

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying apple1js with    Cloudflare Pages

Latest commit:	5515142
Status:	✅  Deploy successful!
Preview URL:	https://2f01e171.apple1js.pages.dev
Branch Preview URL:	https://chore-tw4-cleanup.apple1js.pages.dev

View logs