@zyncat/ui 0.10.0 → 0.12.0

package/src/components/composites/emoji-picker/react/category-bar.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useId, useRef } from 'react';
+
+import { Motion } from '../../../../motion/element';
+import { GlidePill, useGlide, type GlideApi } from '../../../../motion/glide';
+import { UIMotion as SM } from '../../../../tokens/motion-tokens';
+import { activationProps, type ActivateOn } from '../../../internal/utils/activation';
+import { CATEGORY_ICON_ATTRS, CATEGORY_ICONS } from '../category-icons';
+import { useCategories, useIsActiveCategory, type EmojiPickerStore } from './useEmojiPicker';
+
+const RAIL_GLIDE = { timing: { duration: SM.dur.base, ease: SM.ease.standard } };
+
+interface CategoryProps {
+  store: EmojiPickerStore;
+  categoryKey: string;
+  railId: string;
+  glide: GlideApi;
+  activateOn?: ActivateOn;
+}
+
+function Category({ store, categoryKey, railId, glide, activateOn }: CategoryProps) {
+  const isActive = useIsActiveCategory(store, categoryKey);
+
+  return (
+    <button
+      type="button"
+      className={isActive ? 'on-emoji-cat on-emoji-cat--active' : 'on-emoji-cat'}
+      aria-label={categoryKey.replace(/-/g, ' ')}
+      aria-current={isActive ? true : undefined}
+      onPointerEnter={(e) => glide.enter(e.currentTarget)}
+      {...activationProps<HTMLButtonElement>(() => store.scrollToCategory(categoryKey), {
+        on: activateOn,
+        holdFocus: true,
+      })}
+    >
+      <svg
+        {...CATEGORY_ICON_ATTRS}
+        dangerouslySetInnerHTML={{ __html: CATEGORY_ICONS[categoryKey] ?? CATEGORY_ICONS.symbols }}
+      />
+      {isActive && (
+        <Motion
+          as="span"
+          layoutId={railId}
+          layoutTransition={RAIL_GLIDE}
+          className="on-emoji-cat-rail"
+          aria-hidden="true"
+        />
+      )}
+    </button>
+  );
+}
+
+export function CategoryBar({ store, activateOn }: { store: EmojiPickerStore; activateOn?: ActivateOn }) {
+  const barRef = useRef<HTMLDivElement | null>(null);
+  const glide = useGlide(barRef);
+  const railId = useId();
+  const categories = useCategories(store);
+
+  if (!categories.length) return null;
+
+  return (
+    <div
+      ref={barRef}
+      className="on-emoji-bar"
+      onPointerLeave={glide.leave}
+      onMouseDown={(e) => e.preventDefault()}
+      role="group"
+      aria-label="Emoji categories"
+    >
+      <GlidePill className="on-emoji-bar-marker" glide={glide} />
+      {categories.map((key) => (
+        <Category key={key} store={store} categoryKey={key} railId={railId} glide={glide} activateOn={activateOn} />
+      ))}
+    </div>
+  );
+}

package/src/components/composites/emoji-picker/react/useEmojiPicker.ts

@@ -0,0 +1,139 @@
+'use client';
+
+import { useEffect, useId, useMemo, useSyncExternalStore } from 'react';
+
+import type { ActivateOn } from '../../../internal/utils/activation';
+import { createEmojiPicker, type EmojiPickerApi } from '../picker';
+import type { GetEmojiUrl } from '../types';
+
+export interface UseEmojiPickerOptions {
+  onSelect: (shortcode: string, hexId: string) => void;
+  getEmojiUrl: GetEmojiUrl;
+  /** Drive the results from outside — a `:` chip in a document, your own input. */
+  query?: string;
+  /** Whether picking an emoji fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+  activateOn?: ActivateOn;
+}
+
+export type EmojiPickerStore = ReturnType<typeof createEmojiPickerStore>;
+
+type Handlers = Pick<UseEmojiPickerOptions, 'onSelect' | 'getEmojiUrl' | 'activateOn'>;
+
+const FOCUSABLE = 'input, textarea, [tabindex]';
+const NO_CATEGORIES: string[] = [];
+const notActive = () => false;
+
+export function createEmojiPickerStore(listboxId: string, handlers: Handlers) {
+  const listeners = new Set<() => void>();
+  const emit = () => listeners.forEach((listener) => listener());
+
+  let api: EmojiPickerApi | null = null;
+  let focusHost: HTMLElement | null = null;
+  let categories = NO_CATEGORIES;
+  let active: string | null = null;
+  let query = '';
+  let drawn = false;
+
+  const draw = () => {
+    if (!api) return;
+    drawn = true;
+    if (query) api.renderFiltered(query);
+    else api.renderAll();
+  };
+
+  return {
+    /** Spread onto the field that drives the picker: combobox roles, already pointing at the grid. */
+    searchProps: {
+      role: 'combobox',
+      'aria-expanded': true,
+      'aria-autocomplete': 'list',
+      'aria-controls': listboxId,
+    } as const,
+    /** Callback ref for the element the picker takes over. The grid is built the moment the node
+     *  arrives, which for a popover is a commit or two after the hook first ran. */
+    mount: (node: HTMLDivElement | null) => {
+      api?.destroy();
+      drawn = false;
+      api = node
+        ? createEmojiPicker(node, {
+            listboxId,
+            getEmojiUrl: (...args) => handlers.getEmojiUrl(...args),
+            getFocusHost: () => focusHost,
+            getActivateOn: () => handlers.activateOn,
+            onSelect: (...args) => handlers.onSelect(...args),
+            onCategoriesChange: (keys) => {
+              categories = keys;
+              emit();
+            },
+            onActiveCategoryChange: (key) => {
+              active = key;
+              emit();
+            },
+          })
+        : null;
+      draw();
+    },
+    /** Callback ref for the field that keeps focus while the grid is navigated, or anything wrapping it.
+     *  The picker moves `aria-activedescendant` on it directly, so running the marker down 1900 tiles
+     *  never costs a render. */
+    searchRef: (node: HTMLElement | null) => {
+      focusHost = node?.matches(FOCUSABLE) ? node : (node?.querySelector<HTMLElement>(FOCUSABLE) ?? null);
+    },
+    setHandlers: (next: Handlers) => {
+      handlers = next;
+    },
+    subscribe: (listener: () => void) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getCategories: () => categories,
+    isActive: (key: string) => active === key,
+    render: (next = '') => {
+      if (drawn && next === query) return;
+      query = next;
+      draw();
+    },
+    scrollToCategory: (key: string) => api?.scrollToCategory(key),
+    /** Redraw the full category grid, dropping whatever query was showing. */
+    renderAll: () => {
+      query = '';
+      draw();
+    },
+    /** Redraw the grid as the ranked results for `next`, with the first hit already marked. */
+    renderFiltered: (next: string) => {
+      query = next;
+      draw();
+    },
+    /** Feed a key event from your own field into the grid - arrows move, Enter picks.
+     *  Returns true when the grid consumed the key, so you can leave the rest to your input. */
+    handleKey: (event: KeyboardEvent) => api?.handleKey(event) ?? false,
+    /** Commit the tile the marker is on, exactly as a click on it would. */
+    selectFocused: () => api?.selectFocused(),
+  };
+}
+
+export function useEmojiPicker({ onSelect, getEmojiUrl, query, activateOn }: UseEmojiPickerOptions): EmojiPickerStore {
+  const listboxId = useId();
+  const store = useMemo(() => createEmojiPickerStore(listboxId, { onSelect, getEmojiUrl }), [listboxId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    store.setHandlers({ onSelect, getEmojiUrl, activateOn });
+  });
+
+  useEffect(() => {
+    store.render(query);
+  }, [store, query]);
+
+  return store;
+}
+
+/** Category keys the grid currently holds; empty while showing search results. */
+export const useCategories = (store: EmojiPickerStore): string[] =>
+  useSyncExternalStore(store.subscribe, store.getCategories, store.getCategories);
+
+/** Whether the scroll position is inside this category. Subscribing per key means a scrollspy
+ *  tick re-renders the two rows whose state flipped, not the panel. */
+export const useIsActiveCategory = (store: EmojiPickerStore, key: string): boolean =>
+  useSyncExternalStore(store.subscribe, () => store.isActive(key), notActive);

package/src/components/composites/emoji-picker/scaffold.ts

@@ -0,0 +1,74 @@
+import { animate, flip, measure, set } from '../../../engine';
+import { UIMotion as SM } from '../../../tokens/motion-tokens';
+import type { EmojiData } from './data';
+import { el } from './dom';
+import type { GetEmojiUrl } from './types';
+
+const IDLE_CAPTION = 'Pick an emoji…';
+const MARKER_OPACITY = 0.6;
+
+export function createScaffold(root: HTMLElement, emojiData: EmojiData, getEmojiUrl: GetEmojiUrl, listboxId: string) {
+  const scroll = el('div', 'on-emoji-scroll');
+  const marker = el('span', 'on-emoji-marker');
+  const caption = el('div', 'on-emoji-caption');
+
+  scroll.id = listboxId;
+  scroll.setAttribute('role', 'listbox');
+  scroll.setAttribute('aria-label', 'Emoji');
+
+  caption.innerHTML =
+    '<img class="on-emoji-caption-img" alt="" draggable="false" hidden>' +
+    '<span class="on-emoji-caption-name"></span><span class="on-emoji-caption-code"></span>';
+  const [captionImg, captionName, captionCode] = caption.children as unknown as [
+    HTMLImageElement,
+    HTMLElement,
+    HTMLElement,
+  ];
+
+  root.className = 'on-emoji-body';
+  root.append(scroll, caption);
+
+  const setCaption = (btn: HTMLButtonElement | null) => {
+    const emoji = btn?.dataset.id ? emojiData.emojis[btn.dataset.id] : null;
+    caption.classList.toggle('is-idle', !emoji);
+    captionImg.hidden = !emoji;
+    captionName.textContent = emoji ? emoji.name : IDLE_CAPTION;
+    captionCode.textContent = emoji ? `:${emoji.shortcodes[0] ?? emoji.id}:` : '';
+    if (emoji) captionImg.src = getEmojiUrl(emoji.id, 'picker-grid');
+  };
+  setCaption(null);
+
+  const offsetWithinScroll = (node: HTMLElement) => {
+    let left = 0;
+    let top = 0;
+    for (let box: HTMLElement | null = node; box && box !== scroll; box = box.offsetParent as HTMLElement | null) {
+      left += box.offsetLeft;
+      top += box.offsetTop;
+    }
+    return { left, top };
+  };
+
+  let hadFocus = false;
+  const positionMarker = (btn: HTMLButtonElement | null) => {
+    if (!btn?.offsetHeight) {
+      animate(marker, { opacity: [0], timing: SM.t.exit });
+      hadFocus = false;
+      return;
+    }
+    const from = hadFocus ? measure(marker) : null;
+    const tile = offsetWithinScroll(btn);
+    set(marker, { x: [tile.left], y: [tile.top], width: [btn.offsetWidth], height: [btn.offsetHeight] });
+    animate(marker, { opacity: [MARKER_OPACITY], timing: { duration: SM.dur.fast, ease: SM.ease.standard } });
+    hadFocus = true;
+    if (from && !SM.reduced)
+      flip(marker, from, { size: 'none', timing: { duration: SM.dur.base, ease: SM.ease.standard } });
+  };
+
+  const mountMarker = () => {
+    hadFocus = false;
+    set(marker, { opacity: [0] });
+    scroll.appendChild(marker);
+  };
+
+  return { scroll, setCaption, positionMarker, mountMarker };
+}

package/src/components/composites/emoji-picker/search.ts

@@ -0,0 +1,79 @@
+import { getEmojiData, type EmojiData } from './data';
+
+const MAX_RESULTS = 90;
+
+/* Emoji search is word search, not fuzzy search: at ~1800 items a
+ * subsequence tier drowns the tail in junk ("cat" ⊂ "certification"), so
+ * matching is strictly word-based — every query token must hit a word
+ * (exact / prefix / mid-word for longer tokens), and tags count for less
+ * than names or shortcodes. */
+
+interface IndexedEmoji {
+  id: string;
+  shortcodes: string[];
+  words: string[];
+  tagWords: string[];
+  nameLen: number;
+}
+
+const splitWords = (s: string) =>
+  s
+    .toLowerCase()
+    .split(/[\s_-]+/)
+    .filter(Boolean);
+
+let source: EmojiData | null = null;
+let index: IndexedEmoji[] = [];
+
+const buildIndex = (data: EmojiData) => {
+  source = data;
+  index = Object.values(data.emojis).map((e) => ({
+    id: e.id,
+    shortcodes: e.shortcodes.map((s) => s.toLowerCase()),
+    words: [...new Set([...splitWords(e.name), ...e.shortcodes.flatMap(splitWords)])],
+    tagWords: [...new Set(e.tags.flatMap(splitWords))],
+    nameLen: e.name.length,
+  }));
+};
+
+const rank = (word: string, t: string, exact: number, prefix: number, mid = 0) => {
+  if (word === t) return exact;
+  if (word.startsWith(t)) return prefix;
+  return mid && t.length >= 3 && word.includes(t) ? mid : 0;
+};
+
+const scoreToken = (e: IndexedEmoji, t: string): number => {
+  let best = 0;
+  for (const s of e.shortcodes) best = Math.max(best, rank(s, t, 100, 60));
+  if (best === 100) return best;
+  for (const w of e.words) best = Math.max(best, rank(w, t, 70, 55, 15));
+  for (const w of e.tagWords) best = Math.max(best, rank(w, t, 30, 22));
+  return best;
+};
+
+export const getRankedEmojiIds = (query: string): string[] => {
+  const data = getEmojiData();
+  if (!data) return [];
+  if (source !== data) buildIndex(data);
+
+  const tokens = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+  if (!tokens.length) return [];
+
+  const scored: { id: string; score: number; nameLen: number }[] = [];
+  for (const e of index) {
+    let total = 0;
+    for (const t of tokens) {
+      const s = scoreToken(e, t);
+      if (!s) {
+        total = 0;
+        break;
+      }
+      total += s;
+    }
+    if (total) scored.push({ id: e.id, score: total, nameLen: e.nameLen });
+  }
+
+  // Equal relevance → the shorter name is the more focal emoji.
+  scored.sort((a, b) => b.score - a.score || a.nameLen - b.nameLen);
+  return scored.slice(0, MAX_RESULTS).map((s) => s.id);
+};

package/src/components/composites/emoji-picker/styles.css

@@ -0,0 +1,221 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .on-emoji,
+  .on-emoji *,
+  .on-emoji-body,
+  .on-emoji-body * {
+    box-sizing: border-box;
+  }
+
+  .on-emoji {
+    display: flex;
+    flex-direction: column;
+    width: var(--emoji-picker-width, 23.5rem);
+    height: var(--emoji-picker-height, 26.5rem);
+    background: var(--bg-surface-raised);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    color: var(--text-body);
+    font-family: var(--font-sans);
+    font-size: var(--size-body);
+  }
+  .on-emoji-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .on-emoji-search {
+    flex: none;
+    padding: var(--space-2) var(--space-2) var(--space-1);
+  }
+
+  .on-emoji-bar {
+    position: relative;
+    display: flex;
+    flex: none;
+    justify-content: space-between;
+    padding: var(--space-1) var(--space-2);
+    border-bottom: var(--border-hairline) solid var(--border-default);
+  }
+  .on-emoji-cat {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--space-6);
+    height: var(--space-6);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+  .on-emoji-cat:hover {
+    color: var(--text-body);
+  }
+  .on-emoji-cat--active {
+    color: var(--text-accent);
+  }
+  .on-emoji-cat > svg {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+  }
+  .on-emoji-cat-rail {
+    position: absolute;
+    inset-inline: 0;
+    bottom: calc(2px - var(--space-1));
+    width: var(--space-4);
+    height: 2px;
+    margin-inline: auto;
+    border-radius: var(--radius-full);
+    background: var(--accent);
+    pointer-events: none;
+  }
+  .on-emoji-bar-marker,
+  .on-emoji-marker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .on-emoji-bar-marker {
+    border-radius: var(--radius-sm);
+    background: var(--neutral-wash);
+    will-change: transform, opacity;
+  }
+
+  .on-emoji-scroll {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+  .on-emoji-scroll::-webkit-scrollbar {
+    display: none;
+  }
+  .on-emoji-marker {
+    width: 0;
+    height: 0;
+    border-radius: var(--radius-md);
+    background: var(--neutral-wash-press);
+    will-change: transform, width, height, opacity;
+  }
+
+  .on-emoji-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    padding: var(--space-2) var(--space-3) var(--space-1);
+    background: var(--bg-surface-raised);
+    font: var(--type-micro);
+    letter-spacing: var(--tracking-caps);
+    text-transform: uppercase;
+    color: var(--text-subtle);
+  }
+  .on-emoji-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--cols, 8), 1fr);
+    gap: var(--space-1);
+    padding: 0 var(--space-2) var(--space-1);
+    content-visibility: auto;
+    contain-intrinsic-height: auto calc(var(--rows, 1) * (var(--control-height-lg) + var(--space-1)) - var(--space-1));
+  }
+  .on-emoji-btn {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--control-height-lg);
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    cursor: pointer;
+    font-size: var(--size-title);
+    line-height: 1;
+    scroll-margin-top: var(--control-height);
+    scroll-margin-bottom: var(--space-2);
+  }
+  .on-emoji-btn-img {
+    display: block;
+    width: var(--icon-lg);
+    height: var(--icon-lg);
+    user-select: none;
+  }
+
+  @keyframes on-emoji-tile-in {
+    from {
+      opacity: 0;
+      transform: translateY(var(--distance-sm)) scale(var(--scale-chip));
+    }
+  }
+  .on-emoji-scroll .on-emoji-btn {
+    --emoji-picker-stagger-step: 10ms;
+    animation: on-emoji-tile-in var(--duration-base) var(--ease-entrance) both;
+    animation-delay: min(calc(var(--i, 0) * var(--emoji-picker-stagger-step)), var(--duration-slower));
+  }
+
+  .on-emoji-empty {
+    padding: var(--space-6) var(--space-4);
+    color: var(--text-muted);
+    font: var(--type-caption);
+    text-align: center;
+  }
+
+  .on-emoji-caption {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--space-2);
+    height: var(--control-height-lg);
+    padding: 0 var(--space-3);
+    border-top: var(--border-hairline) solid var(--border-default);
+  }
+  .on-emoji-caption-img {
+    flex: none;
+    width: var(--icon-md);
+    height: var(--icon-md);
+    user-select: none;
+  }
+  .on-emoji-caption-name {
+    overflow: hidden;
+    color: var(--text-body);
+    font: var(--type-caption);
+    font-weight: var(--weight-medium);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .on-emoji-caption-name::first-letter {
+    text-transform: uppercase;
+  }
+  .on-emoji-caption-code {
+    flex: none;
+    margin-left: auto;
+    color: var(--text-muted);
+    font: var(--type-mono);
+  }
+  .on-emoji-caption.is-idle .on-emoji-caption-name {
+    color: var(--text-subtle);
+    font-weight: var(--weight-regular);
+  }
+
+  .on-emoji--sheet {
+    width: 100%;
+    height: min(var(--emoji-picker-height, 26.5rem), 70svh);
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}

package/src/components/composites/emoji-picker/types.ts

@@ -0,0 +1,14 @@
+/**
+ * Where the emoji is being rendered. It's metadata for
+ * {@link GetEmojiUrl} — consumers can vary provider, size, or format per
+ * context, or ignore it entirely.
+ *
+ * - `"inline"`       — inline within editor text (small)
+ * - `"picker-grid"`  — main grid in the picker panel (medium)
+ * - `"category-bar"` — category tab icons (small, often animated)
+ * - `"callout-icon"` — callout block leading icon (medium)
+ */
+export type EmojiUrlSource = 'inline' | 'picker-grid' | 'category-bar' | 'callout-icon';
+
+/** Returns a URL for an emoji image. */
+export type GetEmojiUrl = (hexId: string, source: EmojiUrlSource) => string;

package/src/components/composites/modal/Modal.tsx

@@ -1,19 +1,19 @@
 'use client';
 
 import './modal.css';
+
 import { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
-import { Presence } from '../../../motion/presence';
+
+import type { DataAttributes } from '../../../dom-props';
 import { resolveMotionTiming } from '../../../motion/motion-timing';
+import { Presence } from '../../../motion/presence';
+import { popIn, popOut } from '../../../motion/presets';
 import type { DisableableAnimation } from '../../../motion/timing';
+import { UIMotion } from '../../../tokens/motion-tokens';
 import { useControllable } from '../../internal/hooks/use-controllable';
 import { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';
-import { ModalShell } from '../../internal/overlay/modal';
-import type { DataAttributes } from '../../../dom-props';
-
-const MODAL_TIMING = {
-  open: { duration: 'slow', ease: 'entrance' },
-  close: { duration: 'base', ease: 'standard' },
-} as const;
+import { ModalShell, OV_TAKEOVER_TIMING } from '../../internal/overlay/modal';
+import type { ActivateOn } from '../../internal/utils/activation';
 
 export interface ModalProps {
   /** Controlled open state. Omit to stay uncontrolled. */
@@ -23,8 +23,10 @@ export interface ModalProps {
   /** Fires whenever the open state changes. Pair with `open` for controlled use. */
   onOpenChange?: (open: boolean) => void;
 
-  /** Cloned to open the modal on click. */
+  /** Cloned to open the modal. */
   trigger?: ReactElement | null;
+  /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */
+  activateOn?: ActivateOn;
 
   /** Scrim/Esc dismissal. Default true. */
   dismissible?: boolean;
@@ -51,6 +53,7 @@ export function Modal({
   defaultOpen = false,
   onOpenChange,
   trigger = null,
+  activateOn,
   dismissible = true,
   container = null,
   id,
@@ -64,18 +67,26 @@ export function Modal({
   const autoId = useId();
   const panelId = id || 'modal-' + autoId;
   const close = () => setOpen(false);
-  const timings = resolveMotionTiming(animation, MODAL_TIMING);
+  const timings = resolveMotionTiming(animation, OV_TAKEOVER_TIMING);
 
   return (
     <Fragment>
-      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}
+      {ovCloneTrigger(trigger, {
+        open,
+        onPress: () => setOpen(true),
+        panelId,
+        haspopup: 'dialog',
+        triggerRef,
+        activateOn,
+      })}
       <OverlayPortal container={container}>
         <Presence>
           {open && (
             <ModalShell
               key="modal"
-              animate={{ opacity: [0, 1], scale: [0.98, 1], timing: timings.open }}
-              exit={{ opacity: [0], scale: [0.98], timing: timings.close }}
+              timings={timings}
+              animate={popIn(UIMotion.scale.panel, timings.open)}
+              exit={popOut(UIMotion.scale.panel, timings.close)}
               layerClass="overlay-layer--modal"
               panelClass="overlay-panel--modal"
               panelId={panelId}