wimui 0.3.0 → 0.4.0

package/dist/llms-full.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.3.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.4.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 
@@ -71,6 +71,528 @@ Single components are judged by state/a11y/token compliance. **Composed screens*
 7. Give demo content real substance (product-context copy, internally consistent numbers/dates/names — active ≤ total, dates not evenly spaced).
 8. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
 
+## Recipes — copy-paste starting points
+
+### 1. Required setup (the contract)
+
+Without `styles.css` nothing is styled — this is the one step Storybook hides from you. Import it once at the app entry, wrap the tree in `WimProvider`, then build screens inside.
+
+```tsx
+// main.tsx — app entry
+import { createRoot } from "react-dom/client";
+import "wimui/styles.css"; // REQUIRED: design tokens + component styles
+import "wimui/reset.css";  // optional base reset
+import { WimProvider } from "wimui";
+import { App } from "./App";
+
+// theme: "light" | "dark" | "system" (default). density: "comfortable" | "compact".
+createRoot(document.getElementById("root")!).render(
+  <WimProvider theme="system" density="comfortable">
+    <App />
+  </WimProvider>,
+);
+```
+
+```tsx
+// App.tsx — app frame. AppShell wires header/sidebar; page content is children.
+import { AppShell, Header, Sidebar, Stack, Title, Text, Button } from "wimui";
+
+export function App() {
+  return (
+    <AppShell
+      header={<Header sticky bordered><Title tag="h1" size="md">Larkfield</Title></Header>}
+      sidebar={
+        <Sidebar width={240}>
+          <Stack gap="2xs" p="md">
+            <Button variant="ghost" justify="start" fullWidth>Overview</Button>
+            <Button variant="ghost" justify="start" fullWidth>Customers</Button>
+            <Button variant="ghost" justify="start" fullWidth>Settings</Button>
+          </Stack>
+        </Sidebar>
+      }
+    >
+      <Stack gap="lg">
+        <Title tag="h2" size="lg">Overview</Title>
+        <Text color="secondary">Spacing/size/color come from --wim-* tokens via props — never hardcode px/hex.</Text>
+      </Stack>
+    </AppShell>
+  );
+}
+```
+
+### 2. A composed content screen
+
+One protagonist (the KPI row), a dense table below, tokens via props, jagged real data, and one deliberately incomplete row. Note the compound components (`Stats.Value`, `Table.Head`) and that `Grid` uses `cols` (not `columns`).
+
+```tsx
+import { Stack, Grid, Card, Stats, Table, Badge, Title, Text } from "wimui";
+
+const rows = [
+  { id: "in_9f2a", name: "Marisol Okonkwo", plan: "Scale", amount: "$4,610.50", status: "paid" },
+  { id: "in_7b41", name: "Dmitri Sørensen", plan: "Enterprise", amount: "$12,199.00", status: "failed" },
+  { id: "in_2a90", name: "Thomas O'Reilly", plan: null, amount: "$89.00", status: "pending" }, // incomplete row
+];
+const intent = { paid: "success", failed: "danger", pending: undefined } as const;
+
+export function BillingOverview() {
+  return (
+    <Stack gap="lg">
+      <Title tag="h2" size="lg">Billing</Title>
+
+      {/* Protagonist: KPI row. Uneven content per tile — not three clones. */}
+      <Grid cols={{ base: 1, sm: 2, lg: 3 }} gap="md">
+        <Stats><Stats.Label>MRR</Stats.Label><Stats.Value>$48,210</Stats.Value><Stats.Trend>+6.4%</Stats.Trend></Stats>
+        <Stats><Stats.Label>Active workspaces</Stats.Label><Stats.Value>1,204</Stats.Value><Stats.Description>176 idle over 30 days</Stats.Description></Stats>
+        <Stats><Stats.Label>Failed webhooks</Stats.Label><Stats.Value>137</Stats.Value><Stats.Trend>+23 today</Stats.Trend></Stats>
+      </Grid>
+
+      {/* Dense data region */}
+      <Card padding="none">
+        <Table hoverable fullWidth>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Customer</Table.Head><Table.Head>Plan</Table.Head>
+              <Table.Head>Amount</Table.Head><Table.Head>Status</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {rows.map((r) => (
+              <Table.Row key={r.id}>
+                <Table.Cell>{r.name}</Table.Cell>
+                <Table.Cell>{r.plan ?? <Text color="tertiary">—</Text>}</Table.Cell>
+                <Table.Cell>{r.amount}</Table.Cell>
+                <Table.Cell><Badge variant="subtle" intent={intent[r.status]}>{r.status}</Badge></Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Card>
+    </Stack>
+  );
+}
+```
+
+### 3. Auth — sign-in screen
+
+A focused single-protagonist screen: one centered card, a left-aligned form. Not the generic badge→heading→two-buttons hero. Real product context in the copy.
+
+```tsx
+import { Center, Card, Stack, Group, Title, Text, Input, PasswordInput, Checkbox, Button, Link } from "wimui";
+
+export function SignIn() {
+  return (
+    <Center h="100dvh" p="lg">
+      <Card padding="lg" style={{ width: "min(380px, 100%)" }}>
+        <Stack gap="lg">
+          <Stack gap="2xs">
+            <Title tag="h1" size="lg">Sign in to Larkfield</Title>
+            <Text color="secondary">Use your work email — SSO is enabled for Enterprise workspaces.</Text>
+          </Stack>
+          <form onSubmit={(e) => e.preventDefault()}>
+            <Stack gap="md">
+              <Input label="Work email" type="email" placeholder="you@company.com" fullWidth />
+              <PasswordInput label="Password" fullWidth />
+              <Group justify="between" align="center">
+                <Checkbox>Keep me signed in</Checkbox>
+                <Link href="#" priority="secondary">Forgot password?</Link>
+              </Group>
+              <Button type="submit" variant="solid" fullWidth>Sign in</Button>
+            </Stack>
+          </form>
+          <Text size="sm" color="tertiary">No account? <Link href="#">Start a 14-day trial</Link></Text>
+        </Stack>
+      </Card>
+    </Center>
+  );
+}
+```
+
+### 4. Settings — sectioned form
+
+Dense label-left / control-right rows grouped in one card, separated by `Divider`. Density comes from token gaps, not hardcoded spacing. Actions right-aligned at the bottom.
+
+```tsx
+import { Stack, Group, Title, Text, Card, Divider, Select, Switch, Button } from "wimui";
+
+export function NotificationSettings() {
+  return (
+    <Stack gap="lg" style={{ maxWidth: 720 }}>
+      <Stack gap="2xs">
+        <Title tag="h1" size="lg">Notifications</Title>
+        <Text color="secondary">Control what Larkfield emails you about. Changes apply immediately.</Text>
+      </Stack>
+
+      <Card padding="lg">
+        <Stack gap="md">
+          <SettingRow label="Deliverability alerts" hint="Bounce-rate spikes and blocklist hits.">
+            <Switch defaultChecked />
+          </SettingRow>
+          <Divider />
+          <SettingRow label="Weekly summary" hint="Every Monday, 09:00 in your timezone.">
+            <Switch />
+          </SettingRow>
+          <Divider />
+          <SettingRow label="Digest timezone">
+            <Select
+              aria-label="Digest timezone"
+              value="jst"
+              options={[
+                { label: "Asia/Tokyo (JST)", value: "jst" },
+                { label: "Europe/Berlin (CET)", value: "cet" },
+                { label: "UTC", value: "utc" },
+              ]}
+            />
+          </SettingRow>
+        </Stack>
+      </Card>
+
+      <Group justify="end" gap="sm">
+        <Button variant="ghost">Reset</Button>
+        <Button variant="solid">Save changes</Button>
+      </Group>
+    </Stack>
+  );
+}
+
+// Local helper: label-left / control-right row. One protagonist per row = the control.
+function SettingRow({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
+  return (
+    <Group justify="between" align="center" gap="md">
+      <Stack gap="3xs">
+        <Text weight="medium">{label}</Text>
+        {hint ? <Text size="sm" color="secondary">{hint}</Text> : null}
+      </Stack>
+      {children}
+    </Group>
+  );
+}
+```
+
+### 5. Empty state — a real zero state, not a shrug
+
+One protagonist (the primary action), calm copy that says *why* it's empty and what happens next. Reuse the `EmptyState` component instead of hand-rolling centered divs.
+
+```tsx
+import { Center, EmptyState, Button } from "wimui";
+import { DocumentIcon } from "wimui/icons";
+
+export function NoInvoices() {
+  return (
+    <Center h="60dvh" p="lg">
+      <EmptyState
+        icon={<DocumentIcon />}
+        title="No invoices yet"
+        description="Invoices show up here after your first billing cycle closes. Nothing is due today."
+        extra={<Button variant="solid">Create a manual invoice</Button>}
+      />
+    </Center>
+  );
+}
+```
+
+### 6. Filtered data table — toolbar + table
+
+A search/filter toolbar as the sparse region above a dense table. Filtering is client-side here; swap in your query. Note the deliberately jagged data: a failed row, a member with no team (incomplete), and a long name.
+
+```tsx
+import { Stack, Group, SearchInput, Select, Table, Badge, Text } from "wimui";
+import { useMemo, useState } from "react";
+
+const members = [
+  { id: "u_1", name: "Marisol Okonkwo", team: "Growth", role: "admin", status: "active" },
+  { id: "u_2", name: "Dmitri Sørensen", team: "Platform", role: "member", status: "invited" },
+  { id: "u_3", name: "Aleksandra Wiśniewska-Nowak", team: null, role: "member", status: "active" }, // no team
+  { id: "u_4", name: "Thomas O'Reilly", team: "Growth", role: "member", status: "suspended" }, // non-happy path
+];
+const roleIntent = { admin: "primary", member: undefined } as const;
+const statusIntent = { active: "success", invited: undefined, suspended: "danger" } as const;
+
+export function MembersTable() {
+  const [q, setQ] = useState("");
+  const [role, setRole] = useState("all");
+
+  const rows = useMemo(
+    () =>
+      members.filter(
+        (m) =>
+          (role === "all" || m.role === role) &&
+          m.name.toLowerCase().includes(q.trim().toLowerCase()),
+      ),
+    [q, role],
+  );
+
+  return (
+    <Stack gap="md">
+      {/* Sparse toolbar */}
+      <Group justify="between" align="center" gap="md">
+        <SearchInput
+          placeholder="Search members"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          allowClear
+          width={280}
+        />
+        <Select
+          aria-label="Filter by role"
+          value={role}
+          onChange={setRole}
+          options={[
+            { label: "All roles", value: "all" },
+            { label: "Admins", value: "admin" },
+            { label: "Members", value: "member" },
+          ]}
+        />
+      </Group>
+
+      {/* Dense data region */}
+      <Table hoverable fullWidth>
+        <Table.Header>
+          <Table.Row>
+            <Table.Head>Member</Table.Head><Table.Head>Team</Table.Head>
+            <Table.Head>Role</Table.Head><Table.Head>Status</Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {rows.map((m) => (
+            <Table.Row key={m.id}>
+              <Table.Cell>{m.name}</Table.Cell>
+              <Table.Cell>{m.team ?? <Text color="tertiary">No team</Text>}</Table.Cell>
+              <Table.Cell><Badge variant="subtle" intent={roleIntent[m.role]}>{m.role}</Badge></Table.Cell>
+              <Table.Cell><Badge variant="subtle" intent={statusIntent[m.status]}>{m.status}</Badge></Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </Stack>
+  );
+}
+```
+
+### 7. Onboarding — a stepper flow
+
+The `Stepper` shows where you are; the card is the single focused task for the current step. Starts mid-flow (step 1) so it reads like a real session, not a fresh render.
+
+```tsx
+import { Stack, Card, Stepper, Title, Text, Group, Button, Input } from "wimui";
+import { useState } from "react";
+
+const steps = [
+  { title: "Account", description: "Your details" },
+  { title: "Workspace", description: "Name & URL" },
+  { title: "Invite", description: "Optional" },
+];
+
+export function Onboarding() {
+  const [current, setCurrent] = useState(1); // mid-flow
+  const back = () => setCurrent((c) => Math.max(0, c - 1));
+  const next = () => setCurrent((c) => Math.min(steps.length - 1, c + 1));
+
+  return (
+    <Stack gap="lg" style={{ maxWidth: 640 }}>
+      <Stepper steps={steps} current={current} onChange={setCurrent} />
+
+      <Card padding="lg">
+        <Stack gap="md">
+          <Stack gap="2xs">
+            <Title tag="h2" size="md">Name your workspace</Title>
+            <Text color="secondary">You can change this later in Settings — existing links keep working.</Text>
+          </Stack>
+          <Input label="Workspace name" placeholder="Acme Inc." fullWidth />
+        </Stack>
+      </Card>
+
+      <Group justify="between" align="center">
+        <Button variant="ghost" onClick={back} disabled={current === 0}>Back</Button>
+        <Button variant="solid" onClick={next}>Continue</Button>
+      </Group>
+    </Stack>
+  );
+}
+```
+
+## Idioms — per-category minimal combinations
+
+Smaller than the full-screen recipes above: the canonical way to wire one
+category together. Same rules apply (tokens via props, real copy, show a
+non-happy-path state).
+
+### Form — field + validation + submit
+
+The field owns its own label and error: pass `error` a **string** to render the message and the danger state together. No wrapper component needed.
+
+```tsx
+import { Stack, Input, Textarea, Button } from "wimui";
+import { useState } from "react";
+
+export function ContactForm() {
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState<string>();
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(email.includes("@") ? undefined : "Enter a valid work email.");
+  }
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <Stack gap="md" style={{ maxWidth: 420 }}>
+        <Input
+          label="Work email"
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          error={error}          // string → message + danger intent
+          fullWidth
+        />
+        <Textarea label="What do you need help with?" fullWidth />
+        <Button type="submit" variant="solid">Send</Button>
+      </Stack>
+    </form>
+  );
+}
+```
+
+### Navigation — sidebar (desktop) ⇄ tab bar (mobile)
+
+Same destinations, two shells. `AppShell` takes a `sidebar` for wide viewports; `TabBar` (fixed, bottom) is the mobile equivalent — show/hide each with your breakpoint CSS. Active state is data, not duplicated markup.
+
+```tsx
+import { AppShell, Sidebar, Stack, Button, TabBar } from "wimui";
+import { HomeIcon, UserIcon, SettingsIcon } from "wimui/icons";
+
+const nav = [
+  { id: "home", label: "Home", icon: <HomeIcon /> },
+  { id: "people", label: "People", icon: <UserIcon /> },
+  { id: "settings", label: "Settings", icon: <SettingsIcon /> },
+];
+
+export function Shell({
+  tab,
+  onTab,
+  children,
+}: {
+  tab: string;
+  onTab: (id: string) => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar width={240}>
+          <Stack gap="2xs" p="md">
+            {nav.map((n) => (
+              <Button
+                key={n.id}
+                variant={tab === n.id ? "solid" : "ghost"}
+                justify="start"
+                icon={n.icon}
+                fullWidth
+                onClick={() => onTab(n.id)}
+              >
+                {n.label}
+              </Button>
+            ))}
+          </Stack>
+        </Sidebar>
+      }
+    >
+      {children}
+      {/* Mobile: same destinations as a fixed bottom bar */}
+      <TabBar>
+        {nav.map((n) => (
+          <TabBar.Item
+            key={n.id}
+            active={tab === n.id}
+            icon={n.icon}
+            label={n.label}
+            onClick={() => onTab(n.id)}
+          />
+        ))}
+      </TabBar>
+    </AppShell>
+  );
+}
+```
+
+### Feedback — persistent Alert vs. transient toast
+
+Use an inline `Alert` for state that stays true (a limit, an outage); use a toast (`useToast().show`) for a one-off confirmation. Wrap the app once in `ToastProvider`.
+
+```tsx
+import { ToastProvider, useToast, Alert, Button, Stack } from "wimui";
+
+// once, at the app root
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <ToastProvider position="top-right">{children}</ToastProvider>;
+}
+
+export function InvitePanel() {
+  const { show } = useToast();
+  return (
+    <Stack gap="md" style={{ maxWidth: 480 }}>
+      <Alert
+        intent="warning"
+        title="Seat limit reached"
+        description="Your plan includes 5 seats. Remove a member or upgrade to invite more."
+      />
+      <Button
+        variant="solid"
+        onClick={() =>
+          show({
+            intent: "success",
+            title: "Invitation sent",
+            description: "We emailed marisol@okonkwo.dev.",
+          })
+        }
+      >
+        Resend invite
+      </Button>
+    </Stack>
+  );
+}
+```
+
+### Overlay — Dialog wrapping a form
+
+`Dialog` is compound: a `DialogTrigger asChild` around your own button, and `DialogClose asChild` around the cancel action so it dismisses without wiring state. Keep the form inside `DialogContent`.
+
+```tsx
+import {
+  Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle,
+  DialogDescription, DialogFooter, DialogClose, Button, Stack, Input,
+} from "wimui";
+
+export function RenameWorkspace() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Rename workspace</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Rename workspace</DialogTitle>
+          <DialogDescription>
+            This changes the URL. Existing links keep working via a redirect.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={(e) => e.preventDefault()}>
+          <Stack gap="md" p="md">
+            <Input label="Workspace name" defaultValue="Larkfield" fullWidth />
+          </Stack>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="ghost">Cancel</Button>
+            </DialogClose>
+            <Button type="submit" variant="solid">Save</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
 ## Components
 
 ### layout — `import { … } from "wimui/layout"`
@@ -237,6 +759,7 @@ The container-query wrapper div is preserved to maintain responsive column behav
     - `transparent: boolean` — Whether the navbar background is transparent
     - `glass: boolean` — Whether to apply the frosted-glass effect
     - `bordered: boolean` — Whether to show a bottom border
+    - `fluid: boolean` — Expand content to full width (disable the centered max-width container)
     - `defaultMenuOpen: boolean` = false — Initial open state of the mobile menu (uncontrolled)
     - `isMenuOpen: boolean` — Open state of the mobile menu (controlled)
     - `onMenuOpenChange: (isOpen: boolean) => void` — Callback when the mobile menu open state changes

package/dist/llms.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.3.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.4.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 
@@ -71,6 +71,108 @@ Single components are judged by state/a11y/token compliance. **Composed screens*
 7. Give demo content real substance (product-context copy, internally consistent numbers/dates/names — active ≤ total, dates not evenly spaced).
 8. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
 
+## Recipes — copy-paste starting points
+
+### 1. Required setup (the contract)
+
+Without `styles.css` nothing is styled — this is the one step Storybook hides from you. Import it once at the app entry, wrap the tree in `WimProvider`, then build screens inside.
+
+```tsx
+// main.tsx — app entry
+import { createRoot } from "react-dom/client";
+import "wimui/styles.css"; // REQUIRED: design tokens + component styles
+import "wimui/reset.css";  // optional base reset
+import { WimProvider } from "wimui";
+import { App } from "./App";
+
+// theme: "light" | "dark" | "system" (default). density: "comfortable" | "compact".
+createRoot(document.getElementById("root")!).render(
+  <WimProvider theme="system" density="comfortable">
+    <App />
+  </WimProvider>,
+);
+```
+
+```tsx
+// App.tsx — app frame. AppShell wires header/sidebar; page content is children.
+import { AppShell, Header, Sidebar, Stack, Title, Text, Button } from "wimui";
+
+export function App() {
+  return (
+    <AppShell
+      header={<Header sticky bordered><Title tag="h1" size="md">Larkfield</Title></Header>}
+      sidebar={
+        <Sidebar width={240}>
+          <Stack gap="2xs" p="md">
+            <Button variant="ghost" justify="start" fullWidth>Overview</Button>
+            <Button variant="ghost" justify="start" fullWidth>Customers</Button>
+            <Button variant="ghost" justify="start" fullWidth>Settings</Button>
+          </Stack>
+        </Sidebar>
+      }
+    >
+      <Stack gap="lg">
+        <Title tag="h2" size="lg">Overview</Title>
+        <Text color="secondary">Spacing/size/color come from --wim-* tokens via props — never hardcode px/hex.</Text>
+      </Stack>
+    </AppShell>
+  );
+}
+```
+
+### 2. A composed content screen
+
+One protagonist (the KPI row), a dense table below, tokens via props, jagged real data, and one deliberately incomplete row. Note the compound components (`Stats.Value`, `Table.Head`) and that `Grid` uses `cols` (not `columns`).
+
+```tsx
+import { Stack, Grid, Card, Stats, Table, Badge, Title, Text } from "wimui";
+
+const rows = [
+  { id: "in_9f2a", name: "Marisol Okonkwo", plan: "Scale", amount: "$4,610.50", status: "paid" },
+  { id: "in_7b41", name: "Dmitri Sørensen", plan: "Enterprise", amount: "$12,199.00", status: "failed" },
+  { id: "in_2a90", name: "Thomas O'Reilly", plan: null, amount: "$89.00", status: "pending" }, // incomplete row
+];
+const intent = { paid: "success", failed: "danger", pending: undefined } as const;
+
+export function BillingOverview() {
+  return (
+    <Stack gap="lg">
+      <Title tag="h2" size="lg">Billing</Title>
+
+      {/* Protagonist: KPI row. Uneven content per tile — not three clones. */}
+      <Grid cols={{ base: 1, sm: 2, lg: 3 }} gap="md">
+        <Stats><Stats.Label>MRR</Stats.Label><Stats.Value>$48,210</Stats.Value><Stats.Trend>+6.4%</Stats.Trend></Stats>
+        <Stats><Stats.Label>Active workspaces</Stats.Label><Stats.Value>1,204</Stats.Value><Stats.Description>176 idle over 30 days</Stats.Description></Stats>
+        <Stats><Stats.Label>Failed webhooks</Stats.Label><Stats.Value>137</Stats.Value><Stats.Trend>+23 today</Stats.Trend></Stats>
+      </Grid>
+
+      {/* Dense data region */}
+      <Card padding="none">
+        <Table hoverable fullWidth>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Customer</Table.Head><Table.Head>Plan</Table.Head>
+              <Table.Head>Amount</Table.Head><Table.Head>Status</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {rows.map((r) => (
+              <Table.Row key={r.id}>
+                <Table.Cell>{r.name}</Table.Cell>
+                <Table.Cell>{r.plan ?? <Text color="tertiary">—</Text>}</Table.Cell>
+                <Table.Cell>{r.amount}</Table.Cell>
+                <Table.Cell><Badge variant="subtle" intent={intent[r.status]}>{r.status}</Badge></Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Card>
+    </Stack>
+  );
+}
+```
+
+> More verified full-screen recipes (auth sign-in, settings form, empty state, filtered data table, onboarding) and per-category idioms (form, navigation, feedback, overlay) are in `llms-full.txt`.
 ## Components
 
 ### layout — `import { … } from "wimui/layout"`

package/dist/preset.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("./tokens/generated/presets.cjs");var t=`data-wim-preset`,n=new Set(e.WIM_PRESETS.map(e=>e.name));function r(e=void 0){if(typeof document>`u`)return`none`;let r=(e??document.documentElement).getAttribute?.(t);return r&&n.has(r)?r:`none`}function i(e,r=void 0){if(typeof document>`u`)return;let i=r??document.documentElement;e===`none`||!n.has(e)?i.removeAttribute(t):i.setAttribute(t,e)}exports.WIM_PRESETS=e.WIM_PRESETS,exports.getWimPreset=r,exports.setWimPreset=i;

package/dist/preset.d.ts

@@ -0,0 +1,11 @@
+import { WIM_PRESETS, WimPresetName } from './tokens/generated/presets';
+export { WIM_PRESETS };
+export type { WimPresetName };
+/** A preset name, or `none` for the default (no preset). */
+export type WimPreset = WimPresetName | "none";
+export declare function getWimPreset(root?: ParentNode | null | undefined): WimPreset;
+/**
+ * Apply a preset to an element (defaults to `document.documentElement`).
+ * `none` (or an unknown name) removes the attribute.
+ */
+export declare function setWimPreset(preset: WimPreset, root?: Element | null | undefined): void;