@yewdiel21/motion-kit 0.14.0 → 0.15.0

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);
   }
 }

package/src/components/nav/engine.ts

@@ -4,20 +4,26 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 import { revealFrom, type RevealHandle } from '../../motion/reveal';
 
 /*
- * navigation: seven desktop styles (Clásica, Bonita, Dock, Guapa,
- * Tasks, Melon, Tunnel) and one glass bar on phones, all in CSS (nav.css). The
+ * navigation: seven desktop styles named after how they look (sidebar, pills,
+ * dock, card, rail, wash, magnify) and one glass bar on phones, all in CSS (nav.css). The
  * engine marks the current page (aria-current="page"), switches styles (and can
  * remember the choice), and on start can reveal the
  * app shell from the first button.
  * Parts: .mk-nav__buttons .mk-nav__button (data-mk-value or href), .mk-nav__button--first.
  */
 
-export const NAV_STYLES = ['clasica', 'bonita', 'dock', 'guapa', 'tasks', 'melon', 'tunnel'] as const;
+export const NAV_STYLES = ['sidebar', 'pills', 'dock', 'card', 'rail', 'wash', 'magnify'] as const;
 export type NavStyle = (typeof NAV_STYLES)[number];
+/** The names before 0.15, still accepted: each turns into the style it always was. */
+export const NAV_STYLE_ALIASES = { clasica: 'sidebar', bonita: 'pills', guapa: 'card', tasks: 'rail', melon: 'wash', tunnel: 'magnify' } as const satisfies Record<string, NavStyle>;
+export type NavStyleAlias = keyof typeof NAV_STYLE_ALIASES;
+/** A style name (new or old) as one of NAV_STYLES, or undefined. */
+export const toNavStyle = (value: unknown): NavStyle | undefined =>
+  NAV_STYLES.includes(value as NavStyle) ? (value as NavStyle) : (NAV_STYLE_ALIASES as Record<string, NavStyle>)[value as string];
 
 export interface NavOptions {
-  /** Default: the saved one (storageKey), else the mk-nav--<style> class in the markup, else 'bonita' (Money's default). */
-  style?: NavStyle;
+  /** Default: the saved one (storageKey), else the mk-nav--<style> class in the markup, else 'pills'. Old names (clasica…) work too. */
+  style?: NavStyle | NavStyleAlias;
   /** The accent variant: the current page in primary-container. */
   accent?: boolean;
   /** Reveal the shell from the first button when the nav starts (off by default). */
@@ -31,7 +37,7 @@ export interface NavOptions {
 export interface NavInstance extends Instance {
   /** Mark a page as current, by index or value (silent: no event). */
   select(target: number | string): void;
-  setStyle(style: NavStyle): void;
+  setStyle(style: NavStyle | NavStyleAlias): void;
   setAccent(on: boolean): void;
   readonly index: number;
   readonly style: NavStyle;
@@ -47,7 +53,6 @@ export interface NavigateDetail {
 }
 
 const ITEM = '.mk-nav__buttons .mk-nav__button';
-const isStyle = (value: unknown): value is NavStyle => NAV_STYLES.includes(value as NavStyle);
 const valueOf = (item: HTMLElement) => item.dataset.mkValue ?? item.getAttribute('href') ?? undefined;
 
 const read = (key: string) => {
@@ -77,17 +82,18 @@ export function revealShell(nav: HTMLElement): RevealHandle | null {
 export function createNav(root: HTMLElement | null, options: NavOptions = {}): NavInstance {
   if (!root) {
     warnOnce('nav: missing root');
-    return inert({ select() {}, setStyle() {}, setAccent() {}, index: -1, style: 'bonita', items: [] });
+    return inert({ select() {}, setStyle() {}, setAccent() {}, index: -1, style: 'pills', items: [] });
   }
   const scope = createScope();
   const items = () => [...root.querySelectorAll<HTMLElement>(ITEM)];
-  const fromClass = NAV_STYLES.find((name) => root.classList.contains(`mk-nav--${name}`));
+  const known = [...NAV_STYLES, ...Object.keys(NAV_STYLE_ALIASES)];
+  const fromClass = toNavStyle(known.find((name) => root.classList.contains(`mk-nav--${name}`)));
   const saved = options.storageKey ? read(options.storageKey) : null;
-  let style: NavStyle = options.style ?? (isStyle(saved) ? saved : undefined) ?? fromClass ?? 'bonita';
+  let style: NavStyle = toNavStyle(options.style) ?? toNavStyle(saved) ?? fromClass ?? 'pills';
 
   const paint = (accent: boolean) => {
     const classes = new Set(root.classList);
-    for (const name of NAV_STYLES) classes.delete(`mk-nav--${name}`);
+    for (const name of known) classes.delete(`mk-nav--${name}`);
     classes.add('mk-nav');
     classes.add(`mk-nav--${style}`);
     if (accent) classes.add('mk-nav--accent');
@@ -133,13 +139,14 @@ export function createNav(root: HTMLElement | null, options: NavOptions = {}): N
       else mark(item);
     },
     setStyle(next) {
-      if (!isStyle(next)) {
+      const resolved = toNavStyle(next);
+      if (!resolved) {
         warnOnce(`nav: unknown style "${String(next)}" (use ${NAV_STYLES.join(', ')})`);
         return;
       }
-      style = next;
+      style = resolved;
       paint(accent);
-      if (options.storageKey) write(options.storageKey, next);
+      if (options.storageKey) write(options.storageKey, resolved);
     },
     setAccent(on) {
       accent = on;