@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/src/components/hover-card/engine.ts

@@ -1,4 +1,5 @@
 import { requestFrame } from '../../core/frame';
+import { reduced } from '../../core/reduced';
 import { createScope } from '../../core/scope';
 import { inert, type Instance } from '../../core/types';
 
@@ -20,12 +21,16 @@ let sequence = 0;
 /** Distance kept from the viewport edges. */
 const EDGE = 12;
 const GAP = 12;
+/** Longest fold back into the trigger (the CSS one is .22 s); then it hides anyway. */
+const FOLD_MS = 400;
 
 /**
  * Nonmodal preview: pointer, keyboard focus and tap all reveal the same panel.
  * The panel stays inside the viewport: it flips to the other side when its own
  * has no room and shifts sideways (--mk-hover-shift) away from the edges, again
  * on scroll and resize. Opened from the keyboard it appears without the entrance.
+ * It grows out of the trigger's centre (--mk-hover-origin-x) and, when the
+ * pointer leaves, folds back into it (data-mk-closing, .22 s) before hiding.
  */
 export function createHoverCard(root: HTMLElement | null, options: HoverCardOptions = {}): HoverCardInstance {
   const trigger = root?.querySelector<HTMLElement>('[data-mk-hover-trigger]');
@@ -68,6 +73,9 @@ export function createHoverCard(root: HTMLElement | null, options: HoverCardOpti
     if (left + box.width > view.width - EDGE) shift = view.width - EDGE - box.width - left;
     if (left + shift < EDGE) shift = EDGE - left;
     if (shift) root.style.setProperty('--mk-hover-shift', `${Math.round(shift)}px`);
+    // The panel grows from (and folds back into) the trigger's centre.
+    const target = trigger.getBoundingClientRect();
+    root.style.setProperty('--mk-hover-origin-x', `${Math.round(target.left + target.width / 2 - (left + shift))}px`);
   };
   let pending: (() => void) | null = null;
   const schedulePlace = () => {
@@ -80,13 +88,34 @@ export function createHoverCard(root: HTMLElement | null, options: HoverCardOpti
   scope.add(() => pending?.());
 
   const cancel = () => { clearTimeout(timer); timer = undefined; };
+  // The fold back into the trigger: the panel stays until its animation ends (or FOLD_MS passes).
+  let folding: ReturnType<typeof setTimeout> | undefined;
+  const settleFold = () => {
+    clearTimeout(folding);
+    folding = undefined;
+    panel.removeEventListener('animationend', settleFold);
+    if (scope.disposed) return;
+    scope.attr(root, 'data-mk-closing', null);
+    if (!opened) scope.attr(panel, 'hidden', '');
+  };
+  scope.add(() => {
+    clearTimeout(folding);
+    panel.removeEventListener('animationend', settleFold);
+  });
   const set = (value: boolean) => {
     cancel();
     if (scope.disposed) return;
     const changed = value !== opened;
     opened = value;
     scope.attr(trigger, 'aria-expanded', String(value));
-    scope.attr(panel, 'hidden', value ? null : '');
+    if (value) {
+      if (folding !== undefined) settleFold();
+      scope.attr(panel, 'hidden', null);
+    } else if (changed && !reduced() && root.dataset.mkInput !== 'keyboard' && !panel.hidden) {
+      scope.attr(root, 'data-mk-closing', '');
+      panel.addEventListener('animationend', settleFold);
+      folding = setTimeout(settleFold, FOLD_MS);
+    } else if (folding === undefined) scope.attr(panel, 'hidden', '');
     scope.attr(root, 'data-mk-open', value ? '' : null);
     if (value && changed) {
       scope.attr(root, 'data-mk-input', pointerInput ? 'pointer' : 'keyboard');

package/src/components/hover-card/hover-card.css

@@ -1,6 +1,7 @@
 .mk-hover-card, mk-hover-card { position: relative; display: inline-flex; }
 .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] {
-  transform-origin: 50% 100%;
+  /* It grows from, and folds back into, the trigger's centre (the engine measures it). */
+  transform-origin: var(--mk-hover-origin-x, 50%) 100%;
   position: absolute; z-index: 10; bottom: calc(100% + .75rem); left: var(--mk-hover-shift, 0);
   width: min(19rem, calc(100vw - 1.5rem)); padding: 1.25rem; border-radius: var(--mk-radius-lg);
   color: var(--mk-on-glass-inverse); background: var(--mk-glass-inverse); border: 0; border-radius: var(--mk-radius-lg, 24px);
@@ -10,10 +11,15 @@
 }
 /* Bridge over the gap so the pointer can travel into the panel. */
 .mk-hover-card [data-mk-hover-panel]::after, mk-hover-card [data-mk-hover-panel]::after { content: ''; position: absolute; inset: -1rem 0; z-index: -1; }
-:is(.mk-hover-card, mk-hover-card)[data-mk-side=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; transform-origin: 50% 0; animation-name: mk-hover-card-down; }
+:is(.mk-hover-card, mk-hover-card)[data-mk-side=bottom] [data-mk-hover-panel] { top: calc(100% + .75rem); bottom: auto; transform-origin: var(--mk-hover-origin-x, 50%) 0; animation-name: mk-hover-card-down; }
+/* Leaving: it shrinks back into the trigger out of a blur, then the engine hides it. */
+:is(.mk-hover-card, mk-hover-card)[data-mk-closing] [data-mk-hover-panel] { pointer-events: none; animation: mk-hover-card-out .22s cubic-bezier(.4,0,1,1) both; }
+:is(.mk-hover-card, mk-hover-card)[data-mk-closing][data-mk-side=bottom] [data-mk-hover-panel] { animation-name: mk-hover-card-out-up; }
 /* Opened from the keyboard: no entrance. */
 :is(.mk-hover-card, mk-hover-card)[data-mk-input=keyboard] [data-mk-hover-panel] { animation: none; }
 .mk-hover-card [hidden], mk-hover-card [hidden] { display: none !important; }
 @keyframes mk-hover-card-in { from { opacity: 0; filter: blur(32px); transform: translateY(8px) scale(.7); } to { opacity: 1; filter: none; transform: none; } }
+@keyframes mk-hover-card-out { to { opacity: 0; filter: blur(12px); transform: translateY(10px) scale(.3); } }
+@keyframes mk-hover-card-out-up { to { opacity: 0; filter: blur(12px); transform: translateY(-10px) scale(.3); } }
 @keyframes mk-hover-card-down { from { opacity: 0; filter: blur(32px); transform: translateY(-8px) scale(.7); } to { opacity: 1; filter: none; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .mk-hover-card [data-mk-hover-panel], mk-hover-card [data-mk-hover-panel] { animation: none; } }

package/src/components/image-preview/element.ts

@@ -8,7 +8,7 @@ import { createImagePreview, type ImagePreviewInstance } from './engine';
  * Emits mk:open, mk:change ({index, previous}) and mk:close.
  */
 export class MkImagePreviewElement extends MkElement<ImagePreviewInstance> {
-  static options: Record<string, OptionType> = { loop: 'boolean', labels: 'json' };
+  static options: Record<string, OptionType> = { loop: 'boolean', strip: 'boolean', labels: 'json' };
 
   protected create(options: Record<string, unknown>) {
     return createImagePreview(this, options);

package/src/components/image-preview/engine.ts

@@ -8,14 +8,19 @@ import { rollDigits } from '../../motion/micro';
  * Image preview: thumbnails ([data-mk-image]) open a modal <dialog> where the
  * picture grows out of its thumbnail (0.7 s on the signature curve, the
  * thumbnail's radius easing to 24 px) over a blurred backdrop. Previous/next
- * (buttons, arrow keys, a swipe) slide the next picture in out of a blur; the
+ * (buttons, arrow keys, a swipe, the strip of thumbnails) move both pictures at
+ * once: the old one leaves as a copy that slides away, shrinking into a blur,
+ * while the new one (decoded first) comes in from the side it goes to; a ring
+ * glides along the strip to the current thumbnail; the
  * counter rolls. A double click or tap zooms ×2 where you point and a drag pans
  * it. Dragging down, Escape or the close button send the picture back to its
  * thumbnail, and focus returns to it.
  */
 
 export interface ImagePreviewOptions {
-  labels?: { close?: string; prev?: string; next?: string; dialog?: string };
+  labels?: { close?: string; prev?: string; next?: string; dialog?: string; strip?: string; picture?: string };
+  /** A strip of thumbnails under the picture (default true; hidden on phones and with one picture). */
+  strip?: boolean;
   /** Loop from the last picture to the first (default true). */
   loop?: boolean;
   onChange?: (index: number) => void;
@@ -52,7 +57,7 @@ export function createImagePreview(root: HTMLElement | null, options: ImagePrevi
   registerMotion();
   const scope = createScope();
   const loop = options.loop ?? true;
-  const labels = { close: 'Cerrar', prev: 'Imagen anterior', next: 'Imagen siguiente', dialog: 'Vista de imagen', ...options.labels };
+  const labels = { close: 'Cerrar', prev: 'Imagen anterior', next: 'Imagen siguiente', dialog: 'Vista de imagen', strip: 'Miniaturas', picture: 'Imagen', ...options.labels };
 
   const pictures = (): Picture[] =>
     [...root.querySelectorAll<HTMLElement>('[data-mk-image]')].map((thumb) => {
@@ -84,7 +89,15 @@ export function createImagePreview(root: HTMLElement | null, options: ImagePrevi
   const counter = document.createElement('span');
   counter.dataset.mkLightbox = 'count';
   counter.setAttribute('aria-live', 'polite');
-  dialog.append(backdrop, stage, prev, next, close, counter);
+  const strip = document.createElement('div');
+  strip.dataset.mkLightbox = 'strip';
+  strip.setAttribute('role', 'group');
+  strip.setAttribute('aria-label', labels.strip);
+  strip.hidden = true;
+  const ring = document.createElement('span');
+  ring.dataset.mkLightboxRing = '';
+  ring.setAttribute('aria-hidden', 'true');
+  dialog.append(backdrop, stage, prev, next, close, counter, strip);
   root.append(dialog);
   scope.add(() => dialog.remove());
   scope.attr(root, 'data-mk-ready', '');
@@ -128,6 +141,44 @@ export function createImagePreview(root: HTMLElement | null, options: ImagePrevi
     prev.hidden = next.hidden = list.length < 2;
   };
 
+  let ringShown = false;
+  const buildStrip = () => {
+    const show = options.strip !== false && list.length > 1;
+    strip.hidden = !show;
+    dialog.toggleAttribute('data-mk-strip', show);
+    ringShown = false;
+    if (!show) return strip.replaceChildren();
+    strip.replaceChildren(
+      ring,
+      ...list.map((picture, i) => {
+        const thumb = document.createElement('button');
+        thumb.type = 'button';
+        thumb.dataset.mkLightboxThumb = String(i);
+        thumb.setAttribute('aria-label', `${labels.picture} ${i + 1} de ${list.length}`);
+        const small = thumbImg(picture);
+        const img = document.createElement('img');
+        img.src = (small instanceof HTMLImageElement ? small.getAttribute('src') || small.currentSrc : '') || picture.src;
+        img.alt = '';
+        img.draggable = false;
+        thumb.append(img);
+        return thumb;
+      }),
+    );
+  };
+  const paintStrip = () => {
+    if (strip.hidden) return;
+    const thumbs = [...strip.querySelectorAll<HTMLElement>('[data-mk-lightbox-thumb]')];
+    thumbs.forEach((thumb, i) => (i === index ? thumb.setAttribute('aria-current', 'true') : thumb.removeAttribute('aria-current')));
+    const active = thumbs[index];
+    if (!active) return;
+    const box = { x: active.offsetLeft, y: active.offsetTop, width: active.offsetWidth, height: active.offsetHeight };
+    if (!ringShown || reduced()) gsap.set(ring, box);
+    else keep(gsap.to(ring, { ...box, duration: 0.35, ease: EASE.swatch }));
+    ringShown = true;
+    // A long strip keeps the current thumbnail in its middle (the page behind never scrolls).
+    if (typeof strip.scrollTo === 'function') strip.scrollTo({ left: active.offsetLeft + active.offsetWidth / 2 - strip.clientWidth / 2, behavior: reduced() ? 'auto' : 'smooth' });
+  };
+
   /** Transform that puts the big image over the thumbnail. */
   const fromThumb = (picture: Picture) => {
     const small = thumbImg(picture)!.getBoundingClientRect();
@@ -158,16 +209,18 @@ export function createImagePreview(root: HTMLElement | null, options: ImagePrevi
     isOpen = true;
     index = target;
     counter.textContent = '';
+    buildStrip();
     write(target);
     if (typeof dialog.showModal === 'function') dialog.showModal();
     else dialog.setAttribute('open', '');
+    paintStrip();
     close.focus({ preventScroll: true });
     const picture = list[target]!;
     options.onOpenChange?.(true);
     root.dispatchEvent(new CustomEvent('mk:open', { bubbles: true, detail: { index } }));
     if (reduced()) return;
     keep(gsap.fromTo(backdrop, { opacity: 0 }, { opacity: 1, duration: 0.4, ease: 'power2.out', clearProps: 'opacity' }));
-    keep(gsap.fromTo([prev, next, close, counter, caption], { opacity: 0 }, { opacity: 1, duration: 0.3, delay: 0.3, clearProps: 'opacity' }));
+    keep(gsap.fromTo([prev, next, close, counter, caption, strip], { opacity: 0 }, { opacity: 1, duration: 0.3, delay: 0.3, clearProps: 'opacity' }));
     const grow = () => {
       const start = fromThumb(picture);
       if (!start) return void keep(gsap.fromTo(image, { opacity: 0, scale: 0.92 }, { opacity: 1, scale: 1, duration: 0.35, ease: EASE.pop, clearProps: 'opacity,scale,transform' }));
@@ -201,11 +254,11 @@ export function createImagePreview(root: HTMLElement | null, options: ImagePrevi
     gsap.set(image, { scale: 1, x: 0, y: 0 });
     const end = fromThumb(picture);
     keep(gsap.to(backdrop, { opacity: 0, duration: 0.35, ease: 'power2.in' }));
-    keep(gsap.to([prev, next, close, counter, caption], { opacity: 0, duration: 0.15 }));
+    keep(gsap.to([prev, next, close, counter, caption, strip], { opacity: 0, duration: 0.15 }));
     if (!end) return void keep(gsap.to(image, { opacity: 0, scale: 0.92, duration: 0.25, ease: 'power2.in', onComplete: finish }));
     thumbImg(picture)!.style.visibility = 'hidden';
     keep(gsap.to(image, { ...end, duration: 0.5, ease: EASE.signature, onComplete: () => {
-      gsap.set([prev, next, close, counter, caption], { clearProps: 'opacity' });
+      gsap.set([prev, next, close, counter, caption, strip], { clearProps: 'opacity' });
       finish();
     } }));
   };
@@ -222,16 +275,43 @@ export function createImagePreview(root: HTMLElement | null, options: ImagePrevi
     index = target;
     options.onChange?.(index);
     root!.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { index, previous: before } }));
-    if (reduced()) return write(target);
+    if (reduced()) {
+      write(target);
+      paintStrip();
+      return;
+    }
     gsap.killTweensOf(image);
-    keep(
-      gsap
-        .timeline()
-        .to(image, { x: -60 * direction, opacity: 0, filter: 'blur(12px)', duration: 0.18, ease: 'power2.in' })
-        .call(() => write(target))
-        .fromTo(image, { x: 60 * direction, opacity: 0, filter: 'blur(12px)' }, { x: 0, opacity: 1, filter: 'blur(0px)', duration: 0.4, ease: EASE.signature, clearProps: 'transform,opacity,filter' }),
-    );
+    ghost?.remove();
+    // The picture that leaves is a copy over the old one (where a swipe left it), so the new one can come in at once.
+    const leaving = image.cloneNode() as HTMLImageElement;
+    leaving.dataset.mkLightbox = 'ghost';
+    leaving.alt = '';
+    leaving.setAttribute('aria-hidden', 'true');
+    Object.assign(leaving.style, { position: 'absolute', left: `${image.offsetLeft}px`, top: `${image.offsetTop}px`, width: `${image.offsetWidth}px`, height: `${image.offsetHeight}px`, margin: '0' });
+    stage.append(leaving);
+    ghost = leaving;
+    write(target);
+    paintStrip();
+    gsap.set(image, { opacity: 0, x: 0, y: 0 });
+    keep(gsap.to(leaving, { xPercent: -28 * direction, scale: 0.86, opacity: 0, filter: 'blur(10px)', duration: 0.45, ease: EASE.signature, onComplete: () => {
+      leaving.remove();
+      if (ghost === leaving) ghost = null;
+    } }));
+    const enter = () => {
+      if (!isOpen || index !== target) return;
+      keep(gsap.fromTo(image, { xPercent: 24 * direction, scale: 1.04, opacity: 0, filter: 'blur(10px)' }, { xPercent: 0, scale: 1, opacity: 1, filter: 'blur(0px)', duration: 0.5, ease: EASE.signature, clearProps: 'transform,opacity,filter' }));
+    };
+    // The new picture enters decoded (never blank), waiting at most 250 ms for it.
+    const decoded = typeof image.decode === 'function' ? image.decode().catch(() => undefined) : Promise.resolve();
+    if (image.complete && image.naturalWidth) enter();
+    else void Promise.race([decoded, new Promise((done) => setTimeout(done, 250))]).then(enter);
   }
+  let ghost: HTMLImageElement | null = null;
+  scope.add(() => ghost?.remove());
+  scope.on(strip, 'click', (event) => {
+    const thumb = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-lightbox-thumb]');
+    if (thumb) go(Number(thumb.dataset.mkLightboxThumb));
+  });
 
   scope.on(root, 'click', (event) => {
     const thumb = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-image]');

package/src/components/image-preview/image-preview.css

@@ -1,5 +1,6 @@
 /* image-preview — thumbnails in Melonmind cards (16 px radius) and a full-screen dialog: a blurred dark backdrop, the
-   picture at 16 px radius, round glass buttons and a counter pill. */
+   picture at 16 px radius, round glass buttons, a counter pill and a glass strip of 8 px thumbnails with a ring that
+   glides to the current one. */
 .mk-image-preview,
 mk-image-preview {
   display: grid;
@@ -88,6 +89,83 @@ mk-image-preview {
   user-select: none;
 }
 
+/* The picture that leaves while the next one comes in (the engine places it over the old one). */
+[data-mk-lightbox='ghost'] {
+  border-radius: 16px;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+[data-mk-lightbox-dialog][data-mk-strip] [data-mk-lightbox='image'] {
+  max-height: min(78dvh, calc(100dvh - 11rem));
+}
+
+[data-mk-lightbox='strip'] {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  display: flex;
+  gap: 0.375rem;
+  max-width: calc(100vw - 2rem);
+  padding: 0.375rem;
+  overflow-x: auto;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 0.08);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.12),
+    inset -1px -1px 1px rgb(255 255 255 / 0.05);
+  backdrop-filter: blur(16px);
+  scrollbar-width: none;
+  translate: -50% 0;
+}
+
+[data-mk-lightbox='strip'][hidden] {
+  display: none;
+}
+
+[data-mk-lightbox-thumb] {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 8px;
+  background: rgb(255 255 255 / 0.06);
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-lightbox-thumb]:hover,
+[data-mk-lightbox-thumb][aria-current='true'] {
+  opacity: 1;
+}
+
+[data-mk-lightbox-thumb]:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+[data-mk-lightbox-thumb] img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+[data-mk-lightbox-ring] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  border-radius: 9px;
+  box-shadow: 0 0 0 2px #fff;
+  pointer-events: none;
+}
+
 [data-mk-lightbox-dialog][data-mk-zoomed] [data-mk-lightbox='image'] {
   cursor: move;
 }
@@ -177,6 +255,15 @@ mk-image-preview {
 }
 
 @media (max-width: 680px) {
+  /* Phones swipe; the arrows take the bottom. */
+  [data-mk-lightbox='strip'] {
+    display: none;
+  }
+
+  [data-mk-lightbox-dialog][data-mk-strip] [data-mk-lightbox='image'] {
+    max-height: 78dvh;
+  }
+
   [data-mk-lightbox='prev'],
   [data-mk-lightbox='next'] {
     top: auto;
@@ -187,7 +274,8 @@ mk-image-preview {
 
 @media (prefers-reduced-motion: reduce) {
   :is(.mk-image-preview, mk-image-preview) [data-mk-image],
-  [data-mk-lightbox-dialog] button[data-mk-lightbox] {
+  [data-mk-lightbox-dialog] button[data-mk-lightbox],
+  [data-mk-lightbox-thumb] {
     transition: none;
     scale: none !important;
   }

package/src/components/image-preview/react.tsx

@@ -17,20 +17,20 @@ export interface ImagePreviewProps extends Omit<HTMLAttributes<HTMLDivElement>,
 }
 
 /** <ImagePreview images={[{ src, thumb, alt, caption }]} />: a grid of thumbnails that open a viewer. */
-export function ImagePreview({ images, labels, loop, onChange, onOpenChange, instanceRef, className, ...props }: ImagePreviewProps) {
+export function ImagePreview({ images, labels, loop, strip, onChange, onOpenChange, instanceRef, className, ...props }: ImagePreviewProps) {
   const ref = useRef<HTMLDivElement>(null);
   const change = useLatest(onChange);
   const openChange = useLatest(onOpenChange);
   const key = JSON.stringify(labels ?? {});
   useIsomorphicLayoutEffect(() => {
-    const created = createImagePreview(ref.current, { labels, loop, onChange: (i) => change.current?.(i), onOpenChange: (open) => openChange.current?.(open) });
+    const created = createImagePreview(ref.current, { labels, loop, strip, onChange: (i) => change.current?.(i), onOpenChange: (open) => openChange.current?.(open) });
     if (instanceRef) instanceRef.current = created;
     return () => {
       created.destroy();
       if (instanceRef) instanceRef.current = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, loop]);
+  }, [key, loop, strip]);
   return (
     <div {...props} ref={ref} className={['mk-image-preview', className].filter(Boolean).join(' ')}>
       {images.map((image, i) => (

package/src/components/json-viewer/engine.ts

@@ -3,7 +3,7 @@ import { reduced } from '../../core/reduced';
 import { createScope } from '../../core/scope';
 import { inert, type Instance } from '../../core/types';
 import { walk, type TreeNode } from '../../core/tree';
-import { press } from '../../motion/micro';
+import { blurIn, press } from '../../motion/micro';
 import { markText } from '../../core/mark';
 import { createTreeView } from '../tree-view/engine';
 
@@ -16,7 +16,10 @@ import { createTreeView } from '../tree-view/engine';
  * pop; Ctrl/⌘+C copies the focused value. The search marks keys and values and
  * opens what holds them. setData() keeps what was open and flashes the values
  * that changed (and the keys that are new) in the accent for a moment. The
- * selected row's path ($.user.roles[0]) shows below, ready to copy.
+ * selected row's path ($.user.roles[0]) shows below, ready to copy: it rises
+ * out of a blur the first time and slides in on each new choice. On hover the
+ * copy button slides in and the value sits on a faint pill of its colour; an
+ * open branch lets its summary ("4 claves") step back.
  */
 
 export type JsonType = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null';
@@ -336,8 +339,14 @@ export function createJsonViewer(root: HTMLElement | null, options: JsonViewerOp
     },
     onSelect: (node) => {
       const meta = node.data as JsonMeta;
+      const appearing = foot.hidden;
+      const moved = pathText.textContent !== meta.path;
       foot.hidden = false;
       pathText.textContent = meta.path;
+      if (!reduced()) {
+        if (appearing) keep(blurIn(foot, { from: 'rise', duration: 0.32 }));
+        else if (moved) keep(blurIn(pathText, { from: 'soft', duration: 0.28 }));
+      }
       options.onSelect?.(meta.path, meta.value);
       root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, detail: { path: meta.path, value: meta.value } }));
     },

package/src/components/json-viewer/json-viewer.css

@@ -79,7 +79,8 @@ mk-json-viewer {
   transition:
     background-color 0.15s,
     color 0.15s,
-    opacity 0.15s;
+    opacity 0.15s,
+    translate 0.2s ease;
 }
 
 [data-mk-jv-tool]:hover,
@@ -189,6 +190,27 @@ mk-json-viewer {
   color: var(--mk-muted);
   font-size: 0.75rem;
   text-overflow: ellipsis;
+  transition:
+    opacity 0.25s ease,
+    translate 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+/* An open branch shows its content: the count steps back. */
+[role='treeitem'][aria-expanded='true'] > [data-mk-tree-row] [data-mk-jv-summary] {
+  opacity: 0.45;
+  translate: -3px 0;
+}
+
+/* Hovered values sit on a faint pill of their own colour. */
+[data-mk-jv-value] {
+  margin: 0 -0.2rem;
+  padding: 0 0.2rem;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-tree-row]:hover [data-mk-jv-value] {
+  background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
 [data-mk-jv-copy] {
@@ -197,11 +219,14 @@ mk-json-viewer {
   margin-left: auto;
   border-radius: 6px;
   opacity: 0;
+  translate: 4px 0;
 }
 
+/* The copy button slides in on hover (or focus). */
 [data-mk-tree-row]:hover [data-mk-jv-copy],
 [role='treeitem']:focus-visible > [data-mk-tree-row] [data-mk-jv-copy] {
   opacity: 1;
+  translate: 0 0;
 }
 
 @media (hover: none) {
@@ -268,4 +293,11 @@ mk-json-viewer {
   [data-mk-jv-added] {
     animation: none;
   }
+
+  [data-mk-jv-copy],
+  [data-mk-jv-summary],
+  [data-mk-jv-value] {
+    transition: none;
+    translate: none;
+  }
 }

package/src/components/nav/README.md

@@ -4,13 +4,15 @@ Navegación con siete estilos de escritorio y una sola barra de cristal en el m
 
 | Estilo | Cómo se ve |
 |---|---|
-| `clasica` | Barra lateral con borde; la página actual en una píldora rellena |
-| `bonita` | Píldoras de texto centradas que se ensanchan al pasar y al estar activas (padding con resorte, 0.3 s `cubic(.38,.49,0,1.5)`) |
+| `sidebar` | Barra lateral con borde; la página actual en una píldora rellena |
+| `pills` | Píldoras de texto centradas que se ensanchan al pasar y al estar activas (padding con resorte, 0.3 s `cubic(.38,.49,0,1.5)`) |
 | `dock` | Barra flotante de cristal centrada abajo; el botón activo se ensancha a 80 px |
-| `guapa` | La vista es una tarjeta sobre la cáscara tintada; la página actual es un chip blanco |
-| `tasks` | Riel de botones redondos de 56 px; el activo se cuadra (radio 0.3 s `cubic(.38,.49,0,2)`) |
-| `melon` | Barra lateral suave con un lavado primario en la página actual |
-| `tunnel` | Palabras grandes; la que tiene el ratón y sus vecinas crecen como un dock (1.2 / 1.09 / 1.03) |
+| `card` | La vista es una tarjeta sobre la cáscara tintada; la página actual es un chip blanco |
+| `rail` | Riel de botones redondos de 56 px; el activo se cuadra (radio 0.3 s `cubic(.38,.49,0,2)`) |
+| `wash` | Barra lateral suave con un lavado primario en la página actual |
+| `magnify` | Palabras grandes; la que tiene el ratón y sus vecinas crecen como un dock (1.2 / 1.09 / 1.03) |
+
+Los nombres anteriores a la 0.15 (`clasica`, `bonita`, `guapa`, `tasks`, `melon`, `tunnel`) siguen funcionando: el motor los convierte en `sidebar`, `pills`, `card`, `rail`, `wash` y `magnify` (`NAV_STYLE_ALIASES`, `toNavStyle()`); en el marcado escrito usa ya la clase nueva para que se vea bien antes del JS.
 
 `accent` pinta la página actual en primary-container. Al cambiar de página el icono se rellena (`mk-nav-icon`, 125 ms, `FILL 0 → 1`, para fuentes de iconos como Material Symbols). Con `reveal`, al arrancar la cáscara se descubre desde el primer botón (`revealFrom`).
 
@@ -22,7 +24,7 @@ Navegación con siete estilos de escritorio y una sola barra de cristal en el m
     <header class="mk-shell__header"><h1 class="mk-shell__title">Inicio</h1></header>
     …
   </main>
-  <mk-nav class="mk-nav mk-nav--bonita" nav-style="bonita" storage-key="mi-app-nav">
+  <mk-nav class="mk-nav mk-nav--pills" nav-style="pills" storage-key="mi-app-nav">
     <div class="mk-nav__buttons">
       <a class="mk-nav__button" href="/" aria-current="page"><svg class="mk-nav__icon">…</svg><span class="mk-nav__name">Inicio</span></a>
       <a class="mk-nav__button" href="/movimientos"><svg class="mk-nav__icon">…</svg><span class="mk-nav__name">Movimientos</span></a>
@@ -42,7 +44,7 @@ Navegación con siete estilos de escritorio y una sola barra de cristal en el m
 
 Escribe la clase `mk-nav--<estilo>` en el marcado para que se vea bien antes de que cargue el JS. Sin custom element: `createNav(document.querySelector('.mk-nav'), opciones)` sobre un `<nav>`.
 
-Partes: `.mk-nav__button--first` (botón de arriba: cuenta, espacio de trabajo), `.mk-nav__buttons`, `.mk-nav__actions` (`.mk-nav__button--action`), `.mk-nav__options` + `.mk-nav__label` (bloque extra que solo muestran clásica, guapa, melon y tunnel), `.mk-nav__icon`, `.mk-nav__name`, `data-mk-hide-mobile` (se esconde en el móvil). Vista: `.mk-shell__view`, `.mk-shell__header`, `.mk-shell__title`, `.mk-shell__content` (cada estilo ajusta su cabecera).
+Partes: `.mk-nav__button--first` (botón de arriba: cuenta, espacio de trabajo), `.mk-nav__buttons`, `.mk-nav__actions` (`.mk-nav__button--action`), `.mk-nav__options` + `.mk-nav__label` (bloque extra que solo muestran sidebar, card, wash y magnify), `.mk-nav__icon`, `.mk-nav__name`, `data-mk-hide-mobile` (se esconde en el móvil). Vista: `.mk-shell__view`, `.mk-shell__header`, `.mk-shell__title`, `.mk-shell__content` (cada estilo ajusta su cabecera).
 
 ## React
 
@@ -52,7 +54,7 @@ const [page, setPage] = useState('home');
 <div className="mk-shell" style={{ height: '100dvh' }}>
   <main className="mk-shell__view">…</main>
   <Nav
-    navStyle="tasks"
+    navStyle="rail"
     items={[
       { value: 'home', label: 'Inicio', icon: <HomeIcon /> },
       { value: 'movements', label: 'Movimientos', icon: <RowsIcon /> },
@@ -76,7 +78,7 @@ const [page, setPage] = useState('home');
 
 ## Variables CSS
 
-`--mk-nav-icon-size` (24px; 16px en guapa y melon con acento). Colores de los roles Material (`surface-container-*`, `primary-container`, `tertiary-container`…).
+`--mk-nav-icon-size` (24px; 16px en card y wash con acento). Colores de los roles Material (`surface-container-*`, `primary-container`, `tertiary-container`…).
 
 ## Accesibilidad
 

package/src/components/nav/element.ts

@@ -1,8 +1,8 @@
 import { MkElement, defineElement, type OptionType } from '../../elements/base';
-import { createNav, type NavInstance, type NavStyle } from './engine';
+import { createNav, type NavInstance, type NavStyle, type NavStyleAlias } from './engine';
 
 /**
- * <mk-nav class="mk-nav mk-nav--bonita" nav-style="bonita" [accent] [reveal] [storage-key="mi-app-nav"]>
+ * <mk-nav class="mk-nav mk-nav--pills" nav-style="pills" [accent] [reveal] [storage-key="mi-app-nav"]>
  *   <div class="mk-nav__buttons"><a class="mk-nav__button" href="/">…</a></div>
  * </mk-nav>
  * Emits `mk:navigate` (detail: index, value, item, originalEvent) on click.
@@ -12,7 +12,7 @@ export class MkNavElement extends MkElement<NavInstance> {
 
   protected create(options: Record<string, unknown>) {
     return createNav(this, {
-      style: options.navStyle as NavStyle | undefined,
+      style: options.navStyle as NavStyle | NavStyleAlias | undefined,
       accent: options.accent as boolean | undefined,
       reveal: Boolean(options.reveal),
       storageKey: options.storageKey as string | undefined,
@@ -22,7 +22,7 @@ export class MkNavElement extends MkElement<NavInstance> {
   // Style and accent change in place: rebuilding would replay the reveal.
   attributeChangedCallback(name: string, previous: string | null, next: string | null) {
     if (previous === next || !this.instance) return;
-    if (name === 'nav-style' && next) this.instance.setStyle(next as NavStyle);
+    if (name === 'nav-style' && next) this.instance.setStyle(next as NavStyle | NavStyleAlias);
     else if (name === 'accent') this.instance.setAccent(next !== null && next !== 'false');
     else super.attributeChangedCallback(name, previous, next);
   }
@@ -31,7 +31,7 @@ export class MkNavElement extends MkElement<NavInstance> {
     this.instance?.select(target);
   }
 
-  setStyle(style: NavStyle) {
+  setStyle(style: NavStyle | NavStyleAlias) {
     this.instance?.setStyle(style);
   }
 }