@muten/shadcn 0.0.5 → 0.1.0

package/registry/sidebar.muten

@@ -1,19 +1,27 @@
-# AppSidebar - a collapsible nav panel (named AppSidebar, NOT Sidebar, so it never shadows muten's core `Sidebar`
-# <aside> primitive). The PAGE owns a collapsed bool + the active item:
-#   state { collapsed = false : bool  nav = "sprites" : text }   action setNav(v: text) mutates nav { nav.set(v) }
-#   AppSidebar(collapsed: collapsed) {
-#     SidebarHeader { Span "Studio" }
-#     SidebarGroup { SidebarGroupLabel(label: "Assets")
-#       SidebarItem(label: "Sprites", value: "sprites", current: nav, onSelect: setNav) { Icon "lucide:image" class("size-4 shrink-0") } … }
+# AppSidebar - a side menu of muten parts (shadcn Nova's Sidebar): a header, groups with their label, items with an
+# icon and a count, a footer. It folds to icons only (the names show on hover). The page owns where you are and
+# whether it is folded. (AppShell is the whole frame - sidebar, header, sheet, ⌘K - built from data.)
+#   AppSidebar(collapsed: folded) {
+#     SidebarHeader { … }
+#     SidebarGroup(label: "Principal") { SidebarItem(label: "Agenda", value: "agenda", current: place, count: "14", onSelect: go) { Icon "lucide:calendar" } }
+#     SidebarFooter { … }
 #   }
-# shadcn-for-muten · part · no deps · styles via the semantic .sidebar* classes in globals.css.
-part AppSidebar(collapsed: bool) { Stack class("sidebar", "sidebar-collapsed" when $collapsed) { slot } }
-part SidebarHeader() { Stack class("sidebar-header") { slot } }
-part SidebarGroup() { Stack class("sidebar-group") { slot } }
-part SidebarGroupLabel(label: text) { Span "{$label}" class("sidebar-group-label") }
-part SidebarItem(label: text, value: text, current: text, onSelect: action) {
-  Button -> $onSelect($value) aria(pressed: $value == $current) class("sidebar-item", "sidebar-item-active" when $value == $current) {
+# The name AppSidebar avoids muten's own Sidebar primitive. shadcn-for-muten · parts · no deps · Nova (.cn-sidebar-*) + kit.css.
+part AppSidebar(collapsed: bool, label: text = "Menú") {
+  Nav class("cx-sidebar") data(slot: "sidebar", collapsed: $collapsed) aria(label: $label) { Stack class("cn-sidebar-inner cx-sb-inner") data(slot: "sidebar-inner") { slot } }
+}
+part SidebarHeader() { Stack class("cn-sidebar-header cx-sb-head") data(slot: "sidebar-header") { slot } }
+part SidebarFooter() { Stack class("cn-sidebar-footer cx-sb-foot") data(slot: "sidebar-footer") { slot } }
+part SidebarGroup(label: text = "") {
+  Stack class("cn-sidebar-group cx-sb-group") data(slot: "sidebar-group") aria(role: "group", label: $label) {
+    Span "{$label}" class("cn-sidebar-group-label cx-sb-glabel") data(slot: "sidebar-group-label")
+    Stack class("cn-sidebar-menu cx-sb-menu") data(slot: "sidebar-menu") { slot }
+  }
+}
+part SidebarItem(label: text, value: text, current: text, onSelect: action, count: text = "") {
+  Button -> $onSelect($value) class("cn-sidebar-menu-button cn-sidebar-menu-button-variant-default cn-sidebar-menu-button-size-default cx-sb-item") data(slot: "sidebar-menu-button", active: $value == $current, name: $label) aria(current: $value == $current) {
     slot
-    Span "{$label}" class("sidebar-item-label truncate")
+    Span "{$label}" class("cx-sb-label")
+    Span "{$count}" class("cn-sidebar-menu-badge cx-sb-count") data(slot: "sidebar-menu-badge")
   }
 }

package/registry/skeleton.muten

@@ -1,4 +1,6 @@
-# Skeleton - a loading placeholder. Add the size utilities via class (paramless part, so class() works):
-#   Skeleton class("h-4 w-32")   ·   Skeleton class("size-10 rounded-full")
-# shadcn-for-muten · part · no deps · uses .skeleton (pulse) from globals.css.
-part Skeleton() { Stack class("skeleton") { slot } }
+# Skeleton - the shape of content that has not arrived. Size it with class(); shape: "" | circle | pill.
+#   Skeleton(shape: "circle") class("size-8")    Skeleton() class("h-3 w-2/3")
+# Build a whole placeholder from the SAME parts as the content (an Item with Skeletons in place of the text), so the
+# swap changes pixels, not layout. Only while there is nothing to show: a refresh keeps the content.
+# shadcn-for-muten · part · no deps · Nova (.cn-skeleton) + kit.css (shimmer).
+part Skeleton(shape: text = "") { Stack class("cn-skeleton") data(slot: "skeleton", shape: $shape) aria(hidden: "true") }

package/registry/slider.js

@@ -1,31 +1,77 @@
-// 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); }
+// The app-wide slider: a range input with a value bubble that follows the thumb and a filled track.
+// A native muten `Range` can't render a following bubble or a cross-browser fill, so this is a Custom
+// (a real widget the DSL can't express). Every slider in the app uses THIS, so they all look the same.
+//
+// inputs.value  = current number (snapshot at mount; the returned updater syncs later external changes)
+// inputs.min / inputs.max / inputs.step = numeric bounds (default 0 / 100 / 1)
+// inputs.suffix = text appended in the bubble (e.g. "%"); default ""
+// on.change(n)  = fires with the NUMBER while dragging. The value is clamped to [min, max].
+//
+// Styling lives in styles.css (.mslider*); this file only wires behavior.
+
+function sliderMount(el, inputs, on) {
+  const readNum = (v, fallback) => {
+    const n = Number(v);
+    return Number.isFinite(n) ? n : fallback;
+  };
+  const min = readNum(inputs && inputs.min, 0);
+  const max = readNum(inputs && inputs.max, 100);
+  const step = readNum(inputs && inputs.step, 1);
+  const suffix = String((inputs && inputs.suffix != null ? inputs.suffix : ''));
+
+  const clamp = (v) => {
+    if (!Number.isFinite(v)) return min;
+    return v < min ? min : (v > max ? max : v);
   };
+  let value = clamp(readNum(inputs && inputs.value, min));
 
-  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);
+  el.innerHTML = '';
+  el.classList.add('mslider');
+  const bubble = document.createElement('span');
+  bubble.className = 'mslider-bubble';
+  const input = document.createElement('input');
+  input.type = 'range';
+  input.className = 'mslider-input';
+  input.min = String(min);
+  input.max = String(max);
+  input.step = String(step);
+  input.setAttribute('aria-label', 'Deslizador');
+  el.append(bubble, input);
 
-  return (next) => { const v = Number(next.value ?? value); if (v !== value) { value = v; paint(v); } };
+  const pct = () => (max === min ? 0 : ((value - min) / (max - min)) * 100);
+
+  const paint = () => {
+    input.value = String(value);
+    const p = pct();
+    input.style.setProperty('--p', p + '%');
+    bubble.textContent = value + suffix;
+    // Keep the bubble centered over the thumb, accounting for the thumb width.
+    const w = input.getBoundingClientRect().width;
+    if (w > 0) {
+      const thumb = 21;
+      bubble.style.left = ((p / 100) * (w - thumb) + thumb / 2) + 'px';
+    }
+  };
+  paint();
+  // The width can be 0 when mounted inside a panel that is still opening; repaint once it has laid out.
+  requestAnimationFrame(paint);
+
+  input.addEventListener('input', () => {
+    value = clamp(readNum(input.value, min));
+    paint();
+    if (on && on.change) on.change(value);
+  });
+  window.addEventListener('resize', paint);
+  // the bubble needs the real width: repaint whenever the slider gets laid out or resized (not only on input)
+  if (window.ResizeObserver) new ResizeObserver(paint).observe(input);
+
+  return (next) => {
+    if (next && next.value != null) {
+      const v = clamp(readNum(next.value, value));
+      if (v !== value) { value = v; paint(); }
+    }
+  };
 }
+
+// muten Custom entry: the plugin's Slider keeps its `input` handler name; Storio's slider calls `change`.
+export function mount(el, inputs, on) { el.dataset.bubble = inputs.bubble || 'always'; return sliderMount(el, inputs, { change: (n) => (on.input || on.change)?.(n) }); }

package/registry/slider.muten

@@ -1,7 +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")
+# Slider - Storio's slider: a range with the value in a bubble that follows the thumb and a filled track.
+#   Slider(value: deposit, min: 10, max: 100, step: 10, suffix: " %", onInput: setDeposit)
+# bubble: always | drag (only while moving or focused) | off.
+# shadcn-for-muten · Custom · host JS slider.js (Storio's Slider, unchanged).
+part Slider(value: number, min: number = 0, max: number = 100, step: number = 1, suffix: text = "", bubble: text = "always", onInput: action) {
+  Custom Slider inputs(value: $value, min: $min, max: $max, step: $step, suffix: $suffix, bubble: $bubble) on(input: $onInput) class("cx-mslider-host")
 }

package/registry/sortable-behavior.js

@@ -0,0 +1,43 @@
+// SortableBehavior (muten Custom) - reorder the Items of a Sortable: pointer (mouse + touch) on the grip, the others
+// slide to make room; or focus the grip and use Up/Down. Announces «<title>: posición n de m» and emits the keys in
+// their new order. Same feel as the reference artifact's sortable list.
+export function mount(el, inputs, on) {
+  const sort = el.parentElement;
+  const live = document.createElement('span'); live.className = 'cx-sr'; live.setAttribute('aria-live', 'polite'); sort.after(live);
+  const items = () => [...sort.querySelectorAll(':scope > .cx-item')];
+  sort.querySelectorAll('.cx-grip').forEach((g) => { g.tabIndex = 0; g.title = 'Arrastra para ordenar'; });
+  const done = (item) => {
+    const all = items(); live.textContent = `${item.querySelector('.cn-item-title')?.textContent || ''}: posición ${all.indexOf(item) + 1} de ${all.length}`;
+    on.reorder?.(all.map((x) => x.dataset.key).join(','));
+  };
+  sort.addEventListener('pointerdown', (e) => {
+    const grip = e.target.closest('.cx-grip'); if (!grip) return;
+    e.preventDefault();
+    const item = grip.closest('.cx-item'), all = items();
+    const rects = all.map((x) => x.getBoundingClientRect()), start = e.clientY, from = all.indexOf(item);
+    const step = rects[1] ? rects[1].top - rects[0].top : rects[0].height + 8;
+    let to = from;
+    item.classList.add('lifting'); grip.setPointerCapture(e.pointerId);
+    const move = (ev) => {
+      const dy = ev.clientY - start; item.style.transform = `translateY(${dy}px)`;
+      to = Math.max(0, Math.min(all.length - 1, from + Math.round(dy / step)));
+      all.forEach((x, i) => { if (x === item) return; let shift = 0; if (from < to && i > from && i <= to) shift = -step; if (from > to && i < from && i >= to) shift = step; x.style.transform = shift ? `translateY(${shift}px)` : ''; });
+    };
+    const up = () => {
+      grip.removeEventListener('pointermove', move); grip.removeEventListener('pointerup', up); grip.removeEventListener('pointercancel', up);
+      all.forEach((x) => { x.style.transition = 'none'; x.style.transform = ''; });
+      const ref = all[to]; if (to !== from) sort.insertBefore(item, from < to ? ref.nextSibling : ref);
+      item.classList.remove('lifting'); void sort.offsetWidth; all.forEach((x) => { x.style.transition = ''; });
+      if (to !== from) done(item);
+    };
+    grip.addEventListener('pointermove', move); grip.addEventListener('pointerup', up); grip.addEventListener('pointercancel', up);
+  });
+  sort.addEventListener('keydown', (e) => {
+    const grip = e.target.closest('.cx-grip'); if (!grip || !['ArrowUp', 'ArrowDown'].includes(e.key)) return;
+    e.preventDefault(); const item = grip.closest('.cx-item');
+    if (e.key === 'ArrowUp' && item.previousElementSibling?.classList.contains('cx-item')) sort.insertBefore(item, item.previousElementSibling);
+    else if (e.key === 'ArrowDown' && item.nextElementSibling?.classList.contains('cx-item')) sort.insertBefore(item.nextElementSibling, item);
+    else return;
+    grip.focus(); done(item);
+  });
+}

package/registry/sortable-behavior.muten

@@ -0,0 +1,2 @@
+# SortableBehavior - the drag (pointer + keys) of a Sortable. Used by Sortable. shadcn-for-muten · Custom.
+part SortableBehavior(onReorder: action) { Custom SortableBehavior on(reorder: $onReorder) class("cx-sortable-behavior") }

package/registry/sortable-list.js

@@ -1,27 +1,11 @@
-// SortableList host (muten Custom). inputs: { items (comma-joined) }. handlers: { reorder(commaJoined) }.
-// Drag a row by its grip to reorder; emits the new order. The page owns a comma-joined text (e.g. layer order).
-export function mount(el, inputs, handlers) {
-  const GRIP = '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.4"/><circle cx="9" cy="12" r="1.4"/><circle cx="9" cy="18" r="1.4"/><circle cx="15" cy="6" r="1.4"/><circle cx="15" cy="12" r="1.4"/><circle cx="15" cy="18" r="1.4"/></svg>';
-  const parse = (v) => String(v == null ? '' : v).split(',').map((s) => s.trim()).filter(Boolean);
-  let items = parse(inputs.items);
-  let dragIdx = -1;
-
-  const emit = () => { if (handlers.reorder) handlers.reorder(items.join(',')); };
-  const render = () => {
-    el.innerHTML = '';
-    items.forEach((it, i) => {
-      const row = document.createElement('div'); row.className = 'sortable-row'; row.draggable = true;
-      const handle = document.createElement('span'); handle.className = 'sortable-handle'; handle.innerHTML = GRIP;
-      const label = document.createElement('span'); label.className = 'sortable-label'; label.textContent = it;
-      row.appendChild(handle); row.appendChild(label);
-      row.addEventListener('dragstart', () => { dragIdx = i; row.classList.add('sortable-dragging'); });
-      row.addEventListener('dragend', () => row.classList.remove('sortable-dragging'));
-      row.addEventListener('dragover', (e) => e.preventDefault());
-      row.addEventListener('drop', (e) => { e.preventDefault(); if (dragIdx >= 0 && dragIdx !== i) { const [m] = items.splice(dragIdx, 1); items.splice(i, 0, m); dragIdx = -1; render(); emit(); } });
-      el.appendChild(row);
-    });
-  };
-
-  render();
-  return (n) => { items = parse(n.items); render(); };
+// SortableList (muten Custom) - a list of plain names you reorder (layers, steps), from comma-joined text. It draws
+// the same rows as Sortable and lends them Sortable's behaviour (grip, pointer, Up/Down, the announcement).
+// inputs: items ("Fondo,Jugador,Interfaz"), label. handlers: reorder(the names in their new order, comma-joined).
+export function mount(el, inputs, on) {
+  const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  const GRIP = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>';
+  const names = String(inputs.items || '').split(',').map((s) => s.trim()).filter(Boolean);
+  el.innerHTML = `<div class="cx-sortable" aria-label="${esc(inputs.label || 'Orden')}">${names.map((n) => `<div class="cn-item cn-item-variant-outline cn-item-size-sm group/item cx-item" data-slot="item" data-key="${esc(n)}"><span class="cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-grip" role="button" aria-label="Mover ${esc(n)}" data-grip="true">${GRIP}</span><div class="cn-item-content"><span class="cn-item-title">${esc(n)}</span></div></div>`).join('')}<span class="cx-sl-anchor"></span></div>`;
+  import('@muten/shadcn/registry/sortable-behavior.js').then((b) => b.mount(el.querySelector('.cx-sl-anchor'), {}, { reorder: (v) => on.reorder?.(v) }));
+  return () => {};
 }

package/registry/sortable-list.muten

@@ -1,7 +1,6 @@
-# Sortable List - drag rows by the grip to reorder (layers, steps). The PAGE owns a comma-joined order:
-#   state { layers = "Background,Player,UI" : text }   action reorder(v: text) mutates layers { layers.set(v) }
-#   SortableList(items: layers, onReorder: reorder)
-# shadcn-for-muten · Custom · host JS is src/components/SortableList.js (copied by `muten add sortable-list`).
-part SortableList(items: text, onReorder: action) {
-  Custom SortableList inputs(items: $items) on(reorder: $onReorder) class("sortable-list")
-}
+# SortableList - plain names you put in order (the layers of a design, the steps of a flow) from comma-joined text:
+# the same rows and feel as Sortable (the grip, the others making room, Up/Down on the focused grip).
+#   state { layers = "Fondo,Jugador,Interfaz" : text }   action reorder(v: text) mutates layers { layers.set(v) }
+#   SortableList(items: layers, label: "Capas", onReorder: reorder)
+# For rows with a price or details use Sortable with SortItem. shadcn-for-muten · Custom · sortable-list.js.
+part SortableList(items: text, label: text = "Orden", onReorder: action) { Custom SortableList inputs(items: $items, label: $label) on(reorder: $onReorder) class("cx-slist-host") }

package/registry/sortable.muten

@@ -0,0 +1,15 @@
+# Sortable - Items you reorder: take the grip with a mouse or a finger, or focus it and use the arrows. The others
+# make room as you drag; a screen reader hears the new position. onReorder gets the keys in their new order
+# ("cut,beard,trim") so the page can save it.
+#   Sortable(label: "Orden de los servicios en tu tienda", onReorder: saveOrder) {
+#     SortItem(key: "cut", title: "Corte clásico", price: "$25.000")
+#   }
+# shadcn-for-muten · part + Custom (SortableBehavior) · kit.css (.cx-sortable).
+part Sortable(label: text, onReorder: action) { Stack class("cx-sortable") aria(label: $label) { slot  SortableBehavior(onReorder: $onReorder) } }
+part SortItem(key: text, title: text, price: text = "") {
+  Stack class("cn-item cn-item-variant-outline cn-item-size-sm group/item cx-item") data(slot: "item", key: $key) {
+    Stack class("cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-grip") aria(role: "button", label: "Mover {$title}") data(grip: "true") { Icon "lucide:grip-vertical" }
+    Stack class("cn-item-content") data(slot: "item-content") { Span "{$title}" class("cn-item-title") data(slot: "item-title") }
+    Span "{$price}" class("cx-price")
+  }
+}

package/registry/spark.js

@@ -0,0 +1,14 @@
+// Spark (muten Custom) - a tiny line for a series, the kit's sparkline. inputs: series "3,5,4,6", tone ok|bad|info|wait.
+// Same drawing as the artifact's kit.stat: 100x28 viewBox, stretched, a 2px non-scaling stroke in the tone's color.
+export function mount(el, inputs) {
+  const TONE = { ok: 'success', bad: 'destructive', info: 'info', wait: 'warning' };
+  const draw = (series, tone) => {
+    const values = String(series || '').split(',').map(Number).filter((v) => !Number.isNaN(v));
+    if (values.length < 2) { el.innerHTML = ''; return; }
+    const max = Math.max(...values), min = Math.min(...values), w = 100, h = 28;
+    const points = values.map((v, i) => `${(i / (values.length - 1)) * w},${h - ((v - min) / (max - min || 1)) * (h - 4) - 2}`).join(' ');
+    el.innerHTML = `<svg class="cx-spark" viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" aria-hidden="true"><polyline points="${points}" fill="none" stroke="var(--${TONE[tone] || 'success'})" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round"/></svg>`;
+  };
+  draw(inputs.series, inputs.tone);
+  return (next) => draw(next.series, next.tone);
+}

package/registry/spark.muten

@@ -0,0 +1,3 @@
+# Spark - a tiny line for a series of numbers (the StatCard's). Spark(series: "3,5,4,6,5,8,9", tone: "ok")
+# tone: ok | bad | info | wait. shadcn-for-muten · Custom · host JS is spark.js.
+part Spark(series: text, tone: text = "ok") { Custom Spark inputs(series: $series, tone: $tone) class("cx-spark-host") }

package/registry/spinner.muten

@@ -1,3 +1,4 @@
-# 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") }
+# Spinner - a loading mark for a button or a line, never for a whole screen (that is a Skeleton).
+#   Btn(onClick: save) disabled… { Spinner()  Span "Guardando…" }
+# shadcn-for-muten · part · no deps · Nova (.cn-spinner).
+part Spinner() { Icon "lucide:loader-circle" class("cn-spinner animate-spin") aria(label: "Cargando", role: "status") }

package/registry/split-button.muten

@@ -1,12 +1,14 @@
-# Split Button - a main action + a caret that opens a dropdown. The PAGE owns the main action + the open bool:
-#   state { open = false : bool }   action t mutates open { open.toggle() }
-#   SplitButton(label: "Export", open: open, onMain: doExport, onToggle: t) { DropdownItem(label: "Export as PNG", onSelect: …) … }
-# shadcn-for-muten · part · no deps · reuses the .btn + .dropdown* classes.
-part SplitButton(label: text, open: bool, onMain: action, onToggle: action) {
-  Stack class("split-button") {
-    Button "{$label}" -> $onMain class("btn btn-default split-button-main")
-    Button -> $onToggle aria(expanded: $open) class("btn btn-default split-button-caret") { Icon "lucide:chevron-down" class("size-4") }
-    when $open { Button -> $onToggle class("dropdown-backdrop") }
-    Stack class("dropdown-content", "dropdown-content-open" when $open) { slot }
+# SplitButton - one main action and, joined to it, a chevron with the other ways to do it (save / save as draft).
+# The main action runs on its own; the menu takes DropdownItem parts.
+#   SplitButton(label: "Publicar", onClick: publish) { DropdownItem(label: "Guardar como borrador", onSelect: draft)  DropdownItem(label: "Programar…", onSelect: schedule) }
+# variant: as Btn. shadcn-for-muten · part over ButtonGroup + DropdownMenu.
+part SplitButton(label: text, onClick: action, variant: text = "default", size: text = "default", menu: text = "Más opciones") {
+  ButtonGroup(label: $label) {
+    Btn(variant: $variant, size: $size, onClick: $onClick) { Span "{$label}" }
+    ButtonGroupSeparator()
+    DropdownMenu {
+      DropdownTrigger { TriggerBtn(variant: $variant, size: "icon", label: $menu) class("cx-split-caret") { Icon "lucide:chevron-down" } }
+      DropdownContent(align: "end", width: "14rem") { slot }
+    }
   }
 }

package/registry/stamp-card.muten

@@ -0,0 +1,7 @@
+# StampCard - a loyalty card: stamps toward a reward (good for any shop).
+#   StampCard(store: "Barbería El Roble", owner: "Laura", total: 10, stamps: 7, reward: "un corte gratis")
+# demo "on": it stamps itself one visit at a time and starts over, for a landing; the first touch stops it.
+# shadcn-for-muten · part over KitWidget (kit core).
+part StampCard(store: text, owner: text, total: number = 10, stamps: number, reward: text, demo: text = "") {
+  Custom KitWidget inputs(name: "stampCard", store: $store, owner: $owner, total: $total, stamps: $stamps, reward: $reward, demo: $demo) class("cx-stamp-host")
+}

package/registry/stat-band.muten

@@ -1,9 +1,6 @@
-# StatBand - a divided row of stats (KPIs), uniform + responsive (2-up on mobile). Each Stat holds its value in
-# the slot (a Span, or a `Custom CountUp` for the count-up animation) plus a label:
-#   StatBand {
-#     Stat(label: "trees planted") { Custom CountUp inputs(to: "2.4M") class("stat-value") }
-#     Stat(label: "countries")     { Span "58" class("stat-value") }
-#   }
-# shadcn-for-muten · block · no deps · uses .stat-band / .stat / .stat-value / .stat-label from globals.css.
-part StatBand() { Stack class("stat-band") { slot } }
-part Stat(label: text) { Stack class("stat") { slot  Span "{$label}" class("stat-label") } }
+# StatBand - a row of big numbers split by hairlines (two per row on a phone). Each Stat holds its value in the slot
+# (a Span, or a CountUp that counts up when it comes into view) and its label under it.
+#   StatBand { Stat(label: "citas al mes") { CountUp(to: "12,400") }  Stat(label: "tiendas") { Span "850" } }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-statband).
+part StatBand() { Stack class("cx-statband") { slot } }
+part Stat(label: text) { Stack class("cx-statband-cell") { Stack class("cx-statband-value") { slot }  Span "{$label}" class("cx-statband-label") } }

package/registry/stat.muten

@@ -0,0 +1,23 @@
+# StatCard - one number for any use (sales, bookings, wait time…): label, the value, the change against a period and
+# its line. The icon goes in the slot (or leave it empty). `tone` says if the change is good (ok) or bad (bad) -
+# for a cost or a wait, going down is the good one.
+#   StatCard(label: "Ventas", value: "$1.284.000", delta: "▲ 12 %", tone: "ok", compare: "vs. semana pasada", series: "3,5,4,6,5,8,9") { Icon "lucide:credit-card" }
+# Lay several in a StatGrid. Spark draws the series alone: Spark(series: "3,5,4", tone: "success").
+# shadcn-for-muten · part + Custom (Spark.js) · kit.css (.cx-stat).
+part StatCard(label: text, value: text, delta: text, tone: text = "ok", compare: text = "", series: text = "") {
+  Section class("cn-card cx-stat") data(slot: "card", size: "sm") {
+    Stack class("cx-stat-body") {
+      Stack class("cx-stat-row") {
+        Span "{$label}" class("cx-text") data(slot: "text", variant: "muted")
+        Stack class("cx-stat-ic") { slot }
+      }
+      Span "{$value}" class("cx-text") data(slot: "text", variant: "title")
+      Stack class("cx-stat-row") {
+        Span "{$delta}" class("cn-badge cn-badge-variant-ghost group/badge") data(slot: "badge", variant: "status", tone: $tone)
+        Span "{$compare}" class("cx-text") data(slot: "text", variant: "caption")
+      }
+      Spark(series: $series, tone: $tone)
+    }
+  }
+}
+part StatGrid() { Stack class("cx-stats") { slot } }

package/registry/status-bar.muten

@@ -1,6 +1,7 @@
-# Status Bar - a thin bottom bar of status items (zoom %, coords, dimensions). Use StatusSpacer to push items apart.
-#   StatusBar { StatusItem(label: "Ready") StatusSpacer StatusItem(label: "32 x 32") StatusItem(label: "100%") }
-# shadcn-for-muten · part · no deps · styles via the semantic .status-* classes in globals.css.
-part StatusBar() { Stack class("status-bar") { slot } }
-part StatusItem(label: text) { Span "{$label}" class("status-item") }
-part StatusSpacer() { Stack class("status-spacer") }
+# StatusBar - the thin line under an editor that says how things stand: the tool, the position, the size, the zoom,
+# whether it is saved. StatusSpacer pushes what follows to the right; an item can carry an icon.
+#   StatusBar { StatusItem(label: "Listo") { Icon "lucide:circle-check" }  StatusSpacer()  StatusItem(label: "1080 × 1350")  StatusItem(label: "100 %") }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-status).
+part StatusBar(label: text = "Estado") { Stack class("cx-status") data(slot: "status-bar") aria(role: "status", label: $label) { slot } }
+part StatusItem(label: text) { Stack class("cx-status-item") { slot  Span "{$label}" class("cx-status-text") } }
+part StatusSpacer() { Stack class("cx-status-spacer") }

package/registry/stepper.muten

@@ -1,17 +1,20 @@
-# Stepper - a horizontal (default) or vertical progress indicator. Wrap the steps in Stepper (or
-# StepperVertical) and render each with the Step part; state is "done" | "active" | "upcoming".
-#   state { steps = query steps : list<StepItem> }
-#   Stepper { each steps as s { Step(num: s.num, label: s.label, state: s.state) } }
-# A completed step shows a check (the number hides); the current step is ringed. Own it with `muten add stepper`.
-# shadcn-for-muten · part · no deps · styles via .stepper / .stepper-step* in globals.css.
-part Stepper() { Stack class("stepper") { slot } }
-part StepperVertical() { Stack class("stepper stepper-vertical") { slot } }
-part Step(num: text, label: text, state: text) {
-  Stack class("stepper-step stepper-step-{$state}") {
-    Stack class("stepper-indicator") {
-      when $state == "done" { Icon "lucide:check" class("size-4") }
-      Span "{$num}" class("stepper-num")
+# Stepper - where you are in a flow of a few steps. Horizontal: one short bar per step under its name, as the «Nueva
+# cita» modal shows it. Vertical: numbered circles joined by a line, each with what it asks. A done step fills its
+# bar (or shows a check); the current one is marked and read out as the current step.
+#   Stepper(count: 4, label: "Paso 2 de 4: Servicio") { Step(num: "1", label: "Cliente", state: "done")  Step(num: "2", label: "Servicio", state: "now") … }
+#   Stepper(count: 3, orientation: "vertical") { Step(num: "1", label: "Tu negocio", description: "Nombre y rubro", state: "done") … }
+# look "list" (vertical): a numbered list for «how it works», ruled rows and a round number, the current one filled.
+# state: done | now | "" (to come). shadcn-for-muten · part · no deps · kit.css (.cx-stepper).
+part Stepper(count: number, orientation: text = "horizontal", label: text = "", look: text = "") {
+  Stack class("cx-stepper cx-stp") data(slot: "stepper", orientation: $orientation, look: $look) style(n: "{$count}") aria(role: "list", label: $label) { slot }
+}
+part Step(num: text, label: text, state: text = "", description: text = "") {
+  Stack class("cx-step cx-stp-step") data(state: $state) aria(role: "listitem", current: $state == "now") {
+    Stack class("cn-progress cx-stp-bar") data(slot: "progress") { Stack class("cn-progress-indicator") data(slot: "progress-indicator") }
+    Stack class("cx-stp-dot") { Span "{$num}" class("cx-stp-num")  Icon "lucide:check" class("cx-stp-check") }
+    Stack class("cx-stp-text") {
+      Span "{$label}" class("cx-text cx-stp-label") data(slot: "text", variant: "caption")
+      Text "{$description}" class("cx-stp-desc")
     }
-    Span "{$label}" class("stepper-label")
   }
 }

package/registry/store-qr.js

@@ -0,0 +1,5 @@
+// StoreQr (muten Custom) - the kit's storeQr (kit/menus.js).
+export function mount(el, inputs, on) {
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/menus.js')]).then(([core, m]) => m.storeQr(el, inputs, core, on));
+  return () => {};
+}

package/registry/store-qr.muten

@@ -0,0 +1,5 @@
+# StoreQr - the shop's QR with its mark in the middle, the name, the link and «Copiar enlace» (falls back to
+# selecting the link when the clipboard says no).
+#   StoreQr(url: "https://storio.ink/el-roble", name: "Barbería El Roble", mark: "ER")
+# shadcn-for-muten · Custom (kit menus + vendored qrcode-generator, MIT) · host JS store-qr.js.
+part StoreQr(url: text, name: text = "", mark: text = "") { Custom StoreQr inputs(url: $url, name: $name, mark: $mark) class("cx-qr-host") }

package/registry/swatch.muten

@@ -1,10 +1,10 @@
-# Swatch / Swatch Palette - a grid of selectable color swatches (recent colors, a pixel palette). The PAGE owns
-# the selected hex + the list of colors:
-#   state { colors = ["#ef4444", "#3b82f6", "#22c55e"] : list<text>  active = "#3b82f6" : text }
+# Swatch / SwatchPalette - colours to pick from at a glance: the last ones used, the brand's, a fixed palette. The
+# chosen one carries a ring in the skin's --selected colour and reads as pressed. The page owns the list and the pick.
+#   state { colors = ["#6B46F2", "#0EA5E9", "#22C55E"] : list<text>  active = "#6B46F2" : text }
 #   action pick(c: text) mutates active { active.set(c) }
-#   SwatchPalette { each colors as c { Swatch(color: c, current: active, onSelect: pick) } }
-# shadcn-for-muten · part · no deps · the swatch background is set via style(bg).
-part SwatchPalette() { Stack class("swatch-palette") { slot } }
-part Swatch(color: text, current: text, onSelect: action) {
-  Button -> $onSelect($color) aria(pressed: $color == $current) class("swatch", "swatch-active" when $color == $current) style(bg: "{$color}")
+#   SwatchPalette(label: "Colores recientes") { each colors as c { Swatch(color: c, current: active, onSelect: pick) } }
+# size: sm | default | lg. shadcn-for-muten · part · no deps · kit.css (.cx-swatch).
+part SwatchPalette(label: text = "Colores") { Stack class("cx-swatches-row") aria(role: "group", label: $label) { slot } }
+part Swatch(color: text, current: text, onSelect: action, size: text = "default") {
+  Button -> $onSelect($color) class("cx-swatch") data(size: $size, name: $color) aria(pressed: $color == $current, label: $color) style(bg: "{$color}")
 }

package/registry/switch.muten

@@ -1,8 +1,16 @@
-# 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)
+# Switch - on/off; the page owns the bool and the action. SwitchRow is the settings line: label, switch, the why.
+#   Switch(on: dark, onToggle: toggleDark, label: "Modo oscuro")
+#   SwitchRow(on: home, onToggle: toggleHome, label: "También a domicilio", description: "Pide la verificación de identidad…")
+# size: default | sm. shadcn-for-muten · part · no deps · Nova (.cn-switch reads data-checked / data-unchecked).
+part Switch(on: bool, onToggle: action, label: text = "", size: text = "default") {
+  Button -> $onToggle class("cn-switch group/switch") data(slot: "switch", size: $size, checked: $on, unchecked: not $on) aria(role: "switch", checked: $on, label: $label) {
+    Span "" class("cn-switch-thumb") data(slot: "switch-thumb", checked: $on, unchecked: not $on)
+  }
+}
+part SwitchRow(on: bool, onToggle: action, label: text, description: text = "") {
+  Stack class("cx-switch-row") {
+    Span "{$label}" class("cn-label") data(slot: "label")
+    Switch(on: $on, onToggle: $onToggle, label: $label)
+    Text "{$description}" class("cx-switch-why")
   }
 }

package/registry/table-view.muten

@@ -0,0 +1,10 @@
+# TableView - the DataTable: filters as data (search · facet · date · range) with counts and chips, rows that fade /
+# slide / enter, the height easing, sort by header, selection with a bulk bar in its own space, the phone's
+# «buscar + Filtros» sheet, and Items when its box is narrow. (`DataTable` is muten's raw table primitive.)
+#   TableView(columns: @cols, rows: @appointments, filters: @filters, statuses: @statuses, bulk: @bulk, one: "cita", many: "citas", onAction: act)
+# columns {key, label, type: person|text|date|status|money, sub} · filters {id, type, label, key | keys} ·
+# statuses {id, label, tone} · bulk {id, label, variant, set {…}} → onAction gets {"action", "ids"}.
+# shadcn-for-muten · part over KitWidget (kit core + kit/table.js).
+part TableView(columns: list, rows: list, filters: list, statuses: list, bulk: list, one: text = "fila", many: text = "filas", onAction: action) {
+  Custom KitWidget inputs(name: "table", columns: $columns, rows: $rows, filters: $filters, statuses: $statuses, bulk: $bulk, one: $one, many: $many) on(action: $onAction) class("cx-table-host")
+}

package/registry/tabs-behavior.js

@@ -0,0 +1,27 @@
+// TabsBehavior (muten Custom) - the indicator under the chosen tab slides to the next one (the kit's 260 ms
+// transition), and Arrow/Home/End move between tabs and pick them. The chosen tab is the page's state (aria-selected
+// or aria-pressed); this only follows it. Same behaviour as the reference artifact's tabs.
+export function mount(el) {
+  const list = el.parentElement;
+  const ind = document.createElement('span'); ind.className = 'cx-tab-ind'; ind.setAttribute('aria-hidden', 'true'); list.prepend(ind);
+  const tabs = () => [...list.querySelectorAll(':scope > .cx-tab')];
+  const chosen = () => tabs().find((t) => t.getAttribute('aria-selected') === 'true' || t.getAttribute('aria-pressed') === 'true');
+  let first = true;
+  const place = () => {
+    const t = chosen(); if (!t) { ind.style.opacity = '0'; return; }
+    ind.style.opacity = '';
+    if (first) ind.style.transition = 'none';
+    ind.style.left = t.offsetLeft + 'px'; ind.style.width = t.offsetWidth + 'px';
+    if (first) { void ind.offsetWidth; ind.style.transition = ''; first = false; }
+    tabs().forEach((x) => { x.tabIndex = x === t ? 0 : -1; });
+    if (list.scrollWidth > list.clientWidth) t.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+  };
+  new MutationObserver(place).observe(list, { subtree: true, attributes: true, attributeFilter: ['aria-selected', 'aria-pressed'] });
+  new ResizeObserver(place).observe(list);
+  list.addEventListener('keydown', (e) => {
+    const all = tabs(), i = all.indexOf(document.activeElement); if (i < 0) return;
+    const to = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: all.length - 1 }[e.key]; if (to === undefined) return;
+    e.preventDefault(); const t = all[(to + all.length) % all.length]; t.focus(); t.click();
+  });
+  document.fonts?.ready.then(place); requestAnimationFrame(place);
+}