@muten/shadcn 0.1.15 → 0.2.0

package/registry/kit/values.js

@@ -2,19 +2,23 @@
 // 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' },
+  { id: 'COP', label: 'Colombian peso', locale: 'es-CO', minor: 2, shown: 0 }, { id: 'USD', label: 'US dollar', locale: 'en-US' },
+  { id: 'MXN', label: 'Mexican peso', locale: 'es-MX' }, { id: 'ARS', label: 'Argentine peso', locale: 'es-AR' }, { id: 'VES', label: 'Bolívar', locale: 'es-VE' },
+  { id: 'CLP', label: 'Chilean peso', locale: 'es-CL' }, { id: 'PEN', label: 'Peruvian sol', locale: 'es-PE' }, { id: 'BRL', label: 'Brazilian real', locale: 'pt-BR' },
+  { id: 'EUR', label: 'Euro', locale: 'es-ES' }, { id: 'CAD', label: 'Canadian dollar', locale: 'en-CA' }, { id: 'AUD', label: 'Australian dollar', 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: '(###) ###-####' },
+  { id: 'MX', label: 'Mexico', dial: '+52', e164: '52', len: 10, mask: '## #### ####' }, { id: 'US', label: 'United States', dial: '+1', e164: '1', len: 10, mask: '(###) ###-####' },
+  { id: 'VE', label: 'Venezuela', dial: '+58', e164: '58', len: 10, mask: '### ### ####' }, { id: 'BR', label: 'Brazil', dial: '+55', e164: '55', len: 11, mask: '(##) #####-####' },
+  { id: 'CL', label: 'Chile', dial: '+56', e164: '56', len: 9, mask: '# #### ####' }, { id: 'PE', label: 'Peru', dial: '+51', e164: '51', len: 9, mask: '### ### ###' },
+  { id: 'ES', label: 'Spain', dial: '+34', e164: '34', len: 9, mask: '### ## ## ##' }, { id: 'CA', label: 'Canada', dial: '+1', e164: '1', len: 10, mask: '(###) ###-####' },
 ];
 
+// a currency's or a country's name in a language (Intl knows them all); the table's English label when it cannot
+const nameIn = (lang, type, id, fallback) => { try { return new Intl.DisplayNames([lang], { type }).of(id) || fallback; } catch { return fallback; } };
+const cap = (x) => x.charAt(0).toUpperCase() + x.slice(1);
+
 export function codePicker(core, { trigger, anchor, items, current, onPick, placeholder }) {
   const { $, $$, lib, place, show, hide, fold } = core;
   const pop = document.createElement('div');
@@ -52,13 +56,13 @@ export function codePicker(core, { trigger, anchor, items, current, onPick, plac
 // 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 { $, $$, money0, t, langOf } = core, T = (k, ...a) => t(langOf(root), k, ...a);
   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>`;
+  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 ? T('maximum') : T('minimum')}"` : `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];
@@ -98,9 +102,9 @@ export function scaleSlider(root, i, core, on) {
 
 // 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 { $, ui, reformat, groupThousands, t, langOf } = core, L = langOf(root), T = (k, ...a) => t(L, k, ...a);
   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>`;
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><label data-slot="label" class="cn-label" for="${id}">${T(i.label || 'Price')}</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="${T('Currency')}"><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;
@@ -114,42 +118,46 @@ export function moneyField(root, i, core, on) {
   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 unitName = () => (cur.minor === 0 ? T('{0} (it has no minor unit)', curRow.id) : T('cents of {0}', curRow.id));
+  const showMinor = () => { mfOut.textContent = mf.value ? T('Saved as: {0} {1}', Math.round(amount() * 10 ** cur.minor), unitName()) : T('Type a price'); };
   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(); } });
+  // a decimal key: in a currency with no decimals it is not written (it used to drop the comma and glue the digits after
+  // it to the whole part, ten times the amount); in one with decimals either key writes that currency's separator
+  mf.addEventListener('keydown', (e) => { if (e.key !== '.' && e.key !== ',') return; if (!cur.places) { e.preventDefault(); return; } if (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')); } });
+  // the currency's own shape as the empty field's hint: “0” or “0,00” / “0.00”
+  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.placeholder = cur.places ? `0${cur.dec}${'0'.repeat(cur.places)}` : '0'; mf.value = n ? toText(n) : ''; showMinor(); };
+  codePicker(core, { trigger: $('[data-mf-cur]', root), anchor: $('[data-mf-group]', root), placeholder: T('Search currency'), current: () => curRow.id, items: () => CURRENCIES.map((c) => ({ id: c.id, label: cap(nameIn(L, 'currency', c.id, 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 L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a);
   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>`;
+  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}">${T(i.label || 'Phone')}</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="${T('Country')}"><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 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 ? T('Saved as +{0}', `${country.e164}${d}`) : bad ? T('{0} digits short for a number from {1}', country.len - d.length, nameIn(L, 'region', country.id, country.label)) : T('{0} digits, without the {1}', country.len, 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(); } });
+  codePicker(core, { trigger: $('[data-ph-cc]', root), anchor: $('[data-ph-group]', root), placeholder: T('Search country'), current: () => country.id, items: () => COUNTRIES.map((c) => ({ id: c.id, label: nameIn(L, 'region', c.id, 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 { $ } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   const len = Number(i.length) || 6, half = Math.ceil(len / 2);
-  root.innerHTML = `<div class="cx-vline cx-otp-stack"><div class="cx-otp"><input class="cx-otp-input" inputmode="numeric" autocomplete="one-time-code" maxlength="${len}" aria-label="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>`;
+  root.innerHTML = `<div class="cx-vline cx-otp-stack"><div class="cx-otp"><input class="cx-otp-input" inputmode="numeric" autocomplete="one-time-code" maxlength="${len}" aria-label="${T('{0}-digit code', len)}"><div data-slot="input-otp" class="cn-input-otp" aria-hidden="true"><div data-slot="input-otp-group" class="cn-input-otp-group"></div><div data-slot="input-otp-separator" class="cn-input-otp-separator cx-otp-sep"><span></span></div><div data-slot="input-otp-group" class="cn-input-otp-group"></div></div></div><p class="cx-note" data-otp-msg></p><button data-slot="button" class="cn-button cn-button-variant-link cn-button-size-sm group/button" data-otp-resend disabled></button></div>`;
   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); } });
@@ -159,20 +167,20 @@ export function otpField(root, i, core, on) {
   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); }
+    if (otpIn.value.length === len) { busy = true; otpIn.readOnly = true; otpMsg.textContent = T('Checking…'); paint(); on?.complete?.(otpIn.value); }
   });
   ['focus', 'blur', 'click', 'keyup'].forEach((t) => otpIn.addEventListener(t, () => { toEnd(); paint(); }));
   otpIn.addEventListener('select', toEnd);
   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?.(); };
+  const tick = () => { left--; resend.disabled = left > 0; resend.textContent = left > 0 ? T('Resend in 0:{0}', String(left).padStart(2, '0')) : T('Resend code'); if (left > 0) rt = setTimeout(tick, 1000); };
+  resend.textContent = T('Resend in 0:{0}', String(left).padStart(2, '0'));
+  resend.onclick = () => { left = Number(i.resendIn ?? 30) + 1; clearTimeout(rt); tick(); otpMsg.removeAttribute('data-tone'); otpMsg.textContent = T('We sent you a new code'); otpIn.value = ''; delete otpBox.dataset.state; otpIn.focus(); on?.resend?.(); };
   rt = setTimeout(tick, 1000); paint();
   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); }
+    if (st === 'ok') { otpBox.dataset.state = 'ok'; otpMsg.dataset.tone = 'ok'; otpMsg.textContent = msg || T('Done, it is verified'); otpIn.blur(); }
+    if (st === 'bad') { otpBox.dataset.state = 'bad'; otpMsg.dataset.tone = 'bad'; otpMsg.textContent = msg || T('That is not the code'); const wrong = otpIn.value; setTimeout(() => { if (otpIn.value === wrong) { otpIn.value = ''; paint(); } }, 450); }
     paint();
   };
   return (next) => answer(next.state, next.message);

package/registry/kit-skeleton.muten

@@ -1,6 +1,6 @@
 # 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».
+# 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.

package/registry/kit-widget.js

@@ -11,7 +11,7 @@ export function mount(el, inputs, on) {
       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,
+        title: i.title || core0.t(core0.langOf(el), 'Messages'), 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') : ''}` })),
@@ -22,7 +22,7 @@ export function mount(el, inputs, on) {
     },
     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),
+      kit.chatbot(el, { name: i.title || core0.t(core0.langOf(el), 'Assistant'), greeting: i.greeting || '', avatar: i.avatar || '', 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); }); }
     },
@@ -39,8 +39,8 @@ export function mount(el, inputs, on) {
     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 || '', ...Object.fromEntries(['title', 'progress', 'complete', 'count', 'redeem', 'stamp'].filter((k) => i[k]).map((k) => [k, i[k]])) }),
     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.
+    password: ({ kit, t, langOf }, i) => kit.password(el, { label: t(langOf(el), i.label || 'Password') }),
+    // 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');
@@ -51,9 +51,14 @@ export function mount(el, inputs, on) {
   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');
+  // its language: inputs.lang, else the nearest lang (the page's); a lang that changes repaints it in the new one
+  if (inputs.lang) el.setAttribute('lang', inputs.lang);
+  let core0 = null;
   import('@muten/shadcn/registry/kit/core.js').then((core) => {
+    core0 = core;
     const render = RENDER[inputs.name]; if (!render) return;
     render(core, inputs); el.classList.remove('cx-kw-wait');
+    document.addEventListener('kit:lang', () => { if (el.isConnected && !inputs.lang) { el.innerHTML = ''; render(core, inputs); } });
     el.animate([{ opacity: 0.001 }, { opacity: 1 }], { duration: 180, easing: 'ease-out' });
     play(core, render);
   });

package/registry/lang-scope.js

@@ -0,0 +1,8 @@
+// LangScope (muten Custom) - puts `lang` on the scope it sits first in, so every piece inside (kit/i18n.js langOf)
+// speaks it; a new lang later changes it in place and the kit repaints in it (kit/core.js listens for lang changes).
+export function mount(el, inputs) {
+  const scope = el.parentElement;
+  const set = (lang) => { const v = String(lang || ''); if (!scope) return; if (v) { if (scope.getAttribute('lang') !== v) scope.setAttribute('lang', v); } else scope.removeAttribute('lang'); };
+  set(inputs.lang);
+  return (next) => set(next.lang);
+}

package/registry/lang-scope.muten

@@ -0,0 +1,5 @@
+# LangScope - everything inside speaks this language (es | en …): the library's words, its dates and its Customs follow
+# it. Without it they follow the page's <html lang>, English when there is none. A store in the shop's language:
+#   LangScope(lang: shopLang) { … the store's parts … }
+# shadcn-for-muten · Custom · host JS is lang-scope.js.
+part LangScope(lang: text) { Stack class("cx-lang-scope") { Custom LangScope inputs(lang: $lang) class("cx-lang-host")  slot } }

package/registry/legal-doc.muten

@@ -1,10 +1,10 @@
 # Legal document - the pages a business must have (terms, privacy, data deletion), the way Storio's site writes them:
 # the title and its line, then two columns, the contents (they follow the reading: the section on screen is marked)
-# and the text at reading width, each section titled «N. Title». On a phone the contents become a row that slides.
-#   DocHead(title: "Términos y condiciones") { Text "Última actualización: 7 de octubre de 2026" class("cx-doc-line") }
+# and the text at reading width, each section titled “N. Title”. On a phone the contents become a row that slides.
+#   DocHead(title: "Terms and conditions") { Text "Last updated: October 7, 2026" class("cx-doc-line") }
 #   DocBody {
-#     DocToc(label: "Contenido") { DocTocLink(label: "1. Quiénes somos", to: "#s1")  DocTocLink(label: "2. Tus datos", to: "#s2") }
-#     DocArticle { DocSection(anchor: "s1", title: "1. Quiénes somos") { DocText(text: "Storio es un producto de Candhrly LLC.") } }
+#     DocToc(label: "Content") { DocTocLink(label: "1. Who we are", to: "#s1")  DocTocLink(label: "2. Tus datos", to: "#s2") }
+#     DocArticle { DocSection(anchor: "s1", title: "1. Who we are") { DocText(text: "Storio is a product of Candhrly LLC.") } }
 #   }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-doc-*).
 part DocHead(title: text) {
@@ -14,7 +14,7 @@ part DocHead(title: text) {
   }
 }
 part DocBody() { Section class("cx-mk-col cx-doc-body") { slot } }
-part DocToc(label: text = "Contenido") { Stack class("cx-navbar cx-doc-toc") data(orientation: "vertical", spy: "on") aria(role: "navigation", label: $label) { slot } }
+part DocToc(label: text = "Contents") { Stack class("cx-navbar cx-doc-toc") data(orientation: "vertical", spy: "on", trl: $label) aria(role: "navigation", label: $label) { slot } }
 part DocTocLink(label: text, to: text) {
   Link "{$label}" -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-nav cx-doc-toc-item") data(slot: "button", marker: "fill")
 }

package/registry/link-btn.muten

@@ -1,7 +1,7 @@
 # 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" }
+#   LinkBtn(to: "/docs", variant: "outline", size: "sm") { Span "See the guide"  Icon "lucide:arrow-right" }
 # variant: default | outline | secondary | ghost | destructive | link · size: xs | sm | default | lg | xl (44) | 2xl (52)
 # shape: "" | pill - fully rounded ends, like Btn(shape: "pill").
 # shadcn-for-muten · part · no deps · Nova classes (nova.css).

package/registry/list-motion.js

@@ -0,0 +1,46 @@
+// ListMotion (muten Custom) - the rows of the list it sits in open and close their place (kit.css “List rows”).
+//   · a row added after the first paint opens its place and fades in (cx-row-enter)
+//   · a row muten removes stays a moment, closing its gap (cx-row-leave), then goes; it is already disposed, so it
+//     is only a picture of the row and takes no clicks
+//   · a row muten only MOVES (it leaves and comes back in the same update) is not an entrance
+// Nothing moves on the first paint, and with reduced motion the kit's tokens make it instant.
+export function mount(el) {
+  const box = el.parentElement;
+  if (!box) return;
+  let ready = false;
+  requestAnimationFrame(() => requestAnimationFrame(() => { ready = true; }));
+  const isRow = (n) => n.nodeType === 1 && n !== el && !n.classList.contains('cx-row-leave');
+  const settle = (n, cls) => {
+    const done = () => { clearTimeout(t); n.removeEventListener('animationend', end); if (cls === 'cx-row-leave') n.remove(); else n.classList.remove(cls); };
+    const end = (e) => { if (e.target === n) done(); };
+    n.addEventListener('animationend', end);
+    const t = setTimeout(done, 900);   // a safety net if the animation never reports back
+  };
+  const mo = new MutationObserver((records) => {
+    if (!ready) return;
+    const removed = new Set(), added = new Set();
+    for (const r of records) r.removedNodes.forEach((n) => { if (isRow(n)) removed.add(n); });
+    for (const r of records) r.addedNodes.forEach((n) => { if (isRow(n) && !removed.has(n)) added.add(n); });
+    const gone = [...removed].filter((n) => n.parentNode !== box);
+    // A WHOLE PAGE SWAPPED (a page turned, a filter changed most rows): closing ten rows while ten open would make
+    // the list jump in height, so the old ones go at once and the new ones only fade in where they land
+    const swap = gone.length > 1 && added.size > 1;
+    if (swap) { added.forEach((n) => { n.classList.add('cx-row-swap'); settle(n, 'cx-row-swap'); }); return; }
+    for (const r of records) {
+      r.addedNodes.forEach((n) => {
+        if (!added.has(n)) return;   // a move, not an entrance
+        n.classList.add('cx-row-enter'); settle(n, 'cx-row-enter');
+      });
+      r.removedNodes.forEach((n) => {
+        if (!isRow(n) || n.parentNode === box) return;   // moved back in: not leaving
+        const ref = r.nextSibling && r.nextSibling.parentNode === box ? r.nextSibling : (r.previousSibling && r.previousSibling.parentNode === box ? r.previousSibling.nextSibling : null);
+        n.classList.remove('cx-row-enter'); n.classList.add('cx-row-leave'); n.inert = true;
+        box.insertBefore(n, ref);
+        n.style.setProperty('--mu-h', n.offsetHeight + 'px');
+        settle(n, 'cx-row-leave');
+      });
+    }
+  });
+  mo.observe(box, { childList: true });
+  // nothing returned: in muten a Custom's returned function is its UPDATER (called with new inputs), not a cleanup
+}

package/registry/list-motion.muten

@@ -0,0 +1,4 @@
+# ListMotion - rows that open and close their place. Put inside a list container, after its rows; ItemGroup already
+# carries it, so any `each` inside an ItemGroup moves without the page doing anything.
+# shadcn-for-muten · Custom · host JS is list-motion.js.
+part ListMotion() { Custom ListMotion class("cx-list-motion") }

package/registry/live-stack.muten

@@ -1,5 +1,5 @@
-# LiveStack - news that keeps arriving, for a landing page: what the product does while nobody watches («Carla agendó
-# un corte», «Pedido nuevo», «Tu asistente contestó»). One at a time a card drops in at the front and the older ones
+# LiveStack - news that keeps arriving, for a landing page: what the product does while nobody watches (“Carla booked
+# a haircut”, “New order”, “Your assistant answered”). One at a time a card drops in at the front and the older ones
 # step back behind it, smaller, and leave after three. Pointer over it pauses; reduced motion shows the first three still.
 #   LiveStack(items: @news, every: 2800)
 # items {icon (a kit sprite id), title, text, time, tone: "" | ok | wait | info}

package/registry/logo-cloud.muten

@@ -1,6 +1,6 @@
-# LogoCloud - the «they use it» strip: a wrapping row of logos, muted until the pointer rests on one. A
+# LogoCloud - the “they use it” strip: a wrapping row of logos, muted until the pointer rests on one. A
 # LogoCloudItem holds any logo: an Image, an Icon or a word in a Span; all take the same height.
-#   LogoCloud(label: "Lo usan") { LogoCloudItem { Image "~/logos/roble.svg" alt("El Roble") }  LogoCloudItem { Span "Pelos & Co" } }
+#   LogoCloud(label: "Used by") { LogoCloudItem { Image "~/logos/roble.svg" alt("El Roble") }  LogoCloudItem { Span "Pelos & Co" } }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-logos).
 part LogoCloud(label: text = "") { Stack class("cx-logos") aria(label: $label) { slot } }
 part LogoCloudItem() { Stack class("cx-logo") { slot } }

package/registry/marketing.muten

@@ -2,12 +2,12 @@
 # hero's pill and two-line headline, the address field with its button, a list of checks, numbered steps, cards,
 # columns of facts, a path of steps, a checked list with explanations and the closing call. Every argument is text,
 # so the words can come from a translation function: MkCheck(label: "{t(lang, "x")}").
-#   MkSection(anchor: "how", title: "Así funciona") {
-#     MkChecks { MkCheck(label: "Sin app para tu cliente")  MkCheck(label: "Confirma solo") }
+#   MkSection(anchor: "how", title: "How it works") {
+#     MkChecks { MkCheck(label: "No app for your customer")  MkCheck(label: "Confirma solo") }
 #   }
-#   MkHero { MkHeroCopy { MkPill(label: "Para músicos") { Icon "lucide:music" }  MkHeadline(first: "Tu música,", second: "en un link.")
-#     MkClaim(value: handle, to: joinUrl, cta: "Crear mi tienda") class("animate-rise") }  … }
-#   MkCta(title: "Tu negocio,", soft: "vende y agenda solo.") { MkClaim(value: handle, to: joinUrl, cta: "Crear mi tienda") }
+#   MkHero { MkHeroCopy { MkPill(label: "For musicians") { Icon "lucide:music" }  MkHeadline(first: "Your music,", second: "in one link.")
+#     MkClaim(value: handle, to: joinUrl, cta: "Create my shop") class("animate-rise") }  … }
+#   MkCta(title: "Your business,", soft: "sells and books by itself.") { MkClaim(value: handle, to: joinUrl, cta: "Create my shop") }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-mk-*), uses InputGroup and LinkBtn.
 
 # MkSection - a page section at reading width with its h2. anchor is its id (a link can go to #anchor).
@@ -50,7 +50,7 @@ part MkHeadline(first: text, second: text, fit: bool = true) {
 part MkTitle(text: text, size: text = "") {
   Title "{$text}" h1 class("cx-mk-h1 words", "cx-mk-h1-fit" when $size == "fit", "cx-mk-h1-wrap" when $size == "wrap")
 }
-# MkClaim - the address field and its button: «storio.ink/ [your-name] [Create]». value is the page's text state.
+# MkClaim - the address field and its button: “storio.ink/ [your-name] [Create]”. value is the page's text state.
 part MkClaim(value: text, to: text, cta: text, placeholder: text = "", prefix: text = "storio.ink/") {
   Stack class("cx-mk-claim") {
     InputGroup(size: "2xl", variant: "filled") {
@@ -147,7 +147,7 @@ part VsRow(what: text, us: text, them: text, usName: text, themName: text) {
 # MkRows / MkRow - zigzag rows: the words on one side and a picture on the other (MkStage); reverse puts the words on
 # the right. MkRowCopy is the words: its title (an h2, or h3 under a section that already has one), a line and, in the
 # slot, anything after it (MkChecks).
-#   MkRows { MkRow { MkRowCopy(title: "Tu agenda", text: "Se llena sola.") { MkChecks { … } }  MkStage { … } } }
+#   MkRows { MkRow { MkRowCopy(title: "Your schedule", text: "Se llena sola.") { MkChecks { … } }  MkStage { … } } }
 part MkRows() { Stack class("cx-mk-rows") { slot } }
 part MkRow(reverse: bool = false) { Stack class("cx-mk-row", "cx-mk-rev" when $reverse) { slot } }
 part MkRowCopy(title: text, text: text, level: text = "h2") {

package/registry/member-list.muten

@@ -1,6 +1,6 @@
 # MemberList - any group (team, workspace, family plan): who is in, their role in the library's menu, invite.
-#   MemberList(members: @members, roles: @roles, owner: "Propietario", one: "miembro", many: "miembros", cta: "Invitar", note: "Le llega un correo para unirse.")
+#   MemberList(members: @members, roles: @roles, owner: "Owner", one: "member", many: "members", cta: "Invite", note: "They get an email to join.")
 # shadcn-for-muten · part over KitWidget (kit core).
-part MemberList(members: list, roles: list, owner: text = "", one: text = "persona", many: text = "personas", cta: text = "Invitar", note: text = "") {
+part MemberList(members: list, roles: list, owner: text = "", one: text = "person", many: text = "people", cta: text = "Invite", note: text = "") {
   Custom KitWidget inputs(name: "memberList", members: $members, roles: $roles, owner: $owner, one: $one, many: $many, cta: $cta, note: $note) class("cx-team")
 }

package/registry/menubar.muten

@@ -1,10 +1,10 @@
 # Menubar - a desktop app's menu bar: each word opens its menu; once one is open, moving the pointer to the next word
 # opens that one, and the left and right arrows walk the bar. Each menu holds DropdownContent and its items.
 #   Menubar(label: "Editor") {
-#     MenubarMenu { MenubarTrigger(label: "Archivo")  DropdownContent { DropdownItem(label: "Nuevo", shortcut: "⌘N", onSelect: create) … } }
-#     MenubarMenu { MenubarTrigger(label: "Editar")  DropdownContent { … } }
+#     MenubarMenu { MenubarTrigger(label: "File")  DropdownContent { DropdownItem(label: "New", shortcut: "⌘N", onSelect: create) … } }
+#     MenubarMenu { MenubarTrigger(label: "Edit")  DropdownContent { … } }
 #   }
 # shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (.cn-menubar*) + kit.css.
-part Menubar(label: text = "Menú") { Stack class("cn-menubar cx-menubar") data(slot: "menubar") aria(role: "menubar", label: $label) { slot } }
+part Menubar(label: text = "Menu") { Stack class("cn-menubar cx-menubar") data(slot: "menubar", trl: $label) aria(role: "menubar", label: $label) { slot } }
 part MenubarMenu() { Stack class("cx-ov") data(slot: "menubar-menu") { slot  OverlayBehavior(kind: "menubar") } }
 part MenubarTrigger(label: text) { Stack class("cx-ov-trigger") { Button "{$label}" class("cn-menubar-trigger") data(slot: "menubar-trigger") aria(role: "menuitem") } }

package/registry/message-scroller.muten

@@ -1,8 +1,8 @@
 # MessageScroller - the column of a conversation: it scrolls inside itself and opens at the latest message; a new
 # message keeps it at the bottom only if you were already there (reading back is never interrupted).
-#   MessageScroller(label: "Chat con Valentina", height: "22rem") { Marker(label: "Hoy")  Message(…) { … } }
+#   MessageScroller(label: "Chat with Valentina", height: "22rem") { Marker(label: "Today")  Message(…) { … } }
 # shadcn-for-muten · part + Custom (stick to the bottom) · kit.css (.cx-chat).
-part MessageScroller(label: text = "Conversación", height: text = "22rem") {
-  Stack class("cx-chat cx-scroll cx-msg-scroller") data(slot: "message-scroller") style(h: "{$height}") aria(role: "log", label: $label) { slot  MessageScrollerBehavior() }
+part MessageScroller(label: text = "Conversation", height: text = "22rem") {
+  Stack class("cx-chat cx-scroll cx-msg-scroller") data(slot: "message-scroller") style(h: "{$height}") data(trl: $label) aria(role: "log", label: $label) { slot  MessageScrollerBehavior() }
 }
 part MessageScrollerBehavior() { Custom MessageScrollerBehavior class("cx-msg-behavior") }

package/registry/message.muten

@@ -1,10 +1,10 @@
 # Message - a chat bubble, the same the kit's inbox draws: theirs on the left on the surface, yours on the right in
 # the primary colour, with the time and, on yours, whether it was sent, delivered or read. Text, a photo or an
 # Attachment go inside. Marker is the day line between messages; MessageScroller holds them and scrolls.
-#   MessageScroller(label: "Chat con Valentina") {
-#     Marker(label: "Hoy")
-#     Message(variant: "received", time: "10:02") { Span "Hola, ¿tienen cita hoy?" }
-#     Message(variant: "sent", time: "10:03", status: "read") { Span "Sí: a las 15:00 con Camila." }
+#   MessageScroller(label: "Chat with Valentina") {
+#     Marker(label: "Today")
+#     Message(variant: "received", time: "10:02") { Span "Hi, do you have an appointment today?" }
+#     Message(variant: "sent", time: "10:03", status: "read") { Span "Yes: at 15:00 with Camila." }
 #   }
 # variant: received | sent · status (sent only): sending | sent | delivered | read · tag: a small label (Bot).
 # shadcn-for-muten · parts · no deps · kit.css (.cx-chat-*).
@@ -15,14 +15,14 @@ part Message(variant: text = "received", time: text = "", status: text = "", tag
       Stack class("cx-chat-meta") {
         Span "{$tag}" class("cx-chat-tag")
         Span "{$time}" class("cx-text") data(variant: "caption")
-        when $status == "sending" { Icon "lucide:clock" class("cx-tick") data(status: "sending") aria(label: "Enviando") }
-        when $status == "sent" { Icon "lucide:check" class("cx-tick") data(status: "sent") aria(label: "Enviado") }
-        when $status == "delivered" { Icon "lucide:check-check" class("cx-tick") data(status: "delivered") aria(label: "Entregado") }
-        when $status == "read" { Icon "lucide:check-check" class("cx-tick") data(status: "read") aria(label: "Leído") }
+        when $status == "sending" { Icon "lucide:clock" class("cx-tick") data(status: "sending", trl: "Sending") aria(label: "Sending") }
+        when $status == "sent" { Icon "lucide:check" class("cx-tick") data(status: "sent", trl: "Sent") aria(label: "Sent") }
+        when $status == "delivered" { Icon "lucide:check-check" class("cx-tick") data(status: "delivered", trl: "Delivered") aria(label: "Delivered") }
+        when $status == "read" { Icon "lucide:check-check" class("cx-tick") data(status: "read", trl: "Read") aria(label: "Read") }
       }
     }
   }
 }
 part Bubble(variant: text = "received") { Stack class("cx-chat-bubble cx-msg-bubble") data(variant: $variant) { slot } }
 part Marker(label: text) { Stack class("cx-chat-day") aria(role: "separator") { Span "{$label}" class("cx-text") data(variant: "caption") } }
-part MessageImage(src: text, alt: text = "Foto") { Stack class("cx-chat-img") style(bg: "{$src}") aria(role: "img", label: $alt) }
+part MessageImage(src: text, alt: text = "Photo") { Stack class("cx-chat-img") style(bg: "{$src}") data(trl: $alt) aria(role: "img", label: $alt) }

package/registry/messaging.muten

@@ -6,6 +6,6 @@
 # {id,icon,label,noun,title,subtitle}, templates {title,body}, replies {match (regex), text}.
 #   Messaging(channels: @channels, conversations: @inbox, filters: @filters, states: @states, controls: @controls, quick: @quick, templates: @templates, replies: @replies, onAction: act)
 # shadcn-for-muten · part over KitWidget (kit core).
-part Messaging(title: text = "Mensajes", channels: list, conversations: list, filters: list, states: list, controls: list, quick: list, templates: list, replies: list, onAction: action) {
+part Messaging(title: text = "Messages", channels: list, conversations: list, filters: list, states: list, controls: list, quick: list, templates: list, replies: list, onAction: action) {
   Custom KitWidget inputs(name: "messaging", title: $title, channels: $channels, conversations: $conversations, filters: $filters, states: $states, controls: $controls, quick: $quick, templates: $templates, replies: $replies) on(action: $onAction) class("cx-mx-host")
 }

package/registry/modal.muten

@@ -3,16 +3,16 @@
 # drag down on the drawer all call onClose. Content goes in the slot; the buttons in a ModalFooter (it sticks under
 # the scrolling body): the way out (cx-exit) on the left, the action (cx-go) filling the rest.
 #   state { editing = false : bool }   action edit() mutates editing { editing.set(true) }   action done() mutates editing { editing.set(false) }
-#   Modal(open: editing, onClose: done, title: "Editar servicio", description: "Lo que cambies se ve en tu tienda al guardar.") {
+#   Modal(open: editing, onClose: done, title: "Edit service", description: "What you change shows in your shop when you save.") {
 #     Field { … }
-#     ModalFooter { Btn(variant: "outline", onClick: done) class("cx-exit") { Span "Cancelar" }  Btn(onClick: save) class("cx-go") { Span "Guardar cambios" } }
+#     ModalFooter { Btn(variant: "outline", onClick: done) class("cx-exit") { Span "Cancel" }  Btn(onClick: save) class("cx-go") { Span "Save changes" } }
 #   }
 # mode: auto | dialog | drawer | sheet (a panel from a side) · side: right | left | top | bottom (for sheet)
 # role: dialog | alertdialog · dismiss: on | off (off: no ✕ and the backdrop does not close it; only its buttons do)
 # size: "" | tall (a list that pages)   ·   shadcn-for-muten · part + Custom (ModalBehavior) · kit.css (.cx-modal).
 part Modal(open: bool, onClose: action, title: text = "", description: text = "", mode: text = "auto", size: text = "", side: text = "right", role: text = "dialog", dismiss: text = "on") {
   Stack class("cx-modal-root") data(open: $open) {
-    when $dismiss != "off" { Button "" -> $onClose class("cx-overlay") aria(label: "Cerrar", hidden: "true") data(closes: "true") }
+    when $dismiss != "off" { Button "" -> $onClose class("cx-overlay") aria(label: "Close", hidden: "true") data(closes: "true", trl: "Close") }
     when $dismiss == "off" { Stack class("cx-overlay") aria(hidden: "true") }
     Stack class("cx-modal") data(mode: $mode, size: $size, side: $side) aria(role: $role, modal: "true", label: $title) {
       Stack class("cx-handle") aria(hidden: "true")
@@ -20,7 +20,7 @@ part Modal(open: bool, onClose: action, title: text = "", description: text = ""
         Span "{$title}" class("cx-modal-title")
         Span "{$description}" class("cx-modal-desc")
       }
-      when $dismiss != "off" { Btn(variant: "ghost", size: "icon-sm", label: "Cerrar", onClick: $onClose) class("cx-modal-x") { Icon "lucide:x" } }
+      when $dismiss != "off" { Btn(variant: "ghost", size: "icon-sm", label: "Close", onClick: $onClose) class("cx-modal-x") { Icon "lucide:x" } }
       Stack class("cx-modal-body") { slot }
       ModalBehavior(open: $open, onClose: $onClose)
     }

package/registry/money-field.js

@@ -1,5 +1,5 @@
 // MoneyField (muten Custom) - a price with its currency (kit/values.js moneyField).
 export function mount(el, inputs, on) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => v.moneyField(el, inputs, core, on));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => core.relang(el, inputs, () => v.moneyField(el, inputs, core, on)));
   return () => {};
 }

package/registry/money-field.muten

@@ -1,7 +1,7 @@
 # MoneyField - a price with its currency: the symbol, separators and decimals come from the currency (Intl); the
 # currency is picked from a searchable list; under it, what is stored (minor units). onChange gets {amount, minor, currency}.
-#   MoneyField(label: "Precio del servicio", value: 25000, currency: "COP", onChange: setPrice)
+#   MoneyField(label: "Service price", value: 25000, currency: "COP", onChange: setPrice)
 # shadcn-for-muten · Custom (kit values) · host JS money-field.js.
-part MoneyField(label: text = "Precio", value: number = 0, currency: text = "COP", onChange: action) {
+part MoneyField(label: text = "Price", value: number = 0, currency: text = "COP", onChange: action) {
   Custom MoneyField inputs(label: $label, value: $value, currency: $currency) on(change: $onChange) class("cx-mf-host")
 }

package/registry/nav-button.muten

@@ -1,8 +1,8 @@
 # NavButton - a place in the app (a tab bar, a sidebar, a segmented header). Where you are is a STATE, not a
 # variant: it rides aria-pressed and is marked by `marker`; everything else is a Btn (variant, size, any content in
 # the slot: an icon, a count). Lay them in a NavBar, across or down.
-#   NavBar(label: "Secciones") { NavButton(label: "Mi tienda", current: atShop, onClick: goShop) … }
-#   NavBar(label: "Menú", orientation: "vertical") { NavButton(label: "Agenda", current: atAgenda, onClick: goAgenda, marker: "fill") { Icon "lucide:calendar" } }
+#   NavBar(label: "Sections") { NavButton(label: "My shop", current: atShop, onClick: goShop) … }
+#   NavBar(label: "Menu", orientation: "vertical") { NavButton(label: "Schedule", current: atAgenda, onClick: goAgenda, marker: "fill") { Icon "lucide:calendar" } }
 # marker: dot (soft fill + a dot, the default) | fill (soft fill) | line (an underline) | none (only the text firms up)
 # variant / size: as Btn. shadcn-for-muten · part · no deps · kit.css (.cx-nav, .cx-navbar).
 part NavButton(label: text = "", current: bool, onClick: action, variant: text = "ghost", size: text = "default", marker: text = "dot") {
@@ -11,11 +11,11 @@ part NavButton(label: text = "", current: bool, onClick: action, variant: text =
     Span "{$label}" class("cx-nav-label")
   }
 }
-part NavBar(label: text = "Secciones", orientation: text = "horizontal") { Nav class("cx-navbar") data(orientation: $orientation) aria(label: $label) { slot } }
+part NavBar(label: text = "Sections", orientation: text = "horizontal") { Nav class("cx-navbar") data(orientation: $orientation, trl: $label) aria(label: $label) { slot } }
 
 # NavLink - a NavButton that goes to another page (a Link): the tabs between sibling pages (Terms · Privacy · Delete).
 # NavHere - the tab of the page you are on, which goes nowhere (aria-current="page", marked like a current NavButton).
-#   NavBar(label: "Documentos") { NavHere(label: "Términos", marker: "fill")  NavLink(label: "Privacidad", to: "/privacy", marker: "fill") }
+#   NavBar(label: "Documents") { NavHere(label: "Terms", marker: "fill")  NavLink(label: "Privacy", to: "/privacy", marker: "fill") }
 part NavLink(label: text, to: text, variant: text = "ghost", size: text = "default", marker: text = "dot") {
   Link "" -> "{$to}" class("cn-button cn-button-variant-{$variant} cn-button-size-{$size} group/button cx-nav") data(slot: "button", marker: $marker) {
     slot