@muten/shadcn 0.0.5 → 0.0.7

package/AGENTS.md

@@ -2,12 +2,21 @@
 
 ## 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 (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 +31,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 +45,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 +81,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 +111,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,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; }
@@ -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 {

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.5",
+  "version": "0.0.7",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",
@@ -15,11 +15,15 @@
     "registry",
     "registry.json",
     "globals.css",
+    "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.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",

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") }
-  }
-}