feat: htmx derivation home page 1:1 from react

htmx-demo/README.md

@@ -0,0 +1,35 @@
+# HTMX Showcase — Validation Harness
+
+Parallel to `app/page.tsx` (the React showcase), `public/htmx.html` is a plain HTML page that exercises the generated `dist/greyhaven.htmx.css` across every static component. Load it while running `pnpm dev` at `/htmx.html`.
+
+## Purpose
+
+Validate that `greyhaven.htmx.css` produces visually-equivalent output to the React components. The HTMX page only uses:
+- `data-slot` / `data-variant` / `data-size` attributes
+- Standard HTML tags (`<button>`, `<span>`, `<input>`, `<div>`)
+- Inline SVGs for icons (no lucide-react)
+
+No React, no JavaScript (apart from the theme toggle).
+
+## Build
+
+```bash
+pnpm htmx-css:build      # Regenerate dist/greyhaven.htmx.css from components/ui/*.tsx
+pnpm htmx-demo:build     # Compile htmx-demo/input.css + tokens + htmx.css → public/htmx.css
+pnpm dev                 # Serves /htmx.html at http://localhost:3000/htmx.html
+```
+
+## What's covered
+
+- Typography (H1/H2/H3 + body + UI label)
+- Button — variants (6), sizes (3), states (5), icon sizes (3)
+- Badge — core (4), tag/value (2), semantic (4), channel pills (5), on-muted-surface (6)
+- Input + Textarea (default / with value / disabled) + Label
+- Card (simple + with header/action/content/footer)
+- Alert (default + destructive)
+- Separator, Progress, Skeleton, Kbd
+
+## What's intentionally out of scope
+
+- Interactive components (Dialog, Dropdown, Popover, Select, Combobox, Accordion, Tabs, Tooltip) — their CSS rules exist in `greyhaven.htmx.css` but require Alpine.js or HTMX swap patterns for open/close state. Validate those in a separate runtime-integration test.
+- Form Control primitives with JS state (Checkbox, Switch, RadioGroup, Slider) — Radix renders these with bespoke markup the CSS targets via `data-state=checked`. Native `<input type="checkbox">` won't match without additional bridging.