@muten/shadcn 0.1.1 → 0.1.3

package/registry/kit/structure.js

@@ -13,7 +13,7 @@ const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<
 export function phoneShell(root, i, core, on) {
   const { $, $$ } = core;
   const tabs = list(i.tabs), rows = list(i.rows);
-  root.innerHTML = `<div class="cx-phone-frame"><div class="cx-ph-screen">
+  root.innerHTML = `<div class="cx-device cx-ph-device" data-kind="phone"><div class="cx-device-screen"><div class="cx-ph-screen">
     <div class="cx-ph-status"><span>9:41</span><span class="cx-ph-island"></span><span>100 %</span></div>
     <header class="cx-ph-head"><div class="cx-ph-bar">
       <button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon group/button" aria-label="Atrás" title="Atrás"><svg><use href="#left"/></svg></button>
@@ -22,7 +22,7 @@ export function phoneShell(root, i, core, on) {
     </div></header>
     <div class="cx-ph-body cx-scroll"></div>
     <nav class="cx-ph-nav" aria-label="Principal">${tabs.map((t, k) => `<button class="cn-button cn-button-variant-ghost cx-size-tile cx-ph-tab" data-tab="${k}" ${k === 0 ? 'aria-current="page"' : ''}>${t.badge ? `<span class="cx-ph-ico"><svg><use href="#${t.icon}"/></svg><i class="cx-ph-badge">${esc(t.badge)}</i></span>` : `<svg><use href="#${t.icon}"/></svg>`}<span>${esc(t.label)}</span></button>`).join('')}</nav>
-  </div></div>`;
+  </div></div></div>`;
   const head = $('.cx-ph-head', root), phBody = $('.cx-ph-body', root);
   const screen = (label) => {
     const mine = rows.filter((r) => r.tab === label);
@@ -299,7 +299,7 @@ export function booking(root, i, core, on) {
       b.setAttribute('aria-pressed', !!picked.day && key(d) === key(picked.day));
       // the name starts with what the tile shows («vie 9»), so a voice user can say it; the long day and the state follow
       b.setAttribute('aria-label', `${key(d) === key(today) ? 'hoy' : DAY[d.getDay()]} ${d.getDate()}, ${DAYLONG[d.getDay()]}${s === null ? ', cerrado' : s.length ? `, ${s.length} horarios` : ', sin horarios'}`);
-      b.innerHTML = `<small>${key(d) === key(today) ? 'hoy' : DAY[d.getDay()]}</small><b>${d.getDate()}</b><i></i>`;
+      b.innerHTML = `<small>${key(d) === key(today) ? 'hoy' : DAY[d.getDay()]}</small> <b>${d.getDate()}</b><i></i>`;
       b.onclick = () => pickDay(d);
       weekEl.appendChild(b);
     }

package/registry/kit-widget.js

@@ -36,7 +36,7 @@ export function mount(el, inputs, on) {
     cardField: ({ kit }) => kit.cardField(el, { onSubmit: (x) => on.action?.(JSON.stringify(x || {})) }),
     memberList: ({ kit }, i) => kit.memberList(el, { members: list(i.members), roles: list(i.roles), ownerRole: i.owner || '', noun: [i.one || 'persona', i.many || 'personas'], invite: { cta: i.cta || 'Invitar', title: i.cta || 'Invitar', description: i.note || '' } }),
     permissionMatrix: ({ kit }, i) => kit.permissionMatrix(el, { roles: list(i.roles).map((r) => r.name ?? r), rows: list(i.rows), lockedRole: i.locked || '', onChange: (rows) => on.action?.(JSON.stringify(rows)) }),
-    stampCard: ({ kit }, i) => kit.stampCard(el, { store: i.store || '', owner: i.owner || '', total: Number(i.total) || 10, stamps: Number(i.stamps) || 0, reward: i.reward || '' }),
+    stampCard: ({ kit }, i) => kit.stampCard(el, { store: i.store || '', owner: i.owner || '', total: Number(i.total) || 10, stamps: Number(i.stamps) || 0, reward: i.reward || '', ...Object.fromEntries(['title', 'progress', 'complete', 'count', 'redeem', 'stamp'].filter((k) => i[k]).map((k) => [k, i[k]])) }),
     bell: ({ kit }, i) => kit.bell(el, { items: list(i.items) }),
     queue: ({ kit }, i) => kit.queue(el, { title: i.title || '', people: list(i.people), offerMinutes: Number(i.minutes) || 10 }),
     password: ({ kit }, i) => kit.password(el, { label: i.label || 'Contraseña' }),

package/registry/legal-doc.muten

@@ -0,0 +1,27 @@
+# Legal document - the pages a business must have (terms, privacy, data deletion), the way Storio's site writes them:
+# the title and its line, then two columns, the contents (they follow the reading: the section on screen is marked)
+# and the text at reading width, each section titled «N. Title». On a phone the contents become a row that slides.
+#   DocHead(title: "Términos y condiciones") { Text "Última actualización: 7 de octubre de 2026" class("cx-doc-line") }
+#   DocBody {
+#     DocToc(label: "Contenido") { DocTocLink(label: "1. Quiénes somos", to: "#s1")  DocTocLink(label: "2. Tus datos", to: "#s2") }
+#     DocArticle { DocSection(anchor: "s1", title: "1. Quiénes somos") { Text "Storio es un producto de Candhrly LLC." class("cx-doc-p") } }
+#   }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-doc-*).
+part DocHead(title: text) {
+  Section class("cx-mk-col cx-doc-head") {
+    Title "{$title}" h1 class("cx-mk-h1 cx-mk-h1-wrap cx-doc-h1")
+    slot
+  }
+}
+part DocBody() { Section class("cx-mk-col cx-doc-body") { slot } }
+part DocToc(label: text = "Contenido") { Stack class("cx-navbar cx-doc-toc") data(orientation: "vertical", spy: "on") aria(role: "navigation", label: $label) { slot } }
+part DocTocLink(label: text, to: text) {
+  Link "{$label}" -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-nav cx-doc-toc-item") data(slot: "button", marker: "fill")
+}
+part DocArticle() { Stack class("cx-doc-article") { slot } }
+part DocSection(anchor: text, title: text) {
+  Stack class("cx-doc-sec") id("{$anchor}") {
+    Title "{$title}" h2 class("cx-doc-h2")
+    slot
+  }
+}

package/registry/modal-behavior.js

@@ -33,6 +33,17 @@ export function mount(el, inputs, on) {
     if (pushed) { pushed = false; history.back(); }
   };
   mdl.tabIndex = -1;
+  // A link inside (a menu in a drawer): close first, then go. Closing undoes the history entry the modal pushed, and
+  // doing that after the link's own navigation would take the person straight back to where they were.
+  mdl.addEventListener('click', (e) => {
+    const a = e.target.closest('a[href]');
+    if (!a || !isOpen || !pushed || a.target || e.defaultPrevented || e.button > 0 || e.metaKey || e.ctrlKey || e.shiftKey) return;
+    const url = new URL(a.getAttribute('href'), location.href); if (url.origin !== location.origin) return;
+    e.preventDefault(); e.stopPropagation();
+    const go = () => { removeEventListener('popstate', go); history.pushState({ muDepth: (history.state?.muDepth ?? 0) + 1 }, '', url.pathname + url.search + url.hash); dispatchEvent(new PopStateEvent('popstate')); };
+    pushed = false; addEventListener('popstate', go);
+    close(); history.back();
+  }, true);
   addEventListener('popstate', () => { if (isOpen) { pushed = false; close(); } });
   document.addEventListener('keydown', (e) => {
     if (!isOpen) return;

package/registry/modal.muten

@@ -20,7 +20,7 @@ part Modal(open: bool, onClose: action, title: text = "", description: text = ""
         Span "{$title}" class("cx-modal-title")
         Span "{$description}" class("cx-modal-desc")
       }
-      when $dismiss != "off" { Button -> $onClose class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button cx-modal-x") aria(label: "Cerrar") { Icon "lucide:x" } }
+      when $dismiss != "off" { Btn(variant: "ghost", size: "icon-sm", label: "Cerrar", onClick: $onClose) class("cx-modal-x") { Icon "lucide:x" } }
       Stack class("cx-modal-body") { slot }
       ModalBehavior(open: $open, onClose: $onClose)
     }

package/registry/order-play.muten

@@ -0,0 +1,33 @@
+# OrderPlay - an order shown, not used: who ordered, the products with their photos, how it is paid and delivered,
+# and the one next step. In a loop the step is pressed and the order moves on (its badge and the button change).
+# BookingPlay's twin, for a landing's bento: the same sheet, the same rhythm. The real board is OrderBoard.
+#   OrderPlay(who: "Diego Paredes", sub: "#1046 · hace 2 min", status: "Nuevo", statusNext: "Preparando",
+#             pay: "Efectivo al retirar", total: "USD 32", delivery: "Retira hoy · 6:00 PM", cta: "Preparar",
+#             ctaNext: "Avisar que está listo", label: "Un pedido como te llega") {
+#     OrderPlayItem(name: "Pomada mate", detail: "1 × USD 14", price: "USD 14", photo: "/img/pomada.webp")
+#   }
+# photo: the client's face (empty = their initial).
+# Reduced motion: the order as it arrives. shadcn-for-muten · part · no deps · kit.css (.cx-odp).
+part OrderPlay(who: text, photo: text = "", sub: text = "", status: text = "", statusNext: text = "", pay: text = "", total: text = "", delivery: text = "", cta: text = "", ctaNext: text = "", label: text = "") {
+  Stack class("cx-odp cx-play") aria(role: "img", label: $label) {
+    Stack class("cx-odp-who") aria(hidden: true) {
+      when $photo != "" { Image "{$photo}" alt("") class("cx-odp-av cx-play-face") }
+      when $photo == "" { Span "{initial($who)}" class("cx-odp-av") }
+      Stack class("cx-odp-name") { Span "{$who}" class("cx-odp-t")  Span "{$sub}" class("cx-odp-s") }
+      when $status != "" { Stack class("cx-odp-badge") data(next: $statusNext != "") { Span "{$status}" class("cx-odp-b1")  Span "{$statusNext}" class("cx-odp-b2") } }
+    }
+    Stack class("cx-odp-items") aria(hidden: true) { slot }
+    Stack class("cx-odp-rows") aria(hidden: true) {
+      Stack class("cx-odp-row") { Icon "lucide:wallet"  Span "{$pay}" class("cx-odp-rt")  Span "{$total}" class("cx-odp-total") }
+      Stack class("cx-odp-row") { Icon "lucide:store"  Span "{$delivery}" class("cx-odp-rt") }
+    }
+    Stack class("cx-odp-go") data(next: $ctaNext != "") aria(hidden: true) { Span "{$cta}" class("cx-odp-g1")  Span "{$ctaNext}" class("cx-odp-g2") }
+  }
+}
+part OrderPlayItem(name: text, detail: text = "", price: text = "", photo: text = "") {
+  Stack class("cx-odp-item") {
+    when $photo != "" { Image "{$photo}" alt("") class("cx-odp-ph") }
+    Stack class("cx-odp-name") { Span "{$name}" class("cx-odp-t")  Span "{$detail}" class("cx-odp-s") }
+    Span "{$price}" class("cx-odp-price")
+  }
+}

package/registry/permission-matrix.muten

@@ -1,6 +1,32 @@
-# PermissionMatrix - any rows × any roles; one role can be locked (always allowed).
-#   PermissionMatrix(roles: @roleNames, rows: @permissions, locked: "Propietario", onChange: savePerms)   rows: {name, description, allow [1,0,…]}
-# shadcn-for-muten · part over KitWidget (kit core).
-part PermissionMatrix(roles: list, rows: list, locked: text = "", onChange: action) {
-  Custom KitWidget inputs(name: "permissionMatrix", roles: $roles, rows: $rows, locked: $locked) on(action: $onChange) class("cx-perms")
+# PermissionMatrix - what each role may do: any permissions (rows) × any roles (columns), a checkbox where they meet, one
+# role locked (always allowed). A real table (muten's Table / Row / Cell): the header names line up over their column and
+# every checkbox sits in the middle of its cell. On a phone the columns narrow; the table scrolls sideways if it must.
+# The grants are a list of "permission:role" keys, so the page flips one with `toggle`:
+#   state  { granted = ["Ver:Editor", "Ver:Lector", "Editar:Editor"] : list<text> }
+#   action flip(key: text) mutates granted { granted.toggle(key) }
+#   PermissionMatrix(roles: @roles, rows: @permissions, granted: granted, locked: "Propietario", onToggle: flip)
+# roles {name} · rows {name, description}. label names the first column.
+# shadcn-for-muten · part · no deps · kit.css (.cx-perm).
+part PermissionMatrix(roles: list, rows: list, granted: list, locked: text = "", label: text = "Permiso", onToggle: action) {
+  Stack class("cx-dt-scroll cx-scroll cx-perms") {
+    Table class("cx-dt cx-perm") {
+      Row head {
+        Cell "{$label}"
+        each $roles as role { Cell "{role.name}" class("cx-perm-c") }
+      }
+      each $rows as perm {
+        Row {
+          Cell {
+            Span "{perm.name}" class("cx-perm-name")
+            Span "{perm.description}" class("cx-perm-desc")
+          }
+          each $roles as role {
+            Cell class("cx-perm-c") {
+              Checkbox checked(role.name == $locked or $granted contains perm.name + ":" + role.name) -> $onToggle(perm.name + ":" + role.name) disabled when role.name == $locked aria(label: role.name + ": " + perm.name)
+            }
+          }
+        }
+      }
+    }
+  }
 }

package/registry/phone-bar.muten

@@ -0,0 +1,18 @@
+# PhoneBar - the app's bar at the bottom of a phone, the shape Storio's app uses: three fixed cells. The left one holds
+# the menu (or a back), the middle one the screen's tools as grey icons, the right one the screen's «create» (black),
+# or nothing. A screen whose buttons live in its own toolbar on a desktop hands them here on a phone (AgendaLive with
+# phone: "nav" does), so the page stays clean and the hand finds them in the same place on every screen.
+#   PhoneBar(label: "Agenda") {
+#     PhoneBarCell(side: "left") { PhoneBarButton(label: "Menú", onClick: openMenu) { Icon "lucide:menu" } }
+#     PhoneBarCell() { PhoneBarButton(label: "Día anterior", onClick: prev) { Icon "lucide:chevron-left" } … }
+#     PhoneBarCell(side: "right") { PhoneBarButton(label: "Nueva cita", look: "primary", onClick: add) { Icon "lucide:plus" } }
+#   }
+# place: "" (fixed to the bottom of the screen, only below 64rem: a desktop keeps its toolbars) · "inline" (where it
+# sits, always) · "frame" (the bottom of its positioned box: a phone mockup). The page's scroll keeps room for it with
+# padding-bottom: var(--cx-pbar-space). Every button needs its label: icon-only on screen, named for a screen reader.
+# shadcn-for-muten · part · no deps · kit.css (.cx-pbar).
+part PhoneBar(label: text = "Acciones", place: text = "") { Nav class("cx-pbar") data(place: $place) aria(label: $label) { slot } }
+part PhoneBarCell(side: text = "center") { Stack class("cx-pbar-cell") data(side: $side) { slot } }
+part PhoneBarButton(label: text = "", onClick: action, look: text = "", current: bool = false) {
+  Button -> $onClick class("cx-pbar-btn") data(look: $look) aria(label: $label, pressed: $current) { slot }
+}

package/registry/phone-shell.muten

@@ -3,7 +3,7 @@
 # on --selected with its dot; a count never changes the width). Respects the phone's safe area.
 #   PhoneShell(tabs: @tabs, rows: @rows, onSelect: pickTab)
 # tabs {label, icon, badge} · rows {tab, section, title, subtitle, value}: each tab's screen is its rows, grouped by section.
-# shadcn-for-muten · Custom (kit/structure.js) · kit.css (.cx-phone-frame, .cx-ph-*).
+# Drawn inside the library phone (DeviceFrame's rule). shadcn-for-muten · Custom (kit/structure.js) · kit.css (.cx-ph-*).
 part PhoneShell(tabs: list, rows: list, onSelect: action) {
   Custom PhoneShell inputs(tabs: $tabs, rows: $rows) on(select: $onSelect) class("cx-ph-host")
 }

package/registry/product-play.muten

@@ -0,0 +1,20 @@
+# ProductPlay - a product sheet shown, not used: the photo, the shop, the name with its price, a line about it, its
+# options (one picked) and the quantity beside «Agregar». For a landing; a picture (aria-hidden), `label` says what.
+#   ProductPlay(photo: "/pomade.webp", shop: "Bruma Barbería", name: "Pomada mate", price: "USD 14",
+#               text: "Fijación media.", cta: "Agregar · USD 14", label: "…") {
+#     ProductPlayOption(label: "50 g")  ProductPlayOption(label: "100 g", on: "yes")
+#   }
+# shadcn-for-muten · part · no deps · kit.css (.cx-pdp).
+part ProductPlay(photo: text, shop: text, name: text, price: text, text: text = "", cta: text, label: text = "") {
+  Stack class("cx-pdp cx-play") aria(role: "img", label: $label) {
+    Image "{$photo}" alt("") class("cx-pdp-img")
+    Stack class("cx-pdp-in") aria(hidden: true) {
+      Span "{$shop}" class("cx-pdp-k")
+      Stack class("cx-pdp-t") { Span "{$name}"  Span "{$price}" }
+      Span "{$text}" class("cx-pdp-d")
+      Stack class("cx-pdp-opts") { slot }
+      Stack class("cx-pdp-go") { Stack class("cx-pdp-q") { Icon "lucide:minus"  Span "1"  Icon "lucide:plus" }  Span "{$cta}" class("cx-pdp-add") }
+    }
+  }
+}
+part ProductPlayOption(label: text, on: text = "") { Span "{$label}" class("cx-pdp-opt") data(on: $on) }

package/registry/progress.muten

@@ -1,7 +1,10 @@
 # Progress - a determinate bar, value 0-100; it eases between values.  Progress(value: done, label: "Pasos hechos")
+# tone: the bar's colour from the series palette: brand (the skin's accent) | coral | teal | amber | blue | pink. Empty: the
+# primary colour. A row of channels or a ranking is a Progress per row, each in its tone.
+#   Progress(value: 46, tone: "coral", label: "Instagram")
 # shadcn-for-muten · part · no deps · Nova (.cn-progress) + kit.css (the value rides --w).
-part Progress(value: number, label: text = "Progreso") {
-  Stack class("cn-progress") data(slot: "progress") aria(role: "progressbar", label: $label, valuemin: 0, valuemax: 100, valuenow: $value) {
+part Progress(value: number, label: text = "Progreso", tone: text = "") {
+  Stack class("cn-progress") data(slot: "progress", tone: $tone) aria(role: "progressbar", label: $label, valuemin: 0, valuemax: 100, valuenow: $value) {
     Stack class("cn-progress-indicator") data(slot: "progress-indicator") style(w: "{$value}%")
   }
 }

package/registry/rank-item.muten

@@ -0,0 +1,32 @@
+# RankItem - one row of a ranking or a short list of things to act on: a lead (the rank «1», or a count «13»), the title
+# with an optional tag, a line under it, an optional bar for its share, and the value on the right. Whatever goes in
+# the slot sits at the end of the row (an action: «Agregar», «Responder»).
+#   RankItem(lead: "1", title: "Corte clásico", tag: "Servicio", sub: "38 veces", value: "USD 760", share: 100)
+#   RankItem(lead: "13", title: "«tinte»", sub: "No está entre tus servicios") { Btn(variant: "outline", size: "sm", onClick: addService) { Span "Agregar" } }
+# share: 0-100 draws a Progress under the title (leave it at -1 for none). tone: the bar's colour (series palette).
+# busy: true keeps the row's shape with a skeleton.
+# shadcn-for-muten · part · no deps · kit.css (.cx-rank) + Item, Badge, Progress.
+part RankItem(lead: text, title: text = "", tag: text = "", sub: text = "", value: text = "", share: number = -1, tone: text = "brand", busy: bool = false) {
+  Stack class("cn-item cn-item-variant-default cn-item-size-sm cx-rank") data(slot: "item", size: "sm", busy: $busy) {
+    Stack class("cn-item-media cn-item-media-variant-icon cx-rank-lead") data(slot: "item-media", variant: "icon") { Span "{$lead}" }
+    Stack class("cn-item-content cx-rank-mid") data(slot: "item-content") {
+      when $busy {
+        Skeleton() class("cx-rank-sk-t")
+        Skeleton() class("cx-rank-sk-s")
+      }
+      when not $busy {
+        Stack class("cx-rank-t") {
+          Span "{$title}" class("cn-item-title") data(slot: "item-title")
+          when $tag != "" { Span "{$tag}" class("cn-badge cn-badge-variant-secondary group/badge") data(slot: "badge") }
+        }
+        Text "{$sub}" class("cn-item-description cx-rank-sub") data(slot: "item-description")
+        when $share >= 0 { Progress(value: $share, label: $title, tone: $tone) }
+      }
+    }
+    Stack class("cn-item-actions cx-rank-end") data(slot: "item-actions") {
+      when $busy { Skeleton() class("cx-rank-sk-v") }
+      when not $busy { Span "{$value}" class("cx-rank-v") }
+      slot
+    }
+  }
+}

package/registry/screen-tour.js

@@ -0,0 +1,59 @@
+// ScreenTour (muten Custom) - steps beside a phone that plays them on real captures (see screen-tour.muten).
+const SCROLL_MS = 1800;
+export function mount(el, inputs) {
+  if (typeof window === 'undefined') return undefined;
+  const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  let tracks = [], track = 0, index = 0, timer = 0, manual = false, live = false, label = '', width = '300px';
+  const paint = () => {
+    const t = tracks[track] || { steps: [] };
+    const shots = [...new Set(t.steps.map((s) => s.shot).filter(Boolean))];
+    const d = t.done || null;
+    el.style.setProperty('--tour-w', width);
+    el.innerHTML = `${tracks.length > 1 ? `<div class="cx-tabs cx-tour-tabs" data-fill="phone" role="tablist" aria-label="${esc(label)}">${tracks.map((x, i) => `<button type="button" role="tab" class="cn-button cn-button-variant-ghost cn-button-size-sm cx-tab" aria-selected="${i === track}" data-track="${i}">${esc(x.label)}</button>`).join('')}</div>` : ''}
+<div class="cx-tour-body">
+  <ol class="cx-stepper cx-stp cx-tour-steps" data-orientation="vertical" data-look="list" style="--n:${t.steps.length}">${t.steps.map((s, i) => `<li class="cx-step cx-stp-step" data-step="${i}"><button type="button" class="cx-tour-hit" aria-label="${i + 1}. ${esc(s.title)}"></button><div class="cn-progress cx-stp-bar"><div class="cn-progress-indicator"></div></div><div class="cx-stp-dot"><span class="cx-stp-num">${i + 1}</span><svg class="cx-stp-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div><div class="cx-stp-text"><span class="cx-text cx-stp-label">${esc(s.title)}</span><div class="cx-tour-desc"><p class="cx-stp-desc">${esc(s.text)}</p></div></div></li>`).join('')}</ol>
+  <div class="cx-device cx-tour-phone" data-kind="phone" data-sized="true" style="--w:${esc(width)}"><div class="cx-device-screen cx-tour-screen">${shots.map((src, i) => `<img src="${esc(src)}" alt="" data-shot="${esc(src)}" ${i === 0 ? 'data-long' : ''} loading="lazy" decoding="async">`).join('')}<span class="cx-tour-tap" aria-hidden="true"></span>${d ? `<div class="cx-tour-done"><div class="cx-tour-sheet"><span class="cx-tour-grab"></span><span class="cx-tour-ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><b class="cx-tour-dt">${esc(d.title)}</b><div class="cx-tour-rows">${(d.rows || []).map(([k, v]) => `<div><span>${esc(k)}</span><b>${esc(v)}</b></div>`).join('')}</div>${d.code ? `<div class="cx-tour-pass"><span>${esc(d.codeLabel || '')}</span><b>${esc(d.code)}</b></div>` : ''}${d.note ? `<p class="cx-tour-note">${esc(d.note)}</p>` : ''}</div></div>` : ''}</div></div>
+</div>`;
+    el.setAttribute('aria-label', label);
+  };
+  const $ = (s) => el.querySelector(s);
+  const show = (next) => {
+    const t = tracks[track]; if (!t || !t.steps.length) return;
+    index = next; const step = t.steps[index];
+    el.querySelectorAll('.cx-tour-steps > li').forEach((li, i) => {
+      li.dataset.state = i === index ? 'now' : i < index ? 'done' : '';
+      li.style.setProperty('--dur', manual || still ? '0s' : (step.ms || 3200) / 1000 + 's');
+      const hit = li.querySelector('.cx-tour-hit'); if (hit) { if (i === index) hit.setAttribute('aria-current', 'step'); else hit.removeAttribute('aria-current'); }
+    });
+    el.querySelectorAll('.cx-tour-screen > img').forEach((img) => { img.dataset.on = img.dataset.shot === step.shot ? '1' : ''; });
+    const long = $('.cx-tour-screen > img[data-long]');
+    if (long) {
+      // the long first page scrolls down on its own; its fade stays the stylesheet's, so it never snaps
+      if (step.scroll && !still) {
+        long.style.transition = 'opacity 480ms cubic-bezier(.23,1,.32,1)'; long.style.transform = 'translateY(0)'; void long.offsetWidth;
+        long.style.transition = `opacity 480ms cubic-bezier(.23,1,.32,1), transform ${SCROLL_MS}ms cubic-bezier(.65,0,.35,1) 500ms`;
+        long.style.transform = `translateY(-${step.scroll}%)`;
+      } else if (index === 0) { long.style.transition = ''; long.style.transform = 'translateY(0)'; }
+      else long.style.transition = 'opacity 480ms cubic-bezier(.23,1,.32,1)';
+    }
+    const done = $('.cx-tour-done'); if (done) done.dataset.on = step.done ? '1' : '';
+    const tap = $('.cx-tour-tap');
+    if (tap) { tap.removeAttribute('data-go'); if (step.tap && !still && !manual) { tap.style.left = step.tap[0] + '%'; tap.style.top = step.tap[1] + '%'; tap.style.animationDelay = step.scroll ? SCROLL_MS + 700 + 'ms' : ''; void tap.offsetWidth; tap.setAttribute('data-go', ''); } }
+    clearTimeout(timer);
+    if (!manual && !still && live) timer = setTimeout(() => show((index + 1) % t.steps.length), step.ms || 3200);
+  };
+  const pick = (i) => { track = i; manual = false; paint(); show(0); };
+  el.addEventListener('click', (e) => {
+    const tab = e.target.closest('[data-track]'); if (tab) { pick(+tab.dataset.track); return; }
+    const li = e.target.closest('.cx-tour-steps > li'); if (li) { manual = true; show(+li.dataset.step); }
+  });
+  const io = 'IntersectionObserver' in window ? new IntersectionObserver((entries) => {
+    const on = entries[0].isIntersecting;
+    if (on && !live) { live = true; if (!manual) show(index); } else if (!on && live) { live = false; clearTimeout(timer); }
+  }, { threshold: 0.45 }) : null;
+  const set = (next) => { tracks = Array.isArray(next.tracks) ? next.tracks : []; label = next.label || ''; width = next.width || '300px'; if (track >= tracks.length) track = 0; paint(); show(index < ((tracks[track] || {}).steps || []).length ? index : 0); };
+  set(inputs || {});
+  if (io) io.observe(el); else { live = true; show(0); }
+  return (next) => set(next || {});
+}

package/registry/screen-tour.muten

@@ -0,0 +1,10 @@
+# ScreenTour - how a product is used, played on its real screens: numbered steps on one side, a phone on the other
+# that shows each step's capture, a tap where the finger would land, and at the end the sheet that confirms it. It
+# moves on by itself while it is on screen (each step's bar fills for its time); touching a step goes to it and stays.
+# Several tracks (book · order) get the library's tabs on top. Reduced motion: the first step, still; steps still work.
+#   ScreenTour(tracks: tour, label: "Así te reservan")      tour = a getter or a state list
+# tracks [{id, label, steps: [{title, text, shot, tap: [x%, y%], ms, scroll (% of the capture's height), done}],
+#          done: {title, rows: [[label, value]], code, codeLabel, note}}]
+# shot: an image url (a long capture can scroll: give the first step `scroll`). A step with done: true shows the sheet.
+# shadcn-for-muten · Custom · kit.css (.cx-tour) · host JS screen-tour.js.
+part ScreenTour(tracks: list, label: text = "", width: text = "300px") { Custom ScreenTour inputs(tracks: $tracks, label: $label, width: $width) class("cx-tour") }

package/registry/share-bar.muten

@@ -0,0 +1,22 @@
+# ShareBar - how one whole splits: a bar at 100 % cut into its parts, each in its tone, and under it each part's value
+# and name. Citas against pedidos, new clients against returning ones. All parts at 0 leave the empty track. busy: true
+# shows the bar and the values as a skeleton while they load.
+#   ShareBar(parts: split, label: "Ganado por tipo")
+# parts {label, value (a number: the part's weight), text (what is written: "USD 3.240", "28"), tone}
+# tone: brand | coral | teal | amber | blue | pink (the series palette; Chart and StackedBars use the same colours).
+# shadcn-for-muten · part · no deps · kit.css (.cx-split).
+part ShareBar(parts: list, label: text = "", busy: bool = false) {
+  Stack class("cx-split") data(busy: $busy) aria(busy: $busy) {
+    Stack class("cx-split-bar") aria(role: "img", label: $label) {
+      each $parts as part { Span "" class("cx-split-seg") data(tone: part.tone) style(f: "{part.value}") }
+    }
+    Stack class("cx-split-keys") {
+      each $parts as part {
+        Stack class("cx-split-key") {
+          Span "{part.text}" class("cx-split-v")
+          Span "{part.label}" class("cx-split-l") data(tone: part.tone)
+        }
+      }
+    }
+  }
+}

package/registry/sidebar.muten

@@ -6,6 +6,8 @@
 #     SidebarGroup(label: "Principal") { SidebarItem(label: "Agenda", value: "agenda", current: place, count: "14", onSelect: go) { Icon "lucide:calendar" } }
 #     SidebarFooter { … }
 #   }
+# SidebarLink is the same item as a link to a route: the app marks where you are by itself (no `current` to keep).
+#   SidebarLink(label: "Citas", to: "/schedule", count: "6") { Icon "lucide:calendar-days" }
 # The name AppSidebar avoids muten's own Sidebar primitive. shadcn-for-muten · parts · no deps · Nova (.cn-sidebar-*) + kit.css.
 part AppSidebar(collapsed: bool, label: text = "Menú") {
   Nav class("cx-sidebar") data(slot: "sidebar", collapsed: $collapsed) aria(label: $label) { Stack class("cn-sidebar-inner cx-sb-inner") data(slot: "sidebar-inner") { slot } }
@@ -25,3 +27,10 @@ part SidebarItem(label: text, value: text, current: text, onSelect: action, coun
     Span "{$count}" class("cn-sidebar-menu-badge cx-sb-count") data(slot: "sidebar-menu-badge")
   }
 }
+part SidebarLink(label: text, to: text, count: text = "") {
+  Link -> "{$to}" class("cn-sidebar-menu-button cn-sidebar-menu-button-variant-default cn-sidebar-menu-button-size-default cx-sb-item") data(slot: "sidebar-menu-button", name: $label) {
+    slot
+    Span "{$label}" class("cx-sb-label")
+    Span "{$count}" class("cn-sidebar-menu-badge cx-sb-count") data(slot: "sidebar-menu-badge")
+  }
+}

package/registry/site-footer.muten

@@ -0,0 +1,37 @@
+# SiteFooter - a site's footer, the one the Storio landing wears without its painting: the brand (logo and a line) with
+# the two ways in on one row over a hairline, then every group of links on one row, then a bar with the company and the
+# ways to reach it. On a phone the brand stacks, the groups go two by two and the bar stacks. Colours come from the
+# theme, so it sits on any skin, light or dark.
+#   SiteFooter {
+#     FooterHead {
+#       FooterBrand(tag: "Vende y agenda por ti.") { Link "" -> "/" aria(label: "Inicio") { Image "/logo.svg" alt("Storio") } }
+#       FooterActions { LinkBtn(to: "/login", variant: "outline") { Span "Entrar" }  LinkBtn(to: "/signup") { Span "Crear mi tienda" } }
+#     }
+#     FooterLinks {
+#       FooterCol(title: "Producto") { Link "Qué es" -> "/product"  Link "Precios" -> "/pricing" }
+#       FooterCol(title: "Legal") { Link "Términos" -> "/terms"  Link "Privacidad" -> "/privacy" }
+#     }
+#     FooterBar { Span "© 2026 Candhrly LLC"  Link "hello@storio.ink" -> "mailto:hello@storio.ink" }
+#   }
+# FooterCol(wide: "on") takes two columns of links on a phone and one long column on a desk (a long list, like trades).
+# The bar puts its first child on the left and the rest on the right.
+# shadcn-for-muten · part · no deps · kit.css (.cx-foot).
+part SiteFooter(label: text = "Pie de página") {
+  Footer class("cx-foot") aria(label: $label) { Stack class("cx-foot-in") { slot } }
+}
+part FooterHead() { Stack class("cx-foot-head") { slot } }
+part FooterBrand(tag: text = "") {
+  Stack class("cx-foot-brand") {
+    Stack class("cx-foot-logo") { slot }
+    Text "{$tag}" class("cx-foot-tag")
+  }
+}
+part FooterActions() { Stack class("cx-foot-doors") { slot } }
+part FooterLinks() { Stack class("cx-foot-grid") { slot } }
+part FooterCol(title: text, wide: text = "") {
+  Nav class("cx-foot-col") data(wide: $wide) aria(label: $title) {
+    Span "{$title}" class("cx-foot-h")
+    Stack class("cx-foot-links") { slot }
+  }
+}
+part FooterBar() { Stack class("cx-foot-bar") { slot } }

package/registry/stacked-bars.js

@@ -0,0 +1,75 @@
+// StackedBars (muten Custom) - bars over time with one or more series stacked in each (citas + pedidos by month), an
+// axis in the page's unit (USD 8K), a bar you can pick (it says so with aria-pressed and sends its id), a note over the
+// plot while there is nothing to show, and a skeleton while it loads. The data changes in place: the bars slide to their
+// new height, nothing blinks. inputs: rows [{id, label, <key>: number, …}], series [{key, label, tone}], selected,
+// unit ("USD", "$" or empty for plain numbers), locale, empty, emptyTitle, busy, readonly, label. on: pick(id).
+const NS = 'cx-stb';
+const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+const list = (v) => (Array.isArray(v) ? v : []);
+const SKELETON = [38, 52, 44, 61, 57, 70, 48, 66, 59, 74, 30, 22];
+
+// a round top for the axis: 4 steps of 1, 2, 2.5 or 5 × a power of ten
+const niceTop = (max) => {
+  if (max <= 0) return 4;
+  const rough = max / 4, mag = Math.pow(10, Math.floor(Math.log10(rough))), norm = rough / mag;
+  const step = (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 2.5 ? 2.5 : norm <= 5 ? 5 : 10) * mag;
+  return step * 4;
+};
+
+export function mount(el, inputs, on) {
+  let state = { ...inputs }, sel = inputs.selected ?? '', drawn = false;
+  const num = (locale) => new Intl.NumberFormat(locale || 'es', { useGrouping: 'always' });   // 1.800, not 1800 (es leaves 4 digits ungrouped)
+  // a word unit takes a space (USD 40), a symbol does not ($40)
+  const withUnit = (text, unit) => (!unit ? text : /^[A-Za-z]{2,}$/.test(unit) ? `${unit} ${text}` : `${unit}${text}`);
+  const fmt = (v, unit, locale) => withUnit(num(locale).format(v), unit);
+  const short = (v, unit, locale) => {
+    const a = Math.abs(v), r = (x) => num(locale).format(Math.round(x * 10) / 10);
+    const s = a >= 1e6 ? r(v / 1e6) + 'M' : a >= 1e3 ? r(v / 1e3) + 'K' : num(locale).format(v);
+    return v === 0 ? '0' : withUnit(s, unit);
+  };
+
+  const paint = () => {
+    const rows = list(state.rows), series = list(state.series), unit = state.unit || '', locale = state.locale || 'es';
+    const totals = rows.map((r) => series.reduce((sum, s) => sum + (Number(r[s.key]) || 0), 0));
+    const top = niceTop(Math.max(0, ...totals)), busy = !!state.busy, none = !busy && totals.every((t) => t === 0);
+    const legend = series.length > 1 ? `<ul class="${NS}-legend">${series.map((s) => `<li data-tone="${esc(s.tone || 'brand')}">${esc(s.label)}</li>`).join('')}</ul>` : '';
+    // nothing to measure yet: only the 0 stays on the axis
+    const ticks = [4, 3, 2, 1, 0].map((k) => `<span>${busy || (none && k) ? '' : esc(short((top / 4) * k, unit, locale))}</span>`).join('');
+    const bars = busy
+      ? SKELETON.slice(0, Math.max(rows.length, 7)).map((h) => `<span class="${NS}-bar"><span class="cn-skeleton ${NS}-sk" style="height:${h}%"></span></span>`).join('')
+      : rows.map((r, i) => {
+        const tip = `${r.label}: ${series.map((s) => `${s.label} ${fmt(Number(r[s.key]) || 0, unit, locale)}`).join(' · ')}`;
+        const segs = series.map((s) => { const v = Number(r[s.key]) || 0; return v > 0 ? `<span class="${NS}-seg" data-tone="${esc(s.tone || 'brand')}" style="flex-grow:${v}"></span>` : ''; }).join('');
+        return `<button type="button" class="${NS}-bar" data-id="${esc(r.id)}" aria-pressed="${String(r.id) === String(sel)}" aria-label="${esc(tip)}" data-name="${esc(tip)}"${totals[i] && !state.readonly ? '' : ' disabled'}><span class="${NS}-stack" style="height:${(totals[i] / top) * 100}%">${segs}</span></button>`;
+      }).join('');
+    const xs = (busy ? SKELETON.slice(0, Math.max(rows.length, 7)).map(() => ({ label: '' })) : rows).map((r) => `<span data-id="${esc(r.id ?? '')}"${String(r.id) === String(sel) ? ' data-on' : ''}>${esc(r.label)}</span>`).join('');
+    const n = busy ? Math.max(rows.length, 7) : rows.length;
+    el.innerHTML = `${legend}<div class="${NS}-body"><div class="${NS}-y" aria-hidden="true">${ticks}</div><div class="${NS}-plot"><div class="${NS}-grid" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div><div class="${NS}-bars" role="group" aria-label="${esc(state.label || '')}" style="--n:${n}"${busy ? ' aria-busy="true"' : ''}>${bars}</div>${none && state.empty ? `<div class="cx-veil-note"><div class="cx-veil-box">${state.emptyTitle ? `<span class="cx-veil-t">${esc(state.emptyTitle)}</span>` : ''}<span class="cx-veil-s">${esc(state.empty)}</span></div></div>` : ''}</div><span></span><div class="${NS}-x" aria-hidden="true" style="--n:${n}">${xs}</div></div>`;
+    if (!drawn && !busy && rows.length && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      el.querySelectorAll(`.${NS}-stack`).forEach((s, i) => s.animate([{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }], { duration: 480, delay: i * 24, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'backwards' }));
+      drawn = true;
+    }
+  };
+
+  // only the pressed state moves on a pick: the bars stay where they are
+  const mark = () => {
+    el.querySelectorAll(`.${NS}-bar[data-id]`).forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.id === String(sel))));
+    el.querySelectorAll(`.${NS}-x > span`).forEach((x) => x.toggleAttribute('data-on', x.dataset.id === String(sel)));
+  };
+  el.addEventListener('click', (e) => {
+    const bar = e.target.closest(`.${NS}-bar[data-id]`);
+    if (!bar || bar.disabled) return;
+    sel = bar.dataset.id; mark(); on?.pick?.(sel);
+  });
+
+  paint();
+  return (next) => {
+    const selChanged = (next.selected ?? '') !== (state.selected ?? '');
+    state = { ...next };
+    if (selChanged) sel = next.selected ?? '';
+    // same rows and series, only the pick moved: no repaint
+    const old = el.querySelectorAll(`.${NS}-bar[data-id]`).length;
+    paint();
+    if (old && !state.busy) mark();
+  };
+}

package/registry/stacked-bars.muten

@@ -0,0 +1,13 @@
+# StackedBars - bars over time with one or more series stacked in each: the year by month, citas and pedidos together.
+# The axis is in the page's unit (USD 8K), a bar can be picked (it is pressed, and onPick gets its id), while nothing
+# is there yet a calm note sits over the plot (`empty`, with `emptyTitle` on top), and while it loads (`busy`) a skeleton keeps the shape. When the
+# data changes the bars slide to their new height. Each bar says its values to a screen reader and on hover.
+#   StackedBars(rows: @months, series: @kinds, selected: monthId, unit: "USD", onPick: pickMonth, label: "Ventas por mes")
+# rows {id, label, <key>: number…} · series {key, label, tone}: tone brand | coral | teal | amber | blue | pink, the
+# series palette (the first series sits at the bottom). One series is a plain bar chart. A legend shows from two.
+# readonly: true shows the pick but lets no bar be pressed (a plan that cannot change month).
+# For a single quick chart with no picking, muten's own `Chart` primitive is enough.
+# shadcn-for-muten · Custom · no deps · host JS stacked-bars.js · kit.css (.cx-stb).
+part StackedBars(rows: list, series: list, selected: text = "", unit: text = "", locale: text = "es", empty: text = "", emptyTitle: text = "", busy: bool = false, readonly: bool = false, label: text = "", onPick: action) {
+  Custom StackedBars inputs(rows: $rows, series: $series, selected: $selected, unit: $unit, locale: $locale, empty: $empty, emptyTitle: $emptyTitle, busy: $busy, readonly: $readonly, label: $label) on(pick: $onPick) class("cx-stb")
+}

package/registry/stamp-card.muten

@@ -1,7 +1,10 @@
 # StampCard - a loyalty card: stamps toward a reward (good for any shop).
 #   StampCard(store: "Barbería El Roble", owner: "Laura", total: 10, stamps: 7, reward: "un corte gratis")
+# The words are templates (%owner %n %total %left %reward); the defaults are Spanish:
+#   StampCard(…, title: "%owner's card", progress: "%n of %total · %left to go for %reward", complete: "Complete! %reward earned.",
+#             count: "%n of %total stamps", redeem: "Redeem reward", stamp: "Stamp a visit")
 # demo "on": it stamps itself one visit at a time and starts over, for a landing; the first touch stops it.
 # shadcn-for-muten · part over KitWidget (kit core).
-part StampCard(store: text, owner: text, total: number = 10, stamps: number, reward: text, demo: text = "") {
-  Custom KitWidget inputs(name: "stampCard", store: $store, owner: $owner, total: $total, stamps: $stamps, reward: $reward, demo: $demo) class("cx-stamp-host")
+part StampCard(store: text, owner: text, total: number = 10, stamps: number, reward: text, demo: text = "", title: text = "Cartilla de %owner", progress: text = "%n de %total · faltan %left para %reward", complete: text = "¡Completa! Ganó %reward.", count: text = "%n de %total sellos", redeem: text = "Canjear premio", stamp: text = "Sellar visita") {
+  Custom KitWidget inputs(name: "stampCard", store: $store, owner: $owner, total: $total, stamps: $stamps, reward: $reward, demo: $demo, title: $title, progress: $progress, complete: $complete, count: $count, redeem: $redeem, stamp: $stamp) class("cx-stamp-host")
 }

package/registry/stat-band.muten

@@ -1,6 +1,10 @@
 # StatBand - a row of big numbers split by hairlines (two per row on a phone). Each Stat holds its value in the slot
 # (a Span, or a CountUp that counts up when it comes into view) and its label under it.
 #   StatBand { Stat(label: "citas al mes") { CountUp(to: "12,400") }  Stat(label: "tiendas") { Span "850" } }
+# look: "tiles" puts each number on its own soft tile, left-aligned, for a card inside an app (what the bot did this
+# month: «0 reservas que cerró solo»); the default is the landing's band, centred between hairlines.
+#   StatBand(look: "tiles") { Stat(label: "reservas que cerró solo") { Span "12" }  Stat(label: "pedidos que tomó solo") { Span "5" } }
+# While the numbers load, put a Skeleton in each Stat's slot.
 # shadcn-for-muten · parts · no deps · kit.css (.cx-statband).
-part StatBand() { Stack class("cx-statband") { slot } }
+part StatBand(look: text = "") { Stack class("cx-statband") data(look: $look) { slot } }
 part Stat(label: text) { Stack class("cx-statband-cell") { Stack class("cx-statband-value") { slot }  Span "{$label}" class("cx-statband-label") } }

package/registry/stat.muten

@@ -2,21 +2,33 @@
 # its line. The icon goes in the slot (or leave it empty). `tone` says if the change is good (ok) or bad (bad) -
 # for a cost or a wait, going down is the good one.
 #   StatCard(label: "Ventas", value: "$1.284.000", delta: "▲ 12 %", tone: "ok", compare: "vs. semana pasada", series: "3,5,4,6,5,8,9") { Icon "lucide:credit-card" }
+# A card that asks for something (what is owed, orders to confirm): `line` says what the number means and `to` + `cta`
+# is the one thing to do about it, written at the foot of the card.
+#   StatCard(label: "Por cobrar", value: "USD 305", line: "4 citas sin marcar como pagadas", to: "/close-day", cta: "Cerrar el día") { Icon "lucide:clock" }
+# busy: true keeps the card's shape with a skeleton while the number loads (the label stays).
 # Lay several in a StatGrid. Spark draws the series alone: Spark(series: "3,5,4", tone: "success").
 # shadcn-for-muten · part + Custom (Spark.js) · kit.css (.cx-stat).
-part StatCard(label: text, value: text, delta: text, tone: text = "ok", compare: text = "", series: text = "") {
-  Section class("cn-card cx-stat") data(slot: "card", size: "sm") {
+part StatCard(label: text, value: text = "", delta: text = "", tone: text = "ok", compare: text = "", series: text = "", line: text = "", to: text = "", cta: text = "", busy: bool = false) {
+  Section class("cn-card cx-stat") data(slot: "card", size: "sm", busy: $busy) {
     Stack class("cx-stat-body") {
       Stack class("cx-stat-row") {
         Span "{$label}" class("cx-text") data(slot: "text", variant: "muted")
         Stack class("cx-stat-ic") { slot }
       }
-      Span "{$value}" class("cx-text") data(slot: "text", variant: "title")
-      Stack class("cx-stat-row") {
-        Span "{$delta}" class("cn-badge cn-badge-variant-ghost group/badge") data(slot: "badge", variant: "status", tone: $tone)
-        Span "{$compare}" class("cx-text") data(slot: "text", variant: "caption")
+      when $busy {
+        Skeleton() class("cx-stat-sk-v")
+        Skeleton() class("cx-stat-sk-l")
+      }
+      when not $busy {
+        Span "{$value}" class("cx-text") data(slot: "text", variant: "title")
+        Span "{$line}" class("cx-text cx-stat-line") data(slot: "text", variant: "caption")
+        Stack class("cx-stat-row cx-stat-delta") {
+          Span "{$delta}" class("cn-badge cn-badge-variant-ghost group/badge") data(slot: "badge", variant: "status", tone: $tone)
+          Span "{$compare}" class("cx-text") data(slot: "text", variant: "caption")
+        }
+        Spark(series: $series, tone: $tone)
+        when $to != "" { Link "{$cta}" -> "{$to}" class("cx-stat-go") }
       }
-      Spark(series: $series, tone: $tone)
     }
   }
 }