@muten/shadcn 0.0.7 → 0.1.0

package/registry/live-stack.js

@@ -0,0 +1,29 @@
+// LiveStack (muten Custom) - a pile of news that keeps arriving (see live-stack.muten). Plain DOM, no kit needed:
+// every `every` ms the next item drops in at the front; the older ones step back (--i) and the fourth leaves.
+export function mount(el, inputs) {
+  let items = Array.isArray(inputs.items) ? inputs.items : [];
+  const every = Number(inputs.every) || 2800;
+  const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  el.setAttribute('role', 'log'); el.setAttribute('aria-live', 'polite'); if (inputs.label) el.setAttribute('aria-label', inputs.label);
+  const card = (it) => {
+    const n = document.createElement('div');
+    n.className = 'cx-live-card'; n.dataset.tone = it.tone || '';
+    n.innerHTML = `<span class="cx-live-ic">${it.icon ? `<svg><use href="#${esc(it.icon)}"></use></svg>` : ''}</span><span class="cx-live-tx"><b>${esc(it.title)}</b>${it.text ? `<span>${esc(it.text)}</span>` : ''}</span>${it.time ? `<small>${esc(it.time)}</small>` : ''}`;
+    return n;
+  };
+  const layout = () => [...el.children].forEach((c, i) => { c.style.setProperty('--i', i); if (i > 3) c.remove(); });
+  let k = 0, timer = 0, paused = false;
+  const push = () => {
+    if (!items.length) return;
+    const n = card(items[k % items.length]); k++;
+    n.dataset.enter = ''; el.prepend(n); layout();
+    requestAnimationFrame(() => requestAnimationFrame(() => delete n.dataset.enter));
+  };
+  const loop = () => { if (!paused) push(); timer = setTimeout(loop, every); };
+  if (still) { items.slice(0, 3).reverse().forEach((it) => { el.prepend(card(it)); }); layout(); }
+  else { push(); timer = setTimeout(loop, every); }
+  el.addEventListener('pointerenter', () => { paused = true; });
+  el.addEventListener('pointerleave', () => { paused = false; });
+  return (next) => { items = Array.isArray(next.items) ? next.items : items; };
+}

package/registry/live-stack.muten

@@ -0,0 +1,7 @@
+# LiveStack - news that keeps arriving, for a landing page: what the product does while nobody watches («Carla agendó
+# un corte», «Pedido nuevo», «Tu asistente contestó»). One at a time a card drops in at the front and the older ones
+# step back behind it, smaller, and leave after three. Pointer over it pauses; reduced motion shows the first three still.
+#   LiveStack(items: @news, every: 2800)
+# items {icon (a kit sprite id), title, text, time, tone: "" | ok | wait | info}
+# shadcn-for-muten · Custom · kit.css (.cx-live) · host JS live-stack.js.
+part LiveStack(items: list, every: number = 2800, label: text = "") { Custom LiveStack inputs(items: $items, every: $every, label: $label) class("cx-live") }

package/registry/logo-cloud.muten

@@ -1,11 +1,6 @@
-# LogoCloud - the "trusted by" strip: a wrapping row of logos, muted + grayscale until hover. GENERIC - a
-# LogoCloudItem holds ANY logo type: an Image, an Icon, or a plain text wordmark (Span). All normalize to one
-# height. Give it a heading above via a plain Text.
-#   LogoCloud {
-#     LogoCloudItem { Image "~/logos/acme.svg" alt("Acme") }   # image logo
-#     LogoCloudItem { Icon "simple-icons:vercel" }             # icon logo
-#     LogoCloudItem { Span "Globex" class("text-lg font-bold tracking-tight") }   # text wordmark
-#   }
-# shadcn-for-muten · block · no deps · styles via .logo-cloud / .logo-cloud-item in globals.css.
-part LogoCloud() { Stack class("logo-cloud") { slot } }
-part LogoCloudItem() { Stack class("logo-cloud-item") { slot } }
+# LogoCloud - the «they use it» strip: a wrapping row of logos, muted until the pointer rests on one. A
+# LogoCloudItem holds any logo: an Image, an Icon or a word in a Span; all take the same height.
+#   LogoCloud(label: "Lo usan") { LogoCloudItem { Image "~/logos/roble.svg" alt("El Roble") }  LogoCloudItem { Span "Pelos & Co" } }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-logos).
+part LogoCloud(label: text = "") { Stack class("cx-logos") aria(label: $label) { slot } }
+part LogoCloudItem() { Stack class("cx-logo") { slot } }

package/registry/member-list.muten

@@ -0,0 +1,6 @@
+# MemberList - any group (team, workspace, family plan): who is in, their role in the library's menu, invite.
+#   MemberList(members: @members, roles: @roles, owner: "Propietario", one: "miembro", many: "miembros", cta: "Invitar", note: "Le llega un correo para unirse.")
+# shadcn-for-muten · part over KitWidget (kit core).
+part MemberList(members: list, roles: list, owner: text = "", one: text = "persona", many: text = "personas", cta: text = "Invitar", note: text = "") {
+  Custom KitWidget inputs(name: "memberList", members: $members, roles: $roles, owner: $owner, one: $one, many: $many, cta: $cta, note: $note) class("cx-team")
+}

package/registry/menubar.muten

@@ -1,14 +1,10 @@
-# 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") }
+# Menubar - a desktop app's menu bar: each word opens its menu; once one is open, moving the pointer to the next word
+# opens that one, and the left and right arrows walk the bar. Each menu holds DropdownContent and its items.
+#   Menubar(label: "Editor") {
+#     MenubarMenu { MenubarTrigger(label: "Archivo")  DropdownContent { DropdownItem(label: "Nuevo", shortcut: "⌘N", onSelect: create) … } }
+#     MenubarMenu { MenubarTrigger(label: "Editar")  DropdownContent { … } }
+#   }
+# shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (.cn-menubar*) + kit.css.
+part Menubar(label: text = "Menú") { Stack class("cn-menubar cx-menubar") data(slot: "menubar") aria(role: "menubar", label: $label) { slot } }
+part MenubarMenu() { Stack class("cx-ov") data(slot: "menubar-menu") { slot  OverlayBehavior(kind: "menubar") } }
+part MenubarTrigger(label: text) { Stack class("cx-ov-trigger") { Button "{$label}" class("cn-menubar-trigger") data(slot: "menubar-trigger") aria(role: "menuitem") } }

package/registry/message-scroller.js

@@ -0,0 +1,12 @@
+// MessageScrollerBehavior (muten Custom) - keeps a conversation at its latest message: it opens at the bottom, and a
+// message that arrives keeps it there only when the reader was already at the bottom (scrolling back is respected).
+export function mount(el) {
+  const box = el.parentElement;
+  let pinned = true;
+  const atBottom = () => box.scrollHeight - box.scrollTop - box.clientHeight < 24;
+  box.addEventListener('scroll', () => { pinned = atBottom(); }, { passive: true });
+  const stick = () => { if (pinned) box.scrollTop = box.scrollHeight; };
+  requestAnimationFrame(() => { box.scrollTop = box.scrollHeight; });
+  new MutationObserver(stick).observe(box, { childList: true, subtree: true });
+  return () => {};
+}

package/registry/message-scroller.muten

@@ -1,4 +1,8 @@
-# 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 } }
+# MessageScroller - the column of a conversation: it scrolls inside itself and opens at the latest message; a new
+# message keeps it at the bottom only if you were already there (reading back is never interrupted).
+#   MessageScroller(label: "Chat con Valentina", height: "22rem") { Marker(label: "Hoy")  Message(…) { … } }
+# shadcn-for-muten · part + Custom (stick to the bottom) · kit.css (.cx-chat).
+part MessageScroller(label: text = "Conversación", height: text = "22rem") {
+  Stack class("cx-chat cx-scroll cx-msg-scroller") data(slot: "message-scroller") style(h: "{$height}") aria(role: "log", label: $label) { slot  MessageScrollerBehavior() }
+}
+part MessageScrollerBehavior() { Custom MessageScrollerBehavior class("cx-msg-behavior") }

package/registry/message.muten

@@ -1,11 +1,28 @@
-# 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 }
+# Message - a chat bubble, the same the kit's inbox draws: theirs on the left on the surface, yours on the right in
+# the primary colour, with the time and, on yours, whether it was sent, delivered or read. Text, a photo or an
+# Attachment go inside. Marker is the day line between messages; MessageScroller holds them and scrolls.
+#   MessageScroller(label: "Chat con Valentina") {
+#     Marker(label: "Hoy")
+#     Message(variant: "received", time: "10:02") { Span "Hola, ¿tienen cita hoy?" }
+#     Message(variant: "sent", time: "10:03", status: "read") { Span "Sí: a las 15:00 con Camila." }
+#   }
+# variant: received | sent · status (sent only): sending | sent | delivered | read · tag: a small label (Bot).
+# shadcn-for-muten · parts · no deps · kit.css (.cx-chat-*).
+part Message(variant: text = "received", time: text = "", status: text = "", tag: text = "") {
+  Stack class("cx-chat-msg") data(variant: $variant) {
+    Stack class("cx-chat-bubble cx-msg-bubble") {
+      Stack class("cx-msg-body") { slot }
+      Stack class("cx-chat-meta") {
+        Span "{$tag}" class("cx-chat-tag")
+        Span "{$time}" class("cx-text") data(variant: "caption")
+        when $status == "sending" { Icon "lucide:clock" class("cx-tick") data(status: "sending") aria(label: "Enviando") }
+        when $status == "sent" { Icon "lucide:check" class("cx-tick") data(status: "sent") aria(label: "Enviado") }
+        when $status == "delivered" { Icon "lucide:check-check" class("cx-tick") data(status: "delivered") aria(label: "Entregado") }
+        when $status == "read" { Icon "lucide:check-check" class("cx-tick") data(status: "read") aria(label: "Leído") }
+      }
+    }
+  }
 }
-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") }
+part Bubble(variant: text = "received") { Stack class("cx-chat-bubble cx-msg-bubble") data(variant: $variant) { slot } }
+part Marker(label: text) { Stack class("cx-chat-day") aria(role: "separator") { Span "{$label}" class("cx-text") data(variant: "caption") } }
+part MessageImage(src: text, alt: text = "Foto") { Stack class("cx-chat-img") style(bg: "{$src}") aria(role: "img", label: $alt) }

package/registry/messaging.muten

@@ -0,0 +1,11 @@
+# Messaging - one inbox for every channel: list (search, filters with counts, channel, state, unread), the chat (the
+# bot's control, booking/order cards, system lines, quick actions that ask first, the InputGroup composer) and the
+# person (numbers, what they have now, archive/delete). 3 panes wide, the person in a sheet medium, one pane narrow.
+# All data (shapes in kit-widget.js / the bench page): channels, conversations (with messages + client), filters
+# {id,label,state}, states {id,label,tone}, controls {id,icon,tone,title,description,action,next}, quick
+# {id,icon,label,noun,title,subtitle}, templates {title,body}, replies {match (regex), text}.
+#   Messaging(channels: @channels, conversations: @inbox, filters: @filters, states: @states, controls: @controls, quick: @quick, templates: @templates, replies: @replies, onAction: act)
+# shadcn-for-muten · part over KitWidget (kit core).
+part Messaging(title: text = "Mensajes", channels: list, conversations: list, filters: list, states: list, controls: list, quick: list, templates: list, replies: list, onAction: action) {
+  Custom KitWidget inputs(name: "messaging", title: $title, channels: $channels, conversations: $conversations, filters: $filters, states: $states, controls: $controls, quick: $quick, templates: $templates, replies: $replies) on(action: $onAction) class("cx-mx-host")
+}

package/registry/modal-behavior.js

@@ -0,0 +1,56 @@
+// ModalBehavior (muten Custom) - the behaviour of the adaptive modal; the markup, open/close and the animation are
+// the Modal part's (muten state + kit.css). This only does what markup cannot: history (Back closes), Esc, the focus
+// trap, the scroll lock, the auto mode (dialog on a wide screen, drawer on a phone) and the drawer's drag to close.
+// Same rules as the reference artifact's modal.
+export function mount(el, inputs, on) {
+  const mdl = el.closest('.cx-modal'), root = mdl.parentElement, ov = root.querySelector(':scope > .cx-overlay');
+  const body = mdl.querySelector(':scope > .cx-modal-body');
+  const phone = matchMedia('(max-width: 640px)');
+  const auto = mdl.dataset.mode === 'auto';
+  // the auto mode is resolved NOW (and again when the width crosses the phone line while closed), never at the moment
+  // of opening: a dialog that only learns it is a dialog as it opens animates its centring from the corner
+  const resolve = () => { if (auto && !isOpen) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog'; };
+  let isOpen = false, pushed = false, lastFocus = null;
+  queueMicrotask(() => resolve()); phone.addEventListener('change', resolve);
+  // the footer sticks under the scrolling body, not inside it
+  const placeFooter = () => { const f = body.querySelector('.cx-modal-foot'); if (f) mdl.appendChild(f); };
+  const focusables = () => [...mdl.querySelectorAll('button:not([disabled]), input, textarea, select, [tabindex]:not([tabindex="-1"])')].filter((x) => x.offsetParent !== null);
+  const close = () => on.close?.();
+  const open = () => {
+    if (isOpen) return; isOpen = true; placeFooter();
+    if (auto) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog';
+    lastFocus = document.activeElement;
+    document.documentElement.classList.add('cx-locked');
+    // on the phone, focusing a field would throw the keyboard over the sheet: focus the sheet itself
+    requestAnimationFrame(() => { ((mdl.dataset.mode === 'dialog' && focusables().find((x) => x.matches('input, textarea'))) || mdl).focus({ preventScroll: true }); });
+    history.pushState({ cxModal: 1 }, ''); pushed = true;
+  };
+  const shut = () => {
+    if (!isOpen) return; isOpen = false;
+    mdl.style.transform = ''; if (ov) ov.style.opacity = '';
+    document.documentElement.classList.remove('cx-locked');
+    lastFocus?.focus?.({ preventScroll: true });
+    if (pushed) { pushed = false; history.back(); }
+  };
+  mdl.tabIndex = -1;
+  addEventListener('popstate', () => { if (isOpen) { pushed = false; close(); } });
+  document.addEventListener('keydown', (e) => {
+    if (!isOpen) return;
+    if (e.key === 'Escape') { e.preventDefault(); close(); }
+    if (e.key === 'Tab') { const f = focusables(); if (!f.length) return; const first = f[0], last = f[f.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }
+  });
+  // drawer: drag the handle or the header down; closes past 30 % or on a flick, rubber-bands upward
+  let drag = null;
+  mdl.addEventListener('pointerdown', (e) => { if (mdl.dataset.mode !== 'drawer' || !e.target.closest('.cx-handle, [data-drag]')) return; drag = { y: e.clientY, t: performance.now(), dy: 0, live: false, id: e.pointerId }; });
+  addEventListener('pointermove', (e) => {
+    if (!drag || e.pointerId !== drag.id) return;
+    const dy = e.clientY - drag.y; if (!drag.live && Math.abs(dy) < 5) return;
+    if (!drag.live) { drag.live = true; mdl.classList.add('dragging'); ov?.classList.add('dragging'); }
+    drag.dy = dy; mdl.style.transform = `translateY(${dy > 0 ? dy : -Math.sqrt(-dy) * 2}px)`;
+    if (ov) ov.style.opacity = String(Math.max(0, 1 - Math.max(0, dy) / mdl.offsetHeight));
+  });
+  const endDrag = () => { if (!drag) return; const d = drag; drag = null; if (!d.live) return; mdl.classList.remove('dragging'); ov?.classList.remove('dragging'); const v = d.dy / (performance.now() - d.t); if (d.dy > mdl.offsetHeight * 0.3 || v > 0.5) close(); else { mdl.style.transform = ''; if (ov) ov.style.opacity = ''; } };
+  addEventListener('pointerup', endDrag); addEventListener('pointercancel', endDrag);
+  if (inputs.open === true || inputs.open === 'true') open();
+  return (next) => { (next.open === true || next.open === 'true') ? open() : shut(); };
+}

package/registry/modal-behavior.muten

@@ -0,0 +1,4 @@
+# ModalBehavior - what a modal needs that is not markup: the phone's Back closes it, Esc closes it, focus stays
+# inside, the page behind does not scroll, and on a phone the drawer drags down to close. Used by Modal; you never
+# call it yourself. shadcn-for-muten · Custom · host JS is modal-behavior.js.
+part ModalBehavior(open: bool, onClose: action) { Custom ModalBehavior inputs(open: $open) on(close: $onClose) class("cx-modal-behavior") }

package/registry/modal.muten

@@ -0,0 +1,29 @@
+# Modal - THE adaptive modal: a Dialog on a wide screen, a Drawer from the bottom on a phone (mode "auto"), or forced
+# with mode "dialog" | "drawer". The page owns the open bool; the overlay, the ✕, Esc, the phone's Back button and a
+# drag down on the drawer all call onClose. Content goes in the slot; the buttons in a ModalFooter (it sticks under
+# the scrolling body): the way out (cx-exit) on the left, the action (cx-go) filling the rest.
+#   state { editing = false : bool }   action edit() mutates editing { editing.set(true) }   action done() mutates editing { editing.set(false) }
+#   Modal(open: editing, onClose: done, title: "Editar servicio", description: "Lo que cambies se ve en tu tienda al guardar.") {
+#     Field { … }
+#     ModalFooter { Btn(variant: "outline", onClick: done) class("cx-exit") { Span "Cancelar" }  Btn(onClick: save) class("cx-go") { Span "Guardar cambios" } }
+#   }
+# mode: auto | dialog | drawer | sheet (a panel from a side) · side: right | left | top | bottom (for sheet)
+# role: dialog | alertdialog · dismiss: on | off (off: no ✕ and the backdrop does not close it; only its buttons do)
+# size: "" | tall (a list that pages)   ·   shadcn-for-muten · part + Custom (ModalBehavior) · kit.css (.cx-modal).
+part Modal(open: bool, onClose: action, title: text, description: text = "", mode: text = "auto", size: text = "", side: text = "right", role: text = "dialog", dismiss: text = "on") {
+  Stack class("cx-modal-root") data(open: $open) {
+    when $dismiss != "off" { Button "" -> $onClose class("cx-overlay") aria(label: "Cerrar", hidden: "true") data(closes: "true") }
+    when $dismiss == "off" { Stack class("cx-overlay") aria(hidden: "true") }
+    Stack class("cx-modal") data(mode: $mode, size: $size, side: $side) aria(role: $role, modal: "true", label: $title) {
+      Stack class("cx-handle") aria(hidden: "true")
+      Stack class("cx-modal-head") data(drag: "true") {
+        Span "{$title}" class("cx-modal-title")
+        Span "{$description}" class("cx-modal-desc")
+      }
+      when $dismiss != "off" { Button -> $onClose class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button cx-modal-x") aria(label: "Cerrar") { Icon "lucide:x" } }
+      Stack class("cx-modal-body") { slot }
+      ModalBehavior(open: $open, onClose: $onClose)
+    }
+  }
+}
+part ModalFooter() { Stack class("cx-modal-foot") data(slot: "modal-footer") { slot } }

package/registry/money-field.js

@@ -0,0 +1,5 @@
+// MoneyField (muten Custom) - a price with its currency (kit/values.js moneyField).
+export function mount(el, inputs, on) {
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => v.moneyField(el, inputs, core, on));
+  return () => {};
+}

package/registry/money-field.muten

@@ -0,0 +1,7 @@
+# MoneyField - a price with its currency: the symbol, separators and decimals come from the currency (Intl); the
+# currency is picked from a searchable list; under it, what is stored (minor units). onChange gets {amount, minor, currency}.
+#   MoneyField(label: "Precio del servicio", value: 25000, currency: "COP", onChange: setPrice)
+# shadcn-for-muten · Custom (kit values) · host JS money-field.js.
+part MoneyField(label: text = "Precio", value: number = 0, currency: text = "COP", onChange: action) {
+  Custom MoneyField inputs(label: $label, value: $value, currency: $currency) on(change: $onChange) class("cx-mf-host")
+}

package/registry/nav-button.muten

@@ -0,0 +1,14 @@
+# NavButton - a place in the app (a tab bar, a sidebar, a segmented header). Where you are is a STATE, not a
+# variant: it rides aria-pressed and is marked by `marker`; everything else is a Btn (variant, size, any content in
+# the slot: an icon, a count). Lay them in a NavBar, across or down.
+#   NavBar(label: "Secciones") { NavButton(label: "Mi tienda", current: atShop, onClick: goShop) … }
+#   NavBar(label: "Menú", orientation: "vertical") { NavButton(label: "Agenda", current: atAgenda, onClick: goAgenda, marker: "fill") { Icon "lucide:calendar" } }
+# marker: dot (soft fill + a dot, the default) | fill (soft fill) | line (an underline) | none (only the text firms up)
+# variant / size: as Btn. shadcn-for-muten · part · no deps · kit.css (.cx-nav, .cx-navbar).
+part NavButton(label: text = "", current: bool, onClick: action, variant: text = "ghost", size: text = "default", marker: text = "dot") {
+  Button -> $onClick class("cn-button cn-button-variant-{$variant} cn-button-size-{$size} group/button cx-nav") data(slot: "button", marker: $marker) aria(pressed: $current) {
+    slot
+    Span "{$label}" class("cx-nav-label")
+  }
+}
+part NavBar(label: text = "Secciones", orientation: text = "horizontal") { Nav class("cx-navbar") data(orientation: $orientation) aria(label: $label) { slot } }

package/registry/navigation-menu.muten

@@ -1,16 +1,18 @@
-# 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")
+# NavigationMenu - a site's top navigation: words that open a panel of links on hover (or tap, or focus) and plain
+# links. Once a panel is open, resting on the next word switches to its panel.
+#   NavigationMenu(label: "Principal") {
+#     NavMenuItem { NavMenuTrigger(label: "Producto")  NavMenuContent { NavMenuLink(title: "Agenda", description: "…", to: "/agenda") … } }
+#     NavMenuItemLink(label: "Precios", to: "/precios")
+#   }
+# shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (.cn-navigation-menu-*) + kit.css.
+part NavigationMenu(label: text = "Principal") { Nav class("cn-navigation-menu cx-navmenu") data(slot: "navigation-menu") aria(label: $label) { slot } }
+part NavMenuItem() { Stack class("cx-ov") data(slot: "navigation-menu-item") { slot  OverlayBehavior(kind: "navmenu") } }
+part NavMenuTrigger(label: text) { Stack class("cx-ov-trigger") { Button class("cn-navigation-menu-trigger cx-navmenu-trigger") data(slot: "navigation-menu-trigger") { Span "{$label}"  Icon "lucide:chevron-down" class("cn-navigation-menu-trigger-icon") } } }
+part NavMenuContent(width: text = "26rem", columns: number = 2) { Stack class("cn-navigation-menu-content cx-ov-content cx-navmenu-panel") data(slot: "navigation-menu-content", align: "start") style(w: "{$width}", cols: "{$columns}") { slot } }
+part NavMenuLink(title: text, to: text, description: text = "") {
+  Link -> "{$to}" class("cn-navigation-menu-link cx-navmenu-link") data(slot: "navigation-menu-link") {
+    Span "{$title}" class("cx-navmenu-title")
+    Span "{$description}" class("cx-navmenu-desc")
   }
 }
+part NavMenuItemLink(label: text, to: text) { Link "{$label}" -> "{$to}" class("cn-navigation-menu-trigger cx-navmenu-trigger") data(slot: "navigation-menu-link") }

package/registry/navpill.muten

@@ -1,10 +1,16 @@
-# NavPill - the floating glass navbar, batteries included: a sticky + padded wrapper, the glass pill, AND the
-# scroll animation (settles + returns to rest at the top). Just drop your logo / links / CTA inside; it lays them
-# out with space-between (logo left, the rest right).
-#   NavPill {
-#     Stack class("flex flex-row items-center gap-2") { Icon "lucide:hexagon" class("size-5 text-primary")  Span "Acme" class("font-bold") }
-#     Stack class("flex flex-row items-center gap-6 text-sm text-muted-foreground max-md:hidden") { Link "Features" -> "/" class("link-underline")  Link "Pricing" -> "/" class("link-underline") }
-#     Link "Get started" -> "/" class("btn btn-default btn-sm press")
+# NavPill - a landing page's floating glass bar: it stays on top as you scroll, firming up (more opaque, a shadow)
+# once the page moves. The logo on the left, links and the call to action on the right (they lay out apart).
+#   NavPill(label: "Principal") {
+#     Stack class("cx-hstack") { Icon "lucide:store"  Span "Storio" class("font-semibold") }
+#     Stack class("cx-hstack") { Link "Precios" -> "/precios"  LinkBtn(to: "/signup", size: "sm") { Span "Crear mi tienda" } }
 #   }
-# shadcn-for-muten · part · no deps · uses .nav-pill + nav-scroll from globals.css.
-part NavPill() { Stack class("sticky top-0 z-50 px-4 pt-4") { Header class("nav-pill nav-scroll mx-auto w-full max-w-5xl") { slot } } }
+# look "tray": a tray in the muted fill at rest that turns to glass once the page moves; the logo and NavLinks sit
+# together on the left, a Span class("cx-grow") pushes the rest right, and the call to action (class "cx-nav-cta")
+# turns primary as you scroll. On a phone NavLinks and anything with class "cx-nav-hide-sm" fold away and a Btn with
+# class "cx-nav-menu" shows instead.
+#   NavPill(look: "tray") { Image "~/logo.svg"  NavLinks { Link "Precios" -> "/pricing" }  Span class("cx-grow")
+#     Link "Entrar" -> "/login" class("cx-nav-hide-sm")  LinkBtn(to: "/signup") class("cx-nav-cta") { Span "Crear mi tienda" }
+#     Btn(variant: "ghost", size: "icon", label: "Menú", onClick: openMenu) class("cx-nav-menu") { Icon "lucide:menu" } }
+# shadcn-for-muten · part · no deps · kit.css (.cx-navpill, scroll-driven where the browser supports it).
+part NavPill(label: text = "Principal", look: text = "") { Stack class("cx-navpill-wrap") data(look: $look) { Nav class("cx-navpill") data(look: $look) aria(label: $label) { slot } } }
+part NavLinks() { Stack class("cx-nav-links") { slot } }

package/registry/new-appointment.js

@@ -0,0 +1,8 @@
+// NewAppointment (muten Custom) - the kit's 4-step «Nueva cita» (kit/structure.js) in the adaptive modal. It opens
+// when `open` turns true; closing it in any way fires close, creating fires create(json {client, service, day, hour}).
+export function mount(el, inputs, on) {
+  let wiz = null, was = false;
+  const sync = (open) => { if (open && !was) wiz?.start(); was = !!open; };
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/structure.js')]).then(([core, s]) => { wiz = s.wizard(core, inputs, on); was = false; sync(inputs.open); });
+  return (next) => sync(next.open);
+}

package/registry/new-appointment.muten

@@ -0,0 +1,10 @@
+# NewAppointment - «Nueva cita» in 4 steps inside the adaptive modal, built only from atoms: a Stepper under the
+# title, the client (search + choice list), the service (choice list with price), the day (tiles) and the hour, and
+# the summary. «Siguiente» stays disabled until the step is answered; steps slide sideways and the height eases.
+# The page owns `open` (true opens it); onClose fires however it closes, onCreate gets json {client, service, day, hour}.
+#   NewAppointment(open: creating, clients: @clients, services: @services, hours: @slots, closed: @closedDays, note: "Le llega la confirmación por WhatsApp.", onCreate: created, onClose: closeNew)
+# clients {name, description} · services {name, duration, price, icon} · hours ["09:00", …] · closed [0] (weekdays).
+# shadcn-for-muten · Custom (kit/structure.js) · the kit's adaptive modal.
+part NewAppointment(open: bool, title: text = "Nueva cita", clients: list, services: list, hours: list, closed: list, note: text = "", onCreate: action, onClose: action) {
+  Custom NewAppointment inputs(open: $open, title: $title, clients: $clients, services: $services, hours: $hours, closed: $closed, note: $note) on(create: $onCreate, close: $onClose) class("cx-wizard-host")
+}

package/registry/number-field.js

@@ -1,30 +1,40 @@
-// NumberField host (muten Custom). inputs: { value, min, max, step }. handlers: { input(value) }.
-// [-] <input type=number> [+] - clamps to [min,max], steps on buttons / arrows / wheel, emits on change.
-const ico = (p) => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + p + '</svg>';
-export function mount(el, inputs, handlers) {
+// NumberField (muten Custom) - a number with − and + inside one Nova InputGroup. inputs: value, min, max, step,
+// prefix (a short label inside, like «X»), unit (after the number, like «min»), label (accessible name).
+// handlers: input(value). Clamps to [min, max]; buttons, arrow keys and the wheel (while focused) step; holding a
+// button repeats. The buttons switch off at the ends.
+const ICON = { minus: '<path d="M5 12h14"/>', plus: '<path d="M5 12h14"/><path d="M12 5v14"/>' };
+const svg = (k) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICON[k]}</svg>`;
+export function mount(el, inputs, on) {
   const num = (v, d) => { const n = Number(v); return Number.isFinite(n) ? n : d; };
   let min = num(inputs.min, -Infinity), max = num(inputs.max, Infinity), step = num(inputs.step, 1) || 1;
-
-  const dec = document.createElement('button'); dec.type = 'button'; dec.className = 'number-field-btn'; dec.innerHTML = ico('<path d="M5 12h14"/>'); // lucide minus
-  const input = document.createElement('input'); input.type = 'number'; input.className = 'number-field-input';
-  const inc = document.createElement('button'); inc.type = 'button'; inc.className = 'number-field-btn'; inc.innerHTML = ico('<path d="M5 12h14"/><path d="M12 5v14"/>'); // lucide plus
-  el.appendChild(dec); el.appendChild(input); el.appendChild(inc);
-  if (Number.isFinite(min)) input.min = String(min);
-  if (Number.isFinite(max)) input.max = String(max);
-  input.step = String(step);
-
+  const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  const btn = (k, name) => `<button type="button" data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon-xs group/button cx-nf-btn" data-step="${k}" aria-label="${name}">${svg(k)}</button>`;
+  el.innerHTML = `<div data-slot="input-group" role="group" class="cn-input-group group/input-group cx-nf">
+    ${inputs.prefix ? `<div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-start cx-nf-prefix">${esc(inputs.prefix)}</div>` : ''}
+    <input data-slot="input-group-control" class="cn-input cn-input-group-input cx-num cx-nf-input" inputmode="decimal" aria-label="${esc(inputs.label || inputs.prefix || 'Número')}" role="spinbutton">
+    ${inputs.unit ? `<div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-end cx-nf-unit">${esc(inputs.unit)}</div>` : ''}
+    <div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-end cx-nf-steps">${btn('minus', 'Menos')}${btn('plus', 'Más')}</div>
+  </div>`;
+  const input = el.querySelector('input'), dec = el.querySelector('[data-step="minus"]'), inc = el.querySelector('[data-step="plus"]');
   const clamp = (v) => Math.min(max, Math.max(min, v));
+  const decimals = (String(step).split('.')[1] || '').length;
   let value = clamp(num(inputs.value, 0));
-  input.value = String(value);
-
-  const emit = (v) => { value = clamp(v); input.value = String(value); if (handlers.input) handlers.input(value); };
-  dec.addEventListener('click', () => emit(value - step));
-  inc.addEventListener('click', () => emit(value + step));
-  input.addEventListener('change', () => emit(num(input.value, value)));
-  input.addEventListener('wheel', (e) => { if (document.activeElement === input) { e.preventDefault(); emit(value + (e.deltaY < 0 ? step : -step)); } }, { passive: false });
-
-  return (n) => {
-    min = num(n.min, min); max = num(n.max, max); step = num(n.step, step) || step;
-    value = clamp(num(n.value, value)); input.value = String(value);
+  const paint = () => {
+    input.value = decimals ? value.toFixed(decimals) : String(value);
+    input.setAttribute('aria-valuenow', value);
+    if (Number.isFinite(min)) input.setAttribute('aria-valuemin', min); if (Number.isFinite(max)) input.setAttribute('aria-valuemax', max);
+    dec.disabled = value <= min; inc.disabled = value >= max;
   };
+  const emit = (v) => { const next = clamp(Math.round(v / step) * step); if (next === value) { paint(); return; } value = next; paint(); on.input?.(value); };
+  // holding a button repeats, slowly first and then faster
+  let hold = 0;
+  const press = (d) => { emit(value + d * step); let wait = 380; const again = () => { hold = setTimeout(() => { emit(value + d * step); wait = Math.max(50, wait * 0.7); again(); }, wait); }; again(); };
+  const release = () => clearTimeout(hold);
+  [[dec, -1], [inc, 1]].forEach(([b, d]) => { b.addEventListener('pointerdown', (e) => { if (e.button > 0) return; e.preventDefault(); press(d); }); b.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); emit(value + d * step); } }); });
+  addEventListener('pointerup', release); addEventListener('pointercancel', release);
+  input.addEventListener('change', () => emit(num(input.value.replace(',', '.'), value)));
+  input.addEventListener('keydown', (e) => { const d = { ArrowUp: 1, ArrowDown: -1 }[e.key]; if (d) { e.preventDefault(); emit(value + d * step * (e.shiftKey ? 10 : 1)); } });
+  input.addEventListener('wheel', (e) => { if (document.activeElement !== input) return; e.preventDefault(); emit(value + (e.deltaY < 0 ? step : -step)); }, { passive: false });
+  paint();
+  return (n) => { min = num(n.min, min); max = num(n.max, max); step = num(n.step, step) || step; const v = clamp(num(n.value, value)); if (v !== value) { value = v; paint(); } };
 }

package/registry/number-field.muten

@@ -1,7 +1,9 @@
-# NumberField - a numeric input with -/+ steppers. The PAGE owns the value (number) + the action:
-#   state { size = 16 : number }   action setSize(v: number) mutates size { size.set(v) }
-#   NumberField(value: size, min: 1, max: 512, step: 1, onInput: setSize)
-# shadcn-for-muten · Custom · host JS is src/components/NumberField.js (copied by `muten add number-field`).
-part NumberField(value: number, min: number, max: number, step: number, onInput: action) {
-  Custom NumberField inputs(value: $value, min: $min, max: $max, step: $step) on(input: $onInput) class("number-field")
+# NumberField - a number you nudge: − and + inside one field, arrows (Shift = ×10), the wheel while focused, and a
+# held button that repeats. Clamped to [min, max]; the button at an end switches off. The page owns the value.
+#   state { minutes = 30 : number }   action setMinutes(v: number) mutates minutes { minutes.set(v) }
+#   NumberField(value: minutes, min: 5, max: 240, step: 5, unit: "min", label: "Duración", onInput: setMinutes)
+#   NumberField(value: x, min: 0, max: 1920, prefix: "X", onInput: setX)
+# shadcn-for-muten · Custom · Nova (.cn-input-group) + kit.css (.cx-nf) · host JS number-field.js.
+part NumberField(value: number, min: number, max: number, step: number = 1, prefix: text = "", unit: text = "", label: text = "", onInput: action) {
+  Custom NumberField inputs(value: $value, min: $min, max: $max, step: $step, prefix: $prefix, unit: $unit, label: $label) on(input: $onInput) class("cx-nf-host")
 }

package/registry/order-board.js

@@ -0,0 +1,6 @@
+// OrderBoard / OrderCards (muten Custom) - the kit's order Board and card (kit/board.js). inputs: lanes, cards, sizes;
+// handlers change(json [{id, lane}]) · action(json {id, action}).
+export function mount(el, inputs, on) {
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/board.js')]).then(([core, b]) => b.orderBoard(el, inputs, core, on));
+  return () => {};
+}

package/registry/order-board.muten

@@ -0,0 +1,21 @@
+# OrderBoard - lanes and cards are data. Each card groups its information by what it is about and orders it by what
+# needs you first: who and how much (the contact channel they asked for on the right), what waits for your decision
+# (tonal icon Buttons with their Indicator; tapping opens it in the modal), the products, the payment (total, short
+# state, and the button that fits: «Revisar comprobante», «Ver recibo de Stripe»), the delivery (time, progress,
+# «Ver entrega»), the note, and the one next step. Tapping a button never starts a drag. Drag a card with the mouse;
+# on a phone hold it a moment. Drag the board's background (or swipe) to see the side lanes; carrying a card to the
+# edge scrolls it. Keyboard: Space lifts, arrows move, Space drops, Esc puts it back.
+#   OrderBoard(lanes: @lanes, cards: @orders, onChange: moved, onAction: act)
+#   OrderCards(cards: @orders, sizes: @sizes, onAction: act)      the same card side by side (minimum · typical · maximum)
+# lanes {id, title, next} (next = the step's label that moves a card INTO the following lane) · cards {id, lane, who,
+# sub, total, contact, status [tone, label], request {tone, icon, title, when, text, photo, actions [[id, label]]} or a
+# list of them, order {count, photos, extras}, pay {method, tone, label, detail}, delivery {mode, label, when, map
+# {address, detail, route}, track {steps, at, courier, vehicle, eta}}, note, actions [["advance", label]]}
+# · sizes {title, description, card}. Photos are CSS backgrounds (a gradient or url()).
+# shadcn-for-muten · Custom (kit/board.js) · kit.css (.cx-board, .cx-bcard, .cx-card-sizes).
+part OrderBoard(lanes: list, cards: list, onChange: action, onAction: action) {
+  Custom OrderBoard inputs(lanes: $lanes, cards: $cards) on(change: $onChange, action: $onAction) class("cx-board-host")
+}
+part OrderCards(cards: list, sizes: list, onAction: action) {
+  Custom OrderBoard inputs(cards: $cards, sizes: $sizes) on(action: $onAction) class("cx-board-host")
+}

package/registry/overlay-behavior.js

@@ -0,0 +1,13 @@
+// OverlayBehavior (muten Custom) - opens and closes the floating panel of the part it sits in (kit/overlays.js).
+// inputs: kind popover | hover | menu | context | menubar | navmenu. Used by Popover, HoverCard, DropdownMenu,
+// ContextMenu, Menubar and NavigationMenu; you never call it yourself.
+export function mount(el, inputs) {
+  const wrap = el.parentElement, panel = wrap?.querySelector(':scope > .cx-ov-content');
+  if (panel) panel.hidden = true;   // closed until the kit takes over (no flash of an open panel)
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/overlays.js')]).then(([core, o]) => {
+    o.overlay(el, inputs.kind || 'popover', core);
+    // menu items are reached with the arrows, not the Tab key
+    wrap.querySelectorAll(':scope > .cx-ov-content [role^="menuitem"]').forEach((m) => { m.tabIndex = -1; });
+  });
+  return () => {};
+}

package/registry/overlay-behavior.muten

@@ -0,0 +1,4 @@
+# OverlayBehavior - the opening, placing and closing of a floating panel; the floating parts (Popover, HoverCard,
+# DropdownMenu, ContextMenu, Menubar, NavigationMenu) carry it. kind: popover | hover | menu | context | menubar | navmenu.
+# shadcn-for-muten · Custom · host JS overlay-behavior.js (kit/overlays.js).
+part OverlayBehavior(kind: text = "popover") { Custom OverlayBehavior inputs(kind: $kind) class("cx-ov-behavior") }

package/registry/pagination-nav.js

@@ -0,0 +1,6 @@
+// PaginationNav (muten Custom) - server pages' nav (kit/collections.js paginationNav): 7 fixed slots, range line.
+export function mount(el, inputs, on) {
+  let update = null;
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => { update = c.paginationNav(el, inputs, core, on); });
+  return (next) => update?.(next);
+}

package/registry/pagination-nav.muten

@@ -0,0 +1,8 @@
+# PaginationNav - pages that come from the server: always 7 slots once there are more than 7 pages (nothing slides),
+# «Página n de N» on a phone, and «41–50 de 237 clientes». The page owns the page number and loads the rows; while it
+# loads, give the list class("cx-pg-list") data(loading: busy) so the old page dims in place (nothing changes size).
+#   PaginationNav(total: 237, per: 10, page: page, noun: "clientes", onPage: loadPage)
+# shadcn-for-muten · Custom (kit collections) · host JS pagination-nav.js.
+part PaginationNav(total: number, per: number = 10, page: number, noun: text = "resultados", onPage: action) {
+  Custom PaginationNav inputs(total: $total, per: $per, page: $page, noun: $noun) on(page: $onPage) class("cx-pgnav-host")
+}