@muten/shadcn 0.0.5 → 0.1.0

package/registry/tabs-behavior.muten

@@ -0,0 +1,3 @@
+# TabsBehavior - the sliding indicator and the arrow keys of a Tabs / SegmentedControl. Used by them; never by hand.
+# shadcn-for-muten · Custom · host JS is tabs-behavior.js.
+part TabsBehavior() { Custom TabsBehavior class("cx-tabs-behavior") }

package/registry/tabs.muten

@@ -1,12 +1,21 @@
-# Tabs - a tab bar + panels. The PAGE owns a `text` state (the active tab) + an action that sets it:
-#   state { tab = "account" : text }   action setTab(v: text) mutates tab { tab.set(v) }
-#   TabsList { TabsTrigger(value: "account", current: tab, label: "Account", onSelect: setTab) … }
-#   TabsContent(value: "account", current: tab) { … }
-# shadcn-for-muten · part · no deps · styles via the semantic .tabs* classes in globals.css.
-part TabsList() { Stack class("tabs-list") { slot } }
-part TabsTrigger(value: text, current: text, label: text, onSelect: action) {
-  Button "{$label}" -> $onSelect($value) aria(selected: $value == $current) class("tabs-trigger", "tabs-trigger-active" when $value == $current)
+# Tabs - the indicator slides from one tab to the next (260 ms). variant "" = segmented (a pill on a muted track),
+# "line" = an underline with a count per tab that scrolls sideways on a phone. Arrows, Home and End move between tabs.
+# The page owns the current value; TabsContent shows the panel of the current one.
+#   Tabs(label: "Periodo") { TabsTrigger(value: "day", current: period, label: "Hoy", onSelect: setPeriod)  TabsTrigger(value: "week", current: period, label: "Semana", onSelect: setPeriod) }
+#   Tabs(label: "Pedidos", variant: "line") { TabsTrigger(value: "new", current: lane, label: "Nuevos", count: "4", onSelect: setLane) … }
+#   TabsContent(value: "new", current: lane) { … }
+# shadcn-for-muten · part + Custom (TabsBehavior: the indicator + keys) · kit.css (.cx-tabs).
+part Tabs(label: text, variant: text = "") {
+  Stack class("cx-tabs {$variant}") data(slot: "tabs") aria(role: "tablist", label: $label) {
+    slot
+    TabsBehavior()
+  }
 }
-part TabsContent(value: text, current: text) {
-  Stack class("tabs-content", "hidden" when $value != $current) { slot }
+part TabsList() { Stack class("cx-tabs") data(slot: "tabs") aria(role: "tablist") { slot  TabsBehavior() } }
+part TabsTrigger(value: text, current: text, label: text, onSelect: action, count: text = "") {
+  Button -> $onSelect($value) class("cn-button cn-button-variant-ghost cn-button-size-sm cx-tab") aria(role: "tab", selected: $value == $current) {
+    Span "{$label}"
+    when $count != "" { Span "{$count}" class("cx-count") }
+  }
 }
+part TabsContent(value: text, current: text) { Stack class("cx-tab-panel", "hidden" when $value != $current) aria(role: "tabpanel") { slot } }

package/registry/tag-input.js

@@ -1,28 +1,5 @@
-// TagInput host (muten Custom). inputs: { value (comma-joined), placeholder }. handlers: { change(commaJoined) }.
-// Type + Enter adds a chip; the x or Backspace (on an empty field) removes one. The page owns a comma-joined text.
-export function mount(el, inputs, handlers) {
-  const parse = (v) => String(v == null ? '' : v).split(',').map((s) => s.trim()).filter(Boolean);
-  let tags = parse(inputs.value);
-  const input = document.createElement('input'); input.className = 'tag-input-field';
-  input.placeholder = inputs.placeholder == null ? 'Add tag…' : String(inputs.placeholder);
-
-  const emit = () => { if (handlers.change) handlers.change(tags.join(',')); render(); };
-  const render = () => {
-    el.innerHTML = '';
-    for (const t of tags) {
-      const chip = document.createElement('span'); chip.className = 'tag-chip'; chip.textContent = t;
-      const x = document.createElement('span'); x.className = 'tag-chip-x'; x.innerHTML = '<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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'; // lucide x
-      x.addEventListener('click', (e) => { e.stopPropagation(); tags = tags.filter((z) => z !== t); emit(); });
-      chip.appendChild(x); el.appendChild(chip);
-    }
-    el.appendChild(input);
-  };
-  input.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter' && input.value.trim()) { e.preventDefault(); const v = input.value.trim(); if (!tags.includes(v)) tags.push(v); input.value = ''; emit(); }
-    else if (e.key === 'Backspace' && !input.value && tags.length) { tags.pop(); emit(); }
-  });
-  el.addEventListener('click', () => input.focus());
-
-  render();
-  return (n) => { tags = parse(n.value); render(); };
+// TagInput (muten Custom) - the kit's tags field (kit/collections.js tagInput): chips in/out, height eases, a cap.
+export function mount(el, inputs, on) {
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => c.tagInput(el, { ...inputs, tags: inputs.value ?? inputs.tags }, core, on));
+  return () => {};
 }

package/registry/tag-input.muten

@@ -1,7 +1,7 @@
-# Tag Input - chips you add by typing + Enter, remove with x / Backspace. The PAGE owns a comma-joined text:
-#   state { tags = "sprite,enemy" : text }   action setTags(v: text) mutates tags { tags.set(v) }
-#   TagInput(value: tags, placeholder: "Add tag…", onChange: setTags)
-# shadcn-for-muten · Custom · host JS is src/components/TagInput.js (copied by `muten add tag-input`).
-part TagInput(value: text, placeholder: text, onChange: action) {
-  Custom TagInput inputs(value: $value, placeholder: $placeholder) on(change: $onChange) class("tag-input")
+# TagInput - tags as chips: Enter or a comma adds, Backspace marks then removes the last, a repeated tag flashes the
+# one already there, suggestions to tap, a cap with its count. The value is comma-joined text.
+#   TagInput(value: tags, label: "Etiquetas del servicio", suggestions: "Fade,Navaja,Niños", max: 8, hint: "Ayudan a que te encuentren.", onChange: setTags)
+# shadcn-for-muten · Custom (kit collections) · host JS tag-input.js.
+part TagInput(value: text, placeholder: text = "", label: text = "Etiquetas", suggestions: text = "", max: number = 8, hint: text = "", onChange: action) {
+  Custom TagInput inputs(value: $value, placeholder: $placeholder, label: $label, suggestions: $suggestions, max: $max, hint: $hint) on(change: $onChange) class("cx-tags-host")
 }

package/registry/text.muten

@@ -0,0 +1,7 @@
+# Text (part name Txt - `Text` is a muten primitive) - the one text atom, in a few roles. Everything that shows words
+# in the kit is built from it, so a role changes in one place.
+#   Txt(value: "Corte clásico", variant: "heading")
+#   Txt(value: "{count} citas", variant: "muted")
+# variant: body | title | heading | strong | label | muted | caption   (default: body)
+# shadcn-for-muten · part · no deps · styled by kit.css (.cx-text).
+part Txt(value: text, variant: text = "body") { Span "{$value}" class("cx-text") data(slot: "text", variant: $variant) }

package/registry/time-field.js

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

package/registry/time-field.muten

@@ -0,0 +1,6 @@
+# TimeField - a field-like button with the time (and mañana/tarde); it opens the hour / minute wheels.
+#   TimeField(label: "Hora", value: "10:30", from: 9, to: 19, step: 15, onChange: setTime)      → "HH:MM"
+# shadcn-for-muten · Custom (kit dates) · host JS time-field.js.
+part TimeField(label: text = "Hora", value: text = "", from: number = 9, to: number = 19, step: number = 15, onChange: action) {
+  Custom TimeField inputs(label: $label, value: $value, from: $from, to: $to, step: $step) on(change: $onChange) class("cx-tf-host")
+}

package/registry/timeline.muten

@@ -1,16 +1,16 @@
-# Timeline - a vertical list of events, each a dot on a connector line + content (title, time, description).
-#   state { events = query events : list<Event> }
-#   Timeline { each events as e { TimelineItem(title: e.title, time: e.time, desc: e.desc) } }
-# Own it with `muten add timeline`.
-# shadcn-for-muten · part · no deps · styles via .timeline / .timeline-* in globals.css.
-part Timeline() { Stack class("timeline") { slot } }
-part TimelineItem(title: text, time: text, desc: text) {
-  Stack class("timeline-item") {
-    Stack class("timeline-dot")
-    Stack class("timeline-content") {
-      Span "{$time}" class("timeline-time")
-      Span "{$title}" class("timeline-title")
-      Span "{$desc}" class("timeline-desc")
-    }
+# Timeline - what happened, in order: a dot and a line join the events; the last one (where things stand now) is
+# marked. Each event has what happened, when, and an optional detail.
+#   Timeline(label: "Historial del pedido") {
+#     TimelineItem(title: "Pedido recibido", time: "hoy · 10:38")
+#     TimelineItem(title: "Esperando tu revisión", time: "ahora", state: "now")
+#   }
+# state: "" (past) | now (where it stands) | next (still to come, faded).
+# shadcn-for-muten · part · no deps · kit.css (.cx-timeline).
+part Timeline(label: text = "") { Stack class("cx-timeline cx-tl") aria(role: "list", label: $label) { slot } }
+part TimelineItem(title: text, time: text = "", description: text = "", state: text = "") {
+  Stack class("cx-tl-item") data(state: $state) aria(role: "listitem") {
+    Span "{$title}" class("cx-text cx-tl-title") data(slot: "text", variant: "body")
+    Text "{$description}" class("cx-tl-desc")
+    Span "{$time}" class("cx-text") data(slot: "text", variant: "caption")
   }
 }

package/registry/toaster.js

@@ -1,25 +1,37 @@
-// Toaster host component (muten Custom). inputs: { trigger, title, description, variant, duration }.
-// The page bumps `trigger` (a counter) to fire a toast with the current title/description; the host shows it,
-// slides it in, and auto-dismisses it (click to dismiss early). No id bookkeeping on the page.
-export function mount(el, inputs, handlers) {
-  let last = Number(inputs.trigger ?? 0);
-
-  const show = (title, description, variant, duration) => {
-    const node = document.createElement('div');
-    node.className = 'toast' + (variant === 'destructive' ? ' toast-destructive' : '');
-    const t = document.createElement('div'); t.className = 'toast-title'; t.textContent = title || 'Notification';
-    node.appendChild(t);
-    if (description) { const d = document.createElement('div'); d.className = 'toast-description'; d.textContent = description; node.appendChild(d); }
-    el.appendChild(node);
-    requestAnimationFrame(() => node.classList.add('toast-show'));
-    const remove = () => { node.classList.remove('toast-show'); setTimeout(() => node.remove(), 200); };
-    const timer = setTimeout(remove, Number(duration ?? 3500));
-    node.addEventListener('click', () => { clearTimeout(timer); remove(); });
+// Toaster (muten Custom) - shadcn's Sonner stack, from the reference artifact: toasts pile at the bottom right, the
+// newest in front and up to three peeking behind; hovering the pile fans them out and pauses their timers; each one
+// leaves on its own after `duration` ms or with its ×. inputs: trigger (bump it to show one), title, description,
+// action (a button label, optional), duration. handlers: action() when its button is tapped.
+export function mount(el, inputs, on) {
+  const viewport = document.createElement('section'); viewport.className = 'pg-toasts'; viewport.setAttribute('aria-label', 'Avisos'); viewport.setAttribute('aria-live', 'polite');
+  document.body.appendChild(viewport);
+  const toasts = [];
+  let last = Number(inputs.trigger) || 0;
+  const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  const layout = () => {
+    let off = 0; const frontH = toasts[0] ? toasts[0].h : 0;
+    toasts.forEach((t, i) => {
+      t.el.style.setProperty('--i', i); t.el.style.setProperty('--h', t.h + 'px'); t.el.style.setProperty('--front-h', frontH + 'px'); t.el.style.setProperty('--off', off + 'px');
+      off += t.h;
+      if (i > 0) t.el.dataset.behind = ''; else delete t.el.dataset.behind;
+      if (i >= 3) t.el.dataset.limited = ''; else delete t.el.dataset.limited;
+    });
   };
-
-  // The effect re-runs this whenever a reactive input changes; a higher trigger means "show a new toast".
-  return (next) => {
-    const tr = Number(next.trigger ?? 0);
-    if (tr > last) { last = tr; show(next.title, next.description, next.variant, next.duration); }
+  const dismiss = (t) => { if (t.gone) return; t.gone = true; clearTimeout(t.timer); t.el.dataset.end = ''; setTimeout(() => { t.el.remove(); const k = toasts.indexOf(t); if (k >= 0) toasts.splice(k, 1); layout(); }, 500); };
+  const arm = (t, ms) => { clearTimeout(t.timer); t.timer = setTimeout(() => dismiss(t), ms); };
+  viewport.addEventListener('pointerenter', () => { viewport.dataset.expanded = ''; toasts.forEach((t) => clearTimeout(t.timer)); });
+  viewport.addEventListener('pointerleave', () => { delete viewport.dataset.expanded; toasts.forEach((t) => arm(t, t.ms)); });
+  const show = (i) => {
+    const node = document.createElement('div');
+    node.className = 'pg-toast'; node.setAttribute('role', 'status'); node.dataset.start = '';
+    node.innerHTML = `<div class="pg-toast-c"><div style="flex:1;min-width:0"><div class="pg-toast-t">${esc(i.title)}</div>${i.description ? `<div class="pg-toast-d">${esc(i.description)}</div>` : ''}</div>${i.action ? `<button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-toast-act>${esc(i.action)}</button>` : ''}<button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button" aria-label="Cerrar" style="color:var(--muted-foreground)"><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>`;
+    node.style.setProperty('--i', 0); node.style.visibility = 'hidden';
+    viewport.prepend(node);
+    const t = { el: node, h: node.querySelector('.pg-toast-c').scrollHeight + 2, ms: Number(i.duration) || 5000 };
+    toasts.unshift(t); layout(); node.style.visibility = '';
+    requestAnimationFrame(() => requestAnimationFrame(() => delete node.dataset.start));
+    node.querySelectorAll('button').forEach((b) => b.addEventListener('click', () => { if (b.hasAttribute('data-toast-act')) on.action?.(); dismiss(t); }));
+    arm(t, t.ms);
   };
+  return (next) => { const tr = Number(next.trigger) || 0; if (tr > last) { last = tr; show(next); } };
 }

package/registry/toaster.muten

@@ -1,9 +1,11 @@
-# Toaster - fixed toast notifications (bottom-right). The PAGE bumps a `trigger` counter to fire one:
-#   state { toastN = 0 : number }   action notify mutates toastN { toastN.set(toastN + 1) }
-#   Button "Notify" -> notify
-#   Toaster(trigger: toastN, title: "Saved", description: "Your changes are saved.", variant: "default")
-# Auto-dismisses; click a toast to close it early. Use state title/description and change them before bumping for dynamic messages.
-# shadcn-for-muten · Custom · host JS is src/components/Toaster.js (copied by `muten add toaster`).
-part Toaster(trigger: number, title: text, description: text, variant: text) {
-  Custom Toaster inputs(trigger: $trigger, title: $title, description: $description, variant: $variant) class("toaster")
+# Toaster - shadcn's Sonner: toasts that pile at the bottom right, the newest in front and three peeking behind;
+# hovering the pile fans them out and pauses them; each one leaves on its own (duration) or with its ×, and can carry
+# one action (Deshacer). The page bumps a counter to show one, with the title it has at that moment:
+#   state { toasts = 0 : number  toastTitle = "" : text }
+#   action saved() mutates toasts, toastTitle { toastTitle.set("Cita creada")  toasts.set(toasts + 1) }
+#   Toaster(trigger: toasts, title: toastTitle, description: "Jueves 9 a las 10:30", action: "Deshacer", onAction: undo)
+# For what the person just did on this screen (saving, saved) the Island is lighter; a toast is for news that can wait.
+# shadcn-for-muten · Custom · kit.css (.pg-toasts, .pg-toast) · host JS toaster.js.
+part Toaster(trigger: number, title: text, description: text = "", action: text = "", duration: number = 5000, onAction: action) {
+  Custom Toaster inputs(trigger: $trigger, title: $title, description: $description, action: $action, duration: $duration) on(action: $onAction) class("cx-toaster-host")
 }

package/registry/toggle-group.muten

@@ -1,8 +1,13 @@
-# Toggle Group - single-select toolbar. The PAGE owns a `text` state + an action that sets it:
+# ToggleGroup - toggles in a row (shadcn Nova). One choice: ToggleGroupItem with the page's text state. Several
+# choices: put Toggle parts inside, each with its own bool. spacing "0" joins them into one control; "2" separates.
 #   state { align = "left" : text }   action setAlign(v: text) mutates align { align.set(v) }
-#   ToggleGroup { ToggleGroupItem(value: "left", current: align, onSelect: setAlign) { Icon "lucide:align-left" } … }
-# shadcn-for-muten · part · no deps · styles via the semantic .toggle-group + .toggle* classes in globals.css.
-part ToggleGroup() { Stack class("toggle-group") { slot } }
-part ToggleGroupItem(value: text, current: text, onSelect: action) {
-  Button -> $onSelect($value) aria(pressed: $value == $current) class("toggle", "toggle-on" when $value == $current) { slot }
+#   ToggleGroup(label: "Alineación") { ToggleGroupItem(value: "left", current: align, onSelect: setAlign, label: "Izquierda") { Icon "lucide:align-left" } … }
+#   ToggleGroup(variant: "outline", spacing: "2") { Toggle(on: bold, onToggle: b, variant: "outline") { Icon "lucide:bold" } … }
+# variant: default | outline · size: sm | default | lg · spacing: 0 | 1 | 2 · orientation: horizontal | vertical
+# shadcn-for-muten · part · no deps · Nova (.cn-toggle-group) + kit.css (joined/vertical).
+part ToggleGroup(variant: text = "default", size: text = "default", spacing: text = "0", orientation: text = "horizontal", label: text = "") {
+  Stack class("cn-toggle-group group/toggle-group") data(slot: "toggle-group", variant: $variant, size: $size, spacing: $spacing, orientation: $orientation) aria(role: "group", label: $label) { slot }
+}
+part ToggleGroupItem(value: text, current: text, onSelect: action, variant: text = "default", size: text = "default", label: text = "") {
+  Button -> $onSelect($value) class("cn-toggle cn-toggle-variant-{$variant} cn-toggle-size-{$size} cn-toggle-group-item") data(slot: "toggle-group-item", variant: $variant, size: $size, name: $label) aria(pressed: $value == $current, label: $label) { slot }
 }

package/registry/toggle.muten

@@ -1,6 +1,9 @@
-# Toggle - a two-state button. The PAGE owns the bool + the toggle action. Put an Icon or text in the slot.
-#   state { bold = false : bool }   action b mutates bold { bold.toggle() }   Toggle(on: bold, onToggle: b) { Icon "lucide:bold" }
-# shadcn-for-muten · part · no deps · styles via the semantic .toggle* classes in globals.css.
-part Toggle(on: bool, onToggle: action) {
-  Button -> $onToggle aria(pressed: $on) class("toggle", "toggle-on" when $on) { slot }
+# Toggle - a button that stays pressed (bold, favourite, «solo hoy»). The page owns the bool and the action.
+#   state { bold = false : bool }   action toggleBold() mutates bold { bold.toggle() }
+#   Toggle(on: bold, onToggle: toggleBold, label: "Negrita") { Icon "lucide:bold" }
+#   Toggle(on: today, onToggle: toggleToday, variant: "outline") { Icon "lucide:calendar"  Span "Solo hoy" }
+# variant: default | outline · size: sm | default | lg · label: the name of an icon-only toggle.
+# shadcn-for-muten · part · no deps · Nova (.cn-toggle, pressed = aria-pressed).
+part Toggle(on: bool, onToggle: action, variant: text = "default", size: text = "default", label: text = "") {
+  Button -> $onToggle class("cn-toggle cn-toggle-variant-{$variant} cn-toggle-size-{$size} cn-toggle-group-item") data(slot: "toggle", variant: $variant, size: $size, name: $label) aria(pressed: $on, label: $label) { slot }
 }

package/registry/toolbar.muten

@@ -1,6 +1,11 @@
-# Toolbar - a grouped button bar with separators. Put icon buttons inside (class("btn btn-ghost btn-icon")).
-#   Toolbar { ToolbarGroup { Button { Icon "lucide:mouse-pointer-2" } class("btn btn-ghost btn-icon") … } ToolbarSeparator ToolbarGroup { … } }
-# shadcn-for-muten · part · no deps · styles via the semantic .toolbar* classes in globals.css.
-part Toolbar() { Stack class("toolbar") { slot } }
-part ToolbarGroup() { Stack class("toolbar-group") { slot } }
-part ToolbarSeparator() { Stack class("toolbar-separator") }
+# Toolbar - the tools of an editor in one bar: groups of icon buttons (Btn, Toggle, ToggleGroup) split by thin lines.
+# It floats over a canvas (CanvasViewport) or sits on top of a panel.
+#   Toolbar(label: "Herramientas") {
+#     ToolbarGroup { ToggleGroup(label: "Herramienta") { ToggleGroupItem(value: "select", current: tool, onSelect: setTool, label: "Seleccionar") { Icon "lucide:mouse-pointer-2" } … } }
+#     ToolbarSeparator()
+#     ToolbarGroup { Btn(variant: "ghost", size: "icon-sm", label: "Deshacer", onClick: undo) { Icon "lucide:undo-2" } }
+#   }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-toolbar).
+part Toolbar(label: text = "Herramientas") { Stack class("cx-toolbar") data(slot: "toolbar") aria(role: "toolbar", label: $label) { slot } }
+part ToolbarGroup() { Stack class("cx-toolbar-group") data(slot: "toolbar-group") { slot } }
+part ToolbarSeparator() { Stack class("cx-toolbar-sep") data(slot: "toolbar-separator") aria(role: "separator", orientation: "vertical") }

package/registry/tooltip.muten

@@ -1,9 +1,6 @@
-# Tooltip - shows on hover (pure CSS, no state needed). The slot is the trigger.
-#   Tooltip(label: "Add to library") { Button "Hover me" class("btn btn-outline") }
-# shadcn-for-muten · part · no deps · styles via the semantic .tooltip* classes in globals.css.
-part Tooltip(label: text) {
-  Stack class("tooltip-wrap") {
-    slot
-    Span "{$label}" class("tooltip-content")
-  }
-}
+# Tooltip - a short name that shows while the pointer rests on something (or it gets the focus): what an icon-only
+# button does, the full text of a cut-off line. Only a label: never a place for something the person must read.
+# The kit's single tooltip (KitLayer) does it for anything with a name; Tooltip just gives that name.
+#   Tooltip(text: "Editar servicio") { Btn(variant: "ghost", size: "icon", onClick: edit) { Icon "lucide:pencil" } }
+# A Btn with label already has one. shadcn-for-muten · part · the kit's tooltip (.cx-tip).
+part Tooltip(text: text) { Stack class("cx-tip-wrap") data(slot: "tooltip-trigger", name: $text) { slot } }

package/registry/tree-view.js

@@ -67,14 +67,14 @@ export function mount(el, inputs, handlers) {
       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 = 'tree-row';
-      row.style.paddingLeft = (depth * 16 + 6) + 'px';
-      if (!isFolder && id === selected) row.classList.add('tree-row-selected');
-      const chev = document.createElement('span'); chev.className = 'tree-chevron' + (isFolder ? '' : ' tree-chevron-hidden');
+      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);
+      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>' : '';
-      const ic = document.createElement('span'); ic.className = 'tree-icon'; ic.innerHTML = isFolder ? FOLDER : FILE;
-      const label = document.createElement('span'); label.className = 'tree-label'; label.textContent = node.name;
+      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
@@ -85,7 +85,27 @@ export function mount(el, inputs, handlers) {
       if (isFolder && expanded.has(path)) build(node.children, container, depth + 1, path);
     }
   };
-  const render = () => { el.innerHTML = ''; const root = document.createElement('div'); root.className = 'tree'; build(data, root, 0, ''); el.appendChild(root); };
+  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 }); } }
+  };
+  // 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 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; };
+    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)); } }
+  });
+  el.addEventListener('click', (e) => { const r = e.target.closest('.cx-tree-row'); if (r) focusPath = r.dataset.path; }, true);
 
   render();
   return (n) => {

package/registry/tree-view.muten

@@ -1,14 +1,9 @@
-# Tree View - a file/folder tree (Custom). TWO modes:
-#   nested (default): pass a nested `data` of { name, children }; leaves emit their "/path". Leave the keys "".
-#     TreeView(data: fileTree, labelKey: "", valueKey: "", groupKey: "", selected: "", onSelect: pick)
-#   flat (pass keys): feed a FLAT list (e.g. a `query` of rows) and let the tree group + key it for you -
-#     groupKey buckets rows into folders, labelKey is the text, valueKey is the payload a leaf emits:
-#     state { tiles = query tilesets : list<Tile>  tileUrl = "" : text }
-#     action pick(u: text) mutates tileUrl { tileUrl.set(u) }
-#     TreeView(data: tiles, labelKey: "tname", valueKey: "url", groupKey: "folder", selected: tileUrl, onSelect: pick)
-# `selected` highlights + auto-opens that leaf. Folders only expand; only leaves emit select. (muten parts need
-# every arg, so pass "" for the keys you don't use - an empty key = nested mode.)
-# shadcn-for-muten · Custom · host JS is src/components/TreeView.js (copied by `muten add tree-view`).
-part TreeView(data: list, labelKey: text, valueKey: text, groupKey: text, selected: text, onSelect: action) {
-  Custom TreeView inputs(data: $data, labelKey: $labelKey, valueKey: $valueKey, groupKey: $groupKey, selected: $selected) on(select: $onSelect) class("tree-view")
+# TreeView - folders and files: a folder opens and closes, a file is picked. Keyboard as a real tree: Up/Down move,
+# Right opens (or steps in), Left closes (or goes to the parent), Enter picks. Two ways to feed it:
+#   nested: data [{name, children}] - a file emits its "/path".   TreeView(data: @files, onSelect: open)
+#   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) {
+  Custom TreeView inputs(data: $data, labelKey: $labelKey, valueKey: $valueKey, groupKey: $groupKey, selected: $selected, label: $label) on(select: $onSelect) class("cx-tree-host")
 }

package/registry/vector-field.muten

@@ -1,10 +1,11 @@
-# Vector Field - paired NumberFields (X / Y) for position or size. The PAGE owns two number states + two actions:
-#   state { px = 0 : number  py = 0 : number }   action setX(v: number) mutates px { px.set(v) }   action setY(v: number) mutates py { py.set(v) }
-#   VectorField(x: px, y: py, min: -9999, max: 9999, step: 1, onX: setX, onY: setY)
-# shadcn-for-muten · part · depends on number-field · styles via the semantic .vector* classes.
-part VectorField(x: number, y: number, min: number, max: number, step: number, onX: action, onY: action) {
-  Stack class("vector-field") {
-    Stack class("vector-axis") { Span "X" class("vector-axis-label")  NumberField(value: $x, min: $min, max: $max, step: $step, onInput: $onX) }
-    Stack class("vector-axis") { Span "Y" class("vector-axis-label")  NumberField(value: $y, min: $min, max: $max, step: $step, onInput: $onY) }
+# VectorField - two numbers that go together: a position (X, Y) or a size (W, H), each a NumberField with its axis
+# inside. The page owns both values and both actions.
+#   VectorField(x: px, y: py, min: 0, max: 1920, onX: setX, onY: setY)
+#   VectorField(x: w, y: h, min: 1, max: 4096, xLabel: "W", yLabel: "H", unit: "px", onX: setW, onY: setH)
+# shadcn-for-muten · part over NumberField · kit.css (.cx-vector).
+part VectorField(x: number, y: number, min: number, max: number, step: number = 1, xLabel: text = "X", yLabel: text = "Y", unit: text = "", onX: action, onY: action) {
+  Stack class("cx-vector") {
+    NumberField(value: $x, min: $min, max: $max, step: $step, prefix: $xLabel, unit: $unit, onInput: $onX)
+    NumberField(value: $y, min: $min, max: $max, step: $step, prefix: $yLabel, unit: $unit, onInput: $onY)
   }
 }

package/registry/virtual-list.js

@@ -0,0 +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));
+  return () => {};
+}

package/registry/virtual-list.muten

@@ -0,0 +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}
+# 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) {
+  Custom VirtualList inputs(rows: $rows, total: $total, rowHeight: $rowHeight, label: $label, jump: $jump) class("cx-vl-host")
+}

package/registry/weekly-hours.muten

@@ -0,0 +1,4 @@
+# WeeklyHours - when the business opens: a switch per day, ranges with the wheel time picker, add a range, copy to all.
+#   WeeklyHours(days: @week, onChange: saveHours)    days: {name, open, ranges [["09:00", "13:00"], ["14:00", "19:00"]]}
+# shadcn-for-muten · part over KitWidget (kit core).
+part WeeklyHours(days: list, onChange: action) { Custom KitWidget inputs(name: "weeklyHours", days: $days) on(action: $onChange) class("cx-wh-host") }

package/registry/wordline.muten

@@ -0,0 +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") }
+# 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

@@ -1,11 +1,11 @@
-# Zoom Control - a  -  100%  +  widget. The PAGE owns the zoom number + the -/+ actions:
-#   state { zoom = 100 : number }   action zOut mutates zoom { zoom.set(zoom - 10) }   action zIn mutates zoom { zoom.set(zoom + 10) }
-#   ZoomControl(value: zoom, onOut: zOut, onIn: zIn)
-# shadcn-for-muten · part · no deps · styles via the semantic .zoom-* classes in globals.css.
-part ZoomControl(value: number, onOut: action, onIn: action) {
-  Stack class("zoom-control") {
-    Button -> $onOut class("zoom-btn") { Icon "lucide:minus" class("size-4") }
-    Span "{$value}%" class("zoom-value")
-    Button -> $onIn class("zoom-btn") { Icon "lucide:plus" class("size-4") }
+# ZoomControl - minus, the zoom in percent, plus. Tapping the number puts it back to 100 %. The page owns the number
+# and the three actions (and the limits: switch a side off at its end with Btn's own rules).
+#   ZoomControl(value: zoom, onOut: zoomOut, onIn: zoomIn, onReset: zoomReset)
+# shadcn-for-muten · part · no deps · kit.css (.cx-zoom).
+part ZoomControl(value: number, onOut: action, onIn: action, onReset: action) {
+  Stack class("cx-zoom") data(slot: "zoom-control") aria(role: "group", label: "Zoom") {
+    Button -> $onOut class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button") data(name: "Alejar") aria(label: "Alejar") { 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")
+    Button -> $onIn class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button") data(name: "Acercar") aria(label: "Acercar") { Icon "lucide:plus" }
   }
 }