@muten/shadcn 0.2.2 → 0.2.4

package/kit.css

@@ -370,8 +370,10 @@ button.cn-item { width: 100%; font: inherit; text-align: left; cursor: pointer;
    shows nothing: the agenda behind is the context */
 .cx-modal[data-mode="anchor"] { width: min(24rem, calc(100% - 2rem)); max-height: min(38rem, calc(100dvh - 2rem)); border-radius: calc(var(--radius) * 1.4); overflow: hidden;
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 24px 60px -20px rgb(20 16 40 / .38);
-  transform: scale(.96); opacity: 0; transition: transform calc(var(--t-modal) * .5) ease, opacity calc(var(--t-modal) * .4) ease; }
-.cx-modal-root[data-open="true"] > .cx-modal[data-mode="anchor"] { transform: none; opacity: 1; transition: transform var(--t-pop, 180ms) var(--ease-out), opacity var(--t-pop, 180ms) var(--ease-out); }
+  transform: none; scale: .96; opacity: 0; transition: scale calc(var(--t-modal) * .5) ease, opacity calc(var(--t-modal) * .4) ease; }
+/* it grows in place with `scale`, never `transform`: a modal that was a sheet sits off-screen by its transform, and
+   animating that would fly the card in from the side */
+.cx-modal-root[data-open="true"] > .cx-modal[data-mode="anchor"] { scale: 1; opacity: 1; transition: scale var(--t-pop, 180ms) var(--ease-out), opacity var(--t-pop, 180ms) var(--ease-out); }
 .cx-modal-root:has(> .cx-modal[data-mode="anchor"]) > .cx-overlay { background: transparent; backdrop-filter: none; }
 /* teléfono = Drawer desde abajo, arrastrable */
 .cx-modal[data-mode="drawer"] { left: 0; right: 0; bottom: 0; margin-inline: auto; width: min(100%, 34rem); max-height: calc(100dvh - 3rem); border-radius: calc(var(--radius) * 1.8) calc(var(--radius) * 1.8) 0 0; overflow: hidden;
@@ -1494,6 +1496,12 @@ p.cx-text { margin: 0; }
 .cx-thumb[aria-pressed="true"] { background: transparent; box-shadow: 0 0 0 2px var(--selected); }
 .cx-car-card .cn-card-header { padding: 12px 12px 4px; }
 @media (max-width: 640px) { .cx-car { --per: var(--per-sm) !important; } }
+/* only: "phone": swiped on a phone; on anything wider the same slides stand still in a grid of the wide perView, with
+   no dots and no arrows (data-only is on the root from the first paint, so a wide screen never sees a track) */
+@media (min-width: 641px) {
+  .cx-car[data-only="phone"] .cx-car-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--per, 3), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-block: 0; margin-block: 0; }
+  .cx-car[data-only="phone"] .cx-car-bar, .cx-car[data-only="phone"] .cx-car-arrow { display: none; }
+}
 
 /* filters on the phone: search fills the row, «Filtros» beside it; chips scroll sideways */
 .cx-dt-host:has(.cx-fbtn-m) .cx-dt-tools { width: 100%; flex-wrap: nowrap; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",

package/registry/agenda.js

@@ -72,9 +72,17 @@ export function mount(el, inputs, on) {
     };
     map = data;
     const send = (name, value) => on[name]?.(typeof value === 'string' ? value : JSON.stringify(value));
-    // WHERE A CITA IS ON SCREEN ("x,y,w,h"), so the app can open it beside itself (Modal mode "anchor"): the shown chip
-    // or row that carries its id ('' when none is visible, e.g. opened from a command)
-    const whereIs = (id) => { const box = [...el.querySelectorAll(`[data-ev="${CSS.escape(String(id))}"]`)].map((x) => x.getBoundingClientRect()).find((r) => r.width > 0 && r.height > 0); return box ? [box.left, box.top, box.width, box.height].map(Math.round).join(',') : ''; };
+    // WHERE A CITA IS ON SCREEN ("x,y,w,h"), so the app can open it beside itself (Modal mode "anchor"): the very chip,
+    // or row that was tapped; else its chip or row (never the «now» card: a band as wide as the agenda, nothing to sit by);
+    // '' when none is visible (opened from a command)
+    let tapped = null;
+    el.addEventListener('click', (e) => { tapped = e.target.closest?.('[data-ev]') ?? null; }, true);
+    const boxOf = (x) => { const r = x?.getBoundingClientRect(); return r && r.width > 0 && r.height > 0 ? [r.left, r.top, r.width, r.height].map(Math.round).join(',') : ''; };
+    const whereIs = (id) => {
+      if (tapped?.isConnected && !tapped.matches('.cx-ag-nowcard') && tapped.dataset.ev === String(id) && boxOf(tapped)) return boxOf(tapped);
+      const own = [...el.querySelectorAll(`.cx-ag-ev[data-ev="${CSS.escape(String(id))}"], .cx-ag-row[data-ev="${CSS.escape(String(id))}"]`)].map(boxOf).find(Boolean);
+      return own ?? '';
+    };
     const day1 = (x) => ({ ...x, day: x.day instanceof Date ? iso(x.day) : x.day });
     el.innerHTML = '';
     api = kit.agenda(el, {

package/registry/carousel.muten

@@ -1,11 +1,12 @@
 # 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
+#   indicator dots | progress | count | thumbs · arrows bar | overlay | none ·
+#   only "phone" (a carousel on a phone; on a wider screen the same slides sit still in a grid of perView's wide count)
 #   Carousel(label: "Products", 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") {
+part Carousel(label: text, perView: text = "1", center: text = "", loop: text = "", autoplay: number = 0, indicator: text = "dots", arrows: text = "bar", only: text = "") {
+  Section class("cx-car") data(only: $only) 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")
   }

package/registry/modal-behavior.js

@@ -21,9 +21,11 @@ export function mount(el, inputs, on) {
   let anchor = String(inputs.anchor || '');
   // `want` is the mode the page asked for; `mode` is what it is now (an anchor with nothing to hold on to is a dialog)
   const wantsAnchor = () => mdl.dataset.want === 'anchor';
+  // what an earlier opening as a card left on the element: a sheet or a dialog opened next must not keep it
+  const unplace = () => { mdl.style.left = ''; mdl.style.top = ''; mdl.style.transformOrigin = ''; };
   const place = () => {
     const at = anchor.split(',').map(Number);
-    if (!wantsAnchor() || phone.matches || at.length !== 4 || at.some((n) => !Number.isFinite(n))) { if (wantsAnchor()) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog'; return; }
+    if (!wantsAnchor() || phone.matches || at.length !== 4 || at.some((n) => !Number.isFinite(n))) { unplace(); if (wantsAnchor()) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog'; return; }
     mdl.dataset.mode = 'anchor';
     const [x, y, w] = at, gap = 12, edge = 16;
     const width = mdl.offsetWidth, height = Math.min(mdl.scrollHeight, innerHeight - edge * 2);
@@ -36,7 +38,7 @@ export function mount(el, inputs, on) {
   const open = () => {
     if (isOpen) return; isOpen = true; placeFooter();
     if (auto) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog';
-    if (wantsAnchor()) place();
+    if (wantsAnchor()) place(); else unplace();
     lastFocus = document.activeElement;
     document.documentElement.classList.add('cx-locked');
     // on the phone, focusing a field would throw the keyboard over the sheet: focus the sheet itself