@muten/shadcn 0.0.4 → 0.0.7

package/AGENTS.md

@@ -0,0 +1,116 @@
+# @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.
+
+> **Native primitives always win — for a checkbox / select / number / range / date / chart, use the native muten
+> primitive, NOT a plugin part.** muten's core now ships these as primitives, so this plugin does NOT: write
+> `Checkbox bind(agree)`, `Select bind(theme) options(System, Light, Dark) class("native-select")` (the `.native-select`
+> class gives the native `<select>` the shadcn look), `Number bind(qty)`, `Range bind(vol)`, `Date bind(due)`,
+> `Chart @data kind(bar) x(label) y(value)`. A part named the same as a primitive is unreachable (the primitive
+> shadows it), so those parts were removed. For a *searchable* dropdown use the `Combobox` part.
+> **The exact props of every part are in the header comment of `node_modules/@muten/shadcn/registry/<name>.muten` —
+> read it before calling (the one-liners below are the catalog, not the API).**
+
+## 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 (62) - 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
+- **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).
+- **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 (20) - 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.
+- **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 core primitive — the **primitive wins** and any same-named plugin part is unreachable on import. The primitives include `Button/Link/Form/Image/SearchField/DataTable/Icon/Text/Title/Span` (→ this plugin uses `Btn`/`Input`/`LinkBtn`) AND `Select/Checkbox/Number/Range/Date/Chart` (→ use those primitives directly, see the note at the top). If you write a part call and the oracle says `missing-prop: X is missing the required "bind"`, X is a primitive shadowing the part — switch to the primitive's API.
+
+### Gotcha: a **part takes NO trailing modifiers** — `Part(...) class(...)`, `Part(...) disabled when x`, `Part(...) on(...)` and `Part(...) aria(...)` are all syntax errors (a part call ends at its `)`/`{}`). When you need `class`/`disabled when`/`on`/`aria` on a control, use the **native primitive** (`Button "Save" -> save disabled when not valid class("btn btn-default")`), not the `Btn(...)` part.

package/README.md

@@ -94,19 +94,25 @@ Display: **card** (Card / CardHeader / CardTitle / CardDescription / CardContent
 **alert** (Alert / AlertTitle / AlertDescription), **avatar**, **spinner**, **progress**, **empty**,
 **breadcrumb**, **pagination**, **field**, **item**.
 
-Stateful (the page owns the state, the part receives it - see the pattern below): **switch**, **checkbox**,
+Stateful (the page owns the state, the part receives it - see the pattern below): **switch**,
 **toggle**, **toggle-group**, **radio-group**, **collapsible**, **accordion**, **tabs**.
 
 Overlays (the page owns an `open` bool): **dialog**, **alert-dialog**, **tooltip** (pure hover, no state),
-**dropdown-menu**, **popover**, **sheet**, **drawer**, **hover-card** (hover), **select**, **scroll-area**,
+**dropdown-menu**, **popover**, **sheet**, **drawer**, **hover-card** (hover), **scroll-area**,
 **menubar**, **navigation-menu** (hover), **combobox**, **command**.
 
+> **Not here on purpose:** checkbox / select / number / range / date / chart are **native muten primitives** now,
+> so this plugin ships no part for them (a same-named part would be shadowed by the primitive). Use `Checkbox bind(x)`,
+> `Select bind(x) options(a, b) class("native-select")`, `Number`/`Range`/`Date bind(x)`, `Chart @data kind(bar) …`.
+> For a *searchable* dropdown, use **combobox**.
+
 Chat: **message** (Message / Bubble / Marker), **message-scroller**, **attachment**.
 
 ### Custom (eject-only - `muten add` copies a host `.js` into `src/components/`)
 
-The genuinely interactive 20%: **slider**, **input-otp**, **calendar**, **toaster**, **carousel**, **chart**,
-**resizable**, **context-menu**. Each is a thin muten part over a small vanilla-JS host you own and can edit.
+The genuinely interactive 20%: **input-otp**, **toaster**, **carousel**, **resizable**, **context-menu** (+ more,
+see AGENTS.md). Each is a thin muten part over a small vanilla-JS host you own and can edit. (A chart / slider /
+date picker is **native** — `Chart`/`Range`/`Date` — not a Custom; don't `muten add` those.)
 
 `calendar` ships all the shadcn variants: `mode` (`single` / `range` / `multiple`), `months` (1-2 side by side),
 `caption` (`label` / `dropdown`). `selected` encodes the value (`"yyyy-mm-dd"`, `"from/to"`, or `"d1,d2,..."`).

package/globals.css

@@ -175,6 +175,7 @@
      raw <svg> child - muten renders icons as iconify-icon). Icon sizing is the `.btn svg` rule below. */
   .btn { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-none transition-all shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] active:scale-[0.97] aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 h-8 px-3; }
   .btn-default { @apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 active:bg-primary/80; }
+  .btn-primary { @apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 active:bg-primary/80; } /* alias of btn-default — tolerate the near-universal `btn-primary` idiom */
   .btn-destructive { @apply bg-destructive text-white shadow-xs hover:bg-destructive/90 active:bg-destructive/80 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60; }
   .btn-outline { @apply border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground active:bg-accent/70 dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-input/70; }
   .btn-secondary { @apply bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 active:bg-secondary/70; }
@@ -197,6 +198,20 @@
   .label { @apply text-sm font-medium leading-none; }
   .native-select { @apply flex h-8 w-full items-center rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive dark:bg-input/30 disabled:cursor-not-allowed disabled:opacity-50; }
 
+  /* ---- native primitives styled shadcn-flavored (muten core ships Checkbox/Number/Range/Date/Chart) ---- */
+  .mu-checkbox { @apply inline-flex items-center gap-2 text-sm; }
+  .mu-checkbox input, .mu-field-check { @apply size-4 rounded-[4px] border-input; accent-color: var(--primary); }
+  .mu-number, .mu-date { @apply flex h-8 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30; }
+  .mu-range { @apply w-full; accent-color: var(--primary); }
+  .mu-chart-bar, .mu-chart-dot, .mu-chart-slice { fill: var(--primary); }
+  .mu-chart-slice { stroke: var(--card); stroke-width: 2.5; }
+  .mu-chart-dot { stroke: var(--card); stroke-width: 2; }
+  .mu-chart-line { fill: none; stroke: var(--primary); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
+  .mu-chart-area { stroke: none; } /* fill comes from the inline accent→transparent gradient __chart draws */
+  .mu-chart-grid { stroke: var(--border); stroke-opacity: 0.55; }
+  .mu-chart-tick, .mu-chart-xlabel { fill: var(--muted-foreground); font-size: 10px; font-variant-numeric: tabular-nums; }
+  .mu-chart-total { fill: var(--foreground); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
+
   /* ---- Card ---- */
   .card { @apply bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm; }
   .card-header { @apply grid auto-rows-min items-start gap-1.5 px-6; }
@@ -435,12 +450,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 +732,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; }
@@ -738,6 +761,16 @@
      (the classic "call to action" micro-interaction). Respects reduced motion via the global rule below. ---- */
   .arrow-hover .mu-icon { @apply transition-transform duration-200; }
   .arrow-hover:hover .mu-icon:last-child { translate: 3px 0; }
+
+  /* ---- Touch targets. These components are sized for a mouse (h-8 = 32px); Apple HIG asks for >=44px and
+     Material for >=48dp before a finger hits reliably. `pointer: coarse` is the browser telling us there IS a
+     finger, so the SAME app adapts on a phone with no mobile build, no second plugin and no decision for the
+     author to make. Inside @layer components on purpose: a class("h-14") on the Button still wins.
+     Deliberately NOT everything h-8: `btn-xs`/`switch` are small by intent, and badges/avatars aren't targets. ---- */
+  @media (pointer: coarse) {
+    .btn, .input, .toggle, .select-trigger, .native-select { @apply h-11; }
+    .btn-sm { @apply h-10; }
+  }
 }
 
 @keyframes progress-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }
@@ -754,8 +787,11 @@
 @keyframes mu-slide-in    { from { opacity: 0; translate: -1.5rem 0; } to { opacity: 1; translate: 0 0; } }
 @keyframes mu-reveal-scale{ from { opacity: 0; scale: 0.92; translate: 0 1rem; } to { opacity: 1; scale: 1; translate: 0 0; } }
 /* nav pill: airy + shadowless at the top, settles + deepens its shadow once you scroll, and reverses smoothly
-   when you return to the top (scroll-position driven, so "back to top" is free). */
-@keyframes mu-nav-scroll  { from { scale: 1.015; box-shadow: 0 4px 12px -6px rgb(0 0 0 / 0.10); } to { scale: 0.98; box-shadow: 0 16px 36px -10px rgb(0 0 0 / 0.30); } }
+   when you return to the top (scroll-position driven, so "back to top" is free).
+   It scrubs the SHADOW ONLY. It used to scrub `scale: 1.015 → 0.98` as well, which resized the navbar by 3.5% of
+   its own width on every scroll — a visible jump on each landing, and blurred nav text for the whole animation.
+   A navbar is furniture: it may deepen, it must never change size. */
+@keyframes mu-nav-scroll  { from { box-shadow: 0 4px 12px -6px rgb(0 0 0 / 0.10); } to { box-shadow: 0 16px 36px -10px rgb(0 0 0 / 0.30); } }
 @keyframes mu-float       { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
 
 @layer utilities {

package/motion.css

@@ -0,0 +1,49 @@
+/* @muten/shadcn/motion.css — a small, tasteful set of entrance + hover animations, as CLASSES the AI can just
+   apply (`class("animate-rise")`). CSS-only, plays once on mount, and fully disabled under reduced-motion.
+   Import after globals:  @import "@muten/shadcn/globals.css";  @import "@muten/shadcn/motion.css";
+
+   Vocabulary:
+     animate-fade-in   — fade in
+     animate-rise      — fade + slide up (the default for hero copy, cards, sections)
+     animate-scale-in  — fade + subtle scale (badges, images, pop-ins)
+     animate-blur-in   — fade + un-blur (editorial hero images / big type)
+     stagger           — on a CONTAINER: its direct children rise in sequence (feature grids, lists)
+     hover-lift        — on a card/link: lifts + deepens shadow on hover
+     hover-zoom         — on an image WRAPPER (add `overflow-hidden`): the <img> scales gently on hover
+*/
+
+@keyframes mu-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes mu-rise    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
+@keyframes mu-scale-in{ from { opacity: 0; transform: scale(0.96); }      to { opacity: 1; transform: none; } }
+@keyframes mu-blur-in { from { opacity: 0; filter: blur(12px); transform: scale(1.02); } to { opacity: 1; filter: blur(0); transform: none; } }
+
+.animate-fade-in  { animation: mu-fade-in  0.6s var(--mu-ease, cubic-bezier(0.16,1,0.3,1)) both; }
+.animate-rise     { animation: mu-rise     0.7s var(--mu-ease, cubic-bezier(0.16,1,0.3,1)) both; }
+.animate-scale-in { animation: mu-scale-in 0.6s var(--mu-ease, cubic-bezier(0.16,1,0.3,1)) both; }
+.animate-blur-in  { animation: mu-blur-in  0.9s var(--mu-ease, cubic-bezier(0.16,1,0.3,1)) both; }
+
+/* Stagger: children rise in, each ~80ms after the last (up to 12; more just share the last delay). */
+.stagger > * { animation: mu-rise 0.7s var(--mu-ease, cubic-bezier(0.16,1,0.3,1)) both; }
+.stagger > *:nth-child(1)  { animation-delay: 0.00s; }
+.stagger > *:nth-child(2)  { animation-delay: 0.08s; }
+.stagger > *:nth-child(3)  { animation-delay: 0.16s; }
+.stagger > *:nth-child(4)  { animation-delay: 0.24s; }
+.stagger > *:nth-child(5)  { animation-delay: 0.32s; }
+.stagger > *:nth-child(6)  { animation-delay: 0.40s; }
+.stagger > *:nth-child(7)  { animation-delay: 0.48s; }
+.stagger > *:nth-child(8)  { animation-delay: 0.56s; }
+.stagger > *:nth-child(9)  { animation-delay: 0.64s; }
+.stagger > *:nth-child(10) { animation-delay: 0.72s; }
+.stagger > *:nth-child(11) { animation-delay: 0.80s; }
+.stagger > *:nth-child(n+12) { animation-delay: 0.88s; }
+
+/* Hover affordances. */
+.hover-lift { transition: transform var(--mu-motion, 200ms) var(--mu-ease, cubic-bezier(0.16,1,0.3,1)), box-shadow var(--mu-motion, 200ms) ease; }
+.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft, 0 12px 32px -12px rgb(0 0 0 / 0.25)); }
+.hover-zoom img { transition: transform 0.5s var(--mu-ease, cubic-bezier(0.16,1,0.3,1)); }
+.hover-zoom:hover img { transform: scale(1.05); }
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-fade-in, .animate-rise, .animate-scale-in, .animate-blur-in, .stagger > * { animation: none !important; }
+  .hover-lift, .hover-zoom img { transition: none !important; }
+}

package/package.json

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

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

@@ -94,13 +94,6 @@
       "description": "A bordered row: ItemContent / ItemTitle / ItemDescription.",
       "deps": []
     },
-    {
-      "name": "checkbox",
-      "part": "Checkbox",
-      "file": "registry/checkbox.muten",
-      "description": "A checkbox; the page owns the bool + the toggle action.",
-      "deps": []
-    },
     {
       "name": "toggle",
       "part": "Toggle",
@@ -199,13 +192,6 @@
       "description": "Richer content shown on hover (pure CSS, no state).",
       "deps": []
     },
-    {
-      "name": "select",
-      "part": "Select",
-      "file": "registry/select.muten",
-      "description": "A value picker with SelectItem; page owns the value text + open bool.",
-      "deps": []
-    },
     {
       "name": "scroll-area",
       "part": "ScrollArea",
@@ -302,14 +288,6 @@
       "description": "A slide carousel over a list (Custom). Page owns the slides list.",
       "deps": []
     },
-    {
-      "name": "chart",
-      "part": "Chart",
-      "file": "registry/chart.muten",
-      "component": "Chart",
-      "description": "An SVG bar chart over a list of { label, value } (Custom).",
-      "deps": []
-    },
     {
       "name": "gradient-blinds",
       "part": "GradientBlinds",
@@ -545,22 +523,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."
   }
 }

package/themes/bloom.css

@@ -0,0 +1,53 @@
+/* @muten/shadcn/themes/bloom.css — "Bloom": soft, friendly, rounded. A rounded display (Quicksand) + Inter, gentle
+   pastel tints (lavender paper, violet accent), large radius, airy soft shadows. Import AFTER globals.css.
+   @import "@muten/shadcn/globals.css";  @import "@muten/shadcn/themes/bloom.css"; */
+
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Quicksand", ui-rounded, ui-sans-serif, system-ui, sans-serif; /* `font-serif` on headings → rounded display */
+}
+
+:root {
+  --radius: 1rem;                               /* pillowy */
+  --background: oklch(0.99 0.008 310);
+  --foreground: oklch(0.30 0.04 300);
+  --card: oklch(1 0.004 310);
+  --card-foreground: oklch(0.30 0.04 300);
+  --popover: oklch(1 0.004 310);
+  --popover-foreground: oklch(0.30 0.04 300);
+  --primary: oklch(0.62 0.19 300);             /* soft violet */
+  --primary-foreground: oklch(0.99 0.008 310);
+  --secondary: oklch(0.95 0.03 310);
+  --secondary-foreground: oklch(0.40 0.06 300);
+  --muted: oklch(0.955 0.022 315);
+  --muted-foreground: oklch(0.55 0.05 300);
+  --accent: oklch(0.93 0.04 340);              /* rose tint */
+  --accent-foreground: oklch(0.40 0.08 340);
+  --destructive: oklch(0.60 0.20 20);
+  --border: oklch(0.91 0.025 315);
+  --input: oklch(0.91 0.025 315);
+  --ring: oklch(0.62 0.19 300);
+}
+/* bridge both selectors: muten sets `data-theme="dark"`, shadcn keys off the `.dark` class (globals.css does the same). */
+.dark, [data-theme="dark"] {
+  --background: oklch(0.21 0.03 300);
+  --foreground: oklch(0.95 0.02 315);
+  --card: oklch(0.25 0.035 300);
+  --card-foreground: oklch(0.95 0.02 315);
+  --popover: oklch(0.25 0.035 300);
+  --popover-foreground: oklch(0.95 0.02 315);
+  --primary: oklch(0.72 0.17 300);
+  --primary-foreground: oklch(0.20 0.03 300);
+  --secondary: oklch(0.30 0.035 300);
+  --secondary-foreground: oklch(0.95 0.02 315);
+  --muted: oklch(0.30 0.035 300);
+  --muted-foreground: oklch(0.75 0.03 310);
+  --accent: oklch(0.34 0.05 340);
+  --accent-foreground: oklch(0.95 0.02 315);
+  --destructive: oklch(0.68 0.18 20);
+  --border: oklch(0.33 0.035 300);
+  --input: oklch(0.35 0.035 300);
+  --ring: oklch(0.72 0.17 300);
+}
+@theme { --shadow-soft: 0 2px 8px oklch(0.5 0.1 300 / 0.06), 0 16px 40px -16px oklch(0.5 0.15 300 / 0.20); }

package/themes/editorial.css

@@ -0,0 +1,65 @@
+/* @muten/shadcn/themes/editorial.css — "Editorial": a warm, quiet, luxury look. A display serif (Fraunces) + a
+   clean sans (Inter), sand/stone neutrals with a terracotta accent, generous radius, soft warm shadows.
+   Import AFTER globals.css:  @import "@muten/shadcn/globals.css";  @import "@muten/shadcn/themes/editorial.css";
+   Works in light (default) and dark. `font-serif` now renders Fraunces, so headings feel editorial for free. */
+
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap");
+
+/* Tailwind picks these up: `font-sans` → Inter, `font-serif` → Fraunces (use it on headings). */
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
+}
+
+/* LIGHT — warm sand paper, deep-ink text, terracotta as the single accent (primary = buttons + `text-primary`). */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.985 0.007 83);
+  --foreground: oklch(0.24 0.017 55);
+  --card: oklch(0.997 0.004 83);
+  --card-foreground: oklch(0.24 0.017 55);
+  --popover: oklch(0.997 0.004 83);
+  --popover-foreground: oklch(0.24 0.017 55);
+  --primary: oklch(0.62 0.115 46);              /* terracotta */
+  --primary-foreground: oklch(0.99 0.006 83);
+  --secondary: oklch(0.955 0.011 80);
+  --secondary-foreground: oklch(0.30 0.02 50);
+  --muted: oklch(0.955 0.011 80);
+  --muted-foreground: oklch(0.52 0.018 60);
+  --accent: oklch(0.94 0.016 74);               /* subtle warm hover bg (stays neutral, per shadcn) */
+  --accent-foreground: oklch(0.30 0.02 50);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.905 0.012 76);
+  --input: oklch(0.905 0.012 76);
+  --ring: oklch(0.62 0.115 46);
+}
+
+/* DARK — warm near-black, cream text, terracotta glows. */
+/* bridge both selectors: muten sets `data-theme="dark"`, shadcn keys off the `.dark` class (globals.css does the same). */
+.dark, [data-theme="dark"] {
+  --background: oklch(0.195 0.012 58);
+  --foreground: oklch(0.955 0.008 83);
+  --card: oklch(0.235 0.014 58);
+  --card-foreground: oklch(0.955 0.008 83);
+  --popover: oklch(0.235 0.014 58);
+  --popover-foreground: oklch(0.955 0.008 83);
+  --primary: oklch(0.70 0.128 47);              /* terracotta, brighter for dark */
+  --primary-foreground: oklch(0.20 0.012 58);
+  --secondary: oklch(0.28 0.014 58);
+  --secondary-foreground: oklch(0.955 0.008 83);
+  --muted: oklch(0.28 0.014 58);
+  --muted-foreground: oklch(0.72 0.013 72);
+  --accent: oklch(0.30 0.015 58);
+  --accent-foreground: oklch(0.955 0.008 83);
+  --destructive: oklch(0.65 0.19 25);
+  --border: oklch(0.31 0.014 58);
+  --input: oklch(0.33 0.014 58);
+  --ring: oklch(0.70 0.128 47);
+}
+
+/* Editorial polish that the token vars alone can't express. */
+body { font-feature-settings: "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+/* Fraunces headings: a touch of optical weight + tight tracking reads as "designed", not default-serif. */
+h1, h2, h3, .font-serif { letter-spacing: -0.01em; }
+/* soft, warm-tinted elevation (shadcn ships flat) — reach for it on cards/hero via `shadow-soft`. */
+@theme { --shadow-soft: 0 1px 2px oklch(0.4 0.03 60 / 0.04), 0 8px 24px -12px oklch(0.4 0.05 60 / 0.14); }

package/themes/noir.css

@@ -0,0 +1,54 @@
+/* @muten/shadcn/themes/noir.css — "Noir": crisp, high-contrast, mono-minimal. A grotesk display (Space Grotesk) +
+   Inter, near-monochrome cool neutrals, sharp corners, one stark ink accent. Import AFTER globals.css.
+   @import "@muten/shadcn/globals.css";  @import "@muten/shadcn/themes/noir.css"; */
+
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* `font-serif` on headings → grotesk display */
+}
+
+:root {
+  --radius: 0.25rem;                            /* sharp */
+  --background: oklch(0.995 0 0);
+  --foreground: oklch(0.16 0.004 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.16 0.004 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.16 0.004 260);
+  --primary: oklch(0.16 0.004 260);            /* ink */
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.965 0.002 260);
+  --secondary-foreground: oklch(0.16 0.004 260);
+  --muted: oklch(0.965 0.002 260);
+  --muted-foreground: oklch(0.48 0.006 260);
+  --accent: oklch(0.95 0.003 260);
+  --accent-foreground: oklch(0.16 0.004 260);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.90 0.004 260);
+  --input: oklch(0.90 0.004 260);
+  --ring: oklch(0.16 0.004 260);
+}
+/* bridge both selectors: muten sets `data-theme="dark"`, shadcn keys off the `.dark` class (globals.css does the same). */
+.dark, [data-theme="dark"] {
+  --background: oklch(0.145 0.004 260);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.185 0.005 260);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.185 0.005 260);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.98 0 0);                  /* stark white on black */
+  --primary-foreground: oklch(0.16 0.004 260);
+  --secondary: oklch(0.24 0.006 260);
+  --secondary-foreground: oklch(0.98 0 0);
+  --muted: oklch(0.24 0.006 260);
+  --muted-foreground: oklch(0.68 0.006 260);
+  --accent: oklch(0.26 0.006 260);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.65 0.19 25);
+  --border: oklch(0.27 0.006 260);
+  --input: oklch(0.30 0.006 260);
+  --ring: oklch(0.98 0 0);
+}
+.font-serif, h1, h2, h3 { letter-spacing: -0.02em; }
+@theme { --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.05), 0 12px 28px -14px oklch(0 0 0 / 0.18); }

package/registry/chart.js

@@ -1,34 +0,0 @@
-// Chart host component (muten Custom). inputs: { data } (a list of { label, value }). Renders an SVG bar chart.
-// Edit this file for line/area/pie variants; this default is a clean bar chart driven by the page's data.
-export function mount(el, inputs, handlers) {
-  const NS = 'http://www.w3.org/2000/svg';
-  const render = (data) => {
-    el.innerHTML = '';
-    const items = Array.isArray(data) ? data : [];
-    const W = 480, H = 200, pad = 24, gap = 10;
-    const max = Math.max(1, ...items.map((d) => Number(d.value) || 0));
-    const bw = items.length ? (W - pad * 2 - gap * (items.length - 1)) / items.length : 0;
-    const svg = document.createElementNS(NS, 'svg');
-    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
-    svg.setAttribute('class', 'chart-svg');
-    items.forEach((d, i) => {
-      const v = Number(d.value) || 0;
-      const bh = (v / max) * (H - pad * 2);
-      const x = pad + i * (bw + gap);
-      const y = H - pad - bh;
-      const rect = document.createElementNS(NS, 'rect');
-      rect.setAttribute('x', x); rect.setAttribute('y', y);
-      rect.setAttribute('width', bw); rect.setAttribute('height', bh);
-      rect.setAttribute('rx', 4); rect.setAttribute('class', 'chart-bar');
-      svg.appendChild(rect);
-      const t = document.createElementNS(NS, 'text');
-      t.setAttribute('x', x + bw / 2); t.setAttribute('y', H - pad + 14);
-      t.setAttribute('text-anchor', 'middle'); t.setAttribute('class', 'chart-label');
-      t.textContent = d.label == null ? '' : String(d.label);
-      svg.appendChild(t);
-    });
-    el.appendChild(svg);
-  };
-  render(inputs.data);
-  return (n) => render(n.data);
-}

package/registry/chart.muten

@@ -1,7 +0,0 @@
-# Chart - an SVG bar chart over a list of { label, value }. The PAGE owns the data:
-#   entity Metric { label text  value number }   state { data = query data : list<Metric> }   mock { data: [ … ] }
-#   Chart(data: data)
-# shadcn-for-muten · Custom · host JS is src/components/Chart.js (edit it for line/area/pie variants).
-part Chart(data: list) {
-  Custom Chart inputs(data: $data) class("chart")
-}

package/registry/checkbox.muten

@@ -1,8 +0,0 @@
-# Checkbox - the PAGE owns the bool + the action that flips it (container/presentational):
-#   state { agree = false : bool }   action toggle mutates agree { agree.toggle() }   Checkbox(checked: agree, onToggle: toggle)
-# shadcn-for-muten · part · no deps · the check always renders and scales/fades in via .checkbox-icon-on.
-part Checkbox(checked: bool, onToggle: action) {
-  Button -> $onToggle aria(checked: $checked) class("checkbox", "checkbox-checked" when $checked) {
-    Icon "lucide:check" class("checkbox-icon", "checkbox-icon-on" when $checked)
-  }
-}

package/registry/select.muten

@@ -1,21 +0,0 @@
-# Select - a dropdown that shows the chosen value. The PAGE owns the value (text) + the open bool + actions:
-#   state { fruit = "Apple" : text  open = false : bool }   action setFruit(v: text) mutates fruit { fruit.set(v) … }
-#   Select(value: fruit, open: open, onToggle: t) { SelectItem(value: "Apple", current: fruit, label: "Apple", onSelect: setFruit) … }
-# Each SelectItem's action should set the value AND close. The backdrop catches outside clicks.
-# shadcn-for-muten · part · no deps · styles via the semantic .select* classes in globals.css.
-part Select(value: text, open: bool, onToggle: action) {
-  Stack class("select-wrap") {
-    Button -> $onToggle aria(expanded: $open) class("select-trigger") {
-      Span "{$value}"
-      Icon "lucide:chevrons-up-down" class("size-4 opacity-50")
-    }
-    when $open { Button -> $onToggle class("select-backdrop") }
-    Stack class("select-content", "select-content-open" when $open) { slot }
-  }
-}
-part SelectItem(value: text, current: text, label: text, onSelect: action) {
-  Button -> $onSelect($value) class("select-item") {
-    Span "{$label}"
-    when $value == $current { Icon "lucide:check" class("size-4") }
-  }
-}