@vibes.diy/prompts 14.3.59 → 14.3.65

package/themes/looks/pouf/brief.md

@@ -0,0 +1,144 @@
+The pouf look is a room full of cushions. The whole room is already built: `@vibes.diy/pouf` ships every surface, control and layout this look needs, each one carrying the cushion recipe, the corner, the ink and the press. An app on this look is composed from those components and their props, and the room's colours arrive through them, so a palette change restyles the app without a line of it changing.
+
+## Composition
+
+One view does one job. Let everything on screen serve it; a second job gets its own view, tab or sheet. Content lives on cushions: a group of related things sits in a `Card`, a list is one `RowCard` per item, a headline number is a `Stat`, an empty list is an `Empty`, and the closing ask on a page is a `CTA`. Those are the only raised surfaces. A cushion is never hand-made out of a bordered `div`; if something needs to float, it is a `Card`.
+
+Every view has exactly one lead: the single element wearing `tone="purple"`, usually the primary `Button`. Everything else steps back. Most tone-taking components default to the lead — `Button`, `Badge`, `Dot`, `Blob`, `Avatar`, `Progress`, `CTA`, `NavLink`, `ToggleGroup`, chart series — so set `tone` explicitly on every badge, dot, blob, avatar, bar and status mark, and leave the default only on the one lead. A second button takes `variant="quiet"` or a meaning tone (`down` for delete). Three components default to an untaught tone and always get one: `Tabs` and `Segmented` take `tone="info"`, `Highlight` takes `tone="orange"`. `Confirm` defaults to the decorative fill, so a destructive ask passes `tone="down"`.
+
+Open a view with a `Heading level={1}`, then the job; each section gets a `Heading level={2}`, and every run of words is `Text`, `muted` for metadata such as a timestamp.
+
+## Layout
+
+Placement is a layout primitive, never a utility class. `Stack` stacks children vertically with an even `gap`; `Row` lays them side by side with `gap`, `align`, `justify` and `wrap`, and a `Spacer` inside a `Row` pushes what follows to the far end. `Grid` places cards in two, three or four columns, or main plus side with `cols="sidebar"`, and stacks them on a phone by itself. An app with several sections wears a `Shell` with a `Sidebar` of `NavLink`s beside the main column, and a `BottomNav` on a phone. When a primitive cannot express the placement, a plain wrapping `div` carries the spacing, never the component.
+
+The gap scale runs from `1` to `6`: `gap={3}` between the parts of a card, `gap={5}` or `gap={6}` between sections. Give the page air; cushions never touch.
+
+## Tones
+
+A tone names a meaning, not a colour. Choose it by what the thing says:
+
+- `up` — good, done, saved, growing.
+- `down` — bad, failed, destructive: delete, remove, over budget.
+- `warn` — needs attention soon: due today, running low.
+- `info` — a neutral notice: a tip, a count, a status with no verdict.
+- `idle` — quiet and passive: paused, archived, not started.
+- `purple` — this room's lead colour, whatever its hue. It marks the one call to action in a view.
+- `orange` — the decorative fill, for ornament only: a `Highlight` on one word, a `Blob` that fronts a feature. Never a verdict.
+
+Tone names are slot names, not hues. In another room `purple` may paint teal and `up` may paint blue; the meaning holds while the colour moves, which is why an app never reasons about the hue it will get.
+
+## Components
+
+Every control below exists; use it instead of a hand-built element.
+
+<!-- pouf-catalog:start -->
+
+- `AlertBell` (`@vibes.diy/pouf`) — A bell button with an unread count that opens the session's alert history. Props: `alerts` (required) AlertBellItem[]; `unread` (required) number; `connected` (required); `onOpen` (required) () => void
+- `Badge` (`@vibes.diy/pouf`) — A small tonal label for a count, category or state. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Blob` (`@vibes.diy/pouf`) — A tonal icon tile that fronts a stat, list row or feature. Props: `icon` (required) IconLike; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg
+- `Breadcrumb` (`@vibes.diy/pouf`) — Shows where the current page sits in a hierarchy, with links back up. Props: `items` (required) BreadcrumbItem[]
+- `Button` (`@vibes.diy/pouf`) — The action button; give one primary action per area. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg; `variant` solid|quiet; `block`; `disabled`; `loading`; `type` button|submit
+- `CTA` (`@vibes.diy/pouf`) — A call-to-action banner: a big tonal cushion with a headline and an action. Props: `title` (required) string; `action` (required) ReactNode; `tone` purple (lead)|pink|blue|mint|yellow|surface
+- `Card` (`@vibes.diy/pouf`) — The raised surface that groups related content into a panel. Props: `variant` default|flush|tight; `motion` none|lift|tilt-left|tilt-right
+- `Dot` (`@vibes.diy/pouf`) — A status dot. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Empty` (`@vibes.diy/pouf`) — The empty state for a list or panel with nothing in it yet. Props: `title` (required) string
+- `ErrorBoundary` (`@vibes.diy/pouf`) — Catches render crashes so one broken part can't blank the whole page. Props: `name` (required) string
+- `ErrorNote` (`@vibes.diy/pouf`) — An inline message that says a request or action failed.
+- `Eyebrow` (`@vibes.diy/pouf`) — A small uppercase label above a section heading.
+- `Field` (`@vibes.diy/pouf`) — Wraps a form control with its label, hint and error text. Props: `label` (required) string; `children` (required) (id: string, describedBy: string | undefined) => ReactNode
+- `Figure` (`@vibes.diy/pouf`) — An image, framed in clay. Props: `src` (required) string; `alt` (required) string; `width` (required) number; `height` (required) number
+- `Footer` (`@vibes.diy/pouf`) — A site footer on one big cushion: brand block plus columns of links, with an optional bottom note. Props: `brand` (required) ReactNode
+- `Freshness` (`@vibes.diy/pouf`) — Speaks only when the data on screen can no longer be trusted. Props: `at` (required) number; `isError`
+- `Grid` (`@vibes.diy/pouf`) — Lays children out in columns, or main plus side, stacking on narrow screens. Props: `cols` 2|3|4|sidebar; `gap` 1|2|3|4|5|6
+- `Heading` (`@vibes.diy/pouf`) — A page or section heading at level 1, 2 or 3. Props: `level` 1|2|3
+- `Highlight` (`@vibes.diy/pouf`) — Puts a tonal swatch behind a word or short phrase to make it pop. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Icon` (`@vibes.diy/pouf`) — A named glyph from the built-in icon set. Props: `name` (required) up|down|warn|info|idle|overview|chart|log|channels|activity|lab|history|performance|settings|database|menu|flat|ok|fail|off|live|draft|target|alerts|add|remove|search|close|expand|prev|next|photo|heart|heart-filled|comment|play|pause|rewind|forward|sun|cloud|rain|star|calendar|clock|user|users|mail|lock|send|home|trophy|flame|sparkle|music|cart|tag|dots|sword|shield|wand|smile|card|pin|wind|drop; `size` sm|md|lg
+- `IconButton` (`@vibes.diy/pouf`) — A square, labelled icon action. Props: `icon` (required) ReactNode; `label` (required) string; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg; `variant` solid|quiet; `disabled`; `loading`; `type` button|submit
+- `Input` (`@vibes.diy/pouf`) — A single-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `inputMode` search|none|email|tel|text|url|numeric|decimal; `spellCheck`; `required`; `mono`; `invalid`; `disabled`; `bare`
+- `Metric` (`@vibes.diy/pouf`) — A labelled readout: small muted label, value beneath. Props: `label` (required) string; `value` (required) ReactNode; `num`; `mono`
+- `ModeBanner` (`@vibes.diy/pouf`) — The draft/live (or any two-mode) indicator. Props: `live` (required)
+- `NavLink` (`@vibes.diy/pouf`) — A navigation link that marks itself active on the current path. Props: `href` (required) string; `currentPath` (required) string; `icon` (required) IconLike; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Navbar` (`@vibes.diy/pouf`) — A top navigation bar on a floating cushion. Props: `brand` (required) ReactNode
+- `NumberInput` (`@vibes.diy/pouf`) — A numeric field with step buttons; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `invalid`; `disabled`
+- `Pagination` (`@vibes.diy/pouf`) — Previous and next page controls with a page indicator for long lists. Props: `page` (required) number; `total` (required) number; `onChange` (required) (page: number) => void
+- `Row` (`@vibes.diy/pouf`) — Lays children out horizontally with a gap, alignment and wrapping. Props: `gap` 1|2|3|4|5|6; `align` center|top; `justify` start|center|between|end; `wrap`
+- `RowCard` (`@vibes.diy/pouf`) — One raised row per item in a list; clickable when given onClick. Props: `selected`
+- `Segmented` (`@vibes.diy/pouf`) — A mutually-exclusive choice: grid vs list, draft vs live, and similar. Props: `value` (required) T; `onChange` (required) (value: T) => void; `options` (required) SegmentedOption<T>[]; `label` (required) string; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Shell` (`@vibes.diy/pouf`) — The page frame: a sidebar column beside the main content.
+- `Sidebar` (`@vibes.diy/pouf`) — The side navigation column inside Shell. Props: `mobile` show|hide
+- `Skeleton` (`@vibes.diy/pouf`) — A loading placeholder shaped like the text, row or card it stands in for. Props: `variant` text|row|card
+- `Spacer` (`@vibes.diy/pouf`) — Pushes the items after it to the far end of a Row.
+- `Stack` (`@vibes.diy/pouf`) — Stacks children vertically with an even gap. Props: `gap` 1|2|3|4|5|6
+- `Stat` (`@vibes.diy/pouf`) — A headline figure on its own cushion. Props: `label` (required) string; `value` (required) string; `icon` (required) IconLike; `tone` (required) up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Status` (`@vibes.diy/pouf`) — A labelled status dot that turns unknown when its reading goes stale. Props: `label` (required) string; `tone` (required) up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Table` (`@vibes.diy/pouf`) — A data table with typed columns; rows can be clickable. Props: `columns` (required) TableColumn<T>[]; `rows` (required) T[]; `getKey` (required) (row: T) => string
+- `Text` (`@vibes.diy/pouf`) — Body text: size, muted, numeric and monospace variants. Props: `size` sm|md; `muted`; `num`; `mono`; `truncate`
+- `Textarea` (`@vibes.diy/pouf`) — A multi-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `spellCheck`; `required`; `mono`; `invalid`; `disabled`
+- `Accordion` (`@vibes.diy/pouf/interactive`) — A stack of expandable sections with one open at a time. Props: `items` (required) AccordionItem[]
+- `AspectRatio` (`@vibes.diy/pouf/interactive`) — Holds media at a fixed width-to-height ratio.
+- `Avatar` (`@vibes.diy/pouf/interactive`) — A person's picture, with initials or an icon when there is none. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg
+- `BottomNav` (`@vibes.diy/pouf/interactive`) — Mobile bottom navigation. Props: `primary` (required) NavItem[]; `groups` (required) NavGroup[]; `currentPath` (required) string
+- `Checkbox` (`@vibes.diy/pouf/interactive`) — A labelled on/off checkbox. Props: `checked` (required) boolean | "indeterminate"; `onChange` (required) (checked: boolean | "indeterminate") => void; `disabled`; `hideLabel`
+- `Collapsible` (`@vibes.diy/pouf/interactive`) — A single section that shows or hides its content from a trigger. Props: `trigger` (required) ReactNode; `open`
+- `Combobox` (`@vibes.diy/pouf/interactive`) — A text field with suggestions: pick from the list or type a new value. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) string[]; `loading`; `mono`
+- `Confirm` (`@vibes.diy/pouf/interactive`) — Asks the person to confirm before an irreversible action such as a delete. Props: `title` (required) string; `body` (required) string; `confirmLabel` (required) string; `cancelLabel` (required) string; `onConfirm` (required) () => void; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `loading`
+- `ContextMenu` (`@vibes.diy/pouf/interactive`) — A menu of actions that opens on right-click or long-press. Props: `items` (required) (MenuEntry | "separator")[]
+- `Dialog` (`@vibes.diy/pouf/interactive`) — A modal window for a focused task or form. Props: `trigger` (required) ReactNode; `title` (required) string; `open`; `size` md|lg
+- `DropdownMenu` (`@vibes.diy/pouf/interactive`) — A menu of actions that opens from a trigger button. Props: `items` (required) ("separator" | MenuItem)[]
+- `HoverCard` (`@vibes.diy/pouf/interactive`) — A preview card that appears on hover over its trigger. Props: `content` (required) ReactNode; `side` top|right|bottom|left; `align` start|center|end
+- `Menubar` (`@vibes.diy/pouf/interactive`) — An application menu bar (File / Edit / View…). Props: `menus` (required) MenubarMenu[]
+- `Progress` (`@vibes.diy/pouf/interactive`) — A progress bar for a value out of a maximum. Props: `value` (required) number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `RadioGroup` (`@vibes.diy/pouf/interactive`) — A labelled set of options where exactly one is chosen. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) RadioOption[]; `label` (required) string; `disabled`
+- `ScrollArea` (`@vibes.diy/pouf/interactive`) — A fixed-height region that scrolls its own content.
+- `Select` (`@vibes.diy/pouf/interactive`) — A dropdown for picking one option from a list. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) SelectOption[]; `disabled`
+- `Separator` (`@vibes.diy/pouf/interactive`) — A thin divider line between groups of content.
+- `Sheet` (`@vibes.diy/pouf/interactive`) — A panel that slides in from the side for secondary tasks. Props: `title` (required) string; `open`
+- `Slider` (`@vibes.diy/pouf/interactive`) — Picks a number in a range by dragging. Props: `value` (required) number[]; `onChange` (required) (value: number[]) => void; `disabled`
+- `Switch` (`@vibes.diy/pouf/interactive`) — A labelled on/off toggle for a setting that applies at once. Props: `checked` (required); `onChange` (required) (checked: boolean) => void; `disabled`
+- `Tabs` (`@vibes.diy/pouf/interactive`) — Switches between panels of content under one heading. Props: `tabs` (required) Tab[]; `value` (required) string; `onChange` (required) (value: string) => void; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Toast` (`@vibes.diy/pouf/interactive`) — One alert message with a severity and a dismiss button. Props: `id` (required) number; `severity` (required) critical|info; `onDismiss` (required) (id: number) => void
+- `ToastViewport` (`@vibes.diy/pouf/interactive`) — Renders a list of alert messages your app keeps in state. Props: `toasts` (required) ToastItem[]; `onDismiss` (required) (id: number) => void
+- `Toaster` (`@vibes.diy/pouf/interactive`) — Mount once in the app so toast() calls appear on screen.
+- `ToggleGroup` (`@vibes.diy/pouf/interactive`) — A row of toggle buttons where several can be on at once. Props: `value` (required) string[]; `onChange` (required) (value: string[]) => void; `options` (required) ToggleOption[]; `label` (required) string; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Tooltip` (`@vibes.diy/pouf/interactive`) — A short hint on hover or focus; needs a TooltipProvider above it. Props: `tip` (required) string
+- `TooltipProvider` (`@vibes.diy/pouf/interactive`) — Wrap the app once; every Tooltip must sit inside it.
+- `AreaChart` (`@vibes.diy/pouf/charts`) — An area chart of one or more series over a category axis. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]; `stacked`
+- `BarChart` (`@vibes.diy/pouf/charts`) — A bar chart of one or more series, optionally stacked. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]; `stacked`
+- `LineChart` (`@vibes.diy/pouf/charts`) — A line chart of one or more series over a category axis. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]
+- `PieChart` (`@vibes.diy/pouf/charts`) — A pie or donut chart of parts of a whole. Props: `data` (required) PieSlice[]; `donut`; `labelled`
+
+<!-- pouf-catalog:end -->
+
+What the lines above leave out:
+
+- `Field` takes a render function as its child and hands it the control's `id` and `describedBy`: `<Field label="Title" hint="Shown on the card">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={title} onChange={setTitle} />}</Field>`. `Select`, `Textarea` and `NumberInput` wire up the same way.
+- `Input`, `Textarea`, `NumberInput`, `Select` and `Combobox` call `onChange` with the new value itself, not an event: `onChange={setTitle}`, never `e.target.value`. `NumberInput` passes its value as a string.
+- `TableColumn<T>` is `{ key, header, render: (row) => node, align?: "left" | "right", mono?, truncate?, sort?: (a, b) => number }`.
+- `SelectOption` is `{ value, label }`, both strings.
+- `ChartSeries` is `{ key, label?, tone? }`: `key` names a field of each `data` row and `dataKey` names the category field; a `PieChart` slice is `{ key, label, value, tone? }`.
+- Toasts: mount `Toaster` once near the root inside the one wrapper that positions the stack, `<div className="pouf-toasts"><Toaster /></div>`, then call `toast("Saved")`, `toast.success(…)` or `toast.error(…)` from anywhere; `toast` is imported from `@vibes.diy/pouf/interactive` beside `Toaster`. A `ToastViewport` for alerts the app keeps in its own state sits inside the same wrapper.
+- No pouf component accepts `className` or `style`. Change one with its props; place it with `Stack`, `Row` or `Grid` (`cols="sidebar"` for main plus side), or a plain wrapping `div`.
+- A person is never a plain element: a person is `useViewer()`'s `<ViewerTag userHandle={...} />` and picking one is its `<HandleInput />`.
+
+## DO
+
+- Give each view one job and build it from cushions: `Card`, `RowCard`, `Stat`, `Empty`, `CTA`.
+- Let exactly one element per view wear `tone="purple"`, and give every other `Button` `variant="quiet"` or a tone that states its meaning.
+- Set `tone` explicitly on every `Badge`, `Dot`, `Blob`, `Avatar`, `Progress`, `Tabs`, `Segmented`, `Highlight` and chart series, and pass `tone="down"` to a `Confirm` that deletes.
+- Place everything with `Stack`, `Row` and `Grid`, using the `gap` prop for air and `Grid cols="sidebar"` for main plus side.
+- Pick each tone by meaning: `up` for done, `down` for destructive, `warn` for needs attention, `info` for a neutral notice, `idle` for quiet.
+- Wrap every form control in a `Field` and pass its `id` and `describedBy` through the render function.
+- Show a `Skeleton` while data loads, an `Empty` when a list has nothing yet and an `ErrorNote` when a request fails.
+- Ask before an irreversible action with `Confirm`, and acknowledge a finished one with `toast`.
+- Render a person with `<ViewerTag userHandle={...} />` and pick one with `<HandleInput />`.
+
+## DON'T
+
+- Do not put `className` or `style` on a pouf component; use its `tone`, `size` and `variant` props or wrap it in a layout primitive.
+- Do not write a hex, rgb or named colour, or an arbitrary colour class such as `bg-[…]`, anywhere in the app.
+- Do not hand-build a `<button>`, a `<select>`, a checkbox, radio or range `<input>`, a modal or an overlay; `Button`, `Select`, `Checkbox`, `RadioGroup`, `Slider`, `Dialog`, `Sheet` and `Confirm` already exist.
+- Do not put two leads in one view: one `tone="purple"` element, and no other component left on its lead-tone default.
+- Do not describe or choose a tone by hue; `up` is a meaning, and `purple` is whatever lead colour the room wears.
+- Do not draw a cushion by hand with borders, rounded corners or shadows on a `div`; reach for `Card` or `RowCard`.
+- Do not write a `:root` block or redefine any `var(--…)` the app already ships.

package/themes/looks/pouf/catalog.generated.d.ts

@@ -0,0 +1,16 @@
+export type PoufEntry = "index" | "interactive" | "charts";
+export declare const POUF_ENTRY_SPECIFIER: Readonly<Record<PoufEntry, string>>;
+export interface PoufCatalogEntry {
+    readonly name: string;
+    readonly entry: PoufEntry;
+    readonly purpose: string;
+    readonly props: readonly {
+        readonly name: string;
+        readonly values?: readonly string[];
+        readonly type?: string;
+        readonly required: boolean;
+    }[];
+}
+export declare const POUF_CATALOG: readonly PoufCatalogEntry[];
+export declare const POUF_COMPONENT_NAMES: Readonly<Record<PoufEntry, readonly string[]>>;
+export declare const POUF_CATALOG_MD = "- `AlertBell` (`@vibes.diy/pouf`) \u2014 A bell button with an unread count that opens the session's alert history. Props: `alerts` (required) AlertBellItem[]; `unread` (required) number; `connected` (required); `onOpen` (required) () => void\n- `Badge` (`@vibes.diy/pouf`) \u2014 A small tonal label for a count, category or state. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Blob` (`@vibes.diy/pouf`) \u2014 A tonal icon tile that fronts a stat, list row or feature. Props: `icon` (required) IconLike; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg\n- `Breadcrumb` (`@vibes.diy/pouf`) \u2014 Shows where the current page sits in a hierarchy, with links back up. Props: `items` (required) BreadcrumbItem[]\n- `Button` (`@vibes.diy/pouf`) \u2014 The action button; give one primary action per area. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg; `variant` solid|quiet; `block`; `disabled`; `loading`; `type` button|submit\n- `CTA` (`@vibes.diy/pouf`) \u2014 A call-to-action banner: a big tonal cushion with a headline and an action. Props: `title` (required) string; `action` (required) ReactNode; `tone` purple (lead)|pink|blue|mint|yellow|surface\n- `Card` (`@vibes.diy/pouf`) \u2014 The raised surface that groups related content into a panel. Props: `variant` default|flush|tight; `motion` none|lift|tilt-left|tilt-right\n- `Dot` (`@vibes.diy/pouf`) \u2014 A status dot. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Empty` (`@vibes.diy/pouf`) \u2014 The empty state for a list or panel with nothing in it yet. Props: `title` (required) string\n- `ErrorBoundary` (`@vibes.diy/pouf`) \u2014 Catches render crashes so one broken part can't blank the whole page. Props: `name` (required) string\n- `ErrorNote` (`@vibes.diy/pouf`) \u2014 An inline message that says a request or action failed.\n- `Eyebrow` (`@vibes.diy/pouf`) \u2014 A small uppercase label above a section heading.\n- `Field` (`@vibes.diy/pouf`) \u2014 Wraps a form control with its label, hint and error text. Props: `label` (required) string; `children` (required) (id: string, describedBy: string | undefined) => ReactNode\n- `Figure` (`@vibes.diy/pouf`) \u2014 An image, framed in clay. Props: `src` (required) string; `alt` (required) string; `width` (required) number; `height` (required) number\n- `Footer` (`@vibes.diy/pouf`) \u2014 A site footer on one big cushion: brand block plus columns of links, with an optional bottom note. Props: `brand` (required) ReactNode\n- `Freshness` (`@vibes.diy/pouf`) \u2014 Speaks only when the data on screen can no longer be trusted. Props: `at` (required) number; `isError`\n- `Grid` (`@vibes.diy/pouf`) \u2014 Lays children out in columns, or main plus side, stacking on narrow screens. Props: `cols` 2|3|4|sidebar; `gap` 1|2|3|4|5|6\n- `Heading` (`@vibes.diy/pouf`) \u2014 A page or section heading at level 1, 2 or 3. Props: `level` 1|2|3\n- `Highlight` (`@vibes.diy/pouf`) \u2014 Puts a tonal swatch behind a word or short phrase to make it pop. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Icon` (`@vibes.diy/pouf`) \u2014 A named glyph from the built-in icon set. Props: `name` (required) up|down|warn|info|idle|overview|chart|log|channels|activity|lab|history|performance|settings|database|menu|flat|ok|fail|off|live|draft|target|alerts|add|remove|search|close|expand|prev|next|photo|heart|heart-filled|comment|play|pause|rewind|forward|sun|cloud|rain|star|calendar|clock|user|users|mail|lock|send|home|trophy|flame|sparkle|music|cart|tag|dots|sword|shield|wand|smile|card|pin|wind|drop; `size` sm|md|lg\n- `IconButton` (`@vibes.diy/pouf`) \u2014 A square, labelled icon action. Props: `icon` (required) ReactNode; `label` (required) string; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg; `variant` solid|quiet; `disabled`; `loading`; `type` button|submit\n- `Input` (`@vibes.diy/pouf`) \u2014 A single-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `inputMode` search|none|email|tel|text|url|numeric|decimal; `spellCheck`; `required`; `mono`; `invalid`; `disabled`; `bare`\n- `Metric` (`@vibes.diy/pouf`) \u2014 A labelled readout: small muted label, value beneath. Props: `label` (required) string; `value` (required) ReactNode; `num`; `mono`\n- `ModeBanner` (`@vibes.diy/pouf`) \u2014 The draft/live (or any two-mode) indicator. Props: `live` (required)\n- `NavLink` (`@vibes.diy/pouf`) \u2014 A navigation link that marks itself active on the current path. Props: `href` (required) string; `currentPath` (required) string; `icon` (required) IconLike; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Navbar` (`@vibes.diy/pouf`) \u2014 A top navigation bar on a floating cushion. Props: `brand` (required) ReactNode\n- `NumberInput` (`@vibes.diy/pouf`) \u2014 A numeric field with step buttons; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `invalid`; `disabled`\n- `Pagination` (`@vibes.diy/pouf`) \u2014 Previous and next page controls with a page indicator for long lists. Props: `page` (required) number; `total` (required) number; `onChange` (required) (page: number) => void\n- `Row` (`@vibes.diy/pouf`) \u2014 Lays children out horizontally with a gap, alignment and wrapping. Props: `gap` 1|2|3|4|5|6; `align` center|top; `justify` start|center|between|end; `wrap`\n- `RowCard` (`@vibes.diy/pouf`) \u2014 One raised row per item in a list; clickable when given onClick. Props: `selected`\n- `Segmented` (`@vibes.diy/pouf`) \u2014 A mutually-exclusive choice: grid vs list, draft vs live, and similar. Props: `value` (required) T; `onChange` (required) (value: T) => void; `options` (required) SegmentedOption<T>[]; `label` (required) string; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Shell` (`@vibes.diy/pouf`) \u2014 The page frame: a sidebar column beside the main content.\n- `Sidebar` (`@vibes.diy/pouf`) \u2014 The side navigation column inside Shell. Props: `mobile` show|hide\n- `Skeleton` (`@vibes.diy/pouf`) \u2014 A loading placeholder shaped like the text, row or card it stands in for. Props: `variant` text|row|card\n- `Spacer` (`@vibes.diy/pouf`) \u2014 Pushes the items after it to the far end of a Row.\n- `Stack` (`@vibes.diy/pouf`) \u2014 Stacks children vertically with an even gap. Props: `gap` 1|2|3|4|5|6\n- `Stat` (`@vibes.diy/pouf`) \u2014 A headline figure on its own cushion. Props: `label` (required) string; `value` (required) string; `icon` (required) IconLike; `tone` (required) up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Status` (`@vibes.diy/pouf`) \u2014 A labelled status dot that turns unknown when its reading goes stale. Props: `label` (required) string; `tone` (required) up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Table` (`@vibes.diy/pouf`) \u2014 A data table with typed columns; rows can be clickable. Props: `columns` (required) TableColumn<T>[]; `rows` (required) T[]; `getKey` (required) (row: T) => string\n- `Text` (`@vibes.diy/pouf`) \u2014 Body text: size, muted, numeric and monospace variants. Props: `size` sm|md; `muted`; `num`; `mono`; `truncate`\n- `Textarea` (`@vibes.diy/pouf`) \u2014 A multi-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `spellCheck`; `required`; `mono`; `invalid`; `disabled`\n- `Accordion` (`@vibes.diy/pouf/interactive`) \u2014 A stack of expandable sections with one open at a time. Props: `items` (required) AccordionItem[]\n- `AspectRatio` (`@vibes.diy/pouf/interactive`) \u2014 Holds media at a fixed width-to-height ratio.\n- `Avatar` (`@vibes.diy/pouf/interactive`) \u2014 A person's picture, with initials or an icon when there is none. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg\n- `BottomNav` (`@vibes.diy/pouf/interactive`) \u2014 Mobile bottom navigation. Props: `primary` (required) NavItem[]; `groups` (required) NavGroup[]; `currentPath` (required) string\n- `Checkbox` (`@vibes.diy/pouf/interactive`) \u2014 A labelled on/off checkbox. Props: `checked` (required) boolean | \"indeterminate\"; `onChange` (required) (checked: boolean | \"indeterminate\") => void; `disabled`; `hideLabel`\n- `Collapsible` (`@vibes.diy/pouf/interactive`) \u2014 A single section that shows or hides its content from a trigger. Props: `trigger` (required) ReactNode; `open`\n- `Combobox` (`@vibes.diy/pouf/interactive`) \u2014 A text field with suggestions: pick from the list or type a new value. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) string[]; `loading`; `mono`\n- `Confirm` (`@vibes.diy/pouf/interactive`) \u2014 Asks the person to confirm before an irreversible action such as a delete. Props: `title` (required) string; `body` (required) string; `confirmLabel` (required) string; `cancelLabel` (required) string; `onConfirm` (required) () => void; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `loading`\n- `ContextMenu` (`@vibes.diy/pouf/interactive`) \u2014 A menu of actions that opens on right-click or long-press. Props: `items` (required) (MenuEntry | \"separator\")[]\n- `Dialog` (`@vibes.diy/pouf/interactive`) \u2014 A modal window for a focused task or form. Props: `trigger` (required) ReactNode; `title` (required) string; `open`; `size` md|lg\n- `DropdownMenu` (`@vibes.diy/pouf/interactive`) \u2014 A menu of actions that opens from a trigger button. Props: `items` (required) (\"separator\" | MenuItem)[]\n- `HoverCard` (`@vibes.diy/pouf/interactive`) \u2014 A preview card that appears on hover over its trigger. Props: `content` (required) ReactNode; `side` top|right|bottom|left; `align` start|center|end\n- `Menubar` (`@vibes.diy/pouf/interactive`) \u2014 An application menu bar (File / Edit / View\u2026). Props: `menus` (required) MenubarMenu[]\n- `Progress` (`@vibes.diy/pouf/interactive`) \u2014 A progress bar for a value out of a maximum. Props: `value` (required) number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `RadioGroup` (`@vibes.diy/pouf/interactive`) \u2014 A labelled set of options where exactly one is chosen. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) RadioOption[]; `label` (required) string; `disabled`\n- `ScrollArea` (`@vibes.diy/pouf/interactive`) \u2014 A fixed-height region that scrolls its own content.\n- `Select` (`@vibes.diy/pouf/interactive`) \u2014 A dropdown for picking one option from a list. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) SelectOption[]; `disabled`\n- `Separator` (`@vibes.diy/pouf/interactive`) \u2014 A thin divider line between groups of content.\n- `Sheet` (`@vibes.diy/pouf/interactive`) \u2014 A panel that slides in from the side for secondary tasks. Props: `title` (required) string; `open`\n- `Slider` (`@vibes.diy/pouf/interactive`) \u2014 Picks a number in a range by dragging. Props: `value` (required) number[]; `onChange` (required) (value: number[]) => void; `disabled`\n- `Switch` (`@vibes.diy/pouf/interactive`) \u2014 A labelled on/off toggle for a setting that applies at once. Props: `checked` (required); `onChange` (required) (checked: boolean) => void; `disabled`\n- `Tabs` (`@vibes.diy/pouf/interactive`) \u2014 Switches between panels of content under one heading. Props: `tabs` (required) Tab[]; `value` (required) string; `onChange` (required) (value: string) => void; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Toast` (`@vibes.diy/pouf/interactive`) \u2014 One alert message with a severity and a dismiss button. Props: `id` (required) number; `severity` (required) critical|info; `onDismiss` (required) (id: number) => void\n- `ToastViewport` (`@vibes.diy/pouf/interactive`) \u2014 Renders a list of alert messages your app keeps in state. Props: `toasts` (required) ToastItem[]; `onDismiss` (required) (id: number) => void\n- `Toaster` (`@vibes.diy/pouf/interactive`) \u2014 Mount once in the app so toast() calls appear on screen.\n- `ToggleGroup` (`@vibes.diy/pouf/interactive`) \u2014 A row of toggle buttons where several can be on at once. Props: `value` (required) string[]; `onChange` (required) (value: string[]) => void; `options` (required) ToggleOption[]; `label` (required) string; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Tooltip` (`@vibes.diy/pouf/interactive`) \u2014 A short hint on hover or focus; needs a TooltipProvider above it. Props: `tip` (required) string\n- `TooltipProvider` (`@vibes.diy/pouf/interactive`) \u2014 Wrap the app once; every Tooltip must sit inside it.\n- `AreaChart` (`@vibes.diy/pouf/charts`) \u2014 An area chart of one or more series over a category axis. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]; `stacked`\n- `BarChart` (`@vibes.diy/pouf/charts`) \u2014 A bar chart of one or more series, optionally stacked. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]; `stacked`\n- `LineChart` (`@vibes.diy/pouf/charts`) \u2014 A line chart of one or more series over a category axis. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]\n- `PieChart` (`@vibes.diy/pouf/charts`) \u2014 A pie or donut chart of parts of a whole. Props: `data` (required) PieSlice[]; `donut`; `labelled`";