@muten/shadcn 0.1.15 → 0.2.0

package/registry/tree-view.js

@@ -62,55 +62,68 @@ export function mount(el, inputs, handlers) {
   const seed = () => { for (const n of data) if (Array.isArray(n.children)) expanded.add('/' + n.name); if (selected) expandTo(data, ''); };
   seed();
 
+  // Built ONCE per data: a folder is its row plus a group that folds open and closed (grid rows 0fr ↔ 1fr, the
+  // accordion's 200 ms), its chevron turns, and picking a leaf only moves aria-selected. Nothing is rebuilt on a
+  // click, so the row under the pointer keeps its hover, the tree never jumps in height and keeps its width.
+  const CHEV = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>';
+  let root = null;
   const build = (nodes, container, depth, parent) => {
     for (const node of nodes) {
       const path = parent + '/' + node.name;
       const isFolder = Array.isArray(node.children);
       const id = idOf(node, path);
-      const row = document.createElement('button'); row.type = 'button'; row.className = 'cx-tree-row'; row.setAttribute('role', 'treeitem'); row.tabIndex = -1; row.dataset.path = path; if (isFolder) row.setAttribute('aria-expanded', expanded.has(path)); row.setAttribute('aria-level', depth + 1);
+      const row = document.createElement('button'); row.type = 'button'; row.className = 'cx-tree-row'; row.setAttribute('role', 'treeitem'); row.tabIndex = -1; row.dataset.path = path; row.dataset.id = id; row.setAttribute('aria-level', depth + 1);
       row.style.paddingLeft = (depth * 16 + 8) + 'px';
-      if (!isFolder && id === selected) { row.setAttribute('aria-selected', 'true'); row.tabIndex = 0; }
-      const chev = document.createElement('span'); chev.className = 'cx-tree-chev' + (isFolder ? '' : ' cx-tree-chev-none');
-      // lucide chevron-down (open) / chevron-right (closed)
-      chev.innerHTML = isFolder ? '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="' + (expanded.has(path) ? 'm6 9 6 6 6-6' : 'm9 18 6-6-6-6') + '"/></svg>' : '';
+      if (!isFolder) row.dataset.leaf = '';
+      const chev = document.createElement('span'); chev.className = 'cx-tree-chev' + (isFolder ? '' : ' cx-tree-chev-none'); chev.innerHTML = isFolder ? CHEV : '';
       const ic = document.createElement('span'); ic.className = 'cx-tree-ic'; ic.innerHTML = isFolder ? FOLDER : FILE;
       const label = document.createElement('span'); label.className = 'cx-tree-label'; label.textContent = node.name;
-      row.appendChild(chev); row.appendChild(ic); row.appendChild(label);
-      row.addEventListener('click', () => {
-        if (isFolder) { expanded.has(path) ? expanded.delete(path) : expanded.add(path); }   // folders: expand only
-        else { selected = id; if (handlers.select) handlers.select(node.value != null ? node.value : path); } // leaves emit
-        render();
-      });
+      row.append(chev, ic, label);
       container.appendChild(row);
-      if (isFolder && expanded.has(path)) build(node.children, container, depth + 1, path);
+      if (isFolder) {
+        row.setAttribute('aria-expanded', String(expanded.has(path)));
+        const fold = document.createElement('div'); fold.className = 'cx-tree-fold'; fold.setAttribute('role', 'group');
+        const inner = document.createElement('div'); inner.className = 'cx-tree-inner';
+        fold.appendChild(inner); container.appendChild(fold);
+        build(node.children, inner, depth + 1, path);
+      }
+      if (!isFolder) row.addEventListener('click', () => { selected = id; mark(); if (handlers.select) handlers.select(node.value != null ? node.value : path); });
+      else row.addEventListener('click', () => { expanded.has(path) ? expanded.delete(path) : expanded.add(path); row.setAttribute('aria-expanded', String(expanded.has(path))); visible(); });
     }
   };
+  // the rows a keyboard can reach: not inside a closed folder
+  const visible = () => { const all = [...root.querySelectorAll('.cx-tree-row')]; const shown = all.filter((r) => !r.parentElement.closest('.cx-tree-fold') || ![...ancestorsOf(r)].some((f) => f.previousElementSibling?.getAttribute('aria-expanded') !== 'true')); all.forEach((r) => { r.inert = !shown.includes(r); }); return shown; };
+  const ancestorsOf = function* (r) { let f = r.parentElement.closest('.cx-tree-fold'); while (f) { yield f; f = f.parentElement.closest('.cx-tree-fold'); } };
+  const mark = () => { root.querySelectorAll('.cx-tree-row').forEach((r) => { const on = r.hasAttribute('data-leaf') && r.dataset.id === selected; if (on) r.setAttribute('aria-selected', 'true'); else r.removeAttribute('aria-selected'); }); roving(); };
+  const roving = () => { const rows = visible(); const cur = rows.find((r) => r.dataset.path === focusPath) || rows.find((r) => r.getAttribute('aria-selected') === 'true') || rows[0]; rows.forEach((r) => { r.tabIndex = r === cur ? 0 : -1; }); return cur; };
   let focusPath = null;
   const render = () => {
-    el.innerHTML = ''; const root = document.createElement('div'); root.className = 'cx-tree'; root.setAttribute('role', 'tree'); root.setAttribute('aria-label', inputs.label || 'Archivos');
-    build(data, root, 0, ''); el.appendChild(root);
-    const rows = [...root.querySelectorAll('.cx-tree-row')];
-    if (!rows.some((r) => r.tabIndex === 0) && rows[0]) rows[0].tabIndex = 0;
-    if (focusPath) { const r = rows.find((x) => x.dataset.path === focusPath); if (r) { rows.forEach((x) => { x.tabIndex = -1; }); r.tabIndex = 0; r.focus({ preventScroll: true }); } }
+    el.innerHTML = ''; root = document.createElement('div'); root.className = 'cx-tree'; root.setAttribute('role', 'tree'); root.setAttribute('aria-label', inputs.label || 'Archivos');
+    build(data, root, 0, ''); el.appendChild(root); mark();
   };
   // keyboard (WAI tree): Up/Down move, Right opens a folder (or steps in), Left closes it (or goes to its parent), Enter/Space pick
   el.addEventListener('keydown', (e) => {
-    const rows = [...el.querySelectorAll('.cx-tree-row')], k = rows.indexOf(document.activeElement); if (k < 0) return;
+    const rows = visible(), k = rows.indexOf(document.activeElement); if (k < 0) return;
     const row = rows[k], folder = row.hasAttribute('aria-expanded'), open = row.getAttribute('aria-expanded') === 'true';
-    const go = (r) => { if (!r) return; rows.forEach((x) => { x.tabIndex = -1; }); r.tabIndex = 0; r.focus(); focusPath = r.dataset.path; };
+    const go = (r) => { if (!r) return; focusPath = r.dataset.path; roving(); r.focus(); };
     if (e.key === 'ArrowDown') { e.preventDefault(); go(rows[k + 1]); }
     else if (e.key === 'ArrowUp') { e.preventDefault(); go(rows[k - 1]); }
     else if (e.key === 'Home') { e.preventDefault(); go(rows[0]); }
     else if (e.key === 'End') { e.preventDefault(); go(rows[rows.length - 1]); }
-    else if (e.key === 'ArrowRight' && folder) { e.preventDefault(); if (!open) { focusPath = row.dataset.path; row.click(); } else go(rows[k + 1]); }
-    else if (e.key === 'ArrowLeft') { e.preventDefault(); if (folder && open) { focusPath = row.dataset.path; row.click(); } else { const parent = row.dataset.path.split('/').slice(0, -1).join('/'); go(rows.find((x) => x.dataset.path === parent)); } }
+    else if (e.key === 'ArrowRight' && folder) { e.preventDefault(); if (!open) row.click(); else go(rows[k + 1]); }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); if (folder && open) row.click(); else { const parent = row.dataset.path.split('/').slice(0, -1).join('/'); go(rows.find((x) => x.dataset.path === parent)); } }
   });
-  el.addEventListener('click', (e) => { const r = e.target.closest('.cx-tree-row'); if (r) focusPath = r.dataset.path; }, true);
+  el.addEventListener('click', (e) => { const r = e.target.closest('.cx-tree-row'); if (r) { focusPath = r.dataset.path; roving(); } }, true);
 
   render();
+  // new data rebuilds (once); a new `selected` only moves the mark and opens the folders down to it
+  let lastData = inputs.data;
   return (n) => {
-    data = toTree(n);
-    if (n.selected != null) { selected = String(n.selected); if (selected) expandTo(data, ''); } // re-open to the controlled leaf
-    render();
+    if (n.data !== lastData) { lastData = n.data; data = toTree(n); if (n.selected != null) selected = String(n.selected); if (selected) expandTo(data, ''); render(); return; }
+    if (n.selected != null && String(n.selected) !== selected) {
+      selected = String(n.selected); if (selected) expandTo(data, '');
+      root.querySelectorAll('.cx-tree-row[aria-expanded]').forEach((r) => r.setAttribute('aria-expanded', String(expanded.has(r.dataset.path))));
+      mark();
+    }
   };
 }

package/registry/tree-view.muten

@@ -4,6 +4,6 @@
 #   flat: a list of rows grouped by a key - groupKey makes the folders, labelKey the text, valueKey what a file emits.
 #     TreeView(data: @tiles, labelKey: "name", valueKey: "url", groupKey: "folder", selected: tileUrl, onSelect: pick)
 # selected highlights that file and opens the folders above it. shadcn-for-muten · Custom · kit.css (.cx-tree) · tree-view.js.
-part TreeView(data: list, labelKey: text = "", valueKey: text = "", groupKey: text = "", selected: text = "", label: text = "Archivos", onSelect: action) {
+part TreeView(data: list, labelKey: text = "", valueKey: text = "", groupKey: text = "", selected: text = "", label: text = "Files", onSelect: action) {
   Custom TreeView inputs(data: $data, labelKey: $labelKey, valueKey: $valueKey, groupKey: $groupKey, selected: $selected, label: $label) on(select: $onSelect) class("cx-tree-host")
 }

package/registry/veil.muten

@@ -1,6 +1,6 @@
 # Veil - a calm note over a card's content while it has nothing to show yet: the content stays behind, faded (ghost
 # rows, an empty chart), and a title and a line say what will appear. With `on` false it is the content alone.
-#   Veil(on: noSales, title: "Nada vendido todavía", text: "Lo que más te reserven y te compren aparece aquí.") { … }
+#   Veil(on: noSales, title: "Nothing sold yet", text: "What people book and buy from you most shows here.") { … }
 # StackedBars and Heatmap carry their own (empty / emptyTitle); use Veil for anything else.
 # shadcn-for-muten · part · no deps · kit.css (.cx-veil).
 part Veil(on: bool, title: text = "", text: text = "") {

package/registry/virtual-list.js

@@ -1,5 +1,5 @@
 // VirtualList (muten Custom) - only the visible rows exist in the DOM (kit/collections.js virtualList).
 export function mount(el, inputs) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => c.virtualList(el, inputs, core));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => core.relang(el, inputs, () => c.virtualList(el, inputs, core)));
   return () => {};
 }

package/registry/virtual-list.muten

@@ -1,6 +1,6 @@
 # VirtualList - thousands of rows, only the visible ones (+ a margin) in the DOM; arrows, Page Up/Down, Home/End.
-#   VirtualList(rows: @clients, label: "Clientes", jump: 5000)       rows: {title, subtitle, value}
+#   VirtualList(rows: @clients, label: "Customers", jump: 5000)       rows: {title, subtitle, value}
 # total > rows.length repeats the rows up to it (a long demo). shadcn-for-muten · Custom (kit collections).
-part VirtualList(rows: list, total: number = 0, rowHeight: number = 52, label: text = "Lista", jump: number = 0) {
+part VirtualList(rows: list, total: number = 0, rowHeight: number = 52, label: text = "List", jump: number = 0) {
   Custom VirtualList inputs(rows: $rows, total: $total, rowHeight: $rowHeight, label: $label, jump: $jump) class("cx-vl-host")
 }

package/registry/virtual-window.js

@@ -5,7 +5,7 @@
 // average from the rows on screen. Plain DOM, no kit.
 export function mount(el, inputs, on) {
   let count = Math.max(0, Number(inputs.count) || 0), guess = Number(inputs.item) || 72, over = Math.max(0, Number(inputs.over ?? 6));
-  // -1: the first range is always said, even «0,0» (nothing on screen yet), or the page keeps its own default
+  // -1: the first range is always said, even “0,0” (nothing on screen yet), or the page keeps its own default
   let from = -1, to = -1, step = 0, raf = 0, list = null, scroller = null, basePad = 0, wired = false;
   // the real height (plus gap, screen px) of every row already drawn, by its place in the list. Rows of very different
   // heights (a group of 2 next to one of 50) no longer move the scrollbar as they come and go: a row seen once keeps its
@@ -44,7 +44,7 @@ export function mount(el, inputs, on) {
     if (to > from && parts.length === to - from) {
       for (let i = 0; i < parts.length; i++) {
         const shown = parts[i].filter((n) => n.getClientRects().length);
-        // a row with nothing shown (an empty group) takes no room and no gap: it is 0, not «unknown»
+        // a row with nothing shown (an empty group) takes no room and no gap: it is 0, not “unknown”
         if (!shown.length) { sizes[from + i] = 0; continue; }
         const h = shown[shown.length - 1].getBoundingClientRect().bottom - shown[0].getBoundingClientRect().top;
         if (h > 0) sizes[from + i] = h + gap;
@@ -71,7 +71,7 @@ export function mount(el, inputs, on) {
     raf = 0; if (!list) return;
     gapNow = -1;
     // a list that is not on the page right now (a hidden panel, a closed tab: no box at all) keeps the rows it has. Its
-    // scroller measures 0 × 0, which read as «scrolled to the end» and drew EVERY row into a panel nobody could see
+    // scroller measures 0 × 0, which read as “scrolled to the end” and drew EVERY row into a panel nobody could see
     if (!list.getClientRects().length || (scroller && !scroller.clientHeight)) return;
     learn();
     const [top, bottom] = view();
@@ -100,7 +100,7 @@ export function mount(el, inputs, on) {
     list = el.parentElement; if (!list || wired) return; wired = true;
     for (let n = list.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) { const o = getComputedStyle(n).overflowY; if (o === 'auto' || o === 'scroll') { scroller = n; break; } }
     basePad = parseFloat(getComputedStyle(list).paddingBottom) || 0;
-    // the browser must not «hold» a row in place while rows above it come and go: that fights the window
+    // the browser must not “hold” a row in place while rows above it come and go: that fights the window
     list.style.overflowAnchor = 'none';
     // and a flex parent must not shrink the list to fit: its length IS the scrollbar's (the space for the rows not drawn)
     list.style.flexShrink = '0';

package/registry/virtual-window.muten

@@ -11,8 +11,8 @@
 #   The list stays the real typed list (rows keep their keys, fields and drag); only the `where` changes. In lib.ts:
 #     export function windowIds(rows: { id: string }[], seen: string): string { const [a, b] = String(seen).split(',').map(Number); return ' ' + (rows || []).slice(Number.isFinite(a) ? a : 0, Number.isFinite(b) ? b : 20).map((r) => r.id).join(' ') + ' '; }
 #     export function rowKey(id: string): string { return ` ${id} `; }
-#   (A sorted or filtered list: give windowIds the same list, in the same order, that the `each` draws. And «0,0» is a
-#   real answer, nothing on screen yet: never read a 0 as «missing».)
+#   (A sorted or filtered list: give windowIds the same list, in the same order, that the `each` draws. And “0,0” is a
+#   real answer, nothing on screen yet: never read a 0 as “missing”.)
 # It stands in for the rows above (its own height) and pads the list below, so the scrollbar keeps the whole length.
 # count = how many rows the list has (after any filter) · item = a first guess of one row's height in px (it learns the
 # real one) · over = rows kept beyond each edge (6). The list scrolls inside its nearest `overflow: auto` parent or the

package/registry/wordline.muten

@@ -1,6 +1,6 @@
 # WordLine - a line of words set as big type: who a product is for, what a shop does. The words sit in a soft grey,
 # joined by dots in ink; a Word with tone "strong" stands out in ink too. It wraps like text.
-#   WordLine(label: "Para quién es") { Word(label: "Barberías")  Word(label: "Clases", tone: "strong")  Word(label: "Spa") }
+#   WordLine(label: "Who it is for") { Word(label: "Barbershops")  Word(label: "Classes", tone: "strong")  Word(label: "Spa") }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-wordline).
 part WordLine(label: text = "") { Stack class("cx-wordline") aria(label: $label) { slot } }
 part Word(label: text, tone: text = "") { Span "{$label}" class("cx-word") data(tone: $tone) }

package/registry/zoom-control.muten

@@ -5,7 +5,7 @@
 part ZoomControl(value: number, onOut: action, onIn: action, onReset: action) {
   Stack class("cx-zoom") data(slot: "zoom-control") aria(role: "group", label: "Zoom") {
     Btn(variant: "ghost", size: "icon-sm", label: "Alejar", onClick: $onOut) { Icon "lucide:minus" }
-    Button "{$value} %" -> $onReset class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-zoom-value") data(name: "Volver a 100 %") aria(label: "Zoom {$value} %, volver a 100")   # its words carry $value: a part arg cannot interpolate an outer param, so it stays a Button
+    Button "{$value} %" -> $onReset class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-zoom-value") data(name: "Back to 100 %", trn: "Back to 100 %", trl: "Zoom {0} %, back to 100", tra: $value) aria(label: "Zoom {$value} %, back to 100")   # its words carry $value: a part arg cannot interpolate an outer param, so it stays a Button
     Btn(variant: "ghost", size: "icon-sm", label: "Acercar", onClick: $onIn) { Icon "lucide:plus" }
   }
 }

package/registry.json

@@ -483,7 +483,9 @@
     },
     {
       "name": "item",
-      "deps": [],
+      "deps": [
+        "list-motion"
+      ],
       "part": "Item",
       "file": "registry/item.muten",
       "description": "Item(variant, size) row with ItemMedia / ItemContent / ItemTitle / ItemDescription / ItemActions / ItemFooter; lists = ItemGroup + ItemSeparator."
@@ -519,6 +521,14 @@
       "component": "KitWidget",
       "description": "Host of the system kit widgets (Custom, kit core). Use the named parts."
     },
+    {
+      "name": "lang-scope",
+      "deps": [],
+      "part": "LangScope",
+      "file": "registry/lang-scope.muten",
+      "component": "LangScope",
+      "description": "LangScope - everything inside speaks this language (es | en …): the library's words, its dates and its Customs follow"
+    },
     {
       "name": "legal-doc",
       "deps": [],
@@ -533,6 +543,14 @@
       "file": "registry/link-btn.muten",
       "description": "A navigation link styled as a button. `LinkBtn(to: \"/signup\", variant: \"default\") { Span \"Get started\" }`."
     },
+    {
+      "name": "list-motion",
+      "deps": [],
+      "part": "ListMotion",
+      "file": "registry/list-motion.muten",
+      "component": "ListMotion",
+      "description": "Rows that open and close their place (Custom); ItemGroup carries it."
+    },
     {
       "name": "live-stack",
       "deps": [],
@@ -1109,7 +1127,9 @@
     },
     {
       "name": "timeline",
-      "deps": [],
+      "deps": [
+        "list-motion"
+      ],
       "part": "Timeline",
       "file": "registry/timeline.muten",
       "description": "Vertical event timeline: a dot on a connector line + title/time/description per item (parts: Timeline, TimelineItem)."