@zyncat/ui 0.10.0 → 0.12.0

package/dist/emoji-picker.js

@@ -0,0 +1,713 @@
+'use client';import { useMediaQuery } from './chunk-RFRE4WKX.js';
+import { Sheet } from './chunk-227ZW4V7.js';
+import { Popover } from './chunk-CF4QHO4N.js';
+import './chunk-FONOS5RN.js';
+import './chunk-IUQAUBVM.js';
+import './chunk-UE63OOVG.js';
+import './chunk-A5WTZACK.js';
+import './chunk-VAXCXZ53.js';
+import { activationProps, declinePointerDown, pointerDownActivates, clickActivates } from './chunk-JY6A2ZJZ.js';
+import { TextField } from './chunk-TVYH4AN7.js';
+import { useGlide, GlidePill } from './chunk-CNWTIMIP.js';
+import './chunk-HDSFWZ7L.js';
+import './chunk-DDRSMHN4.js';
+import './chunk-TUTXXC3W.js';
+import { Motion } from './chunk-5PZ43DCG.js';
+import './chunk-M43IOM5C.js';
+import { set, animate, measure, flip } from './chunk-IJS7TPGV.js';
+import './chunk-3MPF7FZV.js';
+import './chunk-4BSHB7R3.js';
+import { Icon } from './chunk-EAI4POPB.js';
+import './chunk-MMRIQNEN.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import './chunk-45R4Z5XN.js';
+import './chunk-DMX2F6B4.js';
+import './chunk-QGNC7LH5.js';
+import './styles.css';
+import { useState, useImperativeHandle, useMemo, useId, useEffect, useRef, useSyncExternalStore } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/composites/emoji-picker/category-icons.ts
+var CATEGORY_ICONS = {
+  recent: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+  "smileys-emotion": '<circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/>',
+  "people-body": '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  "animals-nature": '<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/>',
+  "food-drink": '<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/>',
+  "travel-places": '<path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/>',
+  activities: '<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>',
+  objects: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
+  symbols: '<line x1="4" x2="20" y1="9" y2="9"/><line x1="4" x2="20" y1="15" y2="15"/><line x1="10" x2="8" y1="3" y2="21"/><line x1="16" x2="14" y1="3" y2="21"/>',
+  flags: '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/>'
+};
+var CATEGORY_ICON_ATTRS = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// src/components/composites/emoji-picker/data.ts
+var _cache = null;
+var _inflight = null;
+var _listeners = /* @__PURE__ */ new Set();
+var _setEmojiData = (data) => {
+  _cache = data;
+  Object.values(data.emojis);
+  for (const cb of _listeners) cb();
+  _listeners.clear();
+  return data;
+};
+function onEmojiDataLoaded(cb) {
+  if (_cache) {
+    cb();
+    return () => {
+    };
+  }
+  _listeners.add(cb);
+  return () => {
+    _listeners.delete(cb);
+  };
+}
+async function loadEmojiData(loader) {
+  if (!_inflight) {
+    if (typeof loader !== "string") {
+      _setEmojiData(loader);
+      return;
+    }
+    _inflight = fetch(loader).then((r) => r.json()).then(_setEmojiData).catch((err) => {
+      _inflight = null;
+      throw err;
+    });
+  }
+  return _inflight;
+}
+function getEmojiData() {
+  return _cache;
+}
+
+// src/components/composites/emoji-picker/dom.ts
+var COLUMN_COUNT = 8;
+var el = (tag, className) => {
+  const node = document.createElement(tag);
+  node.className = className;
+  return node;
+};
+var attr = (value) => value.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
+function createEmojiGrid(scroll, getEmojiUrl2, tileIdPrefix) {
+  const buttons = [];
+  const sections = [];
+  const timers = [];
+  const swapInNativeGlyph = (e) => {
+    const img = e.target;
+    if (img.matches?.(".on-emoji-btn-img")) img.parentElement.textContent = img.alt;
+  };
+  scroll.addEventListener("error", swapInNativeGlyph, true);
+  const tile = (emoji, idx, order) => `<button type="button" role="option" tabindex="-1" class="on-emoji-btn" id="${attr(tileIdPrefix + idx)}" aria-label="${attr(emoji.name)}" data-id="${emoji.id}" data-idx="${idx}" style="--i:${order}"><img class="on-emoji-btn-img" src="${attr(getEmojiUrl2(emoji.id, "picker-grid"))}" loading="lazy" draggable="false" alt="${attr(emoji.unicode)}"></button>`;
+  const addCategory = (title, key, ids) => {
+    const data = getEmojiData();
+    if (!data) return;
+    const header = el("div", "on-emoji-header");
+    header.textContent = title;
+    header.setAttribute("aria-hidden", "true");
+    scroll.appendChild(header);
+    const start = buttons.length;
+    const emojis = ids.map((id) => data.emojis[id]).filter(Boolean);
+    const grid = el("div", "on-emoji-grid");
+    grid.setAttribute("role", "group");
+    grid.setAttribute("aria-label", title);
+    grid.style.setProperty("--cols", String(COLUMN_COUNT));
+    grid.style.setProperty("--rows", String(Math.ceil(emojis.length / COLUMN_COUNT)));
+    grid.innerHTML = emojis.map((emoji, i) => tile(emoji, start + i, i)).join("");
+    scroll.appendChild(grid);
+    buttons.push(...grid.children);
+    if (emojis.length) sections.push({ key, header, start, count: emojis.length });
+  };
+  const indexOfKey = (key) => sections.findIndex((s) => s.key === key);
+  const showEmpty = (message) => {
+    scroll.insertAdjacentHTML("beforeend", `<div class="on-emoji-empty">${attr(message)}</div>`);
+  };
+  const clear = () => {
+    timers.forEach(clearTimeout);
+    timers.length = 0;
+    scroll.innerHTML = "";
+    buttons.length = 0;
+    sections.length = 0;
+  };
+  const destroy = () => {
+    clear();
+    scroll.removeEventListener("error", swapInNativeGlyph, true);
+  };
+  return { buttons, sections, timers, addCategory, showEmpty, clear, indexOfKey, destroy };
+}
+
+// src/components/composites/emoji-picker/navigation.ts
+var MOVES = {
+  ArrowRight: [1, 0],
+  ArrowLeft: [-1, 0],
+  ArrowDown: [0, 1],
+  ArrowUp: [0, -1]
+};
+function createNavigator(buttons, sections, onFocus) {
+  let focusedIdx = -1;
+  let desiredCol = 0;
+  const sectionOf = (idx) => sections.findIndex((s) => idx >= s.start && idx < s.start + s.count);
+  const landAt = (si, rowStart, col) => {
+    const s = sections[si];
+    return s.start + rowStart + Math.min(col, Math.min(COLUMN_COUNT, s.count - rowStart) - 1);
+  };
+  const focusAt = (next, scroll = true) => {
+    if (!buttons.length) return;
+    const clamped = Math.max(0, Math.min(next, buttons.length - 1));
+    if (clamped === focusedIdx) return;
+    onFocus(buttons[clamped]);
+    if (scroll) buttons[clamped].scrollIntoView({ block: "nearest", behavior: "smooth" });
+    focusedIdx = clamped;
+  };
+  const setFocus = (next, scroll = true) => {
+    focusAt(next, scroll);
+    const si = sectionOf(focusedIdx);
+    desiredCol = si >= 0 ? (focusedIdx - sections[si].start) % COLUMN_COUNT : 0;
+  };
+  const move = (dx, dy) => {
+    if (focusedIdx < 0) return setFocus(0);
+    const si = sectionOf(focusedIdx);
+    if (si < 0) return;
+    const s = sections[si];
+    const local = focusedIdx - s.start;
+    const rowStart = local - local % COLUMN_COUNT;
+    if (dx) {
+      const next = focusedIdx + dx;
+      if (next >= s.start && next < s.start + s.count) return setFocus(next);
+      if (dx > 0 && si + 1 < sections.length) return setFocus(sections[si + 1].start);
+      if (dx < 0 && si > 0) return setFocus(sections[si - 1].start + sections[si - 1].count - 1);
+      return;
+    }
+    const targetRow = rowStart + dy * COLUMN_COUNT;
+    if (targetRow >= 0 && targetRow < s.count) focusAt(landAt(si, targetRow, desiredCol));
+    else if (dy > 0 && si + 1 < sections.length) focusAt(landAt(si + 1, 0, desiredCol));
+    else if (dy < 0 && si > 0) {
+      const prev = sections[si - 1];
+      focusAt(landAt(si - 1, Math.floor((prev.count - 1) / COLUMN_COUNT) * COLUMN_COUNT, desiredCol));
+    } else setFocus(dy > 0 ? buttons.length - 1 : 0);
+  };
+  const handleKey = (event, onEnter) => {
+    if (!buttons.length) return false;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onEnter();
+      return true;
+    }
+    const delta = MOVES[event.key];
+    if (!delta) return false;
+    event.preventDefault();
+    move(delta[0], delta[1]);
+    return true;
+  };
+  const reset = () => {
+    focusedIdx = -1;
+    desiredCol = 0;
+    onFocus(null);
+  };
+  return { setFocus, handleKey, reset, getFocusedIdx: () => focusedIdx };
+}
+
+// src/components/composites/emoji-picker/scaffold.ts
+var IDLE_CAPTION = "Pick an emoji\u2026";
+var MARKER_OPACITY = 0.6;
+function createScaffold(root, emojiData, getEmojiUrl2, listboxId) {
+  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;
+  root.className = "on-emoji-body";
+  root.append(scroll, caption);
+  const setCaption = (btn) => {
+    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 = getEmojiUrl2(emoji.id, "picker-grid");
+  };
+  setCaption(null);
+  const offsetWithinScroll = (node) => {
+    let left = 0;
+    let top = 0;
+    for (let box = node; box && box !== scroll; box = box.offsetParent) {
+      left += box.offsetLeft;
+      top += box.offsetTop;
+    }
+    return { left, top };
+  };
+  let hadFocus = false;
+  const positionMarker = (btn) => {
+    if (!btn?.offsetHeight) {
+      animate(marker, { opacity: [0], timing: UIMotion.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: UIMotion.dur.fast, ease: UIMotion.ease.standard } });
+    hadFocus = true;
+    if (from && !UIMotion.reduced)
+      flip(marker, from, { size: "none", timing: { duration: UIMotion.dur.base, ease: UIMotion.ease.standard } });
+  };
+  const mountMarker = () => {
+    hadFocus = false;
+    set(marker, { opacity: [0] });
+    scroll.appendChild(marker);
+  };
+  return { scroll, setCaption, positionMarker, mountMarker };
+}
+
+// src/components/composites/emoji-picker/search.ts
+var MAX_RESULTS = 90;
+var splitWords = (s) => s.toLowerCase().split(/[\s_-]+/).filter(Boolean);
+var source = null;
+var index = [];
+var buildIndex = (data) => {
+  source = data;
+  index = Object.values(data.emojis).map((e) => ({
+    id: e.id,
+    shortcodes: e.shortcodes.map((s) => s.toLowerCase()),
+    words: [.../* @__PURE__ */ new Set([...splitWords(e.name), ...e.shortcodes.flatMap(splitWords)])],
+    tagWords: [...new Set(e.tags.flatMap(splitWords))],
+    nameLen: e.name.length
+  }));
+};
+var rank = (word, t, exact, prefix, mid = 0) => {
+  if (word === t) return exact;
+  if (word.startsWith(t)) return prefix;
+  return mid && t.length >= 3 && word.includes(t) ? mid : 0;
+};
+var scoreToken = (e, t) => {
+  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;
+};
+var getRankedEmojiIds = (query) => {
+  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 = [];
+  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 });
+  }
+  scored.sort((a, b) => b.score - a.score || a.nameLen - b.nameLen);
+  return scored.slice(0, MAX_RESULTS).map((s) => s.id);
+};
+
+// src/components/composites/emoji-picker/picker.ts
+var STORAGE_KEY = "recentEmojis";
+var MAX_RECENT = 18;
+var SPY_READING_LINE = 12;
+function createEmojiPicker(root, options) {
+  const emojiData = getEmojiData();
+  if (!emojiData) throw new Error("Emoji data not found");
+  let recent = typeof localStorage !== "undefined" ? JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]") : [];
+  let activeKey = null;
+  let spyFrame = 0;
+  const ui = createScaffold(root, emojiData, options.getEmojiUrl, options.listboxId);
+  const area = createEmojiGrid(ui.scroll, options.getEmojiUrl, `${options.listboxId}-o`);
+  let activeTile = null;
+  const nav = createNavigator(area.buttons, area.sections, (btn) => {
+    activeTile?.removeAttribute("aria-selected");
+    btn?.setAttribute("aria-selected", "true");
+    activeTile = btn;
+    const host = options.getFocusHost?.();
+    if (btn) host?.setAttribute("aria-activedescendant", btn.id);
+    else host?.removeAttribute("aria-activedescendant");
+    ui.positionMarker(btn);
+    ui.setCaption(btn);
+  });
+  const spy = () => {
+    spyFrame = 0;
+    const line = ui.scroll.scrollTop + SPY_READING_LINE;
+    let current = 0;
+    for (let i = 0; i < area.sections.length; i++) {
+      if (area.sections[i].header.offsetTop <= line) current = i;
+      else break;
+    }
+    const key = area.sections[current]?.key ?? null;
+    if (key === activeKey) return;
+    activeKey = key;
+    options.onActiveCategoryChange?.(key);
+  };
+  const scheduleSpy = () => {
+    if (!spyFrame) spyFrame = requestAnimationFrame(spy);
+  };
+  const selectById = (id) => {
+    const shortcode = emojiData.emojis[id]?.shortcodes[0];
+    if (!shortcode) return;
+    recent = [id, ...recent.filter((x) => x !== id)].slice(0, MAX_RECENT);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(recent));
+    options.onSelect(shortcode, id);
+  };
+  const selectFocused = () => {
+    const id = area.buttons[nav.getFocusedIdx()]?.dataset.id;
+    if (id) selectById(id);
+  };
+  const handleMouseMove = (e) => {
+    const btn = e.target.closest("button");
+    if (btn?.dataset.idx) nav.setFocus(parseInt(btn.dataset.idx));
+  };
+  const selectPressed = (e) => {
+    const btn = e.target.closest("button");
+    if (btn?.dataset.id && ui.scroll.contains(btn)) selectById(btn.dataset.id);
+  };
+  const handlePointerDown = (e) => {
+    if (options.getActivateOn?.() !== "pointerdown") return declinePointerDown();
+    if (pointerDownActivates(e, true)) selectPressed(e);
+  };
+  const handleClick = (e) => {
+    e.preventDefault();
+    if (clickActivates(e)) selectPressed(e);
+  };
+  ui.scroll.addEventListener("scroll", scheduleSpy, { passive: true });
+  ui.scroll.addEventListener("mousemove", handleMouseMove, { passive: true });
+  root.addEventListener("pointerdown", handlePointerDown);
+  root.addEventListener("click", handleClick);
+  const beginRender = (keys) => {
+    area.clear();
+    nav.reset();
+    ui.mountMarker();
+    activeKey = null;
+    options.onCategoriesChange?.(keys);
+    options.onActiveCategoryChange?.(null);
+  };
+  const renderAll = () => {
+    const keys = emojiData.categories.map((c) => c.id);
+    const hasRecent = recent.length > 0;
+    beginRender(hasRecent ? ["recent", ...keys] : keys);
+    if (hasRecent) area.addCategory("Recently Used", "recent", recent);
+    let i = 0;
+    const step = () => {
+      const category = emojiData.categories[i++];
+      if (!category) return;
+      area.addCategory(category.id.replace("-", " & "), category.id, category.emojis);
+      spy();
+      area.timers.push(window.setTimeout(step, 200));
+    };
+    step();
+  };
+  const renderFiltered = (query) => {
+    beginRender([]);
+    const ids = getRankedEmojiIds(query);
+    if (!ids.length) return area.showEmpty("No emojis found");
+    area.addCategory("Results", "search", ids);
+    nav.setFocus(0, false);
+  };
+  const scrollToCategory = (key) => {
+    const section = area.sections[area.indexOfKey(key)];
+    if (!section) return;
+    area.buttons[section.start].scrollIntoView({ block: "start", behavior: "smooth" });
+    nav.setFocus(section.start, false);
+  };
+  const destroy = () => {
+    area.destroy();
+    if (spyFrame) cancelAnimationFrame(spyFrame);
+    ui.scroll.removeEventListener("scroll", scheduleSpy);
+    ui.scroll.removeEventListener("mousemove", handleMouseMove);
+    root.removeEventListener("pointerdown", handlePointerDown);
+    root.removeEventListener("click", handleClick);
+    root.innerHTML = "";
+  };
+  return {
+    renderAll,
+    renderFiltered,
+    scrollToCategory,
+    handleKey: (event) => nav.handleKey(event, selectFocused),
+    selectFocused,
+    destroy
+  };
+}
+
+// src/components/composites/emoji-picker/react/useEmojiPicker.ts
+var FOCUSABLE = "input, textarea, [tabindex]";
+var NO_CATEGORIES = [];
+var notActive = () => false;
+function createEmojiPickerStore(listboxId, handlers) {
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => listeners.forEach((listener) => listener());
+  let api = null;
+  let focusHost = null;
+  let categories = NO_CATEGORIES;
+  let active = 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
+    },
+    /** 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) => {
+      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) => {
+      focusHost = node?.matches(FOCUSABLE) ? node : node?.querySelector(FOCUSABLE) ?? null;
+    },
+    setHandlers: (next) => {
+      handlers = next;
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getCategories: () => categories,
+    isActive: (key) => active === key,
+    render: (next = "") => {
+      if (drawn && next === query) return;
+      query = next;
+      draw();
+    },
+    scrollToCategory: (key) => 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) => {
+      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) => api?.handleKey(event) ?? false,
+    /** Commit the tile the marker is on, exactly as a click on it would. */
+    selectFocused: () => api?.selectFocused()
+  };
+}
+function useEmojiPicker({ onSelect, getEmojiUrl: getEmojiUrl2, query, activateOn }) {
+  const listboxId = useId();
+  const store = useMemo(() => createEmojiPickerStore(listboxId, { onSelect, getEmojiUrl: getEmojiUrl2 }), [listboxId]);
+  useEffect(() => {
+    store.setHandlers({ onSelect, getEmojiUrl: getEmojiUrl2, activateOn });
+  });
+  useEffect(() => {
+    store.render(query);
+  }, [store, query]);
+  return store;
+}
+var useCategories = (store) => useSyncExternalStore(store.subscribe, store.getCategories, store.getCategories);
+var useIsActiveCategory = (store, key) => useSyncExternalStore(store.subscribe, () => store.isActive(key), notActive);
+var RAIL_GLIDE = { timing: { duration: UIMotion.dur.base, ease: UIMotion.ease.standard } };
+function Category({ store, categoryKey, railId, glide, activateOn }) {
+  const isActive = useIsActiveCategory(store, categoryKey);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: isActive ? "on-emoji-cat on-emoji-cat--active" : "on-emoji-cat",
+      "aria-label": categoryKey.replace(/-/g, " "),
+      "aria-current": isActive ? true : void 0,
+      onPointerEnter: (e) => glide.enter(e.currentTarget),
+      ...activationProps(() => store.scrollToCategory(categoryKey), {
+        on: activateOn,
+        holdFocus: true
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            ...CATEGORY_ICON_ATTRS,
+            dangerouslySetInnerHTML: { __html: CATEGORY_ICONS[categoryKey] ?? CATEGORY_ICONS.symbols }
+          }
+        ),
+        isActive && /* @__PURE__ */ jsx(
+          Motion,
+          {
+            as: "span",
+            layoutId: railId,
+            layoutTransition: RAIL_GLIDE,
+            className: "on-emoji-cat-rail",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function CategoryBar({ store, activateOn }) {
+  const barRef = useRef(null);
+  const glide = useGlide(barRef);
+  const railId = useId();
+  const categories = useCategories(store);
+  if (!categories.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: barRef,
+      className: "on-emoji-bar",
+      onPointerLeave: glide.leave,
+      onMouseDown: (e) => e.preventDefault(),
+      role: "group",
+      "aria-label": "Emoji categories",
+      children: [
+        /* @__PURE__ */ jsx(GlidePill, { className: "on-emoji-bar-marker", glide }),
+        categories.map((key) => /* @__PURE__ */ jsx(Category, { store, categoryKey: key, railId, glide, activateOn }, key))
+      ]
+    }
+  );
+}
+
+// src/components/composites/emoji-picker/getEmojiUrl.ts
+var TWEMOJI = "https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets";
+var NOTO_ANIMATED = "https://fonts.gstatic.com/s/e/notoemoji/latest";
+var getEmojiUrl = (hexId, source2) => {
+  const lower = hexId.toLowerCase();
+  switch (source2) {
+    case "inline":
+      return `${TWEMOJI}/svg/${lower}.svg`;
+    case "picker-grid":
+      return `${TWEMOJI}/72x72/${lower}.png`;
+    case "category-bar":
+    case "callout-icon":
+      return `${NOTO_ANIMATED}/${lower.replace(/-/g, "_")}/512.webp`;
+  }
+};
+var SHEET_BREAKPOINT = "(max-width: 40rem)";
+var inflate = (anchor, by) => {
+  if (!anchor || !by) return anchor ?? null;
+  return {
+    getBoundingClientRect: () => {
+      const r = anchor.getBoundingClientRect();
+      return new DOMRect(r.x - by, r.y - by, r.width + by * 2, r.height + by * 2);
+    }
+  };
+};
+function EmojiPickerPanel({
+  open,
+  onOpenChange,
+  onSelect,
+  getEmojiUrl: getEmojiUrl2,
+  trigger = null,
+  offset = 0,
+  search = false,
+  query,
+  activateOn,
+  breakpoint = SHEET_BREAKPOINT,
+  popoverProps,
+  sheetProps,
+  className,
+  ref
+}) {
+  const asSheet = useMediaQuery(breakpoint);
+  const [ownQuery, setOwnQuery] = useState("");
+  const drivenFromOutside = !asSheet && query !== void 0;
+  const picker = useEmojiPicker({ onSelect, getEmojiUrl: getEmojiUrl2, query: drivenFromOutside ? query : ownQuery, activateOn });
+  useImperativeHandle(ref, () => picker, [picker]);
+  const { mount, searchRef, searchProps, handleKey } = picker;
+  const anchor = popoverProps?.anchor;
+  const positioned = useMemo(() => inflate(anchor, offset), [anchor, offset]);
+  const frame = /* @__PURE__ */ jsxs("div", { className: ["on-emoji", asSheet && "on-emoji--sheet", className].filter(Boolean).join(" "), children: [
+    asSheet || search ? /* @__PURE__ */ jsx("div", { className: "on-emoji-search", ref: searchRef, children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: "sm",
+        type: "search",
+        clearable: true,
+        placeholder: "Search emoji",
+        leadingIcon: /* @__PURE__ */ jsx(Icon, { name: "magnifying-glass", size: "sm" }),
+        value: ownQuery,
+        onChange: (e) => setOwnQuery(e.target.value),
+        onKeyDown: (e) => {
+          const horizontal = e.key === "ArrowLeft" || e.key === "ArrowRight";
+          if (horizontal && e.currentTarget.value) return;
+          if (e.key.startsWith("Arrow") || e.key === "Enter") handleKey(e.nativeEvent);
+        },
+        htmlProps: { ...searchProps, autoFocus: true, spellCheck: false, "aria-label": "Search emoji" }
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx(CategoryBar, { store: picker, activateOn }),
+    /* @__PURE__ */ jsx("div", { ref: mount })
+  ] });
+  return asSheet ? /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      ...sheetProps,
+      open,
+      onOpenChange,
+      side: "bottom",
+      trigger,
+      activateOn,
+      htmlProps: { className: "on-emoji-sheet" },
+      children: /* @__PURE__ */ jsx("div", { role: "dialog", "aria-label": "Emoji picker", children: frame })
+    }
+  ) : /* @__PURE__ */ jsx(
+    Popover,
+    {
+      side: "right",
+      align: "center",
+      ...popoverProps,
+      anchor: positioned,
+      open,
+      onOpenChange,
+      trigger,
+      activateOn,
+      animation: { ease: { open: "exit" } },
+      htmlProps: { className: "on-emoji-pop", "aria-label": "Emoji picker" },
+      children: frame
+    }
+  );
+}
+
+export { EmojiPickerPanel, SHEET_BREAKPOINT, getEmojiUrl, loadEmojiData, onEmojiDataLoaded };
+//# sourceMappingURL=emoji-picker.js.map
+//# sourceMappingURL=emoji-picker.js.map