@muten/shadcn 0.0.5 → 0.1.0

package/AGENTS.md

@@ -2,12 +2,68 @@
 
 ## 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).**
+
+## Nova + the system kit
+
+The newer half of the plugin is shadcn's **Nova** style plus a kit of generic, data-driven components (agenda,
+inbox, order board, booking, app shell…). It is 1:1 with the reference artifact the bench page `plugins/playground`
+shows. Setup, on top of the install above:
+
+```css
+/* src/styles.css, after globals.css */
+@import "@muten/shadcn/nova.css";   /* shadcn's Nova source, scoped under .style-nova */
+@import "@muten/shadcn/kit.css";    /* muten adapters + the kit's layout and motion */
+```
+
+```html
+<!-- index.html: the style class on <html>, and Geist -->
+<html class="style-nova">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap">
+```
+
+```
+# src/app.muten: once, in the shell (a shell cannot call plugin parts, so the Custom directly)
+shell { Stack { Custom KitLayer class("cx-kit-host")  slot } }
+```
+
+`KitLayer` loads the kit core once: the icon sprite, the tooltip on anything with `data-name`, the Island, the one
+adaptive modal (Dialog wide, Drawer on a phone) the kit's components share, and the wheels. Every component's exact
+props are in the header comment of its `registry/<name>.muten`; the data shapes are documented there too.
+
+| Group | Parts |
+|---|---|
+| Atoms | `Btn` (variant, size, tone), `Txt`, `Badge`/`StatusBadge`/`ToneBadge`/`Chip`, `Avatar`/`AvatarGroup`/`Who`, `Kbd`, `Spinner`, `Skeleton`, `Indicator`, `Separator`, `Progress` |
+| Lists and cards | `Item…`, `Price`, `Card…` (with the action zone), `FixedCard`/`Row3`/`EmptyMini`, `StatCard`/`StatGrid`, `Spark` |
+| Controls | `Switch`/`SwitchRow`, `Tabs`, `SegmentedControl`, `ChoiceList`, `Sortable`, `SaveButton`, `NavButton` |
+| Fields | `Field…`, `Input`/`TextArea`, `InputGroup`/`SearchInput`, `MoneyField`, `PhoneField`, `InputOtp`, `PasswordField` |
+| Notices | `Alert`, `Band`, `Island`, `Modal`/`ModalFooter`, `SettingsForm`/`DirtyBar` |
+| Menus and content | `Combobox`, `RowMenu`, `Accordion`, `StoreQr` |
+| Values | `ScaleSlider`, `RangeSlider`, `Slider`, `ColorPicker` |
+| Collections | `TagInput`, `PaginationNav`, `VirtualList`, `Carousel`/`CarouselSlide` |
+| Data | `TableView` (filters as data, chips, bulk), `OrderBoard`, `OrderCards` |
+| Dates and files | `Booking`, `Calendar`, `DateField`, `TimeField`, `ImageUpload` |
+| Structure | `PhoneShell`, `ShareButton`, `AppShell` (Sidebar, page header, detail Sheet, ⌘K) |
+| System | `Agenda`, `NewAppointment`, `Messaging`, `Chatbot`, `BarChart`, `Checklist`, `Plans`, `CardField`, `MemberList`, `PermissionMatrix`, `StampCard`, `Bell`, `Queue`, `WeeklyHours` |
+| Loading | `Skeletons(kind)`, `Loading(busy, kind) { … }`: content-shaped skeletons, a fade when the data lands |
+
+Rules the kit keeps: the page owns the state and gets JSON back through actions; functions never travel as data
+(a bot's answers are `{match, text}` rules); a skeleton only shows while there is nothing to show; no native
+`<select>`, the wheels and menus instead.
+
 ## 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 {}
+## 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.
@@ -22,7 +78,6 @@
 - **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
@@ -37,7 +92,6 @@
 - **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.
@@ -74,14 +128,13 @@
 - **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
+## 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.
-- **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).
@@ -105,4 +158,6 @@
 - **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.
+### 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,24 +94,77 @@ 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,..."`).
 A **date picker** is just `Popover { Calendar … }`.
 
+## Nova + the system kit
+
+The newer half of the plugin is shadcn's **Nova** style plus a kit of generic, data-driven components (agenda,
+inbox, order board, booking, app shell…). It is 1:1 with the reference artifact the bench page `plugins/playground`
+shows. Setup, on top of the install above:
+
+```css
+/* src/styles.css, after globals.css */
+@import "@muten/shadcn/nova.css";   /* shadcn's Nova source, scoped under .style-nova */
+@import "@muten/shadcn/kit.css";    /* muten adapters + the kit's layout and motion */
+```
+
+```html
+<!-- index.html: the style class on <html>, and Geist -->
+<html class="style-nova">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap">
+```
+
+```
+# src/app.muten: once, in the shell (a shell cannot call plugin parts, so the Custom directly)
+shell { Stack { Custom KitLayer class("cx-kit-host")  slot } }
+```
+
+`KitLayer` loads the kit core once: the icon sprite, the tooltip on anything with `data-name`, the Island, the one
+adaptive modal (Dialog wide, Drawer on a phone) the kit's components share, and the wheels. Every component's exact
+props are in the header comment of its `registry/<name>.muten`; the data shapes are documented there too.
+
+| Group | Parts |
+|---|---|
+| Atoms | `Btn` (variant, size, tone), `Txt`, `Badge`/`StatusBadge`/`ToneBadge`/`Chip`, `Avatar`/`AvatarGroup`/`Who`, `Kbd`, `Spinner`, `Skeleton`, `Indicator`, `Separator`, `Progress` |
+| Lists and cards | `Item…`, `Price`, `Card…` (with the action zone), `FixedCard`/`Row3`/`EmptyMini`, `StatCard`/`StatGrid`, `Spark` |
+| Controls | `Switch`/`SwitchRow`, `Tabs`, `SegmentedControl`, `ChoiceList`, `Sortable`, `SaveButton`, `NavButton` |
+| Fields | `Field…`, `Input`/`TextArea`, `InputGroup`/`SearchInput`, `MoneyField`, `PhoneField`, `InputOtp`, `PasswordField` |
+| Notices | `Alert`, `Band`, `Island`, `Modal`/`ModalFooter`, `SettingsForm`/`DirtyBar` |
+| Menus and content | `Combobox`, `RowMenu`, `Accordion`, `StoreQr` |
+| Values | `ScaleSlider`, `RangeSlider`, `Slider`, `ColorPicker` |
+| Collections | `TagInput`, `PaginationNav`, `VirtualList`, `Carousel`/`CarouselSlide` |
+| Data | `TableView` (filters as data, chips, bulk), `OrderBoard`, `OrderCards` |
+| Dates and files | `Booking`, `Calendar`, `DateField`, `TimeField`, `ImageUpload` |
+| Structure | `PhoneShell`, `ShareButton`, `AppShell` (Sidebar, page header, detail Sheet, ⌘K) |
+| System | `Agenda`, `NewAppointment`, `Messaging`, `Chatbot`, `BarChart`, `Checklist`, `Plans`, `CardField`, `MemberList`, `PermissionMatrix`, `StampCard`, `Bell`, `Queue`, `WeeklyHours` |
+| Loading | `Skeletons(kind)`, `Loading(busy, kind) { … }`: content-shaped skeletons, a fade when the data lands |
+
+Rules the kit keeps: the page owns the state and gets JSON back through actions; functions never travel as data
+(a bot's answers are `{match, text}` rules); a skeleton only shows while there is nothing to show; no native
+`<select>`, the wheels and menus instead.
+
 ---
 
 ## The container / presentational pattern

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; }
@@ -746,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%; } }
@@ -762,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 {