@muten/shadcn 0.0.7 → 0.1.1

package/registry/pagination.muten

@@ -1,9 +1,12 @@
-# Pagination + sub-components (links reuse the .btn classes).
-# Compose: Pagination { PaginationPrevious(href) PaginationLink(label,href,page,current) PaginationEllipsis PaginationNext(href) }
-# shadcn-for-muten · part · no deps · styles via the semantic .pagination* + .btn classes in globals.css.
-part Pagination() { Nav class("pagination") aria(label: "pagination") { slot } }
-# `page` is this link's number, `current` the active-page state - the part highlights itself when they match.
-part PaginationLink(label: text, href: text, page: number, current: number) { Link "{$label}" -> "{$href}" class("btn btn-icon", "btn-outline" when $page == $current, "btn-ghost" when $page != $current) }
-part PaginationPrevious(href: text) { Link "Previous" -> "{$href}" class("btn btn-ghost btn-sm gap-1") }
-part PaginationNext(href: text) { Link "Next" -> "{$href}" class("btn btn-ghost btn-sm gap-1") }
-part PaginationEllipsis() { Span "…" class("pagination-ellipsis") }
+# Pagination (links) - pages that are routes of their own (a blog, a catalog that can be shared by URL): previous,
+# the numbers with the current one outlined, «…», next. For pages loaded from the server inside one screen use
+# PaginationNav.
+#   Pagination { PaginationPrevious(to: "/blog/1")  PaginationLink(label: "1", to: "/blog/1", page: 1, current: 2)  PaginationLink(label: "2", to: "/blog/2", page: 2, current: 2)  PaginationEllipsis()  PaginationNext(to: "/blog/3") }
+# shadcn-for-muten · parts · no deps · Nova (.cn-pagination-*).
+part Pagination(label: text = "Páginas") { Nav class("cn-pagination cx-pagination-links") data(slot: "pagination") aria(label: $label) { Stack class("cn-pagination-content cx-pl-row") data(slot: "pagination-content") { slot } } }
+part PaginationLink(label: text, to: text, page: number, current: number) {
+  Link "{$label}" -> "{$to}" class("cn-button cn-button-size-icon group/button cx-pl-num", "cn-button-variant-outline" when $page == $current, "cn-button-variant-ghost" when $page != $current) data(slot: "pagination-link") aria(current: $page == $current)
+}
+part PaginationPrevious(to: text, label: text = "Anterior") { Link -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-default group/button cn-pagination-previous") data(slot: "pagination-previous") { Icon "lucide:chevron-left"  Span "{$label}" class("cn-pagination-previous-text") } }
+part PaginationNext(to: text, label: text = "Siguiente") { Link -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-default group/button cn-pagination-next") data(slot: "pagination-next") { Span "{$label}" class("cn-pagination-next-text")  Icon "lucide:chevron-right" } }
+part PaginationEllipsis() { Stack class("cn-pagination-ellipsis cx-pl-more") data(slot: "pagination-ellipsis") aria(hidden: "true") { Icon "lucide:ellipsis" } }

package/registry/password-field.muten

@@ -0,0 +1,3 @@
+# PasswordField - a password with show/hide and its strength.   PasswordField(label: "Contraseña nueva")
+# shadcn-for-muten · part over KitWidget (kit core).
+part PasswordField(label: text = "Contraseña") { Custom KitWidget inputs(name: "password", label: $label) class("cx-pwd-host") }

package/registry/permission-matrix.muten

@@ -0,0 +1,6 @@
+# PermissionMatrix - any rows × any roles; one role can be locked (always allowed).
+#   PermissionMatrix(roles: @roleNames, rows: @permissions, locked: "Propietario", onChange: savePerms)   rows: {name, description, allow [1,0,…]}
+# shadcn-for-muten · part over KitWidget (kit core).
+part PermissionMatrix(roles: list, rows: list, locked: text = "", onChange: action) {
+  Custom KitWidget inputs(name: "permissionMatrix", roles: $roles, rows: $rows, locked: $locked) on(action: $onChange) class("cx-perms")
+}

package/registry/phone-field.js

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

package/registry/phone-field.muten

@@ -0,0 +1,7 @@
+# PhoneField - a phone with its country: dial code from a searchable list, the country's mask while typing, checked on
+# leaving the field, and what is stored (E.164). onChange gets {e164, valid, country}.
+#   PhoneField(label: "WhatsApp", value: "3001234567", country: "CO", onChange: setPhone)
+# shadcn-for-muten · Custom (kit values) · host JS phone-field.js.
+part PhoneField(label: text = "Teléfono", value: text = "", country: text = "CO", onChange: action) {
+  Custom PhoneField inputs(label: $label, value: $value, country: $country) on(change: $onChange) class("cx-ph-host")
+}

package/registry/phone-shell.js

@@ -0,0 +1,7 @@
+// PhoneShell (muten Custom) - the kit's phone frame (kit/structure.js): big title that shrinks on scroll, back and two
+// actions, three fixed bottom tabs with a count. tabs [{label, icon, badge}], rows [{tab, section, title, subtitle,
+// value}]; handler select(label).
+export function mount(el, inputs, on) {
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/structure.js')]).then(([core, s]) => s.phoneShell(el, inputs, core, on));
+  return () => {};
+}

package/registry/phone-shell.muten

@@ -0,0 +1,9 @@
+# PhoneShell - the app's frame on a phone: a big title that shrinks into the bar as you scroll (the header never
+# jumps in height), back on the left and at most two actions, and a bottom bar of three fixed tabs (the chosen one
+# on --selected with its dot; a count never changes the width). Respects the phone's safe area.
+#   PhoneShell(tabs: @tabs, rows: @rows, onSelect: pickTab)
+# tabs {label, icon, badge} · rows {tab, section, title, subtitle, value}: each tab's screen is its rows, grouped by section.
+# shadcn-for-muten · Custom (kit/structure.js) · kit.css (.cx-phone-frame, .cx-ph-*).
+part PhoneShell(tabs: list, rows: list, onSelect: action) {
+  Custom PhoneShell inputs(tabs: $tabs, rows: $rows) on(select: $onSelect) class("cx-ph-host")
+}

package/registry/pill.muten

@@ -1,5 +1,6 @@
-# Pill - a hero eyebrow chip (bigger than a Badge, rounded-full). Slot-based so you drop an icon + text:
-#   Pill { Icon "lucide:sparkles" class("size-4")  Span "For freelancers, studios and agencies" }
-# Tint it per brand with extra classes: Pill class("bg-blue-50 border-blue-100 text-blue-700").
-# shadcn-for-muten · part · no deps · styles via the semantic .pill class in globals.css.
-part Pill() { Stack class("pill") { slot } }
+# Pill - the chip over a hero title (what is new, who it is for): rounder and bigger than a Badge, with an icon and a
+# line of text inside. tone "brand" tints it with the skin's --selected.
+#   Pill { Icon "lucide:sparkles"  Span "Nuevo: cobra con tarjeta" }
+#   Pill(tone: "brand") { Span "Para barberías y salones" }
+# shadcn-for-muten · part · no deps · kit.css (.cx-pill).
+part Pill(tone: text = "") { Stack class("cx-pill") data(slot: "pill", tone: $tone) { slot } }

package/registry/plans.muten

@@ -0,0 +1,4 @@
+# Plans - plan cards with a monthly/yearly switch; the current plan is marked; going up is one tap, going down asks.
+#   Plans(plans: @plans, note: "2 meses gratis")   plans: {id, name, price {month, year}, desc, features, current}
+# shadcn-for-muten · part over KitWidget (kit core).
+part Plans(plans: list, note: text = "") { Custom KitWidget inputs(name: "plans", plans: $plans, note: $note) class("cx-plans-host") }

package/registry/popover.muten

@@ -1,11 +1,18 @@
-# Popover - a button that opens a floating panel below it. The PAGE owns the bool + the toggle action:
-#   state { open = false : bool }   action t mutates open { open.toggle() }
-#   Popover(label: "Open", open: open, onToggle: t) { … any content … }
-# shadcn-for-muten · part · no deps · the backdrop catches outside clicks; styles via the semantic .popover* classes.
-part Popover(label: text, open: bool, onToggle: action) {
-  Stack class("popover") {
-    Button "{$label}" -> $onToggle aria(expanded: $open) class("btn btn-outline")
-    when $open { Button -> $onToggle class("popover-backdrop") }
-    Stack class("popover-content", "popover-content-open" when $open) { slot }
+# Popover - a panel that opens next to what you tapped and stays until you tap outside, press Esc or close it. Its
+# content is anything: a small form, a filter, a detail. Trigger and content go inside, as in shadcn:
+#   Popover {
+#     PopoverTrigger { TriggerBtn { Span "Filtrar" } }
+#     PopoverContent(align: "start") { PopoverHeader(title: "Filtrar", description: "Lo que ves en la lista.")  … }
+#   }
+# PopoverClose is a button inside the content that closes it. align: start | center | end.
+# shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (.cn-popover-*) + kit.css (.cx-ov).
+part Popover() { Stack class("cx-ov") data(slot: "popover") { slot  OverlayBehavior(kind: "popover") } }
+part PopoverTrigger() { Stack class("cx-ov-trigger") data(slot: "popover-trigger") { slot } }
+part PopoverContent(align: text = "center", width: text = "18rem") { Stack class("cn-popover-content cx-ov-content") data(slot: "popover-content", align: $align) style(w: "{$width}") { slot } }
+part PopoverHeader(title: text, description: text = "") {
+  Stack class("cn-popover-header") data(slot: "popover-header") {
+    Span "{$title}" class("cn-popover-title") data(slot: "popover-title")
+    Text "{$description}" class("cn-popover-description") data(slot: "popover-description")
   }
 }
+part PopoverClose(label: text = "Listo", variant: text = "default") { Button "{$label}" class("cn-button cn-button-variant-{$variant} cn-button-size-sm group/button") data(ovclose: "true") }

package/registry/pricing.muten

@@ -1,25 +1,25 @@
-# Pricing - a row of tiers. PricingTier / PricingTierFeatured take name/price/period/description; the slot holds
-# the feature list (PricingFeature items) + the CTA. Use PricingTierFeatured to highlight the recommended plan.
+# Pricing - the plans of a landing page side by side: name, the line under it, the price and its period, what it
+# includes (PricingFeature) and its button. featured "on" raises the recommended one, with its badge.
 #   Pricing {
-#     PricingTierFeatured(name: "Pro", price: "$20", period: "/mo", description: "for pro sites") {
-#       Stack class("pricing-features") { PricingFeature { Span "Image optimization" }  PricingFeature { Span "Bot protection" } }
-#       Button "See Pro plan" -> choose class("btn btn-default w-full mt-auto")
-#     }
+#     PricingTier(name: "Gratis", price: "$0", period: "/mes", description: "Para empezar") { PricingFeature(label: "Tu tienda")  LinkBtn(to: "/signup", variant: "outline") { Span "Empezar" } }
+#     PricingTier(name: "Pro", price: "$12", period: "/mes", description: "Para crecer", featured: "on") { … }
 #   }
-# shadcn-for-muten · block · no deps · styles via the semantic .pricing-* classes in globals.css.
-part Pricing() { Stack class("pricing-grid") { slot } }
-part PricingTier(name: text, price: text, period: text, description: text) {
-  Stack class("pricing-tier") {
-    Stack class("gap-1") { Span "{$name}" class("pricing-name")  Span "{$description}" class("pricing-desc") }
-    Stack class("flex flex-row items-baseline gap-1.5") { Span "{$price}" class("pricing-price")  Span "{$period}" class("pricing-period") }
-    slot
+# was: the old price, struck (a yearly discount) · note: how it is billed · lead: the line over the features.
+# For the plans inside the app (monthly/yearly, current plan) use Plans. shadcn-for-muten · parts · no deps · kit.css (.cx-pricing).
+part Pricing() { Stack class("cx-pricing") { slot } }
+part PricingTier(name: text, price: text, period: text = "", description: text = "", featured: text = "", badge: text = "Recomendado", was: text = "", note: text = "", lead: text = "") {
+  Stack class("cx-tier") data(featured: $featured) {
+    when $featured != "" { Span "{$badge}" class("cx-tier-badge") }
+    Stack class("cx-tier-head") { Span "{$name}" class("cx-tier-name")  Text "{$description}" class("cx-tier-desc") }
+    Stack class("cx-tier-price") {
+      Span "{$price}" class("cx-tier-amount")  Span "{$period}" class("cx-tier-period")
+      when $was != "" { Span "{$was}" class("cx-tier-was") }
+    }
+    when $note != "" { Text "{$note}" class("cx-tier-note") }
+    Stack class("cx-tier-body") {
+      when $lead != "" { Span "{$lead}" class("cx-tier-lead") }
+      slot
+    }
   }
 }
-part PricingTierFeatured(name: text, price: text, period: text, description: text) {
-  Stack class("pricing-tier pricing-tier-featured") {
-    Stack class("gap-1") { Span "{$name}" class("pricing-name")  Span "{$description}" class("pricing-desc") }
-    Stack class("flex flex-row items-baseline gap-1.5") { Span "{$price}" class("pricing-price")  Span "{$period}" class("pricing-period") }
-    slot
-  }
-}
-part PricingFeature() { Stack class("pricing-feature") { Icon "lucide:check" class("size-4 text-primary shrink-0")  slot } }
+part PricingFeature(label: text) { Stack class("cx-tier-feature") { Icon "lucide:check"  Span "{$label}" } }

package/registry/progress.muten

@@ -1,7 +1,7 @@
-# Progress - a determinate progress bar. value is 0-100; the fill width is the one runtime value, set via style().
-# shadcn-for-muten · part · no deps · styles via the semantic .progress* classes in globals.css.
-part Progress(value: number) {
-  Stack class("progress") {
-    Stack class("progress-indicator") style(w: "{$value}%")
+# Progress - a determinate bar, value 0-100; it eases between values.  Progress(value: done, label: "Pasos hechos")
+# shadcn-for-muten · part · no deps · Nova (.cn-progress) + kit.css (the value rides --w).
+part Progress(value: number, label: text = "Progreso") {
+  Stack class("cn-progress") data(slot: "progress") aria(role: "progressbar", label: $label, valuemin: 0, valuemax: 100, valuenow: $value) {
+    Stack class("cn-progress-indicator") data(slot: "progress-indicator") style(w: "{$value}%")
   }
 }

package/registry/queue.muten

@@ -0,0 +1,3 @@
+# Queue - a waitlist: offer a freed slot to the first in line, with a countdown.   Queue(title: "Lista de espera · sábado", people: @waiting)
+# shadcn-for-muten · part over KitWidget (kit core).
+part Queue(title: text, people: list, minutes: number = 10) { Custom KitWidget inputs(name: "queue", title: $title, people: $people, minutes: $minutes) class("cx-queue-host") }

package/registry/radio-group.muten

@@ -1,11 +1,19 @@
-# Radio Group - single choice from a list. The PAGE owns a `text` state + an action that sets it:
+# RadioGroup - one choice from a short list (shadcn Nova): a circle and its label, and a description when the
+# choice needs one. A real radio group: arrows move and pick, only the chosen one is in the Tab order. The page
+# owns the value:
 #   state { plan = "pro" : text }   action setPlan(v: text) mutates plan { plan.set(v) }
-#   RadioGroup { RadioGroupItem(value: "pro", current: plan, label: "Pro", onSelect: setPlan) … }
-# shadcn-for-muten · part · no deps · the dot always renders and scales in via .radio-dot-on.
-part RadioGroup() { Stack class("radio-group") { slot } }
-part RadioGroupItem(value: text, current: text, label: text, onSelect: action) {
-  Button -> $onSelect($value) aria(checked: $value == $current) class("radio-row") {
-    Stack class("radio") { Stack class("radio-dot", "radio-dot-on" when $value == $current) }
-    Span "{$label}" class("radio-label")
+#   RadioGroup(label: "Plan") { RadioGroupItem(value: "free", current: plan, label: "Gratis", onSelect: setPlan)  … }
+# For choices that carry more (a price, a duration) use ChoiceList. orientation: vertical | horizontal.
+# shadcn-for-muten · part + Custom (RovingBehavior) · Nova (.cn-radio-group) + kit.css (checked state).
+part RadioGroup(label: text = "", orientation: text = "vertical") {
+  Stack class("cn-radio-group cx-rg") data(slot: "radio-group", orientation: $orientation) aria(role: "radiogroup", label: $label) { slot  RovingBehavior() }
+}
+part RadioGroupItem(value: text, current: text, label: text, onSelect: action, description: text = "") {
+  Button -> $onSelect($value) class("cx-rg-row") aria(role: "radio", checked: $value == $current) {
+    Span "" class("cn-radio-group-item cx-rg-dot") data(slot: "radio-group-item", state: $value == $current)
+    Stack class("cx-rg-text") {
+      Span "{$label}" class("cn-label") data(slot: "label")
+      Text "{$description}" class("cn-field-description") data(slot: "field-description")
+    }
   }
 }

package/registry/range-slider.js

@@ -1,25 +1,10 @@
-// RangeSlider host (muten Custom). inputs: { lo, hi, min, max, step }. handlers: { lo(v), hi(v) }.
-// Two thumbs; drag the nearer one. The page owns two numbers (the low + high bounds).
-export function mount(el, inputs, handlers) {
-  const num = (v, d) => { const n = Number(v); return Number.isFinite(n) ? n : d; };
-  const min = num(inputs.min, 0), max = num(inputs.max, 100), step = num(inputs.step, 1) || 1;
-  let lo = num(inputs.lo, min), hi = num(inputs.hi, max);
-
-  const fill = document.createElement('div'); fill.className = 'range-slider-fill';
-  const tlo = document.createElement('div'); tlo.className = 'range-slider-thumb';
-  const thi = document.createElement('div'); thi.className = 'range-slider-thumb';
-  el.appendChild(fill); el.appendChild(tlo); el.appendChild(thi);
-
-  const pct = (v) => (max === min ? 0 : (v - min) / (max - min) * 100);
-  const paint = () => { fill.style.left = pct(lo) + '%'; fill.style.width = (pct(hi) - pct(lo)) + '%'; tlo.style.left = pct(lo) + '%'; thi.style.left = pct(hi) + '%'; };
-  paint();
-
-  const valAt = (clientX) => { const r = el.getBoundingClientRect(); if (!r.width) return lo; const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); return Math.round((min + ratio * (max - min)) / step) * step; };
-  let dragging = null;
-  const move = (e) => { const v = valAt(e.clientX); if (dragging === 'lo') { lo = Math.min(v, hi); if (handlers.lo) handlers.lo(lo); } else { hi = Math.max(v, lo); if (handlers.hi) handlers.hi(hi); } paint(); };
-  el.addEventListener('pointerdown', (e) => { const v = valAt(e.clientX); dragging = Math.abs(v - lo) <= Math.abs(v - hi) ? 'lo' : 'hi'; el.setPointerCapture(e.pointerId); move(e); });
-  el.addEventListener('pointermove', (e) => { if (dragging) move(e); });
-  el.addEventListener('pointerup', () => dragging = null);
-
-  return (n) => { lo = num(n.lo, lo); hi = num(n.hi, hi); paint(); };
+// RangeSlider (muten Custom) - two thumbs (lo / hi) on the kit's ScaleSlider; keeps the plugin's lo/hi handlers.
+export function mount(el, inputs, on) {
+  el.dataset.bubble = inputs.bubble || 'always'; el.dataset.ends = inputs.ends || 'on';   // optional value bubble and end labels (kit.css)
+  let update = null;
+  const values = (i) => `${i.lo},${i.hi}`;
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => {
+    update = v.scaleSlider(el, { ...inputs, values: values(inputs) }, core, { change: (s) => { const [lo, hi] = s.split(',').map(Number); on.lo?.(lo); on.hi?.(hi); } });
+  });
+  return (next) => update?.({ ...next, values: values(next) });
 }

package/registry/range-slider.muten

@@ -1,7 +1,6 @@
-# Range Slider - two thumbs (a low + high bound). The PAGE owns two numbers + two actions:
-#   state { lo = 20 : number  hi = 80 : number }   action setLo(v: number) mutates lo { lo.set(v) }   action setHi(v: number) mutates hi { hi.set(v) }
+# RangeSlider - two thumbs (a range) on the kit's ScaleSlider. The page owns lo and hi.
 #   RangeSlider(lo: lo, hi: hi, min: 0, max: 100, step: 1, onLo: setLo, onHi: setHi)
-# shadcn-for-muten · Custom · host JS is src/components/RangeSlider.js (copied by `muten add range-slider`).
-part RangeSlider(lo: number, hi: number, min: number, max: number, step: number, onLo: action, onHi: action) {
-  Custom RangeSlider inputs(lo: $lo, hi: $hi, min: $min, max: $max, step: $step) on(lo: $onLo, hi: $onHi) class("range-slider")
+# shadcn-for-muten · Custom (kit values) · host JS range-slider.js.
+part RangeSlider(lo: number, hi: number, min: number, max: number, step: number = 1, gap: number = 0, label: text = "", format: text = "", bubble: text = "always", ends: text = "on", onLo: action, onHi: action) {
+  Custom RangeSlider inputs(lo: $lo, hi: $hi, min: $min, max: $max, step: $step, gap: $gap, label: $label, format: $format, bubble: $bubble, ends: $ends) on(lo: $onLo, hi: $onHi) class("cx-sl-host")
 }

package/registry/resizable.js

@@ -1,29 +1,36 @@
-// Resizable host component (muten Custom). inputs: { left, right } (panel labels). A draggable splitter
-// resizes the two panels. Edit this file to render real content per panel instead of the label text.
-export function mount(el, inputs, handlers) {
-  const a = document.createElement('div'); a.className = 'resizable-panel';
-  const handle = document.createElement('div'); handle.className = 'resizable-handle';
-  const b = document.createElement('div'); b.className = 'resizable-panel';
-  el.appendChild(a); el.appendChild(handle); el.appendChild(b);
-
-  let pct = 50;
-  const paint = () => { a.style.flexBasis = pct + '%'; b.style.flexBasis = (100 - pct) + '%'; };
-  const setText = (left, right) => { a.textContent = left == null ? 'One' : String(left); b.textContent = right == null ? 'Two' : String(right); };
-  setText(inputs.left, inputs.right);
-  paint();
-
-  let drag = false;
-  handle.addEventListener('pointerdown', (e) => { drag = true; handle.setPointerCapture(e.pointerId); });
-  el.addEventListener('pointermove', (e) => {
-    if (!drag) return;
-    const r = el.getBoundingClientRect();
-    if (!r.width) return;
-    pct = Math.min(85, Math.max(15, ((e.clientX - r.left) / r.width) * 100));
-    paint();
+// ResizableBehavior (muten Custom) - drags the handles of a ResizablePanelGroup: each handle resizes the two panels
+// beside it (sizes are percentages of the group), never under a panel's min. Keyboard on a focused handle: arrows
+// move 5 %, Home / End push to an end. Double-click puts the two panels back to their starting sizes.
+export function mount(el) {
+  const group = el.parentElement, vertical = () => group.dataset.orientation === 'vertical';
+  const panels = () => [...group.children].filter((c) => c.classList.contains('cx-rz-panel'));
+  const handles = () => [...group.children].filter((c) => c.classList.contains('cx-rz-handle'));
+  const start = new Map();
+  const set = (p, v) => { p.style.flex = `${v} 1 0px`; p.dataset.now = String(Math.round(v)); };
+  const size = (p) => Number(p.dataset.now ?? p.dataset.size) || 50;
+  const min = (p) => Number(p.dataset.min) || 15;
+  const init = () => { panels().forEach((p) => { if (!start.has(p)) start.set(p, Number(p.dataset.size) || 50); set(p, size(p)); }); handles().forEach((h) => { h.tabIndex = 0; h.setAttribute('aria-orientation', vertical() ? 'horizontal' : 'vertical'); }); };
+  const pair = (h) => [h.previousElementSibling, h.nextElementSibling].map((x) => (x && x.classList.contains('cx-rz-panel') ? x : null));
+  const move = (h, delta) => { const [a, b] = pair(h); if (!a || !b) return; const total = size(a) + size(b); const na = Math.min(total - min(b), Math.max(min(a), size(a) + delta)); set(a, na); set(b, total - na); h.setAttribute('aria-valuenow', Math.round(na)); };
+  let drag = null;
+  group.addEventListener('pointerdown', (e) => {
+    const h = e.target.closest('.cx-rz-handle'); if (!h || h.parentElement !== group || e.button > 0) return;
+    e.preventDefault(); h.setPointerCapture(e.pointerId); h.dataset.drag = '';
+    drag = { h, at: vertical() ? e.clientY : e.clientX, span: vertical() ? group.clientHeight : group.clientWidth, sum: panels().reduce((s, p) => s + size(p), 0) };
   });
-  const stop = () => { drag = false; };
-  handle.addEventListener('pointerup', stop);
-  handle.addEventListener('pointercancel', stop);
-
-  return (n) => setText(n.left, n.right);
+  group.addEventListener('pointermove', (e) => {
+    if (!drag) return; const at = vertical() ? e.clientY : e.clientX;
+    move(drag.h, ((at - drag.at) / drag.span) * drag.sum); drag.at = at;
+  });
+  const end = () => { if (!drag) return; delete drag.h.dataset.drag; drag = null; };
+  group.addEventListener('pointerup', end); group.addEventListener('pointercancel', end);
+  group.addEventListener('keydown', (e) => {
+    const h = e.target.closest('.cx-rz-handle'); if (!h) return;
+    const d = { ArrowLeft: -5, ArrowUp: -5, ArrowRight: 5, ArrowDown: 5, Home: -100, End: 100 }[e.key]; if (d === undefined) return;
+    e.preventDefault(); move(h, d);
+  });
+  group.addEventListener('dblclick', (e) => { const h = e.target.closest('.cx-rz-handle'); if (!h) return; pair(h).forEach((p) => p && set(p, start.get(p))); });
+  init();
+  new MutationObserver(init).observe(group, { childList: true });
+  return () => {};
 }

package/registry/resizable.muten

@@ -1,6 +1,17 @@
-# Resizable - two panels with a draggable splitter. Pass the panel labels; drag the handle to resize.
-#   Resizable(left: "Sidebar", right: "Content")
-# shadcn-for-muten · Custom · host JS is src/components/Resizable.js (edit it to render real content per panel).
-part Resizable(left: text, right: text) {
-  Custom Resizable inputs(left: $left, right: $right) class("resizable")
+# Resizable - panels you size by dragging the line between them (shadcn Nova). Each panel starts at its size (a
+# percentage) and never goes under min; the handle also moves with the arrow keys (Home/End to the ends).
+#   ResizablePanelGroup(orientation: "horizontal") {
+#     ResizablePanel(size: 30) { … }  ResizableHandle(grip: "on")  ResizablePanel(size: 70) { … }
+#   }
+# orientation: horizontal (side by side) | vertical (one above the other).
+# shadcn-for-muten · parts + Custom (ResizableBehavior) · Nova (.cn-resizable-*) + kit.css.
+part ResizablePanelGroup(orientation: text = "horizontal", label: text = "") {
+  Stack class("cn-resizable-panel-group cx-rz") data(slot: "resizable-panel-group", orientation: $orientation) aria(label: $label) { slot  ResizableBehavior() }
 }
+part ResizablePanel(size: number = 50, min: number = 15) { Stack class("cx-rz-panel") data(slot: "resizable-panel", size: $size, min: $min) { slot } }
+part ResizableHandle(grip: text = "") {
+  Stack class("cn-resizable-handle cx-rz-handle") data(slot: "resizable-handle", grip: $grip) aria(role: "separator", label: "Cambiar el tamaño") {
+    when $grip != "" { Span "" class("cn-resizable-handle-icon") }
+  }
+}
+part ResizableBehavior() { Custom ResizableBehavior class("cx-rz-behavior") }

package/registry/roving-behavior.js

@@ -0,0 +1,16 @@
+// RovingBehavior (muten Custom) - a radio group's keyboard: arrows move to the next/previous option and pick it,
+// Space picks the focused one, and only the chosen option sits in the Tab order. The choice itself is the page's
+// state (aria-checked); picking = clicking, so the page's action runs. Same rules as the reference artifact.
+export function mount(el) {
+  const group = el.parentElement;
+  const options = () => [...group.querySelectorAll(':scope > [role="radio"]')];
+  const sync = () => { const all = options(); const on = all.find((o) => o.getAttribute('aria-checked') === 'true') || all[0]; all.forEach((o) => { o.tabIndex = o === on ? 0 : -1; }); };
+  new MutationObserver(sync).observe(group, { subtree: true, attributes: true, attributeFilter: ['aria-checked'], childList: true });
+  group.addEventListener('keydown', (e) => {
+    const all = options(), i = all.indexOf(document.activeElement); if (i < 0) return;
+    const d = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[e.key];
+    if (e.key === ' ') { e.preventDefault(); all[i].click(); }
+    if (d) { e.preventDefault(); const next = all[(i + d + all.length) % all.length]; next.focus(); next.click(); }
+  });
+  sync();
+}

package/registry/roving-behavior.muten

@@ -0,0 +1,3 @@
+# RovingBehavior - arrow keys walk a group of radios (or options) and pick as they go; only the chosen one is in the
+# Tab order. Used by ChoiceList. shadcn-for-muten · Custom · host JS is roving-behavior.js.
+part RovingBehavior() { Custom RovingBehavior class("cx-roving-behavior") }

package/registry/row-menu.js

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

package/registry/row-menu.muten

@@ -0,0 +1,5 @@
+# RowMenu - the ⋯ of a row: a menu with arrows, Home/End, type-ahead, Esc back to the button. Put it in ItemActions.
+#   RowMenu(label: "Opciones de Corte clásico", items: @rowActions, onPick: act)
+#   items {id, label, icon (a kit icon id), danger, separator (a line before it)}
+# shadcn-for-muten · Custom (kit menus) · host JS row-menu.js.
+part RowMenu(label: text = "Más opciones", items: list, onPick: action) { Custom RowMenu inputs(label: $label, items: $items) on(pick: $onPick) class("cx-rowmenu-host") }

package/registry/save-button.muten

@@ -0,0 +1,11 @@
+# SaveButton - saving takes three moments and the button keeps its width through them, so nothing jumps:
+# idle («Guardar cambios») → saving (spinner, «Guardando…») → saved (check, «Guardado», green). The page owns status.
+#   SaveButton(status: saveState, onClick: save)      status: idle | saving | saved
+# shadcn-for-muten · part · no deps · kit.css (.cx-save).
+part SaveButton(status: text, onClick: action, label: text = "Guardar cambios") {
+  Button -> $onClick class("cn-button cn-button-variant-default cn-button-size-default group/button cx-save") data(slot: "button", status: $status) {
+    when $status == "saving" { Stack class("cx-btn-label") { Icon "lucide:loader-circle" class("animate-spin")  Span "Guardando…" } }
+    when $status == "saved" { Stack class("cx-btn-label") { Icon "lucide:check"  Span "Guardado" } }
+    when $status != "saving" and $status != "saved" { Stack class("cx-btn-label") { Span "{$label}" } }
+  }
+}

package/registry/scale-slider.js

@@ -0,0 +1,7 @@
+// ScaleSlider (muten Custom) - the kit's slider with the value riding on the thumb (kit/values.js).
+export function mount(el, inputs, on) {
+  el.dataset.bubble = inputs.bubble || 'always'; el.dataset.ends = inputs.ends || 'on';   // optional value bubble and end labels (kit.css)
+  let update = null;
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => { update = v.scaleSlider(el, inputs, core, on); });
+  return (next) => update?.(next);
+}

package/registry/scale-slider.muten

@@ -0,0 +1,9 @@
+# ScaleSlider - one or two thumbs; the value rides on each thumb and two bubbles that would touch merge into one;
+# the ends are written under it. Keys: arrows, Page Up/Down, Home/End. onChange gets "24" or "20000,80000".
+#   ScaleSlider(label: "Recordatorio antes de la cita", min: 1, max: 72, values: "24", format: "hours", onChange: setHours)
+#   ScaleSlider(label: "Precio", min: 0, max: 150000, step: 5000, values: "20000,80000", gap: 5000, format: "money", onChange: setPrice)
+# bubble: always | drag (only while moving or focused) | off · ends: on | off (the min and max written under it).
+# format: hours | money | percent | "" (+ suffix). shadcn-for-muten · Custom (kit values) · host JS scale-slider.js.
+part ScaleSlider(label: text, min: number = 0, max: number = 100, step: number = 1, values: text, gap: number = 0, format: text = "", suffix: text = "", bubble: text = "always", ends: text = "on", onChange: action) {
+  Custom ScaleSlider inputs(label: $label, min: $min, max: $max, step: $step, values: $values, gap: $gap, format: $format, suffix: $suffix, bubble: $bubble, ends: $ends) on(change: $onChange) class("cx-sl-host")
+}

package/registry/scroll-area.muten

@@ -1,4 +1,8 @@
-# Scroll Area - a scrollable region with styled scrollbars (max-height 18rem by default; eject to change).
-#   ScrollArea { … long content … }
-# shadcn-for-muten · part · no deps · styles via the semantic .scroll-area class in globals.css.
-part ScrollArea() { Stack class("scroll-area") { slot } }
+# ScrollArea - a region that scrolls inside itself with the kit's thin scrollbar, so a long list never makes the page
+# longer. Give it a height; horizontal scrolls sideways (a row of cards) and hides the bar until you scroll.
+#   ScrollArea(height: "18rem") { each tags as t { … } }
+#   ScrollArea(orientation: "horizontal") { Stack class("cx-hstack") { … } }
+# shadcn-for-muten · part · no deps · Nova (.cn-scroll-area) + kit.css (.cx-scroll-area).
+part ScrollArea(height: text = "18rem", orientation: text = "vertical", label: text = "") {
+  Stack class("cn-scroll-area cx-scroll-area cx-scroll") data(slot: "scroll-area", orientation: $orientation) style(h: "{$height}") aria(label: $label) { slot }
+}

package/registry/segmented-control.muten

@@ -1,14 +1,14 @@
-# Segmented Control - a single-select toolbar (tool picker, view switch). The PAGE owns a text state:
+# Segmented Control - a single-select toolbar (tool picker, view switch) on the kit's tabs track: the chosen one
+# sits on a sliding pill (TabsBehavior), arrows move between items. The PAGE owns a text state:
 #   state { tool = "select" : text }   action setTool(v: text) mutates tool { tool.set(v) }
 #   SegmentedControl { SegmentedItem(value: "select", current: tool, label: "Select", onSelect: setTool) … }
-# shadcn-for-muten · part · no deps · styles via the semantic .segmented* classes in globals.css.
-part SegmentedControl() { Stack class("segmented") { slot } }
+# SegmentedTabs fills its width; IconTab holds an Icon instead of a label.
+# shadcn-for-muten · part + Custom (TabsBehavior) · kit.css (.cx-tabs).
+part SegmentedControl() { Stack class("cx-tabs") data(slot: "segmented") aria(role: "group") { slot  TabsBehavior() } }
 part SegmentedItem(value: text, current: text, label: text, onSelect: action) {
-  Button "{$label}" -> $onSelect($value) aria(pressed: $value == $current) class("segmented-item", "segmented-item-active" when $value == $current)
+  Button "{$label}" -> $onSelect($value) class("cn-button cn-button-variant-ghost cn-button-size-sm cx-tab") aria(pressed: $value == $current)
 }
-# Full-width tab bar with icon + label (Forms · Scheduling · PDF …). IconTab is slot-based so you drop an
-# Icon + Span inside:  SegmentedTabs { IconTab(value: "forms", current: tab, onSelect: setTab) { Icon "lucide:file-text"  Span "Forms" } … }
-part SegmentedTabs() { Stack class("segmented segmented-fill") { slot } }
+part SegmentedTabs() { Stack class("cx-tabs cx-tabs-fill") data(slot: "segmented") { slot  TabsBehavior() } }
 part IconTab(value: text, current: text, onSelect: action) {
-  Button -> $onSelect($value) aria(pressed: $value == $current) class("segmented-item", "segmented-item-active" when $value == $current) { slot }
+  Button -> $onSelect($value) class("cn-button cn-button-variant-ghost cn-button-size-icon-sm cx-tab") aria(pressed: $value == $current) { slot }
 }

package/registry/separator.muten

@@ -1,3 +1,3 @@
-# Separator - a thin divider line (horizontal). For a vertical one: class("separator separator-vertical").
-# shadcn-for-muten · part · no deps · styles via the semantic .separator class in globals.css.
-part Separator() { Stack class("separator") }
+# Separator - a hairline between groups.  Separator()  ·  Separator(orientation: "vertical")
+# shadcn-for-muten · part · no deps · Nova (.cn-separator).
+part Separator(orientation: text = "horizontal") { Stack class("cn-separator cn-separator-{$orientation}") data(slot: "separator", orientation: $orientation) aria(role: "separator", orientation: $orientation) }

package/registry/share-button.js

@@ -0,0 +1,7 @@
+// ShareButton (muten Custom) - a Button that opens the kit's share sheet (kit/structure.js) in the adaptive modal.
+// inputs: label, variant, kind "link" | "product", name, initials, url, text, productName/Meta/Price/Image.
+export function mount(el, inputs) {
+  const i = { ...inputs, product: inputs.kind === 'product' ? { name: inputs.productName, meta: inputs.productMeta, price: inputs.productPrice, image: inputs.productImage } : null };
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/structure.js')]).then(([core, s]) => s.share(el, i, core));
+  return () => {};
+}

package/registry/share-button.muten

@@ -0,0 +1,10 @@
+# ShareButton - Storio's share sheet made generic, inside the adaptive modal (Dialog wide, Drawer on a phone). On top
+# what is shared: the link's card (initials, name, address) or the product's (image, price in the corner, name over
+# it); then the link with Copiar and a row of brand targets you can drag sideways. QR opens the code in the same
+# sheet; if the phone has its own share menu, «Compartir en otra app» appears.
+#   ShareButton(label: "Compartir mi tienda", name: "Barbería El Roble", initials: "ER", url: "storio.ink/el-roble")
+#   ShareButton(label: "Compartir un producto", variant: "outline", kind: "product", name: "Barbería El Roble", url: "storio.ink/el-roble/p/pomada-mate", productName: "Pomada mate", productMeta: "Fijación media · 100 g", productPrice: 32000, productImage: "linear-gradient(135deg,#c79a6b,#6b4a2e)")
+# shadcn-for-muten · Custom (kit/structure.js) · kit.css (.cx-sh-*).
+part ShareButton(label: text = "Compartir", variant: text = "default", kind: text = "link", name: text, initials: text = "", url: text, text: text = "", productName: text = "", productMeta: text = "", productPrice: number = 0, productImage: text = "") {
+  Custom ShareButton inputs(label: $label, variant: $variant, kind: $kind, name: $name, initials: $initials, url: $url, text: $text, productName: $productName, productMeta: $productMeta, productPrice: $productPrice, productImage: $productImage) class("cx-share-host")
+}

package/registry/sheet.muten

@@ -1,11 +1,7 @@
-# Sheet - a panel that slides in from the right edge. The PAGE owns the bool + open/close actions:
-#   state { open = false : bool }   action close mutates open { open.set(false) }   Sheet(open: open, onClose: close) { … }
-# shadcn-for-muten · part · no deps · backdrop click closes; styles via the semantic .sheet* classes.
-part Sheet(open: bool, onClose: action) {
-  Stack class("sheet-overlay", "sheet-overlay-open" when $open) {
-    Button -> $onClose class("sheet-backdrop")
-    Stack class("sheet-content") { slot }
-  }
+# Sheet - a panel that slides from a side and keeps the page behind it in view: a detail, filters, a cart. Full
+# height from the right (default) or left, full width from the top or bottom. The page owns open.
+#   Sheet(open: showing, onClose: done, title: "Pedido #1042", side: "right") { … ModalFooter { … } }
+# shadcn-for-muten · part over Modal (mode sheet).
+part Sheet(open: bool, onClose: action, title: text, description: text = "", side: text = "right") {
+  Modal(open: $open, onClose: $onClose, title: $title, description: $description, mode: "sheet", side: $side) { slot }
 }
-part SheetTitle(label: text) { Title "{$label}" h2 class("sheet-title") }
-part SheetDescription(label: text) { Span "{$label}" class("sheet-description") }