icu-ui-kit-demo

A gallery, accent picker and --icu-* token editor for icu-ui-kit — every exported component, rendered live against the kit's real stylesheet, with nothing else on the page.

• Pure Preact, no compat alias. The app imports icu-ui-kit/preact directly — never icu-ui-kit bare and never preact/compat — so it also proves the kit's Preact entry works standalone, not just behind React's types.
• No CSS framework. No Tailwind, no upstream. The only styling on the page is icu-ui-kit's own stylesheet plus whatever --icu-* values the accent picker and token editor set on :root. That is the kit's entire integration contract, and this app is the proof it's enough.
• Zero runtime dependencies of its own. icu-ui-kit and preact are the only two entries in dependencies; the static file server and the headless verification script are both hand-rolled against Node's own http rather than pulling in a package for either.

Run it

npm ci
npm run dev        # vite dev server

Other scripts:

Script	What it does
npm run build	Production build to dist/
npm run preview	Serve the built dist/ via Vite's own preview server
npm run typecheck	tsc --noEmit
npm run verify	Headless Chrome DevTools Protocol check against a built dist/, plus a screenshots/gallery.png screenshot — zero extra dependencies, see scripts/verify.mjs
npm run bones	Rebuild the probes and capture every Bones sheet through Browserless
npm run bones:check	Fail when capture output is stale or loaded/Bones geometry and parent frames differ
npm run verify:dist	Build and verify through the installed package instead of sibling source
npm start	Serve dist/ for production — scripts/serve.mjs, binds 0.0.0.0:$PORT

Requires Node >=22.12 (pinned in package.json#engines and in nixpacks.toml).

How it resolves icu-ui-kit

vite.config.ts aliases icu-ui-kit/preact, icu-ui-kit/core, icu-ui-kit/styles.css and every icu-ui-kit/styles/*.css subpath straight onto the sibling working tree (../icu-ui-kit/src) when it's present — so local development always exercises whatever is currently on disk in that checkout, not a stale installed copy. Set ICU_KIT=dist to force resolution through the installed package instead (what a deploy does, since a deploy clones this repo alone and the sibling doesn't exist).

Deploying

nixpacks.toml pins the Node version, runs npm ci (never npm install — the lockfile is the point of a reproducible build) and starts the container with scripts/serve.mjs. See that file's own header for why a hand-rolled static server beats a serve/express dependency here, and why it must bind 0.0.0.0 rather than localhost.

License

MIT — see LICENSE.