@muten/shadcn 0.2.1 → 0.2.3

package/kit.css

@@ -366,6 +366,15 @@ button.cn-item { width: 100%; font: inherit; text-align: left; cursor: pointer;
 /* entering is slower than leaving: it comes up from 6 px lower at 97 %, and goes in about 0.6 of the time */
 .cx-modal[data-mode="dialog"][data-state="open"], .cx-modal-root[data-open="true"] > .cx-modal[data-mode="dialog"] { transition: transform var(--t-modal) var(--ease-out), opacity calc(var(--t-modal) * .75) var(--ease-out); }
 .cx-modal[data-mode="dialog"][data-state="open"] { transform: translate(-50%, -50%); opacity: 1; }
+/* anchor = a card beside what was tapped (ModalBehavior places it); the backdrop stays to close on a tap outside, but
+   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: 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;
   transform: translateY(100%); transition: transform 450ms var(--ease-drawer); touch-action: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.2.1",
+  "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,6 +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 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, {
@@ -83,7 +94,7 @@ export function mount(el, inputs, on) {
       resize: inputs.resize === 'off' ? 'off' : 'on', moveAcross: inputs.moveAcross === 'off' ? 'off' : 'on', hour12: yes(inputs.hour12), timeZone: inputs.timeZone || '', phoneStrip: inputs.phoneStrip === 'dots' ? 'dots' : '', phoneView: ['list', 'day'].includes(inputs.phoneView) ? inputs.phoneView : '', blockScope: inputs.blockScope === 'all' ? 'all' : 'each',
       onAction: (id) => send('action', id),
       onCreate: (x) => send('create', day1(x)),
-      onOpen: on.open ? (e) => send('open', day1({ id: e.id, resource: e.resource, day: e.day, start: e.start, dur: e.dur, status: e.status || '' })) : null,
+      onOpen: on.open ? (e) => send('open', day1({ id: e.id, resource: e.resource, day: e.day, start: e.start, dur: e.dur, status: e.status || '', at: whereIs(e.id) })) : null,
       onBlock: on.block ? (b) => send('block', day1(b)) : null,
       onMove: (m) => send('move', day1(m)),
       onRange: (r) => send('range', { from: iso(r.from), to: iso(r.to), view: r.view }),

package/registry/agenda.muten

@@ -35,6 +35,7 @@ part AgendaDemo(resources: list, hours: list, events: list, blocks: list, action
 #   a appointment takes its resource plus every id in `with`. overlap "never" | "allow" overrides all capacities.
 #   resize "off" · moveAcross "off" (a backend that only moves day and time) · hour12 "yes" (3:00 PM) · timeZone (the shop's today and now) · phoneView "list" · phoneStrip "dots" (the phone's week: a dot per appointment in its colour) · blockScope "all" · placing [{…}]
 #   (the dashed appointment while the app's new-cita sheet is open) · events take tags [words] and photo; resources role, hideEmpty
+#   onOpen's json also carries `at` ("x,y,w,h", where the cita is on screen): give it to a Modal's `anchor` (mode "anchor")
 #   events take by "agent" (made by the app's assistant): agentMark (an image url) goes before their name, and agentLabel
 #   ("Booked by your assistant") under it on the phone's list and in what a screen reader says
 #   AgendaLive(resources: @team, hours: @hours, events: @citas, blocks: @blocks, free: @free, queue: @queue, closed: @closed,

package/registry/modal-behavior.js

@@ -16,9 +16,29 @@ export function mount(el, inputs, on) {
   const placeFooter = () => { const f = body.querySelector('.cx-modal-foot'); if (f) mdl.appendChild(f); };
   const focusables = () => [...mdl.querySelectorAll('button:not([disabled]), input, textarea, select, [tabindex]:not([tabindex="-1"])')].filter((x) => x.offsetParent !== null);
   const close = () => on.close?.();
+  // ANCHORED: a card beside what was tapped ("x,y,w,h" in the viewport): on its right when it fits, else its left, and
+  // kept on screen; it grows from that side. No anchor (or a phone) makes it the dialog.
+  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))) { 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);
+    const right = x + w + gap + width <= innerWidth - edge;
+    const left = right ? x + w + gap : Math.max(edge, x - gap - width);
+    const top = Math.min(Math.max(edge, y - 24), innerHeight - height - edge);
+    mdl.style.left = `${left}px`; mdl.style.top = `${top}px`;
+    mdl.style.transformOrigin = `${right ? 'left' : 'right'} ${Math.max(0, y - top + 12)}px`;
+  };
   const open = () => {
     if (isOpen) return; isOpen = true; placeFooter();
     if (auto) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog';
+    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
@@ -87,5 +107,9 @@ export function mount(el, inputs, on) {
   const endPull = () => { if (!pull) return; const d = pull; pull = null; if (!d.live) return; mdl.classList.remove('dragging'); ov?.classList.remove('dragging'); const v = d.dy / (performance.now() - d.t); if (d.dy > mdl.offsetHeight * 0.3 || v > 0.5) close(); else { mdl.style.transform = ''; if (ov) ov.style.opacity = ''; } };
   mdl.addEventListener('touchend', endPull); mdl.addEventListener('touchcancel', endPull);
   if (inputs.open === true || inputs.open === 'true') open();
-  return (next) => { (next.open === true || next.open === 'true') ? open() : shut(); };
+  // the card follows the window, and its own height when a step inside changes it (it only moves when it would leave
+  // the screen: the top stays by the cita while there is room below)
+  addEventListener('resize', () => { if (isOpen && wantsAnchor()) place(); });
+  new ResizeObserver(() => { if (isOpen && mdl.dataset.mode === 'anchor') place(); }).observe(body);
+  return (next) => { anchor = String(next.anchor || ''); (next.open === true || next.open === 'true') ? open() : shut(); };
 }

package/registry/modal-behavior.muten

@@ -1,4 +1,4 @@
 # ModalBehavior - what a modal needs that is not markup: the phone's Back closes it, Esc closes it, focus stays
 # inside, the page behind does not scroll, and on a phone the drawer drags down to close. Used by Modal; you never
 # call it yourself. shadcn-for-muten · Custom · host JS is modal-behavior.js.
-part ModalBehavior(open: bool, onClose: action) { Custom ModalBehavior inputs(open: $open) on(close: $onClose) class("cx-modal-behavior") }
+part ModalBehavior(open: bool, onClose: action, anchor: text = "") { Custom ModalBehavior inputs(open: $open, anchor: $anchor) on(close: $onClose) class("cx-modal-behavior") }

package/registry/modal.muten

@@ -7,14 +7,16 @@
 #     Field { … }
 #     ModalFooter { Btn(variant: "outline", onClick: done) class("cx-exit") { Span "Cancel" }  Btn(onClick: save) class("cx-go") { Span "Save changes" } }
 #   }
-# mode: auto | dialog | drawer | sheet (a panel from a side) · side: right | left | top | bottom (for sheet)
+# mode: auto | dialog | drawer | sheet (a panel from a side) | anchor (a card beside what was tapped)
+# side: right | left | top | bottom (for sheet) · anchor: "x,y,w,h" of what was tapped, in the viewport (for anchor;
+# with none it opens as a dialog). AgendaLive's onOpen sends it as `at`, so a cita opens beside itself.
 # role: dialog | alertdialog · dismiss: on | off (off: no ✕ and the backdrop does not close it; only its buttons do)
 # size: "" | tall (a list that pages)   ·   shadcn-for-muten · part + Custom (ModalBehavior) · kit.css (.cx-modal).
-part Modal(open: bool, onClose: action, title: text = "", description: text = "", mode: text = "auto", size: text = "", side: text = "right", role: text = "dialog", dismiss: text = "on") {
+part Modal(open: bool, onClose: action, title: text = "", description: text = "", mode: text = "auto", size: text = "", side: text = "right", role: text = "dialog", dismiss: text = "on", anchor: text = "") {
   Stack class("cx-modal-root") data(open: $open) {
     when $dismiss != "off" { Button "" -> $onClose class("cx-overlay") aria(label: "Close", hidden: "true") data(closes: "true", trl: "Close") }
     when $dismiss == "off" { Stack class("cx-overlay") aria(hidden: "true") }
-    Stack class("cx-modal") data(mode: $mode, size: $size, side: $side) aria(role: $role, modal: "true", label: $title) {
+    Stack class("cx-modal") data(mode: $mode, want: $mode, size: $size, side: $side) aria(role: $role, modal: "true", label: $title) {
       Stack class("cx-handle") aria(hidden: "true")
       Stack class("cx-modal-head") data(drag: "true") {
         Span "{$title}" class("cx-modal-title")
@@ -22,7 +24,7 @@ part Modal(open: bool, onClose: action, title: text = "", description: text = ""
       }
       when $dismiss != "off" { Btn(variant: "ghost", size: "icon-sm", label: "Close", onClick: $onClose) class("cx-modal-x") { Icon "lucide:x" } }
       Stack class("cx-modal-body") { slot }
-      ModalBehavior(open: $open, onClose: $onClose)
+      ModalBehavior(open: $open, onClose: $onClose, anchor: $anchor)
     }
   }
 }