feat(bench): wire pretable adapter to @pretable/ui Excel theme (PR 5 of 5) (#56)

* docs(plans): wire apps/bench to @pretable/ui (PR 5 of theming plan)

3-task plan covering:
- Add @pretable/ui workspace dependency to apps/bench
- Add @import statements for excel.css + grid.css to app.css
  (after cool-slate, before tailwindcss)
- NO data-theme="dark" (Excel is light-only)
- NO inspection-* slim needed — bench has zero engine-attribute
  CSS to override (confirmed via grep)
- Final verification of bench + workspace tests/build/typecheck

After this PR lands, the 5-PR theming arc is complete:
- @pretable/ui ships at workspace + npm
- apps/website demos Material 3 dark theme
- apps/bench demos Excel light theme
- Engine bridge (PR 3) routes CSS variables → JS layout for headers
- 24-token contract enforced by smoke test

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>

* build(bench): add @pretable/ui workspace dependency

Restores the dependency that PR 1 removed (when @pretable/ui still
held marketing components and cool-slate tokens). The new
@pretable/ui (created in PR 2) is a public theming package with
grid.css, theme files, density helpers, and a Tailwind v4 bridge.

Adds the dep to package.json, threads the build into prepare:deps
so apps/bench builds resolve the new package's dist correctly.

Subsequent commit in this PR wires the actual CSS imports.

Part 1 of wiring apps/bench to @pretable/ui (PR 5 of theming plan).

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>

* feat(bench): wire pretable adapter grid to @pretable/ui Excel theme

Two import lines in apps/bench/src/app.css between cool-slate-tokens
and tailwindcss:

- @pretable/ui/themes/excel.css — Excel theme tokens at :root.
  Light-only by design; default density compact (20px rows, 15px
  Aptos Narrow font, Excel-green #107C41 accent, no row hover,
  sharp 0-radius corners). Bench is a benchmarking tool — Excel's
  dense/technical aesthetic suits it.

- @pretable/ui/grid.css — selector-based grid skin targeting the
  engine's [data-pretable-*] data attributes. With the engine's
  inline styles skin-stripped in PR 3, the grid renders unthemed
  until a theme + grid.css are loaded; this commit completes the
  bench's pretable adapter visual setup.

Two namespaces coexist on the page: --pt-* (cool-slate, drives
bench chrome — hero, scenario panels, telemetry surfaces),
--pretable-* (Excel, drives the embedded pretable adapter grid).
They don't conflict because they're prefix-disjoint.

No data-theme="dark" — Excel is light-only. Bench's surrounding
chrome stays cool-slate dark, the pretable adapter grid renders
Excel-light. The visual contrast advertises the per-component
theming flexibility of @pretable/ui.

The bench's other adapters (AG Grid, MUI, TanStack) are unaffected
— they use their own theming systems.

Part 2 of wiring apps/bench to @pretable/ui (PR 5 of theming plan).
This completes the 5-PR theming arc.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>

* docs(website): refresh getting-started for new @pretable/ui exports

The previous getting-started page told consumers to import
@pretable/ui/tokens.css and @pretable/ui/components.css — paths
that PR 1 deleted (when @pretable/ui was the marketing-components
package) and PR 2 didn't recreate (the new theming package has
different exports).

Update the install + import section to:
- Pick a theme (excel.css default; material.css optional)
- Import the theme + grid.css
- Note Tailwind v4 bridge (opt-in tailwind.css)
- Note runtime light/dark via data-theme="dark"
- Note runtime density via data-density="..."

Caught by code-quality review of PR 5 — these stale paths would
have produced a Vite/webpack module-resolution error for any
consumer following the published docs.

Code-quality review follow-up to e7959d2; completes the 5-PR
theming arc.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4 (1M context) <noreply@anthropic.com>

Author: blove

apps/bench/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "prepare:deps": "pnpm --filter @pretable-internal/scenario-data build && pnpm --filter @pretable-internal/bench-runner build && pnpm --filter @pretable-internal/stream-adapter build && pnpm --filter @pretable/react build",
+    "prepare:deps": "pnpm --filter @pretable-internal/scenario-data build && pnpm --filter @pretable-internal/bench-runner build && pnpm --filter @pretable-internal/stream-adapter build && pnpm --filter @pretable/react build && pnpm --filter @pretable/ui build",
     "predev": "pnpm run prepare:deps",
     "dev": "vite",
     "prebuild": "pnpm run prepare:deps",
@@ -31,6 +31,7 @@
     "@pretable-internal/scenario-data": "workspace:*",
     "@pretable-internal/stream-adapter": "workspace:*",
     "@pretable/react": "workspace:*",
+    "@pretable/ui": "workspace:*",
     "@tanstack/react-virtual": "^3.13.23",
     "ag-grid-community": "^35.2.1",
     "ag-grid-react": "^35.2.1",

apps/bench/src/app.css

@@ -4,6 +4,8 @@
 @import "@fontsource-variable/jetbrains-mono/wght.css";
 @import "./styles/cool-slate-tokens.css";
 @import "./styles/marketing-components.css";
+@import "@pretable/ui/themes/excel.css";
+@import "@pretable/ui/grid.css";
 @import "tailwindcss";
 
 @theme inline {

apps/website/app/docs/getting-started/page.mdx

@@ -10,14 +10,16 @@ npm i @pretable/react @pretable/ui
 
 ## Import the styles
 
-Pretable ships two CSS files. Import them once at your app's entry point:
+Pretable's theming ships in `@pretable/ui`. Pick a theme and import its CSS plus the grid skin once at your app's entry point:
 
 ```css
-@import "@pretable/ui/tokens.css";
-@import "@pretable/ui/components.css";
+@import "@pretable/ui/themes/excel.css";
+@import "@pretable/ui/grid.css";
 ```
 
-The first file declares all `--pt-*` design tokens. The second file ships component primitives (Nav, Footer, etc.) that consume them. If you only need the engine, you can skip both — components stay unstyled, and you wire your own.
+The theme file declares all `--pretable-*` tokens at `:root`; `grid.css` is the selector-based skin that targets the engine's `[data-pretable-*]` data attributes. Two themes ship today — `excel.css` (gray, dense, technical, light-only) and `material.css` (Material 3 light + dark; toggle dark mode by setting `data-theme="dark"` on `<html>`). If you only need the engine, skip both imports and the grid renders unstyled (functional but no visual chrome).
+
+Tailwind v4 users can additionally import `@pretable/ui/tailwind.css` to get `bg-pt-*`/`text-pt-*` utility shortcuts that alias the `--pretable-*` tokens. Density (compact / standard / spacious) is runtime-switchable by toggling `data-density="..."` on `<html>`.
 
 ## Render your first grid