@muten/shadcn 0.2.10 → 0.2.12

package/kit.css

@@ -606,8 +606,8 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webki
 .cx-otp[data-state="bad"] .cn-input-otp-slot { border-color: var(--destructive); }
 .cx-otp[data-state="bad"] { animation: cx-shake calc(var(--t-move) * 1.35) var(--ease-out); }
 .cx-otp[data-state="ok"] .cn-input-otp-slot { border-color: var(--success); color: var(--success); }
-#otp-msg[data-tone="bad"] { color: var(--destructive); }
-#otp-msg[data-tone="ok"] { color: var(--success); }
+[data-otp-msg][data-tone="bad"] { color: var(--destructive); }
+[data-otp-msg][data-tone="ok"] { color: var(--success); }
 
 /* ── Color picker ── */
 .cx-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
@@ -713,7 +713,7 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webki
 .cx-pagination .cx-pg-num .cn-button, .cx-pg-gap { width: 32px; }
 .cx-pg-gap { display: flex; justify-content: center; }
 .cx-pg-list { transition: opacity 160ms ease; }
-.cx-pg-list[data-loading] { opacity: .45; }
+.cx-pg-list[data-loading="true"] { opacity: .45; }   /* muten writes "false" too: only true dims */
 .cx-pg-empty { border-top-color: transparent; }
 /* virtual list */
 .cx-vlist { height: 364px; overflow-y: auto; border-radius: calc(var(--radius) * 1.2); box-shadow: 0 0 0 1px var(--border); overscroll-behavior: contain; }
@@ -780,7 +780,7 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webki
   .cx-dt td.cx-dt-act { display: none; }
   .cx-dt-who small { display: none; }
   .cx-dt td.cx-dt-svc[data-when]:not([data-when=""])::after { content: " · " attr(data-when); }
-  .cx-dt td.cx-dt-svc ~ td.cx-dt-svc::after { content: none; }
+  .cx-dt td.cx-dt-svc ~ td.cx-dt-svc[data-when]::after { content: none; }
 }
 
 /* ── Board ── */
@@ -5548,3 +5548,15 @@ a.cx-bc-item:hover { color: var(--foreground); }
 
 /* ── Field: a field that must be filled says so at its label ── */
 .cn-label.cx-required::after { content: " *"; color: var(--destructive); }
+
+/* ── Alert with an action: the action takes its own column (Nova's absolute corner reserves 72 px, and a wider button
+   covered the title); on a phone it goes under the text ── */
+.style-nova .cn-alert:has(> .cn-alert-action) { padding-right: 10px; grid-template-columns: 1fr auto; }
+.style-nova .cn-alert:has(> :is(svg, .mu-icon)):has(> .cn-alert-action) { grid-template-columns: auto 1fr auto; }
+.style-nova .cn-alert > .cn-alert-action { position: static; grid-column: -2; grid-row: 1 / span 9; align-self: center; margin-left: 8px; }
+@media (max-width: 560px) {
+  .style-nova .cn-alert:has(> .cn-alert-action) { grid-template-columns: 1fr; }
+  .style-nova .cn-alert:has(> :is(svg, .mu-icon)):has(> .cn-alert-action) { grid-template-columns: auto 1fr; }
+  .style-nova .cn-alert > .cn-alert-action { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin: 8px 0 0; }
+  .style-nova .cn-alert:has(> :is(svg, .mu-icon)) > .cn-alert-action { grid-column: 2; }
+}

package/package.json

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

package/registry/input-otp.muten

@@ -1,7 +1,9 @@
 # InputOtp - the verification code: slots in two groups, a caret, “Verificando…”, ok / bad, a resend countdown. The
 # PAGE checks the code: onInput gets it when complete; answer with state ("ok" | "bad") and message.
 #   InputOtp(value: code, length: 6, hint: "We sent it to +57 300 123 4567", state: otpState, message: otpMsg, onInput: check)
+#   InputOtp(length: 8, letters: true, resendIn: 0, …)   a code copied from another screen (KQ4M-7T2X): letters and
+#   digits, in capitals, a pasted dash dropped, and no resend button (resendIn 0 never offers one).
 # shadcn-for-muten · Custom (kit values) · host JS input-otp.js.
-part InputOtp(value: text = "", length: number = 6, hint: text = "", state: text = "", message: text = "", resendIn: number = 30, onInput: action) {
-  Custom InputOtp inputs(value: $value, length: $length, hint: $hint, state: $state, message: $message, resendIn: $resendIn) on(input: $onInput) class("cx-otp-host")
+part InputOtp(value: text = "", length: number = 6, letters: bool = false, hint: text = "", state: text = "", message: text = "", resendIn: number = 30, onInput: action) {
+  Custom InputOtp inputs(value: $value, length: $length, letters: $letters, hint: $hint, state: $state, message: $message, resendIn: $resendIn) on(input: $onInput) class("cx-otp-host")
 }

package/registry/kit/i18n.js

@@ -90,7 +90,7 @@ Object.assign(ES, {
   'maximum': 'máximo', 'minimum': 'mínimo', 'Currency': 'Moneda', 'Country': 'País', '{0} (it has no minor unit)': '{0} (no tiene unidad menor)', 'cents of {0}': 'centavos de {0}',
   'Saved as: {0} {1}': 'Se guarda: {0} {1}', 'Type a price': 'Escribe un precio', 'Search currency': 'Buscar moneda', 'Search country': 'Buscar país',
   'Saved as +{0}': 'Se guarda como +{0}', '{0} digits short for a number from {1}': 'Faltan {0} dígitos para un número de {1}', '{0} digits, without the {1}': '{0} dígitos, sin el {1}',
-  '{0}-digit code': 'Código de {0} dígitos', 'Checking…': 'Verificando…', 'Resend in 0:{0}': 'Reenviar en 0:{0}', 'Resend code': 'Reenviar código',
+  '{0}-digit code': 'Código de {0} dígitos', '{0}-character code': 'Código de {0} caracteres', 'Checking…': 'Verificando…', 'Resend in 0:{0}': 'Reenviar en 0:{0}', 'Resend code': 'Reenviar código',
   'We sent you a new code': 'Te enviamos un código nuevo', 'Done, it is verified': 'Listo, quedó verificado', 'That is not the code': 'Ese código no es',
 });
 

package/registry/kit/table.js

@@ -2,7 +2,7 @@
 // and bulk actions are data. Everything else is the artifact's: filters from their type (search · facet · date ·
 // range) with counts, chips that leave with a fade, rows that fade out / slide / enter, the height easing, sort by
 // header, selection with its own bulk bar, the phone's “search + Filters” sheet, and a narrow box becoming Items.
-//   columns  [{key, label, type: person|text|date|status|money, sub (person: the key under the name), sortable}]
+//   columns  [{key, label, type: person|text|date|status|money, sub (person: the key under the name), sortable, sort: "desc" (opens newest first)}]
 //   rows     [{id, …keys}]   (a date is "yyyy-mm-ddTHH:MM"; a row's date may be "+N" days from today too)
 //   filters  [{id, type: search|facet|date|range, label, key | keys (search)}]
 //   statuses [{id, label, tone: ok|wait|info|bad}] · noun ["appointment", "appointments"] · bulk [{id, label, variant}]
@@ -37,14 +37,16 @@ export function dataTable(root, cfg, core, on) {
   };
   const SORTERS = Object.fromEntries(COLS.map((c) => [c.key, c.type === 'status' ? (r) => ST_ORDER.indexOf(r[c.key]) : c.type === 'date' ? (r) => +asDate(r[c.key]) : (r) => r[c.key]]));
   const cbHtml = (label, on) => `<button data-slot="checkbox" role="checkbox" data-state="${on ? 'checked' : 'unchecked'}" aria-checked="${on}" class="cn-checkbox" aria-label="${label}"><span data-slot="checkbox-indicator" class="cn-checkbox-indicator"><svg class="cb-mark" viewBox="0 0 24 24">${CB_CHECK}</svg></span></button>`;
-  const firstSort = dateCol ? { key: dateCol.key, dir: 1 } : { key: COLS[0]?.key, dir: 1 };
+  // the table opens sorted by its date column (else the first); a column with sort: "desc" opens newest first (a log)
+  const opening = dateCol ?? COLS[0];
+  const firstSort = { key: opening?.key, dir: opening?.sort === 'desc' ? -1 : 1 };
   const bulk = list(cfg.bulk);
   // rows are selectable only when there is something to do with them: without bulk actions, no checkbox column
   const picks = bulk.length > 0;
   // the phone's «Filters» sheet only when there is a filter besides the search
   const sheetFilters = () => FILTERS.some((f) => f.type !== 'search');
   const CELL_CLASS = { person: 'cx-dt-who', text: 'cx-dt-svc', date: 'cx-dt-when', status: 'cx-dt-st', money: 'cx-dt-num' };
-  root.innerHTML = `<div class="cx-dt-host"><div class="cx-dt-toolbar"><div class="cx-hstack cx-dt-tools" role="toolbar" aria-label="${T('Filters')}"></div><span class="cx-text" data-variant="caption" data-dt-shown aria-live="polite"></span></div><div class="cx-hstack cx-dt-chips" hidden></div><div class="cx-dt-bulk" aria-live="polite"><div><span data-dt-count></span><div class="cx-hstack" style="gap:6px">${bulk.map((b) => ui.button({ label: b.label, variant: b.variant || 'outline', size: 'xs', attrs: `data-dt-bulk="${b.id}"` })).join('')}${ui.button({ label: T('Clear selection'), variant: 'ghost', size: 'xs', attrs: 'data-dt-unselect' })}</div></div></div><div class="cx-dt-scroll cx-scroll"><table class="cx-dt"><thead><tr>${picks ? `<th class="cx-dt-check">${cbHtml(T('Select all'), false).replace('class="cn-checkbox"', 'class="cn-checkbox" data-dt-all')}</th>` : ''}${COLS.map((c) => `<th aria-sort="${c.key === firstSort.key ? 'ascending' : 'none'}" ${c.type === 'money' ? 'class="cx-dt-num"' : ''}>${c.sortable === false ? ui.text(c.label, 'label') : `<button class="cn-button cn-button-variant-ghost cn-button-size-xs cx-th" data-sort="${c.key}">${c.label}<svg><use href="#${c.key === firstSort.key ? 'arrowup' : 'sort'}"/></svg></button>`}</th>`).join('')}</tr></thead><tbody></tbody></table></div></div>`;
+  root.innerHTML = `<div class="cx-dt-host"><div class="cx-dt-toolbar"><div class="cx-hstack cx-dt-tools" role="toolbar" aria-label="${T('Filters')}"></div><span class="cx-text" data-variant="caption" data-dt-shown aria-live="polite"></span></div><div class="cx-hstack cx-dt-chips" hidden></div><div class="cx-dt-bulk" aria-live="polite"><div><span data-dt-count></span><div class="cx-hstack" style="gap:6px">${bulk.map((b) => ui.button({ label: b.label, variant: b.variant || 'outline', size: 'xs', attrs: `data-dt-bulk="${b.id}"` })).join('')}${ui.button({ label: T('Clear selection'), variant: 'ghost', size: 'xs', attrs: 'data-dt-unselect' })}</div></div></div><div class="cx-dt-scroll cx-scroll"><table class="cx-dt"><thead><tr>${picks ? `<th class="cx-dt-check">${cbHtml(T('Select all'), false).replace('class="cn-checkbox"', 'class="cn-checkbox" data-dt-all')}</th>` : ''}${COLS.map((c) => `<th aria-sort="${c.key === firstSort.key ? (firstSort.dir === 1 ? 'ascending' : 'descending') : 'none'}" ${c.type === 'money' ? 'class="cx-dt-num"' : ''}>${c.sortable === false ? ui.text(c.label, 'label') : `<button class="cn-button cn-button-variant-ghost cn-button-size-xs cx-th" data-sort="${c.key}">${c.label}<svg><use href="#${c.key === firstSort.key ? (firstSort.dir === 1 ? 'arrowup' : 'arrowdown') : 'sort'}"/></svg></button>`}</th>`).join('')}</tr></thead><tbody></tbody></table></div></div>`;
   const host = $('.cx-dt-host', root), dtTools = $('.cx-dt-tools', root), dtChips = $('.cx-dt-chips', root), dtCountEl = $('[data-dt-shown]', root), dtBody = $('tbody', root), dtAll = $('[data-dt-all]', root), dtBulk = $('.cx-dt-bulk', root);
   const dtSel = new Set(); let dtSort = firstSort;
   const passes = (r, except) => FILTERS.every((f) => f.id === except || PASS[f.type](f, fState[f.id], r));

package/registry/kit/values.js

@@ -157,7 +157,14 @@ export function phoneField(root, i, core, on) {
 export function otpField(root, i, core, on) {
   const { $ } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   const len = Number(i.length) || 6, half = Math.ceil(len / 2);
-  root.innerHTML = `<div class="cx-vline cx-otp-stack"><div class="cx-otp"><input class="cx-otp-input" inputmode="numeric" autocomplete="one-time-code" maxlength="${len}" aria-label="${T('{0}-digit code', len)}"><div data-slot="input-otp" class="cn-input-otp" aria-hidden="true"><div data-slot="input-otp-group" class="cn-input-otp-group"></div><div data-slot="input-otp-separator" class="cn-input-otp-separator cx-otp-sep"><span></span></div><div data-slot="input-otp-group" class="cn-input-otp-group"></div></div></div><p class="cx-note" data-otp-msg></p><button data-slot="button" class="cn-button cn-button-variant-link cn-button-size-sm group/button" data-otp-resend disabled></button></div>`;
+  // letters: a code people copy from another screen (KQ4M-7T2X), so letters and digits, shown in capitals, and room in the
+  // field for a pasted dash or spaces, which are dropped (maxlength would otherwise cut the paste before the cleanup)
+  const letters = i.letters === true || i.letters === 'true';
+  const keep = letters ? (v) => v.toUpperCase().replace(/[^A-Z0-9]/g, '') : (v) => v.replace(/\D/g, '');
+  const field = letters
+    ? `inputmode="text" autocapitalize="characters" autocomplete="off" spellcheck="false" maxlength="${len * 2}" aria-label="${T('{0}-character code', len)}"`
+    : `inputmode="numeric" autocomplete="one-time-code" maxlength="${len}" aria-label="${T('{0}-digit code', len)}"`;
+  root.innerHTML = `<div class="cx-vline cx-otp-stack"><div class="cx-otp"><input class="cx-otp-input" ${field}><div data-slot="input-otp" class="cn-input-otp" aria-hidden="true"><div data-slot="input-otp-group" class="cn-input-otp-group"></div><div data-slot="input-otp-separator" class="cn-input-otp-separator cx-otp-sep"><span></span></div><div data-slot="input-otp-group" class="cn-input-otp-group"></div></div></div><p class="cx-note" data-otp-msg></p><button data-slot="button" class="cn-button cn-button-variant-link cn-button-size-sm group/button" data-otp-resend disabled></button></div>`;
   const otpIn = $('.cx-otp-input', root), otpBox = $('.cx-otp', root), otpMsg = $('[data-otp-msg]', root), resend = $('[data-otp-resend]', root);
   const slots = [];
   root.querySelectorAll('.cn-input-otp-group').forEach((g, gi) => { const n = gi ? len - half : half; for (let k = 0; k < n; k++) { const s = document.createElement('div'); s.className = 'cn-input-otp-slot'; s.dataset.slot = 'input-otp-slot'; g.appendChild(s); slots.push(s); } });
@@ -166,16 +173,20 @@ export function otpField(root, i, core, on) {
   const paint = () => { const v = otpIn.value, focused = document.activeElement === otpIn, at = Math.min(v.length, len - 1); slots.forEach((s, k) => { s.textContent = v[k] || ''; const act = focused && k === at && !busy; s.dataset.active = act; if (act && !v[k]) s.innerHTML = '<span class="cx-caret"></span>'; }); };
   const toEnd = () => { const n = otpIn.value.length; otpIn.setSelectionRange(n, n); };
   otpIn.addEventListener('input', () => {
-    otpIn.value = otpIn.value.replace(/\D/g, '').slice(0, len); delete otpBox.dataset.state; otpMsg.removeAttribute('data-tone'); otpMsg.textContent = hint; paint();
+    otpIn.value = keep(otpIn.value).slice(0, len); delete otpBox.dataset.state; otpMsg.removeAttribute('data-tone'); otpMsg.textContent = hint; paint();
     if (otpIn.value.length === len) { busy = true; otpIn.readOnly = true; otpMsg.textContent = T('Checking…'); paint(); on?.complete?.(otpIn.value); }
   });
   ['focus', 'blur', 'click', 'keyup'].forEach((t) => otpIn.addEventListener(t, () => { toEnd(); paint(); }));
   otpIn.addEventListener('select', toEnd);
+  // resendIn 0: a code that is not sent again (one a shop gave you, one a terminal shows), so no resend button at all
   let left = Number(i.resendIn ?? 30), rt = 0;
+  const resends = left > 0;
+  resend.hidden = !resends;
   const tick = () => { left--; resend.disabled = left > 0; resend.textContent = left > 0 ? T('Resend in 0:{0}', String(left).padStart(2, '0')) : T('Resend code'); if (left > 0) rt = setTimeout(tick, 1000); };
   resend.textContent = T('Resend in 0:{0}', String(left).padStart(2, '0'));
   resend.onclick = () => { left = Number(i.resendIn ?? 30) + 1; clearTimeout(rt); tick(); otpMsg.removeAttribute('data-tone'); otpMsg.textContent = T('We sent you a new code'); otpIn.value = ''; delete otpBox.dataset.state; otpIn.focus(); on?.resend?.(); };
-  rt = setTimeout(tick, 1000); paint();
+  if (resends) rt = setTimeout(tick, 1000);
+  paint();
   const answer = (st, msg) => {
     if (!st || st === 'checking') return;
     busy = false; otpIn.readOnly = false;

package/registry/modal-behavior.js

@@ -2,6 +2,20 @@
 // the Modal part's (muten state + kit.css). This only does what markup cannot: history (Back closes), Esc, the focus
 // trap, the scroll lock, the auto mode (dialog on a wide screen, drawer on a phone) and the drawer's drag to close.
 // Same rules as the reference artifact's modal.
+// MODALS STACK (a receipt opened over a cita): Back, Esc and the focus trap belong to the TOP one only, and the page's
+// scroll is unlocked when the last one closes. Each modal used to listen to every Back: closing the receipt went back
+// in history and that Back also closed the cita under it, leaving the agenda without its buttons (21-10-2026).
+const stack = (globalThis.__cxModals ||= { list: [], skip: 0, wired: false });
+if (!stack.wired) {
+  stack.wired = true;
+  addEventListener('popstate', () => {
+    // the history.back() a modal makes when it closes itself is its own, not a Back for the one under it
+    if (stack.skip > 0) { stack.skip -= 1; return; }
+    stack.list.at(-1)?.onPop();
+  });
+}
+const isTop = (me) => stack.list.at(-1) === me;
+
 export function mount(el, inputs, on) {
   const mdl = el.closest('.cx-modal'), root = mdl.parentElement, ov = root.querySelector(':scope > .cx-overlay');
   const body = mdl.querySelector(':scope > .cx-modal-body');
@@ -11,6 +25,7 @@ export function mount(el, inputs, on) {
   // of opening: a dialog that only learns it is a dialog as it opens animates its centring from the corner
   const resolve = () => { if (auto && !isOpen) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog'; };
   let isOpen = false, pushed = false, lastFocus = null;
+  const me = { onPop: () => { if (isOpen) { pushed = false; close(); } } };
   queueMicrotask(() => resolve()); phone.addEventListener('change', resolve);
   // the footer sticks under the scrolling body, not inside it
   const placeFooter = () => { const f = body.querySelector('.cx-modal-foot'); if (f) mdl.appendChild(f); };
@@ -40,6 +55,7 @@ export function mount(el, inputs, on) {
     if (auto) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog';
     if (wantsAnchor()) place(); else unplace();
     lastFocus = document.activeElement;
+    stack.list.push(me);
     document.documentElement.classList.add('cx-locked');
     // on the phone, focusing a field would throw the keyboard over the sheet: focus the sheet itself
     requestAnimationFrame(() => { ((mdl.dataset.mode === 'dialog' && focusables().find((x) => x.matches('input, textarea'))) || mdl).focus({ preventScroll: true }); });
@@ -48,9 +64,10 @@ export function mount(el, inputs, on) {
   const shut = () => {
     if (!isOpen) return; isOpen = false;
     mdl.style.transform = ''; if (ov) ov.style.opacity = '';
-    document.documentElement.classList.remove('cx-locked');
+    stack.list = stack.list.filter((one) => one !== me);
+    if (stack.list.length === 0) document.documentElement.classList.remove('cx-locked');
     lastFocus?.focus?.({ preventScroll: true });
-    if (pushed) { pushed = false; history.back(); }
+    if (pushed) { pushed = false; stack.skip += 1; 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
@@ -64,9 +81,8 @@ export function mount(el, inputs, on) {
     pushed = false; addEventListener('popstate', go);
     close(); history.back();
   }, true);
-  addEventListener('popstate', () => { if (isOpen) { pushed = false; close(); } });
   document.addEventListener('keydown', (e) => {
-    if (!isOpen) return;
+    if (!isOpen || !isTop(me)) return;
     if (e.key === 'Escape') { e.preventDefault(); close(); }
     if (e.key === 'Tab') { const f = focusables(); if (!f.length) return; const first = f[0], last = f[f.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }
   });

package/registry.json

@@ -457,7 +457,7 @@
       "part": "InputOtp",
       "file": "registry/input-otp.muten",
       "component": "InputOtp",
-      "description": "InputOtp(value, length, hint, state, message, resendIn, onInput): slots, caret, ok/bad, resend countdown."
+      "description": "InputOtp(value, length, letters, hint, state, message, resendIn, onInput): slots, caret, ok/bad, resend countdown (none with resendIn 0); letters for a code like KQ4M-7T2X."
     },
     {
       "name": "input",