@muten/shadcn 0.0.1

package/registry/separator.muten

@@ -0,0 +1,3 @@
+# Separator - a thin divider line (horizontal). For a vertical one: class("separator separator-vertical").
+# shadcn-for-muten · part · no deps · styles via the semantic .separator class in globals.css.
+part Separator() { Stack class("separator") }

package/registry/sheet.muten

@@ -0,0 +1,11 @@
+# Sheet - a panel that slides in from the right edge. The PAGE owns the bool + open/close actions:
+#   state { open = false : bool }   action close mutates open { open.set(false) }   Sheet(open: open, onClose: close) { … }
+# shadcn-for-muten · part · no deps · backdrop click closes; styles via the semantic .sheet* classes.
+part Sheet(open: bool, onClose: action) {
+  Stack class("sheet-overlay", "sheet-overlay-open" when $open) {
+    Button -> $onClose class("sheet-backdrop")
+    Stack class("sheet-content") { slot }
+  }
+}
+part SheetTitle(label: text) { Title "{$label}" h2 class("sheet-title") }
+part SheetDescription(label: text) { Span "{$label}" class("sheet-description") }

package/registry/slider.js

@@ -0,0 +1,31 @@
+// Slider host component (muten Custom). inputs: { value, min, max }. handlers: { input(value) }.
+// Returns a reactive updater so the thumb follows the page's value when it changes elsewhere.
+export function mount(el, inputs, handlers) {
+  const min = Number(inputs.min ?? 0);
+  const max = Number(inputs.max ?? 100);
+  const range = document.createElement('div'); range.className = 'slider-range';
+  const thumb = document.createElement('div'); thumb.className = 'slider-thumb';
+  el.append(range, thumb);
+
+  let value = Number(inputs.value ?? min);
+  const pct = (v) => (max === min ? 0 : ((v - min) / (max - min)) * 100);
+  const paint = (v) => { const p = pct(v); range.style.width = p + '%'; thumb.style.left = p + '%'; };
+  paint(value);
+
+  const setFromX = (clientX) => {
+    const r = el.getBoundingClientRect();
+    if (!r.width) return;
+    const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
+    const v = Math.round(min + ratio * (max - min));
+    if (v !== value) { value = v; paint(v); if (handlers.input) handlers.input(v); }
+  };
+
+  let dragging = false;
+  el.addEventListener('pointerdown', (e) => { dragging = true; el.setPointerCapture(e.pointerId); setFromX(e.clientX); });
+  el.addEventListener('pointermove', (e) => { if (dragging) setFromX(e.clientX); });
+  const stop = () => { dragging = false; };
+  el.addEventListener('pointerup', stop);
+  el.addEventListener('pointercancel', stop);
+
+  return (next) => { const v = Number(next.value ?? value); if (v !== value) { value = v; paint(v); } };
+}

package/registry/slider.muten

@@ -0,0 +1,7 @@
+# Slider - a draggable range control. The PAGE owns the value (number) + the action that sets it:
+#   state { vol = 50 : number }   action setVol(v: number) mutates vol { vol.set(v) }
+#   Slider(value: vol, min: 0, max: 100, onInput: setVol)
+# shadcn-for-muten · Custom · the host JS is src/components/Slider.js (copied by `muten add slider`).
+part Slider(value: number, min: number, max: number, onInput: action) {
+  Custom Slider inputs(value: $value, min: $min, max: $max) on(input: $onInput) class("slider")
+}

package/registry/spinner.muten

@@ -0,0 +1,3 @@
+# Spinner - a loading indicator (shadcn uses the lucide loader, spun with animate-spin).
+# shadcn-for-muten · part · no deps · styles via the semantic .spinner class in globals.css.
+part Spinner() { Icon "lucide:loader-circle" class("spinner") }

package/registry/switch.muten

@@ -0,0 +1,8 @@
+# Switch - a toggle. The PAGE owns the bool + the action that flips it (container/presentational):
+#   state { on = false : bool }   action toggle mutates on { on.toggle() }   Switch(on: on, onToggle: toggle)
+# shadcn-for-muten · part · no deps · styles via the semantic .switch* classes in globals.css.
+part Switch(on: bool, onToggle: action) {
+  Button -> $onToggle aria(pressed: $on) class("switch", "switch-on" when $on, "switch-off" when not $on) {
+    Stack class("switch-thumb", "switch-thumb-on" when $on, "switch-thumb-off" when not $on)
+  }
+}

package/registry/tabs.muten

@@ -0,0 +1,12 @@
+# Tabs - a tab bar + panels. The PAGE owns a `text` state (the active tab) + an action that sets it:
+#   state { tab = "account" : text }   action setTab(v: text) mutates tab { tab.set(v) }
+#   TabsList { TabsTrigger(value: "account", current: tab, label: "Account", onSelect: setTab) … }
+#   TabsContent(value: "account", current: tab) { … }
+# shadcn-for-muten · part · no deps · styles via the semantic .tabs* classes in globals.css.
+part TabsList() { Stack class("tabs-list") { slot } }
+part TabsTrigger(value: text, current: text, label: text, onSelect: action) {
+  Button "{$label}" -> $onSelect($value) aria(selected: $value == $current) class("tabs-trigger", "tabs-trigger-active" when $value == $current)
+}
+part TabsContent(value: text, current: text) {
+  Stack class("tabs-content", "hidden" when $value != $current) { slot }
+}

package/registry/toaster.js

@@ -0,0 +1,25 @@
+// Toaster host component (muten Custom). inputs: { trigger, title, description, variant, duration }.
+// The page bumps `trigger` (a counter) to fire a toast with the current title/description; the host shows it,
+// slides it in, and auto-dismisses it (click to dismiss early). No id bookkeeping on the page.
+export function mount(el, inputs, handlers) {
+  let last = Number(inputs.trigger ?? 0);
+
+  const show = (title, description, variant, duration) => {
+    const node = document.createElement('div');
+    node.className = 'toast' + (variant === 'destructive' ? ' toast-destructive' : '');
+    const t = document.createElement('div'); t.className = 'toast-title'; t.textContent = title || 'Notification';
+    node.appendChild(t);
+    if (description) { const d = document.createElement('div'); d.className = 'toast-description'; d.textContent = description; node.appendChild(d); }
+    el.appendChild(node);
+    requestAnimationFrame(() => node.classList.add('toast-show'));
+    const remove = () => { node.classList.remove('toast-show'); setTimeout(() => node.remove(), 200); };
+    const timer = setTimeout(remove, Number(duration ?? 3500));
+    node.addEventListener('click', () => { clearTimeout(timer); remove(); });
+  };
+
+  // The effect re-runs this whenever a reactive input changes; a higher trigger means "show a new toast".
+  return (next) => {
+    const tr = Number(next.trigger ?? 0);
+    if (tr > last) { last = tr; show(next.title, next.description, next.variant, next.duration); }
+  };
+}

package/registry/toaster.muten

@@ -0,0 +1,9 @@
+# Toaster - fixed toast notifications (bottom-right). The PAGE bumps a `trigger` counter to fire one:
+#   state { toastN = 0 : number }   action notify mutates toastN { toastN.set(toastN + 1) }
+#   Button "Notify" -> notify
+#   Toaster(trigger: toastN, title: "Saved", description: "Your changes are saved.", variant: "default")
+# Auto-dismisses; click a toast to close it early. Use state title/description and change them before bumping for dynamic messages.
+# shadcn-for-muten · Custom · host JS is src/components/Toaster.js (copied by `muten add toaster`).
+part Toaster(trigger: number, title: text, description: text, variant: text) {
+  Custom Toaster inputs(trigger: $trigger, title: $title, description: $description, variant: $variant) class("toaster")
+}

package/registry/toggle-group.muten

@@ -0,0 +1,8 @@
+# Toggle Group - single-select toolbar. The PAGE owns a `text` state + an action that sets it:
+#   state { align = "left" : text }   action setAlign(v: text) mutates align { align.set(v) }
+#   ToggleGroup { ToggleGroupItem(value: "left", current: align, onSelect: setAlign) { Icon "lucide:align-left" } … }
+# shadcn-for-muten · part · no deps · styles via the semantic .toggle-group + .toggle* classes in globals.css.
+part ToggleGroup() { Stack class("toggle-group") { slot } }
+part ToggleGroupItem(value: text, current: text, onSelect: action) {
+  Button -> $onSelect($value) aria(pressed: $value == $current) class("toggle", "toggle-on" when $value == $current) { slot }
+}

package/registry/toggle.muten

@@ -0,0 +1,6 @@
+# Toggle - a two-state button. The PAGE owns the bool + the toggle action. Put an Icon or text in the slot.
+#   state { bold = false : bool }   action b mutates bold { bold.toggle() }   Toggle(on: bold, onToggle: b) { Icon "lucide:bold" }
+# shadcn-for-muten · part · no deps · styles via the semantic .toggle* classes in globals.css.
+part Toggle(on: bool, onToggle: action) {
+  Button -> $onToggle aria(pressed: $on) class("toggle", "toggle-on" when $on) { slot }
+}

package/registry/tooltip.muten

@@ -0,0 +1,9 @@
+# Tooltip - shows on hover (pure CSS, no state needed). The slot is the trigger.
+#   Tooltip(label: "Add to library") { Button "Hover me" class("btn btn-outline") }
+# shadcn-for-muten · part · no deps · styles via the semantic .tooltip* classes in globals.css.
+part Tooltip(label: text) {
+  Stack class("tooltip-wrap") {
+    slot
+    Span "{$label}" class("tooltip-content")
+  }
+}

package/registry.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://muten.dev/registry.schema.json",
+  "name": "shadcn-for-muten",
+  "style": "shadcn zinc dark (tokens shipped by globals.css: bg-card / bg-primary / text-muted-foreground / border-border / …)",
+  "components": [
+    { "name": "card",      "part": "Card",      "file": "registry/card.muten",      "description": "A surface with CardHeader / CardTitle / CardDescription / CardContent / CardFooter sub-components.", "deps": [] },
+    { "name": "badge",     "part": "Badge",     "file": "registry/badge.muten",     "description": "A small status descriptor. variant: default | secondary | destructive | outline.", "deps": [] },
+    { "name": "alert",     "part": "Alert",     "file": "registry/alert.muten",     "description": "A callout with AlertTitle / AlertDescription. variant: default | destructive.", "deps": [] },
+    { "name": "avatar",    "part": "Avatar",    "file": "registry/avatar.muten",    "description": "A user's initials in a circle (AvatarFallback).", "deps": [] },
+    { "name": "switch",    "part": "Switch",    "file": "registry/switch.muten",    "description": "A toggle; the page owns the bool + the action.", "deps": [] },
+    { "name": "spinner",   "part": "Spinner",   "file": "registry/spinner.muten",   "description": "A loading indicator (animate-spin loader).", "deps": [] },
+    { "name": "progress",  "part": "Progress",  "file": "registry/progress.muten",  "description": "A determinate progress bar; value is 0-100.", "deps": [] },
+    { "name": "separator",  "part": "Separator",  "file": "registry/separator.muten",  "description": "A thin divider line.", "deps": [] },
+    { "name": "empty",      "part": "Empty",      "file": "registry/empty.muten",      "description": "An empty-state placeholder (title + description in a dashed border).", "deps": [] },
+    { "name": "breadcrumb", "part": "Breadcrumb", "file": "registry/breadcrumb.muten", "description": "A breadcrumb trail with BreadcrumbLink / BreadcrumbSeparator / BreadcrumbPage.", "deps": [] },
+    { "name": "pagination", "part": "Pagination", "file": "registry/pagination.muten", "description": "Page navigation with PaginationLink / Previous / Next / Ellipsis.", "deps": [] },
+    { "name": "field",        "part": "Field",        "file": "registry/field.muten",        "description": "A labelled form control: FieldLabel / FieldDescription / FieldError.", "deps": [] },
+    { "name": "item",         "part": "Item",         "file": "registry/item.muten",         "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",       "file": "registry/toggle.muten",       "description": "A two-state button; the page owns the bool + the toggle action.", "deps": [] },
+    { "name": "toggle-group", "part": "ToggleGroup",  "file": "registry/toggle-group.muten", "description": "Single-select toolbar with ToggleGroupItem; page owns a text state.", "deps": [] },
+    { "name": "radio-group",  "part": "RadioGroup",   "file": "registry/radio-group.muten",  "description": "Single choice with RadioGroupItem; page owns a text state.", "deps": [] },
+    { "name": "collapsible",  "part": "Collapsible",  "file": "registry/collapsible.muten",  "description": "A trigger + content shown when open; page owns the bool.", "deps": [] },
+    { "name": "accordion",    "part": "Accordion",    "file": "registry/accordion.muten",    "description": "Stacked expandable sections with AccordionItem; page owns a bool per item.", "deps": [] },
+    { "name": "tabs",         "part": "TabsList",     "file": "registry/tabs.muten",         "description": "Tab bar (TabsList/TabsTrigger) + TabsContent panels; page owns the active-tab text.", "deps": [] },
+    { "name": "dialog",       "part": "Dialog",       "file": "registry/dialog.muten",       "description": "A modal with DialogTitle/Description/Footer; page owns the open bool. Backdrop click closes.", "deps": [] },
+    { "name": "tooltip",      "part": "Tooltip",      "file": "registry/tooltip.muten",      "description": "A hover tooltip (pure CSS, no state). The slot is the trigger.", "deps": [] },
+    { "name": "dropdown-menu","part": "DropdownMenu", "file": "registry/dropdown-menu.muten","description": "A menu below a trigger with DropdownItem/Label/Separator; page owns the open bool.", "deps": [] },
+    { "name": "popover",      "part": "Popover",      "file": "registry/popover.muten",      "description": "A floating panel below a trigger; page owns the open bool.", "deps": [] },
+    { "name": "alert-dialog", "part": "AlertDialog",  "file": "registry/alert-dialog.muten", "description": "A modal requiring an explicit choice (no backdrop dismiss); page owns the open bool.", "deps": [] },
+    { "name": "sheet",        "part": "Sheet",        "file": "registry/sheet.muten",        "description": "A panel that slides in from the right; page owns the open bool.", "deps": [] },
+    { "name": "drawer",       "part": "Drawer",       "file": "registry/drawer.muten",       "description": "A panel that slides up from the bottom; page owns the open bool.", "deps": [] },
+    { "name": "hover-card",   "part": "HoverCard",    "file": "registry/hover-card.muten",   "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",   "file": "registry/scroll-area.muten",  "description": "A scrollable region with styled scrollbars.", "deps": [] },
+    { "name": "message",      "part": "Message",      "file": "registry/message.muten",      "description": "Chat Message + Bubble + Marker (variant: sent | received).", "deps": [] },
+    { "name": "message-scroller","part": "MessageScroller","file": "registry/message-scroller.muten","description": "A scrollable column of chat messages.", "deps": [] },
+    { "name": "attachment",   "part": "Attachment",   "file": "registry/attachment.muten",   "description": "A file attachment chip (icon + name + size).", "deps": [] },
+    { "name": "menubar",      "part": "Menubar",      "file": "registry/menubar.muten",      "description": "A bar of menus (File/Edit/View); page owns which is open via a text state.", "deps": [] },
+    { "name": "navigation-menu","part": "NavigationMenu","file": "registry/navigation-menu.muten","description": "A nav bar with hover-revealed panels (pure CSS, no state).", "deps": [] },
+    { "name": "combobox",     "part": "Combobox",     "file": "registry/combobox.muten",     "description": "A Select with a search box; page filters items with `each … where`.", "deps": [] },
+    { "name": "command",      "part": "Command",      "file": "registry/command.muten",      "description": "A command palette (search + grouped CommandItem list).", "deps": [] },
+    { "name": "slider",       "part": "Slider",       "file": "registry/slider.muten",       "component": "Slider", "description": "A draggable range slider (Custom). Page owns the value number.", "deps": [] },
+    { "name": "input-otp",    "part": "InputOtp",     "file": "registry/input-otp.muten",    "component": "InputOtp", "description": "N single-character boxes synced to one value (Custom). Page owns the value text.", "deps": [] },
+    { "name": "calendar",     "part": "Calendar",     "file": "registry/calendar.muten",     "component": "Calendar", "description": "A month-grid date picker (Custom). Page owns the selected ISO date text.", "deps": [] },
+    { "name": "toaster",      "part": "Toaster",      "file": "registry/toaster.muten",      "component": "Toaster", "description": "Fixed toast notifications (Custom). Page bumps a trigger counter to fire one.", "deps": [] },
+    { "name": "carousel",     "part": "Carousel",     "file": "registry/carousel.muten",     "component": "Carousel", "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": "resizable",    "part": "Resizable",    "file": "registry/resizable.muten",    "component": "Resizable", "description": "Two panels with a draggable splitter (Custom).", "deps": [] },
+    { "name": "context-menu", "part": "ContextMenu",  "file": "registry/context-menu.muten", "component": "ContextMenu", "description": "Right-click an area to open a menu of items (Custom).", "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\") }"
+  }
+}