@muten/shadcn 0.1.1 → 0.1.3

package/motion.css

@@ -77,3 +77,18 @@
   .animate-fade-in, .animate-rise, .animate-scale-in, .animate-blur-in, .stagger > *, .words > *, .reveal, .reveal-stagger > *, .drift, .photo-in img { animation: none !important; }
   .hover-lift, .hover-zoom img { transition: none !important; }
 }
+
+/* smooth-scroll - on any element of the page: a jump to an anchor of the same page glides instead of snapping. */
+@media (prefers-reduced-motion: no-preference) {
+  html:has(.smooth-scroll) { scroll-behavior: smooth; }
+}
+
+/* reveal-blur - on a page's root: as you scroll down, each block of the marketing system (headings, rows, cards,
+   steps, tables, questions, the closer; never the hero) comes in from a blur, rising a little. Kit core marks each
+   block (data-rv) and lets it in as it enters the screen; what is on screen when the page opens is shown whole, so the
+   first paint, the LCP and a contrast checker never meet a half-faded block. No script or reduced motion: all shown. */
+@media (prefers-reduced-motion: no-preference) {
+  /* hiding is instant (it happens off screen, while the page loads); only the entrance moves */
+  [data-rv=""] { opacity: 0; filter: blur(14px); transform: translateY(28px); }
+  [data-rv="in"] { transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), filter 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--rv-i, 0) * 70ms); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",
@@ -20,7 +20,8 @@
     "motion.css",
     "themes",
     "README.md",
-    "AGENTS.md"
+    "AGENTS.md",
+    "scripts/reuse-audit.mjs"
   ],
   "exports": {
     "./globals.css": "./globals.css",

package/registry/accordion.muten

@@ -1,6 +1,8 @@
 # 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…" } }
+# No state to own (or a search engine must read the answers closed)? The same look on the native details:
+#   Accordion(size: "lg") { Details "¿…?" group("faq") class("cn-accordion-item") { Text "…" class("cn-accordion-content-inner") } }
 # 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 } }
@@ -15,3 +17,11 @@ part AccordionItem(title: text, open: bool, onToggle: action) {
     }
   }
 }
+# FaqItem - one question of an Accordion on the native <details>: no state to keep, and items sharing a `group` open one
+# at a time (they share the group «faq»). The answer goes in the slot (text, or text with a button). FaqItemOpen starts open (the first of a list).
+part FaqItem(question: text) {
+  Details "{$question}" group("faq") class("cn-accordion-item") { Stack class("cn-accordion-content-inner") { slot } }
+}
+part FaqItemOpen(question: text) {
+  Details "{$question}" group("faq") open class("cn-accordion-item") { Stack class("cn-accordion-content-inner") { slot } }
+}

package/registry/agenda.js

@@ -1,35 +1,83 @@
-// 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}]
+// Agenda / AgendaLive (muten Custom) - the kit's agenda (kit/core.js): day columns per person, week, list; drag to move,
+// edge to resize. Everything is data:
+//   resources [{id, name, photo, kind, capacity, group}] - each one is an AGENDA: kind "business" (the shop's own, shown
+//     first), "person" (a worker, the default) or any other (a room: say its `group`, «Salas»). capacity = how many citas
+//     it holds at once: 1 (default, never overlap) · 3 (a class of three) · 0 (no limit). overlap "never" | "allow"
+//     overrides every capacity. Citas that break one (the server sent them crossed) say «Se cruza».
+//   resources [{id, name, photo}] · hours [{id, days: [1..6], ranges: [[540, 780], [840, 1140]]}]  (minutes from midnight)
+//   events [{id, resource, with: [ids], day, start "HH:MM", dur, title, subtitle, price, status, tint, ink, 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)
+//     with = the other agendas the cita also takes (the room it uses, a second worker): checked and shown in each
+//     status = awaiting_payment | confirmed | started | done | noshow | cancelled · tint/ink = the service's colours
+//   blocks [{id, resource | "all", day, start, dur, reason}] · from / to (hours) · slot (minutes) · view: day | week | list
+//   free [{resource, day, start, end}] - the server's free hours; when sent they are the only free hours shown
+//   queue [{day, name, photo}] - who waits for a free hour that day · closed ["yyyy-mm-dd"] - days the shop is shut
+//     (blocks, queue and closed take a number of days from today too)
+//   lang es | en · currency (ISO, e.g. "USD") + locale · cents "yes" (prices in cents) · sheet "app" · drag "off"
+//   loading "yes" (the calendar's shape in grey until the data arrives) · start "yyyy-mm-dd" (the day it opens on)
+//   actions [{id, label, icon, primary}] - the toolbar's buttons (default: block and new); any other id fires `action`
+//   phone "nav" - on a phone the actions and the arrows leave the agenda's toolbar: the app's phone bar carries them and
+//     sends them back through `command`: "new", "block", "prev", "next", "today", "view:list", or an action id. The
+//     agenda runs a command when its value changes, so repeat one with a suffix after # ("new#1", "new#2"…)
+//   hour12 "yes" - times written 3:00 PM (the data stays "HH:MM") · timeZone "America/Bogota" - today and now are the shop's
+//   phoneView "list" - a phone opens on the list until a view is picked · blockScope "all" - blocks are for the whole
+//     business (no «Para» picker: a backend with no per-person blocks)
+//   events also take tags ["A domicilio", "Llegó 10:02"] (words next to the time) and photo (the client's face, in the list)
+//   resources also take role (read under the name), hideEmpty (the column shows only on days it has citas) and
+//     bookable false (an agenda that only holds citas, «Sin asignar»: never offered as free)
+//   resize "off" - a cita's length is not dragged (a backend that only moves day and time) · moveAcross "off" - a
+//     dragged cita stays in its own agenda (only its time, and its day in the week view, change)
+//   placing [{resource, day, start, dur, title, tint}] - while the app's «new cita» sheet is open, where it will land
+//   create "sheet" - a showcase: «new» and a tap on a free hour open a short built-in form and the cita lands at once
+// handlers: create(json {resource, day, start}) · open(json event) · block(json {resource, day, start, dur, reason})
+//   move(json {id, resource, day, start, dur}) · range(json {from, to, view}: view is day | week | list | range) · change(json [...]) · action(id)
+// The title opens a month (floating; a sheet on a phone): one day, or «Varios días», a range listed day by day.
+// LIVE: new inputs repaint the same agenda (same day, view and person): an app sends its data again and it shows;
+//   lang, currency, locale and cents change live too.
 export function mount(el, inputs, on) {
-  let latest = inputs;
+  let api = null, map = null, pending = null, lastCmd = String(inputs.command || '');   // the command it was born with never runs
   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 at = (s) => new Date(String(s) + 'T00:00:00');
+    const yes = (v) => v === true || v === 'yes' || v === 'true';
+    const data = (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 || '' })))),
-      });
+      const plain = (d) => (typeof d === 'number' || /^-?\d+$/.test(String(d)) ? addDays(today, Number(d)) : at(d));
+      const dayOf = (rid, d) => (typeof d === 'number' || /^-?\d+$/.test(String(d)) ? land(rid, d) : at(d));
+      const free = Array.isArray(i.free) && i.free.length ? i.free.map((f) => ({ ...f, day: dayOf(f.resource, f.day) })) : null;
+      return {
+        resources: list(i.resources), availability: work, free,
+        events: list(i.events).map((e) => ({ tone: 'ok', at: 0, ...e, day: dayOf(e.resource, e.day) })),
+        blocks: list(i.blocks).map((b) => ({ ...b, day: plain(b.day) })),
+        queue: list(i.queue).map((q) => ({ ...q, day: plain(q.day) })), closed: list(i.closed).map(plain), loading: yes(i.loading),
+        placing: (() => { const g = list(i.placing)[0]; return g && g.start ? { ...g, day: dayOf(g.resource, g.day) } : null; })(),
+        lang: i.lang === 'en' ? 'en' : 'es', overlap: ['never', 'allow'].includes(i.overlap) ? i.overlap : 'auto', currency: i.currency || '', locale: i.locale || '', cents: yes(i.cents),
+      };
     };
-    build(latest);
+    map = data;
+    const send = (name, value) => on[name]?.(typeof value === 'string' ? value : JSON.stringify(value));
+    const day1 = (x) => ({ ...x, day: x.day instanceof Date ? iso(x.day) : x.day });
+    el.innerHTML = '';
+    api = kit.agenda(el, {
+      ...data(inputs),
+      actions: list(inputs.actions).length ? list(inputs.actions) : null,
+      from: Number(inputs.from) || 9, to: Number(inputs.to) || 19, slot: Number(inputs.slot) || 30, view: inputs.view || 'day',
+      createSheet: inputs.create === 'sheet', services: list(inputs.services),
+      sheet: inputs.sheet === 'app' ? 'app' : 'built-in', drag: inputs.drag !== 'off', start: inputs.start ? at(inputs.start) : null, phone: inputs.phone === 'nav' ? 'nav' : '',
+      resize: inputs.resize === 'off' ? 'off' : 'on', moveAcross: inputs.moveAcross === 'off' ? 'off' : 'on', hour12: yes(inputs.hour12), timeZone: inputs.timeZone || '', phoneView: ['list', 'day'].includes(inputs.phoneView) ? inputs.phoneView : '', blockScope: inputs.blockScope === 'all' ? 'all' : 'each',
+      onAction: (id) => send('action', id),
+      onCreate: (x) => send('create', day1(x)),
+      onOpen: on.open ? (e) => send('open', day1({ id: e.id, resource: e.resource, day: e.day, start: e.start, dur: e.dur, status: e.status || '' })) : null,
+      onBlock: on.block ? (b) => send('block', day1(b)) : null,
+      onMove: (m) => send('move', day1(m)),
+      onRange: (r) => send('range', { from: iso(r.from), to: iso(r.to), view: r.view }),
+      onChange: (evs) => send('change', evs.map((e) => ({ id: e.id, resource: e.resource, day: iso(e.day), start: e.start, dur: e.dur, status: e.status || '' }))),
+    });
+    if (pending) { api.update(data(pending)); pending = null; }
   });
-  return (next) => { latest = next; };
+  const command = (next) => { const c = String(next.command || ''); if (c === lastCmd) return; lastCmd = c; if (c) api.run(c.split('#')[0]); };
+  return (next) => { if (api && map) { api.update(map(next)); command(next); } else pending = next; };
 }

package/registry/agenda.muten

@@ -4,7 +4,35 @@
 # 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)
+# view: how it opens, day (default) | week | list.
 # 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")
+part Agenda(resources: list, hours: list, events: list, blocks: list, actions: list, from: number = 9, to: number = 19, slot: number = 30, view: text = "day", 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, view: $view) on(create: $onCreate, change: $onChange, action: $onAction) class("cx-agenda")
+}
+# AgendaDemo - the same agenda for a showcase with no app behind it: «Nueva cita» and a tap on a free hour open a short
+# built-in form (the service from `services` [{name, dur}], the client, the time) and the appointment lands on the
+# agenda at once, with its notice. Block, move and the appointment sheet work as in Agenda. Nothing is saved anywhere.
+part AgendaDemo(resources: list, hours: list, events: list, blocks: list, actions: list, services: list, from: number = 9, to: number = 19, slot: number = 30, view: text = "day", onChange: action, onAction: action) {
+  Custom Agenda inputs(resources: $resources, hours: $hours, events: $events, blocks: $blocks, actions: $actions, from: $from, to: $to, slot: $slot, view: $view, create: "sheet", services: $services) on(change: $onChange, action: $onAction) class("cx-agenda")
+}
+# AgendaLive - the agenda for an APP: it paints what it is given and tells the app what happened; the app keeps the
+# data and its own sheets. Send the lists again and it repaints on the same day, view and person.
+#   free     the server's free hours [{resource, day, start, end}] (the only free hours shown; [] = from `hours`)
+#   queue    who waits for a free hour [{day, name, photo}] · closed  days the shop is shut ["yyyy-mm-dd"]
+#   events   carry status (awaiting_payment | confirmed | started | done | noshow | cancelled) and tint/ink (the service's colours)
+#   lang es | en · currency + locale (prices written with Intl) · cents "yes" · drag "off" · loading "yes" · start "yyyy-mm-dd"
+#   onOpen(json {id, …}) a cita tapped (open your sheet) · onCreate(json {resource, day, start}) a free hour tapped
+#   onBlock(json {resource, day, start, dur, reason}) · onMove(json {id, resource, day, start, dur}) dragged (answer with
+#   the data: it stays where it landed, or goes back if you send it unchanged) · onRange(json {from, to, view}) days shown
+#   phone "nav": on a phone its actions (Bloquear, Nueva cita, yours) and the arrows leave the toolbar for the app's
+#   phone bar (PhoneBar), which sends them back through `command` ("new", "block", "prev", "next", "today", "view:list",
+#   an action id; repeat one with a suffix after #: "new#2"). Nothing runs while loading.
+#   several agendas: resources carry kind (business | person | a room…) and capacity (1 never overlaps, 0 no limit);
+#   a cita takes its resource plus every id in `with`. overlap "never" | "allow" overrides all capacities.
+#   resize "off" · moveAcross "off" (a backend that only moves day and time) · hour12 "yes" (3:00 PM) · timeZone (the shop's today and now) · phoneView "list" · blockScope "all" · placing [{…}]
+#   (the dashed cita while the app's new-cita sheet is open) · events take tags [words] and photo; resources role, hideEmpty
+#   AgendaLive(resources: @team, hours: @hours, events: @citas, blocks: @blocks, free: @free, queue: @queue, closed: @closed,
+#              lang: ui.lang, currency: "USD", onOpen: openCita, onCreate: newCita, onBlock: block, onMove: moveCita, onRange: loadDays)
+part AgendaLive(resources: list, hours: list, events: list, blocks: list, free: list, queue: list, closed: list, lang: text = "es", currency: text = "", locale: text = "", cents: text = "", from: number = 9, to: number = 19, slot: number = 30, view: text = "day", loading: text = "", start: text = "", drag: text = "", phone: text = "", command: text = "", overlap: text = "", hour12: text = "", timeZone: text = "", phoneView: text = "", blockScope: text = "", resize: text = "", moveAcross: text = "", placing: list, onOpen: action, onCreate: action, onBlock: action, onMove: action, onRange: action) {
+  Custom Agenda inputs(resources: $resources, hours: $hours, events: $events, blocks: $blocks, free: $free, queue: $queue, closed: $closed, lang: $lang, currency: $currency, locale: $locale, cents: $cents, from: $from, to: $to, slot: $slot, view: $view, loading: $loading, start: $start, drag: $drag, phone: $phone, command: $command, overlap: $overlap, hour12: $hour12, timeZone: $timeZone, phoneView: $phoneView, blockScope: $blockScope, resize: $resize, moveAcross: $moveAcross, placing: $placing, sheet: "app") on(open: $onOpen, create: $onCreate, block: $onBlock, move: $onMove, range: $onRange) class("cx-agenda")
 }

package/registry/band.muten

@@ -9,7 +9,7 @@ part Band(open: bool, tone: text = "muted", text: text, action: text = "", onAct
       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") }
+        when $action != "" { Btn(variant: "outline", size: "xs", onClick: $onAction) { Span "{$action}" } }
       }
     }
   }

package/registry/bio-play.muten

@@ -0,0 +1,16 @@
+# BioPlay - a social profile shown, not used: the photo, the handle, the followers, the bio with the store's link
+# and the two buttons, as Instagram draws a profile. For a landing; a picture (aria-hidden), `label` says what.
+#   BioPlay(photo: "/owner.webp", handle: "brumabarberia", followers: "1.284 seguidores", bio: "Cortes y barba.",
+#           link: "storio.ink/bruma-barberia", follow: "Seguir", message: "Mensaje", label: "…")
+# shadcn-for-muten · part · no deps · kit.css (.cx-bio).
+part BioPlay(photo: text, handle: text, followers: text, bio: text, link: text, follow: text, message: text, label: text = "") {
+  Stack class("cx-bio cx-play") aria(role: "img", label: $label) {
+    Stack class("cx-bio-top") aria(hidden: true) {
+      Image "{$photo}" alt("") class("cx-bio-av")
+      Stack class("cx-bio-n") { Span "{$handle}" class("cx-bio-h")  Span "{$followers}" }
+    }
+    Span "{$bio}" class("cx-bio-text") aria(hidden: true)
+    Stack class("cx-bio-link") aria(hidden: true) { Icon "lucide:link"  Span "{$link}" }
+    Stack class("cx-bio-btns") aria(hidden: true) { Span "{$follow}" data(tone: "primary")  Span "{$message}" }
+  }
+}

package/registry/booking-play.muten

@@ -0,0 +1,43 @@
+# BookingPlay - a booking shown, not used: one service, a few days and hours, and a booking that plays itself in a
+# loop (a day is picked, then an hour, «Reservar» is pressed and the confirmation comes up with its pass). For a
+# landing or a bento cell, where the real Booking would be a form nobody fills. Taken hours are struck through.
+#   BookingPlay(service: "Corte clásico", place: "Bruma Barbería · 30 min", price: "USD 15", cta: "Reservar",
+#               doneTitle: "¡Listo, Carla!", doneText: "Corte clásico · hoy · 4:30 PM", code: "STO-4F2K", label: "Así reserva tu cliente") {
+#     BookingPlayDays { BookingPlayDay(weekday: "lun", day: "5", state: "off") … BookingPlayDay(weekday: "hoy", day: "9", state: "pick") }
+#     BookingPlayHours { BookingPlayHour(time: "10:00", state: "taken") … BookingPlayHour(time: "4:30", state: "pick", picked: "4:30 PM") }
+#   }
+# photo: the owner's face in the circle (empty = the service's initial).
+# state: "" | off (closed day) | taken (hour) | pick (the one the loop chooses; one day and one hour).
+# Reduced motion: the pick is shown, the confirmation is not. shadcn-for-muten · part · no deps · kit.css (.cx-bkp).
+part BookingPlay(service: text, photo: text = "", place: text = "", price: text = "", cta: text = "Reservar", doneTitle: text = "", doneText: text = "", code: text = "", label: text = "") {
+  Stack class("cx-bkp cx-play") aria(role: "img", label: $label) {
+    Stack class("cx-bkp-who") aria(hidden: true) {
+      when $photo != "" { Image "{$photo}" alt("") class("cx-bkp-av cx-play-face") }
+      when $photo == "" { Span "{initial($service)}" class("cx-bkp-av") }
+      Stack class("cx-bkp-name") { Span "{$service}" class("cx-bkp-t")  Span "{$place}" class("cx-bkp-s") }
+      Span "{$price}" class("cx-bkp-price")
+    }
+    slot
+    Span "{$cta}" class("cx-bkp-go") aria(hidden: true)
+    Stack class("cx-bkp-done") aria(hidden: true) {
+      Stack class("cx-bkp-ok") { Icon "lucide:check" }
+      Span "{$doneTitle}" class("cx-bkp-dt")
+      Span "{$doneText}" class("cx-bkp-dd")
+      when $code != "" { Stack class("cx-bkp-pass") { Icon "lucide:qr-code"  Span "{$code}" } }
+    }
+  }
+}
+part BookingPlayDays() { Stack class("cx-bkp-days") aria(hidden: true) { slot } }
+part BookingPlayDay(weekday: text, day: text, state: text = "") {
+  Stack class("cx-bkp-day") data(state: $state) {
+    Span "{$weekday}" class("cx-bkp-wd")  Span "{$day}" class("cx-bkp-d")
+    when $state == "pick" { Stack class("cx-bkp-on") { Span "{$weekday}" class("cx-bkp-wd")  Span "{$day}" class("cx-bkp-d") } }
+  }
+}
+part BookingPlayHours() { Stack class("cx-bkp-hours") aria(hidden: true) { slot } }
+part BookingPlayHour(time: text, state: text = "", picked: text = "") {
+  Stack class("cx-bkp-hour") data(state: $state) {
+    Span "{$time}"
+    when $state == "pick" { Span "{$picked}" class("cx-bkp-on") }
+  }
+}

package/registry/button.muten

@@ -8,10 +8,11 @@
 # 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)
+# disabled: a bool (a state or a getter: a part argument can't be an expression) - the button can't be pressed.
 # 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 }
+part Btn(variant: text = "default", size: text = "default", tone: text = "", label: text = "", onClick: action, disabled: bool = false) {
+  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) disabled when $disabled { 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.

package/registry/chat-play.muten

@@ -0,0 +1,77 @@
+# ChatPlay - a conversation shown, not used: the messages come in one by one (in `step` order, 1-6) and the
+# assistant closes with a confirmation card, then it starts over. Its height is the conversation's: no empty chat.
+# For a landing; the real assistant is Chatbot. The suggestions and the composer are a picture (not focusable).
+#   ChatPlay(title: "Bruma Barbería", status: "Asistente · en línea", placeholder: "Escribe un mensaje", label: "…") {
+#     ChatPlayLog {
+#       ChatPlayMsg(text: "Hola, ¿tienes hora hoy?", who: "in", step: 1)
+#       ChatPlayMsg(text: "Hoy quedan 4:30 PM y 6:00 PM.", step: 2)
+#       ChatPlayCard(title: "Corte clásico", text: "Hoy · 4:30 PM", step: 5)
+#     }
+#     ChatPlayChips { ChatPlayChip(label: "¿Cuánto cuesta?") … }
+#   }
+# who: out (the shop and its assistant: right, dark, the default) | in (the client: left). Seen from the shop, as
+# its inbox shows it. The confirmation card is the shop's, so it sits right too. Reduced motion: the whole conversation, still.
+# skin: "" (the kit's own) | whatsapp | instagram | telegram - the conversation as that app shows it on the shop's phone
+# (its wallpaper, bubbles with their tail, the hour and the ticks inside, its composer); theme: "" | dark (WhatsApp at night).
+# With a skin, `photo` puts the person in the header instead of the assistant's face, ChatPlayDay sets a day chip,
+# ChatPlayMsg takes a `time`, ChatPlayButtons + ChatPlayButton hang reply buttons under the message before them
+# (Telegram draws them as its keyboard, two per row), and ChatPlayNote adds «Visto» or who answered. The header carries
+# the app's back arrow and call buttons, and the composer is that app's own. With a skin it is a phone screen (300 × 600,
+# a status bar with `clock`), and Instagram puts `photo` beside the client's last message of each turn.
+# shadcn-for-muten · part · no deps · kit.css (.cx-cp).
+part ChatPlay(title: text, status: text = "", placeholder: text = "", label: text = "", skin: text = "", theme: text = "", photo: text = "", clock: text = "9:41") {
+  # With a skin, the chat is a phone screen inside the library's one phone (the same iPhone as DeviceFrame), drawn at
+  # a real phone's 390 × 844 and scaled to the frame. Without one the wrappers do not count for layout.
+  Stack class("cx-cp-phone") data(skin: $skin) {
+  Stack class("cx-cp-frame") {
+  Stack class("cx-cp-screen") {
+  Stack class("cx-cp cx-play") data(skin: $skin, theme: $theme) style(face: "url('{$photo}')") aria(role: "img", label: $label) {
+    Stack class("cx-cp-sb") aria(hidden: true) { Span "{$clock}"  Stack class("cx-cp-sbi") { Icon "lucide:signal"  Icon "lucide:wifi"  Icon "lucide:battery-full" } }
+    Stack class("cx-cp-head") aria(hidden: true) {
+      Stack class("cx-cp-back") { Icon "lucide:chevron-left" }
+      when $photo == "" { Stack class("cx-cp-face") { Span ""  Span "" } }
+      when $photo != "" { Stack class("cx-cp-ring") { Image "{$photo}" alt("") class("cx-cp-photo") } }
+      Stack class("cx-cp-name") { Span "{$title}" class("cx-cp-t")  Span "{$status}" class("cx-cp-s") }
+      Stack class("cx-cp-acts") { Icon "lucide:video"  Icon "lucide:phone"  Icon "lucide:ellipsis-vertical" }
+    }
+    slot
+    # The composer as each app draws it (the skin decides which of these show): Instagram's blue camera, WhatsApp's
+    # field with its emoji, clip and camera beside the green mic, Telegram's flat bar.
+    Stack class("cx-cp-comp") aria(hidden: true) {
+      Stack class("cx-cp-cam") { Icon "lucide:camera" }
+      Stack class("cx-cp-emo") { Icon "lucide:smile" }
+      Span "{$placeholder}" class("cx-cp-ph")
+      Stack class("cx-cp-tools") { Icon "lucide:paperclip"  Icon "lucide:camera" }
+      Stack class("cx-cp-igtools") { Icon "lucide:mic"  Icon "lucide:image"  Icon "lucide:sticker" }
+      Stack class("cx-cp-menu") { Icon "lucide:menu"  Span "Menú" }
+      Stack class("cx-cp-send") { Icon "lucide:send-horizontal" }
+      Stack class("cx-cp-mic") { Icon "lucide:mic" }
+    }
+  }
+  }
+  }
+  }
+}
+
+part ChatPlayLog() { Stack class("cx-cp-log") aria(hidden: true) { slot } }
+part ChatPlayMsg(text: text, who: text = "out", step: number = 1, time: text = "") {
+  Stack class("cx-cp-msg") data(who: $who, step: $step) {
+    Span "{$text}"
+    when $time != "" { Stack class("cx-cp-time") { Span "{$time}"  Icon "lucide:check-check" } }
+  }
+}
+part ChatPlayDay(label: text) { Span "{$label}" class("cx-cp-day") }
+# The start of a conversation as Instagram shows it: the person's photo (ChatPlay's `photo`), name, handle and «Ver perfil».
+part ChatPlayProfile(name: text, sub: text = "", action: text = "") { Stack class("cx-cp-prof") { Span "" class("cx-cp-prof-ph")  Span "{$name}" class("cx-cp-prof-n")  Span "{$sub}" class("cx-cp-prof-s")  Span "{$action}" class("cx-cp-prof-a") } }
+# A small line under a message: Instagram's «Visto», or who answered («Respondió el asistente de Bruma»).
+part ChatPlayNote(label: text, step: number = 1) { Span "{$label}" class("cx-cp-note") data(step: $step) }
+part ChatPlayButtons(step: number = 1) { Stack class("cx-cp-btns") data(step: $step) { slot } }
+part ChatPlayButton(label: text) { Stack class("cx-cp-btn") { Icon "lucide:reply"  Span "{$label}" } }
+part ChatPlayCard(title: text, text: text = "", step: number = 1) {
+  Stack class("cx-cp-card") data(step: $step) {
+    Stack class("cx-cp-ok") { Icon "lucide:check" }
+    Stack class("cx-cp-name") { Span "{$title}" class("cx-cp-ct")  Span "{$text}" class("cx-cp-cd") }
+  }
+}
+part ChatPlayChips() { Stack class("cx-cp-chips") aria(hidden: true) { slot } }
+part ChatPlayChip(label: text) { Span "{$label}" class("cx-cp-chip") }

package/registry/day-plan.muten

@@ -0,0 +1,40 @@
+# DayPlan - the owner's day as a list in order: hour, a dot on a line, who and what, a tag on the right. The hours
+# already gone are faded, a red line says what time it is now, and one free slot can fill itself in a loop (a new
+# booking drops in with a green ring and the count steps up) - a picture of «your day keeps itself», not the Agenda.
+#   DayPlan(title: "Hoy", date: "viernes 9 de octubre", count: "5 citas", countNext: "6 citas") {
+#     DayPlanRow(time: "9:00 AM", title: "Pedro Ruiz", detail: "Corte clásico", tag: "Atendido", state: "done")
+#     DayPlanNow(time: "3:12 PM")
+#     DayPlanRow(time: "3:30 PM", title: "Laura Gómez", detail: "Corte y barba", tag: "Confirmada", tone: "ok")
+#     DayPlanRow(time: "4:30 PM", title: "Carla Méndez", detail: "Corte clásico", tag: "La agendó tu asistente", tone: "ai", state: "fill", free: "Libre")
+#   }
+# state: "" | done (gone, faded) | fill (shows `free` dashed, then fills; one per plan). tone: "" | ok | ai.
+# countNext: the count after the fill (empty = no count change). shadcn-for-muten · part · no deps · kit.css (.cx-dp).
+part DayPlan(title: text, date: text = "", count: text = "", countNext: text = "", label: text = "") {
+  Stack class("cx-dp cx-play") aria(label: $label) {
+    Stack class("cx-dp-top") {
+      Span "{$title}" class("cx-dp-t")
+      Span "{$date}" class("cx-dp-date")
+      when $count != "" {
+        Stack class("cx-dp-count") data(next: $countNext != "") { Span "{$count}" class("cx-dp-c1")  Span "{$countNext}" class("cx-dp-c2") aria(hidden: true) }
+      }
+    }
+    Stack class("cx-dp-list") aria(role: "list") { slot }
+  }
+}
+part DayPlanRow(time: text, title: text, detail: text = "", tag: text = "", tone: text = "", state: text = "", free: text = "") {
+  Stack class("cx-dp-row") data(state: $state) aria(role: "listitem") {
+    Span "{$time}" class("cx-dp-time")
+    Span "" class("cx-dp-dot")
+    Stack class("cx-dp-card") {
+      when $state == "fill" { Span "{$free}" class("cx-dp-free") aria(hidden: true) }
+      Stack class("cx-dp-body") {
+        Span "{$title}" class("cx-dp-who")
+        Span "{$detail}" class("cx-dp-what")
+        when $tag != "" { Span "{$tag}" class("cx-dp-tag") data(tone: $tone) }
+      }
+    }
+  }
+}
+part DayPlanNow(time: text) {
+  Stack class("cx-dp-now") aria(hidden: true) { Span "{$time}"  Span "" class("cx-dp-now-dot")  Span "" class("cx-dp-now-line") }
+}

package/registry/device-frame.muten

@@ -1,8 +1,26 @@
-# 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 - a device around a picture of a product, drawn like the real thing: a phone (the iPhone 18 Pro, to scale:
+# aluminium band, black border, the side buttons, an optional Dynamic Island) or a browser window (the bar with its three
+# dots and, when given, the address). Put an Image, or any content, in the slot; an Image fills the screen from the top.
+# height crops it (the whole device fades out at the bottom), so a tall screenshot can sit beside a short text. Every
+# measure of the phone follows its width, so it keeps the same proportions at any size. ChatPlay wears this same phone.
 #   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 } }
+#   DeviceFrame(island: "on", width: "300px") { Image "~/shots/app.png" alt("La app") }
+#   DeviceFrame(kind: "browser", url: "storio.ink/elroble", height: "420px") { Image "~/shots/panel.png" alt("Tu panel") }
+#   DeviceFrame(href: "/aurora", label: "Estudio Aurora, una tienda de muestra", shot: "/stores/aurora.webp")
+# width: empty (a phone is 280 px, a browser fills its column) or a width like «320px» or «100%». island: "on" draws the
+# island (leave it off over a page that has its own top bar). kind: phone | browser.
+# href: the whole device is a link there (it lifts on hover); label says where, for a screen reader.
+# shot: a picture of the screen (390 × 844 at twice the pixels) laid as its background. Unlike an Image it is not
+# downloaded until the device comes near the screen (content-visibility), so a long row of phones costs nothing.
+# A name under the phone: wrap it with its spans in `Stack class("cx-mk-store")`.
+# shadcn-for-muten · part · no deps · kit.css (.cx-device).
+part DeviceFrame(kind: text = "phone", height: text = "", width: text = "", url: text = "", island: text = "", href: text = "", label: text = "", shot: text = "") {
+  Stack class("cx-device") data(kind: $kind, crop: $height != "", sized: $width != "", island: $island, link: $href != "", shot: $shot != "") style(h: "{$height}", w: "{$width}", shot: "url('{$shot}')") {
+    when $url != "" { Span "{$url}" class("cx-device-url") aria(hidden: true) }
+    when $href != "" { Link "" -> "{$href}" class("cx-device-link") aria(label: $label) }
+    Stack class("cx-device-screen") {
+      when $shot != "" { Stack class("cx-device-shot") }
+      slot
+    }
+  }
+}