@muten/shadcn 0.0.4 → 0.0.5

package/AGENTS.md

@@ -0,0 +1,108 @@
+# @muten/shadcn - component catalog (for an AI assembling a muten app)
+
+## Setup (once): `plugins { shadcn {} }` in muten.config + `@import "@muten/shadcn/globals.css";` in src/styles.css. Then everything below is usable directly; `muten add <name>` only ejects a source.
+
+## PLUG-AND-PLAY (zero class props)
+- **Btn**(variant, onClick) { slot } · **LinkBtn**(to, variant) { slot } · **Input**(value, placeholder)
+- **DataTable** @rows columns(a, b) - STYLED BY DEFAULT, no class needed.
+- + every Part / Custom below.
+
+## Parts (64) - imported by plugins {}
+
+- **Card** - A surface with CardHeader / CardTitle / CardDescription / CardContent / CardFooter sub-components.  ·  +CardHeader, CardTitle, CardDescription, CardContent, CardFooter
+- **Badge** - A small status descriptor. variant: default | secondary | destructive | outline.
+- **Alert** - A callout with AlertTitle / AlertDescription. variant: default | destructive.  ·  +AlertTitle, AlertDescription
+- **Avatar** - A user's initials in a circle (AvatarFallback).
+- **Switch** - A toggle; the page owns the bool + the action.
+- **Spinner** - A loading indicator (animate-spin loader).
+- **Progress** - A determinate progress bar; value is 0-100.
+- **Separator** - A thin divider line.
+- **Empty** - An empty-state placeholder (title + description in a dashed border).
+- **Breadcrumb** - A breadcrumb trail with BreadcrumbLink / BreadcrumbSeparator / BreadcrumbPage.  ·  +BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator
+- **Pagination** - Page navigation with PaginationLink / Previous / Next / Ellipsis.  ·  +PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis
+- **Field** - A labelled form control: FieldLabel / FieldDescription / FieldError.  ·  +FieldLabel, FieldDescription, FieldError
+- **Item** - A bordered row: ItemContent / ItemTitle / ItemDescription.  ·  +ItemContent, ItemTitle, ItemDescription
+- **Checkbox** - A checkbox; the page owns the bool + the toggle action.
+- **Toggle** - A two-state button; the page owns the bool + the toggle action.
+- **ToggleGroup** - Single-select toolbar with ToggleGroupItem; page owns a text state.  ·  +ToggleGroupItem
+- **RadioGroup** - Single choice with RadioGroupItem; page owns a text state.  ·  +RadioGroupItem
+- **Collapsible** - A trigger + content shown when open; page owns the bool.
+- **Accordion** - Stacked expandable sections with AccordionItem; page owns a bool per item.  ·  +AccordionItem
+- **TabsList** - Tab bar (TabsList/TabsTrigger) + TabsContent panels; page owns the active-tab text.  ·  +TabsTrigger, TabsContent
+- **Dialog** - A modal with DialogTitle/Description/Footer; page owns the open bool. Backdrop click closes.  ·  +DialogTitle, DialogDescription, DialogFooter
+- **Tooltip** - A hover tooltip (pure CSS, no state). The slot is the trigger.
+- **DropdownMenu** - A menu below a trigger with DropdownItem/Label/Separator; page owns the open bool.  ·  +DropdownItem, DropdownLabel, DropdownSeparator
+- **Popover** - A floating panel below a trigger; page owns the open bool.
+- **AlertDialog** - A modal requiring an explicit choice (no backdrop dismiss); page owns the open bool.  ·  +AlertDialogTitle, AlertDialogDescription, AlertDialogFooter
+- **Sheet** - A panel that slides in from the right; page owns the open bool.  ·  +SheetTitle, SheetDescription
+- **Drawer** - A panel that slides up from the bottom; page owns the open bool.
+- **HoverCard** - Richer content shown on hover (pure CSS, no state).
+- **Select** - A value picker with SelectItem; page owns the value text + open bool.  ·  +SelectItem
+- **ScrollArea** - A scrollable region with styled scrollbars.
+- **Message** - Chat Message + Bubble + Marker (variant: sent | received).  ·  +Bubble, Marker
+- **MessageScroller** - A scrollable column of chat messages.
+- **Attachment** - A file attachment chip (icon + name + size).
+- **Menubar** - A bar of menus (File/Edit/View); page owns which is open via a text state.  ·  +MenubarMenu, MenubarItem, MenubarSeparator
+- **NavigationMenu** - A nav bar with hover-revealed panels (pure CSS, no state).  ·  +NavigationMenuItem, NavigationMenuLink
+- **Combobox** - A Select with a search box; page filters items with `each … where`.  ·  +ComboboxItem
+- **Command** - A command palette (search + grouped CommandItem list).  ·  +CommandList, CommandGroup, CommandItem, CommandShortcut
+- **SegmentedControl** - A single-select toolbar (SegmentedItem); page owns a text state.  ·  +SegmentedItem, SegmentedTabs, IconTab
+- **VectorField** - Paired NumberFields (X/Y) for position or size.
+- **Toolbar** - A grouped button bar with ToolbarGroup / ToolbarSeparator.  ·  +ToolbarGroup, ToolbarSeparator
+- **StatusBar** - A thin bottom bar with StatusItem / StatusSpacer.  ·  +StatusItem, StatusSpacer
+- **ZoomControl** - A - 100% + zoom widget; page owns the zoom number.
+- **SplitButton** - A main action + a caret dropdown; page owns the open bool.
+- **SwatchPalette** - A grid of selectable color swatches (Swatch); page owns the selected hex + colors.  ·  +Swatch
+- **AppSidebar** - AppSidebar - a collapsible nav panel (SidebarHeader / SidebarGroup / SidebarItem). Named AppSidebar so it never shadows muten's core Sidebar <aside> primitive.  ·  +SidebarHeader, SidebarGroup, SidebarGroupLabel, SidebarItem
+- **Inspector** - Property grid: InspectorSection (collapsible) / InspectorRow (label : value slot).  ·  +InspectorSection, InspectorRow
+- **CommandPalette** - A top-anchored modal holding a Command; page owns the open bool.
+- **Stepper** - Horizontal or vertical step progress indicator; done steps show a check, the current step is ringed (parts: Stepper, StepperVertical, Step).  ·  +StepperVertical, Step
+- **Timeline** - Vertical event timeline: a dot on a connector line + title/time/description per item (parts: Timeline, TimelineItem).  ·  +TimelineItem
+- **Pill** - A hero eyebrow chip (rounded-full, bigger than Badge); slot-based for an icon + text.
+- **FeatureGrid** - BLOCK: responsive grid of feature cards (icon + title + copy). Parts: FeatureGrid, FeatureCard.  ·  +FeatureCard
+- **Pricing** - BLOCK: a row of pricing tiers (name/price/features/CTA), featured highlight. Parts: Pricing, PricingTier, PricingFeature.  ·  +PricingTier, PricingTierFeatured, PricingFeature
+- **LogoCloud** - BLOCK: a 'trusted by' strip of logos, muted + grayscale until hover. Parts: LogoCloud, LogoCloudItem.  ·  +LogoCloudItem
+- **NavPill** - BLOCK: the floating glass navbar (sticky wrapper + glass pill + scroll animation baked in). Drop logo/links/CTA inside.
+- **StatBand** - BLOCK: a divided row of KPI stats. Parts: StatBand, Stat(label) - value goes in the slot (Span or Custom CountUp).  ·  +Stat
+- **FeatureRows** - BLOCK: numbered feature/schedule rows with side gutters (12-col grid inside). Parts: FeatureRows, FeatureRow.  ·  +FeatureRow
+- **BentoGallery** - BLOCK: fixed-row-height tiling gallery; cells pick their col-span. Parts: BentoGallery, BentoCell.  ·  +BentoCell
+- **ButtonGroup** - A segmented row of buttons that share borders. Put btn-outline buttons inside.
+- **InputGroup** - An input with a leading icon/addon in one bordered field.
+- **Skeleton** - A loading placeholder (pulse). Add size via class: Skeleton class("h-4 w-32").
+- **Kbd** - A keyboard key hint. Kbd { Span "Ctrl" }.
+- **Btn** - Plug-and-play button (part Btn - Button is a primitive). `Btn(variant: "default", onClick: save) { Span "Save" }`. variant: default|secondary|outline|ghost|destructive|link.
+- **Input** - Plug-and-play text input (part Input wraps SearchField). `Input(value: q, placeholder: "...")` - value is two-way bound. For typed/validated fields use a Form.
+- **LinkBtn** - A navigation link styled as a button. `LinkBtn(to: "/signup", variant: "default") { Span "Get started" }`.
+
+## Customs (21) - importable; some need a dep
+
+- **Slider** (`slider`) - A draggable range slider (Custom). Page owns the value number.
+- **InputOtp** (`input-otp`) - N single-character boxes synced to one value (Custom). Page owns the value text.
+- **Calendar** (`calendar`) - A month-grid date picker (Custom). Page owns the selected ISO date text.
+- **Toaster** (`toaster`) - Fixed toast notifications (Custom). Page bumps a trigger counter to fire one.
+- **Carousel** (`carousel`) - A slide carousel over a list (Custom). Page owns the slides list.
+- **Chart** (`chart`) - An SVG bar chart over a list of { label, value } (Custom).
+- **GradientBlinds** (`gradient-blinds`) · **needs npm: ogl** - Animated WebGL gradient + diagonal-blinds hero background that follows the cursor and fades into the page (needs ogl).
+- **Resizable** (`resizable`) - Two panels with a draggable splitter (Custom).
+- **ContextMenu** (`context-menu`) - Right-click an area to open a menu of items (Custom).
+- **NumberField** (`number-field`) - A numeric input with -/+ steppers, min/max/step (Custom).
+- **FileInput** (`file-input`) - A click/drag-drop file dropzone (Custom); emits file names.
+- **ColorPicker** (`color-picker`) - A swatch + saturation/value + hue popover (Custom); page owns the hex.
+- **TreeView** (`tree-view`) - A nested folder/file tree (Custom): expandable, selectable, icons + indent.
+- **CanvasHost** (`canvas-viewport`) - A <canvas> with pan/zoom (Custom) + a muten toolbar slot floating on top.
+- **TagInput** (`tag-input`) - Chips you add by typing + Enter (Custom); page owns a comma-joined text.
+- **RangeSlider** (`range-slider`) - A two-thumb range slider (Custom); page owns the low + high numbers.
+- **SortableList** (`sortable-list`) - Drag rows to reorder (Custom); page owns a comma-joined order.
+- **FolderPicker** (`folder-picker`) - Connect a local folder via showDirectoryPicker (Custom); emits the name.
+- **Hotkey** (`hotkey`) - A global keyboard shortcut (Cmd/Ctrl+key), invisible (Custom).
+- **Code** (`code`) - Syntax-highlighted code block that understands muten (shared highlight.js, same grammar as the VS Code extension).
+- **CountUp** (`count-up`) - Animate a formatted number (2.4M / 94% / 40ms / 99.99%) from 0 when it scrolls into view; lands on the exact target. Custom. Styled form (takes the class): `Custom CountUp inputs(to: "2.4M") class("text-4xl font-bold")`. For stat bands + hero metrics.
+
+## Class recipes (4) - style a primitive (Table is default-styled; typography/textarea/motion)
+
+- **textarea** - class("textarea")  ·  label: class("label")  ·  native select: class("native-select")
+- **typography** - Title "Docs" h1 class("prose-h1")   (prose-h1..h4 · prose-p|lead|large|small|muted|blockquote|code|list)
+- **table** - DataTable @rows columns(name, email, status)  -  STYLED BY DEFAULT (no class needed). `class("data-table")` still works as an explicit alias. Raw cells; for badge/formatted cells build with each + Stack.
+- **motion** - Page animations, all CSS + reduced-motion safe. Entrance: animate-fade-up|fade-in|scale-in|slide-in (+ d1..d6 stagger). Scroll: reveal|reveal-left|reveal-scale, and nav-scroll on a navbar. Hover/press: hover-lift, hover-glow, arrow-hover (nudges a trailing Icon), link-underline, press, float.
+
+### Gotcha: a part can not be named after a primitive (Button/Link/Form/Image/SearchField/DataTable/Icon/Text/Title/Span) - hence Btn/Input/LinkBtn. `Part(...) class(...)` is a syntax error.

package/globals.css

@@ -435,12 +435,14 @@
   .command-shortcut { @apply ml-auto text-xs tracking-widest text-muted-foreground; }
 
   /* ---- Table - style muten's DataTable to look shadcn: DataTable @rows columns(...) class("data-table") ---- */
-  .data-table { @apply w-full caption-bottom text-sm; }
-  .data-table thead tr { @apply border-b; }
-  .data-table th { @apply h-11 px-3 text-left align-middle font-medium text-muted-foreground whitespace-nowrap; }
-  .data-table tbody tr { @apply border-b transition-colors duration-200 hover:bg-muted/50; }
-  .data-table tbody tr:last-child { @apply border-0; }
-  .data-table td { @apply p-3 align-middle whitespace-nowrap; }
+  /* .mu-datatable is the base class the DataTable primitive always gets, so a bare `DataTable @rows columns(...)`
+     is styled out of the box (no class needed). Safe: DataTable is a leaf, never reused with another class. */
+  .data-table, .mu-datatable { @apply w-full caption-bottom text-sm; }
+  .data-table thead tr, .mu-datatable thead tr { @apply border-b; }
+  .data-table th, .mu-datatable th { @apply h-11 px-3 text-left align-middle font-medium text-muted-foreground whitespace-nowrap; }
+  .data-table tbody tr, .mu-datatable tbody tr { @apply border-b transition-colors duration-200 hover:bg-muted/50; }
+  .data-table tbody tr:last-child, .mu-datatable tbody tr:last-child { @apply border-0; }
+  .data-table td, .mu-datatable td { @apply p-3 align-middle whitespace-nowrap; }
 
   /* ---- Slider (Custom; the host JS builds .slider-range + .slider-thumb inside .slider) ---- */
   .slider { @apply relative h-2 w-full rounded-full bg-primary/20 cursor-pointer select-none; touch-action: none; }
@@ -715,6 +717,12 @@
   .pricing-features { @apply flex flex-col gap-2.5 flex-1; }
   .pricing-feature { @apply flex flex-row items-center gap-2 text-sm; }
 
+  /* ---- StatBand: a divided row of KPI stats (value + label), uniform, 2-up on mobile ---- */
+  .stat-band { @apply grid grid-cols-4 gap-px border-y border-border bg-border overflow-hidden max-sm:grid-cols-2; }
+  .stat { @apply flex flex-col items-center gap-1 bg-background px-6 py-10 text-center; }
+  .stat-value { @apply text-4xl font-bold tracking-tight; }
+  .stat-label { @apply text-sm text-muted-foreground; }
+
   /* ---- LogoCloud: the "trusted by" strip - a wrapping row of logos, muted until hover. GENERIC: an item holds
      ANY logo type - an <img>, an inline SVG/Icon, or a text wordmark - and each is normalized to the same height. ---- */
   .logo-cloud { @apply flex flex-row flex-wrap items-center justify-center gap-x-10 gap-y-6; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",
@@ -15,7 +15,8 @@
     "registry",
     "registry.json",
     "globals.css",
-    "README.md"
+    "README.md",
+    "AGENTS.md"
   ],
   "exports": {
     "./globals.css": "./globals.css",

package/registry/bento.muten

@@ -0,0 +1,9 @@
+# BentoGallery - a tiling gallery on a fixed row-height grid, so cells of different column widths always line up.
+# Each BentoCell picks its own col-span (and bg / content) via class:
+#   BentoGallery {
+#     BentoCell class("col-span-4 bg-muted") { Span "01" }
+#     BentoCell class("col-span-2 bg-accent") { Span "02" }
+#   }
+# shadcn-for-muten · block · no deps · uses .bento-gallery / .bento-cell from globals.css.
+part BentoGallery() { Stack class("bento-gallery") { slot } }
+part BentoCell() { Stack class("bento-cell") { slot } }

package/registry/button-group.muten

@@ -0,0 +1,4 @@
+# ButtonGroup - segmented row of buttons that share borders. Put `btn btn-outline` buttons inside:
+#   ButtonGroup { Button "Bold" -> b class("btn btn-outline")  Button "Italic" -> i class("btn btn-outline") }
+# shadcn-for-muten · part · no deps · uses .btn-group from globals.css.
+part ButtonGroup() { Stack class("btn-group") { slot } }

package/registry/button.muten

@@ -0,0 +1,8 @@
+# Button (part name Btn - `Button` is a muten primitive, so a part can't reuse that name) - a plug-and-play
+# button. No class props: pass a `variant` + your action, put the label/icon in the slot.
+#   Btn(variant: "default", onClick: save) { Span "Save" }
+#   Btn(variant: "outline", onClick: cancel) { Icon "lucide:x" class("size-4")  Span "Cancel" }
+# variant: default | secondary | outline | ghost | destructive | link. For a link that looks like a button use
+# `Link "..." -> "/path" class("btn btn-default")`; for sizes add btn-sm|btn-lg on the primitive.
+# shadcn-for-muten · part · no deps · wraps the Button primitive + the .btn recipe.
+part Btn(variant: text, onClick: action) { Button -> $onClick class("btn btn-{$variant}") { slot } }

package/registry/feature-rows.muten

@@ -0,0 +1,8 @@
+# FeatureRows - a divided list of numbered feature/schedule rows, each with its own side gutters so the index
+# never kisses the edge. A FeatureRow is a 12-col grid (index · title · copy); it stacks on mobile.
+#   FeatureRows {
+#     FeatureRow { Span "01" class("col-span-1")  Title "One command" h3 class("col-span-4")  Text "..." class("col-span-7") }
+#   }
+# shadcn-for-muten · block · no deps · uses .feature-rows / .feature-row from globals.css.
+part FeatureRows() { Stack class("feature-rows") { slot } }
+part FeatureRow() { Stack class("feature-row") { slot } }

package/registry/input-group.muten

@@ -0,0 +1,4 @@
+# InputGroup - an input with a leading icon / addon in one bordered field:
+#   InputGroup { Icon "lucide:search"  SearchField bind(q) "Search..." class("input-group-control") }
+# shadcn-for-muten · part · no deps · uses .input-group from globals.css.
+part InputGroup() { Stack class("input-group") { slot } }

package/registry/input.muten

@@ -0,0 +1,7 @@
+# Input (part name Input - muten's text-input primitive is `SearchField`, so this wraps it) - a plug-and-play
+# text input. No class props: pass a state to `value` (two-way bound) + a placeholder.
+#   state { email = "" : text }
+#   Input(value: email, placeholder: "you@example.com")
+# For typed fields (email/number/password/date) or validation, use a `Form` over an entity instead.
+# shadcn-for-muten · part · no deps · wraps SearchField + the .input recipe.
+part Input(value: text, placeholder: text) { SearchField bind($value) "{$placeholder}" class("input") }

package/registry/kbd.muten

@@ -0,0 +1,3 @@
+# Kbd - a keyboard key hint. `Kbd { Span "Ctrl" }` or with class for combos.
+# shadcn-for-muten · part · no deps · uses .kbd from globals.css.
+part Kbd() { Span class("kbd") { slot } }

package/registry/link-btn.muten

@@ -0,0 +1,7 @@
+# LinkBtn - a navigation link that looks like a button (plug-and-play, no class props). For CTAs that go to a
+# route. Put the label/icon in the slot.
+#   LinkBtn(to: "/signup", variant: "default") { Span "Get started" }
+#   LinkBtn(to: "/docs", variant: "outline") { Span "Read the docs"  Icon "lucide:arrow-right" class("size-4") }
+# variant: default | secondary | outline | ghost | destructive | link.
+# shadcn-for-muten · part · no deps · wraps the Link primitive + the .btn recipe.
+part LinkBtn(to: text, variant: text) { Link -> "{$to}" class("btn btn-{$variant}") { slot } }

package/registry/navpill.muten

@@ -0,0 +1,10 @@
+# NavPill - the floating glass navbar, batteries included: a sticky + padded wrapper, the glass pill, AND the
+# scroll animation (settles + returns to rest at the top). Just drop your logo / links / CTA inside; it lays them
+# out with space-between (logo left, the rest right).
+#   NavPill {
+#     Stack class("flex flex-row items-center gap-2") { Icon "lucide:hexagon" class("size-5 text-primary")  Span "Acme" class("font-bold") }
+#     Stack class("flex flex-row items-center gap-6 text-sm text-muted-foreground max-md:hidden") { Link "Features" -> "/" class("link-underline")  Link "Pricing" -> "/" class("link-underline") }
+#     Link "Get started" -> "/" class("btn btn-default btn-sm press")
+#   }
+# shadcn-for-muten · part · no deps · uses .nav-pill + nav-scroll from globals.css.
+part NavPill() { Stack class("sticky top-0 z-50 px-4 pt-4") { Header class("nav-pill nav-scroll mx-auto w-full max-w-5xl") { slot } } }

package/registry/skeleton.muten

@@ -0,0 +1,4 @@
+# Skeleton - a loading placeholder. Add the size utilities via class (paramless part, so class() works):
+#   Skeleton class("h-4 w-32")   ·   Skeleton class("size-10 rounded-full")
+# shadcn-for-muten · part · no deps · uses .skeleton (pulse) from globals.css.
+part Skeleton() { Stack class("skeleton") { slot } }

package/registry/stat-band.muten

@@ -0,0 +1,9 @@
+# StatBand - a divided row of stats (KPIs), uniform + responsive (2-up on mobile). Each Stat holds its value in
+# the slot (a Span, or a `Custom CountUp` for the count-up animation) plus a label:
+#   StatBand {
+#     Stat(label: "trees planted") { Custom CountUp inputs(to: "2.4M") class("stat-value") }
+#     Stat(label: "countries")     { Span "58" class("stat-value") }
+#   }
+# shadcn-for-muten · block · no deps · uses .stat-band / .stat / .stat-value / .stat-label from globals.css.
+part StatBand() { Stack class("stat-band") { slot } }
+part Stat(label: text) { Stack class("stat") { slot  Span "{$label}" class("stat-label") } }

package/registry.json

@@ -545,22 +545,90 @@
       "component": "CountUp",
       "description": "Animate a formatted number (2.4M / 94% / 40ms / 99.99%) from 0 when it scrolls into view; lands on the exact target. Custom. Styled form (takes the class): `Custom CountUp inputs(to: \"2.4M\") class(\"text-4xl font-bold\")`. For stat bands + hero metrics.",
       "deps": []
+    },
+    {
+      "name": "navpill",
+      "part": "NavPill",
+      "file": "registry/navpill.muten",
+      "description": "BLOCK: the floating glass navbar (sticky wrapper + glass pill + scroll animation baked in). Drop logo/links/CTA inside.",
+      "deps": []
+    },
+    {
+      "name": "stat-band",
+      "part": "StatBand",
+      "file": "registry/stat-band.muten",
+      "description": "BLOCK: a divided row of KPI stats. Parts: StatBand, Stat(label) - value goes in the slot (Span or Custom CountUp).",
+      "deps": []
+    },
+    {
+      "name": "feature-rows",
+      "part": "FeatureRows",
+      "file": "registry/feature-rows.muten",
+      "description": "BLOCK: numbered feature/schedule rows with side gutters (12-col grid inside). Parts: FeatureRows, FeatureRow.",
+      "deps": []
+    },
+    {
+      "name": "bento",
+      "part": "BentoGallery",
+      "file": "registry/bento.muten",
+      "description": "BLOCK: fixed-row-height tiling gallery; cells pick their col-span. Parts: BentoGallery, BentoCell.",
+      "deps": []
+    },
+    {
+      "name": "button-group",
+      "part": "ButtonGroup",
+      "file": "registry/button-group.muten",
+      "description": "A segmented row of buttons that share borders. Put btn-outline buttons inside.",
+      "deps": []
+    },
+    {
+      "name": "input-group",
+      "part": "InputGroup",
+      "file": "registry/input-group.muten",
+      "description": "An input with a leading icon/addon in one bordered field.",
+      "deps": []
+    },
+    {
+      "name": "skeleton",
+      "part": "Skeleton",
+      "file": "registry/skeleton.muten",
+      "description": "A loading placeholder (pulse). Add size via class: Skeleton class(\"h-4 w-32\").",
+      "deps": []
+    },
+    {
+      "name": "kbd",
+      "part": "Kbd",
+      "file": "registry/kbd.muten",
+      "description": "A keyboard key hint. Kbd { Span \"Ctrl\" }.",
+      "deps": []
+    },
+    {
+      "name": "button",
+      "part": "Btn",
+      "file": "registry/button.muten",
+      "description": "Plug-and-play button (part Btn - Button is a primitive). `Btn(variant: \"default\", onClick: save) { Span \"Save\" }`. variant: default|secondary|outline|ghost|destructive|link.",
+      "deps": []
+    },
+    {
+      "name": "input",
+      "part": "Input",
+      "file": "registry/input.muten",
+      "description": "Plug-and-play text input (part Input wraps SearchField). `Input(value: q, placeholder: \"...\")` - value is two-way bound. For typed/validated fields use a Form.",
+      "deps": []
+    },
+    {
+      "name": "link-btn",
+      "part": "LinkBtn",
+      "file": "registry/link-btn.muten",
+      "description": "A navigation link styled as a button. `LinkBtn(to: \"/signup\", variant: \"default\") { Span \"Get started\" }`.",
+      "deps": []
     }
   ],
   "classComponents": {
     "note": "Size/spacing-driven primitives ship as classes in globals.css (no `muten add` needed once you @import it). Style the muten primitive with these:",
-    "button": "Button \"Save\" -> save class(\"btn btn-default\")   (variants: btn-default|btn-secondary|btn-outline|btn-ghost|btn-destructive|btn-link · sizes: btn-sm|btn-lg|btn-icon)",
-    "input": "SearchField bind(q) class(\"input\")",
     "textarea": "class(\"textarea\")  ·  label: class(\"label\")  ·  native select: class(\"native-select\")",
-    "skeleton": "Stack class(\"skeleton h-4 w-32\")   (add the size utilities)",
-    "kbd": "Span \"Ctrl\" class(\"kbd\")",
     "typography": "Title \"Docs\" h1 class(\"prose-h1\")   (prose-h1..h4 · prose-p|lead|large|small|muted|blockquote|code|list)",
-    "button-group": "Stack class(\"btn-group\") { Button \"A\" class(\"btn btn-outline\") Button \"B\" class(\"btn btn-outline\") }",
-    "input-group": "Stack class(\"input-group\") { Icon \"lucide:search\" SearchField bind(q) class(\"input-group-control\") }",
-    "nav-pill": "Header class(\"nav-pill\")  -  the floating glass navbar; wrap in Stack class(\"sticky top-0 z-50 px-4 pt-4\"). Add `nav-scroll` so it settles + deepens its shadow on scroll and returns to rest at the top.",
-    "feature-rows": "Stack class(\"feature-rows\") { Stack class(\"feature-row\") { Span \"01\" ... } }  -  numbered feature/schedule rows with baked side gutters (grid-cols-12 inside, stacks on mobile).",
-    "bento-gallery": "Stack class(\"bento-gallery\") { Stack class(\"bento-cell col-span-4\") {} Stack class(\"bento-cell col-span-2\") {} }  -  a fixed-row-height tiling gallery; children pick their col-span so every row lines up.",
-    "logo-cloud": "LogoCloud { LogoCloudItem { Span \"Acme\" } LogoCloudItem { Icon \"lucide:hexagon\" Span \"Northwind\" } }  -  a 'trusted by' strip, muted+grayscale until hover; accepts any logo type (image / icon / wordmark).",
+    "table": "DataTable @rows columns(name, email, status)  -  STYLED BY DEFAULT (no class needed). `class(\"data-table\")` still works as an explicit alias. Raw cells; for badge/formatted cells build with each + Stack.",
     "motion": "Page animations, all CSS + reduced-motion safe. Entrance: animate-fade-up|fade-in|scale-in|slide-in (+ d1..d6 stagger). Scroll: reveal|reveal-left|reveal-scale, and nav-scroll on a navbar. Hover/press: hover-lift, hover-glow, arrow-hover (nudges a trailing Icon), link-underline, press, float."
   }
 }