@muten/shadcn 0.1.15 → 0.2.1

package/motion.css

@@ -70,6 +70,9 @@
 /* Hover affordances. */
 .hover-lift { transition: transform var(--mu-motion, 200ms) var(--mu-ease, cubic-bezier(0.16,1,0.3,1)), box-shadow var(--mu-motion, 200ms) ease; }
 .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft, 0 12px 32px -12px rgb(0 0 0 / 0.25)); }
+/* lifted, an invisible strip fills the 4 px it left below, so a pointer resting on the bottom edge stays «on» it:
+   without it the card rose off the pointer, dropped back under it and rose again, a hover that blinked forever */
+.hover-lift:hover::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 10px; }
 .hover-zoom img { transition: transform 0.5s var(--mu-ease, cubic-bezier(0.16,1,0.3,1)); }
 .hover-zoom:hover img { transform: scale(1.05); }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.1.15",
+  "version": "0.2.1",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",

package/registry/accordion.muten

@@ -1,8 +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…" } }
+#   Accordion { AccordionItem(title: "Can I cancel my appointment?", open: a1, onToggle: t1) { Text "Yes, up to 3 hours before…" } }
 # 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") } }
+#   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 } }
@@ -18,7 +18,7 @@ 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).
+# 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 } }
 }

package/registry/agenda.js

@@ -1,14 +1,14 @@
 // 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
+//     first), "person" (a worker, the default) or any other (a room: say its `group`, “Rooms”). capacity = how many appointments
 //     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».
+//     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);
 //     a person can have several entries, one per group of days, when the days do not share one schedule
 //   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)
-//     with = the other agendas the cita also takes (the room it uses, a second worker): checked and shown in each
+//     with = the other agendas the appointment 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
@@ -22,19 +22,19 @@
 //     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
 //   fit "yes" - the hours share the height the app gives the agenda (give it one: a flex parent), never under 56px
-//   phoneStrip "dots" - the phone's week strip marks each day with a dot per cita in its service's colour (default: the count)
+//   phoneStrip "dots" - the phone's week strip marks each day with a dot per appointment in its service's colour (default: the count)
 //   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
+//     business (no “Para” picker: a backend with no per-person blocks)
+//   events also take tags ["At home", "Arrived 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 appointments) and
+//     bookable false (an agenda that only holds appointments, “Unassigned”: never offered as free)
+//   resize "off" - a appointment's length is not dragged (a backend that only moves day and time) · moveAcross "off" - a
+//     dragged appointment 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 appointment” 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 appointment 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)
-//   ranges "yes" - the month under the title also offers «Varios días» (a range listed day by day); off by default
+//   ranges "yes" - the month under the title also offers “Several days” (a range listed day by day); off by default
 // The title opens a month (floating; a sheet on a phone) to jump to a 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.
@@ -45,7 +45,7 @@ export function mount(el, inputs, on) {
   const SKIP = new Set(['command', 'start']);
   const sigOf = (i) => JSON.stringify(Object.keys(i).filter((k) => !SKIP.has(k)).sort().map((k) => [k, i[k]]));
   let lastSig = sigOf(inputs);
-  import('@muten/shadcn/registry/kit/core.js').then(({ kit, today, addDays }) => {
+  import('@muten/shadcn/registry/kit/core.js').then(({ kit, today, addDays, langOf }) => {
     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 at = (s) => new Date(String(s) + 'T00:00:00');
@@ -65,7 +65,9 @@ export function mount(el, inputs, on) {
         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; })(),
         from: Number(i.from) || 9, to: Number(i.to) || 19,
-        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),
+        // the language passed (Storio passes it), else the page's (the nearest lang), English by default
+        lang: i.lang === 'en' || i.lang === 'es' ? i.lang : (langOf(el) === 'es' ? 'es' : 'en'), overlap: ['never', 'allow'].includes(i.overlap) ? i.overlap : 'auto', currency: i.currency || '', locale: i.locale || '', cents: yes(i.cents),
+        agentMark: i.agentMark || '', agentLabel: i.agentLabel || '',
       };
     };
     map = data;
@@ -88,7 +90,9 @@ export function mount(el, inputs, on) {
       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) { const sig = sigOf(pending); if (sig !== lastSig) { lastSig = sig; api.update(data(pending)); } pending = null; }
+    // with no lang of its own it follows the page's: switched live when a lang changes
+    document.addEventListener('kit:lang', () => { if (el.isConnected && inputs.lang !== 'en' && inputs.lang !== 'es') api.update({ lang: langOf(el) === 'es' ? 'es' : 'en' }); });
   });
   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) { pending = next; return; } const sig = sigOf(next); if (sig !== lastSig) { lastSig = sig; api.update(map(next)); } command(next); };
+  return (next) => { inputs = next; if (!api || !map) { pending = next; return; } const sig = sigOf(next); if (sig !== lastSig) { lastSig = sig; api.update(map(next)); } command(next); };
 }

package/registry/agenda.muten

@@ -2,14 +2,14 @@
 # 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
+# actions: the toolbar's buttons as data, [{id, label, icon, primary}] (default: Bloquear and Nueva appointment); 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, 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
+# AgendaDemo - the same agenda for a showcase with no app behind it: “New appointment” 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) {
@@ -21,22 +21,24 @@ part AgendaDemo(resources: list, hours: list, events: list, blocks: list, action
 #   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
+#   onOpen(json {id, …}) a appointment 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
 #   fit "yes" the hours stretch to the height the app gives the agenda (a flex parent that grows), never under 56px
-#   ranges "yes" the date under the title also offers «Varios días» (a range, listed day by day); off by default
-#   actions [{id, label, icon, primary}] the toolbar's buttons (default: Bloquear and Nueva cita; [{id: "block", …}] alone
-#   leaves «Nueva cita» to the app's own button) · an id other than block or new fires onAction(id)
-#   phone "nav": on a phone its actions (Bloquear, Nueva cita, yours) and the arrows leave the toolbar for the app's
+#   ranges "yes" the date under the title also offers “Several days” (a range, listed day by day); off by default
+#   actions [{id, label, icon, primary}] the toolbar's buttons (default: Bloquear and Nueva appointment; [{id: "block", …}] alone
+#   leaves “New appointment” to the app's own button) · an id other than block or new fires onAction(id)
+#   phone "nav": on a phone its actions (Bloquear, Nueva appointment, 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" · phoneStrip "dots" (the phone's week: a dot per cita in its colour) · blockScope "all" · placing [{…}]
-#   (the dashed cita while the app's new-cita sheet is open) · events take tags [words] and photo; resources role, hideEmpty
+#   a appointment 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" · phoneStrip "dots" (the phone's week: a dot per appointment in its colour) · blockScope "all" · placing [{…}]
+#   (the dashed appointment while the app's new-cita sheet is open) · events take tags [words] and photo; resources role, hideEmpty
+#   events take by "agent" (made by the app's assistant): agentMark (an image url) goes before their name, and agentLabel
+#   ("Booked by your assistant") under it on the phone's list and in what a screen reader says
 #   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, actions: 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 = "", phoneStrip: text = "", fit: text = "", ranges: text = "", blockScope: text = "", resize: text = "", moveAcross: text = "", placing: list, onOpen: action, onCreate: action, onBlock: action, onMove: action, onRange: action, onAction: action) {
-  Custom Agenda inputs(resources: $resources, hours: $hours, events: $events, blocks: $blocks, actions: $actions, 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, phoneStrip: $phoneStrip, fit: $fit, ranges: $ranges, blockScope: $blockScope, resize: $resize, moveAcross: $moveAcross, placing: $placing, sheet: "app") on(open: $onOpen, create: $onCreate, block: $onBlock, move: $onMove, range: $onRange, action: $onAction) class("cx-agenda")
+part AgendaLive(resources: list, hours: list, events: list, blocks: list, actions: 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 = "", agentMark: text = "", agentLabel: text = "", timeZone: text = "", phoneView: text = "", phoneStrip: text = "", fit: text = "", ranges: text = "", blockScope: text = "", resize: text = "", moveAcross: text = "", placing: list, onOpen: action, onCreate: action, onBlock: action, onMove: action, onRange: action, onAction: action) {
+  Custom Agenda inputs(resources: $resources, hours: $hours, events: $events, blocks: $blocks, actions: $actions, 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, agentMark: $agentMark, agentLabel: $agentLabel, timeZone: $timeZone, phoneView: $phoneView, phoneStrip: $phoneStrip, fit: $fit, ranges: $ranges, blockScope: $blockScope, resize: $resize, moveAcross: $moveAcross, placing: $placing, sheet: "app") on(open: $onOpen, create: $onCreate, block: $onBlock, move: $onMove, range: $onRange, action: $onAction) class("cx-agenda")
 }

package/registry/alert-dialog.muten

@@ -1,8 +1,8 @@
 # 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" } }
+#   AlertDialog(open: asking, onClose: keep, title: "Delete the service?", description: "It disappears from your shop…") {
+#     ModalFooter { Btn(variant: "outline", onClick: keep) class("cx-exit") { Span "Cancel" }  Btn(variant: "destructive", onClick: remove) class("cx-go") { Span "Delete" } }
 #   }
 # shadcn-for-muten · part over Modal (role alertdialog, dismiss off).
 part AlertDialog(open: bool, onClose: action, title: text, description: text = "") {

package/registry/alert.muten

@@ -1,5 +1,5 @@
 # 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" } } }
+#   Alert(tone: "wait") { Icon "lucide:clock"  AlertTitle(label: "Your plan expires in 3 days")  AlertDescription(label: "…")  AlertAction { Btn(size: "xs", variant: "outline", onClick: renew) { Span "Renew" } } }
 # 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 } }

package/registry/app-shell.muten

@@ -2,7 +2,7 @@
 # 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)
+#   AppShell(brand: "El Roble Barbershop", short: "El Roble", plan: "Plan Pro", user: "Julián Restrepo", email: "julian@elroble.co", page: "Orders", 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}.

package/registry/attachment.muten

@@ -1,4 +1,4 @@
-# Attachment - a file in a message or a form: its kind as an icon, the name (cut with «…» when long) and the 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).

package/registry/avatar.muten

@@ -1,15 +1,15 @@
 # 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.
+# (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") }
+#   AvatarGroup { Avatar(name: "Laura Méndez")  Avatar(name: "Diego Paredes")  AvatarMore(count: "+3", label: "3 more people") }
 #   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") }
+      when $status == "online" { Span "" class("cn-avatar-badge cx-online") data(slot: "avatar-badge", trl: "Online") aria(label: "Online") }
     }
   }
 }
@@ -22,5 +22,5 @@ part AvatarImage(src: text, name: text, size: text = "default", shape: text = ""
 }
 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(…) }
+# Who - a person with what they are doing now: Who(title: "Laura Méndez", subtitle: "Working today · 4 appointments") { 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,13 +1,24 @@
 # 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(label: "New")                         Badge(label: "PRO", variant: "default")
+#   StatusBadge(label: "Confirmed", tone: "ok")  StatusBadge(label: "To review", 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") }
+# IconBadge - a Badge with an Icon or a Spinner inside (its children); end: true puts it after the word.
+#   IconBadge(label: "Verified") { Icon "lucide:badge-check" }   IconBadge(label: "Saving", variant: "outline") { Spinner }
+part IconBadge(label: text, variant: text = "secondary", end: bool = false) {
+  Stack class("cn-badge cn-badge-variant-{$variant} group/badge cx-badge-icon") class("cx-badge-end" when $end) data(slot: "badge") { slot  Span "{$label}" }
+}
+# LinkBadge - a badge that goes somewhere, with the arrow at its end.
+#   LinkBadge(label: "See plan", to: "/billing")
+part LinkBadge(label: text, to: text, variant: text = "secondary") {
+  Link -> "{$to}" class("cn-badge cn-badge-variant-{$variant} group/badge cx-badge-icon cx-badge-end cx-badge-link") data(slot: "badge") { Icon "lucide:arrow-up-right"  Span "{$label}" }
+}
 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")
+#   The word is the tone mixed toward the ink, so it reads on its tint in light and dark.
+#   ToneBadge(label: "Confirmed", tone: "ok")    ToneBadge(label: "Pending", 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") }

package/registry/band.muten

@@ -1,7 +1,7 @@
 # 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" }
+#   Band(open: offline, tone: "muted", text: "Offline. We'll save your changes when you're back.") { Icon "lucide:info" }
+#   Band(open: planEnding, tone: "warn", text: "Your Pro plan expires in 3 days.", action: "Renew", 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) {

package/registry/bar-chart.muten

@@ -1,6 +1,6 @@
-# BarChart - bars that always fill their height, a period switch (14 días / 30 días). periods: {label, values} - the
+# BarChart - bars that always fill their height, a period switch (14 days / 30 days). 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")
+#   BarChart(title: "Sales", 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/bio-play.muten

@@ -1,7 +1,7 @@
 # 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: "…")
+#   BioPlay(photo: "/owner.webp", handle: "brumabarberia", followers: "1,284 followers", bio: "Cortes y barba.",
+#           link: "storio.ink/bruma-barberia", follow: "Follow", message: "Message", 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) {

package/registry/booking-play.muten

@@ -1,15 +1,15 @@
 # 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
+# loop (a day is picked, then an hour, “Book” 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") }
+#   BookingPlay(service: "Classic cut", place: "Bruma Barbershop · 30 min", price: "USD 15", cta: "Book",
+#               doneTitle: "Done, Carla!", doneText: "Classic cut · today · 4:30 PM", code: "STO-4F2K", label: "This is how your customer books") {
+#     BookingPlayDays { BookingPlayDay(weekday: "mon", day: "5", state: "off") … BookingPlayDay(weekday: "today", 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 = "") {
+part BookingPlay(service: text, photo: text = "", place: text = "", price: text = "", cta: text = "Book", 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") }

package/registry/booking.muten

@@ -4,10 +4,10 @@
 #   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».
+# "yyyy-mm-dd HH:MM" on “Continue”.
 # 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) {
+part Booking(week: list, taken: list, wait: number = 0, cta: text = "Continue", 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,9 +1,9 @@
 # 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") }
+# folds its middle into “…” (BreadcrumbEllipsis).
+#   Breadcrumb { BreadcrumbLink(label: "El Roble", to: "/")  BreadcrumbSeparator()  BreadcrumbLink(label: "Orders", 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 Breadcrumb(label: text = "Breadcrumb") { Nav class("cx-breadcrumb") data(slot: "breadcrumb", trl: $label) 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" } }
+part BreadcrumbEllipsis(label: text = "More pages") { Stack class("cn-breadcrumb-ellipsis cx-bc-more") data(slot: "breadcrumb-ellipsis", name: $label, trl: $label, trn: $label) aria(label: $label) { Icon "lucide:ellipsis" } }

package/registry/button.muten

@@ -1,9 +1,9 @@
 # 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" }
+# Put the label (and an icon) in the slot. Pressed, it drops 1px (as shadcn); icons stay still.
+#   Btn(onClick: save) { Span "Save" }
+#   Btn(variant: "outline", size: "sm", onClick: cancel) { Icon "lucide:x"  Span "Cancel" }
 #   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)
+#   Btn(onClick: go) class("cx-fill") { Span "Mark arrival"  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.
@@ -11,13 +11,15 @@
 # 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.
 # shape: "" | pill - fully rounded ends, for the one call to action at the foot of a flow (Btn(size: "2xl", shape: "pill")).
+# loading: a bool - a Spinner before the label, and the button can't be pressed meanwhile (aria-busy).
+#   Btn(loading: saving, onClick: save) { Span "Save" }
 # 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, disabled: bool = false, shape: text = "") {
-  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, shape: $shape) aria(label: $label) disabled when $disabled { slot }
+part Btn(variant: text = "default", size: text = "default", tone: text = "", label: text = "", onClick: action, disabled: bool = false, shape: text = "", loading: 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, shape: $shape, loading: $loading, trl: $label, trn: $label) aria(label: $label, busy: $loading) disabled when $disabled or $loading { slot  when $loading { Spinner() } }
 }
 # 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 { … } }
+#   DropdownMenu { DropdownTrigger { TriggerBtn { Span "Options"  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,29 +1,34 @@
 // 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.
+//         presets "reports" → Today · Last 7 days · This month · Last month beside a range
+//         caption "on" → the sentence under it (“You picked Thursday, October 8” / “From Oct 2 to Oct 8 · 7 days”)
+// lang (optional) es | en, else the nearest lang. 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 }) => {
+  import('@muten/shadcn/registry/kit/core.js').then((core) => core.relang(el, inputs, () => {
+    const { kit, ui, today, addDays, t, langOf } = core;
+    // the language: the one passed, else the nearest lang (the page's), English by default; repainted when it changes
+    const lang = inputs.lang || langOf(el), w = kit.words(lang), es = lang === 'es';
+    const fmtDay = (d) => (es ? `${d.getDate()} ${w.mon[d.getMonth()].slice(0, 3)}` : `${w.mon[d.getMonth()].slice(0, 3)} ${d.getDate()}`);
     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 sayOne = (d) => (d ? (es ? t(lang, 'You picked {0}, {1}', w.dayL[d.getDay()].toLowerCase(), `${d.getDate()} de ${w.mon[d.getMonth()]}`) : t(lang, 'You picked {0}, {1}', w.dayL[d.getDay()], `${w.mon[d.getMonth()]} ${d.getDate()}`)) : '');
+    const sayRange = (r) => (r?.[0] && r?.[1] ? t(lang, 'From {0} to {1} · {2} days', fmtDay(r[0]), fmtDay(r[1]), Math.round((r[1] - r[0]) / 864e5) + 1) : r?.[0] ? t(lang, 'From {0}: pick the last day', fmtDay(r[0])) : '');
     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 PRESETS = [[t(lang, 'Today'), () => [today, today]], [t(lang, 'Last 7 days'), () => [addDays(today, -6), today]], [t(lang, 'This month'), () => [new Date(today.getFullYear(), today.getMonth(), 1), today]], [t(lang, 'Last month'), () => [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,
+    cal = kit.calendar(el.querySelector('[data-cal]'), { ...kit.calWords(lang), 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); });
-  });
+    // on the presets' own box (made again on a repaint), so a repaint never stacks a second listener
+    el.querySelector('.cx-range-presets')?.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 () => {};
 }

package/registry/calendar.muten

@@ -2,7 +2,7 @@
 # onSelect gets "yyyy-mm-dd" (single) or "from/to" (range).
 #   Calendar(selected: "today", min: "today", caption: "on", onSelect: pickDay)
 #   Calendar(selected: "-6/0", mode: "range", months: 2, presets: "reports", caption: "on", onSelect: pickRange)
-# selected/min take dates or days from today ("today", "-6/0"). presets "reports" adds Hoy · Últimos 7 días · Este
+# selected/min take dates or days from today ("today", "-6/0"). presets "reports" adds Today · Last 7 days · This
 # mes · Mes pasado beside a range; caption "on" writes what was chosen under it.
 # shadcn-for-muten · Custom (kit core) · host JS is calendar.js.
 part Calendar(selected: text = "", mode: text = "single", months: number = 1, min: text = "", presets: text = "", caption: text = "", onSelect: action) {

package/registry/card.muten

@@ -1,6 +1,6 @@
 # Card - a surface that only CONVEYS: header (title, description, an action at the corner), content, footer.
 # Decisions go in a modal, not on the card.
-#   Card(size: "sm") { CardHeader { CardTitle(label: "Hoy")  CardDescription(label: "3 citas")  CardAction { Btn(variant: "ghost", size: "icon-sm", onClick: more) { Icon "lucide:ellipsis" } } }  CardContent { … } }
+#   Card(size: "sm") { CardHeader { CardTitle(label: "Today")  CardDescription(label: "3 appointments")  CardAction { Btn(variant: "ghost", size: "icon-sm", onClick: more) { Icon "lucide:ellipsis" } } }  CardContent { … } }
 # size: default | sm (compact: items edge to edge)
 # shadcn-for-muten · part · no deps · Nova (.cn-card) + kit.css (size sm).
 part Card(size: text = "default") { Section class("cn-card group/card") data(slot: "card", size: $size) { slot } }

package/registry/carousel.muten

@@ -2,7 +2,7 @@
 #   perView "4" or "2,4" (phone, wider) · center "on" (the active one centred, neighbours peeking) · loop "on" ·
 #   autoplay ms (pauses on hover, focus, touch, hidden tab; off with reduced motion; its own pause button) ·
 #   indicator dots | progress | count | thumbs · arrows bar | overlay
-#   Carousel(label: "Productos", perView: "2,4") { each products as p { CarouselSlide { … } } }
+#   Carousel(label: "Products", perView: "2,4") { each products as p { CarouselSlide { … } } }
 # shadcn-for-muten · part + Custom (CarouselBehavior, kit collections) · kit.css (.cx-car).
 part Carousel(label: text, perView: text = "1", center: text = "", loop: text = "", autoplay: number = 0, indicator: text = "dots", arrows: text = "bar") {
   Section class("cx-car") aria(label: $label, roledescription: "carrusel") {

package/registry/chat-play.muten

@@ -1,13 +1,13 @@
 # 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: "…") {
+#   ChatPlay(title: "Bruma Barbershop", status: "Assistant · online", placeholder: "Write a message", label: "…") {
 #     ChatPlayLog {
-#       ChatPlayMsg(text: "Hola, ¿tienes hora hoy?", who: "in", step: 1)
+#       ChatPlayMsg(text: "Hi, do you have a slot today?", 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)
+#       ChatPlayCard(title: "Classic cut", text: "Today · 4:30 PM", step: 5)
 #     }
-#     ChatPlayChips { ChatPlayChip(label: "¿Cuánto cuesta?") … }
+#     ChatPlayChips { ChatPlayChip(label: "How much is it?") … }
 #   }
 # 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.
@@ -15,7 +15,7 @@
 # (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
+# (Telegram draws them as its keyboard, two per row), and ChatPlayNote adds “Seen” 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.
 # face: "" (the kit's two-dot face) | host - an empty face slot (.cx-cp-face-host) for the page's own face, a brand
@@ -47,7 +47,7 @@ part ChatPlay(title: text, status: text = "", placeholder: text = "", label: tex
       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-menu") { Icon "lucide:menu"  Span "Menu" data(tr: "Menu") }
       Stack class("cx-cp-send") { Icon "lucide:send-horizontal" }
       Stack class("cx-cp-mic") { Icon "lucide:mic" }
     }
@@ -65,9 +65,9 @@ part ChatPlayMsg(text: text, who: text = "out", step: number = 1, time: text = "
   }
 }
 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».
+# The start of a conversation as Instagram shows it: the person's photo (ChatPlay's `photo`), name, handle and “See profile”.
 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»).
+# A small line under a message: Instagram's “Seen”, or who answered (“Bruma's assistant answered”).
 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}" } }

package/registry/chatbot.muten

@@ -1,9 +1,10 @@
-# Chatbot - the assistant: greets, offers suggestions, «thinks», writes the answer live (with Stop), can carry an
+# Chatbot - the assistant: greets, offers suggestions, “thinks”, writes the answer live (with Stop), can carry an
 # action button inside the answer (onAction gets its label), rated with 👍 / 👎. answers: {match (regex), text, action,
 # primary}; the one without match is the fallback.
-#   Chatbot(title: "Rober", greeting: "Hola, soy Rober…", suggestions: @ideas, answers: @answers, onAction: act)
+#   Chatbot(title: "Rober", greeting: "Hi, I'm Rober…", suggestions: @ideas, answers: @answers, onAction: act)
+# avatar: an image, a logo or a GIF url in place of the drawn face (“/logo.svg”, “/rober.gif”).
 # demo "on": it taps its own suggestions in turn and answers them live, for a landing; the first touch stops it.
 # shadcn-for-muten · part over KitWidget (kit core).
-part Chatbot(title: text, greeting: text, suggestions: list, answers: list, demo: text = "", onAction: action) {
-  Custom KitWidget inputs(name: "chatbot", title: $title, greeting: $greeting, suggestions: $suggestions, answers: $answers, demo: $demo) on(action: $onAction) class("cx-bot")
+part Chatbot(title: text, greeting: text, suggestions: list, answers: list, demo: text = "", avatar: text = "", onAction: action) {
+  Custom KitWidget inputs(name: "chatbot", title: $title, greeting: $greeting, suggestions: $suggestions, answers: $answers, demo: $demo, avatar: $avatar) on(action: $onAction) class("cx-bot")
 }

package/registry/checklist.muten

@@ -1,5 +1,5 @@
 # Checklist - first steps with progress: done steps checked, the next ones with their action (onAction gets its label).
-#   Checklist(title: "Tu tienda en 5 pasos", steps: @steps, onAction: act)     steps: {title, desc, done, action}
+#   Checklist(title: "Your shop in 5 steps", steps: @steps, onAction: act)     steps: {title, desc, done, action}
 # shadcn-for-muten · part over KitWidget (kit core).
 part Checklist(title: text, steps: list, onAction: action) {
   Custom KitWidget inputs(name: "checklist", title: $title, steps: $steps) on(action: $onAction) class("cx-onboard")