@muten/shadcn 0.1.11 → 0.1.12

package/kit.css

@@ -432,8 +432,19 @@ html.cx-locked { overflow: hidden; }
 .cx-who b { display: block; font-weight: 500; }
 .cx-who small { color: var(--muted-foreground); font-size: 13px; }
 .cx-online { background: var(--success) !important; box-shadow: 0 0 0 2px var(--background); }
-.cx-tip { position: fixed; z-index: var(--z-toast); padding: 6px 10px; border-radius: calc(var(--radius) * .8); background: var(--foreground); color: var(--background); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 150ms ease, transform 150ms ease; }
+.cx-tip { position: fixed; z-index: var(--z-toast); padding: 6px 12px; border-radius: calc(var(--radius) - 2px); background: var(--foreground); color: var(--background); font-size: 12px; font-weight: 500; line-height: 1.35; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(3px) scale(.96); transform-origin: var(--ax, 50%) 100%; transition: opacity 120ms ease-out, transform 160ms cubic-bezier(.23, 1, .32, 1); }
+/* its arrow, toward the trigger (shadcn's TooltipArrow: the pill's own colour, a softly rounded square half out) */
+.cx-tip::after { content: ""; position: absolute; left: calc(var(--ax, 50%) - 5px); bottom: -4px; width: 10px; height: 10px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
+.cx-tip[data-side="bottom"] { transform: translateY(-3px) scale(.96); transform-origin: var(--ax, 50%) 0; }
+.cx-tip[data-side="bottom"]::after { bottom: auto; top: -4px; }
+.cx-tip[data-side="right"] { transform: translateX(-3px) scale(.96); transform-origin: 0 50%; }
+.cx-tip[data-side="right"]::after { left: -4px; top: calc(50% - 5px); bottom: auto; }
 .cx-tip[data-state="open"] { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: reduce) { .cx-tip { transition: opacity 120ms ease-out; transform: none; } }
+.cx-tip[data-side="right"] { transform: translateX(-4px); }
+.cx-tip[data-side="right"][data-state="open"] { transform: none; }
+/* after the first one, the names follow the pointer at once: no fade, no slide */
+.cx-tip[data-instant] { transition-duration: 0ms; }
 
 /* ── Fields ── */
 .cx-form { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 380px; }
@@ -4941,6 +4952,15 @@ a.cx-bc-item:hover { color: var(--foreground); }
 .cx-sb-label { white-space: nowrap; overflow: hidden; }
 .cx-sidebar[data-collapsed="true"] .cx-sb-label, .cx-sidebar[data-collapsed="true"] .cx-sb-glabel { display: block; opacity: 0; pointer-events: none; }
 .cx-sidebar[data-collapsed="true"] .cx-sb-count:not(:empty) { display: inline-grid; opacity: 0; }
+/* FOLDED, A SECTION'S TITLE BECOMES A SHORT LINE between its icons and the ones above: its words fade where they are and
+   its height closes with the fold (200 ms), so the icon column has no holes where the titles were. A group with no
+   title (the first) takes no room at all. */
+.cx-sidebar .cx-sb-glabel { position: relative; transition: opacity .16s ease, height .2s cubic-bezier(.22, 1, .36, 1), padding .2s cubic-bezier(.22, 1, .36, 1); }
+.cx-sidebar[data-collapsed="true"] .cx-sb-glabel { height: 17px; padding-top: 0; padding-bottom: 0; overflow: hidden; color: transparent; opacity: 1; }
+.cx-sidebar[data-collapsed="true"] .cx-sb-glabel::after { content: ""; position: absolute; left: 50%; top: 8px; width: 20px; height: 1px; margin-left: -10px; background: var(--border); }
+.cx-sidebar[data-collapsed="true"] .cx-sb-glabel:empty { display: none; }
+.cx-sidebar .cx-sb-group { transition: padding .2s cubic-bezier(.22, 1, .36, 1); }
+.cx-sidebar[data-collapsed="true"] .cx-sb-group { padding-top: 2px; padding-bottom: 2px; }
 /* A SECTION THAT LOADS: while its page is on its way (the router marks the link with data-loading), the row's icon
    turns into a small ring that spins, and turns back when the page is there. */
 @keyframes cx-sb-spin { to { transform: rotate(360deg); } }
@@ -4948,7 +4968,7 @@ a.cx-bc-item:hover { color: var(--foreground); }
 .cx-sb-item[data-loading] > .mu-icon { opacity: 0; transform: scale(.4) rotate(-90deg); }
 .cx-sb-item[data-loading]::before { content: ""; position: absolute; left: var(--sb-pad, 8px); top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cx-sb-spin .7s linear infinite; }
 @media (prefers-reduced-motion: reduce) {
-  .cx-sidebar .cx-sb-item, .cx-sb-label, .cx-sb-glabel, .cx-sb-count, .cx-sb-item > .mu-icon { transition: none; }
+  .cx-sidebar .cx-sb-item, .cx-sb-label, .cx-sb-glabel, .cx-sidebar .cx-sb-glabel, .cx-sb-count, .cx-sb-item > .mu-icon, .cx-tip { transition: none; }
   .cx-sb-item[data-loading]::before { animation-duration: 1.6s; }
 }
 /* THE MONOGRAM: a soft tile in the name's own hue, the letters in a deep shade of the same hue, a hairline ring of it.

package/package.json

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

package/registry/kit/core.js

@@ -182,10 +182,37 @@ watchReveal();
   };
 
 // ── tooltip on any [data-name] ──
+// shadcn's: the foreground pill with its arrow, above the trigger (beside it in a rail, below when there is no room).
+// It holds while the pointer travels inside its trigger (icon to label is not leaving, so it never blinks), it goes on
+// a press, and in a sidebar it only speaks while the rail is folded to icons: open, the label is already on screen.
   const tip = document.createElement('div'); tip.className = 'cx-tip'; tip.setAttribute('role', 'tooltip'); tip.hidden = true; lib.appendChild(tip);
-  const tipOn = (e) => { const w = e.target.closest?.('[data-name]'); if (!w || !w.dataset.name) return; /* an empty name (no data yet) says nothing */ tip.textContent = w.dataset.name; tip.hidden = false; const r = w.getBoundingClientRect(); if (w.dataset.side === 'right' || w.closest('[data-slot="sidebar"]')) { tip.style.left = (r.right + 8) + 'px'; tip.style.top = (r.top + r.height / 2 - tip.offsetHeight / 2) + 'px'; } else { place(tip, w, 'center', 6); tip.style.top = (r.top - tip.offsetHeight - 6) + 'px'; } requestAnimationFrame(() => tip.dataset.state = 'open'); };
-  const tipOff = (e) => { if (e.target.closest?.('[data-name]')) { tip.dataset.state = 'closed'; tip.hidden = true; } };
+  let tipFor = null;
+  const tipHide = () => { tipFor = null; tip.dataset.state = 'closed'; tip.hidden = true; };
+  const tipOn = (e) => {
+    const w = e.target.closest?.('[data-name]');
+    if (!w || !w.dataset.name || w === tipFor) return;   /* an empty name (no data yet) says nothing */
+    const rail = w.closest('[data-slot="sidebar"]');
+    if (rail && rail.dataset.collapsed !== 'true' && w.dataset.slot !== 'tooltip-trigger') return;
+    tipFor = w; tip.textContent = w.dataset.name; tip.hidden = false; tip.dataset.state = 'closed';
+    const r = w.getBoundingClientRect();
+    if (w.dataset.side === 'right' || rail) {
+      tip.dataset.side = 'right'; tip.style.left = (r.right + 8) + 'px'; tip.style.top = (r.top + r.height / 2 - tip.offsetHeight / 2) + 'px';
+    } else {
+      place(tip, w, 'center', 8);
+      const above = r.top - tip.offsetHeight - 8 > 8;
+      tip.dataset.side = above ? 'top' : 'bottom';
+      tip.style.top = (above ? r.top - tip.offsetHeight - 8 : r.bottom + 8) + 'px';
+      tip.style.setProperty('--ax', (r.left + r.width / 2 - parseFloat(tip.style.left)) + 'px');
+    }
+    requestAnimationFrame(() => { if (tipFor === w) tip.dataset.state = 'open'; });
+  };
+  const tipOff = (e) => {
+    const w = e.target.closest?.('[data-name]');
+    if (!w || w !== tipFor || (e.relatedTarget && w.contains(e.relatedTarget))) return;
+    tipHide();
+  };
   ['pointerover', 'focusin'].forEach((t) => document.addEventListener(t, tipOn)); ['pointerout', 'focusout'].forEach((t) => document.addEventListener(t, tipOff));
+  document.addEventListener('pointerdown', () => { if (tipFor) tipHide(); }, true);
 
 // ── island: one floating notice for the whole app; never stacks, morphs its width to the next text ──
 const isl = document.createElement('div'); isl.className = 'cx-island cx-island-app'; isl.setAttribute('aria-live', 'polite'); isl.dataset.state = 'hidden';
@@ -1324,7 +1351,7 @@ let wheelsNow = [];
       if (periods) { const tl = $('.cx-tabs', root); initTabs(tl); tl.addEventListener('pick', (e) => { const d = periods[e.detail][1]; paint(d); const t2 = $$('.cx-tab', root); t2.forEach((x, i) => x.setAttribute('aria-selected', i === e.detail)); }); }
       $$('.cx-chart-bar', root).forEach((b, i) => b.animate([{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }], { duration: 420, delay: i * 18, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'backwards' }));
     };
-    root.addEventListener('pointerover', (e) => { const b = e.target.closest('.cx-chart-bar'); if (b) { tip.textContent = b.dataset.tipV; tip.hidden = false; const r = b.getBoundingClientRect(); tip.style.left = (r.left + r.width / 2 - tip.offsetWidth / 2) + 'px'; tip.style.top = (r.top + (1 - parseFloat(getComputedStyle(b).getPropertyValue('--v')) / 100) * r.height - tip.offsetHeight - 6) + 'px'; requestAnimationFrame(() => tip.dataset.state = 'open'); } });
+    root.addEventListener('pointerover', (e) => { const b = e.target.closest('.cx-chart-bar'); if (b) { tip.textContent = b.dataset.tipV; tip.hidden = false; tip.dataset.side = 'top'; tip.style.removeProperty('--ax'); const r = b.getBoundingClientRect(); tip.style.left = (r.left + r.width / 2 - tip.offsetWidth / 2) + 'px'; tip.style.top = (r.top + (1 - parseFloat(getComputedStyle(b).getPropertyValue('--v')) / 100) * r.height - tip.offsetHeight - 6) + 'px'; requestAnimationFrame(() => tip.dataset.state = 'open'); } });
     root.addEventListener('pointerout', (e) => { if (e.target.closest('.cx-chart-bar')) { tip.dataset.state = 'closed'; tip.hidden = true; } });
     root.addEventListener('focusin', (e) => e.target.closest('.cx-chart-bar')?.dispatchEvent(new PointerEvent('pointerover', { bubbles: true })));
     paint(data);

package/registry.json

@@ -579,6 +579,14 @@
       "component": "Mascot",
       "description": "Mascot - the brand's mascot (in Storio, Storio): an AssistantOrb that acts. Its gestures are hand-set keyframes that"
     },
+    {
+      "name": "media-query",
+      "deps": [],
+      "part": "MediaQuery",
+      "file": "registry/media-query.muten",
+      "component": "MediaQuery",
+      "description": "MediaQuery(query, onChange): says \"yes\"/\"no\" for a CSS media query at mount and on every change, so a page draws one version (phone or desktop) instead of both."
+    },
     {
       "name": "member-list",
       "deps": [
@@ -1198,14 +1206,6 @@
       "component": "VirtualList",
       "description": "VirtualList(rows, total, rowHeight, label, jump): only visible rows in the DOM."
     },
-    {
-      "name": "media-query",
-      "deps": [],
-      "part": "MediaQuery",
-      "file": "registry/media-query.muten",
-      "component": "MediaQuery",
-      "description": "MediaQuery(query, onChange): says \"yes\"/\"no\" for a CSS media query at mount and on every change, so a page draws one version (phone or desktop) instead of both."
-    },
     {
       "name": "virtual-window",
       "deps": [],