@muten/shadcn 0.0.5 → 0.1.0

package/registry/kit/table.js

@@ -0,0 +1,198 @@
+// @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.
+//   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}]
+//   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'];
+  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 dayOf = (v) => { const d = asDate(v); d.setHours(0, 0, 0, 0); return d; };
+  const FILTERS = list(cfg.filters).map((f) => ({
+    ...f,
+    read: f.type === 'search' ? (r) => list(f.keys || [f.key]).map((k) => r[k]).join(' ') : f.type === 'date' ? (r) => dayOf(r[f.key]) : (r) => r[f.key],
+    name: (v) => (f.key === statusCol?.key && STATUS[v] ? STATUS[v].label : v),
+    fmt: f.money === false ? (v) => v : money0,
+  }));
+  const fState = Object.fromEntries(FILTERS.map((f) => [f.id, f.type === 'search' ? '' : f.type === 'facet' ? new Set() : null]));
+  const PASS = {
+    search: (f, v, r) => !v || fold(f.read(r)).includes(fold(v)),
+    facet: (f, v, r) => !v.size || v.has(f.read(r)),
+    date: (f, v, r) => !v || DATE_PRESETS[v][1](f.read(r)),
+    range: (f, v, r) => !v || ((v[0] == null || f.read(r) >= v[0]) && (v[1] == null || f.read(r) <= v[1])),
+  };
+  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 };
+  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>`;
+  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));
+  const isActive = (f) => { const v = fState[f.id]; return f.type === 'facet' ? v.size > 0 : f.type === 'range' ? !!v && (v[0] != null || v[1] != null) : !!v; };
+  const summary = (f) => { const v = fState[f.id]; if (f.type === 'facet') return v.size === 1 ? f.name([...v][0]) : `${v.size}`; if (f.type === 'date') return DATE_PRESETS[v][0]; if (f.type === 'range') return v[0] != null && v[1] != null ? `${f.fmt(v[0])}–${f.fmt(v[1])}` : v[0] != null ? `desde ${f.fmt(v[0])}` : `hasta ${f.fmt(v[1])}`; return v; };
+  let dtMobile = false;
+  const searchF = FILTERS.find((x) => x.type === 'search');
+  const activeCount = () => FILTERS.filter((f) => f.type !== 'search' && isActive(f)).reduce((n, f) => n + (f.type === 'facet' ? fState[f.id].size : 1), 0);
+  const searchHtml = () => (searchF ? `<div data-slot="input-group" class="cn-input-group group/input-group cx-dt-search"><div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-start">${ui.icon('search')}</div><input data-slot="input-group-control" class="cn-input cn-input-group-input" data-filter="${searchF.id}" placeholder="${searchF.label}" aria-label="${searchF.label}" value="${String(fState[searchF.id]).replace(/"/g, '&quot;')}"></div>` : '');
+  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"' });
+      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' }) : '');
+  };
+  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 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 === '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 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' }); };
+  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) => {
+    if (!sheetOpen) return;
+    const o = e.target.closest('[data-fs-facet]'); if (o) { const set = fState[o.dataset.fsFacet], v = o.dataset.fval; set.has(v) ? set.delete(v) : set.add(v); dtPaint(); paintTools(); sheetRefresh(); return; }
+    const d = e.target.closest('[data-fs-date]'); if (d) { const [id, k] = d.dataset.fsDate.split('|'); fState[id] = fState[id] === k ? null : k; dtPaint(); paintTools(); sheetRefresh(); }
+  });
+  const onRange = (e) => { const r = e.target.dataset.frange, id = e.target.dataset.frid; if (r == null || !id) return false; reformat(e.target, (v) => groupThousands(v.replace(/\D/g, '').slice(0, 9), '.'), /\d/); const n = e.target.value ? Number(e.target.value.replace(/\D/g, '')) : null; const v = fState[id] ? [...fState[id]] : [null, null]; v[+r] = n; fState[id] = v[0] == null && v[1] == null ? null : v; dtPaint(); paintTools(); return true; };
+  body.addEventListener('input', (e) => { if (sheetOpen && e.target.id?.startsWith('fs-')) onRange(e); });
+  foot.addEventListener('click', (e) => { if (sheetOpen && e.target.closest('[data-fsheet-clear]')) { clearAll(); dtPaint(); paintTools(); sheetRefresh(); } });
+  addEventListener('popstate', () => { sheetOpen = false; });
+  document.addEventListener('click', (e) => { if (e.target.closest('[data-dismiss]')) sheetOpen = false; });
+  new ResizeObserver(() => { const m = host.clientWidth < 600; host.toggleAttribute('data-narrow', host.clientWidth < 600); if (m !== dtMobile) { dtMobile = m; fClose(); paintTools(); } }).observe(host);
+  dtTools.addEventListener('click', (e) => {
+    if (e.target.closest('[data-fmobile]')) { openModal(sheetKind, 'auto'); return; }
+    const b = e.target.closest('[data-fopen]'); if (b) { if (fOpen === b.dataset.fopen) fClose(); else fOpenPop(b.dataset.fopen, b); return; }
+    if (e.target.closest('[data-fclear]')) { FILTERS.forEach((f) => { fState[f.id] = f.type === 'search' ? '' : f.type === 'facet' ? new Set() : null; }); fClose(); refresh(); }
+  });
+  dtTools.addEventListener('input', (e) => { if (e.target.dataset.filter) { fState[e.target.dataset.filter] = e.target.value; dtPaint(); paintChips(); } });
+  fPop.addEventListener('click', (e) => {
+    const f = FILTERS.find((x) => x.id === fOpen); if (!f) return;
+    const it = e.target.closest('[data-fval]'); if (it) { const set = fState[f.id], v = it.dataset.fval; set.has(v) ? set.delete(v) : set.add(v); refresh(true); return; }
+    if (e.target.closest('[data-fclear-one]')) { fState[f.id].clear(); refresh(true); return; }
+    const d = e.target.closest('[data-fdate]'); if (d) { fState[f.id] = d.dataset.fdate || null; fClose(true); refresh(); }
+  });
+  fPop.addEventListener('input', (e) => {
+    if (e.target.dataset.fsearch != null) { const q = fold(e.target.value); $$('[data-fval]', fPop).forEach((x) => { x.hidden = !fold(x.textContent).includes(q); }); return; }
+    if (onRange(e)) { paintChips(); fBtn = dtTools.querySelector(`[data-fopen="${e.target.dataset.frid}"]`); fBtn?.setAttribute('aria-expanded', 'true'); }
+  });
+  fPop.addEventListener('keydown', (e) => {
+    const items = $$('[data-fval]:not([hidden])', fPop), i = items.indexOf(document.activeElement);
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); (items[(i + (e.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length] || items[0])?.focus(); }
+    if ((e.key === 'Enter' || e.key === ' ') && document.activeElement?.dataset?.fval != null) { e.preventDefault(); document.activeElement.click(); }
+    if (e.key === 'Escape') { e.stopPropagation(); fClose(true); }
+  });
+  document.addEventListener('pointerdown', (e) => { if (fOpen && !fPop.contains(e.target) && !dtTools.contains(e.target)) fClose(); });
+  addEventListener('scroll', () => { if (fOpen && fBtn) place(fPop, fBtn, 'start', 6); }, { passive: true });
+  const paintChips = () => {
+    const chips = [];
+    FILTERS.forEach((f) => { if (f.type === 'facet') fState[f.id].forEach((v) => chips.push([`${f.label}: ${f.name(v)}`, `${f.id}|${v}`])); else if (f.type !== 'search' && isActive(f)) chips.push([`${f.label}: ${summary(f)}`, f.id]); });
+    const have = new Map($$('.cx-chip', dtChips).map((c) => [c.dataset.key, c])), want = new Set(chips.map(([, k]) => k));
+    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 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);
+      });
+      if (chips.length) dtChips.hidden = false;
+    });
+  };
+  dtChips.addEventListener('click', (e) => { const b = e.target.closest('[data-fchip]'); if (!b) return; b.closest('.cx-chip').classList.add('out'); const [id, v] = b.dataset.fchip.split('|'); const f = FILTERS.find((x) => x.id === id); if (f.type === 'facet') fState[id].delete(v); else fState[id] = null; refresh(); });
+  const cell = (c, r) => {
+    const v = r[c.key];
+    if (c.type === 'person') return `<td class="cx-dt-who"><b>${v}</b>${c.sub ? `<small class="cx-num">${r[c.sub] ?? ''}</small>` : ''}</td>`;
+    if (c.type === 'date') return `<td class="cx-dt-when">${whenText(v)}</td>`;
+    if (c.type === 'status') return `<td class="cx-dt-st">${STATUS[v] ? ui.badge(STATUS[v].label, { tone: STATUS[v].tone }) : ''}</td>`;
+    if (c.type === 'money') return `<td class="cx-dt-num">${money0(v)}</td>`;
+    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)';
+  let dtAnim = 0;
+  const dtPaint = () => {
+    const f = SORTERS[dtSort.key] || (() => 0);
+    const rows = DT.filter((r) => passes(r)).sort((a, b) => (f(a) > f(b) ? 1 : f(a) < f(b) ? -1 : 0) * dtSort.dir);
+    const token = ++dtAnim, scroller = dtBody.closest('.cx-dt-scroll');
+    const before = new Map([...dtBody.children].map((tr) => [tr.dataset.id, tr.getBoundingClientRect().top]));
+    const keep = new Set(rows.map((r) => String(r.id)));
+    const leaving = [...dtBody.children].filter((tr) => !keep.has(tr.dataset.id));
+    const apply = () => {
+      if (token !== dtAnim) return;
+      const fromH = scroller.offsetHeight;
+      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); }
+      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' }));
+      const toH = scroller.offsetHeight; if (fromH !== toH) scroller.animate([{ height: fromH + 'px' }, { height: toH + 'px' }], { duration: 240, easing: EASE });
+    };
+    if (leaving.length && dtBody.children.length) { leaving.forEach((tr) => tr.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 130, easing: 'ease-out', fill: 'forwards' })); setTimeout(apply, 130); } else apply();
+    dtCountEl.textContent = rows.length === DT.length ? `${DT.length} ${DT.length === 1 ? ONE : MANY}` : `${rows.length} de ${DT.length} ${MANY}`; paintChips();
+    setCheck(dtAll, dtSel.size === 0 ? false : dtSel.size === DT.length ? true : 'mixed');
+    dtBulk.toggleAttribute('data-open', dtSel.size > 0);
+    if (dtSel.size) $('[data-dt-count]', root).textContent = `${dtSel.size} ${dtSel.size === 1 ? 'seleccionada' : 'seleccionadas'}`;
+    syncMobileCount(rows.length);
+  };
+  $('thead', root).addEventListener('click', (e) => {
+    const th = e.target.closest('[data-sort]'); if (!th) return;
+    const key = th.dataset.sort; dtSort = { key, dir: dtSort.key === key ? -dtSort.dir : 1 };
+    $$('thead [data-sort]', root).forEach((b) => { const on = b.dataset.sort === key; b.parentElement.setAttribute('aria-sort', on ? (dtSort.dir === 1 ? 'ascending' : 'descending') : 'none'); $('use', b).setAttribute('href', on ? (dtSort.dir === 1 ? '#arrowup' : '#arrowdown') : '#sort'); });
+    dtPaint();
+  });
+  dtAll.addEventListener('click', () => { if (dtSel.size === DT.length) dtSel.clear(); else DT.forEach((r) => dtSel.add(r.id)); dtPaint(); });
+  dtBody.addEventListener('click', (e) => {
+    if (e.target.closest('[data-fclear-empty]')) { dtTools.querySelector('[data-fclear]')?.click(); return; }
+    const tr = e.target.closest('tr'); if (!tr || tr.dataset.id === 'empty') return;
+    if (!e.target.closest('.cn-checkbox') && !host.hasAttribute('data-narrow') && !matchMedia('(max-width: 640px)').matches) return;
+    const raw = tr.dataset.id, id = DT.find((r) => String(r.id) === raw)?.id; dtSel.has(id) ? dtSel.delete(id) : dtSel.add(id); dtPaint();
+  });
+  dtBulk.addEventListener('click', (e) => {
+    if (e.target.closest('[data-dt-unselect]')) { dtSel.clear(); dtPaint(); return; }
+    const b = e.target.closest('[data-dt-bulk]'); if (!b) return;
+    const def = bulk.find((x) => x.id === b.dataset.dtBulk); const ids = [...dtSel];
+    if (def?.set) DT.forEach((r) => { if (dtSel.has(r.id)) Object.assign(r, def.set); });
+    dtSel.clear(); dtPaint(); on?.action?.(JSON.stringify({ action: b.dataset.dtBulk, ids }));
+  });
+  paintTools(); dtPaint();
+  return { refresh: () => { dtPaint(); paintTools(); } };
+}

package/registry/kit/values.js

@@ -0,0 +1,179 @@
+// @muten/shadcn · values (kit): the reference artifact's ScaleSlider (value riding on the thumb, two bubbles merge),
+// CodePicker (a searchable list under a trigger), MoneyField (a currency = code + locale, Intl does the rest),
+// PhoneField (a country = dial code + digits + mask) and the 6-slot verification code. Generic: data and labels in.
+export const CURRENCIES = [
+  { id: 'COP', label: 'Peso colombiano', locale: 'es-CO', minor: 2, shown: 0 }, { id: 'USD', label: 'Dólar estadounidense', locale: 'en-US' },
+  { id: 'MXN', label: 'Peso mexicano', locale: 'es-MX' }, { id: 'ARS', label: 'Peso argentino', locale: 'es-AR' }, { id: 'VES', label: 'Bolívar', locale: 'es-VE' },
+  { id: 'CLP', label: 'Peso chileno', locale: 'es-CL' }, { id: 'PEN', label: 'Sol peruano', locale: 'es-PE' }, { id: 'BRL', label: 'Real brasileño', locale: 'pt-BR' },
+  { id: 'EUR', label: 'Euro', locale: 'es-ES' }, { id: 'CAD', label: 'Dólar canadiense', locale: 'en-CA' }, { id: 'AUD', label: 'Dólar australiano', locale: 'en-AU' }, { id: 'JPY', label: 'Yen', locale: 'ja-JP' },
+];
+export const COUNTRIES = [
+  { id: 'AR', label: 'Argentina', dial: '+54 9', e164: '549', len: 10, mask: '## ####-####' }, { id: 'CO', label: 'Colombia', dial: '+57', e164: '57', len: 10, mask: '### ### ####' },
+  { id: 'MX', label: 'México', dial: '+52', e164: '52', len: 10, mask: '## #### ####' }, { id: 'US', label: 'Estados Unidos', dial: '+1', e164: '1', len: 10, mask: '(###) ###-####' },
+  { id: 'VE', label: 'Venezuela', dial: '+58', e164: '58', len: 10, mask: '### ### ####' }, { id: 'BR', label: 'Brasil', dial: '+55', e164: '55', len: 11, mask: '(##) #####-####' },
+  { id: 'CL', label: 'Chile', dial: '+56', e164: '56', len: 9, mask: '# #### ####' }, { id: 'PE', label: 'Perú', dial: '+51', e164: '51', len: 9, mask: '### ### ###' },
+  { id: 'ES', label: 'España', dial: '+34', e164: '34', len: 9, mask: '### ## ## ##' }, { id: 'CA', label: 'Canadá', dial: '+1', e164: '1', len: 10, mask: '(###) ###-####' },
+];
+
+export function codePicker(core, { trigger, anchor, items, current, onPick, placeholder }) {
+  const { $, $$, lib, place, show, hide, fold } = core;
+  const pop = document.createElement('div');
+  pop.className = 'cx-cpick pg-pop'; pop.hidden = true; pop.setAttribute('role', 'dialog');
+  pop.innerHTML = `<div class="cx-cpick-search"><svg><use href="#search"/></svg><input placeholder="${placeholder}" aria-label="${placeholder}" autocomplete="off" role="combobox" aria-expanded="true"></div><div class="cx-cpick-list cx-combo-list" role="listbox"></div>`;
+  lib.appendChild(pop);
+  const q = $('input', pop), list = $('[role=listbox]', pop);
+  let shown = [], hl = 0;
+  const paint = () => {
+    const t = fold(q.value.trim());
+    shown = items().filter((it) => !t || fold(`${it.label} ${it.id} ${it.hint}`).includes(t));
+    hl = Math.min(hl, Math.max(0, shown.length - 1));
+    list.innerHTML = shown.length ? shown.map((it, i) => `<div class="cx-opt" role="option" data-i="${i}" aria-selected="${it.id === current()}"${i === hl ? ' data-hl' : ''}><span class="cx-opt-code">${it.id}</span><span>${it.label}</span><small>${it.hint}</small>${it.id === current() ? '<svg class="cx-tick" style="margin-left:6px"><use href="#check"/></svg>' : ''}</div>`).join('') : '<div class="cx-combo-empty">Sin resultados</div>';
+    $('[data-hl]', list)?.scrollIntoView({ block: 'nearest' });
+  };
+  const isOpen = () => pop.dataset.state === 'open';
+  const open = () => { q.value = ''; hl = Math.max(0, items().findIndex((it) => it.id === current())); paint(); pop.hidden = false; place(pop, anchor, 'start', 6, Math.max(260, anchor.offsetWidth)); show(pop); trigger.setAttribute('aria-expanded', 'true'); q.focus({ preventScroll: true }); };
+  const close = (refocus) => { if (!isOpen()) return; hide(pop, 120); trigger.setAttribute('aria-expanded', 'false'); if (refocus) trigger.focus({ preventScroll: true }); };
+  const pick = (i) => { const it = shown[i]; if (!it) return; close(false); onPick(it); };
+  trigger.addEventListener('click', () => (isOpen() ? close(true) : open()));
+  q.addEventListener('input', () => { hl = 0; paint(); });
+  q.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); hl = (hl + (e.key === 'ArrowDown' ? 1 : -1) + shown.length) % Math.max(1, shown.length); paint(); }
+    else if (e.key === 'Enter') { e.preventDefault(); pick(hl); }
+    else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(true); }
+    else if (e.key === 'Tab') close(false);
+  });
+  list.addEventListener('pointerdown', (e) => e.preventDefault());
+  list.addEventListener('pointermove', (e) => { const o = e.target.closest('[data-i]'); if (o && +o.dataset.i !== hl) { hl = +o.dataset.i; $$('[data-i]', list).forEach((x) => x.toggleAttribute('data-hl', x === o)); } });
+  list.addEventListener('click', (e) => { const o = e.target.closest('[data-i]'); if (o) pick(+o.dataset.i); });
+  document.addEventListener('pointerdown', (e) => { if (isOpen() && !pop.contains(e.target) && !trigger.contains(e.target)) close(false); });
+  addEventListener('scroll', () => { if (isOpen()) place(pop, anchor, 'start', 6, Math.max(260, anchor.offsetWidth)); }, { passive: true });
+}
+
+// ScaleSlider: one or two thumbs, the value rides on each thumb, two bubbles that would touch merge into one.
+// i: {label, min, max, step, values "24" | "20000,80000", gap, format: hours|money|percent|"" , suffix}
+export function scaleSlider(root, i, core, on) {
+  const { $, $$, money0 } = core;
+  const min = Number(i.min) || 0, max = Number(i.max) || 100, step = Number(i.step) || 1, gap = Number(i.gap) || 0;
+  const FMT = { hours: (v) => `${v} h`, money: money0, percent: (v) => `${v} %` };
+  const fmt = FMT[i.format] || ((v) => `${v}${i.suffix || ''}`);
+  const vals = String(i.values ?? min).split(',').map(Number), two = vals.length > 1, TW = 21;
+  const id = 'sl' + Math.random().toString(36).slice(2, 7);
+  root.innerHTML = `<div class="cx-sl-field"><div class="cx-sl-head"><span class="cn-label" id="${id}-l">${i.label || ''}</span></div><div data-slot="slider" class="cn-slider cx-slider" data-orientation="horizontal" data-horizontal><div data-slot="slider-track" class="cn-slider-track" data-orientation="horizontal"><div data-slot="slider-range" class="cn-slider-range" data-orientation="horizontal"></div></div>${vals.map((_, k) => `<span data-slot="slider-thumb" class="cn-slider-thumb" tabindex="0" role="slider" ${two ? `aria-label="${i.label || ''} ${k ? 'máximo' : 'mínimo'}"` : `aria-labelledby="${id}-l"`}></span>`).join('')}</div><div class="cx-sl-scale"><span>${fmt(min)}</span><span>${fmt(max)}</span></div></div>`;
+  const sl = $('.cx-slider', root), thumbs = $$('.cn-slider-thumb', sl), range = $('.cn-slider-range', sl);
+  const bubbles = thumbs.map(() => { const b = document.createElement('span'); b.className = 'cx-sl-bubble'; b.setAttribute('aria-hidden', 'true'); sl.appendChild(b); return b; });
+  const bounds = (k) => [two && k === 1 ? vals[0] + gap : min, two && k === 0 ? vals[1] - gap : max];
+  const paint = () => {
+    const run = sl.clientWidth - TW, at = (v) => ((v - min) / (max - min)) * run;
+    thumbs.forEach((t, k) => { const [lo, hi] = bounds(k); t.style.left = at(vals[k]) + 'px'; t.setAttribute('aria-valuenow', vals[k]); t.setAttribute('aria-valuemin', lo); t.setAttribute('aria-valuemax', hi); t.setAttribute('aria-valuetext', fmt(vals[k])); });
+    const a = two ? at(vals[0]) + TW / 2 : 0, b = at(vals[vals.length - 1]) + TW / 2;
+    range.style.left = a + 'px'; range.style.width = (b - a) + 'px';
+    bubbles.forEach((bb, k) => { bb.hidden = false; bb.textContent = fmt(vals[k]); bb.style.left = at(vals[k]) + TW / 2 + 'px'; });
+    if (two) { const [b0, b1] = bubbles, r0 = b0.getBoundingClientRect(), r1 = b1.getBoundingClientRect(); if (r0.right + 6 > r1.left) { b1.hidden = true; b0.textContent = `${fmt(vals[0])} – ${fmt(vals[1])}`; b0.style.left = (at(vals[0]) + at(vals[1])) / 2 + TW / 2 + 'px'; } }
+  };
+  const emit = () => on?.change?.(vals.join(','));
+  const set = (k, v) => { const [lo, hi] = bounds(k); const nv = Math.min(hi, Math.max(lo, Math.round((v - min) / step) * step + min)); if (nv === vals[k]) return; vals[k] = nv; paint(); emit(); };
+  const valueAt = (x) => min + ((x - sl.getBoundingClientRect().left - TW / 2) / (sl.clientWidth - TW)) * (max - min);
+  let drag = null;
+  sl.addEventListener('pointerdown', (e) => {
+    e.preventDefault();
+    const onThumb = thumbs.indexOf(e.target); let k = onThumb;
+    if (k < 0) { const v = valueAt(e.clientX); k = two ? (Math.abs(v - vals[0]) <= Math.abs(v - vals[1]) ? (v > vals[1] ? 1 : 0) : 1) : 0; }
+    const tr = thumbs[k].getBoundingClientRect();
+    drag = { k, grab: onThumb >= 0 ? e.clientX - (tr.left + TW / 2) : 0 };
+    thumbs[k].setAttribute('data-drag', ''); thumbs[k].focus({ preventScroll: true }); sl.setPointerCapture(e.pointerId);
+    set(k, valueAt(e.clientX - drag.grab));
+  });
+  sl.addEventListener('pointermove', (e) => { if (drag) set(drag.k, valueAt(e.clientX - drag.grab)); });
+  const end = () => { if (!drag) return; thumbs[drag.k].removeAttribute('data-drag'); drag = null; };
+  sl.addEventListener('pointerup', end); sl.addEventListener('pointercancel', end);
+  thumbs.forEach((t, k) => t.addEventListener('keydown', (e) => {
+    const d = { ArrowRight: step, ArrowUp: step, ArrowLeft: -step, ArrowDown: -step, PageUp: step * 10, PageDown: -step * 10 }[e.key];
+    if (d !== undefined) { e.preventDefault(); set(k, vals[k] + d); }
+    if (e.key === 'Home') { e.preventDefault(); set(k, bounds(k)[0]); }
+    if (e.key === 'End') { e.preventDefault(); set(k, bounds(k)[1]); }
+  }));
+  new ResizeObserver(paint).observe(sl); paint();
+  return (next) => { const nv = String(next.values ?? '').split(',').map(Number); if (nv.length === vals.length && nv.every((v, k) => v === vals[k])) return; nv.forEach((v, k) => { if (k < vals.length && !Number.isNaN(v)) vals[k] = v; }); paint(); };
+}
+
+// MoneyField: i {label, value (a number), currency "COP", hint "on"} → on.change(json {amount, minor, currency})
+export function moneyField(root, i, core, on) {
+  const { $, ui, reformat, groupThousands } = core;
+  const id = 'mf' + Math.random().toString(36).slice(2, 7);
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><label data-slot="label" class="cn-label" for="${id}">${i.label || 'Precio'}</label><div data-slot="input-group" class="cn-input-group group/input-group" data-mf-group><div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-start cx-num" data-mf-sym>$</div><input data-slot="input-group-control" class="cn-input cn-input-group-input cx-num" id="${id}" inputmode="decimal" autocomplete="off"><div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-end" style="padding-right:2px"><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-xs group/button cx-cc" data-mf-cur aria-haspopup="dialog" aria-expanded="false" aria-label="Moneda"><span class="cx-cc-code" data-mf-code>COP</span><svg><use href="#chev"/></svg></button></div></div><p data-slot="field-description" class="cn-field-description cx-num" data-mf-out></p></div>`;
+  const currencySpec = (c) => {
+    const nf = new Intl.NumberFormat(c.locale, { style: 'currency', currency: c.id, currencyDisplay: 'narrowSymbol' });
+    const parts = nf.formatToParts(1234567.89), part = (t, d) => parts.find((p) => p.type === t)?.value ?? d;
+    const dec = new Intl.NumberFormat(c.locale, { minimumFractionDigits: 1 }).formatToParts(1.5).find((p) => p.type === 'decimal').value;
+    const digits = nf.resolvedOptions().maximumFractionDigits;
+    return { sym: part('currency', c.id), group: part('group', dec === ',' ? '.' : ','), dec, minor: c.minor ?? digits, places: c.shown ?? digits };
+  };
+  const mf = $('input', root), mfOut = $('[data-mf-out]', root);
+  let curRow = CURRENCIES.find((c) => c.id === i.currency) || CURRENCIES[0], cur = currencySpec(curRow);
+  const escRe = (c) => c.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const sigFor = () => new RegExp(`[\\d${escRe(cur.dec)}]`);
+  const fmtMoney = (v) => { const k = cur.places ? v.indexOf(cur.dec) : -1; const int = (k < 0 ? v : v.slice(0, k)).replace(/\D/g, '').slice(0, 12); const frac = k < 0 ? '' : v.slice(k + 1).replace(/\D/g, '').slice(0, cur.places); return (groupThousands(int, cur.group) || (k >= 0 ? '0' : '')) + (k >= 0 ? cur.dec + frac : ''); };
+  const amount = () => { if (!mf.value) return 0; const [a, f = ''] = mf.value.split(cur.dec); return Number(a.split(cur.group).join('') + '.' + (f || '0')); };
+  const unitName = () => (cur.minor === 0 ? `${curRow.id} (no tiene unidad menor)` : `centavos de ${curRow.id}`);
+  const showMinor = () => { mfOut.textContent = mf.value ? `Se guarda: ${Math.round(amount() * 10 ** cur.minor)} ${unitName()}` : 'Escribe un precio'; };
+  const toText = (n) => { const [a, f] = n.toFixed(cur.places).split('.'); return groupThousands(a, cur.group) + (cur.places && /[1-9]/.test(f) ? cur.dec + f : ''); };
+  const emit = () => on?.change?.(JSON.stringify({ amount: amount(), minor: Math.round(amount() * 10 ** cur.minor), currency: curRow.id }));
+  mf.addEventListener('input', () => { reformat(mf, fmtMoney, sigFor()); showMinor(); emit(); });
+  mf.addEventListener('keydown', (e) => { if (!cur.places || (e.key !== '.' && e.key !== ',') || e.key === cur.dec) return; e.preventDefault(); if (!mf.value.includes(cur.dec)) { mf.setRangeText(cur.dec, mf.selectionStart, mf.selectionEnd, 'end'); mf.dispatchEvent(new Event('input')); } });
+  const setCurrency = (row) => { const n = amount(); curRow = row; cur = currencySpec(row); $('[data-mf-sym]', root).textContent = cur.sym; $('[data-mf-code]', root).textContent = row.id; mf.value = n ? toText(n) : ''; showMinor(); };
+  codePicker(core, { trigger: $('[data-mf-cur]', root), anchor: $('[data-mf-group]', root), placeholder: 'Buscar moneda', current: () => curRow.id, items: () => CURRENCIES.map((c) => ({ id: c.id, label: c.label, hint: currencySpec(c).sym })), onPick: (it) => { setCurrency(CURRENCIES.find((c) => c.id === it.id)); mf.focus({ preventScroll: true }); emit(); } });
+  mf.value = fmtMoney(String(i.value ?? '')); setCurrency(curRow);
+  void ui;
+}
+
+// PhoneField: i {label, value (digits), country "CO"} → on.change(json {e164, valid, country})
+export function phoneField(root, i, core, on) {
+  const { $, reformat } = core;
+  const id = 'ph' + Math.random().toString(36).slice(2, 7);
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field" data-ph-f><label data-slot="label" class="cn-label" for="${id}">${i.label || 'Teléfono'}</label><div data-slot="input-group" class="cn-input-group group/input-group cx-phone" data-ph-group><div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-start" style="padding-left:2px"><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-xs group/button cx-cc" data-ph-cc aria-haspopup="dialog" aria-expanded="false" aria-label="País"><span class="cx-cc-code" data-ph-flag></span><span class="cx-num cx-cc-dial" data-ph-dial></span><svg><use href="#chev"/></svg></button></div><input data-slot="input-group-control" class="cn-input cn-input-group-input cx-num" id="${id}" type="tel" inputmode="tel" autocomplete="tel-national" aria-describedby="${id}-msg"></div><p data-slot="field-description" class="cn-field-description cx-msg cx-num" id="${id}-msg"></p></div>`;
+  const ph = $('input', root), phMsg = $(`#${id}-msg`, root), phF = $('[data-ph-f]', root);
+  let country = COUNTRIES.find((c) => c.id === i.country) || COUNTRIES[1];
+  const phDigits = (v) => { let d = v.replace(/\D/g, ''); if (d.length > country.len && d.startsWith(country.e164)) d = d.slice(country.e164.length); return d.slice(0, country.len); };
+  const fmtPhone = (v) => { const d = phDigits(v); let out = '', k = 0; for (const ch of country.mask) { if (k >= d.length) break; out += ch === '#' ? d[k++] : ch; } return out; };
+  const emit = () => { const d = phDigits(ph.value); on?.change?.(JSON.stringify({ e164: `+${country.e164}${d}`, valid: d.length === country.len, country: country.id })); };
+  const phCheck = (final) => { const d = phDigits(ph.value), ok = d.length === country.len, bad = final && d.length > 0 && !ok; phF.toggleAttribute('data-invalid', bad); ph.setAttribute('aria-invalid', bad); phMsg.textContent = ok ? `Se guarda como +${country.e164}${d}` : bad ? `Faltan ${country.len - d.length} dígitos para un número de ${country.label}` : `${country.len} dígitos, sin el ${country.dial}`; };
+  const setCountry = (c) => { country = c; $('[data-ph-flag]', root).textContent = c.id; $('[data-ph-dial]', root).textContent = c.dial; ph.placeholder = c.mask.replace(/#/g, '0'); ph.value = fmtPhone(ph.value); phCheck(false); };
+  ph.addEventListener('input', () => { reformat(ph, fmtPhone, /\d/); phCheck(phF.hasAttribute('data-invalid')); emit(); });
+  ph.addEventListener('blur', () => phCheck(true));
+  codePicker(core, { trigger: $('[data-ph-cc]', root), anchor: $('[data-ph-group]', root), placeholder: 'Buscar país', current: () => country.id, items: () => COUNTRIES.map((c) => ({ id: c.id, label: c.label, hint: c.dial })), onPick: (it) => { setCountry(COUNTRIES.find((c) => c.id === it.id)); ph.focus({ preventScroll: true }); emit(); } });
+  setCountry(country); ph.value = fmtPhone(String(i.value ?? '')); phCheck(false);
+}
+
+// OtpField: 6 slots in two groups of 3. i {length, hint, state: ""|checking|ok|bad, message, resendIn} →
+// on.complete(code) when full, on.resend(). The page checks the code and answers with state + message.
+export function otpField(root, i, core, on) {
+  const { $ } = core;
+  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="Código de ${len} dígitos"><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); } });
+  const hint = i.hint || ''; let busy = false;
+  otpMsg.textContent = hint;
+  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();
+    if (otpIn.value.length === len) { busy = true; otpIn.readOnly = true; otpMsg.textContent = 'Verificando…'; paint(); on?.complete?.(otpIn.value); }
+  });
+  ['focus', 'blur', 'click', 'keyup'].forEach((t) => otpIn.addEventListener(t, () => { toEnd(); paint(); }));
+  otpIn.addEventListener('select', toEnd);
+  let left = Number(i.resendIn ?? 30), rt = 0;
+  const tick = () => { left--; resend.disabled = left > 0; resend.textContent = left > 0 ? `Reenviar en 0:${String(left).padStart(2, '0')}` : 'Reenviar código'; if (left > 0) rt = setTimeout(tick, 1000); };
+  resend.textContent = `Reenviar en 0:${String(left).padStart(2, '0')}`;
+  resend.onclick = () => { left = Number(i.resendIn ?? 30) + 1; clearTimeout(rt); tick(); otpMsg.removeAttribute('data-tone'); otpMsg.textContent = 'Te enviamos un código nuevo'; otpIn.value = ''; delete otpBox.dataset.state; otpIn.focus(); on?.resend?.(); };
+  rt = setTimeout(tick, 1000); paint();
+  const answer = (st, msg) => {
+    if (!st || st === 'checking') return;
+    busy = false; otpIn.readOnly = false;
+    if (st === 'ok') { otpBox.dataset.state = 'ok'; otpMsg.dataset.tone = 'ok'; otpMsg.textContent = msg || 'Listo, quedó verificado'; otpIn.blur(); }
+    if (st === 'bad') { otpBox.dataset.state = 'bad'; otpMsg.dataset.tone = 'bad'; otpMsg.textContent = msg || 'Ese código no es'; const wrong = otpIn.value; setTimeout(() => { if (otpIn.value === wrong) { otpIn.value = ''; paint(); } }, 450); }
+    paint();
+  };
+  return (next) => answer(next.state, next.message);
+}

package/registry/kit-layer.js

@@ -0,0 +1,2 @@
+// KitLayer (muten Custom) - loads kit/core.js once; importing it installs the tooltip, the island and the sprite.
+export function mount() { import('@muten/shadcn/registry/kit/core.js'); return () => {}; }

package/registry/kit-layer.muten

@@ -0,0 +1,5 @@
+# KitLayer - put it ONCE in the app shell: it loads the kit core so the library's shared pieces work everywhere
+# (the tooltip on anything with a name, the Island, the icon sprite, the floating layer that follows the skin).
+#   shell { Stack { Custom KitLayer class("cx-kit-host")  … slot … } }   (a shell cannot call plugin parts: use the Custom directly)
+# shadcn-for-muten · Custom (kit core) · host JS is kit-layer.js.
+part KitLayer() { Custom KitLayer class("cx-kit-host") }

package/registry/kit-skeleton.js

@@ -0,0 +1,24 @@
+// KitSkeleton (muten Custom) - the kit's skeletons (kit.sk in kit/core.js): the shape of the content, built from the
+// same atoms and layout classes as the real thing. inputs: kind (list · item · stat · stats · card · products ·
+// bubbles · table · messaging · agenda), count, media (avatar · icon · none).
+export function mount(el, inputs) {
+  const n = Number(inputs.count) || 4;
+  const KINDS = {
+    list: (sk) => `<div class="cn-item-group">${sk.list(n, { media: inputs.media || 'avatar', aside: 44 })}</div>`,
+    item: (sk) => sk.item({ media: inputs.media || 'avatar' }),
+    stat: (sk) => sk.stat(),
+    stats: (sk) => `<div class="cx-stats">${Array.from({ length: n }, sk.stat).join('')}</div>`,
+    card: (sk) => sk.card({ media: 140, lines: 2 }),
+    products: (sk) => sk.products(n),
+    bubbles: (sk) => `<div class="cx-sk-chatbox">${sk.bubbles(n)}</div>`,
+    table: (sk) => sk.table(n),
+    messaging: (sk) => `<div class="cx-mx">${sk.messaging()}</div>`,
+    agenda: (sk) => sk.agenda({ columns: 3 }),
+  };
+  import('@muten/shadcn/registry/kit/core.js').then(({ kit }) => {
+    el.innerHTML = `<span class="cx-sr">Cargando…</span>${(KINDS[inputs.kind] || KINDS.list)(kit.sk)}`;
+    // the inbox lays itself out by its own width, like the real one
+    const mx = el.querySelector('.cx-mx'); if (mx) { mx.dataset.view = 'list'; kit.watchWidth(mx, [[720, 'narrow'], [1060, 'mid']], 'wide'); }
+  });
+  return () => {};
+}

package/registry/kit-skeleton.muten

@@ -0,0 +1,16 @@
+# Skeletons / Loading - while there is NOTHING to show, the shape of the content: built from the same atoms (Item,
+# Card, Stat, bubbles) with Skeleton in place of the text, so when the data lands only the pixels change, with a fade
+# and no jump in height. A refresh keeps the content: gate on «nothing yet», never on «fetching again».
+#   Loading(busy: orders.loading, kind: "list", count: 4) { each orders as o { … } }
+#   Skeletons(kind: "messaging")
+# kind: list · item · stat · stats · card · products · bubbles · table · messaging · agenda. media: avatar · icon · none.
+# shadcn-for-muten · Custom (kit.sk) · kit.css (.cx-sk*, .cx-loaded fade).
+part Skeletons(kind: text = "list", count: number = 4, media: text = "avatar") {
+  Custom KitSkeleton inputs(kind: $kind, count: $count, media: $media) class("cx-sk-host") aria(busy: "true")
+}
+part Loading(busy: bool, kind: text = "list", count: number = 4, media: text = "avatar") {
+  Stack class("cx-loading") {
+    when $busy { Custom KitSkeleton inputs(kind: $kind, count: $count, media: $media) class("cx-sk-host") aria(busy: "true") }
+    when not $busy { Stack class("cx-loaded") { slot } }
+  }
+}

package/registry/kit-widget.js

@@ -0,0 +1,79 @@
+// KitWidget (muten Custom) - one host for the system kit's widgets (kit/core.js): it loads the core once and renders
+// the widget named by `name` with the page's data. The kit's functions (a bot's answers, a filter, a reply) arrive
+// as DATA (rules, ids), never as code. Each widget has its own part (Messaging, Chatbot, BarChart, …); use those.
+export function mount(el, inputs, on) {
+  const list = (v) => (Array.isArray(v) ? v : []);
+  const rx = (s) => { try { return new RegExp(s, 'i'); } catch { return /$^/; } };
+  const RENDER = {
+    messaging: ({ kit, ui }, i) => {
+      const map = (xs) => Object.fromEntries(list(xs).map((x) => [x.id, x]));
+      const buttons = (xs) => list(xs).map((b) => ui.button({ label: b.label, variant: b.variant || 'outline', size: 'xs', attrs: `data-kw-act="${b.id || b.label}"` })).join('');
+      const conversations = list(i.conversations).map((c) => ({ ...c, messages: list(c.messages).map((m) => (m.event ? { ...m, event: { ...m.event, actions: Array.isArray(m.event.actions) ? buttons(m.event.actions) : m.event.actions || '' } } : m)) }));
+      const replies = list(i.replies);
+      kit.messaging(el, {
+        title: i.title || 'Mensajes', channels: map(i.channels), conversations,
+        filters: list(i.filters).map((f) => ({ id: f.id, label: f.label, match: f.state ? (c) => c.state === f.state : () => true })),
+        states: map(i.states), control: map(i.controls),
+        quick: list(i.quick).map((q) => ({ ...q, card: () => `${ui.text(q.title || q.label, 'label')}${q.subtitle ? ui.text(q.subtitle, 'caption') : ''}` })),
+        profile: (c) => c.client, templates: list(i.templates).map((t) => [t.title, t.body]),
+        reply: (c, text) => (replies.find((r) => r.match && rx(r.match).test(text || '')) || replies.find((r) => !r.match))?.text || null,
+      });
+      el.addEventListener('click', (e) => { const b = e.target.closest('[data-kw-act]'); if (b) on.action?.(b.dataset.kwAct); });
+    },
+    chatbot: ({ kit, ui }, i) => {
+      const answers = list(i.answers);
+      kit.chatbot(el, { name: i.title || 'Asistente', greeting: i.greeting || '', suggestions: list(i.suggestions).map((s) => s.text ?? s),
+        respond: (t) => { const a = answers.find((x) => x.match && rx(x.match).test(t)) || answers.find((x) => !x.match) || { text: '' }; return { text: a.text, actions: a.action ? ui.button({ label: a.action, variant: a.primary ? 'default' : 'outline', size: 'xs', attrs: `data-kw-act="${a.action}"` }) : '' }; } });
+      if (!el.__kwBound) { el.__kwBound = true; el.addEventListener('click', (e) => { const b = e.target.closest('[data-kw-act]'); if (b) on.action?.(b.dataset.kwAct); }); }
+    },
+    barChart: ({ kit, money0, today, addDays, DAY, MON }, i) => {
+      // a period is {label, days, values}: the labels are the last `days` days up to today
+      const periods = list(i.periods).map((p) => { const n = list(p.values).length; return [p.label, list(p.values).map((v, k) => { const d = addDays(today, k - n + 1); return [n > 14 ? `${d.getDate()} ${MON[d.getMonth()].slice(0, 3)}` : `${DAY[d.getDay()]} ${d.getDate()}`, v]; })]; });
+      kit.barChart(el, { title: i.title || '', data: periods[0]?.[1] || [], fmt: i.money === 'on' ? money0 : (v) => v, periods });
+    },
+    checklist: ({ kit }, i) => { kit.checklist(el, { title: i.title || '', steps: list(i.steps) }); el.addEventListener('click', (e) => { const b = e.target.closest('button'); if (b && !b.disabled && b.closest('[data-slot="item"], .cn-item')) on.action?.(b.textContent.trim()); }); },
+    plans: ({ kit }, i) => kit.plans(el, { yearlyNote: i.note || '', plans: list(i.plans) }),
+    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 || '' }),
+    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' }),
+    // days: {name, open, ranges [["09:00","13:00"]]}. Inside a form with a DirtyBar, «Descartar» brings the hours back.
+    weeklyHours: ({ kit }, i) => {
+      const wh = kit.weeklyHours(el, { days: list(i.days).map((d) => ({ name: d.name, open: !!d.open, ranges: list(d.ranges).map((r) => [...r]) })) });
+      let saved = wh.value(); const form = el.closest('.cx-set-form');
+      form?.addEventListener('discard', () => wh.set(saved)); form?.addEventListener('kit-saved', () => { saved = wh.value(); });
+      el.addEventListener('input', () => on.action?.(JSON.stringify(wh.value())));
+    },
+  };
+  RENDER.table = (core, i) => import('@muten/shadcn/registry/kit/table.js').then(({ dataTable }) => dataTable(el, { columns: i.columns, rows: i.rows, filters: i.filters, statuses: i.statuses, noun: [i.one || 'fila', i.many || 'filas'], bulk: i.bulk }, core, on));
+  // until the kit arrives the host keeps its final size with a shimmer (kit.css, :empty), then the widget fades in
+  el.classList.add('cx-kw-wait');
+  import('@muten/shadcn/registry/kit/core.js').then((core) => {
+    const render = RENDER[inputs.name]; if (!render) return;
+    render(core, inputs); el.classList.remove('cx-kw-wait');
+    el.animate([{ opacity: 0.001 }, { opacity: 1 }], { duration: 180, easing: 'ease-out' });
+    play(core, render);
+  });
+  // demo "on": the widget plays itself for a landing page - it presses its own control in turn (a stamp, a suggestion)
+  // and starts over when it runs out; the first touch hands it to the person. Still under reduced motion.
+  const DEMO = { stampCard: { target: '[data-stamp]', every: 1100, steps: () => (Number(inputs.total) || 10) - (Number(inputs.stamps) || 0) + 1 },
+                 chatbot: { target: '[data-sug]', every: 5200, steps: () => list(inputs.suggestions).length } };
+  function play(core, render) {
+    const d = DEMO[inputs.name];
+    if (!d || inputs.demo !== 'on' || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    let timer = 0, done = 0, stopped = false;
+    const tick = () => {
+      if (stopped) return;
+      const open = [...el.querySelectorAll(d.target)].filter((b) => !b.disabled);
+      if (!open.length || done >= d.steps()) { done = 0; timer = setTimeout(() => { if (stopped) return; el.innerHTML = ''; render(core, inputs); timer = setTimeout(tick, d.every); }, d.every * 1.6); return; }
+      open[0].click(); done++;
+      timer = setTimeout(tick, d.every);
+    };
+    el.addEventListener('pointerdown', () => { stopped = true; clearTimeout(timer); }, { once: true, capture: true });
+    timer = setTimeout(tick, d.every);
+  }
+  return () => {};
+}

package/registry/kit-widget.muten

@@ -0,0 +1,4 @@
+# KitWidget - the host the system kit's parts (Messaging, Chatbot, BarChart, Checklist, Plans, CardField, MemberList,
+# PermissionMatrix, StampCard, Bell, Queue, PasswordField) render through. Call those parts, not this.
+# shadcn-for-muten · Custom (kit core) · host JS is kit-widget.js.
+part KitWidget(name: text) { Custom KitWidget inputs(name: $name) class("cx-kit-widget") }

package/registry/link-btn.muten

@@ -1,7 +1,9 @@
-# LinkBtn - a navigation link that looks like a button (plug-and-play, no class props). For CTAs that go to a
-# route. Put the label/icon in the slot.
-#   LinkBtn(to: "/signup", variant: "default") { Span "Get started" }
-#   LinkBtn(to: "/docs", variant: "outline") { Span "Read the docs"  Icon "lucide:arrow-right" class("size-4") }
-# variant: default | secondary | outline | ghost | destructive | link.
-# shadcn-for-muten · part · no deps · wraps the Link primitive + the .btn recipe.
-part LinkBtn(to: text, variant: text) { Link -> "{$to}" class("btn btn-{$variant}") { slot } }
+# LinkBtn - a link to a route that looks like a Button: same variants and sizes as Btn, but it navigates (a real
+# <a>, so it opens in a new tab with a middle click and reads as a link). Label and icon go in the slot.
+#   LinkBtn(to: "/signup") { Span "Crear cuenta" }
+#   LinkBtn(to: "/docs", variant: "outline", size: "sm") { Span "Ver la guía"  Icon "lucide:arrow-right" }
+# variant: default | outline | secondary | ghost | destructive | link · size: xs | sm | default | lg | xl (44) | 2xl (52)
+# shadcn-for-muten · part · no deps · Nova classes (nova.css).
+part LinkBtn(to: text, variant: text = "default", size: text = "default") {
+  Link -> "{$to}" class("cn-button cn-button-variant-{$variant} cn-button-size-{$size} group/button") data(slot: "button") { slot }
+}