@muten/shadcn 0.0.7 → 0.1.1

package/registry/command.js

@@ -0,0 +1,32 @@
+// CommandBehavior (muten Custom) - the Command's list: as you type it keeps the items whose label (or keywords)
+// holds what you wrote, accent-insensitive; a group with nothing left hides, and «empty» shows when nothing matches.
+// The arrows move the highlight, Enter picks it, the pointer highlights what it rests on.
+export function mount(el) {
+  const root = el.parentElement;
+  const input = root.querySelector('.cx-command-input input, input');
+  const fold = (s) => String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+  const items = () => [...root.querySelectorAll('.cx-cmd-item')];
+  const visible = () => items().filter((x) => !x.hidden);
+  let hl = 0;
+  const mark = () => { const v = visible(); hl = Math.max(0, Math.min(hl, v.length - 1)); items().forEach((x) => { const on = x === v[hl]; x.toggleAttribute('data-selected', on); x.setAttribute('aria-selected', on); }); v[hl]?.scrollIntoView({ block: 'nearest' }); if (input) input.setAttribute('aria-activedescendant', v[hl]?.id || ''); };
+  const filter = () => {
+    const q = fold(input?.value.trim());
+    items().forEach((x, i) => { if (!x.id) x.id = `cmd-${Math.random().toString(36).slice(2, 7)}-${i}`; x.hidden = !!q && !fold(`${x.textContent} ${x.dataset.keywords || ''}`).includes(q); });
+    root.querySelectorAll('.cx-cmd-group').forEach((g) => { g.hidden = !g.querySelector('.cx-cmd-item:not([hidden])'); });
+    root.querySelectorAll('.cx-cmd-sep').forEach((s) => { s.hidden = !!q; });
+    const empty = root.querySelector('.cx-command-empty'); if (empty) empty.hidden = visible().length > 0;
+    hl = 0; mark();
+  };
+  input?.setAttribute('role', 'combobox'); input?.setAttribute('aria-expanded', 'true'); input?.setAttribute('autocomplete', 'off');
+  input?.addEventListener('input', filter);
+  root.addEventListener('keydown', (e) => {
+    const v = visible(); if (!v.length) return;
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); hl = (hl + (e.key === 'ArrowDown' ? 1 : -1) + v.length) % v.length; mark(); }
+    if (e.key === 'Enter' && e.target === input) { e.preventDefault(); v[hl]?.click(); }
+  });
+  root.addEventListener('pointermove', (e) => { const it = e.target.closest('.cx-cmd-item'); if (!it) return; const k = visible().indexOf(it); if (k >= 0 && k !== hl) { hl = k; mark(); } });
+  items().forEach((x) => { x.tabIndex = -1; });
+  new MutationObserver(() => filter()).observe(root.querySelector('.cx-command-list') || root, { childList: true, subtree: true });
+  filter();
+  return () => {};
+}

package/registry/command.muten

@@ -1,16 +1,37 @@
-# 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" } … } }
+# Command - a list you search and pick from with the keyboard (shadcn's cmdk). Typing keeps what matches, accent-
+# insensitive; arrows move, Enter picks; groups with nothing left hide; «empty» says when nothing matches. The page
+# owns the query text (read it to search the server too); each item runs its own action.
+#   Command(query: q, placeholder: "Cliente, pedido o acción…") {
+#     CommandGroup(label: "Acciones") { CommandItem(label: "Nueva cita", shortcut: "N", onSelect: create) { Icon "lucide:plus" } }
+#     CommandSeparator()
+#     CommandGroup(label: "Clientes") { CommandItem(label: "Laura Méndez", keywords: "300 112 4410", onSelect: openLaura) { Icon "lucide:user" } }
 #   }
-# 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 } }
+# Inside a Modal it is the ⌘K palette: CommandPalette. shadcn-for-muten · parts + Custom (CommandBehavior) · Nova (.cn-command*).
+part Command(query: text, placeholder: text = "Busca…", empty: text = "Nada coincide.") {
+  Stack class("cn-command cx-command") data(slot: "command") {
+    Stack class("cn-command-input-wrapper cx-command-input") data(slot: "command-input-wrapper") {
+      Icon "lucide:search" class("cn-command-input-icon")
+      SearchField bind($query) "{$placeholder}" class("cn-command-input") data(slot: "command-input")
+    }
+    Stack class("cn-command-list cx-command-list") data(slot: "command-list") aria(role: "listbox") {
+      slot
+      Span "{$empty}" class("cn-command-empty cx-command-empty") data(slot: "command-empty")
+    }
+    CommandBehavior()
+  }
+}
 part CommandGroup(label: text) {
-  Stack class("flex flex-col") {
-    Span "{$label}" class("command-group-label")
+  Stack class("cn-command-group cx-cmd-group") data(slot: "command-group") aria(role: "group", label: $label) {
+    Span "{$label}" class("cx-cmd-label")
+    slot
+  }
+}
+part CommandItem(label: text, onSelect: action, shortcut: text = "", keywords: text = "") {
+  Button -> $onSelect class("cn-command-item cx-cmd-item") data(slot: "command-item", keywords: $keywords) aria(role: "option") {
     slot
+    Span "{$label}" class("cx-cmd-text")
+    Span "{$shortcut}" class("cn-command-shortcut") data(slot: "command-shortcut")
   }
 }
-part CommandItem(onSelect: action) { Button -> $onSelect class("command-item") { slot } }
-part CommandShortcut(keys: text) { Span "{$keys}" class("command-shortcut") }
+part CommandSeparator() { Stack class("cn-command-separator cx-cmd-sep") data(slot: "command-separator") aria(role: "separator") }
+part CommandBehavior() { Custom CommandBehavior class("cx-cmd-behavior") }

package/registry/context-menu.muten

@@ -1,8 +1,9 @@
-# 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")
-}
+# ContextMenu - the menu of a zone, opened with a right click (or a long press on a phone, or the keyboard's menu key)
+# right where the pointer is. The zone and the menu go inside; the menu uses DropdownContent and its items.
+#   ContextMenu {
+#     ContextTrigger { Stack class("…") { Span "Clic derecho aquí" } }
+#     DropdownContent { DropdownItem(label: "Duplicar", onSelect: dup) { Icon "lucide:copy" } … }
+#   }
+# shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (dropdown classes) + kit.css.
+part ContextMenu() { Stack class("cx-ov cx-ov-zone") data(slot: "context-menu") { slot  OverlayBehavior(kind: "context") } }
+part ContextTrigger(label: text = "Menú de esta zona") { Stack class("cx-ov-trigger cx-ctx-zone") data(slot: "context-menu-trigger") aria(label: $label) { slot } }

package/registry/count-up.muten

@@ -1,10 +1,5 @@
-# CountUp - animate a formatted stat from 0 to its target when it scrolls into view (Custom, keeps the exact
-# formatting: 2.4M / 94% / 40ms / 99.99% / 120K). For a STYLED number use the Custom form directly (it takes the
-# class - a part with params can't), which is what stat bands and hero metrics want:
-#   Stack class("items-center gap-1") {
-#     Custom CountUp inputs(to: "2.4M") class("text-4xl font-bold text-primary")
-#     Span "trees planted" class("text-sm text-muted-foreground")
-#   }
-# The `CountUp(to: ...)` part below is a thin convenience for the unstyled/inherit case (wrap it in a styled Stack).
-# shadcn-for-muten · Custom · no deps · host JS: src/components/CountUp.js.
-part CountUp(to: text) { Custom CountUp inputs(to: $to) }
+# CountUp - a number that counts up from 0 the first time it comes into view, keeping its exact format («2.4M»,
+# «94 %», «12,400», «$1.2M»). It takes the size of what holds it. Off with reduced motion.
+#   Stat(label: "citas al mes") { CountUp(to: "12,400") }
+# shadcn-for-muten · Custom · host JS count-up.js.
+part CountUp(to: text) { Custom CountUp inputs(to: $to) class("cx-countup") }

package/registry/date-field.js

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

package/registry/date-field.muten

@@ -0,0 +1,7 @@
+# DateField - a field-like button with the long date; it opens the day / month / year wheels in the adaptive modal.
+# min "today" turns the past off (the wheel greys those days and «Listo» waits).
+#   DateField(label: "Fecha", value: "today", min: "today", onChange: setDay)      → "yyyy-mm-dd"
+# shadcn-for-muten · Custom (kit dates) · host JS date-field.js.
+part DateField(label: text = "Fecha", value: text = "today", min: text = "", years: number = 2, onChange: action) {
+  Custom DateField inputs(label: $label, value: $value, min: $min, years: $years) on(change: $onChange) class("cx-df-host")
+}

package/registry/device-frame.muten

@@ -0,0 +1,8 @@
+# DeviceFrame - a device around a picture of a product: a phone (rounded bezel) or a browser window (a bar with
+# three dots). Put an Image, or any content, in the slot; an Image fills the screen from the top. height crops it
+# (the rest fades out at the bottom), so a tall screenshot can sit beside a short text.
+#   DeviceFrame { Image "~/shots/store.png" alt("Tu tienda en un teléfono") }
+#   DeviceFrame(kind: "browser", height: "420px") { Image "~/shots/panel.png" alt("Tu panel") }
+# width: empty (a phone is 280 px, a browser fills its column) or a width like «320px».
+# kind: phone | browser. shadcn-for-muten · part · no deps · kit.css (.cx-device).
+part DeviceFrame(kind: text = "phone", height: text = "", width: text = "") { Stack class("cx-device") data(kind: $kind, crop: $height != "", sized: $width != "") style(h: "{$height}", w: "{$width}") { slot } }

package/registry/dialog.muten

@@ -1,13 +1,7 @@
-# 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 }
-  }
+# Dialog - a window in the middle of the screen for one task (edit, confirm a detail), on every width. It is the
+# adaptive Modal forced to dialog; on a phone prefer Modal (it becomes a Drawer). The page owns open.
+#   Dialog(open: editing, onClose: done, title: "Editar servicio", description: "…") { … ModalFooter { … } }
+# shadcn-for-muten · part over Modal.
+part Dialog(open: bool, onClose: action, title: text, description: text = "", size: text = "") {
+  Modal(open: $open, onClose: $onClose, title: $title, description: $description, mode: "dialog", size: $size) { 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/dirty-bar.js

@@ -0,0 +1,19 @@
+// DirtyBar (muten Custom) - the kit's «unsaved changes» bar over the form it sits in (kit/core.js kit.dirtyBar).
+// «Descartar» restores what muten owns: inputs get their saved value (and an input event, so muten's bind follows),
+// switches that moved are toggled back by a click (so the page's action runs). The weekly hours restore themselves.
+export function mount(el, inputs, on) {
+  import('@muten/shadcn/registry/kit/core.js').then(({ kit }) => {
+    const form = el.closest('.cx-set-form') || el.parentElement;
+    const fields = () => [...form.querySelectorAll('input, select, textarea, [role=switch], .cx-time-btn, .cx-sel-btn')];
+    kit.dirtyBar(form, { onSave: () => { form.dispatchEvent(new Event('kit-saved')); on.save?.(); } });
+    form.addEventListener('discard', (e) => {
+      const saved = e.detail || [];
+      fields().forEach((x, i) => {
+        if (x.closest('.cx-wh-host') || i >= saved.length) return;
+        if (x.getAttribute('role') === 'switch') { if (String(x.getAttribute('aria-checked')) !== String(saved[i])) x.click(); return; }
+        if (x.matches('input, textarea, select') && x.value !== saved[i]) { x.value = saved[i]; x.dispatchEvent(new Event('input', { bubbles: true })); }
+      });
+    });
+  });
+  return () => {};
+}

package/registry/dirty-bar.muten

@@ -0,0 +1,13 @@
+# DirtyBar - «Tienes cambios sin guardar»: a floating footer of the form it sits in. It appears when any field,
+# switch or time differs from the last save, «Descartar» puts everything back, «Guardar» saves in three moments.
+# Put it as the LAST child of a SettingsForm.
+#   SettingsForm { SettingsSection(title: "Tu negocio", description: "…") { Field(…) { Input(…) } }  DirtyBar(onSave: save) }
+# shadcn-for-muten · part + Custom (DirtyBar, kit core) · kit.css (.cx-dirty, .cx-set-form).
+part SettingsForm() { Stack class("cx-set-form") { slot } }
+part SettingsSection(title: text, description: text = "") {
+  Section class("cx-set-sec") {
+    Stack class("cx-vstack cx-gap-2") { Span "{$title}" class("cx-text") data(variant: "heading")  Text "{$description}" class("cx-text") data(variant: "muted") }
+    Stack class("cx-vstack cx-gap-14") { slot }
+  }
+}
+part DirtyBar(onSave: action) { Custom DirtyBar on(save: $onSave) class("cx-dirty-host") }

package/registry/drawer.muten

@@ -1,12 +1,7 @@
-# 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
-    }
-  }
+# Drawer - a sheet that rises from the bottom, with a handle you drag down to close (the phone's way), on every width.
+# It is the adaptive Modal forced to drawer. The page owns open.
+#   Drawer(open: picking, onClose: done, title: "Elige la hora") { … ModalFooter { … } }
+# shadcn-for-muten · part over Modal.
+part Drawer(open: bool, onClose: action, title: text = "", description: text = "", size: text = "") {
+  Modal(open: $open, onClose: $onClose, title: $title, description: $description, mode: "drawer", size: $size) { slot }
 }

package/registry/dropdown-menu.muten

@@ -1,15 +1,39 @@
-# 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 }
+# DropdownMenu - a list of actions that opens from a button (shadcn Nova). Arrows, Home/End and the first letter move;
+# Enter picks; a picked action closes it, a check or radio item stays open. Trigger and content go inside:
+#   DropdownMenu {
+#     DropdownTrigger { TriggerBtn { Span "Opciones"  Icon "lucide:chevron-down" } }
+#     DropdownContent(align: "start") {
+#       DropdownLabel(label: "Pedido")
+#       DropdownItem(label: "Editar", shortcut: "⌘E", onSelect: edit) { Icon "lucide:pencil" }
+#       DropdownSeparator()
+#       DropdownCheckItem(label: "Avisarme", on: notify, onToggle: toggleNotify)
+#       DropdownItem(label: "Eliminar", tone: "destructive", onSelect: remove) { Icon "lucide:trash-2" }
+#     }
+#   }
+# The same items and content serve ContextMenu and Menubar. shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova.
+part DropdownMenu() { Stack class("cx-ov") data(slot: "dropdown-menu") { slot  OverlayBehavior(kind: "menu") } }
+part DropdownTrigger() { Stack class("cx-ov-trigger") data(slot: "dropdown-menu-trigger") { slot } }
+part DropdownContent(align: text = "start", width: text = "12rem") { Stack class("cn-dropdown-menu-content cx-ov-content cx-menu") data(slot: "dropdown-menu-content", align: $align) style(w: "{$width}") { slot } }
+part DropdownItem(label: text, onSelect: action, shortcut: text = "", tone: text = "") {
+  Button -> $onSelect class("cn-dropdown-menu-item group/dropdown-menu-item cx-menu-item") data(slot: "dropdown-menu-item", variant: $tone) aria(role: "menuitem") {
+    slot
+    Span "{$label}" class("cx-menu-label")
+    Span "{$shortcut}" class("cn-dropdown-menu-shortcut") data(slot: "dropdown-menu-shortcut")
   }
 }
-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") }
+part DropdownCheckItem(label: text, on: bool, onToggle: action, shortcut: text = "") {
+  Button -> $onToggle class("cn-dropdown-menu-checkbox-item cx-menu-item cx-menu-check") data(slot: "dropdown-menu-checkbox-item") aria(role: "menuitemcheckbox", checked: $on) {
+    Span "{$label}" class("cx-menu-label")
+    Span "{$shortcut}" class("cn-dropdown-menu-shortcut")
+    Stack class("cn-dropdown-menu-item-indicator cx-menu-mark") { Icon "lucide:check" }
+  }
+}
+part DropdownRadioItem(value: text, current: text, onSelect: action, label: text) {
+  Button -> $onSelect($value) class("cn-dropdown-menu-radio-item cn-dropdown-menu-checkbox-item cx-menu-item cx-menu-check") data(slot: "dropdown-menu-radio-item") aria(role: "menuitemradio", checked: $value == $current) {
+    Span "{$label}" class("cx-menu-label")
+    Span "" class("cn-dropdown-menu-item-indicator cx-menu-dot")
+  }
+}
+part DropdownLabel(label: text) { Span "{$label}" class("cn-dropdown-menu-label") data(slot: "dropdown-menu-label") }
+part DropdownSeparator() { Stack class("cn-dropdown-menu-separator") data(slot: "dropdown-menu-separator") aria(role: "separator") }
+part DropdownGroup(label: text = "") { Stack class("cx-menu-group") aria(role: "group", label: $label) { slot } }

package/registry/empty.muten

@@ -1,9 +1,13 @@
-# 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")
+# Empty - what a list says when it has nothing yet: the icon in the slot, a title, a description. Put the way out
+# (a button) right after it.
+#   Empty(title: "Nada por aquí", description: "Cuando te escriban, aparece aquí.") { Icon "lucide:inbox" }
+# shadcn-for-muten · part · no deps · Nova (.cn-empty).
+part Empty(title: text, description: text = "") {
+  Stack class("cn-empty") data(slot: "empty") {
+    Stack class("cn-empty-header") data(slot: "empty-header") {
+      Stack class("cn-empty-media cn-empty-media-icon") data(slot: "empty-icon", variant: "icon") { slot }
+      Span "{$title}" class("cn-empty-title") data(slot: "empty-title")
+      Text "{$description}" class("cn-empty-description") data(slot: "empty-description")
+    }
   }
 }

package/registry/feature-grid.muten

@@ -1,14 +1,12 @@
-# FeatureGrid - a responsive grid of feature cards. FeatureCard takes title + desc and a slot for the icon:
-#   FeatureGrid {
-#     FeatureCard(title: "Locatable", desc: "Every screen has a name and a place.") { Icon "lucide:scan-text" class("size-5") }
-#     …
-#   }
-# shadcn-for-muten · block · no deps · styles via the semantic .feature-* classes in globals.css.
-part FeatureGrid() { Stack class("feature-grid") { slot } }
-part FeatureCard(title: text, desc: text) {
-  Stack class("feature-card") {
-    Stack class("feature-card-icon") { slot }
-    Title "{$title}" h3 class("feature-card-title")
-    Text "{$desc}" class("feature-card-desc")
+# FeatureGrid - what a product does, as cards in a grid that wraps (three, two or one per row by the width). Each
+# FeatureCard has its icon in the slot, a title and a line.
+#   FeatureGrid { FeatureCard(title: "Agenda", description: "Citas por persona y recordatorios.") { Icon "lucide:calendar" } … }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-features).
+part FeatureGrid(columns: number = 3) { Stack class("cx-features") style(cols: "{$columns}") { slot } }
+part FeatureCard(title: text, description: text) {
+  Stack class("cx-feature") {
+    Stack class("cx-feature-ic") { slot }
+    Title "{$title}" h3 class("cx-feature-t")
+    Text "{$description}" class("cx-feature-d")
   }
 }

package/registry/feature-rows.muten

@@ -1,8 +1,12 @@
-# FeatureRows - a divided list of numbered feature/schedule rows, each with its own side gutters so the index
-# never kisses the edge. A FeatureRow is a 12-col grid (index · title · copy); it stacks on mobile.
-#   FeatureRows {
-#     FeatureRow { Span "01" class("col-span-1")  Title "One command" h3 class("col-span-4")  Text "..." class("col-span-7") }
-#   }
-# shadcn-for-muten · block · no deps · uses .feature-rows / .feature-row from globals.css.
-part FeatureRows() { Stack class("feature-rows") { slot } }
-part FeatureRow() { Stack class("feature-row") { slot } }
+# FeatureRows - a list of numbered rows split by hairlines: the number, a title and its explanation in three
+# columns on a wide screen, one under the other on a phone. For steps, a schedule, a «how it works».
+#   FeatureRows { FeatureRow(index: "01", title: "Crea tu tienda", description: "Nombre, rubro y ciudad en un minuto.") … }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-frows).
+part FeatureRows() { Stack class("cx-frows") aria(role: "list") { slot } }
+part FeatureRow(index: text, title: text, description: text = "") {
+  Stack class("cx-frow") aria(role: "listitem") {
+    Span "{$index}" class("cx-frow-i")
+    Title "{$title}" h3 class("cx-frow-t")
+    Text "{$description}" class("cx-frow-d")
+  }
+}

package/registry/field-behavior.js

@@ -0,0 +1,33 @@
+// FieldBehavior (muten Custom) - the reference artifact's field rules, on the muten field it sits in. The value stays
+// muten's (bind): every change here dispatches an input event so the page's state follows.
+export function mount(el, inputs) {
+  const field = el.closest('.cn-field, .cn-input-group') || el.parentElement;
+  const input = field.querySelector('input, textarea');
+  if (!input) return () => {};
+  const set = (v) => { input.value = v; input.dispatchEvent(new Event('input', { bubbles: true })); };
+  const kind = inputs.kind;
+  if (kind === 'money') {
+    const group = (d) => d.replace(/^0+(?=\d)/, '').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    input.addEventListener('focus', () => set(input.value.replace(/\D/g, '')));
+    input.addEventListener('blur', () => set(group(input.value.replace(/\D/g, ''))));
+    set(group(input.value.replace(/\D/g, '')));
+  }
+  if (kind === 'email') {
+    // the Field draws its description after its slot, so it is looked up when needed, not at mount
+    let help = null;
+    const ok = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v);
+    const check = () => { const desc = field.querySelector('.cn-field-description'); if (desc && help === null) help = desc.textContent; const bad = input.value.trim() !== '' && !ok(input.value.trim()); input.setAttribute('aria-invalid', String(bad)); field.toggleAttribute('data-invalid', bad); if (desc) { desc.classList.add('cx-msg'); desc.textContent = bad ? inputs.message || 'Revisa el correo.' : help; } };
+    input.addEventListener('blur', check);
+    input.addEventListener('input', () => { if (field.hasAttribute('data-invalid') && ok(input.value.trim())) check(); });
+  }
+  if (kind === 'search') input.addEventListener('keydown', (e) => { if (e.key === 'Escape' && input.value) { e.preventDefault(); set(''); } });
+  if (kind === 'count') {
+    const max = Number(inputs.max) || 0; if (max) input.maxLength = max;
+    requestAnimationFrame(() => { const desc = field.querySelector('.cn-field-description');
+    if (desc) { desc.classList.add('cx-count-line'); const help = desc.textContent; desc.innerHTML = ''; const a = document.createElement('span'); a.textContent = help; const n = document.createElement('span'); desc.append(a, n);
+      const paint = () => { n.textContent = max ? `${input.value.length}/${max}` : String(input.value.length); desc.toggleAttribute('data-near', max && input.value.length >= max * 0.9); };
+      input.addEventListener('input', paint); paint(); }
+    });
+  }
+  return () => {};
+}

package/registry/field-behavior.muten

@@ -0,0 +1,9 @@
+# FieldBehavior - what a field does that is not markup, put INSIDE its Field (after the control):
+#   kind "money"  → separates thousands when leaving the field (25000 → 25.000)
+#   kind "email"  → checks the address when leaving the field (not while typing); the error replaces the help text
+#                   in the same place (nothing jumps). message = the error.
+#   kind "search" → Esc clears it.
+#   kind "count"  → «71/160» at the end of the description line (needs maxlength via `max`).
+#   Field(label: "Correo para avisos", description: "Te llegan las reservas nuevas.") { Input(value: mail)  FieldBehavior(kind: "email", message: "Falta algo: revisa que sea como nombre@dominio.co") }
+# shadcn-for-muten · Custom · host JS is field-behavior.js.
+part FieldBehavior(kind: text, message: text = "", max: number = 0) { Custom FieldBehavior inputs(kind: $kind, message: $message, max: $max) class("cx-field-behavior") }

package/registry/field.muten

@@ -1,7 +1,26 @@
-# 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") }
+# Field - a labelled control: the label, the control (slot), a description under it, an error when there is one.
+#   Field(label: "Nombre") { Input(value: name, placeholder: "Corte clásico") }
+#   Field(label: "Descripción", description: "Se ve en tu tienda.") { TextArea(value: desc) }
+# Two short fields side by side: FieldRow { Field(…) { … }  Field(…) { … } } (one column on a phone).
+# error: a message that replaces the description in the same place (nothing jumps) and marks the field invalid.
+# orientation: vertical | horizontal.
+# FieldSet - sets the size and the look of every field inside it, the kit's own too (PasswordField, PhoneField…):
+#   FieldSet(size: "2xl", variant: "filled") { Field(label: "Correo") { … }  PasswordField(label: "Contraseña") }
+# FieldSeparator - a line with a word in the middle, between two ways in:   FieldSeparator(label: "o con tu correo")
+# FieldHead - a label with an action beside it:   FieldHead(label: "Contraseña") { LinkBtn(to: "/recover", variant: "link", size: "sm") { Span "¿La olvidaste?" } }
+# shadcn-for-muten · part · no deps · Nova (.cn-field) + kit.css.
+part Field(label: text = "", description: text = "", error: text = "", orientation: text = "vertical") {
+  Stack class("cn-field cn-field-orientation-{$orientation} group/field") data(slot: "field", orientation: $orientation, invalid: $error != "") {
+    Span "{$label}" class("cn-label") data(slot: "label")
+    slot
+    when $error == "" { Text "{$description}" class("cn-field-description") data(slot: "field-description") }
+    when $error != "" { Text "{$error}" class("cn-field-error") data(slot: "field-error") aria(role: "alert") }
+  }
+}
+part FieldRow() { Stack class("cx-2col") { slot } }
+part FieldLabel(label: text) { Span "{$label}" class("cn-label") data(slot: "label") }
+part FieldDescription(label: text) { Text "{$label}" class("cn-field-description") data(slot: "field-description") }
+part FieldError(label: text) { Text "{$label}" class("cn-field-error") data(slot: "field-error") aria(role: "alert") }
+part FieldSet(size: text = "xl", variant: text = "filled") { Stack class("cx-fieldset") data(fields: $size, look: $variant) { slot } }
+part FieldSeparator(label: text) { Stack class("cn-field-separator") data(slot: "field-separator") { Stack class("cn-separator cn-separator-horizontal") data(slot: "separator", orientation: "horizontal") aria(role: "separator")  Span "{$label}" class("cn-field-separator-content") data(slot: "field-separator-content") } }
+part FieldHead(label: text) { Stack class("cx-field-head") { Span "{$label}" class("cn-label") data(slot: "label")  slot } }

package/registry/file-input.js

@@ -1,23 +1,38 @@
-// FileInput / Dropzone host (muten Custom). inputs: { label, accept, multiple }. handlers: { files(names) }.
-// Click or drag-drop. Emits the comma-joined file NAMES (muten actions take strings); to read the bytes,
-// edit this file to FileReader the files and emit the result (data URL / text) instead.
-export function mount(el, inputs, handlers) {
-  const placeholder = inputs.label == null ? 'Drop files here, or click to browse' : String(inputs.label);
-  const input = document.createElement('input'); input.type = 'file'; input.hidden = true;
-  if (inputs.accept) input.accept = String(inputs.accept);
-  if (inputs.multiple) input.multiple = true;
-  const label = document.createElement('div'); label.className = 'dropzone-label'; label.textContent = placeholder;
-  el.appendChild(input); el.appendChild(label);
-
-  const emit = (fileList) => {
-    const names = Array.from(fileList || []).map((f) => f.name);
-    label.textContent = names.length ? names.join(', ') : placeholder;
-    if (handlers.files) handlers.files(names.join(', '));
+// FileInput (muten Custom) - a drop zone for files: tap to pick, drag and drop, or paste. inputs: label, hint,
+// accept, multiple ("on"), maxMb. handlers: files(names joined by ", "). What was picked is listed under the zone
+// with its size and a × to take it away; a file of the wrong type or too heavy is refused there, with the reason.
+export function mount(el, inputs, on) {
+  const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  const multiple = inputs.multiple === 'on', maxMb = Number(inputs.maxMb) || 10, accept = String(inputs.accept || '');
+  el.innerHTML = `<div class="cx-drop cx-file-drop" tabindex="0" role="button" aria-label="${esc(inputs.label || 'Subir archivo')}">
+      <input type="file" hidden ${accept ? `accept="${esc(accept)}"` : ''} ${multiple ? 'multiple' : ''}>
+      <div class="cx-drop-empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg><b>${esc(inputs.label || 'Sube un archivo')}</b><span>${esc(inputs.hint || 'Toca, arrastra o pega aquí')}</span></div>
+    </div>
+    <p class="cx-note cx-file-msg" aria-live="polite"></p>
+    <div data-slot="item-group" class="cn-item-group cx-file-list" role="list"></div>`;
+  const zone = el.querySelector('.cx-drop'), input = el.querySelector('input'), list = el.querySelector('.cx-file-list'), msg = el.querySelector('.cx-file-msg');
+  let files = [];
+  const size = (b) => (b < 1024 ? `${b} B` : b < 1048576 ? `${Math.round(b / 1024)} KB` : `${(b / 1048576).toFixed(1)} MB`);
+  const fits = (f) => { if (!accept) return true; return accept.split(',').map((a) => a.trim()).some((a) => (a.endsWith('/*') ? f.type.startsWith(a.slice(0, -1)) : a.startsWith('.') ? f.name.toLowerCase().endsWith(a.toLowerCase()) : f.type === a)); };
+  const paint = () => {
+    list.innerHTML = files.map((f, i) => `<div data-slot="item" class="cn-item cn-item-variant-outline cn-item-size-sm group/item" role="listitem"><div class="cn-item-media cn-item-media-variant-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg></div><div class="cn-item-content"><div class="cn-item-title cx-ellipsis">${esc(f.name)}</div><p class="cn-item-description">${size(f.size)}</p></div><div class="cn-item-actions"><button type="button" class="cn-button cn-button-variant-ghost cn-button-size-icon-xs" data-drop="${i}" aria-label="Quitar ${esc(f.name)}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div></div>`).join('');
+    on.files?.(files.map((f) => f.name).join(', '));
   };
-
-  el.addEventListener('click', () => input.click());
-  input.addEventListener('change', () => emit(input.files));
-  el.addEventListener('dragover', (e) => { e.preventDefault(); el.classList.add('dropzone-over'); });
-  el.addEventListener('dragleave', () => el.classList.remove('dropzone-over'));
-  el.addEventListener('drop', (e) => { e.preventDefault(); el.classList.remove('dropzone-over'); emit(e.dataTransfer && e.dataTransfer.files); });
+  const take = (fileList) => {
+    const incoming = Array.from(fileList || []); if (!incoming.length) return;
+    const bad = incoming.filter((f) => !fits(f)), heavy = incoming.filter((f) => fits(f) && f.size > maxMb * 1048576);
+    const good = incoming.filter((f) => fits(f) && f.size <= maxMb * 1048576);
+    msg.textContent = bad.length ? `${bad[0].name} no es de un tipo que se pueda subir aquí.` : heavy.length ? `${heavy[0].name} pesa más de ${maxMb} MB.` : '';
+    files = multiple ? files.concat(good) : good.slice(0, 1).length ? good.slice(0, 1) : files;
+    paint();
+  };
+  zone.addEventListener('click', () => input.click());
+  zone.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); input.click(); } });
+  input.addEventListener('change', () => { take(input.files); input.value = ''; });
+  zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.dataset.over = ''; });
+  zone.addEventListener('dragleave', () => delete zone.dataset.over);
+  zone.addEventListener('drop', (e) => { e.preventDefault(); delete zone.dataset.over; take(e.dataTransfer?.files); });
+  zone.addEventListener('paste', (e) => take(e.clipboardData?.files));
+  list.addEventListener('click', (e) => { const b = e.target.closest('[data-drop]'); if (!b) return; files.splice(+b.dataset.drop, 1); paint(); });
+  return () => {};
 }

package/registry/file-input.muten

@@ -1,8 +1,9 @@
-# File Input / Dropzone - click or drag-drop files. The PAGE gets the file names (text):
-#   state { picked = "" : text }   action onFiles(v: text) mutates picked { picked.set(v) }
-#   FileInput(label: "Drop a sprite sheet here", accept: "image/*", onFiles: onFiles)
-# Emits the file NAMES; to read bytes, edit src/components/FileInput.js (FileReader -> emit a data URL).
-# shadcn-for-muten · Custom · host JS is src/components/FileInput.js (copied by `muten add file-input`).
-part FileInput(label: text, accept: text, onFiles: action) {
-  Custom FileInput inputs(label: $label, accept: $accept) on(files: $onFiles) class("dropzone")
+# FileInput - a drop zone for any file: tap to pick, drag and drop, or paste. Under it, the picked files with their
+# size and a × each; a file of the wrong type or too heavy is refused in the same place, with the reason. For a
+# photo that has to be cropped and shrunk before uploading, use ImageUpload.
+#   FileInput(label: "Sube el comprobante", hint: "PDF o imagen · hasta 5 MB", accept: "image/*,.pdf", maxMb: 5, onFiles: setFiles)
+#   FileInput(label: "Documentos", multiple: "on", onFiles: setFiles)
+# onFiles gets the names, joined by ", ". shadcn-for-muten · Custom · kit.css (.cx-drop) · host JS file-input.js.
+part FileInput(label: text = "Sube un archivo", hint: text = "Toca, arrastra o pega aquí", accept: text = "", multiple: text = "", maxMb: number = 10, onFiles: action) {
+  Custom FileInput inputs(label: $label, hint: $hint, accept: $accept, multiple: $multiple, maxMb: $maxMb) on(files: $onFiles) class("cx-file-host")
 }

package/registry/fixed-card.muten

@@ -0,0 +1,25 @@
+# FixedCard - a card that never grows with the data: at most three rows and a «Ver todas» that opens the full list
+# (in the adaptive Modal). Empty, it keeps the same shape. Rows are Row3 (time · who and what · its state).
+#   FixedCard(title: "Citas de hoy", description: "Jueves · 14 en total") {
+#     Row3(time: "09:00", title: "Andrés Rojas", subtitle: "Corte clásico") { ToneBadge(label: "Confirmada", tone: "ok") }
+#   }
+#   …then its CardFooter { Btn(variant: "outline", size: "sm", onClick: openAll) class("cx-fill") { Span "Ver todas (14)" } }
+# EmptyMini - the empty line inside it: EmptyMini(text: "Entregaste todo.") { Icon "lucide:circle-check" }
+# shadcn-for-muten · part · no deps · kit.css (.cx-fixed-card, .cx-row3, .cx-empty-mini).
+part FixedCard(title: text, description: text = "") {
+  Section class("cn-card group/card cx-fixed-card") data(slot: "card") {
+    Stack class("cn-card-header group/card-header") data(slot: "card-header") {
+      Span "{$title}" class("cn-card-title") data(slot: "card-title")
+      Text "{$description}" class("cn-card-description") data(slot: "card-description")
+    }
+    slot
+  }
+}
+part Row3(time: text, title: text, subtitle: text = "") {
+  Stack class("cx-row3") {
+    Span "{$time}" class("cx-time")
+    Stack class("cx-row3-who") { Span "{$title}" class("cx-row3-t")  Span "{$subtitle}" class("cx-row3-s") }
+    slot
+  }
+}
+part EmptyMini(text: text) { Stack class("cx-empty-mini") { slot  Span "{$text}" } }