@muten/shadcn 0.0.1

package/registry/breadcrumb.muten

@@ -0,0 +1,7 @@
+# Breadcrumb + sub-components.
+# Compose: Breadcrumb { BreadcrumbLink(label,href) BreadcrumbSeparator BreadcrumbLink(...) BreadcrumbSeparator BreadcrumbPage(label) }
+# shadcn-for-muten · part · no deps · styles via the semantic .breadcrumb* classes in globals.css.
+part Breadcrumb() { Nav class("breadcrumb") aria(label: "breadcrumb") { slot } }
+part BreadcrumbLink(label: text, href: text) { Link "{$label}" -> "{$href}" class("breadcrumb-link") }
+part BreadcrumbPage(label: text) { Span "{$label}" class("breadcrumb-page") }
+part BreadcrumbSeparator() { Icon "lucide:chevron-right" class("breadcrumb-separator") }

package/registry/calendar.js

@@ -0,0 +1,93 @@
+// Calendar host (muten Custom). Variants via inputs:
+//   mode: "single" | "range" | "multiple"   months: 1 | 2   caption: "label" | "dropdown"
+// `selected` encodes the value: single -> "yyyy-mm-dd"; range -> "from/to"; multiple -> "d1,d2,...".
+// handlers: { select(encoded) }.
+export function mount(el, inputs, handlers) {
+  const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const DOW = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const pad = (n) => String(n).padStart(2, '0');
+  const iso = (d) => d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
+  const parse = (s) => { const d = new Date(s + 'T00:00:00'); return isNaN(d.getTime()) ? null : d; };
+  const same = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  const num = (d) => d.getFullYear() * 10000 + d.getMonth() * 100 + d.getDate();
+
+  const mode = inputs.mode || 'single';
+  const months = Math.min(2, Math.max(1, Number(inputs.months) || 1));
+  const dropdown = inputs.caption === 'dropdown';
+  const today = new Date();
+
+  let selected = [];
+  const readSelected = (val) => {
+    selected = [];
+    const s = String(val || '');
+    if (!s) return;
+    const parts = mode === 'range' ? s.split('/') : mode === 'multiple' ? s.split(',') : [s];
+    for (const p of parts) { const d = parse(p); if (d) selected.push(d); }
+  };
+  readSelected(inputs.selected);
+  const anchor = selected[0] || today;
+  let vy = anchor.getFullYear();
+  let vm = anchor.getMonth();
+
+  const emit = () => {
+    const out = mode === 'range' ? selected.map(iso).join('/') : mode === 'multiple' ? selected.map(iso).join(',') : (selected[0] ? iso(selected[0]) : '');
+    if (handlers.select) handlers.select(out);
+  };
+  const isSel = (d) => selected.some((s) => same(s, d));
+  const inRange = (d) => { if (mode !== 'range' || selected.length < 2) return false; const x = num(d), a = num(selected[0]), b = num(selected[1]); return x > Math.min(a, b) && x < Math.max(a, b); };
+  const pick = (d) => {
+    if (mode === 'single') selected = [d];
+    else if (mode === 'multiple') { const i = selected.findIndex((s) => same(s, d)); if (i >= 0) selected.splice(i, 1); else selected.push(d); }
+    else { if (selected.length !== 1) selected = [d]; else { const a = selected[0]; selected = num(d) < num(a) ? [d, a] : [a, d]; } }
+    render(); emit();
+  };
+
+  const monthGrid = (y, m) => {
+    const wrap = document.createElement('div'); wrap.className = 'calendar-month';
+    const cap = document.createElement('div'); cap.className = 'calendar-caption';
+    if (dropdown) {
+      const ms = document.createElement('select'); ms.className = 'calendar-select';
+      MONTHS.forEach((name, i) => { const o = document.createElement('option'); o.value = String(i); o.textContent = name; if (i === m) o.selected = true; ms.appendChild(o); });
+      ms.addEventListener('change', () => { vm = Number(ms.value); render(); });
+      const ys = document.createElement('select'); ys.className = 'calendar-select';
+      for (let yy = y - 10; yy <= y + 10; yy++) { const o = document.createElement('option'); o.value = String(yy); o.textContent = String(yy); if (yy === y) o.selected = true; ys.appendChild(o); }
+      ys.addEventListener('change', () => { vy = Number(ys.value); render(); });
+      cap.appendChild(ms); cap.appendChild(ys);
+    } else {
+      const l = document.createElement('div'); l.className = 'calendar-label'; l.textContent = MONTHS[m] + ' ' + y; cap.appendChild(l);
+    }
+    wrap.appendChild(cap);
+
+    const grid = document.createElement('div'); grid.className = 'calendar-grid';
+    for (const d of DOW) { const c = document.createElement('div'); c.className = 'calendar-dow'; c.textContent = d; grid.appendChild(c); }
+    const first = new Date(y, m, 1).getDay();
+    const days = new Date(y, m + 1, 0).getDate();
+    for (let i = 0; i < first; i++) grid.appendChild(document.createElement('div'));
+    for (let day = 1; day <= days; day++) {
+      const d = new Date(y, m, day);
+      const cell = document.createElement('button'); cell.type = 'button'; cell.className = 'calendar-day'; cell.textContent = String(day);
+      if (isSel(d)) cell.classList.add('calendar-day-selected');
+      else if (inRange(d)) cell.classList.add('calendar-day-range');
+      else if (same(d, today)) cell.classList.add('calendar-day-today');
+      cell.addEventListener('click', () => pick(d));
+      grid.appendChild(cell);
+    }
+    wrap.appendChild(grid);
+    return wrap;
+  };
+
+  function render() {
+    el.innerHTML = '';
+    const prev = document.createElement('button'); prev.type = 'button'; prev.className = 'calendar-nav-prev'; prev.textContent = '‹';
+    const next = document.createElement('button'); next.type = 'button'; next.className = 'calendar-nav-next'; next.textContent = '›';
+    prev.addEventListener('click', () => { vm--; if (vm < 0) { vm = 11; vy--; } render(); });
+    next.addEventListener('click', () => { vm++; if (vm > 11) { vm = 0; vy++; } render(); });
+    el.appendChild(prev); el.appendChild(next);
+    const wrap = document.createElement('div'); wrap.className = 'calendar-months';
+    for (let i = 0; i < months; i++) { let yy = vy, mm = vm + i; while (mm > 11) { mm -= 12; yy++; } wrap.appendChild(monthGrid(yy, mm)); }
+    el.appendChild(wrap);
+  }
+
+  render();
+  return (n) => { readSelected(n.selected); render(); };
+}

package/registry/calendar.muten

@@ -0,0 +1,9 @@
+# Calendar - a month grid with variants. The PAGE owns the selected value (text) per mode:
+#   mode: "single" | "range" | "multiple"   months: 1 | 2   caption: "label" | "dropdown"
+#   selected encodes the value: single -> "yyyy-mm-dd"; range -> "from/to"; multiple -> "d1,d2,...".
+#   state { date = "" : text }   action pick(d: text) mutates date { date.set(d) }
+#   Calendar(selected: date, mode: "single", months: 1, caption: "label", onSelect: pick)
+# shadcn-for-muten · Custom · host JS is src/components/Calendar.js (copied by `muten add calendar`).
+part Calendar(selected: text, mode: text, months: number, caption: text, onSelect: action) {
+  Custom Calendar inputs(selected: $selected, mode: $mode, months: $months, caption: $caption) on(select: $onSelect) class("calendar")
+}

package/registry/card.muten

@@ -0,0 +1,8 @@
+# Card + its sub-components. Compose: Card { CardHeader { CardTitle(label) CardDescription(label) } CardContent { … } CardFooter { … } }
+# shadcn-for-muten · part · no deps · styles via the semantic .card* classes in globals.css.
+part Card() { Section class("card") { slot } }
+part CardHeader() { Stack class("card-header") { slot } }
+part CardTitle(label: text) { Title "{$label}" h3 class("card-title") }
+part CardDescription(label: text) { Span "{$label}" class("card-description") }
+part CardContent() { Stack class("card-content") { slot } }
+part CardFooter() { Stack class("card-footer") { slot } }

package/registry/carousel.js

@@ -0,0 +1,36 @@
+// Carousel host component (muten Custom). inputs: { items } (a list). Renders one slide per item with prev/next.
+// Slides show the item as text; edit this file for image/rich slides (e.g. an <img> per item).
+export function mount(el, inputs, handlers) {
+  const viewport = document.createElement('div'); viewport.className = 'carousel-viewport';
+  const track = document.createElement('div'); track.className = 'carousel-track';
+  viewport.appendChild(track); el.appendChild(viewport);
+  const prev = document.createElement('button'); prev.type = 'button'; prev.className = 'carousel-prev'; prev.textContent = '‹';
+  const next = document.createElement('button'); next.type = 'button'; next.className = 'carousel-next'; next.textContent = '›';
+  el.appendChild(prev); el.appendChild(next);
+
+  let idx = 0;
+  let items = [];
+  // Move by exact viewport widths (px). A `%` translate is relative to the multi-slide track, not the viewport.
+  const paint = () => {
+    const w = viewport.clientWidth || el.clientWidth || 0;
+    for (const s of track.children) s.style.width = w + 'px';
+    track.style.transform = 'translateX(' + (-idx * w) + 'px)';
+  };
+  const build = (list) => {
+    items = Array.isArray(list) ? list : [];
+    track.innerHTML = '';
+    for (const it of items) {
+      const s = document.createElement('div'); s.className = 'carousel-slide';
+      s.textContent = (it && typeof it === 'object') ? (it.label ?? it.title ?? '') : String(it);
+      track.appendChild(s);
+    }
+    if (idx > items.length - 1) idx = Math.max(0, items.length - 1);
+    paint();
+  };
+  window.addEventListener('resize', paint);
+  prev.addEventListener('click', () => { if (items.length) { idx = (idx - 1 + items.length) % items.length; paint(); } });
+  next.addEventListener('click', () => { if (items.length) { idx = (idx + 1) % items.length; paint(); } });
+
+  build(inputs.items);
+  return (n) => build(n.items);
+}

package/registry/carousel.muten

@@ -0,0 +1,6 @@
+# Carousel - a slide carousel over a list. The PAGE owns the slides (list<text>):
+#   state { slides = ["1", "2", "3", "4", "5"] : list<text> }   Carousel(items: slides)
+# shadcn-for-muten · Custom · host JS is src/components/Carousel.js. Slides render as text; edit the .js for images/rich slides.
+part Carousel(items: list) {
+  Custom Carousel inputs(items: $items) class("carousel")
+}

package/registry/chart.js

@@ -0,0 +1,34 @@
+// 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

@@ -0,0 +1,7 @@
+# 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

@@ -0,0 +1,8 @@
+# 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/collapsible.muten

@@ -0,0 +1,14 @@
+# Collapsible - a trigger + content that animates open. The PAGE owns the bool + the toggle action.
+#   state { open = false : bool }   action t mutates open { open.toggle() }   Collapsible(label: "…", open: open, onToggle: t) { … }
+# shadcn-for-muten · part · no deps · the content always renders and animates open via the .collapsible-panel grid trick.
+part Collapsible(label: text, open: bool, onToggle: action) {
+  Stack class("collapsible") {
+    Button -> $onToggle aria(expanded: $open) class("collapsible-trigger") {
+      Span "{$label}"
+      Icon "lucide:chevrons-up-down" class("size-4 text-muted-foreground")
+    }
+    Stack class("collapsible-panel", "collapsible-panel-open" when $open) {
+      Stack class("collapsible-content") { slot }
+    }
+  }
+}

package/registry/combobox.muten

@@ -0,0 +1,24 @@
+# Combobox - a Select with a search box. The PAGE owns the value, the open bool, and the search text; it filters
+# the items with `each … where`:
+#   state { value = "" : text  open = false : bool  q = "" : text  items = [ … ] : list<Opt> }
+#   Combobox(label: value, open: open, onToggle: t) {
+#     SearchField bind(q) "Search…" class("combobox-search")
+#     Stack class("combobox-list") { each items as o where o.name contains q { ComboboxItem(value: o.name, current: value, label: o.name, onSelect: pick) } }
+#   }
+# shadcn-for-muten · part · no deps · styles via the semantic .combobox* + .select-* classes in globals.css.
+part Combobox(label: text, open: bool, onToggle: action) {
+  Stack class("select-wrap") {
+    Button -> $onToggle aria(expanded: $open) class("combobox-trigger") {
+      Span "{$label}"
+      Icon "lucide:chevrons-up-down" class("size-4 opacity-50 shrink-0")
+    }
+    when $open { Button -> $onToggle class("select-backdrop") }
+    Stack class("combobox-content", "combobox-content-open" when $open) { slot }
+  }
+}
+part ComboboxItem(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") }
+  }
+}

package/registry/command.muten

@@ -0,0 +1,16 @@
+# Command - a command palette (search + grouped item list). The PAGE provides the search input + the items:
+#   Command {
+#     SearchField bind(q) "Type a command…" class("command-input")
+#     CommandList { CommandGroup(label: "Suggestions") { CommandItem(onSelect: run) { Icon … Span "Calendar" } … } }
+#   }
+# Put inside a Dialog for the modal palette. shadcn-for-muten · part · no deps · styles via the .command* classes.
+part Command() { Stack class("command") { slot } }
+part CommandList() { Stack class("command-list") { slot } }
+part CommandGroup(label: text) {
+  Stack class("flex flex-col") {
+    Span "{$label}" class("command-group-label")
+    slot
+  }
+}
+part CommandItem(onSelect: action) { Button -> $onSelect class("command-item") { slot } }
+part CommandShortcut(keys: text) { Span "{$keys}" class("command-shortcut") }

package/registry/context-menu.js

@@ -0,0 +1,34 @@
+// Context Menu host component (muten Custom). inputs: { label, items }. handlers: { select(label) }.
+// Right-clicking the area opens a menu of items at the cursor; choosing one emits its label.
+export function mount(el, inputs, handlers) {
+  const area = document.createElement('div'); area.className = 'context-area';
+  area.textContent = inputs.label == null ? 'Right-click here' : String(inputs.label);
+  el.appendChild(area);
+  const menu = document.createElement('div'); menu.className = 'context-menu';
+  el.appendChild(menu);
+
+  let open = false;
+  const hide = () => { menu.classList.remove('context-menu-open'); open = false; };
+  const build = (items) => {
+    menu.innerHTML = '';
+    (Array.isArray(items) ? items : []).forEach((it) => {
+      const label = (it && typeof it === 'object') ? (it.label == null ? '' : String(it.label)) : String(it);
+      const b = document.createElement('button'); b.type = 'button'; b.className = 'context-item'; b.textContent = label;
+      b.addEventListener('click', () => { hide(); if (handlers.select) handlers.select(label); });
+      menu.appendChild(b);
+    });
+  };
+
+  area.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+    const r = el.getBoundingClientRect();
+    menu.style.left = (e.clientX - r.left) + 'px';
+    menu.style.top = (e.clientY - r.top) + 'px';
+    menu.classList.add('context-menu-open');
+    open = true;
+  });
+  document.addEventListener('click', () => { if (open) hide(); });
+
+  build(inputs.items);
+  return (n) => { area.textContent = n.label == null ? 'Right-click here' : String(n.label); build(n.items); };
+}

package/registry/context-menu.muten

@@ -0,0 +1,8 @@
+# Context Menu - right-click an area to open a menu of items. The PAGE owns the items + the action:
+#   state { items = ["Back", "Forward", "Reload"] : list<text>  picked = "" : text }
+#   action onPick(v: text) mutates picked { picked.set(v) }
+#   ContextMenu(label: "Right-click here", items: items, onSelect: onPick)
+# shadcn-for-muten · Custom · host JS is src/components/ContextMenu.js (copied by `muten add context-menu`).
+part ContextMenu(label: text, items: list, onSelect: action) {
+  Custom ContextMenu inputs(label: $label, items: $items) on(select: $onSelect) class("context-menu-wrap")
+}

package/registry/dialog.muten

@@ -0,0 +1,13 @@
+# Dialog - a modal. The PAGE owns the bool + open/close actions:
+#   state { open = false : bool }   action close mutates open { open.set(false) }   action show mutates open { open.set(true) }
+#   Button "Open" -> show ...   Dialog(open: open, onClose: close) { DialogTitle(label) DialogDescription(label) … DialogFooter { … } }
+# shadcn-for-muten · part · no deps · the backdrop click closes; styles via the semantic .dialog* classes.
+part Dialog(open: bool, onClose: action) {
+  Stack class("dialog-overlay", "dialog-overlay-open" when $open) {
+    Button -> $onClose class("dialog-backdrop")
+    Stack class("dialog-content") { slot }
+  }
+}
+part DialogTitle(label: text) { Title "{$label}" h2 class("dialog-title") }
+part DialogDescription(label: text) { Span "{$label}" class("dialog-description") }
+part DialogFooter() { Stack class("dialog-footer") { slot } }

package/registry/drawer.muten

@@ -0,0 +1,12 @@
+# Drawer - a panel that slides up from the bottom edge. The PAGE owns the bool + open/close actions:
+#   state { open = false : bool }   action close mutates open { open.set(false) }   Drawer(open: open, onClose: close) { … }
+# shadcn-for-muten · part · no deps · backdrop click closes; styles via the semantic .drawer* classes.
+part Drawer(open: bool, onClose: action) {
+  Stack class("drawer-overlay", "drawer-overlay-open" when $open) {
+    Button -> $onClose class("drawer-backdrop")
+    Stack class("drawer-content") {
+      Stack class("drawer-handle")
+      slot
+    }
+  }
+}

package/registry/dropdown-menu.muten

@@ -0,0 +1,15 @@
+# Dropdown Menu - a button that opens a menu below it. The PAGE owns the bool + the toggle action:
+#   state { open = false : bool }   action t mutates open { open.toggle() }
+#   DropdownMenu(label: "Open", open: open, onToggle: t) { DropdownLabel(label) DropdownItem(label, onSelect) … }
+# Each DropdownItem's action should also close the menu (set open false). The backdrop catches outside clicks.
+# shadcn-for-muten · part · no deps · styles via the semantic .dropdown* classes in globals.css.
+part DropdownMenu(label: text, open: bool, onToggle: action) {
+  Stack class("dropdown") {
+    Button "{$label}" -> $onToggle aria(expanded: $open) class("btn btn-outline")
+    when $open { Button -> $onToggle class("dropdown-backdrop") }
+    Stack class("dropdown-content", "dropdown-content-open" when $open) { slot }
+  }
+}
+part DropdownItem(label: text, onSelect: action) { Button "{$label}" -> $onSelect class("dropdown-item") }
+part DropdownLabel(label: text) { Span "{$label}" class("dropdown-label") }
+part DropdownSeparator() { Stack class("dropdown-separator") }

package/registry/empty.muten

@@ -0,0 +1,9 @@
+# Empty - an empty-state placeholder. Centered title + description in a dashed border; drop an Icon/Button via the slot.
+# shadcn-for-muten · part · no deps · styles via the semantic .empty* classes in globals.css.
+part Empty(title: text, description: text) {
+  Stack class("empty") {
+    slot
+    Span "{$title}" class("empty-title")
+    Span "{$description}" class("empty-description")
+  }
+}

package/registry/field.muten

@@ -0,0 +1,7 @@
+# Field + sub-components: a labelled form control with description / error.
+# Compose: Field { FieldLabel(label) <a control, e.g. SearchField class("input")> FieldDescription(label) }
+# shadcn-for-muten · part · no deps · styles via the semantic .field* + .label classes in globals.css.
+part Field() { Stack class("field") { slot } }
+part FieldLabel(label: text) { Span "{$label}" class("label") }
+part FieldDescription(label: text) { Span "{$label}" class("field-description") }
+part FieldError(label: text) { Span "{$label}" class("field-error") }

package/registry/hover-card.muten

@@ -0,0 +1,9 @@
+# Hover Card - richer content shown on hover (pure CSS, no state). label is the trigger; the slot is the card.
+#   HoverCard(label: "@muten") { Span "The AI-first frontend DSL." class("text-sm") }
+# shadcn-for-muten · part · no deps · styles via the semantic .hover-card* classes in globals.css.
+part HoverCard(label: text) {
+  Stack class("hover-card") {
+    Span "{$label}" class("hover-card-trigger")
+    Stack class("hover-card-content") { slot }
+  }
+}

package/registry/input-otp.js

@@ -0,0 +1,36 @@
+// Input OTP host component (muten Custom). inputs: { value, length }. handlers: { input(value) }.
+// Builds `length` single-character boxes; typing/paste/backspace move focus and emit the joined value.
+export function mount(el, inputs, handlers) {
+  const len = Number(inputs.length ?? 6);
+  const boxes = [];
+  const emit = () => { if (handlers.input) handlers.input(boxes.map((b) => b.value).join('')); };
+
+  for (let i = 0; i < len; i++) {
+    const box = document.createElement('input');
+    box.className = 'otp-slot';
+    box.maxLength = 1;
+    box.inputMode = 'numeric';
+    box.autocomplete = 'one-time-code';
+    box.addEventListener('input', () => {
+      box.value = box.value.replace(/\D/g, '').slice(-1);
+      if (box.value && i < len - 1) boxes[i + 1].focus();
+      emit();
+    });
+    box.addEventListener('keydown', (e) => {
+      if (e.key === 'Backspace' && !box.value && i > 0) boxes[i - 1].focus();
+    });
+    box.addEventListener('paste', (e) => {
+      e.preventDefault();
+      const text = ((e.clipboardData && e.clipboardData.getData('text')) || '').replace(/\D/g, '').slice(0, len);
+      for (let j = 0; j < len; j++) boxes[j].value = text[j] || '';
+      (boxes[Math.min(text.length, len - 1)] || boxes[0]).focus();
+      emit();
+    });
+    boxes.push(box);
+    el.appendChild(box);
+  }
+
+  const set = (val) => { const s = String(val == null ? '' : val); boxes.forEach((b, i) => { b.value = s[i] || ''; }); };
+  set(inputs.value);
+  return (next) => set(next.value);
+}

package/registry/input-otp.muten

@@ -0,0 +1,7 @@
+# Input OTP - N single-character boxes synced to one value. The PAGE owns the value (text):
+#   state { code = "" : text }   action setCode(v: text) mutates code { code.set(v) }
+#   InputOtp(value: code, length: 6, onInput: setCode)
+# shadcn-for-muten · Custom · host JS is src/components/InputOtp.js (copied by `muten add input-otp`).
+part InputOtp(value: text, length: number, onInput: action) {
+  Custom InputOtp inputs(value: $value, length: $length) on(input: $onInput) class("otp")
+}

package/registry/item.muten

@@ -0,0 +1,7 @@
+# Item + sub-components: a bordered row of media + content + actions.
+# Compose: Item { <Icon/Avatar> ItemContent { ItemTitle(label) ItemDescription(label) } <Button/Switch> }
+# shadcn-for-muten · part · no deps · styles via the semantic .item* classes in globals.css.
+part Item() { Stack class("item") { slot } }
+part ItemContent() { Stack class("item-content") { slot } }
+part ItemTitle(label: text) { Span "{$label}" class("item-title") }
+part ItemDescription(label: text) { Span "{$label}" class("item-description") }

package/registry/menubar.muten

@@ -0,0 +1,14 @@
+# Menubar - a bar of menus (File / Edit / View). The PAGE owns which is open via a text state:
+#   state { bar = "" : text }   action open(v: text) mutates bar { if bar == v { bar.set("") } else { bar.set(v) } }
+#   action close mutates bar { bar.set("") }
+#   Menubar { MenubarMenu(label: "File", name: "file", current: bar, onOpen: open) { MenubarItem(label: "New", onSelect: close) … } }
+# shadcn-for-muten · part · no deps · styles via the semantic .menubar* classes (items reuse .dropdown-item).
+part Menubar() { Stack class("menubar") { slot } }
+part MenubarMenu(label: text, name: text, current: text, onOpen: action) {
+  Stack class("menubar-item") {
+    Button "{$label}" -> $onOpen($name) aria(expanded: $name == $current) class("menubar-trigger", "menubar-trigger-active" when $name == $current)
+    Stack class("menubar-content", "menubar-content-open" when $name == $current) { slot }
+  }
+}
+part MenubarItem(label: text, onSelect: action) { Button "{$label}" -> $onSelect class("dropdown-item") }
+part MenubarSeparator() { Stack class("dropdown-separator") }

package/registry/message-scroller.muten

@@ -0,0 +1,4 @@
+# Message Scroller - a scrollable column of chat messages (max-h-96 by default; eject to change).
+#   MessageScroller { Marker(label: "Today") Message(variant: "received") { … } Message(variant: "sent") { … } }
+# shadcn-for-muten · part · no deps · styles via the semantic .message-scroller class in globals.css.
+part MessageScroller() { Stack class("message-scroller") { slot } }

package/registry/message.muten

@@ -0,0 +1,11 @@
+# Message + Bubble + Marker - chat primitives. variant: sent | received.
+# Compose: Message(variant: "received") { Avatar(name) Bubble(variant: "received") { Span "Hi!" } }
+#          Marker(label: "Today")
+# shadcn-for-muten · part · no deps · styles via the semantic .message* / .bubble / .marker classes.
+part Message(variant: text) {
+  Stack class("message", "message-sent" when $variant == "sent") { slot }
+}
+part Bubble(variant: text) {
+  Stack class("bubble", "bubble-sent" when $variant == "sent", "bubble-received" when $variant == "received") { slot }
+}
+part Marker(label: text) { Span "{$label}" class("marker") }

package/registry/navigation-menu.muten

@@ -0,0 +1,16 @@
+# Navigation Menu - a nav bar whose items reveal a panel on hover (pure CSS, no state).
+#   NavigationMenu { NavigationMenuItem(label: "Getting started") { NavigationMenuLink(title: "Intro", desc: "…", href: "/intro") … } }
+# shadcn-for-muten · part · no deps · styles via the semantic .nav-menu* classes in globals.css.
+part NavigationMenu() { Stack class("nav-menu") { slot } }
+part NavigationMenuItem(label: text) {
+  Stack class("nav-menu-item") {
+    Span "{$label}" class("nav-menu-trigger")
+    Stack class("nav-menu-content") { slot }
+  }
+}
+part NavigationMenuLink(title: text, desc: text, href: text) {
+  Link "" -> "{$href}" class("nav-menu-link") {
+    Span "{$title}" class("nav-menu-link-title")
+    Span "{$desc}" class("nav-menu-link-text")
+  }
+}

package/registry/pagination.muten

@@ -0,0 +1,9 @@
+# Pagination + sub-components (links reuse the .btn classes).
+# Compose: Pagination { PaginationPrevious(href) PaginationLink(label,href,page,current) PaginationEllipsis PaginationNext(href) }
+# shadcn-for-muten · part · no deps · styles via the semantic .pagination* + .btn classes in globals.css.
+part Pagination() { Nav class("pagination") aria(label: "pagination") { slot } }
+# `page` is this link's number, `current` the active-page state - the part highlights itself when they match.
+part PaginationLink(label: text, href: text, page: number, current: number) { Link "{$label}" -> "{$href}" class("btn btn-icon", "btn-outline" when $page == $current, "btn-ghost" when $page != $current) }
+part PaginationPrevious(href: text) { Link "Previous" -> "{$href}" class("btn btn-ghost btn-sm gap-1") }
+part PaginationNext(href: text) { Link "Next" -> "{$href}" class("btn btn-ghost btn-sm gap-1") }
+part PaginationEllipsis() { Span "…" class("pagination-ellipsis") }

package/registry/popover.muten

@@ -0,0 +1,11 @@
+# Popover - a button that opens a floating panel below it. The PAGE owns the bool + the toggle action:
+#   state { open = false : bool }   action t mutates open { open.toggle() }
+#   Popover(label: "Open", open: open, onToggle: t) { … any content … }
+# shadcn-for-muten · part · no deps · the backdrop catches outside clicks; styles via the semantic .popover* classes.
+part Popover(label: text, open: bool, onToggle: action) {
+  Stack class("popover") {
+    Button "{$label}" -> $onToggle aria(expanded: $open) class("btn btn-outline")
+    when $open { Button -> $onToggle class("popover-backdrop") }
+    Stack class("popover-content", "popover-content-open" when $open) { slot }
+  }
+}

package/registry/progress.muten

@@ -0,0 +1,7 @@
+# Progress - a determinate progress bar. value is 0-100; the fill width is the one runtime value, set via style().
+# shadcn-for-muten · part · no deps · styles via the semantic .progress* classes in globals.css.
+part Progress(value: number) {
+  Stack class("progress") {
+    Stack class("progress-indicator") style(w: "{$value}%")
+  }
+}

package/registry/radio-group.muten

@@ -0,0 +1,11 @@
+# Radio Group - single choice from a list. The PAGE owns a `text` state + an action that sets it:
+#   state { plan = "pro" : text }   action setPlan(v: text) mutates plan { plan.set(v) }
+#   RadioGroup { RadioGroupItem(value: "pro", current: plan, label: "Pro", onSelect: setPlan) … }
+# shadcn-for-muten · part · no deps · the dot always renders and scales in via .radio-dot-on.
+part RadioGroup() { Stack class("radio-group") { slot } }
+part RadioGroupItem(value: text, current: text, label: text, onSelect: action) {
+  Button -> $onSelect($value) aria(checked: $value == $current) class("radio-row") {
+    Stack class("radio") { Stack class("radio-dot", "radio-dot-on" when $value == $current) }
+    Span "{$label}" class("radio-label")
+  }
+}

package/registry/resizable.js

@@ -0,0 +1,29 @@
+// Resizable host component (muten Custom). inputs: { left, right } (panel labels). A draggable splitter
+// resizes the two panels. Edit this file to render real content per panel instead of the label text.
+export function mount(el, inputs, handlers) {
+  const a = document.createElement('div'); a.className = 'resizable-panel';
+  const handle = document.createElement('div'); handle.className = 'resizable-handle';
+  const b = document.createElement('div'); b.className = 'resizable-panel';
+  el.appendChild(a); el.appendChild(handle); el.appendChild(b);
+
+  let pct = 50;
+  const paint = () => { a.style.flexBasis = pct + '%'; b.style.flexBasis = (100 - pct) + '%'; };
+  const setText = (left, right) => { a.textContent = left == null ? 'One' : String(left); b.textContent = right == null ? 'Two' : String(right); };
+  setText(inputs.left, inputs.right);
+  paint();
+
+  let drag = false;
+  handle.addEventListener('pointerdown', (e) => { drag = true; handle.setPointerCapture(e.pointerId); });
+  el.addEventListener('pointermove', (e) => {
+    if (!drag) return;
+    const r = el.getBoundingClientRect();
+    if (!r.width) return;
+    pct = Math.min(85, Math.max(15, ((e.clientX - r.left) / r.width) * 100));
+    paint();
+  });
+  const stop = () => { drag = false; };
+  handle.addEventListener('pointerup', stop);
+  handle.addEventListener('pointercancel', stop);
+
+  return (n) => setText(n.left, n.right);
+}

package/registry/resizable.muten

@@ -0,0 +1,6 @@
+# Resizable - two panels with a draggable splitter. Pass the panel labels; drag the handle to resize.
+#   Resizable(left: "Sidebar", right: "Content")
+# shadcn-for-muten · Custom · host JS is src/components/Resizable.js (edit it to render real content per panel).
+part Resizable(left: text, right: text) {
+  Custom Resizable inputs(left: $left, right: $right) class("resizable")
+}

package/registry/scroll-area.muten

@@ -0,0 +1,4 @@
+# Scroll Area - a scrollable region with styled scrollbars (max-height 18rem by default; eject to change).
+#   ScrollArea { … long content … }
+# shadcn-for-muten · part · no deps · styles via the semantic .scroll-area class in globals.css.
+part ScrollArea() { Stack class("scroll-area") { slot } }

package/registry/select.muten

@@ -0,0 +1,21 @@
+# 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") }
+  }
+}