@muten/shadcn 0.1.14 → 0.2.0

package/registry/kit/structure.js

@@ -3,7 +3,7 @@
 //   share       Storio's share sheet inside the adaptive modal (link or product card, Copiar, brand targets, QR)
 //   appShell    Sidebar (store switcher, groups, counts, person) + page header + detail Sheet + Command (⌘K)
 //   booking     week strip + hours in one piece (dot = something left, closed days, a full day's empty state)
-//   wizard      «Nueva cita» in 4 steps inside the adaptive modal (Stepper, choice lists, day tiles, summary)
+//   wizard      “New appointment” in 4 steps inside the adaptive modal (Stepper, choice lists, day tiles, summary)
 
 const list = (v) => (Array.isArray(v) ? v : []);
 const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
@@ -11,17 +11,17 @@ const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<
 // ── phone shell ──
 // i: tabs [{label, icon, badge}], rows [{tab, section, title, subtitle, value}]; on.select(label)
 export function phoneShell(root, i, core, on) {
-  const { $, $$ } = core;
+  const { $, $$ } = core, L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a);
   const tabs = list(i.tabs), rows = list(i.rows);
   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>
+      <button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon group/button" aria-label="${T('Back')}" title="${T('Back')}"><svg><use href="#left"/></svg></button>
       <b class="cx-ph-small"></b>
-      <div class="cx-hstack" style="gap:2px;width:auto;flex-wrap:nowrap"><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon group/button" aria-label="Buscar" title="Buscar"><svg><use href="#search"/></svg></button><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon group/button" aria-label="Más opciones" title="Más opciones"><svg><use href="#more"/></svg></button></div>
+      <div class="cx-hstack" style="gap:2px;width:auto;flex-wrap:nowrap"><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon group/button" aria-label="${T('Search')}" title="${T('Search')}"><svg><use href="#search"/></svg></button><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon group/button" aria-label="${T('More options')}" title="${T('More options')}"><svg><use href="#more"/></svg></button></div>
     </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>
+    <nav class="cx-ph-nav" aria-label="${T('Main')}">${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>`;
   const head = $('.cx-ph-head', root), phBody = $('.cx-ph-body', root);
   const screen = (label) => {
@@ -53,8 +53,8 @@ const enc = encodeURIComponent;
 const targetsFor = (url, text) => [
   { name: 'QR', icon: 'qrc', plain: true, qr: true },
   { name: 'WhatsApp', icon: 'b-whatsapp', color: '#25D366', href: `https://wa.me/?text=${enc(text + ' ' + url)}` },
-  { name: 'Instagram', icon: 'b-instagram', color: '#E4405F', copy: 'Enlace copiado. Pégalo en tu bio o en una historia de Instagram.' },
-  { name: 'TikTok', icon: 'b-tiktok', color: '#000000', copy: 'Enlace copiado. Pégalo en tu bio de TikTok.' },
+  { name: 'Instagram', icon: 'b-instagram', color: '#E4405F', copy: 'Link copied. Paste it in your bio or in an Instagram story.' },
+  { name: 'TikTok', icon: 'b-tiktok', color: '#000000', copy: 'Link copied. Paste it in your TikTok bio.' },
   { name: 'Facebook', icon: 'b-facebook', color: '#0866FF', href: `https://www.facebook.com/sharer/sharer.php?u=${enc(url)}` },
   { name: 'X', icon: 'b-x', color: '#000000', href: `https://x.com/intent/post?text=${enc(text)}&url=${enc(url)}` },
   { name: 'Telegram', icon: 'b-telegram', color: '#26A5E4', href: `https://t.me/share/url?url=${enc(url)}&text=${enc(text)}` },
@@ -68,17 +68,17 @@ const dragScroll = (row) => {
   addEventListener('pointerup', () => { if (!d) return; const moved = d.moved; d = null; row.classList.remove('dragging'); if (moved) row.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); }, { capture: true, once: true }); });
 };
 export function share(root, i, core) {
-  const { ui, $, openModal, CONTENT, body, foot, mdl, easeHeight, money0 } = core;
+  const { ui, $, openModal, CONTENT, body, foot, mdl, easeHeight, money0 } = core, L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a);
   const product = i.kind === 'product' && i.product ? i.product : null;
   const url = /^https?:\/\//.test(i.url || '') ? i.url : `https://${i.url || ''}`;
   const shown = url.replace(/^https?:\/\//, '');
-  const text = i.text || (product ? `${product.name} en ${i.name}` : `Reserva en ${i.name}`);
-  const title = product ? 'Compartir producto' : 'Compartir enlace';
+  const text = i.text || (product ? T('{0} at {1}', product.name, i.name) : T('Book at {0}', i.name));
+  const title = product ? T('Share product') : T('Share link');
   root.innerHTML = ui.button({ label: `${i.icon === 'none' ? '' : ui.icon('share')}${esc(i.label || 'Compartir')}`, variant: i.variant || 'default', size: 'default' });
   const msg = (t) => { const m = $('.cx-sh-msg', body); if (m) m.textContent = t; };
   const copy = (ok) => {
-    const fb = () => { const u = $('.cx-sh-url', body); if (u) getSelection().selectAllChildren(u); msg('Selecciona el enlace y cópialo.'); };
-    try { navigator.clipboard.writeText(url).then(() => { msg(ok); const b = $('.cx-sh-copybtn', body); if (b) { b.textContent = 'Copiado'; setTimeout(() => { b.textContent = 'Copiar'; }, 1600); } }, fb); } catch { fb(); }
+    const fb = () => { const u = $('.cx-sh-url', body); if (u) getSelection().selectAllChildren(u); msg(T('Select the link and copy it.')); };
+    try { navigator.clipboard.writeText(url).then(() => { msg(ok); const b = $('.cx-sh-copybtn', body); if (b) { b.innerHTML = `<span class="cx-swap-in">${T('Copied')}</span>`; setTimeout(() => { b.innerHTML = `<span class="cx-swap-in">${T('Copy')}</span>`; }, 1600); } }, fb); } catch { fb(); }
   };
   const main = () => {
     $('#mdl-title').textContent = title;
@@ -86,18 +86,18 @@ export function share(root, i, core) {
       ? `<div class="cx-sh-prod" style="--g:${esc(product.image || 'var(--muted)')}"><span class="cx-sh-tag">${money0(Number(product.price) || 0)}</span><div class="cx-sh-pinfo"><b>${esc(product.name)}</b><span>${esc(product.meta)}</span></div></div>`
       : `<div class="cx-sh-card"><span class="cx-sh-av">${esc(i.initials)}</span><b>${esc(i.name)}</b><span>${esc(shown)}</span></div>`;
     body.innerHTML = `<div class="cx-sh">${card}
-      <div class="cx-sh-copy"><span class="cx-sh-url cx-num">${esc(shown)}</span><button class="cn-button cn-button-variant-default cn-button-size-sm cx-sh-copybtn" data-sh-copy>Copiar</button></div>
-      <span class="cx-sh-lbl">Compartir en</span>
+      <div class="cx-sh-copy"><span class="cx-sh-url cx-num">${esc(shown)}</span><button class="cn-button cn-button-variant-default cn-button-size-sm cx-sh-copybtn" data-sh-copy>${T('Copy')}</button></div>
+      <span class="cx-sh-lbl">${T('Share on')}</span>
       <div class="cx-sh-targets">${targetsFor(url, text).map((t, k) => { const ico = `<span class="cx-sh-ic${t.plain ? ' plain' : ''}" style="${t.color ? `--brand:${t.color}` : ''}"><svg><use href="#${t.icon}"/></svg></span><span class="cx-sh-l">${t.name}</span>`; return t.href ? `<a class="cn-button cn-button-variant-ghost cx-size-tile-lg cx-sh-tg" href="${t.href}" target="_blank" rel="noopener" data-t="${k}">${ico}</a>` : `<button class="cn-button cn-button-variant-ghost cx-size-tile-lg cx-sh-tg" data-t="${k}">${ico}</button>`; }).join('')}</div>
       <p class="cx-note cx-sh-msg" aria-live="polite" style="text-align:left"></p></div>`;
     const row = $('.cx-sh-targets', body); dragScroll(row);
     const edge = () => { row.toggleAttribute('data-end', row.scrollLeft >= row.scrollWidth - row.clientWidth - 2); row.toggleAttribute('data-scrolled', row.scrollLeft > 2); };
     row.addEventListener('scroll', edge, { passive: true }); requestAnimationFrame(edge);
-    row.addEventListener('click', (e) => { const t = e.target.closest('[data-t]'); if (!t) return; const x = targetsFor(url, text)[+t.dataset.t]; if (x.copy) copy(x.copy); if (x.qr) easeHeight(mdl, qr); });
+    row.addEventListener('click', (e) => { const t = e.target.closest('[data-t]'); if (!t) return; const x = targetsFor(url, text)[+t.dataset.t]; if (x.copy) copy(T(x.copy)); if (x.qr) easeHeight(mdl, qr); });
   };
   const qr = () => {
-    $('#mdl-title').textContent = 'Código QR';
-    body.innerHTML = `<div class="cx-sh cx-sh-qrview"><div class="cx-qr" style="width:15rem;max-width:72%;aspect-ratio:1;height:auto" role="img" aria-label="Código QR de ${esc(shown)}"><div class="cx-qr-mark"><span>${esc(i.initials)}</span></div></div><span class="cx-sh-qrurl cx-num">${esc(shown)}</span><button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-sh-back><svg><use href="#left"/></svg>Volver</button></div>`;
+    $('#mdl-title').textContent = T('QR code');
+    body.innerHTML = `<div class="cx-sh cx-sh-qrview"><div class="cx-qr" style="width:15rem;max-width:72%;aspect-ratio:1;height:auto" role="img" aria-label="${esc(T('QR code of {0}', shown))}"><div class="cx-qr-mark"><span>${esc(i.initials)}</span></div></div><span class="cx-sh-qrurl cx-num">${esc(shown)}</span><button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-sh-back><svg><use href="#left"/></svg>${T('Back')}</button></div>`;
     import('@muten/shadcn/registry/kit/qrcode.js').then(({ default: qrcode }) => {
       const q = qrcode(0, 'H'); q.addData(url); q.make(); const n = q.getModuleCount(); let d = '';
       for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (q.isDark(r, c)) d += `M${c} ${r}h1v1h-1z`;
@@ -108,13 +108,13 @@ export function share(root, i, core) {
   const kind = `share-${Math.random().toString(36).slice(2, 8)}`;
   CONTENT[kind] = () => {
     $('#mdl-desc').textContent = ''; main();
-    foot.innerHTML = navigator.share ? ui.button({ label: `${ui.icon('share')}Compartir en otra app`, variant: 'default', size: 'default', cls: 'cx-go', attrs: 'data-sh-native' }) : '';
+    foot.innerHTML = navigator.share ? ui.button({ label: `${ui.icon('share')}${T('Share in another app')}`, variant: 'default', size: 'default', cls: 'cx-go', attrs: 'data-sh-native' }) : '';
     body.dataset.share = kind;
   };
   root.addEventListener('click', (e) => { if (e.target.closest('button')) openModal(kind, 'auto'); });
   document.addEventListener('click', async (e) => {
     if (body.dataset.share !== kind || !mdl.contains(e.target)) return;
-    if (e.target.closest('[data-sh-copy]')) copy('Enlace copiado.');
+    if (e.target.closest('[data-sh-copy]')) copy(T('Link copied.'));
     if (e.target.closest('[data-sh-back]')) easeHeight(mdl, main);
     if (e.target.closest('[data-sh-native]')) { try { await navigator.share({ title: text, url }); } catch {} }
   });
@@ -126,7 +126,7 @@ export function share(root, i, core) {
 //    badge, tone, amount, sheet [{icon, title, description, badge, tone, amount, photos}], timeline [{label, when}]}],
 //    commands [{icon, label, page}]; on.navigate(page) · on.open(id) · on.action(label)
 export function appShell(root, i, core, on) {
-  const { ui, $, $$, openModal, closeModal, CONTENT, body, foot, mdl, money0, fold } = core;
+  const { ui, $, $$, openModal, closeModal, CONTENT, body, foot, mdl, money0, fold } = core, L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a);
   const nav = list(i.nav), pages = list(i.pages), rows = list(i.rows), commands = list(i.commands);
   const groups = [...new Set(nav.map((n) => n.group))].map((g) => [g, nav.filter((n) => n.group === g)]);
   root.classList.add('cx-app'); const app = root;
@@ -136,7 +136,7 @@ export function appShell(root, i, core, on) {
   const pageBody = () => {
     const mine = rows.filter((r) => r.page === appPage);
     if (mine.length) return `<div data-slot="item-group" class="cn-item-group cx-app-list" role="list">${mine.map((r) => `<button class="cn-item cn-item-variant-outline cn-item-size-sm cx-app-row" ${r.sheet ? `data-open-row="${esc(r.id)}"` : ''}>${ui.itemMedia(ui.avatar(r.title), 'default')}<div class="cn-item-content"><div class="cn-item-title">${esc(r.title)}</div><p class="cn-item-description">${esc(r.description)}</p></div><div class="cn-item-actions">${aside(r)}</div></button>`).join('')}</div>`;
-    return `<div data-slot="empty" class="cn-empty" style="padding:48px 12px"><div class="cn-empty-header"><div class="cn-empty-media cn-empty-media-icon">${ui.icon(nav.find((n) => n.label === appPage)?.icon || 'store')}</div><div class="cn-empty-title">${esc(appPage)}</div><div class="cn-empty-description">${esc(i.empty || 'Todavía no hay nada aquí.')}</div></div></div>`;
+    return `<div data-slot="empty" class="cn-empty" style="padding:48px 12px"><div class="cn-empty-header"><div class="cn-empty-media cn-empty-media-icon">${ui.icon(nav.find((n) => n.label === appPage)?.icon || 'store')}</div><div class="cn-empty-title">${esc(appPage)}</div><div class="cn-empty-description">${esc(i.empty || T('Nothing here yet.'))}</div></div></div>`;
   };
   const twoLine = (a, b) => `<span class="cx-sb-two">${ui.text(esc(a), 'heading')}${ui.text(esc(b), 'caption')}</span>`;
   const render = () => {
@@ -152,18 +152,18 @@ export function appShell(root, i, core, on) {
       <div class="cn-sheet-overlay cx-app-scrim" data-app-scrim hidden></div>
       <main data-slot="sidebar-inset" class="cn-sidebar-inset cx-app-main">
         <header class="cx-app-top">
-          ${ui.button({ icon: 'menu-lines', variant: 'ghost', size: 'icon-sm', attrs: 'data-sb-toggle aria-label="Mostrar u ocultar el menú" title="Menú (Ctrl B)"' })}
+          ${ui.button({ icon: 'menu-lines', variant: 'ghost', size: 'icon-sm', attrs: `data-sb-toggle aria-label="${T('Show or hide the menu')}" title="${T('Menu')} (Ctrl B)"` })}
           <div data-slot="separator" class="cn-separator cn-separator-vertical cx-app-vsep"></div>
-          <nav aria-label="Migas"><ol data-slot="breadcrumb-list" class="cn-breadcrumb-list"><li class="cn-breadcrumb-item"><a class="cn-breadcrumb-link" href="#" data-home>${esc(i.brand?.short || i.brand?.name)}</a></li><li class="cn-breadcrumb-separator" role="presentation">${ui.icon('right')}</li><li class="cn-breadcrumb-item"><span class="cn-breadcrumb-page" aria-current="page">${esc(meta.title)}</span></li></ol></nav>
+          <nav aria-label="${T('Breadcrumb')}"><ol data-slot="breadcrumb-list" class="cn-breadcrumb-list"><li class="cn-breadcrumb-item"><a class="cn-breadcrumb-link" href="#" data-home>${esc(i.brand?.short || i.brand?.name)}</a></li><li class="cn-breadcrumb-separator" role="presentation">${ui.icon('right')}</li><li class="cn-breadcrumb-item"><span class="cn-breadcrumb-page" aria-current="page">${esc(meta.title)}</span></li></ol></nav>
           <span class="cx-grow"></span>
-          ${ui.button({ label: `${ui.icon('search')}<span class="cx-app-search-t">Buscar…</span><kbd data-slot="kbd" class="cn-kbd">⌘K</kbd>`, size: 'sm', cls: 'cx-app-search', attrs: 'data-cmd-open aria-keyshortcuts="Control+K Meta+K"' })}
+          ${ui.button({ label: `${ui.icon('search')}<span class="cx-app-search-t">${T('Search…')}</span><kbd data-slot="kbd" class="cn-kbd">⌘K</kbd>`, size: 'sm', cls: 'cx-app-search', attrs: 'data-cmd-open aria-keyshortcuts="Control+K Meta+K"' })}
         </header>
         <div class="cx-app-page">
           <div class="cx-app-head"><div class="cx-vstack" style="gap:2px">${ui.text(esc(meta.title), 'title', 'h1')}${meta.description ? ui.text(esc(meta.description), 'muted', 'p') : ''}</div><div class="cx-hstack">${list(meta.actions).map((a) => ui.button({ label: `${a.icon ? ui.icon(a.icon) : ''}${esc(a.label)}`, variant: a.variant || 'outline', size: 'sm', attrs: `data-app-act="${esc(a.label)}"` })).join('')}</div></div>
           ${pageBody()}
         </div>
         <div class="cn-sheet-overlay cx-app-scrim" data-sheet-scrim hidden></div>
-        <aside data-slot="sheet-content" data-side="right" class="cn-sheet-content cx-app-sheet" role="dialog" aria-modal="false" aria-label="Detalle" hidden></aside>
+        <aside data-slot="sheet-content" data-side="right" class="cn-sheet-content cx-app-sheet" role="dialog" aria-modal="false" aria-label="${T('Detail')}" hidden></aside>
       </main>`;
     syncTips();
   };
@@ -174,8 +174,8 @@ export function appShell(root, i, core, on) {
     const photos = (x) => (list(x.photos).length ? `<div class="cx-hstack">${list(x.photos).map((bg) => ui.avatar('', { shape: 'square', size: 'lg', bg })).join('')}</div>` : '');
     const items = list(r.sheet).map((x) => ui.item({ media: ui.itemMedia(ui.icon(x.icon || 'info')), title: esc(x.title), description: esc(x.description || ''), actions: aside(x), footer: photos(x) }));
     const tl = list(r.timeline);
-    if (tl.length) items.push(ui.item({ media: ui.itemMedia(ui.icon('clock')), title: 'Historial', footer: `<ol class="cx-timeline">${tl.map((t, k) => `<li ${k === tl.length - 1 ? 'data-now' : ''}>${ui.text(esc(t.label), k === tl.length - 1 ? 'label' : 'body')}${ui.text(esc(t.when), 'caption')}</li>`).join('')}</ol>` }));
-    s.innerHTML = `<div data-slot="sheet-header" class="cn-sheet-header"><div class="cx-hstack" style="justify-content:space-between;flex-wrap:nowrap"><div class="cx-vstack" style="gap:2px">${ui.text(esc(r.sheetTitle || r.title), 'title', 'h2')}${ui.text(esc(r.sheetDescription || r.description), 'muted', 'p')}</div>${ui.button({ icon: 'x', variant: 'ghost', size: 'icon-sm', attrs: 'data-sheet-close aria-label="Cerrar" title="Cerrar"' })}</div></div>
+    if (tl.length) items.push(ui.item({ media: ui.itemMedia(ui.icon('clock')), title: T('History'), footer: `<ol class="cx-timeline">${tl.map((t, k) => `<li ${k === tl.length - 1 ? 'data-now' : ''}>${ui.text(esc(t.label), k === tl.length - 1 ? 'label' : 'body')}${ui.text(esc(t.when), 'caption')}</li>`).join('')}</ol>` }));
+    s.innerHTML = `<div data-slot="sheet-header" class="cn-sheet-header"><div class="cx-hstack" style="justify-content:space-between;flex-wrap:nowrap"><div class="cx-vstack" style="gap:2px">${ui.text(esc(r.sheetTitle || r.title), 'title', 'h2')}${ui.text(esc(r.sheetDescription || r.description), 'muted', 'p')}</div>${ui.button({ icon: 'x', variant: 'ghost', size: 'icon-sm', attrs: `data-sheet-close aria-label="${T('Close')}" title="${T('Close')}"` })}</div></div>
       <div class="cx-app-sheet-body"><div data-slot="item-group" class="cn-item-group">${items.join(ui.itemSeparator())}</div></div>
       ${r.primary || r.secondary ? `<div data-slot="sheet-footer" class="cn-sheet-footer">${r.secondary ? ui.button({ label: esc(r.secondary), size: 'default', cls: 'cx-exit', attrs: `data-app-act="${esc(r.secondary)}"` }) : ''}${r.primary ? ui.button({ label: `${esc(r.primary)}${ui.icon('right')}`, variant: 'default', size: 'default', cls: 'cx-go', attrs: `data-app-act="${esc(r.primary)}"` }) : ''}</div>` : ''}`;
     s.hidden = false; sheetScrim().hidden = false;
@@ -190,7 +190,8 @@ export function appShell(root, i, core, on) {
     if (app.dataset.collapsed) delete app.dataset.collapsed; else app.dataset.collapsed = '1';
     const g = $('.cx-app-sb', app); g.dataset.state = app.dataset.collapsed ? 'collapsed' : 'expanded'; g.dataset.collapsible = app.dataset.collapsed ? 'icon' : ''; syncTips();
   };
-  const go = (page) => { appPage = page; const col = app.dataset.collapsed; render(); if (col) app.dataset.collapsed = col; app.removeAttribute('data-sb-open'); on.navigate?.(page); };
+  // a section opened from the menu comes in with a short fade (kit.css .cx-app-page[data-in]); the first one is just there
+  const go = (page) => { appPage = page; const col = app.dataset.collapsed; render(); if (col) app.dataset.collapsed = col; app.removeAttribute('data-sb-open'); app.querySelector('.cx-app-page')?.setAttribute('data-in', ''); on.navigate?.(page); };
   app.addEventListener('click', (e) => {
     if (e.target.closest('[data-sb-toggle]')) return toggleSidebar();
     if (e.target.closest('[data-app-scrim]')) return toggleSidebar();
@@ -211,7 +212,7 @@ export function appShell(root, i, core, on) {
 
   // Command (⌘K): groups of results filtered as you type, arrows + Enter
   const CMD = () => [
-    ['Acciones', commands.map((c) => [c.icon || 'right', c.label, () => (c.page ? go(c.page) : on.action?.(c.label))])],
+    [T('Actions'), commands.map((c) => [c.icon || 'right', c.label, () => (c.page ? go(c.page) : on.action?.(c.label))])],
     ...[...new Set(rows.map((r) => r.page))].map((p) => [p, rows.filter((r) => r.page === p).map((r) => [nav.find((n) => n.label === p)?.icon || 'user', r.command || r.title, () => { go(p); if (r.sheet) { app.scrollIntoView({ block: 'center', behavior: 'smooth' }); openRow(r.id); } }])]),
   ];
   let cmdItems = [], cmdHl = 0;
@@ -219,15 +220,15 @@ export function appShell(root, i, core, on) {
   const paint = (q = '') => {
     const t = fold(q.trim()); cmdItems = [];
     const html = CMD().map(([g, items]) => { const hits = items.filter(([, l]) => !t || fold(l).includes(t)); if (!hits.length) return ''; return `<div data-slot="command-group" class="cn-command-group" role="group" aria-label="${esc(g)}"><div class="cx-cmd-label">${ui.text(esc(g), 'caption')}</div>${hits.map((h) => { cmdItems.push(h); const k = cmdItems.length - 1; return `<div data-slot="command-item" class="cn-command-item" role="option" id="cmd-${k}" data-ci="${k}" ${k === cmdHl ? 'data-selected="true" aria-selected="true"' : ''}>${ui.icon(h[0])}${ui.text(esc(h[1]))}</div>`; }).join('')}</div>`; }).join('');
-    $('.cx-cmd-list', body).innerHTML = html || `<div data-slot="command-empty" class="cn-command-empty">Nada con «${esc(q)}»</div>`;
+    $('.cx-cmd-list', body).innerHTML = html || `<div data-slot="command-empty" class="cn-command-empty">${T('Nothing with “{0}”', esc(q))}</div>`;
     $('.cx-cmd-in', body).setAttribute('aria-activedescendant', cmdItems.length ? `cmd-${cmdHl}` : '');
     $(`#cmd-${cmdHl}`, body)?.scrollIntoView({ block: 'nearest' });
   };
   CONTENT[kind] = () => {
-    $('#mdl-title').textContent = 'Buscar'; $('#mdl-desc').textContent = '';
+    $('#mdl-title').textContent = T('Search'); $('#mdl-desc').textContent = '';
     body.dataset.cmd = kind;
-    body.innerHTML = `<div data-slot="command" class="cn-command cx-cmd"><div data-slot="command-input-wrapper" class="cn-command-input-wrapper"><div data-slot="input-group" class="cn-input-group cn-command-input-group"><input data-slot="input-group-control" class="cn-command-input cn-input-group-input cx-cmd-in" placeholder="${esc(i.placeholder || 'Busca o salta a…')}" role="combobox" aria-expanded="true" aria-controls="cmd-list" autocomplete="off"><div class="cn-input-group-addon cn-input-group-addon-align-inline-start"><svg class="cn-command-input-icon"><use href="#search"/></svg></div></div></div><div data-slot="command-list" class="cn-command-list cx-cmd-list" id="cmd-list" role="listbox"></div></div>`;
-    foot.innerHTML = `<span class="cx-hstack cx-cmd-help">${ui.text('<kbd class="cn-kbd">↑</kbd><kbd class="cn-kbd">↓</kbd> moverte', 'caption')}${ui.text('<kbd class="cn-kbd">Enter</kbd> abrir', 'caption')}${ui.text('<kbd class="cn-kbd">Esc</kbd> cerrar', 'caption')}</span>`;
+    body.innerHTML = `<div data-slot="command" class="cn-command cx-cmd"><div data-slot="command-input-wrapper" class="cn-command-input-wrapper"><div data-slot="input-group" class="cn-input-group cn-command-input-group"><input data-slot="input-group-control" class="cn-command-input cn-input-group-input cx-cmd-in" placeholder="${esc(i.placeholder || T('Search or jump to…'))}" role="combobox" aria-expanded="true" aria-controls="cmd-list" autocomplete="off"><div class="cn-input-group-addon cn-input-group-addon-align-inline-start"><svg class="cn-command-input-icon"><use href="#search"/></svg></div></div></div><div data-slot="command-list" class="cn-command-list cx-cmd-list" id="cmd-list" role="listbox"></div></div>`;
+    foot.innerHTML = `<span class="cx-hstack cx-cmd-help">${ui.text(`<kbd class="cn-kbd">↑</kbd><kbd class="cn-kbd">↓</kbd> ${T('move')}`, 'caption')}${ui.text(`<kbd class="cn-kbd">Enter</kbd> ${T('open')}`, 'caption')}${ui.text(`<kbd class="cn-kbd">Esc</kbd> ${T('close')}`, 'caption')}</span>`;
     cmdHl = 0; paint();
     setTimeout(() => $('.cx-cmd-in', body)?.focus(), 30);
   };
@@ -251,9 +252,11 @@ export function appShell(root, i, core, on) {
 // ── booking picker ──
 // i: week [{days [0..6], hours ["09:00", …]}] (what the shop offers each weekday), taken [{day, hours}] (day = days
 //    from today or "yyyy-mm-dd"; hours empty = the whole day is booked), wait (ms the server takes: shows the
-//    skeleton), cta; on.select("yyyy-mm-dd HH:MM") on «Continuar»
+//    skeleton), cta; on.select("yyyy-mm-dd HH:MM") on “Continue”
 export function booking(root, i, core, on) {
-  const { $, $$, today, addDays, DAY, MON, DAYLONG } = core;
+  const { $, $$, today, addDays } = core, L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a);
+  const W = core.kit.words(L), DAY = W.dayS, MON = W.mon, DAYLONG = W.dayL, es = L === 'es';
+  const longDay = (d) => (es ? `${DAYLONG[d.getDay()]} ${d.getDate()} de ${MON[d.getMonth()]}` : `${DAYLONG[d.getDay()]}, ${MON[d.getMonth()]} ${d.getDate()}`);
   const key = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
   const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
   const dayOf = (v) => (/^-?\d+$/.test(String(v)) ? addDays(today, Number(v)) : new Date(String(v) + 'T00:00:00'));
@@ -269,13 +272,13 @@ export function booking(root, i, core, on) {
   };
   root.innerHTML = `<div class="cx-book">
     <div class="cx-book-head">
-      <button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-icon-sm group/button" data-wk="-1" aria-label="Semana anterior" title="Semana anterior"><svg><use href="#left"/></svg></button>
+      <button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-icon-sm group/button" data-wk="-1" aria-label="${T('Previous week')}" title="${T('Previous week')}"><svg><use href="#left"/></svg></button>
       <b class="cx-wk-label" aria-live="polite"></b>
-      <button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-icon-sm group/button" data-wk="1" aria-label="Semana siguiente" title="Semana siguiente"><svg><use href="#right"/></svg></button>
+      <button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-icon-sm group/button" data-wk="1" aria-label="${T('Next week')}" title="${T('Next week')}"><svg><use href="#right"/></svg></button>
     </div>
-    <div class="cx-week" role="group" aria-label="Día"></div>
+    <div class="cx-week" role="group" aria-label="${T('Day')}"></div>
     <div class="cx-hours" aria-live="polite"></div>
-    <div class="cx-book-sum"><span class="cx-book-say">Elige un día y una hora</span><button data-slot="button" class="cn-button cn-button-variant-default cn-button-size-default group/button cx-book-go" disabled>${esc(i.cta || 'Continuar')}</button></div>
+    <div class="cx-book-sum"><span class="cx-book-say">${T('Pick a day and a time')}</span><button data-slot="button" class="cn-button cn-button-variant-default cn-button-size-default group/button cx-book-go" disabled>${esc(T(i.cta || 'Continue'))}</button></div>
   </div>`;
   let weekStart = addDays(today, -((today.getDay() + 6) % 7)); // monday
   let picked = { day: null, hour: null }, loadTimer = 0;
@@ -283,12 +286,12 @@ export function booking(root, i, core, on) {
   const firstOpen = (from) => { for (let k = 0; k < 60; k++) { const d = addDays(from, k); const s = slotsFor(d); if (s && s.length) return d; } return null; };
   const sum = () => {
     const d = picked.day;
-    $('.cx-book-say', root).innerHTML = d ? `<b>${DAYLONG[d.getDay()]} ${d.getDate()} de ${MON[d.getMonth()]}</b>${picked.hour ? ` · <b>${picked.hour}</b>` : ' · elige una hora'}` : 'Elige un día y una hora';
+    $('.cx-book-say', root).innerHTML = d ? `<b>${longDay(d)}</b>${picked.hour ? ` · <b>${picked.hour}</b>` : ` · ${T('pick a time')}`}` : T('Pick a day and a time');
     go.disabled = !(d && picked.hour);
   };
   const paintWeek = () => {
     const end = addDays(weekStart, 6);
-    $('.cx-wk-label', root).textContent = weekStart.getMonth() === end.getMonth() ? `${weekStart.getDate()} al ${end.getDate()} de ${MON[end.getMonth()]}` : `${weekStart.getDate()} de ${MON[weekStart.getMonth()]} al ${end.getDate()} de ${MON[end.getMonth()]}`;
+    $('.cx-wk-label', root).textContent = es ? (weekStart.getMonth() === end.getMonth() ? `${weekStart.getDate()} al ${end.getDate()} de ${MON[end.getMonth()]}` : `${weekStart.getDate()} de ${MON[weekStart.getMonth()]} al ${end.getDate()} de ${MON[end.getMonth()]}`) : (weekStart.getMonth() === end.getMonth() ? `${MON[end.getMonth()]} ${weekStart.getDate()}–${end.getDate()}` : `${MON[weekStart.getMonth()]} ${weekStart.getDate()} – ${MON[end.getMonth()]} ${end.getDate()}`);
     $('[data-wk="-1"]', root).disabled = weekStart <= today;
     weekEl.innerHTML = '';
     for (let k = 0; k < 7; k++) {
@@ -297,9 +300,9 @@ export function booking(root, i, core, on) {
       b.className = 'cn-button cn-button-variant-outline cx-size-tile cx-day'; b.disabled = s === null;
       if (s && !s.length) b.dataset.full = '';
       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>`;
+      // 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) ? T('today') : DAY[d.getDay()]} ${d.getDate()}, ${DAYLONG[d.getDay()]}${s === null ? `, ${T('closed')}` : s.length ? `, ${T('{0} times', s.length)}` : `, ${T('no times')}`}`);
+      b.innerHTML = `<small>${key(d) === key(today) ? T('today') : DAY[d.getDay()]}</small> <b>${d.getDate()}</b><i></i>`;
       b.onclick = () => pickDay(d);
       weekEl.appendChild(b);
     }
@@ -308,17 +311,17 @@ export function booking(root, i, core, on) {
     const s = slotsFor(d) || [];
     if (!s.length) {
       const next = firstOpen(addDays(d, 1));
-      hours.innerHTML = `<div class="cx-hours-empty"><svg><use href="#caloff"/></svg><span>No quedan horarios este día.</span>${next ? `<button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-jump>Ver el ${DAYLONG[next.getDay()].toLowerCase()} ${next.getDate()}</button>` : ''}</div>`;
+      hours.innerHTML = `<div class="cx-hours-empty"><svg><use href="#caloff"/></svg><span>${T('No times left this day.')}</span>${next ? `<button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-jump>${T('See {0} {1}', es ? `el ${DAYLONG[next.getDay()].toLowerCase()}` : DAYLONG[next.getDay()], next.getDate())}</button>` : ''}</div>`;
       if (next) $('[data-jump]', hours).onclick = () => { if (next > addDays(weekStart, 6)) weekStart = addDays(next, -((next.getDay() + 6) % 7)); pickDay(next); };
       return;
     }
     const am = s.filter((h) => h < '13:00'), pm = s.filter((h) => h >= '13:00');
     // the part of the day is a label, not a heading: the picker sits inside pages whose outline it must not break
     const grid = (label, hs) => hs.length ? `<p class="cx-hours-h">${label}</p><div class="cx-hour-grid">${hs.map((h) => `<button class="cn-button cn-button-variant-outline cn-button-size-sm cx-hour" aria-pressed="${h === picked.hour}">${h}</button>`).join('')}</div>` : '';
-    hours.innerHTML = `<div class="cx-panel" style="display:flex;flex-direction:column;gap:10px">${grid('Mañana', am)}${grid('Tarde', pm)}</div>`;
+    hours.innerHTML = `<div class="cx-panel" style="display:flex;flex-direction:column;gap:10px">${grid(T('Morning'), am)}${grid(T('Afternoon'), pm)}</div>`;
     $$('.cx-hour', hours).forEach((b) => b.onclick = () => { picked.hour = b.textContent; $$('.cx-hour', hours).forEach((x) => x.setAttribute('aria-pressed', x === b)); sum(); });
   };
-  const skeleton = () => { hours.innerHTML = `<h4 style="visibility:hidden">Mañana</h4><div class="cx-hour-grid">${'<div data-slot="skeleton" class="cn-skeleton cx-hour-skel"></div>'.repeat(8)}</div>`; };
+  const skeleton = () => { hours.innerHTML = `<h4 style="visibility:hidden">${T('Morning')}</h4><div class="cx-hour-grid">${'<div data-slot="skeleton" class="cn-skeleton cx-hour-skel"></div>'.repeat(8)}</div>`; };
   function pickDay(d) {
     if (!d) return;
     picked = { day: d, hour: null }; paintWeek(); sum();
@@ -331,12 +334,14 @@ export function booking(root, i, core, on) {
   paintWeek(); pickDay(firstOpen(today));
 }
 
-// ── «Nueva cita» in 4 steps ──
+// ── “New appointment” in 4 steps ──
 // i: clients [{name, description}], services [{name, duration, price}], hours ["09:00", …], closed [0] (weekdays),
 //    note (under the summary); opened by start(); on.create(json {client, service, day, hour}) · on.close()
 export function wizard(core, i, on) {
-  const { ui, $, $$, openModal, closeModal, CONTENT, body, foot, mdl, easeHeight, today, addDays, DAY, MON, DAYLONG, money0 } = core;
-  const STEPS = ['Cliente', 'Servicio', 'Día y hora', 'Confirmar'];
+  const { ui, $, $$, openModal, closeModal, CONTENT, body, foot, mdl, easeHeight, today, addDays, money0 } = core;
+  const L = i.lang || core.langOf(document.body), T = (k, ...a) => core.t(L, k, ...a), W = core.kit.words(L), DAY = W.dayS, MON = W.mon, DAYLONG = W.dayL;
+  const longDay = (d) => (L === 'es' ? `${DAYLONG[d.getDay()]} ${d.getDate()} de ${MON[d.getMonth()]}` : `${DAYLONG[d.getDay()]}, ${MON[d.getMonth()]} ${d.getDate()}`);
+  const STEPS = [T('Client'), T('Service'), T('Day and time'), T('Confirm')];
   const clients = list(i.clients), services = list(i.services), hoursList = list(i.hours), closed = list(i.closed);
   const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
   const days = () => Array.from({ length: 10 }, (_, k) => addDays(today, k + 1)).filter((d) => !closed.includes(d.getDay())).slice(0, 5);
@@ -344,29 +349,29 @@ export function wizard(core, i, on) {
   const kind = `wizard-${Math.random().toString(36).slice(2, 8)}`;
   const valid = () => [wiz.client != null, wiz.service != null, wiz.day != null && wiz.hour != null, true][wiz.at];
   const clientRows = () => clients.map((c, k) => [c, k]).filter(([c]) => !q || core.fold(`${c.name} ${c.description}`).includes(core.fold(q)))
-    .map(([c, k]) => ui.choice({ media: ui.itemMedia(ui.avatar(c.name), 'default'), title: esc(c.name), description: esc(c.description), checked: wiz.client === k, attrs: `data-v="${k}"` })).join('') || ui.text(`Nadie con «${esc(q)}»`, 'muted', 'p');
+    .map(([c, k]) => ui.choice({ media: ui.itemMedia(ui.avatar(c.name), 'default'), title: esc(c.name), description: esc(c.description), checked: wiz.client === k, attrs: `data-v="${k}"` })).join('') || ui.text(T('Nobody with “{0}”', esc(q)), 'muted', 'p');
   const stepBody = () => {
     const at = wiz.at;
-    if (at === 0) return `<div class="cx-vstack" style="gap:12px">${ui.field({ id: 'wz-q', label: 'Busca o elige', control: ui.input({ id: 'wz-q', placeholder: 'Nombre o teléfono', value: esc(q) }) })}<div class="cx-vstack" role="radiogroup" aria-label="Cliente" data-wz="client">${clientRows()}</div></div>`;
-    if (at === 1) return `<div class="cx-vstack" role="radiogroup" aria-label="Servicio" data-wz="service">${services.map((s, k) => ui.choice({ media: ui.itemMedia(ui.icon(s.icon || 'scissors')), title: esc(s.name), description: esc(s.duration), aside: ui.text(money0(Number(s.price) || 0), 'strong'), checked: wiz.service === k, attrs: `data-v="${k}"` })).join('')}</div>`;
-    if (at === 2) return `<div class="cx-vstack" style="gap:14px">${ui.text('Día', 'label')}<div class="cx-wz-days" role="group" aria-label="Día">${days().map((d, k) => `<button class="cn-button cn-button-variant-outline cx-size-tile cx-day" aria-pressed="${wiz.day === k}" data-wz-day="${k}"><small>${DAY[d.getDay()]}</small><b>${d.getDate()}</b><i></i></button>`).join('')}</div>${ui.text('Hora', 'label')}<div class="cx-hour-grid" role="group" aria-label="Hora">${hoursList.map((h) => `<button class="cn-button cn-button-variant-outline cn-button-size-sm cx-hour" aria-pressed="${wiz.hour === h}" data-wz-hour="${h}">${h}</button>`).join('')}</div></div>`;
+    if (at === 0) return `<div class="cx-vstack" style="gap:12px">${ui.field({ id: 'wz-q', label: T('Search or pick'), control: ui.input({ id: 'wz-q', placeholder: T('Name or phone'), value: esc(q) }) })}<div class="cx-vstack" role="radiogroup" aria-label="${T('Client')}" data-wz="client">${clientRows()}</div></div>`;
+    if (at === 1) return `<div class="cx-vstack" role="radiogroup" aria-label="${T('Service')}" data-wz="service">${services.map((s, k) => ui.choice({ media: ui.itemMedia(ui.icon(s.icon || 'scissors')), title: esc(s.name), description: esc(s.duration), aside: ui.text(money0(Number(s.price) || 0), 'strong'), checked: wiz.service === k, attrs: `data-v="${k}"` })).join('')}</div>`;
+    if (at === 2) return `<div class="cx-vstack" style="gap:14px">${ui.text(T('Day'), 'label')}<div class="cx-wz-days" role="group" aria-label="${T('Day')}">${days().map((d, k) => `<button class="cn-button cn-button-variant-outline cx-size-tile cx-day" aria-pressed="${wiz.day === k}" data-wz-day="${k}"><small>${DAY[d.getDay()]}</small><b>${d.getDate()}</b><i></i></button>`).join('')}</div>${ui.text('Hora', 'label')}<div class="cx-hour-grid" role="group" aria-label="${T('Hour')}">${hoursList.map((h) => `<button class="cn-button cn-button-variant-outline cn-button-size-sm cx-hour" aria-pressed="${wiz.hour === h}" data-wz-hour="${h}">${h}</button>`).join('')}</div></div>`;
     const c = clients[wiz.client], s = services[wiz.service], d = days()[wiz.day];
     return `<div data-slot="item-group" class="cn-item-group cx-wz-sum">${[
-      ui.item({ media: ui.itemMedia(ui.avatar(c.name), 'default'), title: esc(c.name), description: 'Cliente' }),
+      ui.item({ media: ui.itemMedia(ui.avatar(c.name), 'default'), title: esc(c.name), description: T('Client') }),
       ui.item({ media: ui.itemMedia(ui.icon(s.icon || 'scissors')), title: esc(s.name), description: esc(s.duration), actions: ui.text(money0(Number(s.price) || 0), 'strong') }),
-      ui.item({ media: ui.itemMedia(ui.icon('cal')), title: `${DAYLONG[d.getDay()]} ${d.getDate()} de ${MON[d.getMonth()]}`, description: wiz.hour }),
+      ui.item({ media: ui.itemMedia(ui.icon('cal')), title: longDay(d), description: wiz.hour }),
     ].join(ui.itemSeparator())}</div>${i.note ? ui.text(esc(i.note), 'caption', 'p') : ''}`;
   };
   const paintFoot = () => {
     const last = wiz.at === STEPS.length - 1;
-    foot.innerHTML = ui.button({ label: wiz.at === 0 ? 'Cancelar' : 'Atrás', size: 'default', attrs: wiz.at === 0 ? 'data-dismiss' : 'data-wz-back', cls: 'cx-exit' })
-      + ui.button({ label: last ? 'Crear cita' : 'Siguiente<svg><use href="#right"/></svg>', variant: 'default', size: 'default', attrs: `data-wz-next ${valid() ? '' : 'disabled'}`, cls: 'cx-go' });
+    foot.innerHTML = ui.button({ label: wiz.at === 0 ? T('Cancel') : T('Back'), size: 'default', attrs: wiz.at === 0 ? 'data-dismiss' : 'data-wz-back', cls: 'cx-exit' })
+      + ui.button({ label: last ? T('Create appointment') : `${T('Next')}<svg><use href="#right"/></svg>`, variant: 'default', size: 'default', attrs: `data-wz-next ${valid() ? '' : 'disabled'}`, cls: 'cx-go' });
   };
   const render = (dir = 0) => {
-    $('#mdl-title').textContent = i.title || 'Nueva cita';
+    $('#mdl-title').textContent = T(i.title || 'New appointment');
     $('#mdl-desc').innerHTML = ui.stepper(STEPS, wiz.at);
     const paint = () => { body.innerHTML = stepBody(); };
-    if (dir) { easeHeight(mdl, paint); body.animate([{ opacity: 0, transform: `translateX(${dir * 14}px)` }, { opacity: 1, transform: 'none' }], { duration: 200, easing: 'cubic-bezier(.22, 1, .36, 1)' }); } else paint();
+    if (dir) { easeHeight(mdl, paint); body.animate([{ opacity: 0, transform: `translateX(${dir * 14}px)` }, { opacity: 1, transform: 'none' }], { duration: 200, easing: 'cubic-bezier(.23, 1, .32, 1)' }); } else paint();
     paintFoot();
   };
   CONTENT[kind] = () => { wiz = { at: 0, client: null, service: null, day: null, hour: null }; q = ''; body.dataset.wizard = kind; render(); };
@@ -389,7 +394,7 @@ export function wizard(core, i, on) {
       setTimeout(() => { closeModal(); wiz = null; }, 700);
     }
   });
-  // closing by Esc, the overlay or «Cancelar» tells the page, so its own «open» state can go back to false
+  // closing by Esc, the overlay or “Cancel” tells the page, so its own “open” state can go back to false
   new MutationObserver(() => { if (mdl.hidden && body.dataset.wizard === kind) { delete body.dataset.wizard; wiz = null; on.close?.(); } }).observe(mdl, { attributes: true, attributeFilter: ['hidden'] });
   return { start: () => openModal(kind, 'auto') };
 }

package/registry/kit/table.js

@@ -1,24 +1,26 @@
 // @muten/shadcn · DataTable (kit). The reference artifact's DataTable, made generic: columns, rows, filters, statuses
 // 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 «buscar + Filtros» sheet, and a narrow box becoming Items.
+// 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}]
 //   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 ["cita", "citas"] · bulk [{id, label, variant}]
+//   statuses [{id, label, tone: ok|wait|info|bad}] · noun ["appointment", "appointments"] · bulk [{id, label, variant}]
 //   on.action(json {action, ids})
 export function dataTable(root, cfg, core, on) {
   const { ui, $, $$, lib, place, show, hide, easeHeight, setCheck, CB_CHECK, money0, fold, reformat, groupThousands, today, addDays, DAY, openModal, CONTENT, body, foot } = core;
   const list = (v) => (Array.isArray(v) ? v : []);
   const COLS = list(cfg.columns), STATUS = Object.fromEntries(list(cfg.statuses).map((s) => [s.id, s]));
-  const [ONE, MANY] = list(cfg.noun).length === 2 ? cfg.noun : ['fila', 'filas'];
+  // its language: the nearest lang (the page's), English by default
+  const L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a), DAYS = core.kit.words(L).dayS;
+  const [ONE, MANY] = (list(cfg.noun).length === 2 ? cfg.noun : ['row', 'rows']).map((x) => T(x));
   const ST_ORDER = list(cfg.statuses).map((s) => s.id);
   const asDate = (v) => { const s = String(v ?? ''); const m = /^\+(\d+)(?:T(\d\d:\d\d))?$/.exec(s); if (m) { const d = addDays(today, +m[1]); if (m[2]) { const [h, mi] = m[2].split(':'); d.setHours(+h, +mi); } return d; } return new Date(s); };
   const DT = list(cfg.rows).map((r, i) => ({ id: r.id ?? i, ...r }));
   const colOf = (type) => COLS.find((c) => c.type === type);
   const dateCol = colOf('date'), statusCol = colOf('status');
-  const whenText = (v) => { const d = asDate(v); return `${DAY[d.getDay()]} ${d.getDate()} · ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`; };
-  const DATE_PRESETS = { today: ['Hoy', (d) => +d === +today], tomorrow: ['Mañana', (d) => +d === +addDays(today, 1)], week: ['Próximos 7 días', (d) => d >= today && d < addDays(today, 7)], later: ['Más adelante', (d) => d >= addDays(today, 7)] };
+  const whenText = (v) => { const d = asDate(v); return `${DAYS[d.getDay()]} ${d.getDate()} · ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`; };
+  const DATE_PRESETS = { today: [T('Today'), (d) => +d === +today], tomorrow: [T('Tomorrow'), (d) => +d === +addDays(today, 1)], week: [T('Next 7 days'), (d) => d >= today && d < addDays(today, 7)], later: [T('Later'), (d) => d >= addDays(today, 7)] };
   const dayOf = (v) => { const d = asDate(v); d.setHours(0, 0, 0, 0); return d; };
   const FILTERS = list(cfg.filters).map((f) => ({
     ...f,
@@ -38,7 +40,7 @@ export function dataTable(root, cfg, core, on) {
   const firstSort = dateCol ? { key: dateCol.key, dir: 1 } : { key: COLS[0]?.key, dir: 1 };
   const bulk = list(cfg.bulk);
   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="Filtros"></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: 'Quitar selección', variant: 'ghost', size: 'xs', attrs: 'data-dt-unselect' })}</div></div></div><div class="cx-dt-scroll cx-scroll"><table class="cx-dt"><thead><tr><th class="cx-dt-check">${cbHtml('Seleccionar todas', 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><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>`;
   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));
@@ -51,37 +53,37 @@ export function dataTable(root, cfg, core, on) {
   const paintTools = () => {
     if (dtMobile) {
       const n = activeCount(), focused = document.activeElement?.dataset?.filter === searchF?.id;
-      dtTools.innerHTML = searchHtml() + ui.button({ label: `${ui.icon('filter')}Filtros${n ? ui.badge(String(n), { variant: 'default' }) : ''}`, size: 'sm', cls: 'cx-fbtn-m', attrs: 'data-fmobile aria-haspopup="dialog"' });
+      dtTools.innerHTML = searchHtml() + ui.button({ label: `${ui.icon('filter')}${T('Filters')}${n ? ui.badge(String(n), { variant: 'default' }) : ''}`, size: 'sm', cls: 'cx-fbtn-m', attrs: 'data-fmobile aria-haspopup="dialog"' });
       if (focused) { const i = dtTools.querySelector('[data-filter]'); i.focus(); i.setSelectionRange(i.value.length, i.value.length); }
       return;
     }
     dtTools.innerHTML = FILTERS.map((f) => (f.type === 'search' ? searchHtml()
       : ui.button({ label: `${isActive(f) ? '' : ui.icon('plus')}${f.label}${isActive(f) ? `<span data-slot="separator" class="cn-separator cn-separator-vertical cx-fsep"></span>${ui.badge(summary(f), { variant: 'secondary' })}` : ''}`, size: 'sm', cls: `cx-fbtn ${isActive(f) ? '' : 'cx-dashed'}`, attrs: `data-fopen="${f.id}" aria-haspopup="dialog" aria-expanded="false"` }))).join('')
-      + (FILTERS.some(isActive) ? ui.button({ label: 'Limpiar', size: 'sm', variant: 'ghost', attrs: 'data-fclear' }) : '');
+      + (FILTERS.some(isActive) ? ui.button({ label: T('Clear'), size: 'sm', variant: 'ghost', attrs: 'data-fclear' }) : '');
   };
   const fPop = document.createElement('div'); fPop.className = 'cn-popover-content pg-pop cx-fpop'; fPop.setAttribute('role', 'dialog'); fPop.hidden = true; lib.appendChild(fPop);
   let fOpen = null, fBtn = null;
   const fClose = (refocus) => { if (!fOpen) return; hide(fPop, 120); fBtn?.setAttribute('aria-expanded', 'false'); if (refocus) fBtn?.focus(); fOpen = null; };
-  const rangeInputs = (f, prefix) => { const v = fState[f.id] || [null, null]; return `<div class="cx-frange">${['Desde', 'Hasta'].map((lab, i) => ui.field({ id: `${prefix}${f.id}${i}`, label: lab, control: `<div data-slot="input-group" class="cn-input-group"><div class="cn-input-group-addon cn-input-group-addon-align-inline-start">$</div><input class="cn-input cn-input-group-input cx-num" id="${prefix}${f.id}${i}" inputmode="numeric" data-frange="${i}" data-frid="${f.id}" value="${v[i] != null ? groupThousands(String(v[i]), '.') : ''}" placeholder="${i ? 'Sin tope' : '0'}"></div>` })).join('')}</div>`; };
+  const rangeInputs = (f, prefix) => { const v = fState[f.id] || [null, null]; return `<div class="cx-frange">${[T('From'), T('To')].map((lab, i) => ui.field({ id: `${prefix}${f.id}${i}`, label: lab, control: `<div data-slot="input-group" class="cn-input-group"><div class="cn-input-group-addon cn-input-group-addon-align-inline-start">$</div><input class="cn-input cn-input-group-input cx-num" id="${prefix}${f.id}${i}" inputmode="numeric" data-frange="${i}" data-frid="${f.id}" value="${v[i] != null ? groupThousands(String(v[i]), '.') : ''}" placeholder="${i ? T('No limit') : '0'}"></div>` })).join('')}</div>`; };
   const facetItems = (f, sheet) => { const counts = new Map(); DT.filter((r) => passes(r, f.id)).forEach((r) => counts.set(f.read(r), (counts.get(f.read(r)) || 0) + 1)); return [...new Set(DT.map(f.read))].map((v) => sheet
     ? `<button type="button" class="cn-command-item cx-fsheet-opt" role="checkbox" aria-checked="${fState[f.id].has(v)}" data-fs-facet="${f.id}" data-fval="${v}"><span data-slot="checkbox" class="cn-checkbox" data-state="${fState[f.id].has(v) ? 'checked' : 'unchecked'}"><span class="cn-checkbox-indicator"><svg class="cb-mark" viewBox="0 0 24 24">${CB_CHECK}</svg></span></span>${ui.text(f.name(v))}<span class="cx-fcount">${counts.get(v) || 0}</span></button>`
     : `<div data-slot="command-item" class="cn-command-item group/command-item" role="option" aria-selected="${fState[f.id].has(v)}" data-fval="${v}" tabindex="-1"><span data-slot="checkbox" class="cn-checkbox" data-state="${fState[f.id].has(v) ? 'checked' : 'unchecked'}"><span class="cn-checkbox-indicator"><svg class="cb-mark" viewBox="0 0 24 24">${CB_CHECK}</svg></span></span>${ui.text(f.name(v))}<span class="cx-fcount">${counts.get(v) || 0}</span></div>`).join(''); };
   const popBody = (f) => {
-    if (f.type === 'facet') return `<div data-slot="command" class="cn-command"><div data-slot="command-input-wrapper" class="cn-command-input-wrapper"><div data-slot="input-group" class="cn-input-group cn-command-input-group group/input-group"><input data-slot="input-group-control" class="cn-command-input cn-input-group-input" placeholder="${f.label}…" data-fsearch aria-label="Buscar en ${f.label}"><div class="cn-input-group-addon cn-input-group-addon-align-inline-start" data-align="inline-start"><svg class="cn-command-input-icon"><use href="#search"/></svg></div></div></div><div data-slot="command-list" class="cn-command-list" role="listbox" aria-multiselectable="true">${facetItems(f)}</div>${fState[f.id].size ? `<div data-slot="separator" class="cn-separator cn-separator-horizontal"></div><button class="cn-command-item cx-fclear-one" data-fclear-one>Quitar filtro</button>` : ''}</div>`;
-    if (f.type === 'date') return `<div class="cx-vstack" style="gap:4px">${Object.entries(DATE_PRESETS).map(([k, [n]]) => ui.button({ label: n, variant: 'ghost', size: 'sm', cls: 'cx-fill cx-left', attrs: `aria-pressed="${fState[f.id] === k}" data-fdate="${k}"` })).join('')}${fState[f.id] ? ui.button({ label: 'Cualquier fecha', variant: 'ghost', size: 'sm', cls: 'cx-fill cx-left', attrs: 'data-fdate=""' }) : ''}</div>`;
+    if (f.type === 'facet') return `<div data-slot="command" class="cn-command"><div data-slot="command-input-wrapper" class="cn-command-input-wrapper"><div data-slot="input-group" class="cn-input-group cn-command-input-group group/input-group"><input data-slot="input-group-control" class="cn-command-input cn-input-group-input" placeholder="${f.label}…" data-fsearch aria-label="${T('Search in {0}', f.label)}"><div class="cn-input-group-addon cn-input-group-addon-align-inline-start" data-align="inline-start"><svg class="cn-command-input-icon"><use href="#search"/></svg></div></div></div><div data-slot="command-list" class="cn-command-list" role="listbox" aria-multiselectable="true">${facetItems(f)}</div>${fState[f.id].size ? `<div data-slot="separator" class="cn-separator cn-separator-horizontal"></div><button class="cn-command-item cx-fclear-one" data-fclear-one>${T('Remove filter')}</button>` : ''}</div>`;
+    if (f.type === 'date') return `<div class="cx-vstack" style="gap:4px">${Object.entries(DATE_PRESETS).map(([k, [n]]) => ui.button({ label: n, variant: 'ghost', size: 'sm', cls: 'cx-fill cx-left', attrs: `aria-pressed="${fState[f.id] === k}" data-fdate="${k}"` })).join('')}${fState[f.id] ? ui.button({ label: T('Any date'), variant: 'ghost', size: 'sm', cls: 'cx-fill cx-left', attrs: 'data-fdate=""' }) : ''}</div>`;
     if (f.type === 'range') return `<div class="cx-vstack" style="gap:10px">${ui.text(f.label, 'label')}${rangeInputs(f, 'f-')}</div>`;
     return '';
   };
   const fOpenPop = (id, btn) => { fClose(); fOpen = id; fBtn = btn; const f = FILTERS.find((x) => x.id === id); fPop.innerHTML = popBody(f); fPop.hidden = false; place(fPop, btn, 'start', 6); show(fPop); btn.setAttribute('aria-expanded', 'true'); (fPop.querySelector('[data-fsearch], input, [data-fdate], .cn-command-item') || fPop).focus({ preventScroll: true }); };
   const refresh = (keepPop) => { dtPaint(); paintTools(); if (keepPop && fOpen) { const f = FILTERS.find((x) => x.id === fOpen); const scroll = fPop.querySelector('.cn-command-list')?.scrollTop; const focused = document.activeElement?.dataset?.frange; fPop.innerHTML = popBody(f); if (scroll) fPop.querySelector('.cn-command-list').scrollTop = scroll; fBtn = dtTools.querySelector(`[data-fopen="${fOpen}"]`); fBtn?.setAttribute('aria-expanded', 'true'); if (focused != null) { const i = fPop.querySelector(`[data-frange="${focused}"]`); i?.focus(); i?.setSelectionRange(i.value.length, i.value.length); } } };
   let mobileCount = DT.length, sheetOpen = false;
-  const syncMobileCount = (n) => { mobileCount = n; const go = $('[data-fsheet-go]', foot); if (go && sheetOpen) go.innerHTML = `Ver ${n} ${n === 1 ? ONE : MANY}`; };
+  const syncMobileCount = (n) => { mobileCount = n; const go = $('[data-fsheet-go]', foot); if (go && sheetOpen) go.innerHTML = T('See {0} {1}', n, n === 1 ? ONE : MANY); };
   const sheetBody = () => FILTERS.filter((f) => f.type !== 'search').map((f) => {
     const ctrl = f.type === 'facet' ? `<div class="cx-vstack" style="gap:2px">${facetItems(f, true)}</div>` : f.type === 'date' ? `<div class="cx-hstack">${Object.entries(DATE_PRESETS).map(([k, [n]]) => ui.button({ label: n, size: 'sm', attrs: `aria-pressed="${fState[f.id] === k}" data-fs-date="${f.id}|${k}"` })).join('')}</div>` : f.type === 'range' ? rangeInputs(f, 'fs-') : '';
     return `<section class="cx-vstack" style="gap:10px">${ui.text(f.label, 'label')}${ctrl}</section>`;
   }).join('<div data-slot="separator" class="cn-separator cn-separator-horizontal"></div>');
   const sheetKind = 'dtFilters' + Math.random().toString(36).slice(2, 7);
-  CONTENT[sheetKind] = () => { sheetOpen = true; document.getElementById('mdl-title').textContent = 'Filtros'; document.getElementById('mdl-desc').textContent = 'Se aplican mientras eliges.'; body.innerHTML = sheetBody(); foot.innerHTML = ui.button({ label: 'Limpiar', size: 'default', attrs: 'data-fsheet-clear', cls: 'cx-exit' }) + ui.button({ label: `Ver ${mobileCount} ${mobileCount === 1 ? ONE : MANY}`, variant: 'default', size: 'default', attrs: 'data-dismiss data-fsheet-go', cls: 'cx-go' }); };
+  CONTENT[sheetKind] = () => { sheetOpen = true; document.getElementById('mdl-title').textContent = T('Filters'); document.getElementById('mdl-desc').textContent = T('They apply as you pick.'); body.innerHTML = sheetBody(); foot.innerHTML = ui.button({ label: T('Clear'), size: 'default', attrs: 'data-fsheet-clear', cls: 'cx-exit' }) + ui.button({ label: T('See {0} {1}', mobileCount, mobileCount === 1 ? ONE : MANY), variant: 'default', size: 'default', attrs: 'data-dismiss data-fsheet-go', cls: 'cx-go' }); };
   const sheetRefresh = () => { if (!sheetOpen) return; const st = body.scrollTop, focused = document.activeElement?.dataset?.frange; body.innerHTML = sheetBody(); body.scrollTop = st; if (focused != null) { const i = body.querySelector(`[data-frange="${focused}"]`); i?.focus(); i?.setSelectionRange(i.value.length, i.value.length); } };
   const clearAll = () => FILTERS.forEach((f) => { fState[f.id] = f.type === 'search' ? (f.id === searchF?.id ? fState[f.id] : '') : f.type === 'facet' ? new Set() : null; });
   body.addEventListener('click', (e) => {
@@ -126,7 +128,7 @@ export function dataTable(root, cfg, core, on) {
     have.forEach((c, k) => { if (!want.has(k) && !c.classList.contains('out')) { c.classList.add('out'); c.addEventListener('animationend', () => easeHeight(dtChips, () => { c.remove(); dtChips.hidden = !dtChips.children.length; }), { once: true }); } });
     easeHeight(dtChips, () => {
       chips.forEach(([t, k]) => {
-        const html = `${t}${ui.button({ icon: 'x', variant: 'ghost', size: 'icon-xs', cls: 'cx-chip-x', attrs: `data-fchip="${k}" aria-label="Quitar ${t}" title="Quitar"` })}`;
+        const html = `${t}${ui.button({ icon: 'x', variant: 'ghost', size: 'icon-xs', cls: 'cx-chip-x', attrs: `data-fchip="${k}" aria-label="${T('Remove {0}', t)}" title="${T('Remove')}"` })}`;
         const c = have.get(k);
         if (c) { if (c.dataset.text !== t) { c.innerHTML = html; c.dataset.text = t; } dtChips.appendChild(c); return; }
         const el = document.createElement('span'); el.dataset.slot = 'badge'; el.className = 'cn-badge cn-badge-variant-secondary cx-chip in'; el.dataset.key = k; el.dataset.text = t; el.innerHTML = html; dtChips.appendChild(el);
@@ -144,8 +146,8 @@ export function dataTable(root, cfg, core, on) {
     return `<td class="cx-dt-svc" ${dateCol ? `data-when="${whenText(r[dateCol.key])}"` : ''}>${v ?? ''}</td>`;
   };
   const who = (r) => r[colOf('person')?.key ?? COLS[0]?.key] ?? '';
-  const rowCells = (r) => `<td class="cx-dt-check">${cbHtml('Seleccionar ' + who(r), dtSel.has(r.id))}</td>${COLS.map((c) => cell(c, r)).join('')}`;
-  const EASE = 'cubic-bezier(.22, 1, .36, 1)';
+  const rowCells = (r) => `<td class="cx-dt-check">${cbHtml(T('Select {0}', who(r)), dtSel.has(r.id))}</td>${COLS.map((c) => cell(c, r)).join('')}`;
+  const EASE = 'cubic-bezier(.23, 1, .32, 1)';
   let dtAnim = 0;
   const dtPaint = () => {
     const f = SORTERS[dtSort.key] || (() => 0);
@@ -160,7 +162,7 @@ export function dataTable(root, cfg, core, on) {
       const byId = new Map([...dtBody.children].map((tr) => [tr.dataset.id, tr]));
       const frag = document.createDocumentFragment(), entering = [];
       rows.forEach((r) => { let tr = byId.get(String(r.id)); if (!tr) { tr = document.createElement('tr'); tr.dataset.id = r.id; entering.push(tr); } tr.toggleAttribute('data-selected', dtSel.has(r.id)); tr.innerHTML = rowCells(r); frag.appendChild(tr); });
-      if (!rows.length) { let tr = byId.get('empty'); if (!tr) { tr = document.createElement('tr'); tr.dataset.id = 'empty'; tr.innerHTML = `<td colspan="${COLS.length + 1}"><div data-slot="empty" class="cn-empty cx-dt-empty"><div class="cn-empty-header"><div class="cn-empty-media cn-empty-media-icon">${ui.icon('search')}</div><div class="cn-empty-title">Nada coincide con los filtros</div><div class="cn-empty-description">Quita alguno o límpialos todos.</div></div><div class="cn-empty-content">${ui.button({ label: 'Limpiar filtros', attrs: 'data-fclear-empty' })}</div></div></td>`; entering.push(tr); } frag.appendChild(tr); }
+      if (!rows.length) { let tr = byId.get('empty'); if (!tr) { tr = document.createElement('tr'); tr.dataset.id = 'empty'; tr.innerHTML = `<td colspan="${COLS.length + 1}"><div data-slot="empty" class="cn-empty cx-dt-empty"><div class="cn-empty-header"><div class="cn-empty-media cn-empty-media-icon">${ui.icon('search')}</div><div class="cn-empty-title">${T('Nothing matches the filters')}</div><div class="cn-empty-description">${T('Remove one or clear them all.')}</div></div><div class="cn-empty-content">${ui.button({ label: T('Clear filters'), attrs: 'data-fclear-empty' })}</div></div></td>`; entering.push(tr); } frag.appendChild(tr); }
       dtBody.replaceChildren(frag);
       dtBody.querySelectorAll('tr').forEach((tr) => { const old = before.get(tr.dataset.id); if (old == null) return; const dy = old - tr.getBoundingClientRect().top; if (dy) tr.animate([{ transform: `translateY(${dy}px)` }, { transform: 'none' }], { duration: 240, easing: EASE }); });
       entering.forEach((tr, i) => tr.animate([{ opacity: 0, transform: 'translateY(6px)' }, { opacity: 1, transform: 'none' }], { duration: 220, delay: Math.min(i, 6) * 18, easing: EASE, fill: 'backwards' }));