@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/components/nav/element.ts

@@ -0,0 +1,39 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createNav, type NavInstance, type NavStyle } from './engine';
+
+/**
+ * <mk-nav class="mk-nav mk-nav--bonita" nav-style="bonita" [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.
+ */
+export class MkNavElement extends MkElement<NavInstance> {
+  static options: Record<string, OptionType> = { navStyle: 'string', accent: 'boolean', reveal: 'boolean', storageKey: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createNav(this, {
+      style: options.navStyle as NavStyle | undefined,
+      accent: options.accent as boolean | undefined,
+      reveal: Boolean(options.reveal),
+      storageKey: options.storageKey as string | undefined,
+    });
+  }
+
+  // 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);
+    else if (name === 'accent') this.instance.setAccent(next !== null && next !== 'false');
+    else super.attributeChangedCallback(name, previous, next);
+  }
+
+  select(target: number | string) {
+    this.instance?.select(target);
+  }
+
+  setStyle(style: NavStyle) {
+    this.instance?.setStyle(style);
+  }
+}
+
+export const defineNav = () => defineElement('mk-nav', MkNavElement);

package/src/components/nav/engine.ts

@@ -0,0 +1,164 @@
+import { entrances } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, warnOnce, type Instance } from '../../core/types';
+import { revealFrom, type RevealHandle } from '../../motion/reveal';
+
+/*
+ * Stepbro's navigation: seven desktop styles (Clásica, Bonita, Dock, Guapa,
+ * Tasks, Melon, Tunnel) 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, like Stepbro's "money-nav"), and on start can reveal the
+ * app shell from the first button (Stepbro's Nav runs revealFrom on mount).
+ * 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 type NavStyle = (typeof NAV_STYLES)[number];
+
+export interface NavOptions {
+  /** Default: the saved one (storageKey), else the mk-nav--<style> class in the markup, else 'bonita' (Money's default). */
+  style?: NavStyle;
+  /** The accent variant (Stepbro's variant-1): the current page in primary-container. */
+  accent?: boolean;
+  /** Reveal the shell from the first button when the nav starts (off by default). */
+  reveal?: boolean;
+  /** Remember the chosen style in localStorage under this key. */
+  storageKey?: string;
+  labels?: { nav?: string };
+  onSelect?: (index: number, value: string | undefined, item: HTMLElement) => void;
+}
+
+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;
+  setAccent(on: boolean): void;
+  readonly index: number;
+  readonly style: NavStyle;
+  readonly items: HTMLElement[];
+}
+
+export interface NavigateDetail {
+  index: number;
+  value: string | undefined;
+  item: HTMLElement;
+  /** The click: call its preventDefault() to stop a link (single-page apps). */
+  originalEvent: MouseEvent;
+}
+
+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) => {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+const write = (key: string, value: string) => {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // Private mode or blocked storage: the style still changes for this page.
+  }
+};
+
+/** Stepbro's nav entrance: the app shell is uncovered from the nav's first button. */
+export function revealShell(nav: HTMLElement): RevealHandle | null {
+  if (!entrances()) return null;
+  const shell = nav.closest<HTMLElement>('.mk-shell') ?? nav.parentElement;
+  if (!shell) return null;
+  const origin = nav.querySelector<HTMLElement>('.mk-nav__button--first') ?? nav.querySelector<HTMLElement>(ITEM) ?? nav;
+  return revealFrom(shell, { origin });
+}
+
+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: [] });
+  }
+  const scope = createScope();
+  const items = () => [...root.querySelectorAll<HTMLElement>(ITEM)];
+  const fromClass = NAV_STYLES.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';
+
+  const paint = (accent: boolean) => {
+    const classes = new Set(root.classList);
+    for (const name of NAV_STYLES) classes.delete(`mk-nav--${name}`);
+    classes.add('mk-nav');
+    classes.add(`mk-nav--${style}`);
+    if (accent) classes.add('mk-nav--accent');
+    else classes.delete('mk-nav--accent');
+    scope.attr(root, 'class', [...classes].join(' '));
+  };
+  let accent = options.accent ?? root.classList.contains('mk-nav--accent');
+  paint(accent);
+
+  if (root.localName !== 'nav') scope.attr(root, 'role', 'navigation');
+  if (!root.hasAttribute('aria-label') && !root.hasAttribute('aria-labelledby')) scope.attr(root, 'aria-label', options.labels?.nav ?? 'Principal');
+
+  const mark = (current: HTMLElement | undefined) => {
+    for (const item of items()) scope.attr(item, 'aria-current', item === current ? 'page' : null);
+  };
+  const find = (target: number | string) => {
+    const list = items();
+    return typeof target === 'number' ? list[target] : list.find((item) => valueOf(item) === target);
+  };
+
+  scope.on(root, 'click', (event) => {
+    const item = (event.target as Element | null)?.closest<HTMLElement>(ITEM);
+    if (!item || !root.contains(item)) return;
+    const index = items().indexOf(item);
+    const value = valueOf(item);
+    const detail: NavigateDetail = { index, value, item, originalEvent: event as MouseEvent };
+    if (!root.dispatchEvent(new CustomEvent('mk:navigate', { bubbles: true, cancelable: true, detail }))) {
+      event.preventDefault();
+      return;
+    }
+    mark(item);
+    options.onSelect?.(index, value, item);
+  });
+
+  let reveal: RevealHandle | null = null;
+  if (options.reveal) reveal = revealShell(root);
+  root.dataset.mkReady = '';
+
+  return {
+    select(target) {
+      const item = find(target);
+      if (!item) warnOnce(`nav: no item ${JSON.stringify(target)}`);
+      else mark(item);
+    },
+    setStyle(next) {
+      if (!isStyle(next)) {
+        warnOnce(`nav: unknown style "${String(next)}" (use ${NAV_STYLES.join(', ')})`);
+        return;
+      }
+      style = next;
+      paint(accent);
+      if (options.storageKey) write(options.storageKey, next);
+    },
+    setAccent(on) {
+      accent = on;
+      paint(accent);
+    },
+    get index() {
+      return items().findIndex((item) => item.getAttribute('aria-current') === 'page');
+    },
+    get style() {
+      return style;
+    },
+    get items() {
+      return items();
+    },
+    destroy() {
+      reveal?.cancel();
+      reveal = null;
+      scope.dispose();
+      delete root.dataset.mkReady;
+    },
+  };
+}