@muten/shadcn 0.2.2 → 0.2.3

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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/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