@yewdiel21/motion-kit 0.14.0 → 0.16.0

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;