@muten/shadcn 0.1.15 → 0.2.1

package/registry/choice-list.muten

@@ -1,9 +1,9 @@
 # ChoiceList - Items you choose one of: a real radio group (arrows move and pick). The page owns the current value.
-#   ChoiceList(label: "Servicio") {
-#     ChoiceItem(value: "cut", current: service, onPick: pick, title: "Corte clásico", description: "30 min", price: "$25.000")
+#   ChoiceList(label: "Service") {
+#     ChoiceItem(value: "cut", current: service, onPick: pick, title: "Classic cut", description: "30 min", price: "$25.000")
 #   }
 # A picture before the text: put an ItemMedia in its slot and the radio moves to the end of the row.
-#   ChoiceItem(value: "shop", current: role, onPick: pickRole, title: "Tengo un local", description: "La gente viene a ti") {
+#   ChoiceItem(value: "shop", current: role, onPick: pickRole, title: "I have a venue", description: "People come to you") {
 #     ItemMedia(variant: "icon") { Icon "lucide:store" }
 #   }
 # shadcn-for-muten · part + Custom (RovingBehavior) · kit.css (.cx-radiogroup, .cx-radio).

package/registry/code.js

@@ -1,16 +1,22 @@
-// Code (muten Custom) - a code block: a bar with the language (or a title) and Copiar, then the code highlighted with
+// Code (muten Custom) - a code block: a bar with the language (or a title) and Copy, then the code highlighted with
 // the muten grammar (any other lang shows plain). inputs: code, lang, title. The highlighter is the shared
 // highlight.js, loaded lazily so the token rules live in one place.
 export function mount(el, inputs) {
   const code = String(inputs.code ?? ''), lang = String(inputs.lang || 'muten');
-  el.innerHTML = '<div class="cx-code-bar"><span></span><button type="button" class="cn-button cn-button-variant-outline cn-button-size-xs">Copiar</button></div><pre class="cx-code-pre"><code></code></pre>';
+  el.innerHTML = '<div class="cx-code-bar"><span></span><button type="button" class="cn-button cn-button-variant-outline cn-button-size-xs" data-tr="Copy">Copy</button></div><pre class="cx-code-pre"><code></code></pre>';
   el.querySelector('.cx-code-bar span').textContent = inputs.title || lang;
   const box = el.querySelector('code'), copy = el.querySelector('button');
+  // 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));
+  // (inputs.lang here is the code's language, “muten”, not a human one: the words follow the nearest lang)
+  import('@muten/shadcn/registry/kit/i18n.js').then((m) => { I = m; m.localizeTree(el); });
   box.textContent = code;
   if (lang === 'muten') import('@muten/shadcn/registry/highlight.js').then((m) => { box.innerHTML = m.highlight(code, lang); }).catch(() => {});
   copy.onclick = () => {
-    const done = (t) => { copy.textContent = t; setTimeout(() => { copy.textContent = 'Copiar'; }, 1400); };
-    try { navigator.clipboard.writeText(code).then(() => done('Copiado'), () => { getSelection().selectAllChildren(box); done('Selecciónalo'); }); } catch { getSelection().selectAllChildren(box); done('Selecciónalo'); }
+    // the new word comes in with the kit's swap (kit.css .cx-swap-in), the old one does not just blink away
+    const say = (k) => { copy.innerHTML = '<span class="cx-swap-in"></span>'; copy.firstChild.textContent = T(k); };
+    const done = (t) => { say(t); setTimeout(() => say('Copy'), 1400); };
+    try { navigator.clipboard.writeText(code).then(() => done('Copied'), () => { getSelection().selectAllChildren(box); done('Select it'); }); } catch { getSelection().selectAllChildren(box); done('Select it'); }
   };
   return (next) => { const c = String(next.code ?? ''); if (c === box.textContent) return; box.textContent = c; if (lang === 'muten') import('@muten/shadcn/registry/highlight.js').then((m) => { box.innerHTML = m.highlight(c, lang); }); };
 }

package/registry/collapsible.muten

@@ -1,8 +1,8 @@
 # Collapsible - one block that opens and closes: a trigger line and the content under it, folding to its exact
 # height (200 ms) while the chevron turns. The page owns the bool. For several stacked questions use Accordion.
 #   state { more = false : bool }   action toggleMore() mutates more { more.toggle() }
-#   Collapsible(label: "Más opciones", open: more, onToggle: toggleMore) { … }
-#   Collapsible(label: "3 pedidos entregados", hint: "Ver", open: done, onToggle: toggleDone) { … }
+#   Collapsible(label: "More options", open: more, onToggle: toggleMore) { … }
+#   Collapsible(label: "3 orders delivered", hint: "View", open: done, onToggle: toggleDone) { … }
 # shadcn-for-muten · part · no deps · kit.css (.cx-coll, the same fold as Accordion).
 part Collapsible(label: text, open: bool, onToggle: action, hint: text = "") {
   Stack class("cx-coll") data(slot: "collapsible", open: $open) {

package/registry/color-picker.js

@@ -1,22 +1,22 @@
-// ColorPicker (muten Custom) - Storio's one colour picker (solid; gradients and animations when allowed), as the
+// ColorPicker (muten Custom) - Storio's one color picker (solid; gradients and animations when allowed), as the
 // reference artifact mounts it. The value is paint text (a hex, or e.g. "linear 150 | #1a0f0a 0 | #c2410c 100 ~flow 14").
-// THE APP'S ONE COLOUR PICKER. Every place where somebody picks a colour uses this component (through the
+// THE APP'S ONE COLOUR PICKER. Every place where somebody picks a color uses this component (through the
 // ColorPick / PaintPick parts), so it looks and behaves the same everywhere and a fix lands everywhere.
 //
-// Closed it is a small swatch showing the real colour or gradient (plus a dot when it is animated). Open it
+// Closed it is a small swatch showing the real color or gradient (plus a dot when it is animated). Open it
 // is a popover (a bottom sheet on a phone) with:
-//   · a hue × lightness map where every colour is a draggable point, and a SATURATION slider for the
+//   · a hue × lightness map where every color is a draggable point, and a SATURATION slider for the
 //     selected point only (it is not opacity: the slider says which point it acts on);
 //   · the hex code, an eyedropper where the browser has one, and a trash can to delete a gradient stop;
 //   · OPTIONALLY, gradients: a bar of up to 4 stops (tap the bar to add one, drag a stop along it, drag it
 //     off the bar / press Delete / use the trash can to remove it), linear · radial · conic with an angle
 //     dial, and animations (flow, breathe, spin, hue) with a speed.
 //
-// Gradients are OPT-IN: not every colour in the app can be a gradient. `modes: "solid"` (the default) is a
-// plain colour picker and only ever emits a hex; `modes: "solid gradient"` adds the gradient controls, and
+// Gradients are OPT-IN: not every color in the app can be a gradient. `modes: "solid"` (the default) is a
+// plain color picker and only ever emits a hex; `modes: "solid gradient"` adds the gradient controls, and
 // `anims: "flow breathe spin hue"` lists which animations that place allows (none by default).
 //
-// The value is text, read and written by lib/paint.ts: a plain hex is a solid colour, a gradient is e.g.
+// The value is text, read and written by lib/paint.ts: a plain hex is a solid color, a gradient is e.g.
 // "linear 150 | #1a0f0a 0 | #c2410c 100 ~flow 14". Hosts paint with paintCss() from that same lib.
 //
 // DRAG IS LOCAL, RELEASE COMMITS. While a point or stop is dragged only this popover repaints (and an
@@ -27,7 +27,8 @@
 // The popover lives on <body> with fixed coordinates, so a scrolling or clipping panel never hides it, and
 // it opens from anywhere in the swatch's row (the swatch and the hex label next to it).
 export function mount(el, inputs, handlers) {
-  const en = String((inputs && inputs.lang) || document.documentElement.lang || 'es') === 'en';
+  // the language passed, else the nearest lang (the page's); English unless it is Spanish
+  const en = String((inputs && inputs.lang) || (el.closest && el.closest('[lang]')?.getAttribute('lang')) || document.documentElement.lang || 'en').slice(0, 2) !== 'es';
   const say = (es, english) => (en ? english : es);
   const modes = String((inputs && inputs.modes) || 'solid').split(/\s+/);
   const allowGradient = modes.includes('gradient');
@@ -53,7 +54,7 @@ export function mount(el, inputs, handlers) {
   const well = document.createElement('button');
   well.type = 'button';
   well.className = 'cp-well pk-well';
-  well.setAttribute('aria-label', (inputs && inputs.label) || say('Elegir un color', 'Pick a colour'));
+  well.setAttribute('aria-label', (inputs && inputs.label) || say('Elegir un color', 'Pick a color'));
   el.appendChild(well);
 
   let lib = null;          // lib/paint.ts, loaded on mount (a Custom cannot import at the top)
@@ -119,7 +120,7 @@ export function mount(el, inputs, handlers) {
     pop = document.createElement('div');
     pop.className = 'pk-pop';
     pop.setAttribute('role', 'dialog');
-    pop.setAttribute('aria-label', (inputs && inputs.label) || say('Color', 'Colour'));
+    pop.setAttribute('aria-label', (inputs && inputs.label) || say('Color', 'Color'));
     pop.addEventListener('click', onClick);
     pop.addEventListener('keydown', (event) => { if (event.key === 'Escape') close(); });
     (document.getElementById('lib') || document.body).append(scrim, pop); // inside the skinned area, so it wears the skin's tokens
@@ -144,7 +145,7 @@ export function mount(el, inputs, handlers) {
   // ── the popover ──
   // Lightness 95 (top) to 5 (bottom); pure black or white sit on the edge instead of past it.
   const Y = (light, height) => Math.max(0, Math.min(height, ((95 - light) / 90) * height));
-  // The INTENDED saturation of the selected colour lives on the slider, not in the hex: black at saturation 75
+  // The INTENDED saturation of the selected color lives on the slider, not in the hex: black at saturation 75
   // is still #000000, so reading it back from the hex would drop it to 0 and the map would stay grey.
   const intensity = () => {
     const slider = pop && pop.querySelector('[data-sat]');
@@ -161,15 +162,15 @@ export function mount(el, inputs, handlers) {
       html.push(`<div class="pk-seg" role="tablist"><button type="button" data-mode="solid" class="${gradient ? '' : 'on'}">${say('Sólido', 'Solid')}</button><button type="button" data-mode="gradient" class="${gradient ? 'on' : ''}">${say('Degradado', 'Gradient')}</button></div>`);
     }
     if (gradient) {
-      html.push(`<div class="pk-bar" style="background:${lib.barCss(v)}" aria-label="${say('Colores del degradado', 'Gradient colours')}">${v.stops.map((stop, i) => `<span class="pk-stop ${i === sel ? 'on' : ''}" data-stop="${i}" style="left:${stop.p}%;background:${stop.c}" tabindex="0" role="slider" aria-label="${say('Color', 'Colour')} ${i + 1}" aria-valuenow="${Math.round(stop.p)}"></span>`).join('')}</div>`);
+      html.push(`<div class="pk-bar" style="background:${lib.barCss(v)}" aria-label="${say('Colores del degradado', 'Gradient colors')}">${v.stops.map((stop, i) => `<span class="pk-stop ${i === sel ? 'on' : ''}" data-stop="${i}" style="left:${stop.p}%;background:${stop.c}" tabindex="0" role="slider" aria-label="${say('Color', 'Color')} ${i + 1}" aria-valuenow="${Math.round(stop.p)}"></span>`).join('')}</div>`);
     }
-    html.push(`<div class="pk-map" aria-label="${say('Mapa de tonos', 'Colour map')}"><canvas></canvas><svg>${gradient ? '<polyline class="pk-ln" fill="none" stroke="#fff" stroke-width="1.6" stroke-dasharray="3 4" opacity=".9"/>' : ''}</svg>${points.map((_, i) => `<span class="pk-pt ${i === sel ? 'on' : ''}">${gradient ? i + 1 : ''}</span>`).join('')}</div>`);
+    html.push(`<div class="pk-map" aria-label="${say('Mapa de tonos', 'Color map')}"><canvas></canvas><svg>${gradient ? '<polyline class="pk-ln" fill="none" stroke="#fff" stroke-width="1.6" stroke-dasharray="3 4" opacity=".9"/>' : ''}</svg>${points.map((_, i) => `<span class="pk-pt ${i === sel ? 'on' : ''}">${gradient ? i + 1 : ''}</span>`).join('')}</div>`);
     // Saturation of the SELECTED point, and it says so: in a gradient the label carries that point's number and
-    // colour, so nobody takes it for opacity or for the whole gradient.
+    // color, so nobody takes it for opacity or for the whole gradient.
     const satName = say('Saturación', 'Saturation');
     const satOf = gradient ? `${satName} ${sel + 1}` : satName;
     html.push(`<div class="pk-row"><span class="pk-lbl pk-satlbl">${gradient ? `<i class="pk-satdot" style="background:${current.c}">${sel + 1}</i>` : ''}${satName}</span><input class="pk-range" type="range" min="0" max="100" value="${hsl.s}" data-sat aria-label="${satOf}"></div>`);
-    html.push(`<div class="pk-row"><label class="pk-hex"><i style="background:${current.c}"></i><input value="${current.c}" maxlength="7" spellcheck="false" data-hex data-clear="on" aria-label="${say('Código del color', 'Colour code')}"></label>${'EyeDropper' in window ? `<button type="button" class="pk-ic" data-drop aria-label="${say('Tomar un color de la pantalla', 'Pick a colour from the screen')}">${ICON.drop}</button>` : ''}${gradient ? `<button type="button" class="pk-ic" data-del aria-label="${say('Quitar este color', 'Remove this colour')}" ${v.stops.length <= 2 ? 'disabled' : ''}>${ICON.trash}</button>` : ''}</div>`);
+    html.push(`<div class="pk-row"><label class="pk-hex"><i style="background:${current.c}"></i><input value="${current.c}" maxlength="7" spellcheck="false" data-hex data-clear="on" aria-label="${say('Código del color', 'Color code')}"></label>${'EyeDropper' in window ? `<button type="button" class="pk-ic" data-drop aria-label="${say('Tomar un color de la pantalla', 'Pick a color from the screen')}">${ICON.drop}</button>` : ''}${gradient ? `<button type="button" class="pk-ic" data-del aria-label="${say('Quitar este color', 'Remove this color')}" ${v.stops.length <= 2 ? 'disabled' : ''}>${ICON.trash}</button>` : ''}</div>`);
     if (gradient) {
       html.push(`<div class="pk-row">${['linear', 'radial', 'conic'].map((type) => `<button type="button" class="pk-ic ${v.type === type ? 'on' : ''}" data-type="${type}" aria-label="${TYPE_LABEL[type]}" aria-pressed="${v.type === type}">${ICON[type]}</button>`).join('')}<span class="pk-grow"></span>${v.type !== 'radial' ? `<span class="pk-dial" data-dial tabindex="0" role="slider" aria-label="${say('Ángulo', 'Angle')}" aria-valuenow="${Math.round(v.angle)}"><i style="transform:rotate(${v.angle + 180}deg)"></i></span><span class="pk-deg">${Math.round(v.angle)}°</span>` : ''}</div>`);
       if (allowedAnims.length > 1) {
@@ -179,12 +180,12 @@ export function mount(el, inputs, handlers) {
         }
       }
     }
-    // Ready-made gradients in a grid (all visible, nothing to scroll), and the recent colours in a row of their own.
+    // Ready-made gradients in a grid (all visible, nothing to scroll), and the recent colors in a row of their own.
     if (gradient) {
-      html.push(`<div class="pk-sep"></div><div class="pk-sw">${lib.PAIRS.map((pair) => { const name = en ? pair.name.en : pair.name.es; return `<button type="button" data-pair="${pair.colours.join(',')}" style="background:linear-gradient(135deg,${pair.colours.join(',')})" title="${name}" aria-label="${name}"></button>`; }).join('')}</div>`);
+      html.push(`<div class="pk-sep"></div><div class="pk-sw">${lib.PAIRS.map((pair) => { const name = en ? pair.name.en : pair.name.es; return `<button type="button" data-pair="${pair.colors.join(',')}" style="background:linear-gradient(135deg,${pair.colors.join(',')})" title="${name}" aria-label="${name}"></button>`; }).join('')}</div>`);
     }
     if (recent.length > 0) {
-      html.push(`${gradient ? '' : '<div class="pk-sep"></div>'}<div class="pk-recent"><span class="pk-lbl">${say('Recientes', 'Recent')}</span>${recent.map((colour) => `<button type="button" data-swatch="${colour}" style="background:${colour}" title="${colour}" aria-label="${colour}"></button>`).join('')}</div>`);
+      html.push(`${gradient ? '' : '<div class="pk-sep"></div>'}<div class="pk-recent"><span class="pk-lbl">${say('Recientes', 'Recent')}</span>${recent.map((color) => `<button type="button" data-swatch="${color}" style="background:${color}" title="${color}" aria-label="${color}"></button>`).join('')}</div>`);
     }
     pop.innerHTML = html.join('');
     pop.querySelector('[data-sat]').style.background = `linear-gradient(90deg, hsl(${hsl.h} 0% ${hsl.l}%), hsl(${hsl.h} 100% ${hsl.l}%))`;
@@ -212,7 +213,7 @@ export function mount(el, inputs, handlers) {
     canvas.height = height * dpr;
     const ctx = canvas.getContext('2d');
     ctx.scale(dpr, dpr);
-    // A grey shows the map in colour anyway: that is what touching it will give (see the pointerdown).
+    // A grey shows the map in color anyway: that is what touching it will give (see the pointerdown).
     const sat = intensity() < GREY ? COLOURFUL : intensity();
     for (let x = 0; x < width; x += 1) {
       const hue = (x / width) * 360;
@@ -264,9 +265,9 @@ export function mount(el, inputs, handlers) {
     paintPreviews();
     emit('input');
   }
-  function setColour(i, colour) {
-    v.stops[i].c = colour;
-    if (v.type === 'solid') v.stops.forEach((stop) => { stop.c = colour; });
+  function setColor(i, color) {
+    v.stops[i].c = color;
+    if (v.type === 'solid') v.stops.forEach((stop) => { stop.c = color; });
   }
   function selectStop(i) {
     sel = i;
@@ -277,7 +278,7 @@ export function mount(el, inputs, handlers) {
     live();
   }
   let recent = [];
-  function remember(colour) { recent = [colour, ...recent.filter((each) => each !== colour)].slice(0, 8); }
+  function remember(color) { recent = [color, ...recent.filter((each) => each !== color)].slice(0, 8); }
   function commit() { remember(v.stops[sel].c); emit('pick'); }
 
   function wire() {
@@ -291,23 +292,23 @@ export function mount(el, inputs, handlers) {
       if (dragging === null) return;
       const p = at(event);
       const sat = intensity();
-      setColour(dragging, lib.hslToHex(Math.round((p.x / p.w) * 360) % 360, sat, Math.round(95 - (p.y / p.h) * 90)));
+      setColor(dragging, lib.hslToHex(Math.round((p.x / p.w) * 360) % 360, sat, Math.round(95 - (p.y / p.h) * 90)));
       live();
     };
     map.addEventListener('pointerdown', (event) => {
       const p = at(event);
       const stops = v.type !== 'solid' ? v.stops : [v.stops[0]];
-      // Grab the point under the finger; on a tie (two stops of the same colour sit on the same spot) the
-      // one already selected wins, so a drag never jumps to a colour you did not choose.
+      // Grab the point under the finger; on a tie (two stops of the same color sit on the same spot) the
+      // one already selected wins, so a drag never jumps to a color you did not choose.
       const far = (i) => { const hsl = lib.hexToHsl(stops[i].c); return Math.hypot((hsl.h / 360) * p.w - p.x, Y(hsl.l, p.h) - p.y); };
       let nearest = sel;
       stops.forEach((_, i) => { if (far(i) < far(nearest) - 2) nearest = i; });
       if (far(nearest) < GRAB && nearest !== sel) selectStop(nearest);
       // A grey (black, white) has no saturation, so the map is drawn grey and dragging would only give greys.
-      // Touching the map means «I want a colour»: bring the saturation up first. The slider can take it back.
+      // Touching the map means “I want a color”: bring the saturation up first. The slider can take it back.
       const hsl = lib.hexToHsl(v.stops[sel].c);
       if (hsl.s < GREY) {
-        setColour(sel, lib.hslToHex(hsl.h, COLOURFUL, hsl.l));
+        setColor(sel, lib.hslToHex(hsl.h, COLOURFUL, hsl.l));
         pop.querySelector('[data-sat]').value = COLOURFUL;
         drawMap();
       }
@@ -334,7 +335,7 @@ export function mount(el, inputs, handlers) {
           moving = stop ? Number(stop.dataset.stop) : near;
           if (moving !== sel) selectStop(moving);
         } else if (v.stops.length < lib.MAX_STOPS) {
-          // The new stop takes the colour the gradient already has at that spot, so adding one never
+          // The new stop takes the color the gradient already has at that spot, so adding one never
           // changes how it looks until you move it, and its point does not sit on top of another one.
           const p = Math.round(((event.clientX - r.left) / r.width) * 100);
           const sorted = [...v.stops].sort((a, b) => a.p - b.p);
@@ -409,7 +410,7 @@ export function mount(el, inputs, handlers) {
     const sat = pop.querySelector('[data-sat]');
     sat.addEventListener('input', () => {
       const hsl = lib.hexToHsl(v.stops[sel].c);
-      setColour(sel, lib.hslToHex(hsl.h, Number(sat.value), hsl.l));
+      setColor(sel, lib.hslToHex(hsl.h, Number(sat.value), hsl.l));
       drawMap();
       live();
     });
@@ -418,7 +419,7 @@ export function mount(el, inputs, handlers) {
       const typed = event.target.value.trim();
       const hex = typed.startsWith('#') ? typed : `#${typed}`;
       if (!lib.isHex(hex)) return;
-      setColour(sel, hex.toLowerCase());
+      setColor(sel, hex.toLowerCase());
       drawMap();
       live();
       commit();
@@ -431,8 +432,8 @@ export function mount(el, inputs, handlers) {
     const data = button.dataset;
     if (data.mode) {
       if (data.mode === 'solid') {
-        const colour = v.stops[sel].c;
-        v = lib.parsePaint(colour);
+        const color = v.stops[sel].c;
+        v = lib.parsePaint(color);
       } else if (v.type === 'solid') {
         const hsl = lib.hexToHsl(v.stops[0].c);
         v = { ...v, type: 'linear', stops: [{ c: lib.hslToHex(hsl.h, hsl.s, Math.max(6, hsl.l - 28)), p: 0 }, { c: v.stops[0].c, p: 100 }] };
@@ -441,11 +442,11 @@ export function mount(el, inputs, handlers) {
     } else if (data.type) v.type = data.type;
     else if (data.anim) v.anim = data.anim;
     else if (data.speed) v.speed = Number(data.speed);
-    else if (data.pair) { const colours = data.pair.split(','); v.stops = colours.map((c, i) => ({ c, p: Math.round((i / (colours.length - 1)) * 100) })); sel = 0; }
-    else if (data.swatch) setColour(sel, data.swatch);
+    else if (data.pair) { const colors = data.pair.split(','); v.stops = colors.map((c, i) => ({ c, p: Math.round((i / (colors.length - 1)) * 100) })); sel = 0; }
+    else if (data.swatch) setColor(sel, data.swatch);
     else if ('del' in data) { if (v.stops.length <= 2) return; v.stops.splice(sel, 1); sel = 0; }
     else if ('drop' in data) {
-      try { const picked = await new window.EyeDropper().open(); setColour(sel, picked.sRGBHex.toLowerCase()); } catch { return; }
+      try { const picked = await new window.EyeDropper().open(); setColor(sel, picked.sRGBHex.toLowerCase()); } catch { return; }
     } else return;
     render();
     place();

package/registry/color-picker.muten

@@ -1,7 +1,7 @@
 # ColorPicker - Storio's one colour picker. Closed: a swatch with the real colour (or gradient). Open: a popover (a
 # sheet on a phone) to pick. modes "solid" (default) or "solid gradient"; anims lists the allowed animations.
 #   ColorPicker(value: brand, onInput: setBrand)
-#   ColorPicker(value: wall, modes: "solid gradient", anims: "flow breathe spin hue", label: "Fondo de la tienda", onInput: setWall)
+#   ColorPicker(value: wall, modes: "solid gradient", anims: "flow breathe spin hue", label: "Shop background", onInput: setWall)
 # The value is paint text (a hex, or "linear 150 | #1a0f0a 0 | #c2410c 100 ~flow 14"). shadcn-for-muten · Custom.
 part ColorPicker(value: text, modes: text = "solid", anims: text = "", label: text = "Color", onInput: action) {
   Custom ColorPicker inputs(value: $value, modes: $modes, anims: $anims, label: $label, lang: "es") on(input: $onInput, pick: $onInput) class("cx-cp-host")

package/registry/combobox.js

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

package/registry/combobox.muten

@@ -1,6 +1,6 @@
-# Combobox - type and the list filters (accent-insensitive) and marks the match; arrows, Enter, Esc; «Usar «…»» to
+# Combobox - type and the list filters (accent-insensitive) and marks the match; arrows, Enter, Esc; “Usar «…”» to
 # keep something that is not in the list (allowNew "off" to forbid it). options is comma-joined text.
-#   Combobox(label: "Ciudad", options: "Bogotá,Medellín,Cali", placeholder: "Escribe tu ciudad", onChange: setCity)
+#   Combobox(label: "City", options: "Bogotá,Medellín,Cali", placeholder: "Type your city", onChange: setCity)
 # shadcn-for-muten · Custom (kit menus) · host JS combobox.js.
 part Combobox(label: text = "", options: text, value: text = "", placeholder: text = "", allowNew: text = "on", hint: text = "on", onChange: action) {
   Custom Combobox inputs(label: $label, options: $options, value: $value, placeholder: $placeholder, allowNew: $allowNew, hint: $hint) on(change: $onChange) class("cx-cb-host")

package/registry/command-palette.muten

@@ -1,9 +1,9 @@
 # CommandPalette - the ⌘K search: a Command inside the adaptive modal. Open it with a Hotkey and a search button; an
 # item's action does its thing and closes the palette (the page sets open back to false).
 #   Hotkey(keys: "k", onPress: openPalette)
-#   CommandPalette(open: palette, onClose: closePalette, query: q) { CommandGroup(label: "Ir a") { CommandItem(label: "Agenda", onSelect: goAgenda) { Icon "lucide:calendar" } } }
+#   CommandPalette(open: palette, onClose: closePalette, query: q) { CommandGroup(label: "Go to") { CommandItem(label: "Schedule", onSelect: goAgenda) { Icon "lucide:calendar" } } }
 # shadcn-for-muten · part over Modal + Command.
-part CommandPalette(open: bool, onClose: action, query: text, placeholder: text = "Busca o salta a…", title: text = "Buscar") {
+part CommandPalette(open: bool, onClose: action, query: text, placeholder: text = "Search or jump to…", title: text = "Search") {
   Modal(open: $open, onClose: $onClose, title: $title, mode: "dialog") class("cx-palette") {
     Command(query: $query, placeholder: $placeholder) { slot }
   }

package/registry/command.js

@@ -1,5 +1,5 @@
 // CommandBehavior (muten Custom) - the Command's list: as you type it keeps the items whose label (or keywords)
-// holds what you wrote, accent-insensitive; a group with nothing left hides, and «empty» shows when nothing matches.
+// holds what you wrote, accent-insensitive; a group with nothing left hides, and “empty” shows when nothing matches.
 // The arrows move the highlight, Enter picks it, the pointer highlights what it rests on.
 export function mount(el) {
   const root = el.parentElement;

package/registry/command.muten

@@ -1,21 +1,21 @@
 # Command - a list you search and pick from with the keyboard (shadcn's cmdk). Typing keeps what matches, accent-
-# insensitive; arrows move, Enter picks; groups with nothing left hide; «empty» says when nothing matches. The page
+# insensitive; arrows move, Enter picks; groups with nothing left hide; “empty” says when nothing matches. The page
 # owns the query text (read it to search the server too); each item runs its own action.
-#   Command(query: q, placeholder: "Cliente, pedido o acción…") {
-#     CommandGroup(label: "Acciones") { CommandItem(label: "Nueva cita", shortcut: "N", onSelect: create) { Icon "lucide:plus" } }
+#   Command(query: q, placeholder: "Customer, order or action…") {
+#     CommandGroup(label: "Actions") { CommandItem(label: "New appointment", shortcut: "N", onSelect: create) { Icon "lucide:plus" } }
 #     CommandSeparator()
-#     CommandGroup(label: "Clientes") { CommandItem(label: "Laura Méndez", keywords: "300 112 4410", onSelect: openLaura) { Icon "lucide:user" } }
+#     CommandGroup(label: "Customers") { CommandItem(label: "Laura Méndez", keywords: "300 112 4410", onSelect: openLaura) { Icon "lucide:user" } }
 #   }
 # Inside a Modal it is the ⌘K palette: CommandPalette. shadcn-for-muten · parts + Custom (CommandBehavior) · Nova (.cn-command*).
-part Command(query: text, placeholder: text = "Busca…", empty: text = "Nada coincide.") {
+part Command(query: text, placeholder: text = "Search…", empty: text = "Nothing matches.") {
   Stack class("cn-command cx-command") data(slot: "command") {
     Stack class("cn-command-input-wrapper cx-command-input") data(slot: "command-input-wrapper") {
       Icon "lucide:search" class("cn-command-input-icon")
-      SearchField bind($query) "{$placeholder}" class("cn-command-input") data(slot: "command-input")
+      SearchField bind($query) "{$placeholder}" class("cn-command-input") data(slot: "command-input", trp: $placeholder)
     }
     Stack class("cn-command-list cx-command-list") data(slot: "command-list") aria(role: "listbox") {
       slot
-      Span "{$empty}" class("cn-command-empty cx-command-empty") data(slot: "command-empty")
+      Span "{$empty}" class("cn-command-empty cx-command-empty") data(slot: "command-empty", tr: $empty)
     }
     CommandBehavior()
   }

package/registry/context-menu.muten

@@ -1,9 +1,9 @@
 # ContextMenu - the menu of a zone, opened with a right click (or a long press on a phone, or the keyboard's menu key)
 # right where the pointer is. The zone and the menu go inside; the menu uses DropdownContent and its items.
 #   ContextMenu {
-#     ContextTrigger { Stack class("…") { Span "Clic derecho aquí" } }
-#     DropdownContent { DropdownItem(label: "Duplicar", onSelect: dup) { Icon "lucide:copy" } … }
+#     ContextTrigger { Stack class("…") { Span "Right click here" } }
+#     DropdownContent { DropdownItem(label: "Duplicate", onSelect: dup) { Icon "lucide:copy" } … }
 #   }
 # shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (dropdown classes) + kit.css.
 part ContextMenu() { Stack class("cx-ov cx-ov-zone") data(slot: "context-menu") { slot  OverlayBehavior(kind: "context") } }
-part ContextTrigger(label: text = "Menú de esta zona") { Stack class("cx-ov-trigger cx-ctx-zone") data(slot: "context-menu-trigger") aria(label: $label) { slot } }
+part ContextTrigger(label: text = "Menu for this area") { Stack class("cx-ov-trigger cx-ctx-zone") data(slot: "context-menu-trigger", trl: $label) aria(label: $label) { slot } }

package/registry/count-up.js

@@ -1,36 +1,38 @@
-// CountUp - a muten Custom that animates a formatted stat from 0 to its target the first time it scrolls into
-// view. inputs: { to } - the final display string (e.g. "2.4M", "94%", "120K", "58", "99.99%", "40ms", "12B").
-// It splits an optional prefix + number (decimals/commas ok) + suffix, animates the number, then restores the
-// EXACT target string so formatting like "2.4M" is preserved. Pure vanilla JS - this is muten's 20% escape for
-// something CSS can't do (animating a formatted number). Respects prefers-reduced-motion.
+// CountUp - a muten Custom: a formatted number whose digits ROLL to their value (each digit is a 0-9 column that
+// slides, the kit's --t-move rhythm; only the digits that change move). inputs: { to, roll }
+//   to    the display string, kept EXACTLY ("$4.906.000", "2.4M", "94%", "12,400", "40ms")
+//   roll  "view"   (default) rolls up from zeros the first time it scrolls into view - for a landing
+//         "change" stands still on the first paint and rolls each time `to` changes - for a stat on a dashboard
+// When `to` changes later (in either mode) it rolls from the old value to the new one. Screen readers get the plain
+// text; the columns are aria-hidden. Under prefers-reduced-motion the kit's tokens make the roll instant.
 export function mount(el, inputs) {
-  const target = String(inputs && inputs.to != null ? inputs.to : '0');
-  const m = target.match(/^([^\d]*)([\d.,]+)(.*)$/);
-  if (!m) { el.textContent = target; return; }
-  const prefix = m[1], numStr = m[2], suffix = m[3];
-  const end = parseFloat(numStr.replace(/,/g, ''));
-  const decimals = (numStr.split('.')[1] || '').length;
-  const grouped = numStr.indexOf(',') !== -1;
-  const fmt = (v) => prefix + (decimals ? v.toFixed(decimals) : (grouped ? Math.round(v).toLocaleString() : String(Math.round(v)))) + suffix;
+  const isDigit = (ch) => ch >= '0' && ch <= '9';
+  const reader = document.createElement('span'); reader.className = 'cx-roll-sr';
+  const face = document.createElement('span'); face.className = 'cx-roll'; face.setAttribute('aria-hidden', 'true');
+  el.replaceChildren(reader, face);
+  let shown = '';
 
-  const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  if (reduce || !('IntersectionObserver' in window) || !isFinite(end)) { el.textContent = target; return; }
+  const column = () => { const d = document.createElement('span'); d.className = 'cx-roll-d'; const s = document.createElement('span'); s.innerHTML = '<em>0</em><em>1</em><em>2</em><em>3</em><em>4</em><em>5</em><em>6</em><em>7</em><em>8</em><em>9</em>'; d.appendChild(s); return d; };
+  const glyph = (ch) => { const g = document.createElement('span'); g.className = 'cx-roll-s'; g.textContent = ch; return g; };
+  const setDigit = (d, n, animate) => { const s = d.firstChild; if (!animate) { s.style.transition = 'none'; s.style.translate = `0 -${n}em`; void s.offsetHeight; s.style.transition = ''; } else s.style.translate = `0 -${n}em`; };
 
-  el.textContent = fmt(0);
-  let started = false;
-  const run = () => {
-    if (started) return; started = true;
-    const dur = 1400, t0 = performance.now();
-    const tick = (now) => {
-      const p = Math.min(1, (now - t0) / dur);
-      const eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
-      if (p < 1) { el.textContent = fmt(end * eased); requestAnimationFrame(tick); }
-      else el.textContent = target; // land on the exact target (keeps "2.4M"/"99.99%" formatting)
-    };
-    requestAnimationFrame(tick);
+  // same shape (same length, digits and signs in the same places): reuse the columns so each digit rolls from where
+  // it is; another shape: rebuild, the digits starting from 0 when animating (or from their value when not)
+  const paint = (text, animate) => {
+    reader.textContent = text;
+    const same = shown.length === text.length && [...text].every((ch, k) => isDigit(ch) === isDigit(shown[k]) && (isDigit(ch) || ch === shown[k]));
+    if (!same) { face.replaceChildren(...[...text].map((ch) => (isDigit(ch) ? column() : glyph(ch)))); [...face.children].forEach((c, k) => { if (isDigit(text[k])) setDigit(c, animate ? 0 : +text[k], false); }); }
+    if (animate) requestAnimationFrame(() => requestAnimationFrame(() => [...face.children].forEach((c, k) => { if (isDigit(text[k])) setDigit(c, +text[k], true); })));
+    else [...face.children].forEach((c, k) => { if (isDigit(text[k])) setDigit(c, +text[k], false); });
+    shown = text;
   };
-  const io = new IntersectionObserver((entries) => {
-    for (const e of entries) if (e.isIntersecting) { run(); io.disconnect(); }
-  }, { threshold: 0.5 });
-  io.observe(el);
+
+  const first = String(inputs?.to ?? '0');
+  if (inputs?.roll === 'change' || !('IntersectionObserver' in window)) paint(first, false);
+  else {
+    paint(first.replace(/\d/g, '0'), false); reader.textContent = first;
+    const io = new IntersectionObserver((entries) => { if (entries.some((e) => e.isIntersecting)) { io.disconnect(); paint(first, true); } }, { threshold: 0.5 });
+    io.observe(el);
+  }
+  return (next) => { const t = String(next?.to ?? '0'); if (t !== shown) paint(t, true); };
 }

package/registry/count-up.muten

@@ -1,5 +1,7 @@
-# CountUp - a number that counts up from 0 the first time it comes into view, keeping its exact format («2.4M»,
-# «94 %», «12,400», «$1.2M»). It takes the size of what holds it. Off with reduced motion.
-#   Stat(label: "citas al mes") { CountUp(to: "12,400") }
+# CountUp - a number whose digits roll to their value, keeping its exact format (“2.4M”, “94 %”, “12,400”, “$1.2M”).
+# roll "view" (default): rolls up from zeros the first time it comes into view (a landing). roll "change": still on the
+# first paint, rolls whenever `to` changes (a dashboard; StatCard uses it for its value). It takes the size of what
+# holds it; instant with reduced motion.
+#   Stat(label: "appointments a month") { CountUp(to: "12,400") }      StatCard(…, value: total)  → rolls when total changes
 # shadcn-for-muten · Custom · host JS count-up.js.
-part CountUp(to: text) { Custom CountUp inputs(to: $to) class("cx-countup") }
+part CountUp(to: text, roll: text = "view") { Custom CountUp inputs(to: $to, roll: $roll) class("cx-countup") }

package/registry/date-field.js

@@ -1,5 +1,5 @@
 // DateField (muten Custom) - the kit's dateField (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.dateField(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.dateField(el, inputs, core, on)));
   return () => {};
 }

package/registry/date-field.muten

@@ -1,7 +1,7 @@
 # DateField - a field-like button with the long date; it opens the day / month / year wheels in the adaptive modal.
-# min "today" turns the past off (the wheel greys those days and «Listo» waits).
-#   DateField(label: "Fecha", value: "today", min: "today", onChange: setDay)      → "yyyy-mm-dd"
+# min "today" turns the past off (the wheel greys those days and “Done” waits).
+#   DateField(label: "Date", value: "today", min: "today", onChange: setDay)      → "yyyy-mm-dd"
 # shadcn-for-muten · Custom (kit dates) · host JS date-field.js.
-part DateField(label: text = "Fecha", value: text = "today", min: text = "", years: number = 2, onChange: action) {
+part DateField(label: text = "Date", value: text = "today", min: text = "", years: number = 2, onChange: action) {
   Custom DateField inputs(label: $label, value: $value, min: $min, years: $years) on(change: $onChange) class("cx-df-host")
 }

package/registry/day-plan.muten

@@ -1,11 +1,11 @@
 # DayPlan - the owner's day as a list in order: hour, a dot on a line, who and what, a tag on the right. The hours
 # already gone are faded, a red line says what time it is now, and one free slot can fill itself in a loop (a new
-# booking drops in with a green ring and the count steps up) - a picture of «your day keeps itself», not the Agenda.
-#   DayPlan(title: "Hoy", date: "viernes 9 de octubre", count: "5 citas", countNext: "6 citas") {
-#     DayPlanRow(time: "9:00 AM", title: "Pedro Ruiz", detail: "Corte clásico", tag: "Atendido", state: "done")
+# booking drops in with a green ring and the count steps up) - a picture of “your day keeps itself”, not the Agenda.
+#   DayPlan(title: "Today", date: "Friday, October 9", count: "5 appointments", countNext: "6 appointments") {
+#     DayPlanRow(time: "9:00 AM", title: "Pedro Ruiz", detail: "Classic cut", tag: "Served", state: "done")
 #     DayPlanNow(time: "3:12 PM")
-#     DayPlanRow(time: "3:30 PM", title: "Laura Gómez", detail: "Corte y barba", tag: "Confirmada", tone: "ok")
-#     DayPlanRow(time: "4:30 PM", title: "Carla Méndez", detail: "Corte clásico", tag: "La agendó tu asistente", tone: "ai", state: "fill", free: "Libre")
+#     DayPlanRow(time: "3:30 PM", title: "Laura Gómez", detail: "Cut and beard", tag: "Confirmed", tone: "ok")
+#     DayPlanRow(time: "4:30 PM", title: "Carla Méndez", detail: "Classic cut", tag: "Your assistant booked it", tone: "ai", state: "fill", free: "Free")
 #   }
 # state: "" | done (gone, faded) | fill (shows `free` dashed, then fills; one per plan). tone: "" | ok | ai.
 # countNext: the count after the fill (empty = no count change). shadcn-for-muten · part · no deps · kit.css (.cx-dp).

package/registry/device-frame.muten

@@ -3,11 +3,11 @@
 # dots and, when given, the address). Put an Image, or any content, in the slot; an Image fills the screen from the top.
 # height crops it (the whole device fades out at the bottom), so a tall screenshot can sit beside a short text. Every
 # measure of the phone follows its width, so it keeps the same proportions at any size. ChatPlay wears this same phone.
-#   DeviceFrame { Image "~/shots/store.png" alt("Tu tienda en un teléfono") }
+#   DeviceFrame { Image "~/shots/store.png" alt("Your shop on a phone") }
 #   DeviceFrame(island: "on", width: "300px") { Image "~/shots/app.png" alt("La app") }
 #   DeviceFrame(kind: "browser", url: "storio.ink/elroble", height: "420px") { Image "~/shots/panel.png" alt("Tu panel") }
-#   DeviceFrame(href: "/aurora", label: "Estudio Aurora, una tienda de muestra", shot: "/stores/aurora.webp")
-# width: empty (a phone is 280 px, a browser fills its column) or a width like «320px» or «100%». island: "on" draws the
+#   DeviceFrame(href: "/aurora", label: "Estudio Aurora, a sample shop", shot: "/stores/aurora.webp")
+# width: empty (a phone is 280 px, a browser fills its column) or a width like “320px” or “100%”. island: "on" draws the
 # island (leave it off over a page that has its own top bar). kind: phone | browser.
 # href: the whole device is a link there (it lifts on hover); label says where, for a screen reader.
 # shot: a picture of the screen (390 × 844 at twice the pixels) laid as its background. Unlike an Image it is not

package/registry/dialog.muten

@@ -1,6 +1,6 @@
 # Dialog - a window in the middle of the screen for one task (edit, confirm a detail), on every width. It is the
 # adaptive Modal forced to dialog; on a phone prefer Modal (it becomes a Drawer). The page owns open.
-#   Dialog(open: editing, onClose: done, title: "Editar servicio", description: "…") { … ModalFooter { … } }
+#   Dialog(open: editing, onClose: done, title: "Edit service", description: "…") { … ModalFooter { … } }
 # shadcn-for-muten · part over Modal.
 part Dialog(open: bool, onClose: action, title: text, description: text = "", size: text = "") {
   Modal(open: $open, onClose: $onClose, title: $title, description: $description, mode: "dialog", size: $size) { slot }

package/registry/dirty-bar.js

@@ -1,5 +1,5 @@
-// DirtyBar (muten Custom) - the kit's «unsaved changes» bar over the form it sits in (kit/core.js kit.dirtyBar).
-// «Descartar» restores what muten owns: inputs get their saved value (and an input event, so muten's bind follows),
+// DirtyBar (muten Custom) - the kit's “unsaved changes” bar over the form it sits in (kit/core.js kit.dirtyBar).
+// “Descartar” restores what muten owns: inputs get their saved value (and an input event, so muten's bind follows),
 // switches that moved are toggled back by a click (so the page's action runs). The weekly hours restore themselves.
 export function mount(el, inputs, on) {
   import('@muten/shadcn/registry/kit/core.js').then(({ kit }) => {

package/registry/dirty-bar.muten

@@ -1,7 +1,7 @@
-# DirtyBar - «Tienes cambios sin guardar»: a floating footer of the form it sits in. It appears when any field,
-# switch or time differs from the last save, «Descartar» puts everything back, «Guardar» saves in three moments.
+# DirtyBar - “You have unsaved changes”: a floating footer of the form it sits in. It appears when any field,
+# switch or time differs from the last save, “Descartar” puts everything back, “Save” saves in three moments.
 # Put it as the LAST child of a SettingsForm.
-#   SettingsForm { SettingsSection(title: "Tu negocio", description: "…") { Field(…) { Input(…) } }  DirtyBar(onSave: save) }
+#   SettingsForm { SettingsSection(title: "Your business", description: "…") { Field(…) { Input(…) } }  DirtyBar(onSave: save) }
 # shadcn-for-muten · part + Custom (DirtyBar, kit core) · kit.css (.cx-dirty, .cx-set-form).
 part SettingsForm() { Stack class("cx-set-form") { slot } }
 part SettingsSection(title: text, description: text = "") {

package/registry/drawer.muten

@@ -1,6 +1,6 @@
 # Drawer - a sheet that rises from the bottom, with a handle you drag down to close (the phone's way), on every width.
 # It is the adaptive Modal forced to drawer. The page owns open.
-#   Drawer(open: picking, onClose: done, title: "Elige la hora") { … ModalFooter { … } }
+#   Drawer(open: picking, onClose: done, title: "Pick the time") { … ModalFooter { … } }
 # shadcn-for-muten · part over Modal.
 part Drawer(open: bool, onClose: action, title: text = "", description: text = "", size: text = "") {
   Modal(open: $open, onClose: $onClose, title: $title, description: $description, mode: "drawer", size: $size) { slot }

package/registry/dropdown-menu.muten

@@ -1,13 +1,13 @@
 # DropdownMenu - a list of actions that opens from a button (shadcn Nova). Arrows, Home/End and the first letter move;
 # Enter picks; a picked action closes it, a check or radio item stays open. Trigger and content go inside:
 #   DropdownMenu {
-#     DropdownTrigger { TriggerBtn { Span "Opciones"  Icon "lucide:chevron-down" } }
+#     DropdownTrigger { TriggerBtn { Span "Options"  Icon "lucide:chevron-down" } }
 #     DropdownContent(align: "start") {
-#       DropdownLabel(label: "Pedido")
-#       DropdownItem(label: "Editar", shortcut: "⌘E", onSelect: edit) { Icon "lucide:pencil" }
+#       DropdownLabel(label: "Order")
+#       DropdownItem(label: "Edit", shortcut: "⌘E", onSelect: edit) { Icon "lucide:pencil" }
 #       DropdownSeparator()
 #       DropdownCheckItem(label: "Avisarme", on: notify, onToggle: toggleNotify)
-#       DropdownItem(label: "Eliminar", tone: "destructive", onSelect: remove) { Icon "lucide:trash-2" }
+#       DropdownItem(label: "Delete", tone: "destructive", onSelect: remove) { Icon "lucide:trash-2" }
 #     }
 #   }
 # The same items and content serve ContextMenu and Menubar. shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova.