@muten/shadcn 0.0.7 → 0.1.0

package/registry/kit/dates.js

@@ -0,0 +1,106 @@
+// @muten/shadcn · dates & files (kit): the reference artifact's date and time fields (a field-like button that opens
+// the wheels in the ONE adaptive modal) and the image upload (validate, decode first, crop square, shrink to WebP,
+// upload with progress). Generic: values, ranges, limits and the upload address come in.
+
+const pad = (n) => String(n).padStart(2, '0');
+
+// DateField: i {label, value "yyyy-mm-dd" | "today", min "today" | "", years 2} → on.change("yyyy-mm-dd")
+export function dateField(root, i, core, on) {
+  const { $, ui, today, DAYLONG, MON, makeWheel, openModal, closeModal, CONTENT, body, foot } = core;
+  const MONTHS = MON.map((m) => m[0].toUpperCase() + m.slice(1));
+  const parse = (s) => { if (!s || s === 'today') return new Date(today); const d = new Date(String(s) + 'T00:00:00'); return Number.isNaN(d.getTime()) ? new Date(today) : d; };
+  let value = parse(i.value), draft = null, wheels = [];
+  const min = i.min === 'today' ? today : i.min ? parse(i.min) : null;
+  const YEARS = Array.from({ length: Number(i.years) || 2 }, (_, k) => today.getFullYear() + k);
+  const longDate = (d) => `${DAYLONG[d.getDay()]} ${d.getDate()} de ${MON[d.getMonth()]} de ${d.getFullYear()}`;
+  const id = 'dp' + Math.random().toString(36).slice(2, 7), kind = 'date' + id;
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><span class="cn-label" id="${id}-l">${i.label || 'Fecha'}</span><button class="cn-button cn-button-variant-outline cn-button-size-default cx-picker-field" aria-labelledby="${id}-l ${id}-v"><svg><use href="#cal"/></svg><span id="${id}-v"></span><svg class="cx-pf-chev"><use href="#chev"/></svg></button></div>`;
+  const out = $(`#${id}-v`, root), paint = () => { out.textContent = longDate(value); };
+  const daysIn = (y, m) => new Date(y, m + 1, 0).getDate();
+  CONTENT[kind] = () => {
+    document.getElementById('mdl-title').textContent = i.title || 'Elige la fecha'; document.getElementById('mdl-desc').textContent = 'Arrastra cada rueda, toca un valor o usa las flechas.';
+    body.innerHTML = '<div class="cx-wheels"><div class="cx-wheel" data-w="d"></div><div class="cx-wheel" data-flex="2" data-w="m"></div><div class="cx-wheel" data-w="y"></div></div><p class="cx-wheel-sum"></p>';
+    foot.innerHTML = ui.button({ label: 'Cancelar', size: 'default', attrs: 'data-dismiss', cls: 'cx-exit' }) + ui.button({ label: 'Listo', variant: 'default', size: 'default', attrs: `data-dp-ok="${id}"`, cls: 'cx-go' });
+    draft = { y: value.getFullYear(), m: value.getMonth(), d: value.getDate() };
+    const sumEl = $('.cx-wheel-sum', body);
+    const sum = () => { const d = new Date(draft.y, draft.m, draft.d), past = min && d < min; sumEl.textContent = past ? 'Esa fecha ya pasó' : longDate(d); sumEl.style.color = past ? 'var(--destructive)' : ''; $(`[data-dp-ok]`, foot).disabled = !!past; if (min) wD.offs((k) => new Date(draft.y, draft.m, k + 1) < min); };
+    const days = () => Array.from({ length: daysIn(draft.y, draft.m) }, (_, k) => k + 1);
+    const wD = makeWheel($('[data-w=d]', body), days(), draft.d - 1, (k) => { draft.d = k + 1; sum(); }, 'Día');
+    const fixDays = () => { const max = daysIn(draft.y, draft.m); if (draft.d > max) draft.d = max; wD.relabel(days()); sum(); };
+    const wM = makeWheel($('[data-w=m]', body), MONTHS, draft.m, (k) => { draft.m = k; fixDays(); }, 'Mes');
+    const wY = makeWheel($('[data-w=y]', body), YEARS, Math.max(0, YEARS.indexOf(draft.y)), (k) => { draft.y = YEARS[k]; fixDays(); }, 'Año');
+    wheels = [wD, wM, wY]; sum();
+  };
+  $('button', root).addEventListener('click', () => { openModal(kind, 'auto'); requestAnimationFrame(() => requestAnimationFrame(() => { wheels.forEach((w) => w.place()); $('.cx-wheel', body)?.focus({ preventScroll: true }); })); });
+  document.addEventListener('click', (e) => { const ok = e.target.closest(`[data-dp-ok="${id}"]`); if (!ok || ok.disabled) return; value = new Date(draft.y, draft.m, draft.d); paint(); closeModal(); on?.change?.(`${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`); });
+  paint();
+}
+
+// TimeField: i {label, value "10:30", from 9, to 19, step 15} → on.change("HH:MM")
+export function timeField(root, i, core, on) {
+  const { $, ui, makeWheel, openModal, closeModal, CONTENT, body, foot } = core;
+  const from = Number(i.from ?? 9), to = Number(i.to ?? 19), step = Number(i.step) || 15;
+  const HOURS = Array.from({ length: to - from + 1 }, (_, k) => k + from), MINS = Array.from({ length: Math.ceil(60 / step) }, (_, k) => k * step);
+  const [h0, m0] = String(i.value || `${pad(from)}:00`).split(':').map(Number);
+  let value = { h: HOURS.includes(h0) ? h0 : from, m: MINS.includes(m0) ? m0 : 0 }, draft = null, wheels = [];
+  const hm = (t) => `${pad(t.h)}:${pad(t.m)}`, part = (t) => (t.h < 12 ? 'mañana' : 'tarde');
+  const id = 'tp' + Math.random().toString(36).slice(2, 7), kind = 'time' + id;
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><span class="cn-label" id="${id}-l">${i.label || 'Hora'}</span><button class="cn-button cn-button-variant-outline cn-button-size-default cx-picker-field" aria-labelledby="${id}-l ${id}-v"><svg><use href="#clock"/></svg><span id="${id}-v"></span><svg class="cx-pf-chev"><use href="#chev"/></svg></button></div>`;
+  const out = $(`#${id}-v`, root), paint = () => { out.textContent = `${hm(value)} · ${part(value)}`; };
+  CONTENT[kind] = () => {
+    document.getElementById('mdl-title').textContent = i.title || 'Elige la hora'; document.getElementById('mdl-desc').textContent = i.description || `Horario: ${pad(from)}:00 a ${pad(to)}:${pad(MINS.at(-1))}. Arrastra o toca.`;
+    body.innerHTML = '<div class="cx-wheels"><div class="cx-wheel" data-w="h"></div><div class="cx-wheel" data-w="mi"></div></div><p class="cx-wheel-sum"></p>';
+    foot.innerHTML = ui.button({ label: 'Cancelar', size: 'default', attrs: 'data-dismiss', cls: 'cx-exit' }) + ui.button({ label: 'Listo', variant: 'default', size: 'default', attrs: `data-tp-ok="${id}"`, cls: 'cx-go' });
+    draft = { ...value };
+    const sumEl = $('.cx-wheel-sum', body), sum = () => { sumEl.textContent = `${hm(draft)} · ${part(draft)}`; };
+    wheels = [makeWheel($('[data-w=h]', body), HOURS.map(pad), HOURS.indexOf(draft.h), (k) => { draft.h = HOURS[k]; sum(); }, 'Hora'), makeWheel($('[data-w=mi]', body), MINS.map(pad), MINS.indexOf(draft.m), (k) => { draft.m = MINS[k]; sum(); }, 'Minutos')];
+    sum();
+  };
+  $('button', root).addEventListener('click', () => { openModal(kind, 'auto'); requestAnimationFrame(() => requestAnimationFrame(() => { wheels.forEach((w) => w.place()); $('.cx-wheel', body)?.focus({ preventScroll: true }); })); });
+  document.addEventListener('click', (e) => { const ok = e.target.closest(`[data-tp-ok="${id}"]`); if (!ok) return; value = { ...draft }; paint(); closeModal(); on?.change?.(hm(value)); });
+  paint();
+}
+
+// ImageUpload: i {title, hint, maxMb 10, size 1200, uploadUrl, sample "on"} → on.ready(json {dataUrl | url, width, height, kb})
+// Without uploadUrl the processed image is handed back as a data URL; with it, the WebP is POSTed with real progress.
+export function imageUpload(root, i, core, on) {
+  const { $ } = core;
+  const MAX = (Number(i.maxMb) || 10) * 1024 * 1024, SIZE = Number(i.size) || 1200, idle = i.hint || `JPG, PNG o WebP · hasta ${Number(i.maxMb) || 10} MB`;
+  root.innerHTML = `<div class="cx-drop" tabindex="0" role="button"><input type="file" accept="image/*" hidden><div class="cx-drop-empty"><svg><use href="#upload"/></svg><b>${i.title || 'Sube la foto'}</b><span>Toca, arrastra o pega aquí</span></div><canvas class="cx-drop-img" width="600" height="600" hidden></canvas><div class="cx-drop-bar" hidden><i></i></div></div><p class="cx-note cx-drop-msg" style="text-align:left">${idle}</p><div class="cx-line cx-line-start">${i.sample === 'on' ? '<button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-drop-sample><svg><use href="#image"/></svg>Usar una de ejemplo</button>' : ''}<button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-sm group/button" data-drop-remove hidden><svg><use href="#trash"/></svg>Quitar</button></div>`;
+  const drop = $('.cx-drop', root), dropFile = $('input', root), dropMsg = $('.cx-drop-msg', root), dropCanvas = $('canvas', root), dropBar = $('.cx-drop-bar', root), dropProg = $('.cx-drop-bar i', root), removeB = $('[data-drop-remove]', root);
+  const say = (text, tone) => { dropMsg.textContent = text; if (tone) dropMsg.dataset.tone = tone; else dropMsg.removeAttribute('data-tone'); };
+  const coverDraw = (ctx, bmp, size) => { const s = Math.min(bmp.width, bmp.height); ctx.drawImage(bmp, (bmp.width - s) / 2, (bmp.height - s) / 2, s, s, 0, 0, size, size); };
+  const progress = (p) => { dropProg.style.width = p + '%'; say(`Subiendo… ${Math.round(p)} %`); };
+  const takeFile = async (file) => {
+    if (!file) return;
+    if (!file.type.startsWith('image/')) return say(`«${file.name}» no es una imagen. Usa JPG, PNG o WebP.`, 'bad');
+    if (file.size > MAX) return say(`Pesa ${(file.size / 1048576).toFixed(1).replace('.', ',')} MB; el tope es ${Number(i.maxMb) || 10} MB.`, 'bad');
+    say('Preparando la imagen…');
+    let bmp; try { bmp = await createImageBitmap(file); } catch { return say('No pudimos leer esa imagen. Prueba con otra.', 'bad'); }
+    coverDraw(dropCanvas.getContext('2d'), bmp, dropCanvas.width);
+    const out = document.createElement('canvas'); out.width = out.height = Math.min(SIZE, Math.min(bmp.width, bmp.height)); coverDraw(out.getContext('2d'), bmp, out.width);
+    const blob = await new Promise((r) => out.toBlob(r, 'image/webp', 0.86));
+    dropCanvas.hidden = false; drop.setAttribute('data-has', ''); removeB.hidden = false; dropBar.hidden = false; progress(0);
+    const done = (extra) => { dropBar.hidden = true; say(`Lista · ${out.width} × ${out.height} px, ${Math.max(1, Math.round(blob.size / 1024))} KB`, 'ok'); on?.ready?.(JSON.stringify({ width: out.width, height: out.height, kb: Math.round(blob.size / 1024), ...extra })); };
+    if (i.uploadUrl) {
+      const xhr = new XMLHttpRequest(); xhr.open('POST', i.uploadUrl); xhr.upload.onprogress = (e) => { if (e.lengthComputable) progress((e.loaded / e.total) * 100); };
+      xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { progress(100); setTimeout(() => done({ url: xhr.responseText }), 250); } else say('No se pudo subir. Inténtalo otra vez.', 'bad'); };
+      xhr.onerror = () => say('No se pudo subir. Revisa tu conexión.', 'bad'); xhr.send(blob);
+    } else { const r = new FileReader(); r.onload = () => { progress(100); setTimeout(() => done({ dataUrl: r.result }), 200); }; r.readAsDataURL(blob); }
+  };
+  drop.addEventListener('click', () => { if (!drop.hasAttribute('data-has')) dropFile.click(); });
+  drop.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && !drop.hasAttribute('data-has')) { e.preventDefault(); dropFile.click(); } });
+  dropFile.addEventListener('change', () => { takeFile(dropFile.files[0]); dropFile.value = ''; });
+  ['dragenter', 'dragover'].forEach((t) => drop.addEventListener(t, (e) => { e.preventDefault(); drop.setAttribute('data-over', ''); }));
+  ['dragleave', 'drop'].forEach((t) => drop.addEventListener(t, () => drop.removeAttribute('data-over')));
+  drop.addEventListener('drop', (e) => { e.preventDefault(); takeFile(e.dataTransfer.files[0]); });
+  document.addEventListener('paste', (e) => { if (e.target.closest?.('input, textarea')) return; const f = [...(e.clipboardData?.files || [])].find((x) => x.type.startsWith('image/')); if (f && root.isConnected) { drop.scrollIntoView({ block: 'center', behavior: 'smooth' }); takeFile(f); } });
+  removeB.onclick = () => { drop.removeAttribute('data-has'); dropCanvas.hidden = true; dropBar.hidden = true; removeB.hidden = true; say(idle); on?.ready?.(''); };
+  $('[data-drop-sample]', root)?.addEventListener('click', () => {
+    const c = document.createElement('canvas'); c.width = 1600; c.height = 1100; const g = c.getContext('2d');
+    const gr = g.createLinearGradient(0, 0, 1600, 1100); gr.addColorStop(0, '#d9b48c'); gr.addColorStop(1, '#5e3f27'); g.fillStyle = gr; g.fillRect(0, 0, 1600, 1100);
+    g.fillStyle = 'rgba(255,255,255,.18)'; for (let k = 0; k < 9; k++) { g.beginPath(); g.arc(300 + k * 130, 550 + Math.sin(k) * 160, 60 + (k % 3) * 30, 0, 7); g.fill(); }
+    g.fillStyle = '#fff'; g.font = '600 110px sans-serif'; g.textAlign = 'center'; g.fillText('El Roble', 800, 590);
+    c.toBlob((b) => takeFile(new File([b], 'ejemplo.png', { type: 'image/png' })), 'image/png');
+  });
+}

package/registry/kit/menus.js

@@ -0,0 +1,90 @@
+// @muten/shadcn · menus (kit): the reference artifact's Combobox (type, it filters and marks the match, arrows, Enter,
+// «Usar …» for something not in the list), the row menu ⋯ (arrows, Home/End, type-ahead, Esc returns focus) and the
+// store QR (with the mark in the middle and «Copiar enlace»). Generic: options, items and the link come in.
+
+export function combobox(root, i, core, on) {
+  const { $, $$, lib, place, show, hide, fold } = core;
+  const OPTIONS = String(i.options || '').split(',').map((x) => x.trim()).filter(Boolean);
+  const allowNew = i.allowNew !== 'off', id = 'cb' + 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 || ''}</label><div data-slot="input-group" class="cn-input-group group/input-group cx-combo"><input data-slot="input-group-control" class="cn-input cn-input-group-input" id="${id}" role="combobox" aria-expanded="false" aria-controls="${id}-list" aria-autocomplete="list" autocomplete="off" placeholder="${i.placeholder || ''}"><div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-end"><svg><use href="#updown"/></svg></div></div>${i.hint === 'off' ? '' : `<p data-slot="field-description" class="cn-field-description" data-cb-out>Elegida: ${i.value || 'ninguna'}</p>`}</div>`;
+  const cIn = $('input', root), cGroup = $('.cx-combo', root), cOut = $('[data-cb-out]', root);
+  const cList = document.createElement('div'); cList.className = 'cx-combo-list pg-pop'; cList.id = `${id}-list`; cList.setAttribute('role', 'listbox'); cList.hidden = true; lib.appendChild(cList);
+  let cOpts = [], cHl = 0, cValue = i.value || '';
+  cIn.value = cValue;
+  const mark = (name, typed) => { const k = fold(name).indexOf(fold(typed)); return !typed || k < 0 ? name : name.slice(0, k) + '<mark>' + name.slice(k, k + typed.length) + '</mark>' + name.slice(k + typed.length); };
+  const cRender = () => {
+    const typed = cIn.value.trim();
+    const hits = OPTIONS.filter((c) => fold(c).includes(fold(typed)));
+    cOpts = hits.map((c) => ({ value: c, html: `<span>${mark(c, typed)}</span>` + (c === cValue ? '<svg class="cx-tick"><use href="#check"/></svg>' : '') }));
+    if (allowNew && typed && !OPTIONS.some((c) => fold(c) === fold(typed))) cOpts.push({ value: typed, html: `<span>Usar «<b>${typed.replace(/</g, '&lt;')}</b>»</span>`, isNew: true });
+    cHl = Math.min(cHl, Math.max(0, cOpts.length - 1));
+    cList.innerHTML = cOpts.map((o, k) => `<div class="cx-opt${o.isNew ? ' cx-opt-new' : ''}" role="option" id="${id}-o${k}" data-k="${k}" aria-selected="${o.value === cValue}"${k === cHl ? ' data-hl' : ''}>${o.html}</div>`).join('') || '<div class="cx-opt" style="color:var(--muted-foreground)">Escribe para buscar</div>';
+    cIn.setAttribute('aria-activedescendant', cOpts.length ? `${id}-o${cHl}` : '');
+    $('[data-hl]', cList)?.scrollIntoView({ block: 'nearest' });
+  };
+  const cOpen = () => { if (!cList.hidden && cList.dataset.state === 'open') return; cRender(); cList.hidden = false; place(cList, cGroup, 'start', 4, cGroup.offsetWidth); show(cList); cIn.setAttribute('aria-expanded', 'true'); };
+  const cClose = () => { hide(cList, 110); cIn.setAttribute('aria-expanded', 'false'); };
+  const cPick = (k) => { const o = cOpts[k]; if (!o) return; cValue = o.value; cIn.value = o.value; if (cOut) cOut.textContent = `Elegida: ${o.value}${o.isNew ? ' (escrita por ti)' : ''}`; cClose(); on?.change?.(o.value); };
+  cIn.addEventListener('focus', cOpen);
+  cIn.addEventListener('input', () => { cHl = 0; cOpen(); cRender(); });
+  cIn.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); if (cList.hidden) return cOpen(); cHl = (cHl + (e.key === 'ArrowDown' ? 1 : -1) + cOpts.length) % Math.max(1, cOpts.length); cRender(); }
+    else if (e.key === 'Enter') { if (!cList.hidden) { e.preventDefault(); cPick(cHl); } }
+    else if (e.key === 'Escape') { if (!cList.hidden) { e.stopPropagation(); cClose(); } }
+    else if (e.key === 'Tab') cClose();
+  });
+  cList.addEventListener('pointerdown', (e) => e.preventDefault());
+  cList.addEventListener('pointermove', (e) => { const o = e.target.closest('[role=option]'); if (!o) return; const k = +o.dataset.k; if (k !== cHl) { cHl = k; $$('[role=option]', cList).forEach((x) => x.toggleAttribute('data-hl', x === o)); } });
+  cList.addEventListener('click', (e) => { const o = e.target.closest('[role=option]'); if (o) cPick(+o.dataset.k); });
+  cGroup.addEventListener('pointerdown', (e) => { if (e.target !== cIn) { e.preventDefault(); cIn.focus(); cOpen(); } });
+  document.addEventListener('pointerdown', (e) => { if (!cList.hidden && !cList.contains(e.target) && !cGroup.contains(e.target)) cClose(); });
+  addEventListener('scroll', () => { if (!cList.hidden) place(cList, cGroup, 'start', 4, cGroup.offsetWidth); }, { passive: true });
+}
+
+// Row menu ⋯: the trigger button (in the row's actions) and its menu. i {label, items [{id, label, icon, danger, separator}]}
+export function rowMenu(root, i, core, on) {
+  const { $, lib, place, show, hide, fold, ui } = core;
+  const items = Array.isArray(i.items) ? i.items : [];
+  root.innerHTML = ui.button({ icon: 'more', variant: 'ghost', size: 'icon-sm', attrs: `data-menu aria-haspopup="menu" aria-expanded="false" aria-label="${i.label || 'Más opciones'}" title="Más opciones"` });
+  const btn = $('[data-menu]', root);
+  const menu = document.createElement('div'); menu.dataset.slot = 'dropdown-menu-content'; menu.className = 'cn-dropdown-menu-content pg-pop'; menu.setAttribute('role', 'menu'); menu.hidden = true; menu.style.minWidth = '184px';
+  menu.innerHTML = items.map((it) => `${it.separator ? '<div data-slot="dropdown-menu-separator" class="cn-dropdown-menu-separator"></div>' : ''}<div data-slot="dropdown-menu-item" ${it.danger ? 'data-variant="destructive"' : ''} class="cn-dropdown-menu-item group/dropdown-menu-item" role="menuitem" tabindex="-1" data-act="${it.id}">${it.icon ? ui.icon(it.icon) : ''}${it.label}</div>`).join('');
+  lib.appendChild(menu);
+  const all = () => [...menu.querySelectorAll('[role=menuitem]')];
+  let open = false;
+  const close = (refocus) => { if (!open) return; open = false; hide(menu, 120); btn.setAttribute('aria-expanded', 'false'); if (refocus) btn.focus(); };
+  btn.addEventListener('click', (e) => { e.stopPropagation(); if (open) return close(); open = true; menu.hidden = false; place(menu, btn, 'end', 4); show(menu); btn.setAttribute('aria-expanded', 'true'); all()[0]?.focus({ preventScroll: true }); });
+  document.addEventListener('pointerdown', (e) => { if (open && !menu.contains(e.target) && !btn.contains(e.target)) close(); });
+  menu.addEventListener('pointermove', (e) => { const m = e.target.closest('[role=menuitem]'); if (m && document.activeElement !== m) m.focus({ preventScroll: true }); });
+  menu.addEventListener('keydown', (e) => {
+    const list = all(), k = list.indexOf(document.activeElement);
+    const to = { ArrowDown: k + 1, ArrowUp: k - 1, Home: 0, End: list.length - 1 }[e.key];
+    if (to !== undefined) { e.preventDefault(); list[(to + list.length) % list.length].focus(); return; }
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(true); return; }
+    if (e.key === 'Tab') { close(); return; }
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); document.activeElement.click(); return; }
+    if (e.key.length === 1) { const ch = fold(e.key); [...list.slice(k + 1), ...list.slice(0, k + 1)].find((m) => fold(m.textContent.trim()).startsWith(ch))?.focus(); }
+  });
+  menu.addEventListener('click', (e) => { const m = e.target.closest('[role=menuitem]'); if (!m) return; close(true); on?.pick?.(m.dataset.act); });
+  addEventListener('scroll', () => { if (open) place(menu, btn, 'end', 4); }, { passive: true });
+}
+
+// Store QR: the code with the shop's mark in the middle, the name, the link and «Copiar enlace».
+export function storeQr(root, i, core) {
+  const { $ } = core;
+  const url = i.url || '', shown = url.replace(/^https?:\/\//, '');
+  root.innerHTML = `<div class="cx-qr-card"><div class="cx-qr" role="img" aria-label="Código QR de ${shown}"></div><div class="cx-qr-side"><b>${i.name || ''}</b><span class="cx-qr-url">${shown}</span><button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button cx-copy"><span class="cx-btn-label"><svg><use href="#copyi"/></svg>Copiar enlace</span></button></div></div>`;
+  const qrBox = $('.cx-qr', root);
+  import('@muten/shadcn/registry/kit/qrcode.js').then(({ default: qrcode }) => {
+    const qr = qrcode(0, 'H'); qr.addData(url); qr.make();
+    const n = qr.getModuleCount(); let d = '';
+    for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (qr.isDark(r, c)) d += `M${c} ${r}h1v1h-1z`;
+    qrBox.innerHTML = `<svg viewBox="0 0 ${n} ${n}" shape-rendering="crispEdges" aria-hidden="true"><path d="${d}" fill="var(--qr-ink)"/></svg>${i.mark ? `<div class="cx-qr-mark"><span>${i.mark}</span></div>` : ''}`;
+  });
+  const copyBtn = $('.cx-copy', root), copyLabel = $('.cx-btn-label', copyBtn), copyIdle = copyLabel.innerHTML;
+  copyBtn.onclick = () => {
+    const done = (ok) => { copyBtn.toggleAttribute('data-done', ok); copyLabel.innerHTML = ok ? '<svg><use href="#check"/></svg>Copiado' : 'Selecciónalo y copia'; setTimeout(() => { copyBtn.removeAttribute('data-done'); copyLabel.innerHTML = copyIdle; }, 1800); };
+    const fallback = () => { getSelection().selectAllChildren($('.cx-qr-url', root)); done(false); };
+    try { navigator.clipboard.writeText(url).then(() => done(true), fallback); } catch { fallback(); }
+  };
+}

package/registry/kit/overlays.js

@@ -0,0 +1,114 @@
+// kit/overlays.js - the one behaviour behind every floating piece made of muten parts: Popover, HoverCard,
+// DropdownMenu, ContextMenu, Menubar and NavigationMenu. The parts write a wrapper (.cx-ov) holding a trigger
+// (.cx-ov-trigger) and a content panel (.cx-ov-content) side by side; this module opens and closes the panel.
+//   · the panel rises to the browser's top layer (the popover API), so no overflow or stacking context clips it,
+//     and it never leaves its place in the DOM (muten keeps owning and updating it)
+//   · it is placed next to its trigger with the kit's place() and flips up when it does not fit below
+//   · it closes on a click outside, on Esc (focus goes back to the trigger), on Tab out, and when the page scrolls
+//     it follows its trigger
+//   · a menu moves with the arrows, Home/End and the first letter; Enter or Space picks; a picked item closes it
+//     (a check or radio item stays open, as in shadcn)
+// kinds: popover (click) · hover (hover or focus, with a short delay) · menu (click, keyboard menu) ·
+//        context (right click or a long press, placed at the pointer) · menubar / navmenu (one open at a time in
+//        their bar, hover moves between them once one is open)
+
+const ITEMS = '[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])';
+const KEEP_OPEN = '[role="menuitemcheckbox"], [role="menuitemradio"]';
+const openBars = new WeakMap();
+
+export function overlay(host, kind, core) {
+  const { place, fold } = core;
+  const wrap = host.parentElement;
+  const trigger = wrap.querySelector(':scope > .cx-ov-trigger');
+  const panel = wrap.querySelector(':scope > .cx-ov-content');
+  if (!trigger || !panel) return;
+  const isMenu = kind === 'menu' || kind === 'context' || kind === 'menubar';
+  const bar = kind === 'menubar' || kind === 'navmenu' ? wrap.parentElement : null;
+  const button = () => trigger.querySelector('button, a, [tabindex]') || trigger;
+  panel.setAttribute('popover', 'manual');
+  panel.hidden = false;
+  if (isMenu) panel.setAttribute('role', 'menu');
+  else if (kind !== 'navmenu') panel.setAttribute('role', 'dialog');
+  const btn = button();
+  if (kind !== 'context') { btn.setAttribute('aria-haspopup', isMenu ? 'menu' : 'dialog'); btn.setAttribute('aria-expanded', 'false'); }
+
+  let open = false, at = null, hoverTimer = 0;
+  const items = () => [...panel.querySelectorAll(ITEMS)].filter((x) => x.offsetParent !== null || panel.matches(':popover-open'));
+  const align = () => panel.dataset.align || (kind === 'menubar' || kind === 'navmenu' ? 'start' : 'center');
+  const anchor = () => (at ? { getBoundingClientRect: () => ({ left: at.x, right: at.x, top: at.y, bottom: at.y, width: 0, height: 0 }) } : trigger);
+  const position = () => { if (open) place(panel, anchor(), at ? 'start' : align(), Number(panel.dataset.gap) || (kind === 'navmenu' ? 8 : 4)); };
+  const show = (focusFirst) => {
+    if (open) return; open = true;
+    if (bar) { const other = openBars.get(bar); if (other && other !== api) other.close(false); openBars.set(bar, api); }
+    try { panel.showPopover(); } catch { /* already in the top layer */ }
+    panel.removeAttribute('data-closed'); panel.setAttribute('data-open', ''); panel.dataset.state = 'open';
+    position();
+    if (kind !== 'context') btn.setAttribute('aria-expanded', 'true');
+    trigger.dataset.open = '';
+    if (isMenu && focusFirst) items()[0]?.focus({ preventScroll: true });
+    else if (kind === 'popover') panel.querySelector('input, textarea, button, [tabindex]:not([tabindex="-1"])')?.focus({ preventScroll: true });
+  };
+  const close = (refocus) => {
+    if (!open) return; open = false; at = null;
+    if (bar && openBars.get(bar) === api) openBars.delete(bar);
+    panel.removeAttribute('data-open'); panel.setAttribute('data-closed', ''); panel.dataset.state = 'closed';
+    if (kind !== 'context') btn.setAttribute('aria-expanded', 'false');
+    delete trigger.dataset.open;
+    const done = () => { if (!open) { try { panel.hidePopover(); } catch { /* not open */ } } };
+    requestAnimationFrame(() => { const runs = panel.getAnimations(); if (!runs.length) return done(); Promise.all(runs.map((a) => a.finished.catch(() => {}))).then(done); });
+    setTimeout(done, 500);
+    if (refocus) btn.focus({ preventScroll: true });
+  };
+  const api = { close, show, trigger };
+
+  // ── opening ──
+  if (kind === 'hover' || kind === 'navmenu') {
+    const enter = () => { clearTimeout(hoverTimer); hoverTimer = setTimeout(() => show(false), kind === 'navmenu' && bar && openBars.get(bar) ? 0 : (Number(panel.dataset.delay) || 250)); };
+    const leave = () => { clearTimeout(hoverTimer); hoverTimer = setTimeout(() => close(false), 180); };
+    [trigger, panel].forEach((x) => { x.addEventListener('pointerenter', (e) => { if (e.pointerType !== 'touch') enter(); }); x.addEventListener('pointerleave', (e) => { if (e.pointerType !== 'touch') leave(); }); });
+    trigger.addEventListener('focusin', () => show(false));
+    wrap.addEventListener('focusout', (e) => { if (!wrap.contains(e.relatedTarget) && !panel.contains(e.relatedTarget)) close(false); });
+  }
+  if (kind === 'popover' || kind === 'menu' || kind === 'menubar' || kind === 'navmenu') {
+    trigger.addEventListener('click', (e) => { if (kind === 'navmenu' && !panel.childElementCount) return; e.preventDefault(); if (open) close(false); else show(e.detail === 0); });
+    trigger.addEventListener('keydown', (e) => { if (isMenu && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); show(true); } });
+  }
+  if (kind === 'menubar') {
+    trigger.addEventListener('pointerenter', () => { const other = openBars.get(bar); if (other && other !== api) { show(false); } });
+  }
+  if (kind === 'context') {
+    trigger.addEventListener('contextmenu', (e) => { e.preventDefault(); close(false); at = { x: e.clientX, y: e.clientY }; open = false; show(true); });
+    let press = 0;
+    trigger.addEventListener('pointerdown', (e) => { if (e.pointerType !== 'touch') return; press = setTimeout(() => { at = { x: e.clientX, y: e.clientY }; show(true); navigator.vibrate?.(8); }, 500); });
+    ['pointerup', 'pointercancel', 'pointermove'].forEach((t) => trigger.addEventListener(t, () => clearTimeout(press)));
+    trigger.addEventListener('keydown', (e) => { if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) { e.preventDefault(); const r = trigger.getBoundingClientRect(); at = { x: r.left + 12, y: r.top + 12 }; show(true); } });
+  }
+
+  // ── closing and following ──
+  document.addEventListener('pointerdown', (e) => { if (open && !panel.contains(e.target) && !trigger.contains(e.target)) close(false); }, true);
+  panel.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(true); return; }
+    if (e.key === 'Tab' && isMenu) { close(false); return; }
+    if (!isMenu) return;
+    const list = items(), k = list.indexOf(document.activeElement);
+    const to = { ArrowDown: k + 1, ArrowUp: k - 1, Home: 0, End: list.length - 1 }[e.key];
+    if (to !== undefined) { e.preventDefault(); list[(to + list.length) % list.length]?.focus(); return; }
+    if (bar && (e.key === 'ArrowRight' || e.key === 'ArrowLeft')) {
+      e.preventDefault(); const menus = [...bar.querySelectorAll(':scope > .cx-ov')]; const i = menus.indexOf(wrap);
+      const next = menus[(i + (e.key === 'ArrowRight' ? 1 : -1) + menus.length) % menus.length];
+      close(false); next.querySelector(':scope > .cx-ov-trigger button')?.click(); return;
+    }
+    if (e.key === 'Enter' || e.key === ' ') { if (document.activeElement && list.includes(document.activeElement)) { e.preventDefault(); document.activeElement.click(); } return; }
+    if (e.key.length === 1 && /\S/.test(e.key)) { const ch = fold(e.key); [...list.slice(k + 1), ...list.slice(0, k + 1)].find((m) => fold(m.textContent.trim()).startsWith(ch))?.focus(); }
+  });
+  trigger.addEventListener('keydown', (e) => { if (e.key === 'Escape' && open) { e.preventDefault(); close(true); } });
+  if (isMenu) {
+    panel.addEventListener('pointermove', (e) => { const m = e.target.closest(ITEMS); if (m && document.activeElement !== m) m.focus({ preventScroll: true }); });
+    panel.addEventListener('click', (e) => { const m = e.target.closest(ITEMS); if (m && !m.matches(KEEP_OPEN)) close(true); });
+  } else {
+    panel.addEventListener('click', (e) => { if (e.target.closest('[data-ovclose]')) close(true); });
+  }
+  addEventListener('scroll', position, { passive: true, capture: true });
+  addEventListener('resize', position);
+  return api;
+}

package/registry/kit/paint.js

@@ -0,0 +1,211 @@
+var PAINT = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  var paint_exports = {};
+  __export(paint_exports, {
+    ANIM_LABELS: () => ANIM_LABELS,
+    MAX_STOPS: () => MAX_STOPS,
+    PAIRS: () => PAIRS,
+    SPEEDS: () => SPEEDS,
+    barCss: () => barCss,
+    hexToHsl: () => hexToHsl,
+    hslToHex: () => hslToHex,
+    isHex: () => isHex,
+    legacyPaint: () => legacyPaint,
+    mixHex: () => mixHex,
+    paintAnim: () => paintAnim,
+    paintBase: () => paintBase,
+    paintBg: () => paintBg,
+    paintCss: () => paintCss,
+    paintMain: () => paintMain,
+    paintSize: () => paintSize,
+    parsePaint: () => parsePaint,
+    printPaint: () => printPaint
+  });
+  const SPEEDS = [24, 14, 7];
+  const MAX_STOPS = 4;
+  const ANIM_LABELS = {
+    none: { es: "Nada", en: "None" },
+    flow: { es: "Fluir", en: "Flow" },
+    breathe: { es: "Respirar", en: "Breathe" },
+    spin: { es: "Girar", en: "Spin" },
+    hue: { es: "Tono", en: "Hue" }
+  };
+  const PAIRS = [
+    { name: { es: "Aurora", en: "Aurora" }, colours: ["#6B46F2", "#ff5ca8", "#ffb36b"] },
+    { name: { es: "Atardecer", en: "Sunset" }, colours: ["#f97316", "#db2777"] },
+    { name: { es: "Durazno", en: "Peach" }, colours: ["#ffd6a5", "#ff7eb3"] },
+    { name: { es: "Oro", en: "Gold" }, colours: ["#fbbf24", "#b45309"] },
+    { name: { es: "Brasa", en: "Ember" }, colours: ["#1c0f0a", "#c2410c"] },
+    { name: { es: "Vino", en: "Wine" }, colours: ["#2a0b16", "#9f1239"] },
+    { name: { es: "Lavanda", en: "Lavender" }, colours: ["#e9d5ff", "#7c3aed"] },
+    { name: { es: "Noche", en: "Night" }, colours: ["#0f172a", "#4338ca"] },
+    { name: { es: "Oc\xE9ano", en: "Ocean" }, colours: ["#0ea5e9", "#1e3a8a"] },
+    { name: { es: "Hielo", en: "Ice" }, colours: ["#e0f2fe", "#38bdf8"] },
+    { name: { es: "Menta", en: "Mint" }, colours: ["#a7f3d0", "#0d9488"] },
+    { name: { es: "Bosque", en: "Forest" }, colours: ["#14532d", "#65a30d"] }
+  ];
+  const TYPES = ["linear", "radial", "conic"];
+  const ANIMS = ["none", "flow", "breathe", "spin", "hue"];
+  const HEX = /^#[0-9a-f]{6}$/i;
+  const FALLBACK = "#4b3aa8";
+  function isHex(value) {
+    return HEX.test(String(value ?? "").trim());
+  }
+  function hslToHex(h, s, l) {
+    const sat = s / 100;
+    const light = l / 100;
+    const chroma = sat * Math.min(light, 1 - light);
+    const channel = (n) => {
+      const k = (n + h / 30) % 12;
+      const value = light - chroma * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)));
+      return Math.round(255 * value).toString(16).padStart(2, "0");
+    };
+    return `#${channel(0)}${channel(8)}${channel(4)}`;
+  }
+  function hexToHsl(hex) {
+    const clean = String(hex ?? "").trim();
+    if (!HEX.test(clean)) return hexToHsl(FALLBACK);
+    const [r, g, b] = [1, 3, 5].map((at) => parseInt(clean.slice(at, at + 2), 16) / 255);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const light = (max + min) / 2;
+    let hue = 0;
+    let sat = 0;
+    if (max !== min) {
+      const span = max - min;
+      sat = light > 0.5 ? span / (2 - max - min) : span / (max + min);
+      if (max === r) hue = (g - b) / span + (g < b ? 6 : 0);
+      else if (max === g) hue = (b - r) / span + 2;
+      else hue = (r - g) / span + 4;
+      hue *= 60;
+    }
+    return { h: Math.round(hue), s: Math.round(sat * 100), l: Math.round(light * 100) };
+  }
+  function solidOf(hex) {
+    const colour = (isHex(hex) ? hex : FALLBACK).toLowerCase();
+    return { type: "solid", angle: 150, stops: [{ c: colour, p: 0 }, { c: colour, p: 100 }], anim: "none", speed: 1 };
+  }
+  function mixHex(from, to, weight) {
+    const channels = (hex) => [1, 3, 5].map((at) => parseInt(hex.slice(at, at + 2), 16));
+    const a = channels(isHex(from) ? from : FALLBACK);
+    const b = channels(isHex(to) ? to : FALLBACK);
+    const w = Math.max(0, Math.min(1, weight));
+    return `#${a.map((value, i) => Math.round(value + (b[i] - value) * w).toString(16).padStart(2, "0")).join("")}`;
+  }
+  function parsePaint(text) {
+    const raw = String(text ?? "").trim();
+    if (raw === "" || isHex(raw)) return solidOf(raw);
+    const [body, animPart] = raw.split("~");
+    const parts = body.split("|").map((part) => part.trim()).filter((part) => part !== "");
+    const [typeWord, angleWord] = (parts[0] ?? "").split(/\s+/);
+    const stops = parts.slice(1).map((part) => {
+      const [c, p] = part.split(/\s+/);
+      return { c: String(c ?? "").toLowerCase(), p: Number(p) };
+    }).filter((stop) => isHex(stop.c) && Number.isFinite(stop.p));
+    if (stops.length < 2) return solidOf(stops[0]?.c ?? FALLBACK);
+    const type = TYPES.find((each) => each === typeWord) ?? "linear";
+    let anim = "none";
+    let speed = 1;
+    if (animPart) {
+      const [animWord, secondsWord] = animPart.trim().split(/\s+/);
+      anim = ANIMS.find((each) => each === animWord) ?? "none";
+      const at = SPEEDS.indexOf(Number(secondsWord));
+      speed = at < 0 ? 1 : at;
+    }
+    return { type, angle: Number(angleWord) || 0, stops, anim, speed };
+  }
+  const byPosition = (stops) => [...stops].sort((a, b) => a.p - b.p);
+  function printPaint(paint) {
+    if (paint.type === "solid") return paint.stops[0].c;
+    const stops = byPosition(paint.stops).map((stop) => `${stop.c} ${Math.round(stop.p)}`).join(" | ");
+    const anim = paint.anim !== "none" ? ` ~${paint.anim} ${SPEEDS[paint.speed] ?? SPEEDS[1]}` : "";
+    return `${paint.type} ${Math.round(paint.angle)} | ${stops}${anim}`;
+  }
+  function paintMain(text) {
+    const paint = parsePaint(text);
+    let best = paint.stops[0].c;
+    let score = -1;
+    for (const stop of paint.stops) {
+      const hsl = hexToHsl(stop.c);
+      const vivid = hsl.s * (1 - Math.abs(hsl.l - 50) / 50);
+      if (vivid > score) {
+        score = vivid;
+        best = stop.c;
+      }
+    }
+    return best;
+  }
+  function paintBase(text) {
+    return parsePaint(text).stops[0].c;
+  }
+  function paintCss(value) {
+    const paint = typeof value === "object" && value !== null ? value : parsePaint(String(value ?? ""));
+    if (paint.type === "solid") return { background: paint.stops[0].c, backgroundSize: "", animation: "" };
+    const list = byPosition(paint.stops).map((stop) => `${stop.c} ${stop.p}%`).join(", ");
+    const angle = paint.anim === "spin" ? `calc(var(--pk-angle) + ${paint.angle}deg)` : `${paint.angle}deg`;
+    const background = paint.type === "radial" ? `radial-gradient(120% 90% at 50% 25%, ${list})` : paint.type === "conic" ? `conic-gradient(from ${angle} at 50% 40%, ${list})` : `linear-gradient(${angle}, ${list})`;
+    const seconds = SPEEDS[paint.speed] ?? SPEEDS[1];
+    const animation = {
+      none: "",
+      flow: `pk-flow ${seconds}s ease-in-out infinite`,
+      breathe: `pk-breathe ${seconds / 2}s ease-in-out infinite`,
+      spin: `pk-spin ${seconds}s linear infinite`,
+      hue: `pk-hue ${seconds * 1.5}s linear infinite`
+    }[paint.anim] ?? "";
+    return { background, backgroundSize: paint.anim === "flow" ? "220% 220%" : "", animation };
+  }
+  function barCss(paint) {
+    return `linear-gradient(90deg, ${byPosition(paint.stops).map((stop) => `${stop.c} ${stop.p}%`).join(", ")})`;
+  }
+  function paintBg(text) {
+    return paintCss(text).background;
+  }
+  function paintSize(text) {
+    return paintCss(text).backgroundSize || "auto";
+  }
+  function paintAnim(text) {
+    return paintCss(text).animation || "none";
+  }
+  const PRESETS = {
+    sunset: "linear 160 | #ff8a5b 0 | #f5583f 60 | #c0392b 100",
+    grape: "linear 160 | #b06de8 0 | #7b5cf0 60 | #4b3bd6 100",
+    ocean: "linear 160 | #4fd1c5 0 | #3182ce 70 | #2c5282 100",
+    mint: "linear 160 | #a7f3d0 0 | #34d399 70 | #059669 100",
+    peach: "linear 160 | #ffd9a0 0 | #ff9a8b 60 | #e0567f 100",
+    night: "linear 160 | #3b3a52 0 | #1f1d2e 70 | #0f0e17 100",
+    aurora: "linear 165 | #6B46F2 0 | #ff5ca8 60 | #ff9a5b 92 | #ffd0a8 100",
+    dusk: "linear 170 | #241a5e 0 | #a84bc0 60 | #e06a8a 82 | #ff9a6b 100",
+    reef: "linear 168 | #00d0b0 0 | #1ba0e0 38 | #2b6cff 70 | #6B46F2 100",
+    blush: "linear 150 | #ffe0b0 0 | #ff9ec4 42 | #c86bff 100",
+    citrus: "linear 135 | #ffe14d 0 | #ff8a3d 42 | #ff5a8a 100",
+    berry: "linear 140 | #ff4d9d 0 | #a44bff 48 | #4b6bff 100",
+    lime: "linear 140 | #bff24a 0 | #34d399 48 | #00b8c2 100"
+  };
+  function legacyPaint(grad, mode, dir, colour) {
+    if (mode !== "custom" && PRESETS[grad]) return `${PRESETS[grad]} ~flow ${SPEEDS[1]}`;
+    const base = isHex(colour) ? colour.toLowerCase() : FALLBACK;
+    const light = mixHex(base, "#ffffff", 0.38);
+    const dark = mixHex(base, "#000000", 0.22);
+    if (dir === "radial") return `radial 0 | ${light} 0 | ${base} 62 | ${dark} 100`;
+    return `linear ${dir === "up" ? 0 : 180} | ${light} 0 | ${base} 55 | ${dark} 100`;
+  }
+  return __toCommonJS(paint_exports);
+})();
+
+export default PAINT;