@muten/shadcn 0.1.14 → 0.2.0

package/registry/kit/dates.js

@@ -6,29 +6,31 @@ 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 { $, ui, today, makeWheel, openModal, closeModal, CONTENT, body, foot } = core;
+  // its language: the nearest lang (the page's), English by default; months and days from the kit's date words
+  const L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a), W = core.kit.words(L), DAYLONG = W.dayL, MON = W.mon;
   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 longDate = (d) => (L === 'es' ? `${DAYLONG[d.getDay()]} ${d.getDate()} de ${MON[d.getMonth()]} de ${d.getFullYear()}` : `${DAYLONG[d.getDay()]}, ${MON[d.getMonth()]} ${d.getDate()}, ${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>`;
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><span class="cn-label" id="${id}-l">${T(i.label || 'Date')}</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.';
+    document.getElementById('mdl-title').textContent = i.title || T('Pick the date'); document.getElementById('mdl-desc').textContent = T('Drag each wheel, tap a value or use the arrows.');
     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' });
+    foot.innerHTML = ui.button({ label: T('Cancel'), size: 'default', attrs: 'data-dismiss', cls: 'cx-exit' }) + ui.button({ label: T('Done'), 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 sum = () => { const d = new Date(draft.y, draft.m, draft.d), past = min && d < min; sumEl.textContent = past ? T('That date has passed') : 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 wD = makeWheel($('[data-w=d]', body), days(), draft.d - 1, (k) => { draft.d = k + 1; sum(); }, T('Day'));
     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');
+    const wM = makeWheel($('[data-w=m]', body), MONTHS, draft.m, (k) => { draft.m = k; fixDays(); }, T('Month'));
+    const wY = makeWheel($('[data-w=y]', body), YEARS, Math.max(0, YEARS.indexOf(draft.y)), (k) => { draft.y = YEARS[k]; fixDays(); }, T('Year'));
     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 }); })); });
@@ -38,22 +40,22 @@ export function dateField(root, i, core, on) {
 
 // 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 { $, ui, makeWheel, openModal, closeModal, CONTENT, body, foot } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   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 hm = (t) => `${pad(t.h)}:${pad(t.m)}`, part = (t) => (t.h < 12 ? T('morning') : T('afternoon'));
   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>`;
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><span class="cn-label" id="${id}-l">${T(i.label || 'Time')}</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.`;
+    document.getElementById('mdl-title').textContent = i.title || T('Pick the time'); document.getElementById('mdl-desc').textContent = i.description || T('Hours: {0} to {1}. Drag or tap.', `${pad(from)}:00`, `${pad(to)}:${pad(MINS.at(-1))}`);
     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' });
+    foot.innerHTML = ui.button({ label: T('Cancel'), size: 'default', attrs: 'data-dismiss', cls: 'cx-exit' }) + ui.button({ label: T('Done'), 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')];
+    wheels = [makeWheel($('[data-w=h]', body), HOURS.map(pad), HOURS.indexOf(draft.h), (k) => { draft.h = HOURS[k]; sum(); }, T('Hour')), makeWheel($('[data-w=mi]', body), MINS.map(pad), MINS.indexOf(draft.m), (k) => { draft.m = MINS[k]; sum(); }, T('Minutes'))];
     sum();
   };
   $('button', root).addEventListener('click', () => { openModal(kind, 'auto'); requestAnimationFrame(() => requestAnimationFrame(() => { wheels.forEach((w) => w.place()); $('.cx-wheel', body)?.focus({ preventScroll: true }); })); });
@@ -64,28 +66,28 @@ export function timeField(root, i, core, on) {
 // 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 { $ } = core, L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a);
+  const MAX = (Number(i.maxMb) || 10) * 1024 * 1024, SIZE = Number(i.size) || 1200, idle = i.hint || T('JPG, PNG or WebP · up to {0} MB', Number(i.maxMb) || 10);
+  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>${T(i.title || 'Upload the photo')}</b><span>${T('Tap, drag or paste here')}</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>${T('Use a sample')}</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>${T('Remove')}</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 progress = (p) => { dropProg.style.width = p + '%'; say(T('Uploading… {0} %', 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'); }
+    if (!file.type.startsWith('image/')) return say(T('“{0}” is not an image. Use JPG, PNG or WebP.', file.name), 'bad');
+    if (file.size > MAX) return say(T('It weighs {0} MB; the limit is {1} MB.', (file.size / 1048576).toFixed(1).replace('.', L === 'es' ? ',' : '.'), Number(i.maxMb) || 10), 'bad');
+    say(T('Preparing the image…'));
+    let bmp; try { bmp = await createImageBitmap(file); } catch { return say(T('We could not read that image. Try another.'), '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 })); };
+    const done = (extra) => { dropBar.hidden = true; say(T('Ready · {0} × {1} px, {2} KB', out.width, out.height, Math.max(1, Math.round(blob.size / 1024))), '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);
+      xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { progress(100); setTimeout(() => done({ url: xhr.responseText }), 250); } else say(T('It could not be uploaded. Try again.'), 'bad'); };
+      xhr.onerror = () => say(T('It could not be uploaded. Check your connection.'), '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(); });
@@ -101,6 +103,6 @@ export function imageUpload(root, i, core, on) {
     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');
+    c.toBlob((b) => takeFile(new File([b], 'sample.png', { type: 'image/png' })), 'image/png');
   });
 }

package/registry/kit/i18n.js

@@ -0,0 +1,172 @@
+// kit/i18n.js - the library's words. The code is written in ENGLISH and the English text is the key; each other
+// language is a dictionary from that text to its own. A piece speaks the language of the nearest `lang` (a container's
+// attribute, else the page's <html lang>), English when there is none or the language has no dictionary.
+//   t(lang, 'Page {0} of {1}', 2, 9)   → «Página 2 de 9» in Spanish
+//   'One item | {0} items'             → the first form when the first argument is 1
+// An app with its own i18n (Storio) changes nothing: it already sets <html lang>, and a container (the public store,
+// in the shop's language) can carry its own `lang`. A Custom also takes `lang` through its inputs.
+
+export const LANGS = { es: {} };
+const ES = LANGS.es;
+
+/** Add words to a language (a part's own module can extend the dictionary the same way). */
+export const words = (lang, table) => { LANGS[lang] = Object.assign(LANGS[lang] || {}, table); };
+
+/** The language a node speaks: its nearest `lang`, else the page's; 'en' when unknown. */
+export const langOf = (node) => {
+  const from = (node && node.closest && node.closest('[lang]')) || document.documentElement;
+  const code = String(from.getAttribute('lang') || 'en').toLowerCase().slice(0, 2);
+  return LANGS[code] ? code : 'en';
+};
+
+/** The text in that language (the English key when it has no entry), with {0}, {1}… filled and «one | many» chosen. */
+export const t = (lang, key, ...args) => {
+  let text = (lang !== 'en' && LANGS[lang] && LANGS[lang][key]) || key;
+  if (text.includes(' | ')) { const [one, many] = text.split(' | '); text = Number(args[0]) === 1 ? one : many; }
+  return args.length ? text.replace(/\{(\d+)\}/g, (m, k) => (args[+k] ?? m)) : text;
+};
+
+/* What a part or a Custom MARKS is said in the language of its nearest `lang`. The marks are keyed by the English text:
+   data-tr the element's text · data-trl its aria-label · data-trn its tooltip (data-name) · data-trp its placeholder ·
+   data-trt its title · data-tra the values for {0}… split by «|». Only a text the piece wrote itself is replaced (it
+   still reads as the English key, or as what was said last): a value the app passed is left alone. kit/core.js runs it
+   on the whole page and again on every change; a Custom that renders on its own calls it on its root. */
+const MARKS = [['tr', null], ['trl', 'aria-label'], ['trn', 'data-name'], ['trp', 'placeholder'], ['trt', 'title']];
+const MARKED = '[data-tr],[data-trl],[data-trn],[data-trp],[data-trt]';
+export const localize = (el) => {
+  const lang = langOf(el), args = el.dataset.tra ? el.dataset.tra.split('|') : [];
+  const said = el.__said || (el.__said = {});
+  for (const [key, attr] of MARKS) {
+    const k = el.dataset[key]; if (!k) continue;
+    const now = attr ? el.getAttribute(attr) : el.textContent;
+    if (now !== t('en', k, ...args) && now !== said[key] && now !== null && now !== '') continue;   // the app's own text
+    const next = t(lang, k, ...args); said[key] = next;
+    if (now === next) continue;
+    if (attr) el.setAttribute(attr, next); else el.textContent = next;
+  }
+};
+export const localizeTree = (root) => { if (!root || root.nodeType !== 1) return; if (root.matches(MARKED)) localize(root); root.querySelectorAll(MARKED).forEach(localize); };
+
+// ── Spanish ──
+// Kept in one table so a translator reads it top to bottom; grouped by the piece that says it.
+Object.assign(ES, {
+  // shared
+  'Close': 'Cerrar', 'Cancel': 'Cancelar', 'Save': 'Guardar', 'Save changes': 'Guardar cambios', 'Saving…': 'Guardando…', 'Saved': 'Guardado',
+  'Search': 'Buscar', 'Search…': 'Buscar…', 'Clear search': 'Limpiar búsqueda', 'Copy': 'Copiar', 'Copied': 'Copiado', 'Select it and copy': 'Selecciónalo y copia', 'Select it': 'Selecciónalo',
+  'Loading': 'Cargando', 'Previous': 'Anterior', 'Next': 'Siguiente', 'More': 'Más', 'Back': 'Volver', 'Done': 'Listo', 'Send': 'Enviar', 'Stop': 'Detener',
+  'Today': 'Hoy', 'Tomorrow': 'Mañana', 'Yesterday': 'Ayer', 'Menu': 'Menú', 'Show or hide the menu': 'Mostrar u ocultar el menú',
+});
+
+// parts (.muten): their default words and fixed labels
+Object.assign(ES, {
+  'Search or jump to…': 'Busca o salta a…', 'Nothing matches.': 'Nada coincide.', 'Breadcrumb': 'Migas', 'More pages': 'Más páginas', 'Book': 'Reservar',
+  'Menu for this area': 'Menú de esta zona', 'Messages': 'Mensajes', 'Less': 'Menos', 'Contents': 'Contenido', 'Pages': 'Páginas', 'Photo': 'Foto',
+  'Progress': 'Progreso', 'results': 'resultados', 'Date': 'Fecha', 'Time': 'Hora', 'person': 'persona', 'people': 'personas', 'Invite': 'Invitar',
+  'Recommended': 'Recomendado', 'row': 'fila', 'rows': 'filas', 'Upload a file': 'Sube un archivo', 'Tap, drag or paste here': 'Toca, arrastra o pega aquí',
+  'New appointment': 'Nueva cita', 'Files': 'Archivos', 'Order': 'Orden', 'Continue': 'Continuar', 'Password': 'Contraseña', 'Colors': 'Colores',
+  'Tools': 'Herramientas', 'More options': 'Más opciones', 'Connect a folder': 'Conectar carpeta', 'Price': 'Precio', 'Upload the photo': 'Sube la foto',
+  'Properties': 'Propiedades', 'Main': 'Principal', 'Permission': 'Permiso', 'Conversation': 'Conversación', 'Phone': 'Teléfono', 'Sections': 'Secciones',
+  'Actions': 'Acciones', 'Share': 'Compartir', 'Footer': 'Pie de página', 'Tags': 'Etiquetas', 'List': 'Lista', 'Status': 'Estado',
+  'Sending': 'Enviando', 'Sent': 'Enviado', 'Delivered': 'Entregado', 'Read': 'Leído', 'Online': 'En línea', 'Resize': 'Cambiar el tamaño',
+  'Move {0}': 'Mover {0}', 'Back to 100 %': 'Volver a 100 %', 'Zoom {0} %, back to 100': 'Zoom {0} %, volver a 100',
+  "%owner's card": 'Cartilla de %owner', '%n of %total · %left more for %reward': '%n de %total · faltan %left para %reward', 'Complete! Earned %reward.': '¡Completa! Ganó %reward.',
+  '%n of %total stamps': '%n de %total sellos', 'Redeem reward': 'Canjear premio', 'Stamp a visit': 'Sellar visita',
+});
+
+// dates (calendar, date pickers)
+Object.assign(ES, {
+  'You picked {0}, {1}': 'Elegiste el {0} {1}', 'From {0} to {1} · {2} days': 'Del {0} al {1} · {2} días', 'From {0}: pick the last day': 'Desde el {0}: elige el último día',
+  'Last 7 days': 'Últimos 7 días', 'This month': 'Este mes', 'Last month': 'Mes pasado',
+});
+
+// small Customs (code, file input, sortable, number field, kit widgets)
+Object.assign(ES, {
+  'Remove {0}': 'Quitar {0}', '{0} is not a type of file that can be uploaded here.': '{0} no es de un tipo que se pueda subir aquí.', '{0} is over {1} MB.': '{0} pesa más de {1} MB.',
+  'Drag to reorder': 'Arrastra para ordenar', '{0}: position {1} of {2}': '{0}: posición {1} de {2}', 'Number': 'Número', 'Assistant': 'Asistente',
+});
+
+// values: money, phone, verification code, sliders
+Object.assign(ES, {
+  'maximum': 'máximo', 'minimum': 'mínimo', 'Currency': 'Moneda', 'Country': 'País', '{0} (it has no minor unit)': '{0} (no tiene unidad menor)', 'cents of {0}': 'centavos de {0}',
+  'Saved as: {0} {1}': 'Se guarda: {0} {1}', 'Type a price': 'Escribe un precio', 'Search currency': 'Buscar moneda', 'Search country': 'Buscar país',
+  'Saved as +{0}': 'Se guarda como +{0}', '{0} digits short for a number from {1}': 'Faltan {0} dígitos para un número de {1}', '{0} digits, without the {1}': '{0} dígitos, sin el {1}',
+  '{0}-digit code': 'Código de {0} dígitos', 'Checking…': 'Verificando…', 'Resend in 0:{0}': 'Reenviar en 0:{0}', 'Resend code': 'Reenviar código',
+  'We sent you a new code': 'Te enviamos un código nuevo', 'Done, it is verified': 'Listo, quedó verificado', 'That is not the code': 'Ese código no es',
+});
+
+// menus and collections: combobox, row menu, store QR, tags, pagination, virtual list, carousel
+Object.assign(ES, {
+  'Use “{0}”': 'Usar «{0}»', 'Type to search': 'Escribe para buscar', 'QR code of {0}': 'Código QR de {0}', 'Copy link': 'Copiar enlace',
+  'You reached the limit of {0}': 'Llegaste al tope de {0}', 'Add and press Enter': 'Agrega y presiona Enter',
+  'Previous page': 'Página anterior', 'Next page': 'Página siguiente', 'Page {0}': 'Página {0}', 'Page {0} of {1}': 'Página {0} de {1}', '{0}–{1} of {2} {3}': '{0}–{1} de {2} {3}',
+  'Go to {0}': 'Ir al {0}', '{0}–{1} of {2} · {3} rows in the DOM': '{0}–{1} de {2} · {3} filas en el DOM',
+  'Pause': 'Pausar', 'Play': 'Reproducir', 'Slides': 'Diapositivas', 'Go to {0} of {1}': 'Ir a {0} de {1}', 'Thumbnails': 'Miniaturas', 'Photo {0}': 'Foto {0}',
+});
+
+// table
+Object.assign(ES, {
+  'Next 7 days': 'Próximos 7 días', 'Later': 'Más adelante', 'Clear selection': 'Quitar selección', 'Filters': 'Filtros', 'Select all': 'Seleccionar todas', 'Clear': 'Limpiar',
+  'No limit': 'Sin tope', 'From': 'Desde', 'To': 'Hasta', 'Remove filter': 'Quitar filtro', 'Search in {0}': 'Buscar en {0}', 'Any date': 'Cualquier fecha', 'See {0} {1}': 'Ver {0} {1}',
+  'They apply as you pick.': 'Se aplican mientras eliges.', 'Remove': 'Quitar', 'Select {0}': 'Seleccionar {0}', 'Clear filters': 'Limpiar filtros',
+  'Nothing matches the filters': 'Nada coincide con los filtros', 'Remove one or clear them all.': 'Quita alguno o límpialos todos.',
+});
+
+// date and time fields, image upload
+Object.assign(ES, {
+  'Pick the date': 'Elige la fecha', 'Drag each wheel, tap a value or use the arrows.': 'Arrastra cada rueda, toca un valor o usa las flechas.', 'That date has passed': 'Esa fecha ya pasó',
+  'Day': 'Día', 'Month': 'Mes', 'Year': 'Año', 'morning': 'mañana', 'afternoon': 'tarde', 'Pick the time': 'Elige la hora', 'Hours: {0} to {1}. Drag or tap.': 'Horario: {0} a {1}. Arrastra o toca.',
+  'Hour': 'Hora', 'Minutes': 'Minutos', 'JPG, PNG or WebP · up to {0} MB': 'JPG, PNG o WebP · hasta {0} MB', 'Use a sample': 'Usar una de ejemplo', 'Uploading… {0} %': 'Subiendo… {0} %',
+  '“{0}” is not an image. Use JPG, PNG or WebP.': '«{0}» no es una imagen. Usa JPG, PNG o WebP.', 'It weighs {0} MB; the limit is {1} MB.': 'Pesa {0} MB; el tope es {1} MB.',
+  'Preparing the image…': 'Preparando la imagen…', 'We could not read that image. Try another.': 'No pudimos leer esa imagen. Prueba con otra.', 'Ready · {0} × {1} px, {2} KB': 'Lista · {0} × {1} px, {2} KB',
+  'It could not be uploaded. Try again.': 'No se pudo subir. Inténtalo otra vez.', 'It could not be uploaded. Check your connection.': 'No se pudo subir. Revisa tu conexión.',
+});
+
+// structure: phone shell, share, app shell, booking, new-appointment wizard
+Object.assign(ES, {
+  'Link copied. Paste it in your bio or in an Instagram story.': 'Enlace copiado. Pégalo en tu bio o en una historia de Instagram.', 'Link copied. Paste it in your TikTok bio.': 'Enlace copiado. Pégalo en tu bio de TikTok.',
+  '{0} at {1}': '{0} en {1}', 'Book at {0}': 'Reserva en {0}', 'Share product': 'Compartir producto', 'Share link': 'Compartir enlace', 'Select the link and copy it.': 'Selecciona el enlace y cópialo.',
+  'Share on': 'Compartir en', 'QR code': 'Código QR', 'Share in another app': 'Compartir en otra app', 'Link copied.': 'Enlace copiado.',
+  'Nothing here yet.': 'Todavía no hay nada aquí.', 'Detail': 'Detalle', 'History': 'Historial', 'Nothing with “{0}”': 'Nada con «{0}»', 'move': 'moverte', 'open': 'abrir', 'close': 'cerrar',
+  'Previous week': 'Semana anterior', 'Next week': 'Semana siguiente', 'Pick a day and a time': 'Elige un día y una hora', 'pick a time': 'elige una hora', 'today': 'hoy', 'closed': 'cerrado',
+  '{0} times': '{0} horarios', 'no times': 'sin horarios', 'No times left this day.': 'No quedan horarios este día.', 'See {0} {1}': 'Ver {0} {1}', 'Morning': 'Mañana', 'Afternoon': 'Tarde',
+  'Client': 'Cliente', 'Service': 'Servicio', 'Day and time': 'Día y hora', 'Confirm': 'Confirmar', 'Nobody with “{0}”': 'Nadie con «{0}»', 'Search or pick': 'Busca o elige', 'Name or phone': 'Nombre o teléfono',
+  'Create appointment': 'Crear cita',
+});
+
+// order board
+Object.assign(ES, {
+  'Review receipt': 'Revisar comprobante', 'See Stripe receipt': 'Ver recibo de Stripe', 'See delivery': 'Ver entrega', 'See map': 'Ver mapa', 'Client note': 'Nota del cliente',
+  "{0}'s note: {1}": 'Nota de {0}: {1}', "{0}'s note": 'Nota de {0}', 'Pending': 'Pendientes', 'Contact {0} on {1}, as they asked': 'Contactar a {0} por {1}, como lo pidió', 'Prefers {0}': 'Prefiere {0}',
+  'a call': 'una llamada', 'Drop an order here': 'Suelta aquí un pedido', 'No message from the client.': 'Sin mensaje del cliente.', 'Also to solve': 'También por resolver',
+  'Copy note': 'Copiar nota', 'Payment receipt': 'Recibo de pago', '{0} · order {1}': '{0} · pedido {1}', 'Paid': 'Pagado', 'Method': 'Medio', 'Processed by': 'Procesado por',
+  'Oct 8, 2026': '8 oct 2026', 'Payment ID': 'ID del pago', 'Fee': 'Comisión', 'You get': 'Recibes', 'Open in Stripe': 'Abrir en Stripe', 'Arrives in': 'Llega en', 'Open in Maps': 'Abrir en Maps',
+  'Canceled': 'Cancelado', 'Refunded {0}': 'Devuelto {0}', 'Prepare': 'Preparar', 'Payment proof': 'Comprobante de pago', 'Screenshot of the transfer': 'Captura de la transferencia',
+  'Transfer successful': 'Transferencia exitosa', 'Reference': 'Referencia', 'Order amount': 'Monto del pedido', 'Matches': 'Coincide', 'Reject': 'Rechazar', 'Approve payment': 'Aprobar pago',
+  'Complaint': 'Queja', 'Your answer': 'Tu respuesta', 'It reaches them on WhatsApp.': 'Le llega por WhatsApp.', 'Send answer': 'Enviar respuesta', 'Rejected': 'Rechazado',
+  'Complaint answered': 'Queja respondida', 'now': 'ahora', 'Refund': 'Reembolsar', 'Answer {0}': 'Responder a {0}', 'Complaint about order {0}': 'Queja del pedido {0}',
+});
+
+// kit core: stepper, messaging, chat, chart, dirty bar, plans, card, team, stamp card, bell, waitlist, password
+Object.assign(ES, {
+  'Step {0} of {1}: {2}': 'Paso {0} de {1}: {2}', 'Suggestions': 'Sugerencias', 'Play {0} s of audio': 'Reproducir audio de {0} s', 'Audio': 'Audio', 'Typing': 'Escribiendo', 'Options': 'Opciones',
+  'Write a message': 'Escribe un mensaje', 'Write a message…': 'Escribe un mensaje…', 'Templates': 'Plantillas', 'Emoji': 'Emoji', 'Enter sends · Shift+Enter adds a line break': 'Enter envía · Shift+Enter hace un salto de línea',
+  'Nothing archived': 'Nada archivado', 'Nothing here': 'Nada por aquí', 'Try another name.': 'Prueba con otro nombre.', 'What you archive stays here.': 'Lo que archives queda aquí.',
+  'When they write to you, it shows up here.': 'Cuando te escriban, aparece aquí.', '{0} goes to {1} on {2}.': 'Se le envía {0} a {1} por {2}.', 'Quick actions': 'Acciones rápidas',
+  'Pick a conversation': 'Elige una conversación', 'Back to the inbox': 'Volver a la bandeja', 'See client': 'Ver cliente', 'Unarchive': 'Sacar del archivo', 'Archive': 'Archivar', 'Delete': 'Eliminar',
+  'Now': 'Ahora', 'Delete the conversation?': '¿Eliminar la conversación?', 'The chat with {0} is deleted from your inbox. Their appointments and orders stay the same.': 'Se borra el chat con {0} de tu bandeja. Sus citas y pedidos siguen igual.',
+  'Connect a channel': 'Conectar un canal', 'Connect': 'Conectar', 'Picked: {0}': 'Elegida: {0}', 'none': 'ninguna', ' (typed by you)': ' (escrita por ti)', 'Hi {0}, I am so sorry. We are sending you a new one today at no cost.': 'Hola {0}, lo siento mucho. Te enviamos una nueva hoy sin costo.', 'The messages of every channel arrive in this same inbox.': 'Los mensajes de cada canal llegan a esta misma bandeja.', 'Conversation archived': 'Conversación archivada',
+  'Back in the inbox': 'De vuelta en la bandeja', 'You': 'Tú', 'Search conversation': 'Buscar conversación', 'Filter': 'Filtrar', 'Conversation solved': 'Conversación resuelta', 'Conversation deleted': 'Conversación eliminada',
+  'Connected': 'Conectado', 'Assistant · answers at once': 'Asistente · responde al instante', 'Thinking': 'Pensando', 'Stopped': 'Detenido', 'Copy answer': 'Copiar respuesta', 'It helped': 'Me sirvió', 'It did not help': 'No me sirvió',
+  'Period': 'Periodo', 'Remove range': 'Quitar tramo', 'Add range': 'Agregar tramo', 'Copy to all': 'Copiar a todos', 'Unsaved changes': 'Cambios sin guardar', 'You have unsaved changes': 'Tienes cambios sin guardar', 'Discard': 'Descartar',
+  'Billing': 'Facturación', 'Monthly': 'Mensual', 'Yearly': 'Anual', 'Your plan': 'Tu plan', '/ month': '/ mes', '/ year': '/ año', 'Your current plan': 'Tu plan actual', 'Move up to {0}': 'Pasar a {0}', 'Move down to {0}': 'Bajar a {0}',
+  'Card number': 'Número de la tarjeta', 'Expires': 'Vence', 'Code': 'Código', 'Secure payment with Stripe. We do not keep the number.': 'Pago seguro con Stripe. No guardamos el número.', 'Save card': 'Guardar tarjeta',
+  'Check the card number.': 'Revisa el número de la tarjeta.', 'The expiry date is not valid.': 'La fecha de vencimiento no es válida.', 'The 3 or 4 digit code is missing.': 'Falta el código de 3 o 4 dígitos.',
+  '{0} card ending in {1} saved.': 'Tarjeta {0} terminada en {1} guardada.', 'Invitation sent': 'Invitación enviada', 'Role of {0}': 'Rol de {0}', 'Email': 'Correo', 'name@email.com': 'nombre@correo.com', 'Role': 'Rol',
+  'Send invitation': 'Enviar invitación', 'Notices': 'Avisos', 'The system bell: tap to see the notices.': 'La campana del sistema: toca para ver los avisos.', 'Notices, {0} unread': 'Avisos, {0} sin leer',
+  'Mark all as read': 'Marcar todo como leído', 'Unread': 'Sin leer', 'All caught up': 'Todo al día', '{0} waiting': '{0} esperando', 'Offered {0} · {1}': 'Ofrecido {0} · {1}', '{0} · waiting since {1}': '{0} · espera desde {1}',
+  'Offer a time': 'Ofrecer horario', 'today 16:30': 'hoy 16:30', '8 characters or more': '8 caracteres o más', 'A number': 'Un número', 'A capital letter': 'Una mayúscula', 'A symbol': 'Un símbolo',
+  'Very weak': 'Muy débil', 'Weak': 'Débil', 'Fair': 'Regular', 'Good': 'Buena', 'Strong': 'Fuerte', 'Strength': 'Fuerza', 'Type a password': 'Escribe una contraseña', 'Show password': 'Mostrar contraseña', 'Hide password': 'Ocultar contraseña', 'Show': 'Mostrar',
+});
+
+// folder picker, field behavior
+Object.assign(ES, { 'This browser cannot pick folders: use Chrome or Edge.': 'Este navegador no deja elegir carpetas: usa Chrome o Edge.', 'Check the email.': 'Revisa el correo.' });

package/registry/kit/menus.js

@@ -1,12 +1,12 @@
 // @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.
+// “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 { $, $$, lib, place, show, hide, fold } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   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>`;
+  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>${T('Picked: {0}', i.value || T('none'))}</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 || '';
@@ -16,16 +16,17 @@ export function combobox(root, i, core, on) {
     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 });
+    if (allowNew && typed && !OPTIONS.some((c) => fold(c) === fold(typed))) cOpts.push({ value: typed, html: `<span>${T('Use “{0}”', `<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>';
+    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)">${T('Type to search')}</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); };
+  const cPick = (k) => { const o = cOpts[k]; if (!o) return; cValue = o.value; cIn.value = o.value; if (cOut) cOut.textContent = T('Picked: {0}', o.value) + (o.isNew ? T(' (typed by you)') : ''); cClose(); on?.change?.(o.value); };
   cIn.addEventListener('focus', cOpen);
+  cIn.addEventListener('click', cOpen);   // already focused after a pick: a tap opens it again
   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(); }
@@ -43,9 +44,9 @@ export function combobox(root, i, core, on) {
 
 // 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 { $, lib, place, show, hide, fold, ui } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   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"` });
+  root.innerHTML = ui.button({ icon: 'more', variant: 'ghost', size: 'icon-sm', attrs: `data-menu aria-haspopup="menu" aria-expanded="false" aria-label="${T(i.label || 'More options')}" title="${T(i.label || 'More options')}"` });
   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('');
@@ -69,11 +70,11 @@ export function rowMenu(root, i, core, on) {
   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».
+// Store QR: the code with the shop's mark in the middle, the name, the link and “Copy link”.
 export function storeQr(root, i, core) {
-  const { $ } = core;
+  const { $ } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   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>`;
+  root.innerHTML = `<div class="cx-qr-card"><div class="cx-qr" role="img" aria-label="${T('QR code of {0}', 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>${T('Copy link')}</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();
@@ -83,7 +84,7 @@ export function storeQr(root, i, core) {
   });
   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 done = (ok) => { copyBtn.toggleAttribute('data-done', ok); copyLabel.innerHTML = '<span class="cx-swap-in">' + (ok ? `<svg><use href="#check"/></svg>${T('Copied')}` : T('Select it and copy')) + '</span>'; setTimeout(() => { copyBtn.removeAttribute('data-done'); copyLabel.innerHTML = '<span class="cx-swap-in">' + copyIdle + '</span>'; }, 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

@@ -39,7 +39,11 @@ export function overlay(host, kind, core) {
   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); }
+    // moving from one menu of a bar to the next: the panel swaps in place (no close + open, which crossed two
+    // animations); the old one goes at once and the new one only fades its content in (kit.css [data-swap])
+    let swap = false;
+    if (bar) { const other = openBars.get(bar); if (other && other !== api) { swap = true; other.close(false, true); } openBars.set(bar, api); }
+    panel.toggleAttribute('data-swap', swap);
     try { panel.showPopover(); } catch { /* already in the top layer */ }
     panel.removeAttribute('data-closed'); panel.setAttribute('data-open', ''); panel.dataset.state = 'open';
     position();
@@ -48,8 +52,9 @@ export function overlay(host, kind, core) {
     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) => {
+  const close = (refocus, swapped = false) => {
     if (!open) return; open = false; at = null;
+    panel.toggleAttribute('data-swap', swapped);
     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');