@muten/shadcn 0.0.7 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.0.7",
+  "version": "0.1.1",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",
@@ -15,6 +15,8 @@
     "registry",
     "registry.json",
     "globals.css",
+    "nova.css",
+    "kit.css",
     "motion.css",
     "themes",
     "README.md",
@@ -25,7 +27,9 @@
     "./motion.css": "./motion.css",
     "./themes/*": "./themes/*",
     "./registry.json": "./registry.json",
-    "./registry/*": "./registry/*"
+    "./registry/*": "./registry/*",
+    "./nova.css": "./nova.css",
+    "./kit.css": "./kit.css"
   },
   "keywords": [
     "muten",

package/registry/accordion.muten

@@ -1,16 +1,17 @@
-# Accordion - stacked expandable sections. The PAGE owns a bool per item + a toggle action per item:
-#   state { a1 = true : bool  a2 = false : bool }   action t1 mutates a1 { a1.toggle() }
-#   Accordion { AccordionItem(title: "…", open: a1, onToggle: t1) { … } AccordionItem(title: "…", open: a2, onToggle: t2) { … } }
-# shadcn-for-muten · part · no deps · the content always renders and animates open via the .accordion-panel grid trick.
-part Accordion() { Stack class("accordion") { slot } }
+# Accordion - stacked questions; each opens to its content's exact height (200 ms) and the arrow turns instead of
+# swapping icons. The page owns a bool per item and the toggle.
+#   Accordion { AccordionItem(title: "¿Puedo cancelar mi cita?", open: a1, onToggle: t1) { Text "Sí, hasta 3 horas antes…" } }
+# size "lg": taller rows and bigger type, for the questions of a landing page.
+# shadcn-for-muten · part · no deps · Nova (.cn-accordion) + kit.css.
+part Accordion(size: text = "default") { Stack class("cn-accordion") data(slot: "accordion", size: $size) { slot } }
 part AccordionItem(title: text, open: bool, onToggle: action) {
-  Stack class("accordion-item") {
-    Button -> $onToggle aria(expanded: $open) class("accordion-trigger") {
+  Stack class("cn-accordion-item") data(slot: "accordion-item") {
+    Button -> $onToggle class("cn-accordion-trigger group/accordion-trigger") data(slot: "accordion-trigger") aria(expanded: $open) {
       Span "{$title}"
-      Icon "lucide:chevron-down" class("accordion-chevron", "accordion-chevron-open" when $open)
+      Icon "lucide:chevron-down" class("cx-acc-chev")
     }
-    Stack class("accordion-panel", "accordion-panel-open" when $open) {
-      Stack class("accordion-content") { slot }
+    Stack class("cn-accordion-content cx-acc-fold") data(slot: "accordion-content", open: $open) aria(role: "region") {
+      Stack class("cn-accordion-content-inner") { slot }
     }
   }
 }

package/registry/agenda.js

@@ -0,0 +1,35 @@
+// Agenda (muten Custom) - the kit's agenda (day columns per person, week, list; drag to move, edge to resize, the
+// appointment sheet with its lifecycle, payment, move and cancel), from kit/core.js. Everything is data:
+//   resources [{id, name}] · hours [{id, days: [1..6], ranges: [[540, 780], [840, 1140]]}]  (minutes from midnight)
+//   events [{id, resource, day, start "HH:MM", dur, title, subtitle, price, tone, steps, actions, at, payment, contact}]
+//     day = "yyyy-mm-dd", or a number of days from today (it lands on the next day that person works)
+//   blocks [{id, resource | "all", day, start, dur, reason}] · from / to (hours) · slot (minutes)
+//   actions [{id, label, icon, primary}] - the toolbar's buttons (default: block and new); «block» and «new» keep their
+//   built-in behaviour, any other id fires the action handler with that id
+// handlers: create(json {resource, day, start}) · change(json [{id, resource, day, start, dur, status}]) · action(id)
+export function mount(el, inputs, on) {
+  let latest = inputs;
+  import('@muten/shadcn/registry/kit/core.js').then(({ kit, today, addDays }) => {
+    const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    const list = (v) => (Array.isArray(v) ? v : []);
+    const build = (i) => {
+      const hours = Object.fromEntries(list(i.hours).map((h) => [h.id, h]));
+      const work = (rid, d) => { const h = hours[rid]; return h && list(h.days).includes(d.getDay()) ? list(h.ranges) : []; };
+      const land = (rid, off) => { let o = Number(off); for (let k = 0; k < 14 && !work(rid, addDays(today, o)).length; k++) o++; return addDays(today, o); };
+      const dayOf = (rid, d) => (typeof d === 'number' || /^-?\d+$/.test(String(d)) ? land(rid, d) : new Date(String(d) + 'T00:00:00'));
+      const events = list(i.events).map((e) => ({ tone: 'ok', at: 0, ...e, day: dayOf(e.resource, e.day) }));
+      const blocks = list(i.blocks).map((b) => ({ ...b, day: typeof b.day === 'number' || /^-?\d+$/.test(String(b.day)) ? addDays(today, Number(b.day)) : new Date(String(b.day) + 'T00:00:00') }));
+      el.innerHTML = '';
+      kit.agenda(el, {
+        resources: list(i.resources), events, blocks, availability: work,
+        actions: list(i.actions).length ? list(i.actions) : null,
+        onAction: (id) => on.action?.(id),
+        from: Number(i.from) || 9, to: Number(i.to) || 19, slot: Number(i.slot) || 30,
+        onCreate: (x) => on.create?.(JSON.stringify({ resource: x.resource, day: iso(x.day), start: x.start })),
+        onChange: (evs) => on.change?.(JSON.stringify(evs.map((e) => ({ id: e.id, resource: e.resource, day: iso(e.day), start: e.start, dur: e.dur, status: e.status || '' })))),
+      });
+    };
+    build(latest);
+  });
+  return (next) => { latest = next; };
+}

package/registry/agenda.muten

@@ -0,0 +1,10 @@
+# Agenda - day columns per person, the week, or a list (the phone keeps the day grid and the list). Drag an
+# appointment to move it (the ghost turns red where it is not free), drag its edge to resize, tap it for its sheet:
+# lifecycle, payment and receipt, write, change the time, cancel with a reason. Block time; create from a free slot.
+# Everything is data (see agenda.js for the shapes); pass lists with @: Agenda(resources: @team, hours: @hours, events: @appointments, blocks: @blocks, onCreate: newAppointment, onChange: saveAgenda)
+# actions: the toolbar's buttons as data, [{id, label, icon, primary}] (default: Bloquear and Nueva cita); an id other
+# than block or new fires onAction with it:  Agenda(…, actions: @agendaActions, onAction: agendaAction)
+# shadcn-for-muten · Custom (kit core) · host JS is agenda.js.
+part Agenda(resources: list, hours: list, events: list, blocks: list, actions: list, from: number = 9, to: number = 19, slot: number = 30, onCreate: action, onChange: action, onAction: action) {
+  Custom Agenda inputs(resources: $resources, hours: $hours, events: $events, blocks: $blocks, actions: $actions, from: $from, to: $to, slot: $slot) on(create: $onCreate, change: $onChange, action: $onAction) class("cx-agenda")
+}

package/registry/alert-dialog.muten

@@ -1,13 +1,10 @@
-# Alert Dialog - a modal that REQUIRES an explicit choice (no backdrop dismiss). The PAGE owns the bool:
-#   state { open = false : bool }   action confirm mutates open { open.set(false) … }   action cancel mutates open { open.set(false) }
-#   AlertDialog(open: open) { AlertDialogTitle(label) AlertDialogDescription(label) AlertDialogFooter { Button "Cancel" -> cancel … } }
-# shadcn-for-muten · part · no deps · reuses the .dialog* classes; the backdrop is a plain Stack (not clickable).
-part AlertDialog(open: bool) {
-  Stack class("dialog-overlay", "dialog-overlay-open" when $open) {
-    Stack class("dialog-backdrop")
-    Stack class("dialog-content") { slot }
-  }
+# AlertDialog - asks before something that cannot be undone (delete, cancel and refund). It cannot be dismissed by
+# tapping outside: the person answers with one of its two buttons (Esc counts as the safe one). Put them in a
+# ModalFooter: the safe way out (cx-exit) and the action (cx-go, destructive when it destroys).
+#   AlertDialog(open: asking, onClose: keep, title: "¿Eliminar el servicio?", description: "Desaparece de tu tienda…") {
+#     ModalFooter { Btn(variant: "outline", onClick: keep) class("cx-exit") { Span "Cancelar" }  Btn(variant: "destructive", onClick: remove) class("cx-go") { Span "Eliminar" } }
+#   }
+# shadcn-for-muten · part over Modal (role alertdialog, dismiss off).
+part AlertDialog(open: bool, onClose: action, title: text, description: text = "") {
+  Modal(open: $open, onClose: $onClose, title: $title, description: $description, mode: "dialog", role: "alertdialog", dismiss: "off") { slot }
 }
-part AlertDialogTitle(label: text) { Title "{$label}" h2 class("dialog-title") }
-part AlertDialogDescription(label: text) { Span "{$label}" class("dialog-description") }
-part AlertDialogFooter() { Stack class("dialog-footer") { slot } }

package/registry/alert.muten

@@ -1,8 +1,8 @@
-# Alert + sub-components. variant: default | destructive.
-# Compose: Alert(variant) { Icon … ; Stack { AlertTitle(label) AlertDescription(label) } }
-# shadcn-for-muten · part · no deps · styles via the semantic .alert* classes in globals.css.
-part Alert(variant: text) {
-  Section class("alert", "alert-default" when $variant == "default", "alert-destructive" when $variant == "destructive") { slot }
-}
-part AlertTitle(label: text) { Span "{$label}" class("alert-title") }
-part AlertDescription(label: text) { Span "{$label}" class("alert-description") }
+# Alert - a callout: an icon, a title, a description, an optional action at the corner. The icon carries the tone.
+#   Alert(tone: "wait") { Icon "lucide:clock"  AlertTitle(label: "Tu plan vence en 3 días")  AlertDescription(label: "…")  AlertAction { Btn(size: "xs", variant: "outline", onClick: renew) { Span "Renovar" } } }
+# variant: default | destructive · tone: "" | info | ok | wait
+# shadcn-for-muten · part · no deps · Nova (.cn-alert) + kit.css (tone).
+part Alert(variant: text = "default", tone: text = "") { Section class("cn-alert cn-alert-variant-{$variant} group/alert") data(slot: "alert", tone: $tone) aria(role: "status") { slot } }
+part AlertTitle(label: text) { Span "{$label}" class("cn-alert-title") data(slot: "alert-title") }
+part AlertDescription(label: text) { Text "{$label}" class("cn-alert-description") data(slot: "alert-description") }
+part AlertAction() { Stack class("cn-alert-action") data(slot: "alert-action") { slot } }

package/registry/app-shell.js

@@ -0,0 +1,9 @@
+// AppShell (muten Custom) - the kit's app structure (kit/structure.js): Sidebar, page header, detail Sheet and the
+// Command (⌘K). inputs: brand, plan, user, email, page, nav, pages, rows, commands, width ("narrow" = a narrow box);
+// handlers navigate(page) · open(id) · action(label).
+export function mount(el, inputs, on) {
+  let shell = null, narrow = inputs.width === "narrow";
+  const map = (i) => ({ ...i, brand: { name: i.brand, short: i.short, plan: i.plan }, user: { name: i.user, email: i.email } });
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/structure.js')]).then(([core, s]) => { shell = s.appShell(el, map(inputs), core, on); shell.narrow(narrow); });
+  return (next) => { narrow = next.width === "narrow"; shell?.narrow(narrow); };
+}

package/registry/app-shell.muten

@@ -0,0 +1,12 @@
+# AppShell - the system's structure on shadcn's Sidebar: store switcher on top, groups with their label and counts,
+# the person at the bottom. It folds to icons (the name shows on hover) and, in a narrow box, becomes a menu that
+# slides from the left. The page header has breadcrumbs, title, description and actions. Tapping a row opens the
+# detail Sheet on the right without leaving the list. Ctrl/⌘ K (or the search button) opens the Command.
+#   AppShell(brand: "Barbería El Roble", short: "El Roble", plan: "Plan Pro", user: "Julián Restrepo", email: "julian@elroble.co", page: "Pedidos", nav: @nav, pages: @pages, rows: @rows, commands: @commands, width: width, onNavigate: go, onOpen: openRow, onAction: act)
+# nav {group, icon, label, count} · pages {name, title, description, actions [{label, variant, icon}]} · rows {page, id,
+# title, description, badge, tone, amount, command, sheetTitle, sheetDescription, sheet [{icon, title, description,
+# badge, tone, amount}], timeline [{label, when}], primary, secondary} · commands {icon, label, page}.
+# width "narrow" lays it out as in a narrow box. shadcn-for-muten · Custom (kit/structure.js) · Nova sidebar/sheet/command + kit.css (.cx-app-*).
+part AppShell(brand: text, short: text = "", plan: text = "", user: text, email: text = "", page: text = "", nav: list, pages: list, rows: list, commands: list, empty: text = "", width: text = "wide", onNavigate: action, onOpen: action, onAction: action) {
+  Custom AppShell inputs(brand: $brand, short: $short, plan: $plan, user: $user, email: $email, page: $page, nav: $nav, pages: $pages, rows: $rows, commands: $commands, empty: $empty, width: $width) on(navigate: $onNavigate, open: $onOpen, action: $onAction) class("cx-app-host")
+}

package/registry/attachment.muten

@@ -1,12 +1,16 @@
-# Attachment - a file attachment chip (icon + name + size).
-#   Attachment(name: "report.pdf", size: "2.4 MB")
-# shadcn-for-muten · part · no deps · styles via the semantic .attachment* classes in globals.css.
-part Attachment(name: text, size: text) {
-  Stack class("attachment") {
-    Icon "lucide:paperclip" class("size-4 text-muted-foreground shrink-0")
-    Stack class("flex flex-col") {
-      Span "{$name}" class("attachment-name")
-      Span "{$size}" class("attachment-size")
+# Attachment - a file in a message or a form: its kind as an icon, the name (cut with «…» when long) and the size;
+# tapping it opens the file. kind: file | pdf | image | audio | sheet.
+#   Attachment(name: "comprobante-1042.pdf", size: "182 KB", kind: "pdf", to: "/…")
+# shadcn-for-muten · part · no deps · kit.css (.cx-attach).
+part Attachment(name: text, size: text = "", kind: text = "file", to: text = "#") {
+  Link -> "{$to}" class("cx-attach") data(slot: "attachment", kind: $kind) {
+    Stack class("cx-attach-ic") {
+      when $kind == "pdf" { Icon "lucide:file-text" }
+      when $kind == "image" { Icon "lucide:image" }
+      when $kind == "audio" { Icon "lucide:file-audio" }
+      when $kind == "sheet" { Icon "lucide:file-spreadsheet" }
+      when $kind == "file" { Icon "lucide:file" }
     }
+    Stack class("cx-attach-text") { Span "{$name}" class("cx-attach-name")  Span "{$size}" class("cx-attach-size") }
   }
 }

package/registry/avatar.muten

@@ -1,7 +1,26 @@
-# Avatar - a user's initials in a circle (AvatarFallback). Pass a name; built-in initial() takes the first letter.
-# shadcn-for-muten · part · no deps · styles via the semantic .avatar* classes. For a photo, swap the inner Span for `Image "{$src}" alt("{$name}")`.
-part Avatar(name: text) {
-  Stack class("avatar") {
-    Stack class("avatar-fallback") { Span "{initial($name)}" }
+# Avatar - three sizes (24, 32, 40). Without a photo the initials take a stable tone from the name (hue), mixed with
+# the skin's background so they never clash with the brand. The name shows on hover and on focus. A status dot
+# (online), a stacked group with «+N», and AvatarImage for a photo.
+#   Avatar(name: "Valentina Ruiz", size: "lg")     Avatar(name: "Laura Méndez", size: "lg", status: "online")
+#   AvatarGroup { Avatar(name: "Laura Méndez")  Avatar(name: "Diego Paredes")  AvatarMore(count: "+3", label: "3 personas más") }
+#   Avatar(name: "El Roble", shape: "square")    - a thing, not a person
+# size: sm | default | lg · status: "" | online · shadcn-for-muten · part · no deps · Nova + kit.css (.cx-av).
+part Avatar(name: text, size: text = "default", shape: text = "", status: text = "") {
+  Stack class("cx-av-wrap") data(name: $name) aria(label: $name) {
+    Stack class("cn-avatar group/avatar cx-av") data(slot: "avatar", size: $size, shape: $shape) style(h: "{hue($name)}") {
+      Span "{initials($name)}" class("cn-avatar-fallback") data(slot: "avatar-fallback")
+      when $status == "online" { Span "" class("cn-avatar-badge cx-online") data(slot: "avatar-badge") aria(label: "En línea") }
+    }
   }
 }
+part AvatarImage(src: text, name: text, size: text = "default", shape: text = "") {
+  Stack class("cx-av-wrap") data(name: $name) {
+    Stack class("cn-avatar group/avatar") data(slot: "avatar", size: $size, shape: $shape) {
+      Image "{$src}" alt("{$name}") class("cn-avatar-image") data(slot: "avatar-image")
+    }
+  }
+}
+part AvatarGroup() { Stack class("cn-avatar-group group/avatar-group") data(slot: "avatar-group") { slot } }
+part AvatarMore(count: text, label: text = "") { Span "{$count}" class("cn-avatar-group-count") data(slot: "avatar-group-count", name: $label) }
+# Who - a person with what they are doing now: Who(title: "Laura Méndez", subtitle: "Atiende hoy · 4 citas") { Avatar(…) }
+part Who(title: text, subtitle: text = "") { Stack class("cx-who") { slot  Stack class("cx-who-t") { Span "{$title}" class("cx-who-n")  Span "{$subtitle}" class("cx-who-s") } } }

package/registry/badge.muten

@@ -1,9 +1,24 @@
-# Badge - a small status descriptor. variant: default | secondary | destructive | outline.
-# shadcn-for-muten · part · no deps · styles via the semantic .badge* classes in globals.css.
-part Badge(label: text, variant: text) {
-  Span "{$label}" class("badge",
-    "badge-default" when $variant == "default",
-    "badge-secondary" when $variant == "secondary",
-    "badge-destructive" when $variant == "destructive",
-    "badge-outline" when $variant == "outline")
+# Badge - a short label. `StatusBadge` is the system's state: a dot and the word, never a tinted pill.
+#   Badge(label: "Nuevo")                         Badge(label: "PRO", variant: "default")
+#   StatusBadge(label: "Confirmada", tone: "ok")  StatusBadge(label: "Por revisar", tone: "wait")
+# Badge variant: default | secondary | destructive | outline | ghost | link   (default: secondary)
+# StatusBadge tone: ok | wait | info | bad | "" (neutral)
+# shadcn-for-muten · part · no deps · Nova (.cn-badge) + kit.css (status).
+part Badge(label: text, variant: text = "secondary") { Span "{$label}" class("cn-badge cn-badge-variant-{$variant} group/badge") data(slot: "badge") }
+part StatusBadge(label: text, tone: text = "") { Span "{$label}" class("cn-badge cn-badge-variant-ghost group/badge") data(slot: "badge", variant: "status", tone: $tone) }
+# ToneBadge - a state with its tone, tinted, with or without a dot: new | ok | wait | bad | pro (PRO uses --selected).
+#   ToneBadge(label: "Confirmado", tone: "ok")    ToneBadge(label: "Pendiente", tone: "wait", dot: "dot")
+part ToneBadge(label: text, tone: text, dot: text = "") {
+  Stack class("cn-badge group/badge cx-tone-{$tone}") data(slot: "badge") {
+    when $dot != "" { Span "" class("cx-dot") }
+    Span "{$label}"
+  }
+}
+# Chip - a value the person can take away with its ×; it fades out (no jump). The page owns the list.
+#   each tags as t { Chip(label: t.name, onRemove: removeTag) }   with   action removeTag(name: text) mutates tags { … }
+part Chip(label: text, onRemove: action) {
+  Stack class("cn-badge cn-badge-variant-secondary cx-chip") data(slot: "badge") {
+    Span "{$label}"
+    Button -> $onRemove($label) class("cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-chip-x") aria(label: "Quitar {$label}") { Icon "lucide:x" }
+  }
 }

package/registry/band.muten

@@ -0,0 +1,16 @@
+# Band - the strip at the top for a state that lasts (no connection, the plan is about to end). One at a time: a new
+# one replaces the old. It folds open and closed; the text fades first so nothing is clipped. The page owns open.
+#   Band(open: offline, tone: "muted", text: "Sin conexión. Guardamos tus cambios al volver.") { Icon "lucide:info" }
+#   Band(open: planEnding, tone: "warn", text: "Tu plan Pro vence en 3 días.", action: "Renovar", onAction: renew) { Icon "lucide:clock" }
+# tone: muted | warn. shadcn-for-muten · part · no deps · kit.css (.cx-band).
+part Band(open: bool, tone: text = "muted", text: text, action: text = "", onAction: action) {
+  Stack class("cx-band-slot") data(open: $open) {
+    Stack class("cx-band-fold") {
+      Stack class("cx-band") data(tone: $tone) aria(role: "status") {
+        slot
+        Span "{$text}" class("cx-band-text")
+        when $action != "" { Button "{$action}" -> $onAction class("cn-button cn-button-variant-outline cn-button-size-xs group/button") }
+      }
+    }
+  }
+}

package/registry/bar-chart.muten

@@ -0,0 +1,7 @@
+# BarChart - bars that always fill their height, a period switch (14 días / 30 días). periods: {label, values} - the
+# labels are the last N days up to today. money "on" formats as money.
+#   BarChart(title: "Ventas", periods: @sales, money: "on")
+# shadcn-for-muten · part over KitWidget (kit core).
+part BarChart(title: text, periods: list, money: text = "") {
+  Custom KitWidget inputs(name: "barChart", title: $title, periods: $periods, money: $money) class("cx-chart-card")
+}

package/registry/bell.muten

@@ -0,0 +1,3 @@
+# Bell - the system's notifications: tap to see them, mark all read.   Bell(items: @notices)   items: {icon, tone, title, desc, time, unread}
+# shadcn-for-muten · part over KitWidget (kit core).
+part Bell(items: list) { Custom KitWidget inputs(name: "bell", items: $items) class("cx-bell-host") }

package/registry/bento.muten

@@ -1,9 +1,6 @@
-# BentoGallery - a tiling gallery on a fixed row-height grid, so cells of different column widths always line up.
-# Each BentoCell picks its own col-span (and bg / content) via class:
-#   BentoGallery {
-#     BentoCell class("col-span-4 bg-muted") { Span "01" }
-#     BentoCell class("col-span-2 bg-accent") { Span "02" }
-#   }
-# shadcn-for-muten · block · no deps · uses .bento-gallery / .bento-cell from globals.css.
-part BentoGallery() { Stack class("bento-gallery") { slot } }
-part BentoCell() { Stack class("bento-cell") { slot } }
+# BentoGallery - a gallery of tiles on a grid of fixed-height rows, so tiles of different widths always line up.
+# Each BentoCell says how many of the six columns and how many rows it takes (on a phone they stack).
+#   BentoGallery { BentoCell(span: 4, rows: 2) { … }  BentoCell(span: 2) { … }  BentoCell(span: 2) { … } }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-bento).
+part BentoGallery(rowHeight: text = "160px") { Stack class("cx-bento") style(row: "{$rowHeight}") { slot } }
+part BentoCell(span: number = 2, rows: number = 1) { Stack class("cx-bento-cell") style(span: "{$span}", rows: "{$rows}") { slot } }

package/registry/booking.js

@@ -0,0 +1,21 @@
+// Booking (muten Custom) - the kit's booking picker (kit/structure.js): week strip and hours in one piece.
+// inputs: week [{days, hours}], taken [{day, hours}], wait, cta, demo; handler select("yyyy-mm-dd HH:MM").
+// demo "on" plays it by itself (a day, then an hour, in turn) until the first touch; it never presses the button.
+export function mount(el, inputs, on) {
+  let timer = 0, stopped = false;
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/structure.js')]).then(([core, s]) => {
+    s.booking(el, inputs, core, on);
+    if (inputs.demo !== 'on' || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    let turn = 0;
+    const open = (sel) => [...el.querySelectorAll(sel)].filter((b) => !b.disabled && !b.hasAttribute('data-full'));
+    const pick = (sel) => { const all = open(sel); return all.length ? all[turn % all.length] : null; };
+    const play = () => {
+      if (stopped) return;
+      pick('.cx-day')?.click();
+      timer = setTimeout(() => { if (stopped) return; pick('.cx-hour')?.click(); turn++; timer = setTimeout(play, 2600); }, 1500);
+    };
+    el.addEventListener('pointerdown', () => { stopped = true; clearTimeout(timer); }, { once: true, capture: true });
+    timer = setTimeout(play, 900);
+  });
+  return () => {};
+}

package/registry/booking.muten

@@ -0,0 +1,13 @@
+# Booking - week and hours in one piece. The dot under a day says something is left; closed days are disabled; a
+# full day shows its empty state with a jump to the next day with hours. Changing day shows a skeleton with the exact
+# shape of the hours while they load (nothing jumps in height). What is chosen goes on --selected.
+#   Booking(week: @week, taken: @taken, wait: 380, onSelect: book)
+# week {days [0..6], hours ["09:00", …]} = what the shop offers each weekday (a weekday in no row is closed);
+# taken {day (days from today or "yyyy-mm-dd"), hours} = what is booked (no hours = the whole day). onSelect gets
+# "yyyy-mm-dd HH:MM" on «Continuar».
+# demo "on": it plays itself for a landing (a day, then an hour, again and again) until someone touches it; never
+# confirms, and stays still under reduced motion.
+# shadcn-for-muten · Custom (kit/structure.js) · kit.css (.cx-book, .cx-week, .cx-hours).
+part Booking(week: list, taken: list, wait: number = 0, cta: text = "Continuar", demo: text = "", onSelect: action) {
+  Custom Booking inputs(week: $week, taken: $taken, wait: $wait, cta: $cta, demo: $demo) on(select: $onSelect) class("cx-book-host")
+}

package/registry/breadcrumb.muten

@@ -1,7 +1,9 @@
-# Breadcrumb + sub-components.
-# Compose: Breadcrumb { BreadcrumbLink(label,href) BreadcrumbSeparator BreadcrumbLink(...) BreadcrumbSeparator BreadcrumbPage(label) }
-# shadcn-for-muten · part · no deps · styles via the semantic .breadcrumb* classes in globals.css.
-part Breadcrumb() { Nav class("breadcrumb") aria(label: "breadcrumb") { slot } }
-part BreadcrumbLink(label: text, href: text) { Link "{$label}" -> "{$href}" class("breadcrumb-link") }
-part BreadcrumbPage(label: text) { Span "{$label}" class("breadcrumb-page") }
-part BreadcrumbSeparator() { Icon "lucide:chevron-right" class("breadcrumb-separator") }
+# Breadcrumb - where this page sits: the trail of pages above it, the current one last (not a link). A long trail
+# folds its middle into «…» (BreadcrumbEllipsis).
+#   Breadcrumb { BreadcrumbLink(label: "El Roble", to: "/")  BreadcrumbSeparator()  BreadcrumbLink(label: "Pedidos", to: "/orders")  BreadcrumbSeparator()  BreadcrumbPage(label: "#1042") }
+# shadcn-for-muten · parts · no deps · Nova (.cn-breadcrumb-*).
+part Breadcrumb(label: text = "Migas") { Nav class("cx-breadcrumb") data(slot: "breadcrumb") aria(label: $label) { Stack class("cn-breadcrumb-list cx-bc-list") data(slot: "breadcrumb-list") aria(role: "list") { slot } } }
+part BreadcrumbLink(label: text, to: text) { Link "{$label}" -> "{$to}" class("cn-breadcrumb-link cx-bc-item") data(slot: "breadcrumb-link") }
+part BreadcrumbPage(label: text) { Span "{$label}" class("cn-breadcrumb-page cx-bc-item") data(slot: "breadcrumb-page") aria(current: "page") }
+part BreadcrumbSeparator() { Stack class("cn-breadcrumb-separator cx-bc-sep") data(slot: "breadcrumb-separator") aria(hidden: "true") { Icon "lucide:chevron-right" } }
+part BreadcrumbEllipsis(label: text = "Más páginas") { Stack class("cn-breadcrumb-ellipsis cx-bc-more") data(slot: "breadcrumb-ellipsis", name: $label) aria(label: $label) { Icon "lucide:ellipsis" } }

package/registry/button-group.muten

@@ -1,4 +1,13 @@
-# ButtonGroup - segmented row of buttons that share borders. Put `btn btn-outline` buttons inside:
-#   ButtonGroup { Button "Bold" -> b class("btn btn-outline")  Button "Italic" -> i class("btn btn-outline") }
-# shadcn-for-muten · part · no deps · uses .btn-group from globals.css.
-part ButtonGroup() { Stack class("btn-group") { slot } }
+# ButtonGroup - buttons that belong together, sharing their borders (shadcn Nova). Buttons, an Input or a
+# ButtonGroupText go inside; ButtonGroupSeparator splits two filled buttons. Groups can nest (they keep a gap).
+#   ButtonGroup { Btn(variant: "outline", onClick: prev) { Icon "lucide:chevron-left" }  Btn(variant: "outline", onClick: next) { Icon "lucide:chevron-right" } }
+#   ButtonGroup(orientation: "vertical") { … }
+#   ButtonGroup { ButtonGroupText(label: "https://")  Input(value: site) }
+# orientation: horizontal | vertical. shadcn-for-muten · part · no deps · Nova (.cn-button-group).
+part ButtonGroup(orientation: text = "horizontal", label: text = "") {
+  Stack class("cn-button-group cn-button-group-orientation-{$orientation}") data(slot: "button-group", orientation: $orientation) aria(role: "group", label: $label) { slot }
+}
+part ButtonGroupText(label: text) { Span "{$label}" class("cn-button-group-text") data(slot: "button-group-text") }
+part ButtonGroupSeparator(orientation: text = "vertical") {
+  Stack class("cn-separator cn-separator-{$orientation} cn-button-group-separator") data(slot: "button-group-separator", orientation: $orientation) aria(role: "separator")
+}

package/registry/button.muten

@@ -1,8 +1,21 @@
-# Button (part name Btn - `Button` is a muten primitive, so a part can't reuse that name) - a plug-and-play
-# button. No class props: pass a `variant` + your action, put the label/icon in the slot.
-#   Btn(variant: "default", onClick: save) { Span "Save" }
-#   Btn(variant: "outline", onClick: cancel) { Icon "lucide:x" class("size-4")  Span "Cancel" }
-# variant: default | secondary | outline | ghost | destructive | link. For a link that looks like a button use
-# `Link "..." -> "/path" class("btn btn-default")`; for sizes add btn-sm|btn-lg on the primitive.
-# shadcn-for-muten · part · no deps · wraps the Button primitive + the .btn recipe.
-part Btn(variant: text, onClick: action) { Button -> $onClick class("btn btn-{$variant}") { slot } }
+# Button (part name Btn - `Button` is a muten primitive, so a part can't reuse that name) - shadcn's Nova button.
+# Put the label (and an icon) in the slot; an Icon nudges on hover (trailing moves on, leading lifts, lone grows).
+#   Btn(onClick: save) { Span "Guardar" }
+#   Btn(variant: "outline", size: "sm", onClick: cancel) { Icon "lucide:x"  Span "Cancelar" }
+#   Btn(size: "icon-sm", variant: "ghost", tone: "wait", onClick: due) { Icon "lucide:clock"  Indicator(tone: "wait") }
+#   Btn(onClick: go) class("cx-fill") { Span "Marcar llegada"  Icon "lucide:chevron-right" }   - full width (a card's primary)
+# variant: default | outline | secondary | ghost | destructive | link   (default: default)
+# size: xs (24) | sm (28) | default (32) | lg (36) | xl (44) | 2xl (52) | icon | icon-xs | icon-sm | icon-lg | icon-xl | icon-2xl
+#   xl and 2xl are for big surfaces (a landing, a sign-in) and match the fields' xl / 2xl.
+# tone: "" | info | ok | wait | bad | note - a tinted icon button (a pending thing on a card)
+# label: the name of an icon-only button (aria-label, and the kit's tooltip on hover). Leave it empty when there is text.
+# shadcn-for-muten · part · no deps · Nova classes (nova.css) + kit.css.
+part Btn(variant: text = "default", size: text = "default", tone: text = "", label: text = "", onClick: action) {
+  Button -> $onClick class("cn-button cn-button-variant-{$variant} cn-button-size-{$size} group/button", "cx-tonal cx-has-indicator" when $tone != "") data(slot: "button", tone: $tone, name: $label) aria(label: $label) { slot }
+}
+# TriggerBtn - a Btn that only opens what sits next to it (a Popover, a DropdownMenu, a SplitButton's menu): it has no
+# action of its own, so opening never runs something else. Same variants and sizes as Btn.
+#   DropdownMenu { DropdownTrigger { TriggerBtn { Span "Opciones"  Icon "lucide:chevron-down" } }  DropdownContent { … } }
+part TriggerBtn(variant: text = "outline", size: text = "default", label: text = "") {
+  Button class("cn-button cn-button-variant-{$variant} cn-button-size-{$size} group/button") data(slot: "button", name: $label) aria(label: $label) { slot }
+}

package/registry/calendar.js

@@ -1,94 +1,29 @@
-// Calendar host (muten Custom). Variants via inputs:
-//   mode: "single" | "range" | "multiple"   months: 1 | 2   caption: "label" | "dropdown"
-// `selected` encodes the value: single -> "yyyy-mm-dd"; range -> "from/to"; multiple -> "d1,d2,...".
-// handlers: { select(encoded) }.
-export function mount(el, inputs, handlers) {
-  const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-  const DOW = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-  const pad = (n) => String(n).padStart(2, '0');
-  const iso = (d) => d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
-  const parse = (s) => { const d = new Date(s + 'T00:00:00'); return isNaN(d.getTime()) ? null : d; };
-  const same = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-  const num = (d) => d.getFullYear() * 10000 + d.getMonth() * 100 + d.getDate();
-
-  const mode = inputs.mode || 'single';
-  const months = Math.min(2, Math.max(1, Number(inputs.months) || 1));
-  const dropdown = inputs.caption === 'dropdown';
-  const today = new Date();
-
-  let selected = [];
-  const readSelected = (val) => {
-    selected = [];
-    const s = String(val || '');
-    if (!s) return;
-    const parts = mode === 'range' ? s.split('/') : mode === 'multiple' ? s.split(',') : [s];
-    for (const p of parts) { const d = parse(p); if (d) selected.push(d); }
-  };
-  readSelected(inputs.selected);
-  const anchor = selected[0] || today;
-  let vy = anchor.getFullYear();
-  let vm = anchor.getMonth();
-
-  const emit = () => {
-    const out = mode === 'range' ? selected.map(iso).join('/') : mode === 'multiple' ? selected.map(iso).join(',') : (selected[0] ? iso(selected[0]) : '');
-    if (handlers.select) handlers.select(out);
-  };
-  const isSel = (d) => selected.some((s) => same(s, d));
-  const inRange = (d) => { if (mode !== 'range' || selected.length < 2) return false; const x = num(d), a = num(selected[0]), b = num(selected[1]); return x > Math.min(a, b) && x < Math.max(a, b); };
-  const pick = (d) => {
-    if (mode === 'single') selected = [d];
-    else if (mode === 'multiple') { const i = selected.findIndex((s) => same(s, d)); if (i >= 0) selected.splice(i, 1); else selected.push(d); }
-    else { if (selected.length !== 1) selected = [d]; else { const a = selected[0]; selected = num(d) < num(a) ? [d, a] : [a, d]; } }
-    render(); emit();
-  };
-
-  const monthGrid = (y, m) => {
-    const wrap = document.createElement('div'); wrap.className = 'calendar-month';
-    const cap = document.createElement('div'); cap.className = 'calendar-caption';
-    if (dropdown) {
-      const ms = document.createElement('select'); ms.className = 'calendar-select';
-      MONTHS.forEach((name, i) => { const o = document.createElement('option'); o.value = String(i); o.textContent = name; if (i === m) o.selected = true; ms.appendChild(o); });
-      ms.addEventListener('change', () => { vm = Number(ms.value); render(); });
-      const ys = document.createElement('select'); ys.className = 'calendar-select';
-      for (let yy = y - 10; yy <= y + 10; yy++) { const o = document.createElement('option'); o.value = String(yy); o.textContent = String(yy); if (yy === y) o.selected = true; ys.appendChild(o); }
-      ys.addEventListener('change', () => { vy = Number(ys.value); render(); });
-      cap.appendChild(ms); cap.appendChild(ys);
-    } else {
-      const l = document.createElement('div'); l.className = 'calendar-label'; l.textContent = MONTHS[m] + ' ' + y; cap.appendChild(l);
-    }
-    wrap.appendChild(cap);
-
-    const grid = document.createElement('div'); grid.className = 'calendar-grid';
-    for (const d of DOW) { const c = document.createElement('div'); c.className = 'calendar-dow'; c.textContent = d; grid.appendChild(c); }
-    const first = new Date(y, m, 1).getDay();
-    const days = new Date(y, m + 1, 0).getDate();
-    for (let i = 0; i < first; i++) grid.appendChild(document.createElement('div'));
-    for (let day = 1; day <= days; day++) {
-      const d = new Date(y, m, day);
-      const cell = document.createElement('button'); cell.type = 'button'; cell.className = 'calendar-day'; cell.textContent = String(day);
-      if (isSel(d)) cell.classList.add('calendar-day-selected');
-      else if (inRange(d)) cell.classList.add('calendar-day-range');
-      else if (same(d, today)) cell.classList.add('calendar-day-today');
-      cell.addEventListener('click', () => pick(d));
-      grid.appendChild(cell);
-    }
-    wrap.appendChild(grid);
-    return wrap;
-  };
-
-  function render() {
-    el.innerHTML = '';
-    const SVG = (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>';
-    const prev = document.createElement('button'); prev.type = 'button'; prev.className = 'calendar-nav-prev'; prev.innerHTML = SVG('<path d="m15 18-6-6 6-6"/>'); // lucide chevron-left
-    const next = document.createElement('button'); next.type = 'button'; next.className = 'calendar-nav-next'; next.innerHTML = SVG('<path d="m9 18 6-6-6-6"/>'); // lucide chevron-right
-    prev.addEventListener('click', () => { vm--; if (vm < 0) { vm = 11; vy--; } render(); });
-    next.addEventListener('click', () => { vm++; if (vm > 11) { vm = 0; vy++; } render(); });
-    el.appendChild(prev); el.appendChild(next);
-    const wrap = document.createElement('div'); wrap.className = 'calendar-months';
-    for (let i = 0; i < months; i++) { let yy = vy, mm = vm + i; while (mm > 11) { mm -= 12; yy++; } wrap.appendChild(monthGrid(yy, mm)); }
-    el.appendChild(wrap);
-  }
-
-  render();
-  return (n) => { readSelected(n.selected); render(); };
+// Calendar (muten Custom) - the kit's month grid (one or two months, a day or a range), from kit/core.js.
+// inputs: selected  "yyyy-mm-dd" · "from/to" · or relative to today: "today", "0", "-6/0" (days from today)
+//         mode "single" | "range" · months 1 | 2 · min "today" | "yyyy-mm-dd"
+//         presets "reports" → Hoy · Últimos 7 días · Este mes · Mes pasado beside a range
+//         caption "on" → the sentence under it («Elegiste el jueves 8 de octubre» / «Del 2 oct al 8 oct · 7 días»)
+// handlers: select("yyyy-mm-dd" | "from/to"). Same component as the reference artifact's Calendar.
+export function mount(el, inputs, on) {
+  let cal = null;
+  import('@muten/shadcn/registry/kit/core.js').then(({ kit, ui, today, addDays, DAYLONG, MON, fmtDay }) => {
+    const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    const one = (s) => { const t = String(s).trim(); if (t === 'today') return new Date(today); if (/^-?\d+$/.test(t)) return addDays(today, Number(t)); const d = new Date(t + 'T00:00:00'); return Number.isNaN(d.getTime()) ? null : d; };
+    const mode = inputs.mode === 'range' ? 'range' : 'single';
+    const decode = (v) => { const s = String(v ?? ''); if (!s) return null; if (mode === 'range') { const [a, b] = s.split('/').map(one); return a ? [a, b || a] : null; } return one(s); };
+    const sayOne = (d) => (d ? `Elegiste el ${DAYLONG[d.getDay()].toLowerCase()} ${d.getDate()} de ${MON[d.getMonth()]}` : '');
+    const sayRange = (r) => (r?.[0] && r?.[1] ? `Del ${fmtDay(r[0])} al ${fmtDay(r[1])} · ${Math.round((r[1] - r[0]) / 864e5) + 1} días` : r?.[0] ? `Desde el ${fmtDay(r[0])}: elige el último día` : '');
+    const say = (v) => (mode === 'range' ? sayRange(v) : sayOne(v));
+    const PRESETS = [['Hoy', () => [today, today]], ['Últimos 7 días', () => [addDays(today, -6), today]], ['Este mes', () => [new Date(today.getFullYear(), today.getMonth(), 1), today]], ['Mes pasado', () => [new Date(today.getFullYear(), today.getMonth() - 1, 1), new Date(today.getFullYear(), today.getMonth(), 0)]]];
+    const withPresets = mode === 'range' && inputs.presets === 'reports';
+    el.innerHTML = `${withPresets ? `<div class="cx-range-wrap"><div class="cx-vstack cx-range-presets" style="width:auto;gap:2px">${PRESETS.map(([l], i) => ui.button({ label: l, variant: 'ghost', size: 'sm', cls: 'cx-left', attrs: `data-preset="${i}" aria-pressed="${i === 1}"` })).join('')}</div><div data-cal></div></div>` : '<div data-cal></div>'}${inputs.caption === 'on' ? '<span class="cx-text" data-variant="caption" data-out></span>' : ''}`;
+    const out = el.querySelector('[data-out]');
+    const value = decode(inputs.selected);
+    const emit = (v) => on.select?.(Array.isArray(v) ? (v[0] ? `${iso(v[0])}/${iso(v[1] || v[0])}` : '') : v ? iso(v) : '');
+    cal = kit.calendar(el.querySelector('[data-cal]'), { mode, months: Number(inputs.months) === 2 ? 2 : 1, value, min: inputs.min ? one(inputs.min) : null,
+      onChange: (v) => { if (out) out.textContent = say(v); el.querySelectorAll('[data-preset]').forEach((b) => b.setAttribute('aria-pressed', 'false')); emit(v); } });
+    if (out) out.textContent = say(value);
+    el.addEventListener('click', (e) => { const b = e.target.closest('[data-preset]'); if (!b) return; const r = PRESETS[+b.dataset.preset][1](); cal.set(r); if (out) out.textContent = sayRange(r); el.querySelectorAll('[data-preset]').forEach((x) => x.setAttribute('aria-pressed', x === b)); emit(r); });
+  });
+  return () => {};
 }