@muten/shadcn 0.0.7 → 0.1.0

package/registry/folder-picker.js

@@ -1,18 +1,16 @@
-// FolderPicker host (muten Custom). inputs: { label }. handlers: { pick(folderName) }.
-// Uses the File System Access API (showDirectoryPicker) to connect a local folder; emits its name. The directory
-// handle stays here in JS - edit this file to read/write files in the chosen folder (the studio's "connect folder").
-export function mount(el, inputs, handlers) {
-  const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'btn btn-outline gap-2';
-  const idle = inputs.label == null ? 'Connect folder' : String(inputs.label);
-  btn.textContent = idle;
-  el.appendChild(btn);
-
+// FolderPicker (muten Custom) - connects a folder of the computer (the File System Access API, Chromium browsers): a
+// button that, once a folder is chosen, shows its name. The folder's handle stays here for reading and writing.
+// inputs: label. handlers: pick(folder name). Where the browser cannot, the button says so instead of failing.
+export function mount(el, inputs, on) {
+  const ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>';
+  const idle = inputs.label || 'Conectar carpeta';
+  el.innerHTML = `<button type="button" data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-default group/button cx-folder-btn">${ICON}<span></span></button><p class="cx-note cx-folder-msg" aria-live="polite"></p>`;
+  const btn = el.querySelector('button'), label = btn.querySelector('span'), msg = el.querySelector('.cx-folder-msg');
+  label.textContent = idle;
+  if (!window.showDirectoryPicker) { btn.disabled = true; msg.textContent = 'Este navegador no deja elegir carpetas: usa Chrome o Edge.'; }
   btn.addEventListener('click', async () => {
-    if (!window.showDirectoryPicker) { btn.textContent = 'Not supported in this browser'; return; }
-    try {
-      const handle = await window.showDirectoryPicker();
-      btn.textContent = handle.name;
-      if (handlers.pick) handlers.pick(handle.name);
-    } catch (e) { /* user cancelled */ }
+    try { const handle = await window.showDirectoryPicker(); label.textContent = handle.name; btn.dataset.connected = ''; el._folder = handle; on.pick?.(handle.name); }
+    catch { /* the person closed the picker */ }
   });
+  return () => {};
 }

package/registry/folder-picker.muten

@@ -1,8 +1,5 @@
-# Folder Picker - connect a local folder via the File System Access API (showDirectoryPicker). The PAGE gets the
-# folder name; the directory handle stays in the host JS for reading/writing:
-#   state { folder = "" : text }   action onPick(name: text) mutates folder { folder.set(name) }
-#   FolderPicker(label: "Connect folder", onPick: onPick)
-# shadcn-for-muten · Custom · host JS is src/components/FolderPicker.js (copied by `muten add folder-picker`).
-part FolderPicker(label: text, onPick: action) {
-  Custom FolderPicker inputs(label: $label) on(pick: $onPick) class("inline-flex")
-}
+# FolderPicker - connects a folder of the computer (Chrome and Edge): a button that shows the folder's name once it
+# is chosen; where the browser cannot, it says so under the button instead of failing.
+#   FolderPicker(label: "Conectar carpeta", onPick: setFolder)
+# shadcn-for-muten · Custom · host JS folder-picker.js.
+part FolderPicker(label: text = "Conectar carpeta", onPick: action) { Custom FolderPicker inputs(label: $label) on(pick: $onPick) class("cx-folder-host") }

package/registry/gradient-blinds.muten

@@ -1,13 +1,6 @@
-# GradientBlinds - an animated WebGL gradient with diagonal blinds and a spotlight that follows the cursor
-# (ported from React Bits). Use it as a hero background: make it the first child of a
-# `relative overflow-hidden` box and it fills the box, then fades out at the bottom to blend into the page.
-#   Stack class("relative overflow-hidden") {
-#     GradientBlinds(colors: "#FF9FFC,#5227FF")
-#     Section class("relative z-10 ...") { ...hero content... }
-#   }
-# `colors` = a comma-separated list of hex stops. Angle, blind count, spotlight and grain are tuned defaults in
-# the ejected host JS - edit src/components/GradientBlinds.js to change them.
-# shadcn-for-muten · Custom · needs `ogl` (npm i ogl). Host JS: src/components/GradientBlinds.js.
-part GradientBlinds(colors: text) {
-  Custom GradientBlinds inputs(colors: $colors) class("absolute inset-0 z-0 pointer-events-none opacity-75")
-}
+# GradientBlinds - an animated gradient behind a hero: diagonal blinds and a light that follows the pointer, drawn on
+# the GPU (WebGL, through `ogl`: npm i ogl). Make it the first child of the hero and it fills the hero, fading out
+# at the bottom into the page; the content goes on top. colors: hex stops separated by commas.
+#   Stack class("cx-hero-blinds") { GradientBlinds(colors: "#9B80FF,#6B46F2")  Stack class("…") { … } }
+# shadcn-for-muten · Custom · needs ogl · host JS gradient-blinds.js.
+part GradientBlinds(colors: text = "#9B80FF,#6B46F2") { Custom GradientBlinds inputs(colors: $colors) class("cx-blinds") }

package/registry/hover-card.muten

@@ -1,9 +1,7 @@
-# Hover Card - richer content shown on hover (pure CSS, no state). label is the trigger; the slot is the card.
-#   HoverCard(label: "@muten") { Span "The AI-first frontend DSL." class("text-sm") }
-# shadcn-for-muten · part · no deps · styles via the semantic .hover-card* classes in globals.css.
-part HoverCard(label: text) {
-  Stack class("hover-card") {
-    Span "{$label}" class("hover-card-trigger")
-    Stack class("hover-card-content") { slot }
-  }
-}
+# HoverCard - a preview that shows while the pointer rests on a name or a link (or it gets the focus), and goes
+# away when it leaves. Only a preview: whatever matters must also be reachable without hovering.
+#   HoverCard { HoverCardTrigger { Link "@elroble" -> "/…" }  HoverCardContent { … } }
+# shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (.cn-hover-card-content) + kit.css.
+part HoverCard() { Stack class("cx-ov") data(slot: "hover-card") { slot  OverlayBehavior(kind: "hover") } }
+part HoverCardTrigger() { Stack class("cx-ov-trigger") data(slot: "hover-card-trigger") { slot } }
+part HoverCardContent(align: text = "center", width: text = "16rem") { Stack class("cn-hover-card-content cx-ov-content") data(slot: "hover-card-content", align: $align) style(w: "{$width}") { slot } }

package/registry/image-upload.js

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

package/registry/image-upload.muten

@@ -0,0 +1,8 @@
+# ImageUpload - tap, drag or paste an image: it is checked (type, size), decoded BEFORE drawing (no black squares),
+# cropped square, shrunk to WebP and uploaded with real progress to uploadUrl - or handed back as a data URL.
+# onReady gets {url | dataUrl, width, height, kb} ("" when removed).
+#   ImageUpload(title: "Sube la foto del servicio", uploadUrl: "/media", onReady: setPhoto)
+# shadcn-for-muten · Custom (kit dates) · host JS image-upload.js.
+part ImageUpload(title: text = "Sube la foto", hint: text = "", maxMb: number = 10, size: number = 1200, uploadUrl: text = "", sample: text = "", onReady: action) {
+  Custom ImageUpload inputs(title: $title, hint: $hint, maxMb: $maxMb, size: $size, uploadUrl: $uploadUrl, sample: $sample) on(ready: $onReady) class("cx-up-host")
+}

package/registry/indicator.muten

@@ -0,0 +1,5 @@
+# Indicator - the dot on a corner that says «something here needs you». Inside a Btn with a tone, or on an Avatar.
+#   Btn(size: "icon-sm", variant: "ghost", tone: "note", onClick: open) { Icon "lucide:quote"  Indicator(tone: "note") }
+# tone: "" (selected) | wait | bad | info | note
+# shadcn-for-muten · part · no deps · kit.css (.cx-indicator).
+part Indicator(tone: text = "") { Span "" class("cx-indicator") data(slot: "indicator", tone: $tone) aria(hidden: "true") }

package/registry/input-group.muten

@@ -1,4 +1,27 @@
-# InputGroup - an input with a leading icon / addon in one bordered field:
-#   InputGroup { Icon "lucide:search"  SearchField bind(q) "Search..." class("input-group-control") }
-# shadcn-for-muten · part · no deps · uses .input-group from globals.css.
-part InputGroup() { Stack class("input-group") { slot } }
+# InputGroup - a field with things inside its border: a prefix ($, an icon), a suffix (COP), a clear button.
+#   InputGroup { InputAddon { Span "$" }  GroupInput(value: price)  InputAddon(align: "inline-end") { Span "COP" } }
+# SearchInput - the search with a magnifier and a × that shows only with text (Esc also clears).
+#   SearchInput(value: q, placeholder: "Nombre o teléfono", onClear: clearQ)
+# Anything goes in an addon: an Icon, InputGroupText («https://», «COP», «@»), an InputGroupButton, a Kbd, a Spinner.
+# align: inline-start | inline-end (beside the text) | block-start | block-end (a row above / below, for a GroupTextArea).
+#   InputGroup { GroupTextArea(value: msg, placeholder: "Escribe…")  InputAddon(align: "block-end") { InputGroupText(label: "0/160")  InputGroupButton(label: "Enviar", onClick: send) { Icon "lucide:send" } } }
+# InputGroup and SearchInput take size (default | xl | 2xl) and variant (default | filled) like Input.
+# shadcn-for-muten · part · no deps · Nova (.cn-input-group).
+part InputGroup(size: text = "default", variant: text = "default") { Stack class("cn-input-group group/input-group") data(slot: "input-group", size: $size, variant: $variant) aria(role: "group") { slot } }
+part InputAddon(align: text = "inline-start") { Stack class("cn-input-group-addon cn-input-group-addon-align-{$align}") data(slot: "input-group-addon", align: $align) { slot } }
+part GroupInput(value: text, placeholder: text = "") { SearchField bind($value) "{$placeholder}" class("cn-input cn-input-group-input cx-num") data(slot: "input-group-control") }
+part SearchInput(value: text, placeholder: text = "Buscar", onClear: action, size: text = "default", variant: text = "default") {
+  Stack class("cn-input-group group/input-group") data(slot: "input-group", size: $size, variant: $variant) aria(role: "group") {
+    Stack class("cn-input-group-addon cn-input-group-addon-align-inline-start") data(slot: "input-group-addon", align: "inline-start") { Icon "lucide:search" }
+    SearchField bind($value) "{$placeholder}" class("cn-input cn-input-group-input") data(slot: "input-group-control")
+    Stack class("cn-input-group-addon cn-input-group-addon-align-inline-end") data(slot: "input-group-addon", align: "inline-end") {
+      when $value != "" { Button -> $onClear class("cn-button cn-button-variant-ghost cn-button-size-icon-xs group/button cx-clear") aria(label: "Limpiar búsqueda") { Icon "lucide:x" } }
+    }
+    FieldBehavior(kind: "search", message: "")
+  }
+}
+part InputGroupText(label: text) { Span "{$label}" class("cn-input-group-text") data(slot: "input-group-text") }
+part InputGroupButton(onClick: action, variant: text = "ghost", size: text = "xs", label: text = "") {
+  Button -> $onClick class("cn-button cn-button-variant-{$variant} cn-input-group-button cn-input-group-button-size-{$size} group/button") data(slot: "button", size: $size, name: $label) aria(label: $label) { slot }
+}
+part GroupTextArea(value: text, placeholder: text = "") { Textarea bind($value) "{$placeholder}" class("cn-textarea cn-input-group-textarea") data(slot: "input-group-control") }

package/registry/input-otp.js

@@ -1,36 +1,9 @@
-// Input OTP host component (muten Custom). inputs: { value, length }. handlers: { input(value) }.
-// Builds `length` single-character boxes; typing/paste/backspace move focus and emit the joined value.
-export function mount(el, inputs, handlers) {
-  const len = Number(inputs.length ?? 6);
-  const boxes = [];
-  const emit = () => { if (handlers.input) handlers.input(boxes.map((b) => b.value).join('')); };
-
-  for (let i = 0; i < len; i++) {
-    const box = document.createElement('input');
-    box.className = 'otp-slot';
-    box.maxLength = 1;
-    box.inputMode = 'numeric';
-    box.autocomplete = 'one-time-code';
-    box.addEventListener('input', () => {
-      box.value = box.value.replace(/\D/g, '').slice(-1);
-      if (box.value && i < len - 1) boxes[i + 1].focus();
-      emit();
-    });
-    box.addEventListener('keydown', (e) => {
-      if (e.key === 'Backspace' && !box.value && i > 0) boxes[i - 1].focus();
-    });
-    box.addEventListener('paste', (e) => {
-      e.preventDefault();
-      const text = ((e.clipboardData && e.clipboardData.getData('text')) || '').replace(/\D/g, '').slice(0, len);
-      for (let j = 0; j < len; j++) boxes[j].value = text[j] || '';
-      (boxes[Math.min(text.length, len - 1)] || boxes[0]).focus();
-      emit();
-    });
-    boxes.push(box);
-    el.appendChild(box);
-  }
-
-  const set = (val) => { const s = String(val == null ? '' : val); boxes.forEach((b, i) => { b.value = s[i] || ''; }); };
-  set(inputs.value);
-  return (next) => set(next.value);
+// InputOtp (muten Custom) - the verification code: slots, caret, checking / ok / bad, resend countdown
+// (kit/values.js otpField). The page checks the code: onInput gets it when complete; answer with state + message.
+export function mount(el, inputs, on) {
+  let update = null;
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => {
+    update = v.otpField(el, inputs, core, { complete: (code) => (on.input || on.complete)?.(code), resend: () => on.resend?.() });
+  });
+  return (next) => update?.(next);
 }

package/registry/input-otp.muten

@@ -1,7 +1,7 @@
-# Input OTP - N single-character boxes synced to one value. The PAGE owns the value (text):
-#   state { code = "" : text }   action setCode(v: text) mutates code { code.set(v) }
-#   InputOtp(value: code, length: 6, onInput: setCode)
-# shadcn-for-muten · Custom · host JS is src/components/InputOtp.js (copied by `muten add input-otp`).
-part InputOtp(value: text, length: number, onInput: action) {
-  Custom InputOtp inputs(value: $value, length: $length) on(input: $onInput) class("otp")
+# InputOtp - the verification code: slots in two groups, a caret, «Verificando…», ok / bad, a resend countdown. The
+# PAGE checks the code: onInput gets it when complete; answer with state ("ok" | "bad") and message.
+#   InputOtp(value: code, length: 6, hint: "Te lo enviamos al +57 300 123 4567", state: otpState, message: otpMsg, onInput: check)
+# shadcn-for-muten · Custom (kit values) · host JS input-otp.js.
+part InputOtp(value: text = "", length: number = 6, hint: text = "", state: text = "", message: text = "", resendIn: number = 30, onInput: action) {
+  Custom InputOtp inputs(value: $value, length: $length, hint: $hint, state: $state, message: $message, resendIn: $resendIn) on(input: $onInput) class("cx-otp-host")
 }

package/registry/input.muten

@@ -1,7 +1,8 @@
-# Input (part name Input - muten's text-input primitive is `SearchField`, so this wraps it) - a plug-and-play
-# text input. No class props: pass a state to `value` (two-way bound) + a placeholder.
-#   state { email = "" : text }
-#   Input(value: email, placeholder: "you@example.com")
-# For typed fields (email/number/password/date) or validation, use a `Form` over an entity instead.
-# shadcn-for-muten · part · no deps · wraps SearchField + the .input recipe.
-part Input(value: text, placeholder: text) { SearchField bind($value) "{$placeholder}" class("input") }
+# Input - a text field bound to a page text state. TextArea - the same for several lines (`Textarea` is muten's
+# primitive, so the part is TextArea).
+#   Input(value: name, placeholder: "Nombre o teléfono")      TextArea(value: notes, placeholder: "Notas para el equipo")
+# size: default (32) | xl (44) | 2xl (52) · variant: default (a line) | filled (the soft field of a landing: muted fill, no line).
+#   For a whole form, set them once on a FieldSet around it instead (field.muten).
+# shadcn-for-muten · part · no deps · Nova (.cn-input, .cn-textarea).
+part Input(value: text, placeholder: text = "", size: text = "default", variant: text = "default") { SearchField bind($value) "{$placeholder}" class("cn-input") data(slot: "input", size: $size, variant: $variant) }
+part TextArea(value: text, placeholder: text = "") { Textarea bind($value) "{$placeholder}" class("cn-textarea") data(slot: "textarea") }

package/registry/inspector.muten

@@ -1,19 +1,17 @@
-# Inspector / Property Grid - label:value rows in collapsible sections (the right panel of an editor). The PAGE
-# owns a bool per section + the value states; the row's slot is the value control (a NumberField, Switch, …):
-#   InspectorSection(label: "Transform", open: t, onToggle: tt) {
-#     InspectorRow(label: "X") { NumberField(value: x, …) }   InspectorRow(label: "Y") { NumberField(value: y, …) }
+# Inspector - the right panel of an editor: sections that fold (Transform, Apariencia), each a list of rows with the
+# property's name on the left and its control on the right (a NumberField, a Switch, a ColorPicker…). The page owns
+# whether each section is open.
+#   Inspector {
+#     InspectorSection(label: "Transform", open: tOpen, onToggle: toggleT) {
+#       InspectorRow(label: "Posición") { VectorField(…) }  InspectorRow(label: "Rotación") { NumberField(…) }
+#     }
 #   }
-# shadcn-for-muten · part · no deps · styles via the semantic .inspector* classes in globals.css.
-part Inspector() { Stack class("inspector") { slot } }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-insp, the Accordion's fold).
+part Inspector(label: text = "Propiedades") { Stack class("cx-insp") data(slot: "inspector") aria(label: $label) { slot } }
 part InspectorSection(label: text, open: bool, onToggle: action) {
-  Stack class("inspector-section") {
-    Button -> $onToggle aria(expanded: $open) class("inspector-section-header") {
-      Span "{$label}"
-      Icon "lucide:chevron-down" class("inspector-chevron", "inspector-chevron-open" when $open)
-    }
-    when $open { Stack class("inspector-body") { slot } }
+  Stack class("cx-insp-sec") data(open: $open) {
+    Button -> $onToggle class("cx-insp-head") aria(expanded: $open) { Span "{$label}"  Icon "lucide:chevron-down" class("cx-acc-chev") }
+    Stack class("cn-accordion-content cx-acc-fold") data(open: $open) aria(role: "region", label: $label) { Stack class("cn-accordion-content-inner cx-insp-body") { slot } }
   }
 }
-part InspectorRow(label: text) {
-  Stack class("inspector-row") { Span "{$label}" class("inspector-row-label")  slot }
-}
+part InspectorRow(label: text) { Stack class("cx-insp-row") { Span "{$label}" class("cx-insp-label")  Stack class("cx-insp-ctl") { slot } } }

package/registry/island.js

@@ -0,0 +1,7 @@
+// Island (muten Custom) - drives the kit's one floating notice (kit/core.js island): each new text morphs it.
+export function mount(el, inputs) {
+  let core = null, last = '';
+  const show = (i) => { if (!core || !i.text || i.text + i.tone === last) return; last = i.text + i.tone; core.island(i.tone || 'info', i.text, Number(i.ms) || 0); };
+  import('@muten/shadcn/registry/kit/core.js').then((c) => { core = c; show(inputs); });
+  return (next) => show(next);
+}

package/registry/island.muten

@@ -0,0 +1,5 @@
+# Island - answers what the person just did (saving, saved, error) and never stacks: it changes shape and text in
+# the same place, at the top of the app. Change `text` (and `tone`) and it morphs; ms > 0 hides it after that time.
+#   Island(tone: saveTone, text: saveText, ms: 2200)      tone: say (spinner) | done | info | error
+# Put KitLayer once in the app shell first. shadcn-for-muten · Custom (kit core) · host JS is island.js.
+part Island(tone: text = "info", text: text, ms: number = 0) { Custom Island inputs(tone: $tone, text: $text, ms: $ms) class("cx-island-host") }

package/registry/item.muten

@@ -1,7 +1,20 @@
-# Item + sub-components: a bordered row of media + content + actions.
-# Compose: Item { <Icon/Avatar> ItemContent { ItemTitle(label) ItemDescription(label) } <Button/Switch> }
-# shadcn-for-muten · part · no deps · styles via the semantic .item* classes in globals.css.
-part Item() { Stack class("item") { slot } }
-part ItemContent() { Stack class("item-content") { slot } }
-part ItemTitle(label: text) { Span "{$label}" class("item-title") }
-part ItemDescription(label: text) { Span "{$label}" class("item-description") }
+# Item - a row: media, content (title + description), actions, an optional footer. Lists are Items in an ItemGroup
+# with ItemSeparator between them.
+#   ItemGroup {
+#     Item { ItemMedia { Avatar(name: "Ana") }  ItemContent { ItemTitle(label: "Ana")  ItemDescription(label: "Corte · 9:00") }  ItemActions { Txt(value: "$25.000", variant: "strong") } }
+#     ItemSeparator()
+#   }
+# Item variant: default | outline | muted · size: default | sm | xs   ·   ItemMedia variant: default | icon | image
+# shadcn-for-muten · part · no deps · Nova (.cn-item).
+part Item(variant: text = "default", size: text = "default") { Stack class("cn-item cn-item-variant-{$variant} cn-item-size-{$size} group/item") data(slot: "item", size: $size) { slot } }
+part ItemGroup() { Stack class("cn-item-group group/item-group") data(slot: "item-group") aria(role: "list") { slot } }
+part ItemSeparator() { Stack class("cn-separator cn-separator-horizontal cn-item-separator") data(slot: "item-separator", orientation: "horizontal") aria(role: "separator") }
+part ItemMedia(variant: text = "default") { Stack class("cn-item-media cn-item-media-variant-{$variant}") data(slot: "item-media", variant: $variant) { slot } }
+part ItemContent() { Stack class("cn-item-content") data(slot: "item-content") { slot } }
+part ItemTitle(label: text) { Span "{$label}" class("cn-item-title") data(slot: "item-title") }
+part ItemDescription(label: text) { Text "{$label}" class("cn-item-description") data(slot: "item-description") }
+part ItemActions() { Stack class("cn-item-actions") data(slot: "item-actions") { slot } }
+part ItemFooter() { Stack class("cn-item-footer") data(slot: "item-footer") { slot } }
+# ItemImage - a photo as an Item's media (40×40, rounded). Price - an amount with tabular digits, pushed to the end.
+part ItemImage(src: text, alt: text = "") { Image "{$src}" alt("{$alt}") class("cx-media-img") }
+part Price(value: text) { Span "{$value}" class("cx-price") }

package/registry/kbd.muten

@@ -1,3 +1,3 @@
-# Kbd - a keyboard key hint. `Kbd { Span "Ctrl" }` or with class for combos.
-# shadcn-for-muten · part · no deps · uses .kbd from globals.css.
-part Kbd() { Span class("kbd") { slot } }
+# Kbd - a keyboard key.  Kbd { Span "⌘" }  Kbd { Span "K" }
+# shadcn-for-muten · part · no deps · Nova (.cn-kbd).
+part Kbd() { Stack class("cn-kbd") data(slot: "kbd") { slot } }