@muten/shadcn 0.1.1 → 0.1.2

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/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/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/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/zoom-control.muten

@@ -4,8 +4,8 @@
 # shadcn-for-muten · part · no deps · kit.css (.cx-zoom).
 part ZoomControl(value: number, onOut: action, onIn: action, onReset: action) {
   Stack class("cx-zoom") data(slot: "zoom-control") aria(role: "group", label: "Zoom") {
-    Button -> $onOut class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button") data(name: "Alejar") aria(label: "Alejar") { Icon "lucide:minus" }
-    Button "{$value} %" -> $onReset class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-zoom-value") data(name: "Volver a 100 %") aria(label: "Zoom {$value} %, volver a 100")
-    Button -> $onIn class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button") data(name: "Acercar") aria(label: "Acercar") { Icon "lucide:plus" }
+    Btn(variant: "ghost", size: "icon-sm", label: "Alejar", onClick: $onOut) { Icon "lucide:minus" }
+    Button "{$value} %" -> $onReset class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-zoom-value") data(name: "Volver a 100 %") aria(label: "Zoom {$value} %, volver a 100")   # its words carry $value: a part arg cannot interpolate an outer param, so it stays a Button
+    Btn(variant: "ghost", size: "icon-sm", label: "Acercar", onClick: $onIn) { Icon "lucide:plus" }
   }
 }

package/registry.json

@@ -93,6 +93,20 @@
       "file": "registry/bento.muten",
       "description": "BLOCK: fixed-row-height tiling gallery; cells pick their col-span. Parts: BentoGallery, BentoCell."
     },
+    {
+      "name": "bio-play",
+      "deps": [],
+      "part": "BioPlay",
+      "file": "registry/bio-play.muten",
+      "description": "BioPlay - a social profile shown, not used: the photo, the handle, the followers, the bio with the store's link"
+    },
+    {
+      "name": "booking-play",
+      "deps": [],
+      "part": "BookingPlay",
+      "file": "registry/booking-play.muten",
+      "description": "BookingPlay - a booking shown, not used: one service, a few days and hours, and a booking that plays itself in a"
+    },
     {
       "name": "booking",
       "deps": [],
@@ -162,6 +176,13 @@
       "component": "Carousel",
       "description": "Carousel(label, perView, center, loop, autoplay, indicator, arrows) { CarouselSlide }: one component, options instead of copies."
     },
+    {
+      "name": "chat-play",
+      "deps": [],
+      "part": "ChatPlay",
+      "file": "registry/chat-play.muten",
+      "description": "ChatPlay - a conversation shown, not used: the messages come in one by one (in `step` order, 1-6) and the"
+    },
     {
       "name": "chatbot",
       "deps": [
@@ -258,6 +279,13 @@
       "component": "DateField",
       "description": "DateField(label, value, min, years, onChange): the long date; opens the date wheels."
     },
+    {
+      "name": "day-plan",
+      "deps": [],
+      "part": "DayPlan",
+      "file": "registry/day-plan.muten",
+      "description": "DayPlan - the owner's day as a list in order: hour, a dot on a line, who and what, a tag on the right. The hours"
+    },
     {
       "name": "device-frame",
       "deps": [],
@@ -386,6 +414,13 @@
       "component": "ImageUpload",
       "description": "ImageUpload(title, hint, maxMb, size, uploadUrl, sample, onReady): validate, decode, crop, shrink, upload with progress."
     },
+    {
+      "name": "inbox-play",
+      "deps": [],
+      "part": "InboxPlay",
+      "file": "registry/inbox-play.muten",
+      "description": "InboxPlay - a messages list shown, not used: the shop's inbox as the channel's app draws it (skin: instagram |"
+    },
     {
       "name": "indicator",
       "deps": [],
@@ -578,6 +613,20 @@
       "file": "registry/navpill.muten",
       "description": "BLOCK: the floating glass navbar (sticky wrapper + glass pill + scroll animation baked in). Drop logo/links/CTA inside."
     },
+    {
+      "name": "legal-doc",
+      "deps": [],
+      "part": "DocHead",
+      "file": "registry/legal-doc.muten",
+      "description": "A legal document (terms, privacy): the title and its line, the contents that follow the reading, the sections at reading width."
+    },
+    {
+      "name": "phone-bar",
+      "deps": [],
+      "part": "PhoneBar",
+      "file": "registry/phone-bar.muten",
+      "description": "The app's bar at the bottom of a phone: three fixed cells (menu · the screen's tools · its create). Screens hand it their toolbar buttons on a phone."
+    },
     {
       "name": "new-appointment",
       "deps": [],
@@ -602,6 +651,13 @@
       "component": "OrderBoard",
       "description": "OrderBoard(lanes, cards, onChange, onAction) / OrderCards(cards, sizes): order board and card with its modals."
     },
+    {
+      "name": "order-play",
+      "deps": [],
+      "part": "OrderPlay",
+      "file": "registry/order-play.muten",
+      "description": "OrderPlay - an order shown, not used: who ordered, the products with their photos, how it is paid and delivered,"
+    },
     {
       "name": "overlay-behavior",
       "deps": [],
@@ -689,6 +745,13 @@
       "file": "registry/pricing.muten",
       "description": "BLOCK: a row of pricing tiers (name/price/features/CTA), featured highlight. Parts: Pricing, PricingTier, PricingFeature."
     },
+    {
+      "name": "product-play",
+      "deps": [],
+      "part": "ProductPlay",
+      "file": "registry/product-play.muten",
+      "description": "ProductPlay - a product sheet shown, not used: the photo, the shop, the name with its price, a line about it, its"
+    },
     {
       "name": "progress",
       "deps": [],
@@ -759,6 +822,14 @@
       "component": "ScaleSlider",
       "description": "ScaleSlider(label, min, max, step, values, gap, format, onChange): value rides on the thumb; two bubbles merge."
     },
+    {
+      "name": "screen-tour",
+      "deps": [],
+      "part": "ScreenTour",
+      "file": "registry/screen-tour.muten",
+      "component": "ScreenTour",
+      "description": "ScreenTour - how a product is used, played on its real screens: numbered steps on one side, a phone on the other"
+    },
     {
       "name": "scroll-area",
       "deps": [],
@@ -1066,6 +1137,13 @@
       "part": "ZoomControl",
       "file": "registry/zoom-control.muten",
       "description": "A - 100% + zoom widget; page owns the zoom number."
+    },
+    {
+      "name": "site-footer",
+      "deps": [],
+      "part": "SiteFooter",
+      "file": "registry/site-footer.muten",
+      "description": "A site's footer: the brand and its two ways in over a hairline, every group of links on one row, then a bar with the company and contacts (FooterHead, FooterBrand, FooterActions, FooterLinks, FooterCol, FooterBar)."
     }
   ],
   "classComponents": {

package/scripts/reuse-audit.mjs

@@ -0,0 +1,37 @@
+// reuse-audit.mjs - atomic design kept honest: before something is written by hand, the library may already have it.
+//   node scripts/reuse-audit.mjs                                   the library's own parts (from plugins/shadcn)
+//   node node_modules/@muten/shadcn/scripts/reuse-audit.mjs src    an app's .muten files (from the app)
+// It lists the markup that re-draws an existing piece: a Button wearing cn-button classes where Btn would do, a
+// SearchField wearing cn-input where Input/GroupInput exist, a hand-made avatar, a phone or device frame of its own
+// (DeviceFrame is the one phone of the library). A finding is not always wrong (a tab passes its value to the action,
+// a close button carries its own role): each one is a question to answer before adding more.
+import fs from 'node:fs';
+import path from 'node:path';
+
+const REG = path.join(import.meta.dirname, '..', 'registry');
+const OWN = { 'button.muten': true, 'input.muten': true, 'input-group.muten': true, 'avatar.muten': true, 'device-frame.muten': true, 'skeleton.muten': true, 'kit-skeleton.muten': true };
+const RULES = [
+  { test: (l) => /\bButton\b/.test(l) && /->\s*[\w.$]+\s+class\("cn-button/.test(l) && !/aria\((pressed|role)|status:|marker:|"\{\$/.test(l), says: 'a Button with cn-button classes and a plain action: Btn(variant, size, label, onClick) does it' },
+  { re: /SearchField\b[^\n]*class\("cn-input/, says: 'a SearchField with cn-input classes: Input / GroupInput do it' },
+  { re: /class\("cn-avatar[ "]/, says: 'a hand-made avatar: Avatar / AvatarImage do it' },
+  { test: (l) => !/\bDeviceFrame\(/.test(l) && /class\("[^"]*\b(cx-phone-frame|cx-sphone[\w-]*|plt-phone|phone-frame|device-frame|iphone|bezel|notch)\b/.test(l), says: 'a phone frame of its own: DeviceFrame is the one phone of the library (island, href, shot, width)' },
+  { re: /class\("[^"]*\b(cx-sk|cn-skeleton)(?=[\s"])/, says: 'a skeleton drawn by hand: Skeleton / Skeletons(kind) / Loading do it' },
+];
+
+const walk = (dir) => fs.readdirSync(dir, { withFileTypes: true }).flatMap((e) => {
+  if (e.name === 'node_modules' || e.name.startsWith('.')) return [];
+  const full = path.join(dir, e.name);
+  return e.isDirectory() ? walk(full) : e.name.endsWith('.muten') ? [full] : [];
+});
+const roots = process.argv.slice(2);
+const files = roots.length ? roots.flatMap((r) => walk(path.resolve(r))) : fs.readdirSync(REG).filter((f) => f.endsWith('.muten') && !OWN[f]).map((f) => path.join(REG, f));
+
+let total = 0;
+for (const file of files.sort()) {
+  const lines = fs.readFileSync(file, 'utf8').split('\n');
+  lines.forEach((line, i) => {
+    if (line.trim().startsWith('#')) return;
+    for (const r of RULES) if (r.test ? r.test(line) : r.re.test(line)) { total++; console.log(`${path.relative(process.cwd(), file)}:${i + 1}  ${r.says}\n    ${line.trim().slice(0, 140)}`); }
+  });
+}
+console.log(total ? `\n${total} place(s) to look at.` : 'Nothing re-drawn by hand.');