visual upgrade

README.md

@@ -9,12 +9,14 @@ generic AI-generated template.
 
 ## What's inside
 
-- **Design tokens + Tailwind preset** — warm gold/dark brand, radius/shadow/motion scales, CSS-variable theming (dark default, `.light` opt-in), Montserrat / Open Sans / JetBrains Mono.
+- **Generated design tokens + Tailwind preset** — accessible dark/light palettes, semantic foregrounds, radius/shadow/motion scales, and a parity check that prevents CSS/TypeScript drift.
+- **Theme runtime + optional self-hosted fonts** — persisted dark/light/system mode, a no-flash script, and Latin variable-font delivery.
 - **`cn()`** helper (clsx + tailwind-merge) — the standard everywhere.
-- **Primitives** — Button, Card, Input, Badge, Dialog, DropdownMenu, Table, Toaster (sonner). Radix-backed, accessible, pre-themed.
+- **Primitives** — Button, Card, FormField, Input, Select, Checkbox, Switch, Tabs, Tooltip, Badge, Dialog, DropdownMenu, Table, Pagination, Skeleton, and Toaster. Radix-backed, accessible, pre-themed.
 - **Motion** — `FadeIn`, `Stagger` (framer/`motion`, reduced-motion aware).
 - **Animated** — `AnimatedNumber` (count-up stats), `SpotlightCard` (cursor glow).
-- **Blocks** — `AppShell` (sidebar + topbar), `CommandPalette` (⌘K), `Hero`, `FeatureGrid`, `Pricing`.
+- **Blocks** — responsive `AppShell` (desktop sidebar + mobile drawer), `CommandPalette` (⌘K), `Hero`, `FeatureGrid`, `Pricing`.
+- **Living showcase** — executable coverage of themes, states, product UI, and marketing blocks.
 - **Impeccable** wired in — `DESIGN.md` / `PRODUCT.md` design context, config, and a CI anti-slop detector.
 
 ## Install (in a consuming app)
@@ -51,34 +53,48 @@ module.exports = {
 import "@jason/ui-kit/styles.css";
 ```
 
+Load the branded variable fonts as an opt-in asset:
+
+```ts
+import "@jason/ui-kit/fonts.css";
+import "@jason/ui-kit/styles.css";
+```
+
 ### Use it
 
 ```tsx
-import { Button, Card, CardHeader, CardTitle, Hero, AnimatedNumber, Toaster, toast } from "@jason/ui-kit";
+import {
+  Button, FormField, Input, ThemeProvider, ThemeScript, Toaster
+} from "@jason/ui-kit";
 
-<Hero
-  eyebrow="New"
-  title="Ship tools that look designed"
-  subtitle="One brand system across every app."
-  primaryCta={{ label: "Get started", href: "/signup" }}
-  secondaryCta={{ label: "Docs", href: "/docs" }}
-/>
+<ThemeScript />
+<ThemeProvider>
+  <FormField label="Workspace name" description="Shown in navigation.">
+    <Input />
+  </FormField>
+  <Button>Save</Button>
+  <Toaster />
+</ThemeProvider>
 ```
 
 ## Develop
 
 ```bash
-npm install
+npm ci
 npm run dev          # tsup watch build
-npm run typecheck
-npm run design:detect   # run the Impeccable anti-slop detector on src/
+npm run demo         # root demo.html using the real kit components
+npm run showcase     # living component review surface
+npm run check        # tokens, types, tests, builds, and design detector
 ```
 
+The portable project entry is [`demo.html`](./demo.html). Open
+`http://localhost:5173/demo.html` after running `npm run demo`.
+
 ## Publish a new version
 
 ```bash
 npm version patch      # or minor / major
-npm publish            # builds via prepublishOnly, pushes to Gitea registry
+npm publish            # builds via prepare, pushes to Gitea registry
 ```
 
 ## Extending with 21st.dev