@muten/shadcn 0.1.14 → 0.2.0

package/registry/feature-grid.muten

@@ -1,6 +1,6 @@
 # FeatureGrid - what a product does, as cards in a grid that wraps (three, two or one per row by the width). Each
 # FeatureCard has its icon in the slot, a title and a line.
-#   FeatureGrid { FeatureCard(title: "Agenda", description: "Citas por persona y recordatorios.") { Icon "lucide:calendar" } … }
+#   FeatureGrid { FeatureCard(title: "Schedule", description: "Appointments per person and reminders.") { Icon "lucide:calendar" } … }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-features).
 part FeatureGrid(columns: number = 3) { Stack class("cx-features") style(cols: "{$columns}") { slot } }
 part FeatureCard(title: text, description: text) {

package/registry/feature-rows.muten

@@ -1,6 +1,6 @@
 # FeatureRows - a list of numbered rows split by hairlines: the number, a title and its explanation in three
-# columns on a wide screen, one under the other on a phone. For steps, a schedule, a «how it works».
-#   FeatureRows { FeatureRow(index: "01", title: "Crea tu tienda", description: "Nombre, rubro y ciudad en un minuto.") … }
+# columns on a wide screen, one under the other on a phone. For steps, a schedule, a “how it works”.
+#   FeatureRows { FeatureRow(index: "01", title: "Create your shop", description: "Nombre, rubro y ciudad en un minuto.") … }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-frows).
 part FeatureRows() { Stack class("cx-frows") aria(role: "list") { slot } }
 part FeatureRow(index: text, title: text, description: text = "") {

package/registry/field-behavior.js

@@ -1,22 +1,32 @@
 // FieldBehavior (muten Custom) - the reference artifact's field rules, on the muten field it sits in. The value stays
 // muten's (bind): every change here dispatches an input event so the page's state follows.
 export function mount(el, inputs) {
+  let I = null; import('@muten/shadcn/registry/kit/i18n.js').then((m) => { I = m; });
   const field = el.closest('.cn-field, .cn-input-group') || el.parentElement;
   const input = field.querySelector('input, textarea');
   if (!input) return () => {};
   const set = (v) => { input.value = v; input.dispatchEvent(new Event('input', { bubbles: true })); };
   const kind = inputs.kind;
   if (kind === 'money') {
+    // thousands while typing (not only on leaving: focusing used to drop the dots), and only digits get in: a letter is
+    // not written, the caret stays after the same digit
     const group = (d) => d.replace(/^0+(?=\d)/, '').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-    input.addEventListener('focus', () => set(input.value.replace(/\D/g, '')));
-    input.addEventListener('blur', () => set(group(input.value.replace(/\D/g, ''))));
+    input.inputMode = 'numeric';
+    input.addEventListener('beforeinput', (e) => { if (e.data && /\D/.test(e.data) && e.inputType.startsWith('insert')) e.preventDefault(); });
+    input.addEventListener('input', (e) => {
+      if (!e.isTrusted) return;
+      const caret = input.selectionStart ?? input.value.length, keep = input.value.slice(0, caret).replace(/\D/g, '').length;
+      const next = group(input.value.replace(/\D/g, '')); if (next === input.value) return;
+      set(next); let pos = 0, seen = 0; while (pos < next.length && seen < keep) { if (/\d/.test(next[pos])) seen++; pos++; }
+      input.setSelectionRange(pos, pos);
+    });
     set(group(input.value.replace(/\D/g, '')));
   }
   if (kind === 'email') {
     // the Field draws its description after its slot, so it is looked up when needed, not at mount
     let help = null;
     const ok = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v);
-    const check = () => { const desc = field.querySelector('.cn-field-description'); if (desc && help === null) help = desc.textContent; const bad = input.value.trim() !== '' && !ok(input.value.trim()); input.setAttribute('aria-invalid', String(bad)); field.toggleAttribute('data-invalid', bad); if (desc) { desc.classList.add('cx-msg'); desc.textContent = bad ? inputs.message || 'Revisa el correo.' : help; } };
+    const check = () => { const desc = field.querySelector('.cn-field-description'); if (desc && help === null) help = desc.textContent; const bad = input.value.trim() !== '' && !ok(input.value.trim()); input.setAttribute('aria-invalid', String(bad)); field.toggleAttribute('data-invalid', bad); if (desc) { desc.classList.add('cx-msg'); desc.textContent = bad ? inputs.message || (I ? I.t(I.langOf(field), 'Check the email.') : 'Check the email.') : help; } };
     input.addEventListener('blur', check);
     input.addEventListener('input', () => { if (field.hasAttribute('data-invalid') && ok(input.value.trim())) check(); });
   }

package/registry/field-behavior.muten

@@ -1,9 +1,9 @@
 # FieldBehavior - what a field does that is not markup, put INSIDE its Field (after the control):
-#   kind "money"  → separates thousands when leaving the field (25000 → 25.000)
+#   kind "money"  → separates thousands while typing (25000 → 25.000); letters do not get in
 #   kind "email"  → checks the address when leaving the field (not while typing); the error replaces the help text
 #                   in the same place (nothing jumps). message = the error.
 #   kind "search" → Esc clears it.
-#   kind "count"  → «71/160» at the end of the description line (needs maxlength via `max`).
-#   Field(label: "Correo para avisos", description: "Te llegan las reservas nuevas.") { Input(value: mail)  FieldBehavior(kind: "email", message: "Falta algo: revisa que sea como nombre@dominio.co") }
+#   kind "count"  → “71/160” at the end of the description line (needs maxlength via `max`).
+#   Field(label: "Email for notifications", description: "You get the new bookings.") { Input(value: mail)  FieldBehavior(kind: "email", message: "Something is missing: check it looks like name@domain.co") }
 # shadcn-for-muten · Custom · host JS is field-behavior.js.
 part FieldBehavior(kind: text, message: text = "", max: number = 0) { Custom FieldBehavior inputs(kind: $kind, message: $message, max: $max) class("cx-field-behavior") }

package/registry/field.muten

@@ -1,13 +1,13 @@
 # Field - a labelled control: the label, the control (slot), a description under it, an error when there is one.
-#   Field(label: "Nombre") { Input(value: name, placeholder: "Corte clásico") }
-#   Field(label: "Descripción", description: "Se ve en tu tienda.") { TextArea(value: desc) }
+#   Field(label: "Name") { Input(value: name, placeholder: "Classic cut") }
+#   Field(label: "Description", description: "Shows in your shop.") { TextArea(value: desc) }
 # Two short fields side by side: FieldRow { Field(…) { … }  Field(…) { … } } (one column on a phone).
 # error: a message that replaces the description in the same place (nothing jumps) and marks the field invalid.
 # orientation: vertical | horizontal.
 # FieldSet - sets the size and the look of every field inside it, the kit's own too (PasswordField, PhoneField…):
-#   FieldSet(size: "2xl", variant: "filled") { Field(label: "Correo") { … }  PasswordField(label: "Contraseña") }
-# FieldSeparator - a line with a word in the middle, between two ways in:   FieldSeparator(label: "o con tu correo")
-# FieldHead - a label with an action beside it:   FieldHead(label: "Contraseña") { LinkBtn(to: "/recover", variant: "link", size: "sm") { Span "¿La olvidaste?" } }
+#   FieldSet(size: "2xl", variant: "filled") { Field(label: "Email") { … }  PasswordField(label: "Password") }
+# FieldSeparator - a line with a word in the middle, between two ways in:   FieldSeparator(label: "or with your email")
+# FieldHead - a label with an action beside it:   FieldHead(label: "Password") { LinkBtn(to: "/recover", variant: "link", size: "sm") { Span "Forgot it?" } }
 # shadcn-for-muten · part · no deps · Nova (.cn-field) + kit.css.
 part Field(label: text = "", description: text = "", error: text = "", orientation: text = "vertical") {
   Stack class("cn-field cn-field-orientation-{$orientation} group/field") data(slot: "field", orientation: $orientation, invalid: $error != "") {

package/registry/file-input.js

@@ -3,10 +3,14 @@
 // with its size and a × to take it away; a file of the wrong type or too heavy is refused there, with the reason.
 export function mount(el, inputs, on) {
   const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  // its words: English, said in the language of the nearest lang (or inputs.lang) once kit/i18n.js is in
+  let I = null; const T = (k, ...a) => (I ? I.t(I.langOf(el), k, ...a) : a.reduce((s, v, n) => s.replace(`{${n}}`, v), k));
+  if (inputs && inputs.lang) el.setAttribute('lang', inputs.lang);
+  import('@muten/shadcn/registry/kit/i18n.js').then((m) => { I = m; m.localizeTree(el); });
   const multiple = inputs.multiple === 'on', maxMb = Number(inputs.maxMb) || 10, accept = String(inputs.accept || '');
-  el.innerHTML = `<div class="cx-drop cx-file-drop" tabindex="0" role="button" aria-label="${esc(inputs.label || 'Subir archivo')}">
+  el.innerHTML = `<div class="cx-drop cx-file-drop" tabindex="0" role="button" aria-label="${esc(inputs.label || 'Upload a file')}" data-trl="${esc(inputs.label || 'Upload a file')}">
       <input type="file" hidden ${accept ? `accept="${esc(accept)}"` : ''} ${multiple ? 'multiple' : ''}>
-      <div class="cx-drop-empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg><b>${esc(inputs.label || 'Sube un archivo')}</b><span>${esc(inputs.hint || 'Toca, arrastra o pega aquí')}</span></div>
+      <div class="cx-drop-empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg><b data-tr="${esc(inputs.label || 'Upload a file')}">${esc(inputs.label || 'Upload a file')}</b><span data-tr="${esc(inputs.hint || 'Tap, drag or paste here')}">${esc(inputs.hint || 'Tap, drag or paste here')}</span></div>
     </div>
     <p class="cx-note cx-file-msg" aria-live="polite"></p>
     <div data-slot="item-group" class="cn-item-group cx-file-list" role="list"></div>`;
@@ -15,14 +19,14 @@ export function mount(el, inputs, on) {
   const size = (b) => (b < 1024 ? `${b} B` : b < 1048576 ? `${Math.round(b / 1024)} KB` : `${(b / 1048576).toFixed(1)} MB`);
   const fits = (f) => { if (!accept) return true; return accept.split(',').map((a) => a.trim()).some((a) => (a.endsWith('/*') ? f.type.startsWith(a.slice(0, -1)) : a.startsWith('.') ? f.name.toLowerCase().endsWith(a.toLowerCase()) : f.type === a)); };
   const paint = () => {
-    list.innerHTML = files.map((f, i) => `<div data-slot="item" class="cn-item cn-item-variant-outline cn-item-size-sm group/item" role="listitem"><div class="cn-item-media cn-item-media-variant-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg></div><div class="cn-item-content"><div class="cn-item-title cx-ellipsis">${esc(f.name)}</div><p class="cn-item-description">${size(f.size)}</p></div><div class="cn-item-actions"><button type="button" class="cn-button cn-button-variant-ghost cn-button-size-icon-xs" data-drop="${i}" aria-label="Quitar ${esc(f.name)}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div></div>`).join('');
+    list.innerHTML = files.map((f, i) => `<div data-slot="item" class="cn-item cn-item-variant-outline cn-item-size-sm group/item" role="listitem"><div class="cn-item-media cn-item-media-variant-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg></div><div class="cn-item-content"><div class="cn-item-title cx-ellipsis">${esc(f.name)}</div><p class="cn-item-description">${size(f.size)}</p></div><div class="cn-item-actions"><button type="button" class="cn-button cn-button-variant-ghost cn-button-size-icon-xs" data-drop="${i}" aria-label="${esc(T('Remove {0}', f.name))}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div></div>`).join('');
     on.files?.(files.map((f) => f.name).join(', '));
   };
   const take = (fileList) => {
     const incoming = Array.from(fileList || []); if (!incoming.length) return;
     const bad = incoming.filter((f) => !fits(f)), heavy = incoming.filter((f) => fits(f) && f.size > maxMb * 1048576);
     const good = incoming.filter((f) => fits(f) && f.size <= maxMb * 1048576);
-    msg.textContent = bad.length ? `${bad[0].name} no es de un tipo que se pueda subir aquí.` : heavy.length ? `${heavy[0].name} pesa más de ${maxMb} MB.` : '';
+    msg.textContent = bad.length ? T('{0} is not a type of file that can be uploaded here.', bad[0].name) : heavy.length ? T('{0} is over {1} MB.', heavy[0].name, maxMb) : '';
     files = multiple ? files.concat(good) : good.slice(0, 1).length ? good.slice(0, 1) : files;
     paint();
   };

package/registry/file-input.muten

@@ -1,9 +1,9 @@
 # FileInput - a drop zone for any file: tap to pick, drag and drop, or paste. Under it, the picked files with their
 # size and a × each; a file of the wrong type or too heavy is refused in the same place, with the reason. For a
 # photo that has to be cropped and shrunk before uploading, use ImageUpload.
-#   FileInput(label: "Sube el comprobante", hint: "PDF o imagen · hasta 5 MB", accept: "image/*,.pdf", maxMb: 5, onFiles: setFiles)
-#   FileInput(label: "Documentos", multiple: "on", onFiles: setFiles)
+#   FileInput(label: "Upload the receipt", hint: "PDF or image · up to 5 MB", accept: "image/*,.pdf", maxMb: 5, onFiles: setFiles)
+#   FileInput(label: "Documents", multiple: "on", onFiles: setFiles)
 # onFiles gets the names, joined by ", ". shadcn-for-muten · Custom · kit.css (.cx-drop) · host JS file-input.js.
-part FileInput(label: text = "Sube un archivo", hint: text = "Toca, arrastra o pega aquí", accept: text = "", multiple: text = "", maxMb: number = 10, onFiles: action) {
+part FileInput(label: text = "Upload a file", hint: text = "Tap, drag or paste here", accept: text = "", multiple: text = "", maxMb: number = 10, onFiles: action) {
   Custom FileInput inputs(label: $label, hint: $hint, accept: $accept, multiple: $multiple, maxMb: $maxMb) on(files: $onFiles) class("cx-file-host")
 }

package/registry/fixed-card.muten

@@ -1,9 +1,9 @@
-# FixedCard - a card that never grows with the data: at most three rows and a «Ver todas» that opens the full list
+# FixedCard - a card that never grows with the data: at most three rows and a “See all” that opens the full list
 # (in the adaptive Modal). Empty, it keeps the same shape. Rows are Row3 (time · who and what · its state).
-#   FixedCard(title: "Citas de hoy", description: "Jueves · 14 en total") {
-#     Row3(time: "09:00", title: "Andrés Rojas", subtitle: "Corte clásico") { ToneBadge(label: "Confirmada", tone: "ok") }
+#   FixedCard(title: "Today's appointments", description: "Thursday · 14 in total") {
+#     Row3(time: "09:00", title: "Andrés Rojas", subtitle: "Classic cut") { ToneBadge(label: "Confirmed", tone: "ok") }
 #   }
-#   …then its CardFooter { Btn(variant: "outline", size: "sm", onClick: openAll) class("cx-fill") { Span "Ver todas (14)" } }
+#   …then its CardFooter { Btn(variant: "outline", size: "sm", onClick: openAll) class("cx-fill") { Span "See all (14)" } }
 # EmptyMini - the empty line inside it: EmptyMini(text: "Entregaste todo.") { Icon "lucide:circle-check" }
 # shadcn-for-muten · part · no deps · kit.css (.cx-fixed-card, .cx-row3, .cx-empty-mini).
 part FixedCard(title: text, description: text = "") {

package/registry/folder-picker.js

@@ -3,11 +3,15 @@
 // inputs: label. handlers: pick(folder name). Where the browser cannot, the button says so instead of failing.
 export function mount(el, inputs, on) {
   const ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>';
-  const idle = inputs.label || 'Conectar carpeta';
+  // its words: English, said in the language of the nearest lang (or inputs.lang)
+  if (inputs.lang) el.setAttribute('lang', inputs.lang);
+  let I = null; const T = (k, ...a) => (I ? I.t(I.langOf(el), k, ...a) : k);
+  const idle = inputs.label || 'Connect a folder';
   el.innerHTML = `<button type="button" data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-default group/button cx-folder-btn">${ICON}<span></span></button><p class="cx-note cx-folder-msg" aria-live="polite"></p>`;
   const btn = el.querySelector('button'), label = btn.querySelector('span'), msg = el.querySelector('.cx-folder-msg');
   label.textContent = idle;
-  if (!window.showDirectoryPicker) { btn.disabled = true; msg.textContent = 'Este navegador no deja elegir carpetas: usa Chrome o Edge.'; }
+  import('@muten/shadcn/registry/kit/i18n.js').then((m) => { I = m; if (!btn.dataset.connected) label.textContent = T(idle); if (btn.disabled) msg.textContent = T('This browser cannot pick folders: use Chrome or Edge.'); });
+  if (!window.showDirectoryPicker) { btn.disabled = true; msg.textContent = T('This browser cannot pick folders: use Chrome or Edge.'); }
   btn.addEventListener('click', async () => {
     try { const handle = await window.showDirectoryPicker(); label.textContent = handle.name; btn.dataset.connected = ''; el._folder = handle; on.pick?.(handle.name); }
     catch { /* the person closed the picker */ }

package/registry/folder-picker.muten

@@ -1,5 +1,5 @@
 # FolderPicker - connects a folder of the computer (Chrome and Edge): a button that shows the folder's name once it
 # is chosen; where the browser cannot, it says so under the button instead of failing.
-#   FolderPicker(label: "Conectar carpeta", onPick: setFolder)
+#   FolderPicker(label: "Connect folder", onPick: setFolder)
 # shadcn-for-muten · Custom · host JS folder-picker.js.
-part FolderPicker(label: text = "Conectar carpeta", onPick: action) { Custom FolderPicker inputs(label: $label) on(pick: $onPick) class("cx-folder-host") }
+part FolderPicker(label: text = "Connect a folder", onPick: action) { Custom FolderPicker inputs(label: $label) on(pick: $onPick) class("cx-folder-host") }

package/registry/heatmap.muten

@@ -1,12 +1,12 @@
 # Heatmap - how much happens where two things cross: rows × columns (weekday × hour, week × day), each cell darker the
-# more it holds, a «less … more» scale under it. A cell says its count to a screen reader and on hover. With `empty`,
+# more it holds, a “less … more” scale under it. A cell says its count to a screen reader and on hover. With `empty`,
 # a calm note sits over the grid until there is something to show (emptyTitle on top of it). busy: true shows the grid
 # as a skeleton while it loads.
-#   Heatmap(rows: days, cols: hours, cells: heat, less: "Menos", more: "Más citas", label: "Citas por día y hora")
+#   Heatmap(rows: days, cols: hours, cells: heat, less: "Less", more: "More appointments", label: "Appointments by day and hour")
 # rows {id, label} · cols {label} (an empty label keeps the column unlabelled) · cells {row, level 0-6, tip}, row by row,
 # as many per row as there are cols. tone: the scale's colour (brand by default; coral | teal | amber | blue | pink).
 # shadcn-for-muten · part · no deps · kit.css (.cx-heat).
-part Heatmap(rows: list, cols: list, cells: list, label: text = "", less: text = "Menos", more: text = "Más", empty: text = "", emptyTitle: text = "", tone: text = "brand", busy: bool = false) {
+part Heatmap(rows: list, cols: list, cells: list, label: text = "", less: text = "Less", more: text = "More", empty: text = "", emptyTitle: text = "", tone: text = "brand", busy: bool = false) {
   Stack class("cx-heat") data(tone: $tone, busy: $busy) aria(busy: $busy) {
     Stack class("cx-heat-grid") style(n: "{$cols.length}") aria(role: "img", label: $label) {
       Span "" class("cx-heat-corner")
@@ -18,13 +18,13 @@ part Heatmap(rows: list, cols: list, cells: list, label: text = "", less: text =
       when $empty != "" and not $busy { Stack class("cx-veil-note") { Stack class("cx-veil-box") { Span "{$emptyTitle}" class("cx-veil-t")  Span "{$empty}" class("cx-veil-s") } } }
     }
     Stack class("cx-heat-scale") aria(hidden: true) {
-      Span "{$less}"
+      Span "{$less}" data(tr: $less)
       Span "" class("cx-heat-c") data(level: 0)
       Span "" class("cx-heat-c") data(level: 2)
       Span "" class("cx-heat-c") data(level: 4)
       Span "" class("cx-heat-c") data(level: 5)
       Span "" class("cx-heat-c") data(level: 6)
-      Span "{$more}"
+      Span "{$more}" data(tr: $more)
     }
   }
 }

package/registry/image-upload.js

@@ -1,5 +1,5 @@
 // ImageUpload (muten Custom) - the kit's imageUpload (kit/dates.js).
 export function mount(el, inputs, on) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/dates.js')]).then(([core, m]) => m.imageUpload(el, inputs, core, on));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/dates.js')]).then(([core, m]) => core.relang(el, inputs, () => m.imageUpload(el, inputs, core, on)));
   return () => {};
 }

package/registry/image-upload.muten

@@ -1,8 +1,8 @@
 # ImageUpload - tap, drag or paste an image: it is checked (type, size), decoded BEFORE drawing (no black squares),
 # cropped square, shrunk to WebP and uploaded with real progress to uploadUrl - or handed back as a data URL.
 # onReady gets {url | dataUrl, width, height, kb} ("" when removed).
-#   ImageUpload(title: "Sube la foto del servicio", uploadUrl: "/media", onReady: setPhoto)
+#   ImageUpload(title: "Upload the service photo", uploadUrl: "/media", onReady: setPhoto)
 # shadcn-for-muten · Custom (kit dates) · host JS image-upload.js.
-part ImageUpload(title: text = "Sube la foto", hint: text = "", maxMb: number = 10, size: number = 1200, uploadUrl: text = "", sample: text = "", onReady: action) {
+part ImageUpload(title: text = "Upload the photo", hint: text = "", maxMb: number = 10, size: number = 1200, uploadUrl: text = "", sample: text = "", onReady: action) {
   Custom ImageUpload inputs(title: $title, hint: $hint, maxMb: $maxMb, size: $size, uploadUrl: $uploadUrl, sample: $sample) on(ready: $onReady) class("cx-up-host")
 }

package/registry/inbox-play.muten

@@ -1,12 +1,12 @@
 # InboxPlay - a messages list shown, not used: the shop's inbox as the channel's app draws it (skin: instagram |
-# whatsapp), with the unread ones in bold and their dot. For a landing, beside «nobody answered them»; the real inbox
+# whatsapp), with the unread ones in bold and their dot. For a landing, beside “nobody answered them”; the real inbox
 # is Messaging. The rows are a picture (aria-hidden); `label` says what it shows.
-#   InboxPlay(title: "brumabarberia", tabs: "Principal", requests: "Solicitudes (12)", label: "…") {
-#     InboxPlayRow(name: "lau.mtz", text: "precio??", time: "2 h", unread: "yes")
-#     InboxPlayRow(name: "carlos.r", text: "Visto", time: "1 d", photo: "/face.webp")
+#   InboxPlay(title: "brumabarberia", tabs: "Primary", requests: "Requests (12)", label: "…") {
+#     InboxPlayRow(name: "lau.mtz", text: "price??", time: "2 h", unread: "yes")
+#     InboxPlayRow(name: "carlos.r", text: "Seen", time: "1 d", photo: "/face.webp")
 #   }
 # search (a placeholder) draws the app's search bar; InboxPlayNotes, InboxPlayTabs and InboxPlayFilters go in the list
-# in that order. A row takes ring (yes: a story ring), badge (WhatsApp's unread count), tag (who answered: «Asistente»);
+# in that order. A row takes ring (yes: a story ring), badge (WhatsApp's unread count), tag (who answered: “Asistente”);
 # and Instagram rows show the camera at the end.
 # shadcn-for-muten · part · no deps · kit.css (.cx-ip).
 part InboxPlay(title: text, tabs: text = "", requests: text = "", skin: text = "instagram", label: text = "", search: text = "") {

package/registry/indicator.muten

@@ -1,4 +1,4 @@
-# Indicator - the dot on a corner that says «something here needs you». Inside a Btn with a tone, or on an Avatar.
+# Indicator - the dot on a corner that says “something here needs you”. Inside a Btn with a tone, or on an Avatar.
 #   Btn(size: "icon-sm", variant: "ghost", tone: "note", onClick: open) { Icon "lucide:quote"  Indicator(tone: "note") }
 # tone: "" (selected) | wait | bad | info | note
 # shadcn-for-muten · part · no deps · kit.css (.cx-indicator).

package/registry/info-table.muten

@@ -3,7 +3,7 @@
 # softer, stacked with their column's name on a phone); a cell's tone picks "strong" or "soft" inside it.
 #   InfoTable(variant: "compare") {
 #     InfoHeadRow { InfoHead(label: "")  InfoHead(label: "Storio")  InfoHead(label: "Linktree") }
-#     InfoRow { InfoCell(label: "Agenda", tone: "strong")  InfoCell(label: "Incluida")  InfoCell(label: "No", tone: "soft") }
+#     InfoRow { InfoCell(label: "Schedule", tone: "strong")  InfoCell(label: "Included")  InfoCell(label: "No", tone: "soft") }
 #   }
 # shadcn-for-muten · parts · no deps · Nova (.cn-table) + kit.css (.cx-mk-vs-table).
 part InfoTable(variant: text = "default") {

package/registry/input-group.muten

@@ -1,18 +1,18 @@
 # InputGroup - a field with things inside its border: a prefix ($, an icon), a suffix (COP), a clear button.
 #   InputGroup { InputAddon { Span "$" }  GroupInput(value: price)  InputAddon(align: "inline-end") { Span "COP" } }
 # SearchInput - the search with a magnifier and a × that shows only with text (Esc also clears).
-#   SearchInput(value: q, placeholder: "Nombre o teléfono", onClear: clearQ)
-# Anything goes in an addon: an Icon, InputGroupText («https://», «COP», «@»), an InputGroupButton, a Kbd, a Spinner.
+#   SearchInput(value: q, placeholder: "Name or phone", onClear: clearQ)
+# Anything goes in an addon: an Icon, InputGroupText (“https://”, “COP”, “@”), an InputGroupButton, a Kbd, a Spinner.
 # align: inline-start | inline-end (beside the text) | block-start | block-end (a row above / below, for a GroupTextArea).
-#   InputGroup { GroupTextArea(value: msg, placeholder: "Escribe…")  InputAddon(align: "block-end") { InputGroupText(label: "0/160")  InputGroupButton(label: "Enviar", onClick: send) { Icon "lucide:send" } } }
+#   InputGroup { GroupTextArea(value: msg, placeholder: "Escribe…")  InputAddon(align: "block-end") { InputGroupText(label: "0/160")  InputGroupButton(label: "Send", onClick: send) { Icon "lucide:send" } } }
 # InputGroup and SearchInput take size (default | xl | 2xl) and variant (default | filled) like Input.
 # variant "tile": the field as a tile, its icon on a soft tile, its label inside above the value, a helper at the end:
-#   InputGroup(variant: "tile") { InputAddon { Icon "lucide:store" }  InputAddon(align: "block-start") { InputGroupText(label: "Nombre del negocio") }
-#     GroupInput(value: name, placeholder: "Estudio Luna")  InputAddon(align: "inline-end") { StatusBadge(label: "Libre", tone: "ok") } }
+#   InputGroup(variant: "tile") { InputAddon { Icon "lucide:store" }  InputAddon(align: "block-start") { InputGroupText(label: "Business name") }
+#     GroupInput(value: name, placeholder: "Estudio Luna")  InputAddon(align: "inline-end") { StatusBadge(label: "Free", tone: "ok") } }
 # A picker as a tile (it opens the page's Drawer): the value is an InputGroupText (class cx-placeholder while empty) and
 # the tile goes inside a Button with class cx-tile-btn:
 #   Button "" -> openCountry class("cx-tile-btn") { InputGroup(variant: "tile") { InputAddon { Icon "lucide:globe" }
-#     InputAddon(align: "block-start") { InputGroupText(label: "País") }  InputGroupText(label: countryName)
+#     InputAddon(align: "block-start") { InputGroupText(label: "Country") }  InputGroupText(label: countryName)
 #     InputAddon(align: "inline-end") { Icon "lucide:chevron-down" } } }
 # shadcn-for-muten · part · no deps · Nova (.cn-input-group).
 part InputGroup(size: text = "default", variant: text = "default") { Stack class("cn-input-group group/input-group") data(slot: "input-group", size: $size, variant: $variant) aria(role: "group") { slot } }
@@ -22,18 +22,18 @@ part InputAddon(align: text = "inline-start") { Stack class("cn-input-group-addo
 part GroupInput(value: text, placeholder: text = "", label: text = "") { SearchField bind($value) "{$placeholder}" class("cn-input cn-input-group-input cx-num") data(slot: "input-group-control") aria(label: $label) }
 # GroupPassword - a password inside an InputGroup; `shown` (the page's bool) shows what was typed. Put the eye in an
 # InputAddon(align: "inline-end") with an InputGroupButton that flips that bool.
-#   InputGroup { InputAddon { Icon "lucide:lock" }  GroupPassword(value: pass, shown: showPass, placeholder: "Tu contraseña")
-#     InputAddon(align: "inline-end") { InputGroupButton(onClick: toggleShow, size: "icon-xs", label: "Mostrar contraseña") { Icon "lucide:eye" } } }
+#   InputGroup { InputAddon { Icon "lucide:lock" }  GroupPassword(value: pass, shown: showPass, placeholder: "Your password")
+#     InputAddon(align: "inline-end") { InputGroupButton(onClick: toggleShow, size: "icon-xs", label: "Show password") { Icon "lucide:eye" } } }
 part GroupPassword(value: text, shown: bool = false, placeholder: text = "", label: text = "") {
   when $shown { SearchField bind($value) "{$placeholder}" class("cn-input cn-input-group-input") data(slot: "input-group-control") aria(label: $label) }
   when not $shown { Password bind($value) "{$placeholder}" class("cn-input cn-input-group-input") data(slot: "input-group-control") aria(label: $label) }
 }
-part SearchInput(value: text, placeholder: text = "Buscar", onClear: action, size: text = "default", variant: text = "default") {
+part SearchInput(value: text, placeholder: text = "Search", onClear: action, size: text = "default", variant: text = "default") {
   Stack class("cn-input-group group/input-group") data(slot: "input-group", size: $size, variant: $variant) aria(role: "group") {
     Stack class("cn-input-group-addon cn-input-group-addon-align-inline-start") data(slot: "input-group-addon", align: "inline-start") { Icon "lucide:search" }
-    SearchField bind($value) "{$placeholder}" class("cn-input cn-input-group-input") data(slot: "input-group-control")
+    SearchField bind($value) "{$placeholder}" class("cn-input cn-input-group-input") data(slot: "input-group-control", trp: $placeholder)
     Stack class("cn-input-group-addon cn-input-group-addon-align-inline-end") data(slot: "input-group-addon", align: "inline-end") {
-      when $value != "" { Button -> $onClear class("cn-button cn-button-variant-ghost cn-button-size-icon-xs group/button cx-clear") aria(label: "Limpiar búsqueda") { Icon "lucide:x" } }
+      Button -> $onClear class("cn-button cn-button-variant-ghost cn-button-size-icon-xs group/button cx-clear") class("cx-off" when $value == "") data(trl: "Clear search") aria(label: "Clear search") { Icon "lucide:x" }
     }
     FieldBehavior(kind: "search", message: "")
   }

package/registry/input-otp.muten

@@ -1,6 +1,6 @@
-# InputOtp - the verification code: slots in two groups, a caret, «Verificando…», ok / bad, a resend countdown. The
+# InputOtp - the verification code: slots in two groups, a caret, “Verificando…”, ok / bad, a resend countdown. The
 # PAGE checks the code: onInput gets it when complete; answer with state ("ok" | "bad") and message.
-#   InputOtp(value: code, length: 6, hint: "Te lo enviamos al +57 300 123 4567", state: otpState, message: otpMsg, onInput: check)
+#   InputOtp(value: code, length: 6, hint: "We sent it to +57 300 123 4567", state: otpState, message: otpMsg, onInput: check)
 # shadcn-for-muten · Custom (kit values) · host JS input-otp.js.
 part InputOtp(value: text = "", length: number = 6, hint: text = "", state: text = "", message: text = "", resendIn: number = 30, onInput: action) {
   Custom InputOtp inputs(value: $value, length: $length, hint: $hint, state: $state, message: $message, resendIn: $resendIn) on(input: $onInput) class("cx-otp-host")

package/registry/input.muten

@@ -1,6 +1,6 @@
 # Input - a text field bound to a page text state. TextArea - the same for several lines (`Textarea` is muten's
 # primitive, so the part is TextArea).
-#   Input(value: name, placeholder: "Nombre o teléfono")      TextArea(value: notes, placeholder: "Notas para el equipo")
+#   Input(value: name, placeholder: "Name or phone")      TextArea(value: notes, placeholder: "Notes for the team")
 # size: default (32) | xl (44) | 2xl (52) · variant: default (a line) | filled (the soft field of a landing: muted fill, no line).
 #   For a whole form, set them once on a FieldSet around it instead (field.muten).
 # shadcn-for-muten · part · no deps · Nova (.cn-input, .cn-textarea).

package/registry/inspector.muten

@@ -3,11 +3,11 @@
 # whether each section is open.
 #   Inspector {
 #     InspectorSection(label: "Transform", open: tOpen, onToggle: toggleT) {
-#       InspectorRow(label: "Posición") { VectorField(…) }  InspectorRow(label: "Rotación") { NumberField(…) }
+#       InspectorRow(label: "Position") { VectorField(…) }  InspectorRow(label: "Rotation") { NumberField(…) }
 #     }
 #   }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-insp, the Accordion's fold).
-part Inspector(label: text = "Propiedades") { Stack class("cx-insp") data(slot: "inspector") aria(label: $label) { slot } }
+part Inspector(label: text = "Properties") { Stack class("cx-insp") data(slot: "inspector", trl: $label) aria(label: $label) { slot } }
 part InspectorSection(label: text, open: bool, onToggle: action) {
   Stack class("cx-insp-sec") data(open: $open) {
     Button -> $onToggle class("cx-insp-head") aria(expanded: $open) { Span "{$label}"  Icon "lucide:chevron-down" class("cx-acc-chev") }

package/registry/item.muten

@@ -1,13 +1,13 @@
 # Item - a row: media, content (title + description), actions, an optional footer. Lists are Items in an ItemGroup
 # with ItemSeparator between them.
 #   ItemGroup {
-#     Item { ItemMedia { Avatar(name: "Ana") }  ItemContent { ItemTitle(label: "Ana")  ItemDescription(label: "Corte · 9:00") }  ItemActions { Txt(value: "$25.000", variant: "strong") } }
+#     Item { ItemMedia { Avatar(name: "Ana") }  ItemContent { ItemTitle(label: "Ana")  ItemDescription(label: "Haircut · 9:00") }  ItemActions { Txt(value: "$25.000", variant: "strong") } }
 #     ItemSeparator()
 #   }
 # Item variant: default | outline | muted · size: default | sm | xs   ·   ItemMedia variant: default | icon | image
 # shadcn-for-muten · part · no deps · Nova (.cn-item).
 part Item(variant: text = "default", size: text = "default") { Stack class("cn-item cn-item-variant-{$variant} cn-item-size-{$size} group/item") data(slot: "item", size: $size) { slot } }
-part ItemGroup() { Stack class("cn-item-group group/item-group") data(slot: "item-group") aria(role: "list") { slot } }
+part ItemGroup() { Stack class("cn-item-group group/item-group") data(slot: "item-group") aria(role: "list") { slot  ListMotion() } }
 part ItemSeparator() { Stack class("cn-separator cn-separator-horizontal cn-item-separator") data(slot: "item-separator", orientation: "horizontal") aria(role: "separator") }
 part ItemMedia(variant: text = "default") { Stack class("cn-item-media cn-item-media-variant-{$variant}") data(slot: "item-media", variant: $variant) { slot } }
 part ItemContent() { Stack class("cn-item-content") data(slot: "item-content") { slot } }