@vibes.diy/prompts 14.3.64 → 14.3.65

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

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