@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/components/toast/engine.ts

@@ -0,0 +1,483 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { bezier, channels, easeInCubic, easeOut, easeOutCubic, eased, spring, springEase } from '../../core/channels';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { splitGraphemes } from '../../core/split';
+import { TIMING } from '../../core/timing';
+import { inert, warnOnce, type Instance } from '../../core/types';
+import { iconSvg, type IconName } from '../icons';
+import { dismissToast, getToasts, removeToast, subscribeToasts, toastTimers, type ToastItem, type ToastTone } from './store';
+
+/*
+ * Stepbro's toast deck (ported from Kayro's ToastHost):
+ * - toasts stack at the top; older ones peek out 16 px below, 5 % smaller each,
+ *   three drawn; hovering opens the deck (spring .55, 60 ms cascade) and pauses
+ *   the timers, leaving closes it after 150 ms;
+ * - a toast with an origin grows out of that control (spring travel 144/14 with
+ *   a 2400 px/s kick, size 0.32 s, content zooming in from twice its size);
+ *   otherwise it slides in 12 px out of a 6 px blur; its letters rise one by one;
+ * - it leaves 24 px up into a 4 px blur (0.3 s) and can be swiped up (48 px) or
+ *   wheeled away (80 px).
+ */
+
+const STACK = { peek: 16, scaleStep: 0.05, minScale: 0.7, maxVisible: 3, gap: 8, baseZ: 1000 };
+const DISTANCE = { enter: 12, enterBlur: 6, exit: 24, exitBlur: 4, fade: 120 };
+const GESTURE = { swipe: 48, wheel: 80, expandDrag: 24, resistance: 0.15, wheelEndMs: 140 };
+const TONE_ICONS: Record<ToastTone, IconName | null> = { success: 'check', error: 'alert', info: 'info', neutral: null };
+
+export interface ToasterLabels {
+  dismiss?: string;
+}
+
+export interface ToasterOptions {
+  labels?: ToasterLabels;
+}
+
+export type ToasterInstance = Instance;
+
+interface Card {
+  card: HTMLElement;
+  shell: HTMLElement;
+  body: HTMLElement;
+  message: HTMLElement;
+}
+
+/** Where each live toast rests: index 0 is the newest, on top. */
+function layout(count: number, expanded: boolean, heights: number[]) {
+  let offset = 0;
+  return Array.from({ length: count }, (_, index) => {
+    if (expanded) {
+      const slot = { y: offset, scale: 1, opacity: 1, visible: true, zIndex: STACK.baseZ - index };
+      offset += (heights[index] ?? 0) + STACK.gap;
+      return slot;
+    }
+    const visible = index < STACK.maxVisible;
+    return {
+      y: index * STACK.peek,
+      scale: Math.max(STACK.minScale, 1 - index * STACK.scaleStep),
+      opacity: visible ? 1 : 0,
+      visible,
+      zIndex: STACK.baseZ - index,
+    };
+  });
+}
+
+/** A message's letters rise into place (graphemes, words kept together, at most 64). */
+function revealLetters(element: HTMLElement) {
+  const text = element.textContent ?? '';
+  const T = TIMING.toast;
+  if (!text || text.length > 64 || reduced()) return;
+  const letters = splitGraphemes(text, 64);
+  const original = element.innerHTML;
+  const width = element.getBoundingClientRect().width;
+  const fragment = document.createDocumentFragment();
+  const chars: HTMLSpanElement[] = [];
+  let word: HTMLSpanElement | null = null;
+  for (const letter of letters) {
+    if (!letter.trim()) {
+      word = null;
+      fragment.append(document.createTextNode(letter));
+      continue;
+    }
+    if (!word) {
+      word = document.createElement('span');
+      word.style.display = 'inline-block';
+      word.style.whiteSpace = 'nowrap';
+      fragment.append(word);
+    }
+    const char = document.createElement('span');
+    char.textContent = letter;
+    char.style.display = 'inline-block';
+    word.append(char);
+    chars.push(char);
+  }
+  if (width) element.style.width = `${width}px`;
+  element.textContent = '';
+  element.append(fragment);
+  gsap.fromTo(
+    chars,
+    { opacity: 0, yPercent: 40, filter: 'blur(4px)' },
+    {
+      opacity: 1,
+      yPercent: 0,
+      filter: 'blur(0px)',
+      duration: T.chars,
+      ease: easeOutCubic,
+      delay: (index: number) => T.charsDelay + index * T.charsStagger,
+      onComplete: () => {
+        element.innerHTML = original;
+        element.style.width = '';
+      },
+    },
+  );
+}
+
+/** Grow a toast's shell out of `origin` (Stepbro's toast morph). Returns a function that settles it now. */
+function morphFrom(card: HTMLElement, shell: HTMLElement, body: HTMLElement, origin: HTMLElement) {
+  const T = TIMING.toast;
+  const box = shell.getBoundingClientRect();
+  const start = origin.getBoundingClientRect();
+  const look = getComputedStyle(origin);
+  const own = getComputedStyle(shell);
+  const endRadius = parseFloat(own.borderTopLeftRadius) || 20;
+  const startRadius = Math.min(parseFloat(look.borderTopLeftRadius) || 0, start.height / 2);
+  card.style.width = `${box.width}px`;
+  card.style.height = `${box.height}px`;
+  body.style.width = `${body.getBoundingClientRect().width}px`;
+  const towardX = start.left + start.width / 2 < innerWidth / 2 ? 1 : -1;
+  const towardY = start.top + start.height / 2 < innerHeight / 2 ? 1 : -1;
+  const offset = { x: start.left - box.left, y: start.top - box.top };
+  Object.assign(shell.style, {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    width: `${start.width}px`,
+    height: `${start.height}px`,
+    borderRadius: `${startRadius}px`,
+    background: look.backgroundColor,
+    transform: `translate(${offset.x}px, ${offset.y}px)`,
+    transition: 'none',
+  });
+  Object.assign(body.style, { transform: 'scale(2)', transformOrigin: 'center center', filter: 'blur(8px)', opacity: '0' });
+  // The control steps aside while its toast leaves it.
+  origin.style.transition = 'opacity 160ms ease';
+  origin.style.opacity = '0';
+  void shell.offsetWidth;
+  shell.style.transition = `background ${T.morphColor}s ease-out ${T.morphColorDelay}s, box-shadow ${T.morphShadow}s ease-out ${T.morphShadowDelay}s`;
+  shell.style.background = '';
+  body.style.transition = `opacity ${T.morphColor}s ease-out ${T.morphColorDelay}s`;
+  body.style.opacity = '1';
+  const motion = channels(
+    { x: offset.x, y: offset.y, width: start.width, height: start.height, radius: startRadius, scale: 2, blur: 8 },
+    (name, value) => {
+      if (name === 'x') offset.x = value;
+      else if (name === 'y') offset.y = value;
+      else if (name === 'width') shell.style.width = `${value}px`;
+      else if (name === 'height') shell.style.height = `${value}px`;
+      else if (name === 'radius') shell.style.borderRadius = `${value}px`;
+      else if (name === 'scale') body.style.transform = `scale(${value})`;
+      else if (name === 'blur') body.style.filter = `blur(${value}px)`;
+      if (name === 'x' || name === 'y') shell.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
+    },
+  );
+  void motion.animate(
+    { x: 0, y: 0, width: box.width, height: box.height, radius: endRadius, scale: 1, blur: 0 },
+    {
+      x: spring(144, 14, { velocity: 2400, direction: towardX }),
+      y: spring(144, 14, { velocity: 2400, direction: towardY }),
+      width: eased(T.morphSize, bezier(0.8, 0.3, 0.5, 0.8)),
+      height: eased(T.morphSize, bezier(0.8, 0.3, 0.5, 0.8)),
+      radius: eased(T.morphRadius, easeOut),
+      scale: eased(T.morphContent, easeOut),
+      blur: eased(T.morphContent, easeOut),
+    },
+  );
+  let settled = false;
+  const settle = () => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(timer);
+    motion.stop();
+    for (const name of ['position', 'top', 'left', 'width', 'height', 'border-radius', 'background', 'transform', 'transition']) shell.style.removeProperty(name);
+    card.style.removeProperty('width');
+    card.style.removeProperty('height');
+    for (const name of ['transform', 'transform-origin', 'filter', 'opacity', 'width', 'transition']) body.style.removeProperty(name);
+    origin.style.transition = 'opacity 300ms ease';
+    origin.style.opacity = '';
+    setTimeout(() => {
+      origin.style.transition = '';
+    }, 320);
+  };
+  const timer = setTimeout(settle, T.safetyMs);
+  return settle;
+}
+
+function buildCard(item: ToastItem, dismissLabel: string): Card {
+  const card = document.createElement('div');
+  card.className = 'mk-toast';
+  card.dataset.mkToast = String(item.id);
+  card.dataset.mkTone = item.tone;
+  const shell = document.createElement('div');
+  shell.className = 'mk-toast__shell';
+  const body = document.createElement('div');
+  body.className = 'mk-toast__body';
+  const icon = item.icon ? TONE_ICONS[item.tone] : null;
+  if (icon) {
+    const holder = document.createElement('span');
+    holder.className = 'mk-toast__icon';
+    holder.innerHTML = iconSvg(icon, 18);
+    body.append(holder);
+  }
+  const message = document.createElement('span');
+  message.className = 'mk-toast__message';
+  message.textContent = item.message;
+  body.append(message);
+  if (item.action) {
+    const action = document.createElement('button');
+    action.type = 'button';
+    action.className = 'mk-toast__action';
+    action.dataset.mkToastAction = '';
+    action.textContent = item.action.label;
+    body.append(action);
+  }
+  const dismiss = document.createElement('button');
+  dismiss.type = 'button';
+  dismiss.className = 'mk-toast__dismiss';
+  dismiss.dataset.mkToastDismiss = '';
+  dismiss.setAttribute('aria-label', dismissLabel);
+  dismiss.innerHTML = iconSvg('close', 14);
+  body.append(dismiss);
+  shell.append(body);
+  card.append(shell);
+  return { card, shell, body, message };
+}
+
+/** Render the toast list into `host` (a fixed layer at the top of the screen). */
+export function createToaster(host: HTMLElement | null, options: ToasterOptions = {}): ToasterInstance {
+  if (!host) {
+    warnOnce('toaster: missing host');
+    return inert();
+  }
+  registerMotion();
+  const dismissLabel = options.labels?.dismiss ?? 'Cerrar';
+  const scope = createScope();
+  const cards = new Map<number, Card>();
+  const entered = new Set<number>();
+  const leaving = new Set<number>();
+  const dragging = new Set<number>();
+  const settles = new Map<number, () => void>();
+  let expanded = false;
+  let collapse: ReturnType<typeof setTimeout> | undefined;
+  const popover = typeof host.showPopover === 'function';
+
+  scope.attr(host, 'role', 'status');
+  scope.attr(host, 'aria-live', 'polite');
+  if (popover) scope.attr(host, 'popover', 'manual');
+
+  const live = () =>
+    getToasts()
+      .filter((item) => !item.closing)
+      .reverse()
+      .map((item) => ({ item, entry: cards.get(item.id) }))
+      .filter((pair): pair is { item: ToastItem; entry: Card } => pair.entry !== undefined);
+
+  const slotsFor = () => {
+    const entries = live();
+    return { entries, slots: layout(entries.length, expanded, entries.map(({ entry }) => entry.card.offsetHeight)) };
+  };
+
+  const relayout = (duration: number = TIMING.toast.relayout, ease: gsap.EaseFunction = easeOutCubic, stagger = 0) => {
+    const { entries, slots } = slotsFor();
+    entries.forEach(({ item, entry }, index) => {
+      const slot = slots[index];
+      if (!slot) return;
+      entry.card.style.zIndex = String(slot.zIndex);
+      entry.card.style.pointerEvents = slot.visible ? 'auto' : 'none';
+      entry.card.setAttribute('aria-hidden', slot.visible ? 'false' : 'true');
+      if (dragging.has(item.id) || !entered.has(item.id)) return;
+      gsap.to(entry.card, {
+        xPercent: -50,
+        y: slot.y,
+        scale: slot.scale,
+        opacity: slot.opacity,
+        duration: reduced() ? 0 : duration,
+        ease,
+        delay: stagger * index,
+        overwrite: 'auto',
+      });
+    });
+  };
+  const restingY = (id: number) => {
+    const { entries, slots } = slotsFor();
+    return slots[entries.findIndex(({ item }) => item.id === id)]?.y ?? 0;
+  };
+
+  const openDeck = () => {
+    clearTimeout(collapse);
+    if (expanded) return;
+    expanded = true;
+    for (const { item } of live()) toastTimers.pause(item.id);
+    relayout(TIMING.toast.expand, springEase(0.55), TIMING.toast.expandStagger);
+  };
+  const closeDeck = () => {
+    clearTimeout(collapse);
+    collapse = setTimeout(() => {
+      if (!expanded) return;
+      expanded = false;
+      for (const { item } of live()) toastTimers.resume(item.id);
+      relayout(TIMING.toast.expand, springEase(0.55), TIMING.toast.expandStagger);
+    }, TIMING.toast.collapseDelayMs);
+  };
+
+  const showLayer = (visible: boolean) => {
+    if (!popover) return;
+    try {
+      if (host.matches(':popover-open')) host.hidePopover();
+      if (visible) host.showPopover();
+    } catch {
+      // :popover-open unsupported (no popover API): nothing to toggle.
+    }
+  };
+
+  const attachGestures = (item: ToastItem, card: HTMLElement) => {
+    let start: { y: number; type: string } | null = null;
+    let wheel: { offset: number; end: ReturnType<typeof setTimeout> | undefined } | null = null;
+    const move = (offset: number) => gsap.set(card, { y: restingY(item.id) + offset, opacity: Math.max(0, 1 + Math.min(0, offset) / DISTANCE.fade) });
+    const cancel = () => {
+      dragging.delete(item.id);
+      gsap.to(card, { y: restingY(item.id), opacity: 1, duration: 0.25, ease: easeOutCubic });
+      if (!expanded) toastTimers.resume(item.id);
+    };
+    card.addEventListener('mouseenter', openDeck);
+    card.addEventListener('mouseleave', closeDeck);
+    card.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0 || (event.target as Element).closest('button, a, input, textarea, select, [role="button"]')) return;
+      start = { y: event.clientY, type: event.pointerType };
+      card.setPointerCapture?.(event.pointerId);
+      dragging.add(item.id);
+      gsap.killTweensOf(card);
+      toastTimers.pause(item.id);
+    });
+    card.addEventListener('pointermove', (event) => {
+      if (!start) return;
+      const dy = event.clientY - start.y;
+      move(dy < 0 ? dy : start.type === 'touch' ? dy * GESTURE.resistance : 0);
+    });
+    const up = (event: PointerEvent) => {
+      if (!start) return;
+      const dy = event.clientY - start.y;
+      const type = start.type;
+      start = null;
+      if (dy < -GESTURE.swipe) {
+        dragging.delete(item.id);
+        dismissToast(item.id);
+      } else if (type === 'touch' && dy > GESTURE.expandDrag) {
+        cancel();
+        if (expanded) closeDeck();
+        else openDeck();
+      } else cancel();
+    };
+    card.addEventListener('pointerup', up);
+    card.addEventListener('pointercancel', up);
+    card.addEventListener(
+      'wheel',
+      (event) => {
+        const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaMode === 2 ? event.deltaY * innerHeight : event.deltaY;
+        if (!wheel) {
+          wheel = { offset: 0, end: undefined };
+          dragging.add(item.id);
+          toastTimers.pause(item.id);
+        }
+        wheel.offset = Math.min(0, wheel.offset - delta);
+        move(wheel.offset);
+        clearTimeout(wheel.end);
+        wheel.end = setTimeout(() => {
+          const offset = wheel?.offset ?? 0;
+          wheel = null;
+          if (offset < -GESTURE.wheel) {
+            dragging.delete(item.id);
+            dismissToast(item.id);
+          } else cancel();
+        }, GESTURE.wheelEndMs);
+      },
+      { passive: true },
+    );
+    card.addEventListener('click', (event) => {
+      const target = event.target as Element;
+      if (target.closest('[data-mk-toast-dismiss]')) dismissToast(item.id);
+      else if (target.closest('[data-mk-toast-action]')) {
+        item.action?.onClick();
+        dismissToast(item.id);
+      }
+    });
+  };
+
+  const finishCard = (id: number) => {
+    settles.get(id)?.();
+    settles.delete(id);
+    const entry = cards.get(id);
+    if (entry) {
+      gsap.killTweensOf(entry.card);
+      entry.card.remove();
+    }
+    cards.delete(id);
+    entered.delete(id);
+    leaving.delete(id);
+    dragging.delete(id);
+  };
+
+  const render = () => {
+    const list = getToasts();
+    const ids = new Set(list.map((item) => item.id));
+    for (const id of [...cards.keys()]) if (!ids.has(id)) finishCard(id);
+    for (const item of list) {
+      if (!cards.has(item.id) && !item.closing) {
+        const entry = buildCard(item, dismissLabel);
+        cards.set(item.id, entry);
+        host.append(entry.card);
+        gsap.set(entry.card, { xPercent: -50 });
+        attachGestures(item, entry.card);
+      }
+    }
+    showLayer(list.some((item) => !item.closing) || leaving.size > 0);
+    for (const item of list) {
+      const entry = cards.get(item.id);
+      if (!entry) continue;
+      if (!entered.has(item.id) && !item.closing) {
+        entered.add(item.id);
+        toastTimers.start(item.id, item.duration);
+        relayout();
+        gsap.killTweensOf(entry.card);
+        gsap.set(entry.card, { xPercent: -50, y: restingY(item.id), scale: 1, opacity: 1 });
+        if (expanded) toastTimers.pause(item.id);
+        revealLetters(entry.message);
+        if (reduced()) continue;
+        if (item.origin?.isConnected) settles.set(item.id, morphFrom(entry.card, entry.shell, entry.body, item.origin));
+        else {
+          const y = restingY(item.id);
+          gsap.fromTo(
+            entry.card,
+            { y: y - DISTANCE.enter, opacity: 0, filter: `blur(${DISTANCE.enterBlur}px)` },
+            { y, opacity: 1, filter: 'blur(0px)', duration: TIMING.toast.enter, ease: springEase(0.58, -3.5), clearProps: 'filter' },
+          );
+        }
+      }
+      if (item.closing && !leaving.has(item.id)) {
+        leaving.add(item.id);
+        toastTimers.clear(item.id);
+        entry.card.style.zIndex = String(STACK.baseZ + 1);
+        const done = () => {
+          finishCard(item.id);
+          removeToast(item.id);
+        };
+        if (reduced()) done();
+        else {
+          gsap.to(entry.card, {
+            y: Number(gsap.getProperty(entry.card, 'y')) - DISTANCE.exit,
+            opacity: 0,
+            filter: `blur(${DISTANCE.exitBlur}px)`,
+            duration: TIMING.toast.exit,
+            ease: easeInCubic,
+            overwrite: 'auto',
+            onComplete: done,
+          });
+        }
+        relayout();
+      }
+    }
+  };
+
+  scope.add(subscribeToasts(render));
+  render();
+  host.dataset.mkReady = '';
+
+  return {
+    destroy() {
+      clearTimeout(collapse);
+      for (const id of [...cards.keys()]) finishCard(id);
+      showLayer(false);
+      scope.dispose();
+      delete host.dataset.mkReady;
+    },
+  };
+}

package/src/components/toast/react.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../../react/use-recipe';
+import { createToaster, type ToasterLabels } from './engine';
+
+export interface ToasterProps {
+  labels?: ToasterLabels;
+}
+
+/** Stepbro's toast deck. Mount once near the root; show toasts with `toast()`. */
+export function Toaster({ labels }: ToasterProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const dismiss = labels?.dismiss;
+  useIsomorphicLayoutEffect(() => {
+    const toaster = createToaster(ref.current, { labels: { dismiss } });
+    return () => toaster.destroy();
+  }, [dismiss]);
+  return <div ref={ref} className="mk-toaster" />;
+}
+
+export { toast, dismissToast, clearToasts, type ToastOptions, type ToastTone, type ToastAction } from './store';

package/src/components/toast/store.ts

@@ -0,0 +1,122 @@
+/*
+ * The toasts on screen and their timers (Stepbro's toast queue, ported from
+ * Kayro). Framework-agnostic: any number of toasters (vanilla, element, React)
+ * render the same list. A timer pauses while the deck is open and resumes with
+ * what was left. Never put a secret in a message: toasts confirm an action.
+ */
+
+export type ToastTone = 'success' | 'error' | 'info' | 'neutral';
+
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface ToastOptions {
+  /** The control the toast grows out of. */
+  origin?: HTMLElement | null;
+  /** ms on screen; 0 keeps it until dismissed. */
+  duration?: number;
+  tone?: ToastTone;
+  action?: ToastAction;
+  /** Show the tone's icon (default). */
+  icon?: boolean;
+}
+
+export interface ToastItem {
+  id: number;
+  message: string;
+  origin: HTMLElement | null;
+  duration: number;
+  tone: ToastTone;
+  action: ToastAction | null;
+  icon: boolean;
+  closing: boolean;
+}
+
+/** At most this many live toasts; older ones leave to make room. */
+export const TOAST_LIMIT = 5;
+
+let items: ToastItem[] = [];
+let nextId = 1;
+const listeners = new Set<() => void>();
+const emit = () => {
+  for (const listener of listeners) listener();
+};
+
+export const getToasts = () => items;
+
+export function subscribeToasts(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function show(message: string, { origin = null, duration = 4000, tone = 'success', action, icon = true }: ToastOptions = {}) {
+  const id = nextId++;
+  const live = items.filter((item) => !item.closing);
+  const extra = new Set(live.slice(0, Math.max(0, live.length - TOAST_LIMIT + 1)).map((item) => item.id));
+  items = [
+    ...items.map((item) => (extra.has(item.id) ? { ...item, closing: true } : item)),
+    { id, message, origin, duration, tone, action: action ?? null, icon, closing: false },
+  ];
+  emit();
+  return id;
+}
+
+/** Start the closing animation of a toast. */
+export function dismissToast(id: number) {
+  const item = items.find((entry) => entry.id === id);
+  if (!item || item.closing) return;
+  items = items.map((entry) => (entry.id === id ? { ...entry, closing: true } : entry));
+  emit();
+}
+
+/** Take a toast out of the list (after its exit animation). */
+export function removeToast(id: number) {
+  toastTimers.clear(id);
+  items = items.filter((entry) => entry.id !== id);
+  emit();
+}
+
+/** Remove every toast at once (no animation). */
+export function clearToasts() {
+  for (const item of items) toastTimers.clear(item.id);
+  items = [];
+  emit();
+}
+
+/** Show a toast: `toast('Copiado', { origin: button })`. Returns its id. */
+export const toast = Object.assign(show, { dismiss: dismissToast, clear: clearToasts });
+
+const running = new Map<number, { handle: ReturnType<typeof setTimeout> | null; remaining: number; started: number }>();
+
+export const toastTimers = {
+  start(id: number, duration: number) {
+    if (duration <= 0 || running.has(id)) return;
+    running.set(id, { handle: setTimeout(() => dismissToast(id), duration), remaining: duration, started: Date.now() });
+  },
+  pause(id: number) {
+    const timer = running.get(id);
+    if (!timer?.handle) return;
+    clearTimeout(timer.handle);
+    timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.started));
+    timer.handle = null;
+  },
+  resume(id: number) {
+    const timer = running.get(id);
+    if (!timer || timer.handle) return;
+    if (timer.remaining <= 0) {
+      dismissToast(id);
+      return;
+    }
+    timer.started = Date.now();
+    timer.handle = setTimeout(() => dismissToast(id), timer.remaining);
+  },
+  clear(id: number) {
+    const timer = running.get(id);
+    if (timer?.handle) clearTimeout(timer.handle);
+    running.delete(id);
+  },
+};