@vibes.diy/prompts 14.3.202 → 14.3.204

package/themes/looks/pouf/brief.md

@@ -1,10 +1,10 @@
-The pouf look is a room full of cushions. `@vibes.diy/pouf` ships every surface, control and layout this look needs, each carrying the cushion, the corner, the ink and the press. An app is composed from those components and their props; the room's colours arrive through them, so a palette change restyles the app without a line of it changing.
+This look is a room full of cushions. `@vibes.diy/ui` ships every surface, control and layout this look needs, each carrying the cushion, the corner, the ink and the press. An app is composed from those components and their props; 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; 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`. Most tone-taking components default to the lead — `Button`, `Badge`, `Dot`, `Blob`, `Avatar`, `Progress`, `CTA`, `NavLink`, `ToggleGroup`, chart series — so set `tone` explicitly on everything but the one lead. An `Empty` may carry its own `purple` `Blob`: it shows only when the view holds nothing else. 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"`.
+Every view has exactly one lead: the single element wearing `tone="purple"`, usually the primary `Button`. Most tone-taking components default to the lead — `Button`, `Badge`, `Dot`, `IconTile`, `Avatar`, `Progress`, `CTA`, `NavLink`, `ToggleGroup`, chart series — so set `tone` explicitly on everything but the one lead. An `Empty` may carry its own `purple` `IconTile`: it shows only when the view holds nothing else. 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.
 
@@ -24,7 +24,7 @@ A tone names a meaning, not a colour. Choose it by what the thing says:
 - `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.
+- `orange` — the decorative fill, for ornament only: a `Highlight` on one word, an `IconTile` that fronts a feature. Never a verdict.
 
 Tone names are slot names, not hues: another room may paint `purple` teal, and the meaning holds.
 
@@ -32,88 +32,90 @@ Tone names are slot names, not hues: another room may paint `purple` teal, and t
 
 Every control below exists; use it, never 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; `label` string
-- `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; `label` string; `tint` string
-- `CTA` (`@vibes.diy/pouf`) — A call-to-action banner: a big tonal cushion with a headline and an action. Props: `title` (required) string; `description` 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: `icon` IconLike; `title` (required) string
-- `ErrorBoundary` (`@vibes.diy/pouf`) — Catches render crashes so one broken part can't blank the whole page. Props: `name` (required) string; `resetKey` 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; `hint` string; `error` string
-- `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; `tagline` string
-- `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; `label` string
-- `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; `tint` string
-- `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; `id` string; `name` string; `describedBy` string; `placeholder` string; `type` string; `autoComplete` string; `inputMode` search|none|email|tel|text|url|numeric|decimal; `autoCapitalize` string; `spellCheck`; `required`; `mono`; `invalid`; `disabled`; `label` string; `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; `label` string
-- `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; `step` number; `min` number; `max` number; `id` string; `describedBy` string; `placeholder` string; `invalid`; `disabled`; `label` string
-- `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; `count` number
-- `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); `at` number
-- `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; `id` string; `name` string; `describedBy` string; `placeholder` string; `autoComplete` string; `spellCheck`; `required`; `rows` number; `mono`; `invalid`; `disabled`; `label` string
-- `Accordion` (`@vibes.diy/pouf/interactive`) — A stack of expandable sections with one open at a time. Props: `items` (required) AccordionItem[]; `defaultValue` string
-- `AspectRatio` (`@vibes.diy/pouf/interactive`) — Holds media at a fixed width-to-height ratio. Props: `ratio` number
-- `Avatar` (`@vibes.diy/pouf/interactive`) — A person's picture, with initials or an icon when there is none. Props: `src` string; `alt` string; `fallback` string; `icon` IconLike; `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; `id` string; `disabled`; `label` string; `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 to pick or type; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) string[]; `loading`; `error` string; `id` string; `describedBy` string; `placeholder` string; `mono`; `label` string
-- `Confirm` (`@vibes.diy/pouf/interactive`) — Wraps the button that opens it; asks to confirm 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; `description` 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)[]; `label` string
-- `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; `max` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `label` string
-- `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. Props: `maxHeight` string
-- `Select` (`@vibes.diy/pouf/interactive`) — A dropdown for picking one option; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) SelectOption[]; `id` string; `describedBy` string; `placeholder` string; `disabled`; `label` string
-- `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; `description` string; `open`
-- `Slider` (`@vibes.diy/pouf/interactive`) — Picks a number in a range by dragging. Props: `value` (required) number[]; `onChange` (required) (value: number[]) => void; `min` number; `max` number; `step` number; `disabled`; `label` string
-- `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; `id` string; `describedBy` string; `disabled`; `label` string
-- `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`) — Wraps an element with 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[]; `height` number; `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[]; `height` number; `stacked`; `toneKey` string
-- `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[]; `height` number
-- `PieChart` (`@vibes.diy/pouf/charts`) — A pie or donut chart of parts of a whole. Props: `data` (required) PieSlice[]; `height` number; `donut`; `labelled`
-
-<!-- pouf-catalog:end -->
+<!-- ui-catalog:start -->
+
+- `AlertBell` (`@vibes.diy/ui`) — 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/ui`) — A small tonal label for a count, category or state. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Breadcrumb` (`@vibes.diy/ui`) — Shows where the current page sits in a hierarchy, with links back up. Props: `items` (required) BreadcrumbItem[]
+- `Button` (`@vibes.diy/ui`) — 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; `label` string; `tint` string
+- `CTA` (`@vibes.diy/ui`) — A call-to-action banner: a big tonal cushion with a headline and an action. Props: `title` (required) string; `description` string; `action` (required) ReactNode; `tone` purple (lead)|pink|blue|mint|yellow|surface
+- `Card` (`@vibes.diy/ui`) — 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/ui`) — A status dot. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Empty` (`@vibes.diy/ui`) — The empty state for a list or panel with nothing in it yet. Props: `icon` IconLike; `title` (required) string
+- `ErrorBoundary` (`@vibes.diy/ui`) — Catches render crashes so one broken part can't blank the whole page. Props: `name` (required) string; `resetKey` string
+- `ErrorNote` (`@vibes.diy/ui`) — An inline message that says a request or action failed.
+- `Eyebrow` (`@vibes.diy/ui`) — A small uppercase label above a section heading.
+- `Field` (`@vibes.diy/ui`) — Wraps a form control with its label, hint and error text. Props: `label` (required) string; `children` (required) (id: string, describedBy: string | undefined) => ReactNode; `hint` string; `error` string
+- `Figure` (`@vibes.diy/ui`) — An image, framed in clay. Props: `src` (required) string; `alt` (required) string; `width` (required) number; `height` (required) number
+- `Footer` (`@vibes.diy/ui`) — A site footer on one big cushion: brand block plus columns of links, with an optional bottom note. Props: `brand` (required) ReactNode; `tagline` string
+- `Freshness` (`@vibes.diy/ui`) — Speaks only when the data on screen can no longer be trusted. Props: `at` (required) number; `isError`
+- `Grid` (`@vibes.diy/ui`) — 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/ui`) — A page or section heading at level 1, 2 or 3. Props: `level` 1|2|3
+- `Highlight` (`@vibes.diy/ui`) — 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/ui`) — 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; `label` string
+- `IconButton` (`@vibes.diy/ui`) — 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; `tint` string
+- `IconTile` (`@vibes.diy/ui`) — 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; `label` string
+- `Input` (`@vibes.diy/ui`) — A single-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `id` string; `name` string; `describedBy` string; `placeholder` string; `type` string; `autoComplete` string; `inputMode` none|search|email|tel|text|url|numeric|decimal; `autoCapitalize` string; `spellCheck`; `required`; `mono`; `invalid`; `disabled`; `label` string; `bare`
+- `Metric` (`@vibes.diy/ui`) — A labelled readout: small muted label, value beneath. Props: `label` (required) string; `value` (required) ReactNode; `num`; `mono`
+- `ModeBanner` (`@vibes.diy/ui`) — The draft/live (or any two-mode) indicator. Props: `live` (required)
+- `NavLink` (`@vibes.diy/ui`) — 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/ui`) — A top navigation bar on a floating cushion. Props: `brand` (required) ReactNode; `label` string
+- `NumberInput` (`@vibes.diy/ui`) — A numeric field with step buttons; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `step` number; `min` number; `max` number; `id` string; `describedBy` string; `placeholder` string; `invalid`; `disabled`; `label` string
+- `Pagination` (`@vibes.diy/ui`) — 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/ui`) — 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/ui`) — One raised row per item in a list; clickable when given onClick. Props: `selected`
+- `Segmented` (`@vibes.diy/ui`) — 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/ui`) — The page frame: a sidebar column beside the main content.
+- `Sidebar` (`@vibes.diy/ui`) — The side navigation column inside Shell. Props: `mobile` show|hide
+- `Skeleton` (`@vibes.diy/ui`) — A loading placeholder shaped like the text, row or card it stands in for. Props: `variant` text|row|card; `count` number
+- `Spacer` (`@vibes.diy/ui`) — Pushes the items after it to the far end of a Row.
+- `Stack` (`@vibes.diy/ui`) — Stacks children vertically with an even gap. Props: `gap` 1|2|3|4|5|6
+- `Stat` (`@vibes.diy/ui`) — 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/ui`) — 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); `at` number
+- `Table` (`@vibes.diy/ui`) — 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/ui`) — Body text: size, muted, numeric and monospace variants. Props: `size` sm|md; `muted`; `num`; `mono`; `truncate`
+- `Textarea` (`@vibes.diy/ui`) — A multi-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `id` string; `name` string; `describedBy` string; `placeholder` string; `autoComplete` string; `spellCheck`; `required`; `rows` number; `mono`; `invalid`; `disabled`; `label` string
+- `Accordion` (`@vibes.diy/ui/interactive`) — A stack of expandable sections with one open at a time. Props: `items` (required) AccordionItem[]; `defaultValue` string
+- `AspectRatio` (`@vibes.diy/ui/interactive`) — Holds media at a fixed width-to-height ratio. Props: `ratio` number
+- `Avatar` (`@vibes.diy/ui/interactive`) — A person's picture, with initials or an icon when there is none. Props: `src` string; `alt` string; `fallback` string; `icon` IconLike; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg
+- `BottomNav` (`@vibes.diy/ui/interactive`) — Mobile bottom navigation. Props: `primary` (required) NavItem[]; `groups` (required) NavGroup[]; `currentPath` (required) string
+- `Checkbox` (`@vibes.diy/ui/interactive`) — A labelled on/off checkbox. Props: `checked` (required) boolean | "indeterminate"; `onChange` (required) (checked: boolean | "indeterminate") => void; `id` string; `disabled`; `label` string; `hideLabel`
+- `Collapsible` (`@vibes.diy/ui/interactive`) — A single section that shows or hides its content from a trigger. Props: `trigger` (required) ReactNode; `open`
+- `Combobox` (`@vibes.diy/ui/interactive`) — A text field with suggestions to pick or type; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) string[]; `loading`; `error` string; `id` string; `describedBy` string; `placeholder` string; `mono`; `label` string
+- `Confirm` (`@vibes.diy/ui/interactive`) — Wraps the button that opens it; asks to confirm 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/ui/interactive`) — A menu of actions that opens on right-click or long-press. Props: `items` (required) (MenuEntry | "separator")[]
+- `Dialog` (`@vibes.diy/ui/interactive`) — A modal window for a focused task or form. Props: `trigger` (required) ReactNode; `title` (required) string; `description` string; `open`; `size` md|lg
+- `DropdownMenu` (`@vibes.diy/ui/interactive`) — A menu of actions that opens from a trigger button. Props: `items` (required) ("separator" | MenuItem)[]; `label` string
+- `HoverCard` (`@vibes.diy/ui/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/ui/interactive`) — An application menu bar (File / Edit / View…). Props: `menus` (required) MenubarMenu[]
+- `Pad` (`@vibes.diy/ui/interactive`) — A square instrument pad that toggles on and off, with a playhead light and beat-group shading. Props: `on` (required); `onPress` (required) () => void; `label` (required) string; `playhead`; `downbeat`; `group` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `disabled`
+- `Progress` (`@vibes.diy/ui/interactive`) — A progress bar for a value out of a maximum. Props: `value` (required) number; `max` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `label` string
+- `RadioGroup` (`@vibes.diy/ui/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/ui/interactive`) — A fixed-height region that scrolls its own content. Props: `maxHeight` string
+- `Select` (`@vibes.diy/ui/interactive`) — A dropdown for picking one option; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) SelectOption[]; `id` string; `describedBy` string; `placeholder` string; `disabled`; `label` string
+- `Separator` (`@vibes.diy/ui/interactive`) — A thin divider line between groups of content.
+- `Sheet` (`@vibes.diy/ui/interactive`) — A panel that slides in from the side for secondary tasks. Props: `title` (required) string; `description` string; `open`
+- `Slider` (`@vibes.diy/ui/interactive`) — Picks a number in a range by dragging. Props: `value` (required) number[]; `onChange` (required) (value: number[]) => void; `min` number; `max` number; `step` number; `disabled`; `label` string
+- `StepGrid` (`@vibes.diy/ui/interactive`) — One sequencer row of Pads with a moving playhead and beat groups, wrapping to two lines on a phone. Props: `steps` (required) readonly (number | boolean)[]; `onToggle` (required) (index: number) => void; `label` (required) string; `playhead` number; `groupSize` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)
+- `Switch` (`@vibes.diy/ui/interactive`) — A labelled on/off toggle for a setting that applies at once. Props: `checked` (required); `onChange` (required) (checked: boolean) => void; `id` string; `describedBy` string; `disabled`; `label` string
+- `Tabs` (`@vibes.diy/ui/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/ui/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/ui/interactive`) — Renders a list of alert messages your app keeps in state. Props: `toasts` (required) ToastItem[]; `onDismiss` (required) (id: number) => void
+- `Toaster` (`@vibes.diy/ui/interactive`) — Mount once in the app so toast() calls appear on screen.
+- `ToggleGroup` (`@vibes.diy/ui/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/ui/interactive`) — Wraps an element with a short hint on hover or focus; needs a TooltipProvider above it. Props: `tip` (required) string
+- `TooltipProvider` (`@vibes.diy/ui/interactive`) — Wrap the app once; every Tooltip must sit inside it.
+- `AreaChart` (`@vibes.diy/ui/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[]; `height` number; `stacked`
+- `BarChart` (`@vibes.diy/ui/charts`) — A bar chart of one or more series, optionally stacked. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]; `height` number; `stacked`; `toneKey` string
+- `LineChart` (`@vibes.diy/ui/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[]; `height` number
+- `PieChart` (`@vibes.diy/ui/charts`) — A pie or donut chart of parts of a whole. Props: `data` (required) PieSlice[]; `height` number; `donut`; `labelled`
+
+<!-- ui-catalog:end -->
 
 What the lines above leave out:
 
-- A grid of things to tap (a week, a month's dates, a crossword, a keypad, a swatch) is a grid `div` of square `IconButton`s; seven across is `grid-cols-7`, never a `Row`. Each cell wears its state as props (`variant="solid"` on, `"quiet"` off, a meaning `tone`, `aria-pressed`) with its own `label`, and its face is an `Icon`, number or glyph. `Button` and `IconButton` pass native props through, so a held key takes `onPointerDown` and `onPointerUp`. A colour from data goes in `tint={block.color}`; pouf picks readable text.
-- Every `icon` prop (`NavLink`, `Blob`, `Stat`, nav, menu and option items) takes one of `Icon`'s names above, or an element. A sectioned app:
+- A grid of things to tap (a week, a month's dates, a crossword, a keypad, a swatch) is a grid `div` of square `IconButton`s; seven across is `grid-cols-7`, never a `Row`. Each cell wears its state as props (`variant="solid"` on, `"quiet"` off, a meaning `tone`, `aria-pressed`) with its own `label`, and its face is an `Icon`, number or glyph. `Button` and `IconButton` pass native props through, so a held key takes `onPointerDown` and `onPointerUp`. A colour from data goes in `tint={block.color}`; the button picks readable text.
+- Every `icon` prop (`NavLink`, `IconTile`, `Stat`, nav, menu and option items) takes one of `Icon`'s names above, or an element. A sectioned app:
 
   ```jsx
   const AREAS = [{ href: "#/plan", label: "Plan", icon: "calendar", tone: "idle" }];
@@ -140,13 +142,13 @@ What the lines above leave out:
 - `TableColumn<T>` is `{ key, header, render: (row) => node, align?, 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.
+- Toasts: mount `Toaster` once near the root inside the one wrapper that positions the stack, `<div className="ui-toasts"><Toaster /></div>`, then call `toast("Saved")`, `toast.success(…)` or `toast.error(…)` from anywhere; `toast` is imported from `@vibes.diy/ui/interactive` beside `Toaster`. A `ToastViewport` for alerts the app keeps in its own state sits inside the same wrapper.
 
 ## 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.
+- Set `tone` explicitly on every `Badge`, `Dot`, `IconTile`, `Avatar`, `Progress`, `Tabs`, `Segmented`, `Highlight` and chart series, and pass `tone="down"` to a `Confirm` that deletes.
 - 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` for an empty list and an `ErrorNote` when a request fails.
 - Ask before an irreversible action with `Confirm` around its button; acknowledge a finished one with `toast`.
@@ -154,7 +156,7 @@ What the lines above leave out:
 
 ## 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 put `className` or `style` on a UI 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 control: an action is a `Button`, a cell or key is an `IconButton`, a choice is a `Select`, `Checkbox`, `RadioGroup` or `Slider`, and a modal is a `Dialog`, `Sheet` or `Confirm`.
 - Do not put two leads in one view: one `tone="purple"` element, and no other component left on its lead-tone default.

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

@@ -13,4 +13,4 @@ export interface PoufCatalogEntry {
 }
 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; `label` string\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; `label` string; `tint` string\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; `description` 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: `icon` IconLike; `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; `resetKey` 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; `hint` string; `error` string\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; `tagline` string\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; `label` string\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; `tint` string\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; `id` string; `name` string; `describedBy` string; `placeholder` string; `type` string; `autoComplete` string; `inputMode` search|none|email|tel|text|url|numeric|decimal; `autoCapitalize` string; `spellCheck`; `required`; `mono`; `invalid`; `disabled`; `label` string; `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; `label` string\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; `step` number; `min` number; `max` number; `id` string; `describedBy` string; `placeholder` string; `invalid`; `disabled`; `label` string\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; `count` number\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); `at` number\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; `id` string; `name` string; `describedBy` string; `placeholder` string; `autoComplete` string; `spellCheck`; `required`; `rows` number; `mono`; `invalid`; `disabled`; `label` string\n- `Accordion` (`@vibes.diy/pouf/interactive`) \u2014 A stack of expandable sections with one open at a time. Props: `items` (required) AccordionItem[]; `defaultValue` string\n- `AspectRatio` (`@vibes.diy/pouf/interactive`) \u2014 Holds media at a fixed width-to-height ratio. Props: `ratio` number\n- `Avatar` (`@vibes.diy/pouf/interactive`) \u2014 A person's picture, with initials or an icon when there is none. Props: `src` string; `alt` string; `fallback` string; `icon` IconLike; `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; `id` string; `disabled`; `label` string; `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 to pick or type; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) string[]; `loading`; `error` string; `id` string; `describedBy` string; `placeholder` string; `mono`; `label` string\n- `Confirm` (`@vibes.diy/pouf/interactive`) \u2014 Wraps the button that opens it; asks to confirm 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; `description` 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)[]; `label` string\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; `max` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `label` string\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. Props: `maxHeight` string\n- `Select` (`@vibes.diy/pouf/interactive`) \u2014 A dropdown for picking one option; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) SelectOption[]; `id` string; `describedBy` string; `placeholder` string; `disabled`; `label` string\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; `description` 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; `min` number; `max` number; `step` number; `disabled`; `label` string\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; `id` string; `describedBy` string; `disabled`; `label` string\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 Wraps an element with 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[]; `height` number; `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[]; `height` number; `stacked`; `toneKey` string\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[]; `height` number\n- `PieChart` (`@vibes.diy/pouf/charts`) \u2014 A pie or donut chart of parts of a whole. Props: `data` (required) PieSlice[]; `height` number; `donut`; `labelled`";
+export declare const POUF_CATALOG_MD = "- `AlertBell` (`@vibes.diy/ui`) \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/ui`) \u2014 A small tonal label for a count, category or state. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Breadcrumb` (`@vibes.diy/ui`) \u2014 Shows where the current page sits in a hierarchy, with links back up. Props: `items` (required) BreadcrumbItem[]\n- `Button` (`@vibes.diy/ui`) \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; `label` string; `tint` string\n- `CTA` (`@vibes.diy/ui`) \u2014 A call-to-action banner: a big tonal cushion with a headline and an action. Props: `title` (required) string; `description` string; `action` (required) ReactNode; `tone` purple (lead)|pink|blue|mint|yellow|surface\n- `Card` (`@vibes.diy/ui`) \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/ui`) \u2014 A status dot. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Empty` (`@vibes.diy/ui`) \u2014 The empty state for a list or panel with nothing in it yet. Props: `icon` IconLike; `title` (required) string\n- `ErrorBoundary` (`@vibes.diy/ui`) \u2014 Catches render crashes so one broken part can't blank the whole page. Props: `name` (required) string; `resetKey` string\n- `ErrorNote` (`@vibes.diy/ui`) \u2014 An inline message that says a request or action failed.\n- `Eyebrow` (`@vibes.diy/ui`) \u2014 A small uppercase label above a section heading.\n- `Field` (`@vibes.diy/ui`) \u2014 Wraps a form control with its label, hint and error text. Props: `label` (required) string; `children` (required) (id: string, describedBy: string | undefined) => ReactNode; `hint` string; `error` string\n- `Figure` (`@vibes.diy/ui`) \u2014 An image, framed in clay. Props: `src` (required) string; `alt` (required) string; `width` (required) number; `height` (required) number\n- `Footer` (`@vibes.diy/ui`) \u2014 A site footer on one big cushion: brand block plus columns of links, with an optional bottom note. Props: `brand` (required) ReactNode; `tagline` string\n- `Freshness` (`@vibes.diy/ui`) \u2014 Speaks only when the data on screen can no longer be trusted. Props: `at` (required) number; `isError`\n- `Grid` (`@vibes.diy/ui`) \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/ui`) \u2014 A page or section heading at level 1, 2 or 3. Props: `level` 1|2|3\n- `Highlight` (`@vibes.diy/ui`) \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/ui`) \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; `label` string\n- `IconButton` (`@vibes.diy/ui`) \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; `tint` string\n- `IconTile` (`@vibes.diy/ui`) \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; `label` string\n- `Input` (`@vibes.diy/ui`) \u2014 A single-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `id` string; `name` string; `describedBy` string; `placeholder` string; `type` string; `autoComplete` string; `inputMode` none|search|email|tel|text|url|numeric|decimal; `autoCapitalize` string; `spellCheck`; `required`; `mono`; `invalid`; `disabled`; `label` string; `bare`\n- `Metric` (`@vibes.diy/ui`) \u2014 A labelled readout: small muted label, value beneath. Props: `label` (required) string; `value` (required) ReactNode; `num`; `mono`\n- `ModeBanner` (`@vibes.diy/ui`) \u2014 The draft/live (or any two-mode) indicator. Props: `live` (required)\n- `NavLink` (`@vibes.diy/ui`) \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/ui`) \u2014 A top navigation bar on a floating cushion. Props: `brand` (required) ReactNode; `label` string\n- `NumberInput` (`@vibes.diy/ui`) \u2014 A numeric field with step buttons; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `step` number; `min` number; `max` number; `id` string; `describedBy` string; `placeholder` string; `invalid`; `disabled`; `label` string\n- `Pagination` (`@vibes.diy/ui`) \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/ui`) \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/ui`) \u2014 One raised row per item in a list; clickable when given onClick. Props: `selected`\n- `Segmented` (`@vibes.diy/ui`) \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/ui`) \u2014 The page frame: a sidebar column beside the main content.\n- `Sidebar` (`@vibes.diy/ui`) \u2014 The side navigation column inside Shell. Props: `mobile` show|hide\n- `Skeleton` (`@vibes.diy/ui`) \u2014 A loading placeholder shaped like the text, row or card it stands in for. Props: `variant` text|row|card; `count` number\n- `Spacer` (`@vibes.diy/ui`) \u2014 Pushes the items after it to the far end of a Row.\n- `Stack` (`@vibes.diy/ui`) \u2014 Stacks children vertically with an even gap. Props: `gap` 1|2|3|4|5|6\n- `Stat` (`@vibes.diy/ui`) \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/ui`) \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); `at` number\n- `Table` (`@vibes.diy/ui`) \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/ui`) \u2014 Body text: size, muted, numeric and monospace variants. Props: `size` sm|md; `muted`; `num`; `mono`; `truncate`\n- `Textarea` (`@vibes.diy/ui`) \u2014 A multi-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `id` string; `name` string; `describedBy` string; `placeholder` string; `autoComplete` string; `spellCheck`; `required`; `rows` number; `mono`; `invalid`; `disabled`; `label` string\n- `Accordion` (`@vibes.diy/ui/interactive`) \u2014 A stack of expandable sections with one open at a time. Props: `items` (required) AccordionItem[]; `defaultValue` string\n- `AspectRatio` (`@vibes.diy/ui/interactive`) \u2014 Holds media at a fixed width-to-height ratio. Props: `ratio` number\n- `Avatar` (`@vibes.diy/ui/interactive`) \u2014 A person's picture, with initials or an icon when there is none. Props: `src` string; `alt` string; `fallback` string; `icon` IconLike; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg\n- `BottomNav` (`@vibes.diy/ui/interactive`) \u2014 Mobile bottom navigation. Props: `primary` (required) NavItem[]; `groups` (required) NavGroup[]; `currentPath` (required) string\n- `Checkbox` (`@vibes.diy/ui/interactive`) \u2014 A labelled on/off checkbox. Props: `checked` (required) boolean | \"indeterminate\"; `onChange` (required) (checked: boolean | \"indeterminate\") => void; `id` string; `disabled`; `label` string; `hideLabel`\n- `Collapsible` (`@vibes.diy/ui/interactive`) \u2014 A single section that shows or hides its content from a trigger. Props: `trigger` (required) ReactNode; `open`\n- `Combobox` (`@vibes.diy/ui/interactive`) \u2014 A text field with suggestions to pick or type; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) string[]; `loading`; `error` string; `id` string; `describedBy` string; `placeholder` string; `mono`; `label` string\n- `Confirm` (`@vibes.diy/ui/interactive`) \u2014 Wraps the button that opens it; asks to confirm 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/ui/interactive`) \u2014 A menu of actions that opens on right-click or long-press. Props: `items` (required) (MenuEntry | \"separator\")[]\n- `Dialog` (`@vibes.diy/ui/interactive`) \u2014 A modal window for a focused task or form. Props: `trigger` (required) ReactNode; `title` (required) string; `description` string; `open`; `size` md|lg\n- `DropdownMenu` (`@vibes.diy/ui/interactive`) \u2014 A menu of actions that opens from a trigger button. Props: `items` (required) (\"separator\" | MenuItem)[]; `label` string\n- `HoverCard` (`@vibes.diy/ui/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/ui/interactive`) \u2014 An application menu bar (File / Edit / View\u2026). Props: `menus` (required) MenubarMenu[]\n- `Pad` (`@vibes.diy/ui/interactive`) \u2014 A square instrument pad that toggles on and off, with a playhead light and beat-group shading. Props: `on` (required); `onPress` (required) () => void; `label` (required) string; `playhead`; `downbeat`; `group` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `disabled`\n- `Progress` (`@vibes.diy/ui/interactive`) \u2014 A progress bar for a value out of a maximum. Props: `value` (required) number; `max` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `label` string\n- `RadioGroup` (`@vibes.diy/ui/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/ui/interactive`) \u2014 A fixed-height region that scrolls its own content. Props: `maxHeight` string\n- `Select` (`@vibes.diy/ui/interactive`) \u2014 A dropdown for picking one option; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) SelectOption[]; `id` string; `describedBy` string; `placeholder` string; `disabled`; `label` string\n- `Separator` (`@vibes.diy/ui/interactive`) \u2014 A thin divider line between groups of content.\n- `Sheet` (`@vibes.diy/ui/interactive`) \u2014 A panel that slides in from the side for secondary tasks. Props: `title` (required) string; `description` string; `open`\n- `Slider` (`@vibes.diy/ui/interactive`) \u2014 Picks a number in a range by dragging. Props: `value` (required) number[]; `onChange` (required) (value: number[]) => void; `min` number; `max` number; `step` number; `disabled`; `label` string\n- `StepGrid` (`@vibes.diy/ui/interactive`) \u2014 One sequencer row of Pads with a moving playhead and beat groups, wrapping to two lines on a phone. Props: `steps` (required) readonly (number | boolean)[]; `onToggle` (required) (index: number) => void; `label` (required) string; `playhead` number; `groupSize` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Switch` (`@vibes.diy/ui/interactive`) \u2014 A labelled on/off toggle for a setting that applies at once. Props: `checked` (required); `onChange` (required) (checked: boolean) => void; `id` string; `describedBy` string; `disabled`; `label` string\n- `Tabs` (`@vibes.diy/ui/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/ui/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/ui/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/ui/interactive`) \u2014 Mount once in the app so toast() calls appear on screen.\n- `ToggleGroup` (`@vibes.diy/ui/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/ui/interactive`) \u2014 Wraps an element with a short hint on hover or focus; needs a TooltipProvider above it. Props: `tip` (required) string\n- `TooltipProvider` (`@vibes.diy/ui/interactive`) \u2014 Wrap the app once; every Tooltip must sit inside it.\n- `AreaChart` (`@vibes.diy/ui/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[]; `height` number; `stacked`\n- `BarChart` (`@vibes.diy/ui/charts`) \u2014 A bar chart of one or more series, optionally stacked. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]; `height` number; `stacked`; `toneKey` string\n- `LineChart` (`@vibes.diy/ui/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[]; `height` number\n- `PieChart` (`@vibes.diy/ui/charts`) \u2014 A pie or donut chart of parts of a whole. Props: `data` (required) PieSlice[]; `height` number; `donut`; `labelled`";

package/themes/looks/pouf/catalog.generated.js

@@ -1,7 +1,7 @@
 export const POUF_ENTRY_SPECIFIER = {
-    index: "@vibes.diy/pouf",
-    interactive: "@vibes.diy/pouf/interactive",
-    charts: "@vibes.diy/pouf/charts",
+    index: "@vibes.diy/ui",
+    interactive: "@vibes.diy/ui/interactive",
+    charts: "@vibes.diy/ui/charts",
 };
 export const POUF_CATALOG = [
     {
@@ -21,17 +21,6 @@ export const POUF_CATALOG = [
         purpose: "A small tonal label for a count, category or state",
         props: [{ name: "tone", values: ["up", "down", "warn", "info", "idle", "purple", "orange"], required: false }],
     },
-    {
-        name: "Blob",
-        entry: "index",
-        purpose: "A tonal icon tile that fronts a stat, list row or feature",
-        props: [
-            { name: "icon", type: "IconLike", required: true },
-            { name: "tone", values: ["up", "down", "warn", "info", "idle", "purple", "orange"], required: false },
-            { name: "size", values: ["sm", "md", "lg"], required: false },
-            { name: "label", type: "string", required: false },
-        ],
-    },
     {
         name: "Breadcrumb",
         entry: "index",
@@ -258,6 +247,17 @@ export const POUF_CATALOG = [
             { name: "tint", type: "string", required: false },
         ],
     },
+    {
+        name: "IconTile",
+        entry: "index",
+        purpose: "A tonal icon tile that fronts a stat, list row or feature",
+        props: [
+            { name: "icon", type: "IconLike", required: true },
+            { name: "tone", values: ["up", "down", "warn", "info", "idle", "purple", "orange"], required: false },
+            { name: "size", values: ["sm", "md", "lg"], required: false },
+            { name: "label", type: "string", required: false },
+        ],
+    },
     {
         name: "Input",
         entry: "index",
@@ -271,7 +271,7 @@ export const POUF_CATALOG = [
             { name: "placeholder", type: "string", required: false },
             { name: "type", type: "string", required: false },
             { name: "autoComplete", type: "string", required: false },
-            { name: "inputMode", values: ["search", "none", "email", "tel", "text", "url", "numeric", "decimal"], required: false },
+            { name: "inputMode", values: ["none", "search", "email", "tel", "text", "url", "numeric", "decimal"], required: false },
             { name: "autoCapitalize", type: "string", required: false },
             { name: "spellCheck", required: false },
             { name: "required", required: false },
@@ -597,6 +597,21 @@ export const POUF_CATALOG = [
         purpose: "An application menu bar (File / Edit / View…)",
         props: [{ name: "menus", type: "MenubarMenu[]", required: true }],
     },
+    {
+        name: "Pad",
+        entry: "interactive",
+        purpose: "A square instrument pad that toggles on and off, with a playhead light and beat-group shading",
+        props: [
+            { name: "on", required: true },
+            { name: "onPress", type: "() => void", required: true },
+            { name: "label", type: "string", required: true },
+            { name: "playhead", required: false },
+            { name: "downbeat", required: false },
+            { name: "group", type: "number", required: false },
+            { name: "tone", values: ["up", "down", "warn", "info", "idle", "purple", "orange"], required: false },
+            { name: "disabled", required: false },
+        ],
+    },
     {
         name: "Progress",
         entry: "interactive",
@@ -666,6 +681,19 @@ export const POUF_CATALOG = [
             { name: "label", type: "string", required: false },
         ],
     },
+    {
+        name: "StepGrid",
+        entry: "interactive",
+        purpose: "One sequencer row of Pads with a moving playhead and beat groups, wrapping to two lines on a phone",
+        props: [
+            { name: "steps", type: "readonly (number | boolean)[]", required: true },
+            { name: "onToggle", type: "(index: number) => void", required: true },
+            { name: "label", type: "string", required: true },
+            { name: "playhead", type: "number", required: false },
+            { name: "groupSize", type: "number", required: false },
+            { name: "tone", values: ["up", "down", "warn", "info", "idle", "purple", "orange"], required: false },
+        ],
+    },
     {
         name: "Switch",
         entry: "interactive",
@@ -781,7 +809,6 @@ export const POUF_COMPONENT_NAMES = {
     index: [
         "AlertBell",
         "Badge",
-        "Blob",
         "Breadcrumb",
         "Button",
         "CTA",
@@ -800,6 +827,7 @@ export const POUF_COMPONENT_NAMES = {
         "Highlight",
         "Icon",
         "IconButton",
+        "IconTile",
         "Input",
         "Metric",
         "ModeBanner",
@@ -835,6 +863,7 @@ export const POUF_COMPONENT_NAMES = {
         "DropdownMenu",
         "HoverCard",
         "Menubar",
+        "Pad",
         "Progress",
         "RadioGroup",
         "ScrollArea",
@@ -842,6 +871,7 @@ export const POUF_COMPONENT_NAMES = {
         "Separator",
         "Sheet",
         "Slider",
+        "StepGrid",
         "Switch",
         "Tabs",
         "Toast",
@@ -853,5 +883,5 @@ export const POUF_COMPONENT_NAMES = {
     ],
     charts: ["AreaChart", "BarChart", "LineChart", "PieChart"],
 };
-export const POUF_CATALOG_MD = '- `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\n- `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)\n- `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; `label` string\n- `Breadcrumb` (`@vibes.diy/pouf`) — Shows where the current page sits in a hierarchy, with links back up. Props: `items` (required) BreadcrumbItem[]\n- `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; `label` string; `tint` string\n- `CTA` (`@vibes.diy/pouf`) — A call-to-action banner: a big tonal cushion with a headline and an action. Props: `title` (required) string; `description` string; `action` (required) ReactNode; `tone` purple (lead)|pink|blue|mint|yellow|surface\n- `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\n- `Dot` (`@vibes.diy/pouf`) — A status dot. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Empty` (`@vibes.diy/pouf`) — The empty state for a list or panel with nothing in it yet. Props: `icon` IconLike; `title` (required) string\n- `ErrorBoundary` (`@vibes.diy/pouf`) — Catches render crashes so one broken part can\'t blank the whole page. Props: `name` (required) string; `resetKey` string\n- `ErrorNote` (`@vibes.diy/pouf`) — An inline message that says a request or action failed.\n- `Eyebrow` (`@vibes.diy/pouf`) — A small uppercase label above a section heading.\n- `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; `hint` string; `error` string\n- `Figure` (`@vibes.diy/pouf`) — An image, framed in clay. Props: `src` (required) string; `alt` (required) string; `width` (required) number; `height` (required) number\n- `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; `tagline` string\n- `Freshness` (`@vibes.diy/pouf`) — Speaks only when the data on screen can no longer be trusted. Props: `at` (required) number; `isError`\n- `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\n- `Heading` (`@vibes.diy/pouf`) — A page or section heading at level 1, 2 or 3. Props: `level` 1|2|3\n- `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)\n- `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; `label` string\n- `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; `tint` string\n- `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; `id` string; `name` string; `describedBy` string; `placeholder` string; `type` string; `autoComplete` string; `inputMode` search|none|email|tel|text|url|numeric|decimal; `autoCapitalize` string; `spellCheck`; `required`; `mono`; `invalid`; `disabled`; `label` string; `bare`\n- `Metric` (`@vibes.diy/pouf`) — A labelled readout: small muted label, value beneath. Props: `label` (required) string; `value` (required) ReactNode; `num`; `mono`\n- `ModeBanner` (`@vibes.diy/pouf`) — The draft/live (or any two-mode) indicator. Props: `live` (required)\n- `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)\n- `Navbar` (`@vibes.diy/pouf`) — A top navigation bar on a floating cushion. Props: `brand` (required) ReactNode; `label` string\n- `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; `step` number; `min` number; `max` number; `id` string; `describedBy` string; `placeholder` string; `invalid`; `disabled`; `label` string\n- `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\n- `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`\n- `RowCard` (`@vibes.diy/pouf`) — One raised row per item in a list; clickable when given onClick. Props: `selected`\n- `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)\n- `Shell` (`@vibes.diy/pouf`) — The page frame: a sidebar column beside the main content.\n- `Sidebar` (`@vibes.diy/pouf`) — The side navigation column inside Shell. Props: `mobile` show|hide\n- `Skeleton` (`@vibes.diy/pouf`) — A loading placeholder shaped like the text, row or card it stands in for. Props: `variant` text|row|card; `count` number\n- `Spacer` (`@vibes.diy/pouf`) — Pushes the items after it to the far end of a Row.\n- `Stack` (`@vibes.diy/pouf`) — Stacks children vertically with an even gap. Props: `gap` 1|2|3|4|5|6\n- `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)\n- `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); `at` number\n- `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\n- `Text` (`@vibes.diy/pouf`) — Body text: size, muted, numeric and monospace variants. Props: `size` sm|md; `muted`; `num`; `mono`; `truncate`\n- `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; `id` string; `name` string; `describedBy` string; `placeholder` string; `autoComplete` string; `spellCheck`; `required`; `rows` number; `mono`; `invalid`; `disabled`; `label` string\n- `Accordion` (`@vibes.diy/pouf/interactive`) — A stack of expandable sections with one open at a time. Props: `items` (required) AccordionItem[]; `defaultValue` string\n- `AspectRatio` (`@vibes.diy/pouf/interactive`) — Holds media at a fixed width-to-height ratio. Props: `ratio` number\n- `Avatar` (`@vibes.diy/pouf/interactive`) — A person\'s picture, with initials or an icon when there is none. Props: `src` string; `alt` string; `fallback` string; `icon` IconLike; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg\n- `BottomNav` (`@vibes.diy/pouf/interactive`) — Mobile bottom navigation. Props: `primary` (required) NavItem[]; `groups` (required) NavGroup[]; `currentPath` (required) string\n- `Checkbox` (`@vibes.diy/pouf/interactive`) — A labelled on/off checkbox. Props: `checked` (required) boolean | "indeterminate"; `onChange` (required) (checked: boolean | "indeterminate") => void; `id` string; `disabled`; `label` string; `hideLabel`\n- `Collapsible` (`@vibes.diy/pouf/interactive`) — A single section that shows or hides its content from a trigger. Props: `trigger` (required) ReactNode; `open`\n- `Combobox` (`@vibes.diy/pouf/interactive`) — A text field with suggestions to pick or type; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) string[]; `loading`; `error` string; `id` string; `describedBy` string; `placeholder` string; `mono`; `label` string\n- `Confirm` (`@vibes.diy/pouf/interactive`) — Wraps the button that opens it; asks to confirm 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`) — A menu of actions that opens on right-click or long-press. Props: `items` (required) (MenuEntry | "separator")[]\n- `Dialog` (`@vibes.diy/pouf/interactive`) — A modal window for a focused task or form. Props: `trigger` (required) ReactNode; `title` (required) string; `description` string; `open`; `size` md|lg\n- `DropdownMenu` (`@vibes.diy/pouf/interactive`) — A menu of actions that opens from a trigger button. Props: `items` (required) ("separator" | MenuItem)[]; `label` string\n- `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\n- `Menubar` (`@vibes.diy/pouf/interactive`) — An application menu bar (File / Edit / View…). Props: `menus` (required) MenubarMenu[]\n- `Progress` (`@vibes.diy/pouf/interactive`) — A progress bar for a value out of a maximum. Props: `value` (required) number; `max` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `label` string\n- `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`\n- `ScrollArea` (`@vibes.diy/pouf/interactive`) — A fixed-height region that scrolls its own content. Props: `maxHeight` string\n- `Select` (`@vibes.diy/pouf/interactive`) — A dropdown for picking one option; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) SelectOption[]; `id` string; `describedBy` string; `placeholder` string; `disabled`; `label` string\n- `Separator` (`@vibes.diy/pouf/interactive`) — A thin divider line between groups of content.\n- `Sheet` (`@vibes.diy/pouf/interactive`) — A panel that slides in from the side for secondary tasks. Props: `title` (required) string; `description` string; `open`\n- `Slider` (`@vibes.diy/pouf/interactive`) — Picks a number in a range by dragging. Props: `value` (required) number[]; `onChange` (required) (value: number[]) => void; `min` number; `max` number; `step` number; `disabled`; `label` string\n- `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; `id` string; `describedBy` string; `disabled`; `label` string\n- `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)\n- `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\n- `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\n- `Toaster` (`@vibes.diy/pouf/interactive`) — Mount once in the app so toast() calls appear on screen.\n- `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)\n- `Tooltip` (`@vibes.diy/pouf/interactive`) — Wraps an element with a short hint on hover or focus; needs a TooltipProvider above it. Props: `tip` (required) string\n- `TooltipProvider` (`@vibes.diy/pouf/interactive`) — Wrap the app once; every Tooltip must sit inside it.\n- `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[]; `height` number; `stacked`\n- `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[]; `height` number; `stacked`; `toneKey` string\n- `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[]; `height` number\n- `PieChart` (`@vibes.diy/pouf/charts`) — A pie or donut chart of parts of a whole. Props: `data` (required) PieSlice[]; `height` number; `donut`; `labelled`';
+export const POUF_CATALOG_MD = '- `AlertBell` (`@vibes.diy/ui`) — 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/ui`) — A small tonal label for a count, category or state. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Breadcrumb` (`@vibes.diy/ui`) — Shows where the current page sits in a hierarchy, with links back up. Props: `items` (required) BreadcrumbItem[]\n- `Button` (`@vibes.diy/ui`) — 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; `label` string; `tint` string\n- `CTA` (`@vibes.diy/ui`) — A call-to-action banner: a big tonal cushion with a headline and an action. Props: `title` (required) string; `description` string; `action` (required) ReactNode; `tone` purple (lead)|pink|blue|mint|yellow|surface\n- `Card` (`@vibes.diy/ui`) — 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/ui`) — A status dot. Props: `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Empty` (`@vibes.diy/ui`) — The empty state for a list or panel with nothing in it yet. Props: `icon` IconLike; `title` (required) string\n- `ErrorBoundary` (`@vibes.diy/ui`) — Catches render crashes so one broken part can\'t blank the whole page. Props: `name` (required) string; `resetKey` string\n- `ErrorNote` (`@vibes.diy/ui`) — An inline message that says a request or action failed.\n- `Eyebrow` (`@vibes.diy/ui`) — A small uppercase label above a section heading.\n- `Field` (`@vibes.diy/ui`) — Wraps a form control with its label, hint and error text. Props: `label` (required) string; `children` (required) (id: string, describedBy: string | undefined) => ReactNode; `hint` string; `error` string\n- `Figure` (`@vibes.diy/ui`) — An image, framed in clay. Props: `src` (required) string; `alt` (required) string; `width` (required) number; `height` (required) number\n- `Footer` (`@vibes.diy/ui`) — A site footer on one big cushion: brand block plus columns of links, with an optional bottom note. Props: `brand` (required) ReactNode; `tagline` string\n- `Freshness` (`@vibes.diy/ui`) — Speaks only when the data on screen can no longer be trusted. Props: `at` (required) number; `isError`\n- `Grid` (`@vibes.diy/ui`) — 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/ui`) — A page or section heading at level 1, 2 or 3. Props: `level` 1|2|3\n- `Highlight` (`@vibes.diy/ui`) — 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/ui`) — 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; `label` string\n- `IconButton` (`@vibes.diy/ui`) — 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; `tint` string\n- `IconTile` (`@vibes.diy/ui`) — 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; `label` string\n- `Input` (`@vibes.diy/ui`) — A single-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `id` string; `name` string; `describedBy` string; `placeholder` string; `type` string; `autoComplete` string; `inputMode` none|search|email|tel|text|url|numeric|decimal; `autoCapitalize` string; `spellCheck`; `required`; `mono`; `invalid`; `disabled`; `label` string; `bare`\n- `Metric` (`@vibes.diy/ui`) — A labelled readout: small muted label, value beneath. Props: `label` (required) string; `value` (required) ReactNode; `num`; `mono`\n- `ModeBanner` (`@vibes.diy/ui`) — The draft/live (or any two-mode) indicator. Props: `live` (required)\n- `NavLink` (`@vibes.diy/ui`) — 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/ui`) — A top navigation bar on a floating cushion. Props: `brand` (required) ReactNode; `label` string\n- `NumberInput` (`@vibes.diy/ui`) — A numeric field with step buttons; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `step` number; `min` number; `max` number; `id` string; `describedBy` string; `placeholder` string; `invalid`; `disabled`; `label` string\n- `Pagination` (`@vibes.diy/ui`) — 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/ui`) — 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/ui`) — One raised row per item in a list; clickable when given onClick. Props: `selected`\n- `Segmented` (`@vibes.diy/ui`) — 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/ui`) — The page frame: a sidebar column beside the main content.\n- `Sidebar` (`@vibes.diy/ui`) — The side navigation column inside Shell. Props: `mobile` show|hide\n- `Skeleton` (`@vibes.diy/ui`) — A loading placeholder shaped like the text, row or card it stands in for. Props: `variant` text|row|card; `count` number\n- `Spacer` (`@vibes.diy/ui`) — Pushes the items after it to the far end of a Row.\n- `Stack` (`@vibes.diy/ui`) — Stacks children vertically with an even gap. Props: `gap` 1|2|3|4|5|6\n- `Stat` (`@vibes.diy/ui`) — 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/ui`) — 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); `at` number\n- `Table` (`@vibes.diy/ui`) — 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/ui`) — Body text: size, muted, numeric and monospace variants. Props: `size` sm|md; `muted`; `num`; `mono`; `truncate`\n- `Textarea` (`@vibes.diy/ui`) — A multi-line text field; wrap it in Field for its label. Props: `value` (required) string; `onChange` (required) (value: string) => void; `id` string; `name` string; `describedBy` string; `placeholder` string; `autoComplete` string; `spellCheck`; `required`; `rows` number; `mono`; `invalid`; `disabled`; `label` string\n- `Accordion` (`@vibes.diy/ui/interactive`) — A stack of expandable sections with one open at a time. Props: `items` (required) AccordionItem[]; `defaultValue` string\n- `AspectRatio` (`@vibes.diy/ui/interactive`) — Holds media at a fixed width-to-height ratio. Props: `ratio` number\n- `Avatar` (`@vibes.diy/ui/interactive`) — A person\'s picture, with initials or an icon when there is none. Props: `src` string; `alt` string; `fallback` string; `icon` IconLike; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `size` sm|md|lg\n- `BottomNav` (`@vibes.diy/ui/interactive`) — Mobile bottom navigation. Props: `primary` (required) NavItem[]; `groups` (required) NavGroup[]; `currentPath` (required) string\n- `Checkbox` (`@vibes.diy/ui/interactive`) — A labelled on/off checkbox. Props: `checked` (required) boolean | "indeterminate"; `onChange` (required) (checked: boolean | "indeterminate") => void; `id` string; `disabled`; `label` string; `hideLabel`\n- `Collapsible` (`@vibes.diy/ui/interactive`) — A single section that shows or hides its content from a trigger. Props: `trigger` (required) ReactNode; `open`\n- `Combobox` (`@vibes.diy/ui/interactive`) — A text field with suggestions to pick or type; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) string[]; `loading`; `error` string; `id` string; `describedBy` string; `placeholder` string; `mono`; `label` string\n- `Confirm` (`@vibes.diy/ui/interactive`) — Wraps the button that opens it; asks to confirm 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/ui/interactive`) — A menu of actions that opens on right-click or long-press. Props: `items` (required) (MenuEntry | "separator")[]\n- `Dialog` (`@vibes.diy/ui/interactive`) — A modal window for a focused task or form. Props: `trigger` (required) ReactNode; `title` (required) string; `description` string; `open`; `size` md|lg\n- `DropdownMenu` (`@vibes.diy/ui/interactive`) — A menu of actions that opens from a trigger button. Props: `items` (required) ("separator" | MenuItem)[]; `label` string\n- `HoverCard` (`@vibes.diy/ui/interactive`) — 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/ui/interactive`) — An application menu bar (File / Edit / View…). Props: `menus` (required) MenubarMenu[]\n- `Pad` (`@vibes.diy/ui/interactive`) — A square instrument pad that toggles on and off, with a playhead light and beat-group shading. Props: `on` (required); `onPress` (required) () => void; `label` (required) string; `playhead`; `downbeat`; `group` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `disabled`\n- `Progress` (`@vibes.diy/ui/interactive`) — A progress bar for a value out of a maximum. Props: `value` (required) number; `max` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative); `label` string\n- `RadioGroup` (`@vibes.diy/ui/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`\n- `ScrollArea` (`@vibes.diy/ui/interactive`) — A fixed-height region that scrolls its own content. Props: `maxHeight` string\n- `Select` (`@vibes.diy/ui/interactive`) — A dropdown for picking one option; its default lives in `value`, not placeholder. Props: `value` (required) string; `onChange` (required) (value: string) => void; `options` (required) SelectOption[]; `id` string; `describedBy` string; `placeholder` string; `disabled`; `label` string\n- `Separator` (`@vibes.diy/ui/interactive`) — A thin divider line between groups of content.\n- `Sheet` (`@vibes.diy/ui/interactive`) — A panel that slides in from the side for secondary tasks. Props: `title` (required) string; `description` string; `open`\n- `Slider` (`@vibes.diy/ui/interactive`) — Picks a number in a range by dragging. Props: `value` (required) number[]; `onChange` (required) (value: number[]) => void; `min` number; `max` number; `step` number; `disabled`; `label` string\n- `StepGrid` (`@vibes.diy/ui/interactive`) — One sequencer row of Pads with a moving playhead and beat groups, wrapping to two lines on a phone. Props: `steps` (required) readonly (number | boolean)[]; `onToggle` (required) (index: number) => void; `label` (required) string; `playhead` number; `groupSize` number; `tone` up|down|warn|info|idle|purple (lead)|orange (decorative)\n- `Switch` (`@vibes.diy/ui/interactive`) — A labelled on/off toggle for a setting that applies at once. Props: `checked` (required); `onChange` (required) (checked: boolean) => void; `id` string; `describedBy` string; `disabled`; `label` string\n- `Tabs` (`@vibes.diy/ui/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)\n- `Toast` (`@vibes.diy/ui/interactive`) — 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/ui/interactive`) — Renders a list of alert messages your app keeps in state. Props: `toasts` (required) ToastItem[]; `onDismiss` (required) (id: number) => void\n- `Toaster` (`@vibes.diy/ui/interactive`) — Mount once in the app so toast() calls appear on screen.\n- `ToggleGroup` (`@vibes.diy/ui/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)\n- `Tooltip` (`@vibes.diy/ui/interactive`) — Wraps an element with a short hint on hover or focus; needs a TooltipProvider above it. Props: `tip` (required) string\n- `TooltipProvider` (`@vibes.diy/ui/interactive`) — Wrap the app once; every Tooltip must sit inside it.\n- `AreaChart` (`@vibes.diy/ui/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[]; `height` number; `stacked`\n- `BarChart` (`@vibes.diy/ui/charts`) — A bar chart of one or more series, optionally stacked. Props: `data` (required) Record<string, unknown>[]; `dataKey` (required) string; `series` (required) ChartSeries[]; `height` number; `stacked`; `toneKey` string\n- `LineChart` (`@vibes.diy/ui/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[]; `height` number\n- `PieChart` (`@vibes.diy/ui/charts`) — A pie or donut chart of parts of a whole. Props: `data` (required) PieSlice[]; `height` number; `donut`; `labelled`';
 //# sourceMappingURL=catalog.generated.js.map