@muten/shadcn 0.0.7 → 0.1.0

package/registry/calendar.muten

@@ -1,9 +1,10 @@
-# Calendar - a month grid with variants. The PAGE owns the selected value (text) per mode:
-#   mode: "single" | "range" | "multiple"   months: 1 | 2   caption: "label" | "dropdown"
-#   selected encodes the value: single -> "yyyy-mm-dd"; range -> "from/to"; multiple -> "d1,d2,...".
-#   state { date = "" : text }   action pick(d: text) mutates date { date.set(d) }
-#   Calendar(selected: date, mode: "single", months: 1, caption: "label", onSelect: pick)
-# shadcn-for-muten · Custom · host JS is src/components/Calendar.js (copied by `muten add calendar`).
-part Calendar(selected: text, mode: text, months: number, caption: text, onSelect: action) {
-  Custom Calendar inputs(selected: $selected, mode: $mode, months: $months, caption: $caption) on(select: $onSelect) class("calendar")
+# Calendar - the month grid: a day or a range, one or two months. The page owns nothing until the person picks:
+# onSelect gets "yyyy-mm-dd" (single) or "from/to" (range).
+#   Calendar(selected: "today", min: "today", caption: "on", onSelect: pickDay)
+#   Calendar(selected: "-6/0", mode: "range", months: 2, presets: "reports", caption: "on", onSelect: pickRange)
+# selected/min take dates or days from today ("today", "-6/0"). presets "reports" adds Hoy · Últimos 7 días · Este
+# mes · Mes pasado beside a range; caption "on" writes what was chosen under it.
+# shadcn-for-muten · Custom (kit core) · host JS is calendar.js.
+part Calendar(selected: text = "", mode: text = "single", months: number = 1, min: text = "", presets: text = "", caption: text = "", onSelect: action) {
+  Custom Calendar inputs(selected: $selected, mode: $mode, months: $months, min: $min, presets: $presets, caption: $caption) on(select: $onSelect) class("cx-cal-host")
 }

package/registry/canvas-viewport.js

@@ -1,11 +1,13 @@
 // CanvasHost (muten Custom). A <canvas> with pan (drag) + zoom (wheel). handlers: { view(zoomPercent) }.
-// Draws a checkerboard + a sample sprite as a placeholder - replace draw() with your scene render.
+// Draws a checkerboard + a sample square as a placeholder in the skin's colours - replace draw() with your scene.
+// inputs: zoom (percent; the page can set it, e.g. from a ZoomControl). Double-click puts the view back at 100 %.
 export function mount(el, inputs, handlers) {
   const canvas = document.createElement('canvas');
   el.appendChild(canvas);
   const ctx = canvas.getContext('2d');
   let scale = 1, ox = 0, oy = 0;
   const dpr = () => window.devicePixelRatio || 1;
+  const token = (name, fallback) => getComputedStyle(el).getPropertyValue(name).trim() || fallback;
 
   const draw = () => {
     const w = canvas.width / dpr(), h = canvas.height / dpr();
@@ -16,11 +18,11 @@ export function mount(el, inputs, handlers) {
     const sx = Math.floor((-ox / scale) / cell) - 1, sy = Math.floor((-oy / scale) / cell) - 1;
     const cols = Math.ceil(w / cell / scale) + 3, rows = Math.ceil(h / cell / scale) + 3;
     for (let i = sx; i < sx + cols; i++) for (let j = sy; j < sy + rows; j++) {
-      ctx.fillStyle = (i + j) % 2 ? 'rgba(255,255,255,.05)' : 'rgba(255,255,255,.02)';
+      ctx.fillStyle = (i + j) % 2 ? token('--muted', '#f4f4f5') : token('--background', '#fff');
       ctx.fillRect(i * cell, j * cell, cell, cell);
     }
-    ctx.fillStyle = '#3b82f6'; ctx.fillRect(-32, -32, 64, 64);
-    ctx.strokeStyle = 'rgba(255,255,255,.6)'; ctx.lineWidth = 1 / scale; ctx.strokeRect(-32, -32, 64, 64);
+    ctx.fillStyle = token('--selected', '#6B46F2'); ctx.fillRect(-32, -32, 64, 64);
+    ctx.strokeStyle = token('--foreground', '#111'); ctx.lineWidth = 1 / scale; ctx.strokeRect(-32, -32, 64, 64);
     ctx.restore();
   };
   const resize = () => { const r = el.getBoundingClientRect(); canvas.width = r.width * dpr(); canvas.height = r.height * dpr(); ctx.setTransform(dpr(), 0, 0, dpr(), 0, 0); draw(); };
@@ -40,5 +42,10 @@ export function mount(el, inputs, handlers) {
 
   requestAnimationFrame(() => { const r = el.getBoundingClientRect(); ox = r.width / 2; oy = r.height / 2; resize(); });
   window.addEventListener('resize', resize);
-  return () => {};
+  // the page sets the zoom (a ZoomControl): zoom around the centre of the view
+  const zoomTo = (pct) => { const ns = Math.min(8, Math.max(0.2, pct / 100)); if (Math.abs(ns - scale) < 1e-3) return; const r = el.getBoundingClientRect(), cx = r.width / 2, cy = r.height / 2, k = ns / scale; ox = cx - (cx - ox) * k; oy = cy - (cy - oy) * k; scale = ns; draw(); };
+  canvas.addEventListener('dblclick', () => { zoomTo(100); handlers.view?.(100); });
+  new MutationObserver(draw).observe(document.documentElement, { attributes: true, subtree: true, attributeFilter: ['data-theme', 'data-skin'] });
+  if (inputs.zoom) requestAnimationFrame(() => zoomTo(Number(inputs.zoom)));
+  return (next) => { if (next.zoom) zoomTo(Number(next.zoom)); };
 }

package/registry/canvas-viewport.muten

@@ -1,11 +1,11 @@
-# CanvasViewport - a <canvas> host with pan (drag) + zoom (wheel), and a muten toolbar slot floating on top.
-# The PAGE can react to zoom via onView. The canvas draws a placeholder scene - edit src/components/CanvasHost.js.
-#   action onView(z: number) mutates zoom { zoom.set(z) }
-#   CanvasViewport(onView: onView) { Toolbar { … } }   # the slot renders over the canvas (pointer-events re-enabled)
-# shadcn-for-muten · Custom (the canvas) wrapped in a muten part (the overlay). host JS is src/components/CanvasHost.js.
-part CanvasViewport(onView: action) {
-  Stack class("canvas-viewport") {
-    Custom CanvasHost on(view: $onView) class("canvas-host")
-    Stack class("canvas-overlay") { slot }
+# CanvasViewport - a canvas you move by dragging and zoom with the wheel (around the pointer), with muten content
+# floating over it (a Toolbar, a ZoomControl). The page can set the zoom and hears it change; a double click goes
+# back to 100 %. The placeholder scene is in canvas-viewport.js: replace its draw() with yours.
+#   CanvasViewport(zoom: zoom, onView: setZoom) { Toolbar { … } }
+# shadcn-for-muten · part + Custom (CanvasHost) · kit.css (.cx-canvas) · host JS canvas-viewport.js.
+part CanvasViewport(zoom: number = 100, height: text = "360px", onView: action) {
+  Stack class("cx-canvas") data(slot: "canvas-viewport") style(h: "{$height}") {
+    Custom CanvasHost inputs(zoom: $zoom) on(view: $onView) class("cx-canvas-host")
+    Stack class("cx-canvas-over") { slot }
   }
 }

package/registry/card-field.muten

@@ -0,0 +1,4 @@
+# CardField - card number with its brand, expiry, code; validates (Luhn) and says what was saved.
+#   CardField(onSave: saved)
+# shadcn-for-muten · part over KitWidget (kit core).
+part CardField(onSave: action) { Custom KitWidget inputs(name: "cardField") on(action: $onSave) class("cx-cardform") }

package/registry/card.muten

@@ -1,8 +1,12 @@
-# Card + its sub-components. Compose: Card { CardHeader { CardTitle(label) CardDescription(label) } CardContent { … } CardFooter { … } }
-# shadcn-for-muten · part · no deps · styles via the semantic .card* classes in globals.css.
-part Card() { Section class("card") { slot } }
-part CardHeader() { Stack class("card-header") { slot } }
-part CardTitle(label: text) { Title "{$label}" h3 class("card-title") }
-part CardDescription(label: text) { Span "{$label}" class("card-description") }
-part CardContent() { Stack class("card-content") { slot } }
-part CardFooter() { Stack class("card-footer") { slot } }
+# Card - a surface that only CONVEYS: header (title, description, an action at the corner), content, footer.
+# Decisions go in a modal, not on the card.
+#   Card(size: "sm") { CardHeader { CardTitle(label: "Hoy")  CardDescription(label: "3 citas")  CardAction { Btn(variant: "ghost", size: "icon-sm", onClick: more) { Icon "lucide:ellipsis" } } }  CardContent { … } }
+# size: default | sm (compact: items edge to edge)
+# shadcn-for-muten · part · no deps · Nova (.cn-card) + kit.css (size sm).
+part Card(size: text = "default") { Section class("cn-card group/card") data(slot: "card", size: $size) { slot } }
+part CardHeader() { Stack class("cn-card-header group/card-header") data(slot: "card-header") { slot } }
+part CardTitle(label: text) { Title "{$label}" h3 class("cn-card-title") data(slot: "card-title") }
+part CardDescription(label: text) { Text "{$label}" class("cn-card-description") data(slot: "card-description") }
+part CardAction() { Stack class("cn-card-action") data(slot: "card-action") { slot } }
+part CardContent() { Stack class("cn-card-content") data(slot: "card-content") { slot } }
+part CardFooter() { Stack class("cn-card-footer") data(slot: "card-footer") { slot } }

package/registry/carousel.js

@@ -1,37 +1,6 @@
-// Carousel host component (muten Custom). inputs: { items } (a list). Renders one slide per item with prev/next.
-// Slides show the item as text; edit this file for image/rich slides (e.g. an <img> per item).
-export function mount(el, inputs, handlers) {
-  const viewport = document.createElement('div'); viewport.className = 'carousel-viewport';
-  const track = document.createElement('div'); track.className = 'carousel-track';
-  viewport.appendChild(track); el.appendChild(viewport);
-  const SVG = (p) => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + p + '</svg>';
-  const prev = document.createElement('button'); prev.type = 'button'; prev.className = 'carousel-prev'; prev.innerHTML = SVG('<path d="m15 18-6-6 6-6"/>'); // lucide chevron-left
-  const next = document.createElement('button'); next.type = 'button'; next.className = 'carousel-next'; next.innerHTML = SVG('<path d="m9 18 6-6-6-6"/>'); // lucide chevron-right
-  el.appendChild(prev); el.appendChild(next);
-
-  let idx = 0;
-  let items = [];
-  // Move by exact viewport widths (px). A `%` translate is relative to the multi-slide track, not the viewport.
-  const paint = () => {
-    const w = viewport.clientWidth || el.clientWidth || 0;
-    for (const s of track.children) s.style.width = w + 'px';
-    track.style.transform = 'translateX(' + (-idx * w) + 'px)';
-  };
-  const build = (list) => {
-    items = Array.isArray(list) ? list : [];
-    track.innerHTML = '';
-    for (const it of items) {
-      const s = document.createElement('div'); s.className = 'carousel-slide';
-      s.textContent = (it && typeof it === 'object') ? (it.label ?? it.title ?? '') : String(it);
-      track.appendChild(s);
-    }
-    if (idx > items.length - 1) idx = Math.max(0, items.length - 1);
-    paint();
-  };
-  window.addEventListener('resize', paint);
-  prev.addEventListener('click', () => { if (items.length) { idx = (idx - 1 + items.length) % items.length; paint(); } });
-  next.addEventListener('click', () => { if (items.length) { idx = (idx + 1) % items.length; paint(); } });
-
-  build(inputs.items);
-  return (n) => build(n.items);
+// CarouselBehavior (muten Custom) - the kit's carousel behaviour over the slides muten rendered (kit/collections.js).
+export function mount(el, inputs) {
+  const root = el.closest('.cx-car');
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => c.carouselBehavior(root, inputs, core));
+  return () => {};
 }

package/registry/carousel.muten

@@ -1,6 +1,13 @@
-# Carousel - a slide carousel over a list. The PAGE owns the slides (list<text>):
-#   state { slides = ["1", "2", "3", "4", "5"] : list<text> }   Carousel(items: slides)
-# shadcn-for-muten · Custom · host JS is src/components/Carousel.js. Slides render as text; edit the .js for images/rich slides.
-part Carousel(items: list) {
-  Custom Carousel inputs(items: $items) class("carousel")
+# Carousel - one component, options instead of copies. The slides are your muten content (CarouselSlide).
+#   perView "4" or "2,4" (phone, wider) · center "on" (the active one centred, neighbours peeking) · loop "on" ·
+#   autoplay ms (pauses on hover, focus, touch, hidden tab; off with reduced motion; its own pause button) ·
+#   indicator dots | progress | count | thumbs · arrows bar | overlay
+#   Carousel(label: "Productos", perView: "2,4") { each products as p { CarouselSlide { … } } }
+# shadcn-for-muten · part + Custom (CarouselBehavior, kit collections) · kit.css (.cx-car).
+part Carousel(label: text, perView: text = "1", center: text = "", loop: text = "", autoplay: number = 0, indicator: text = "dots", arrows: text = "bar") {
+  Section class("cx-car") aria(label: $label, roledescription: "carrusel") {
+    Stack class("cx-car-view") { Stack class("cx-car-track") { slot } }
+    Custom Carousel inputs(perView: $perView, center: $center, loop: $loop, autoplay: $autoplay, indicator: $indicator, arrows: $arrows) class("cx-car-behavior")
+  }
 }
+part CarouselSlide() { Stack class("cx-car-slide") { slot } }

package/registry/chatbot.muten

@@ -0,0 +1,9 @@
+# Chatbot - the assistant: greets, offers suggestions, «thinks», writes the answer live (with Stop), can carry an
+# action button inside the answer (onAction gets its label), rated with 👍 / 👎. answers: {match (regex), text, action,
+# primary}; the one without match is the fallback.
+#   Chatbot(title: "Rober", greeting: "Hola, soy Rober…", suggestions: @ideas, answers: @answers, onAction: act)
+# demo "on": it taps its own suggestions in turn and answers them live, for a landing; the first touch stops it.
+# shadcn-for-muten · part over KitWidget (kit core).
+part Chatbot(title: text, greeting: text, suggestions: list, answers: list, demo: text = "", onAction: action) {
+  Custom KitWidget inputs(name: "chatbot", title: $title, greeting: $greeting, suggestions: $suggestions, answers: $answers, demo: $demo) on(action: $onAction) class("cx-bot")
+}

package/registry/checklist.muten

@@ -0,0 +1,6 @@
+# Checklist - first steps with progress: done steps checked, the next ones with their action (onAction gets its label).
+#   Checklist(title: "Tu tienda en 5 pasos", steps: @steps, onAction: act)     steps: {title, desc, done, action}
+# shadcn-for-muten · part over KitWidget (kit core).
+part Checklist(title: text, steps: list, onAction: action) {
+  Custom KitWidget inputs(name: "checklist", title: $title, steps: $steps) on(action: $onAction) class("cx-onboard")
+}

package/registry/choice-list.muten

@@ -0,0 +1,16 @@
+# ChoiceList - Items you choose one of: a real radio group (arrows move and pick). The page owns the current value.
+#   ChoiceList(label: "Servicio") {
+#     ChoiceItem(value: "cut", current: service, onPick: pick, title: "Corte clásico", description: "30 min", price: "$25.000")
+#   }
+# shadcn-for-muten · part + Custom (RovingBehavior) · kit.css (.cx-radiogroup, .cx-radio).
+part ChoiceList(label: text) { Stack class("cx-radiogroup") aria(role: "radiogroup", label: $label) { slot  RovingBehavior() } }
+part ChoiceItem(value: text, current: text, onPick: action, title: text, description: text = "", price: text = "") {
+  Button -> $onPick($value) class("cn-item cn-item-variant-outline cn-item-size-sm group/item cx-item cx-choice") data(slot: "item") aria(role: "radio", checked: $value == $current) {
+    Span "" class("cx-radio")
+    Stack class("cn-item-content") data(slot: "item-content") {
+      Span "{$title}" class("cn-item-title") data(slot: "item-title")
+      Text "{$description}" class("cn-item-description") data(slot: "item-description")
+    }
+    Span "{$price}" class("cx-price")
+  }
+}

package/registry/code.js

@@ -1,14 +1,16 @@
-// Code block host (muten Custom). inputs: { code, lang }. Highlights with the muten grammar via the shared
-// highlight.js (lazy-loaded, so the token rules live in one place). See code.muten.
+// Code (muten Custom) - a code block: a bar with the language (or a title) and Copiar, then the code highlighted with
+// the muten grammar (any other lang shows plain). inputs: code, lang, title. The highlighter is the shared
+// highlight.js, loaded lazily so the token rules live in one place.
 export function mount(el, inputs) {
-  const code = String(inputs.code == null ? "" : inputs.code);
-  const lang = inputs.lang == null ? "muten" : String(inputs.lang);
-  el.className = "rounded-lg border bg-muted/40 px-4 py-3 font-mono text-foreground overflow-x-auto";
-  const pre = document.createElement("pre");
-  pre.className = "m-0 text-sm leading-relaxed";
-  pre.textContent = code;                                  // plain until the highlighter loads (progressive)
-  el.appendChild(pre);
-  import("@muten/shadcn/registry/highlight.js")
-    .then((m) => { pre.innerHTML = m.highlight(code, lang); })
-    .catch(() => { /* keep the plain text */ });
+  const code = String(inputs.code ?? ''), lang = String(inputs.lang || 'muten');
+  el.innerHTML = '<div class="cx-code-bar"><span></span><button type="button" class="cn-button cn-button-variant-outline cn-button-size-xs">Copiar</button></div><pre class="cx-code-pre"><code></code></pre>';
+  el.querySelector('.cx-code-bar span').textContent = inputs.title || lang;
+  const box = el.querySelector('code'), copy = el.querySelector('button');
+  box.textContent = code;
+  if (lang === 'muten') import('@muten/shadcn/registry/highlight.js').then((m) => { box.innerHTML = m.highlight(code, lang); }).catch(() => {});
+  copy.onclick = () => {
+    const done = (t) => { copy.textContent = t; setTimeout(() => { copy.textContent = 'Copiar'; }, 1400); };
+    try { navigator.clipboard.writeText(code).then(() => done('Copiado'), () => { getSelection().selectAllChildren(box); done('Selecciónalo'); }); } catch { getSelection().selectAllChildren(box); done('Selecciónalo'); }
+  };
+  return (next) => { const c = String(next.code ?? ''); if (c === box.textContent) return; box.textContent = c; if (lang === 'muten') import('@muten/shadcn/registry/highlight.js').then((m) => { box.innerHTML = m.highlight(c, lang); }); };
 }

package/registry/code.muten

@@ -1,7 +1,6 @@
-# Code - a syntax-highlighted code block. `lang` defaults to "muten" (the muten grammar, matching the VS Code
-# extension); pass another lang to render plain. NOTE: muten strings can't hold `{` or `"`, so feed muten source
-# from a .md file (a Markdown component) or a .js snippet, not an inline muten string.
-# shadcn-for-muten · Custom · host JS is src/components/Code.js (copied by `muten add code`); shares highlight.js.
-part Code(code: text, lang: text) {
-  Custom Code inputs(code: $code, lang: $lang) class("code-block")
-}
+# Code - a code block with a bar (the language or a title) and Copiar; muten code comes highlighted with the same
+# grammar as the editor. muten strings cannot hold quotes or braces, so pass the code from a state (or a store),
+# not inline. For other languages pass lang: it shows plain.
+#   state { snippet = "…" : text }   Code(code: snippet, title: "src/app.muten")
+# shadcn-for-muten · Custom · kit.css (.cx-code) · host JS code.js (shares highlight.js).
+part Code(code: text, lang: text = "muten", title: text = "") { Custom Code inputs(code: $code, lang: $lang, title: $title) class("cx-code") }

package/registry/collapsible.muten

@@ -1,14 +1,18 @@
-# Collapsible - a trigger + content that animates open. The PAGE owns the bool + the toggle action.
-#   state { open = false : bool }   action t mutates open { open.toggle() }   Collapsible(label: "…", open: open, onToggle: t) { … }
-# shadcn-for-muten · part · no deps · the content always renders and animates open via the .collapsible-panel grid trick.
-part Collapsible(label: text, open: bool, onToggle: action) {
-  Stack class("collapsible") {
-    Button -> $onToggle aria(expanded: $open) class("collapsible-trigger") {
-      Span "{$label}"
-      Icon "lucide:chevrons-up-down" class("size-4 text-muted-foreground")
+# Collapsible - one block that opens and closes: a trigger line and the content under it, folding to its exact
+# height (200 ms) while the chevron turns. The page owns the bool. For several stacked questions use Accordion.
+#   state { more = false : bool }   action toggleMore() mutates more { more.toggle() }
+#   Collapsible(label: "Más opciones", open: more, onToggle: toggleMore) { … }
+#   Collapsible(label: "3 pedidos entregados", hint: "Ver", open: done, onToggle: toggleDone) { … }
+# shadcn-for-muten · part · no deps · kit.css (.cx-coll, the same fold as Accordion).
+part Collapsible(label: text, open: bool, onToggle: action, hint: text = "") {
+  Stack class("cx-coll") data(slot: "collapsible", open: $open) {
+    Button -> $onToggle class("cx-coll-trigger") data(slot: "collapsible-trigger") aria(expanded: $open) {
+      Span "{$label}" class("cx-coll-label")
+      Span "{$hint}" class("cx-coll-hint")
+      Icon "lucide:chevron-down" class("cx-acc-chev")
     }
-    Stack class("collapsible-panel", "collapsible-panel-open" when $open) {
-      Stack class("collapsible-content") { slot }
+    Stack class("cn-accordion-content cx-acc-fold") data(slot: "collapsible-content", open: $open) aria(role: "region") {
+      Stack class("cn-accordion-content-inner cx-coll-inner") { slot }
     }
   }
 }