@k2b/ui 0.18.0 → 0.19.0

package/dist/browser/inputs/emoji/EmojiPicker.js

@@ -0,0 +1,841 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1 class=k2b-emoji-picker__option>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<button type=button class=k2b-emoji-picker__tone-button aria-haspopup=true><span aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-emoji-picker__tones role=radiogroup>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div role=group>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div role=listbox class=k2b-emoji-picker__list><!$><!/><div class=k2b-emoji-picker__all>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-emoji-picker__state role=status>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div role=group><div class=k2b-emoji-picker__header><div class=k2b-emoji-picker__search><i class="ti ti-search"aria-hidden=true></i><input type=search role=combobox aria-expanded=true aria-autocomplete=list autocomplete=off enterkeyhint=done></div><!$><!/></div><div class=k2b-emoji-picker__groups role=toolbar></div><div class=k2b-emoji-picker__scroll></div><div class=k2b-emoji-picker__preview aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button role=radio><span aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<button type=button><i aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class="k2b-emoji-picker__grid k2b-emoji-picker__block">`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div role=group class=k2b-emoji-picker__section><div class=k2b-emoji-picker__heading data-emoji-heading></div><div class=k2b-emoji-picker__grid>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-emoji-picker__preview-emoji>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-emoji-picker__preview-name>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-emoji-picker__preview-code>:<!$><!/>:`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div popover=auto class=k2b-emoji-picker-popover>`);
+import { createEffect, createMemo, createSelector, createSignal, createUniqueId, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { Button } from "../../actions/Button";
+import { returnFocus, ringOnReturn } from "../../internal/focus-return";
+import { useLocale } from "../../intl/locale";
+import { useUiMessages } from "../../intl/messages";
+import { EMOJI_GROUPS, EMOJI_SKIN_TONES, emojiInTone, emojiName, findEmoji, loadEmojiIndex, RECENT_EMOJI_LIMIT, searchEmoji } from "./emoji-index";
+import { useEmojiMessages } from "./emoji-messages";
+
+/** Emoji per row. Keyboard navigation moves by rows of this length. */
+const COLUMNS = 8;
+/** Search results render in blocks of this many rows, so the browser lays out only the blocks in view. */
+const RESULT_BLOCK = 8 * COLUMNS;
+const TONE_SAMPLE = "✋";
+const TONE_SAMPLE_LIGHT = "✋\u{1F3FB}";
+const groupTitle = (messages, key) => {
+  switch (key) {
+    case "recent":
+      return messages.emojiRecent;
+    case "smileys":
+      return messages.emojiSmileys;
+    case "people":
+      return messages.emojiPeople;
+    case "animals":
+      return messages.emojiAnimals;
+    case "food":
+      return messages.emojiFood;
+    case "travel":
+      return messages.emojiTravel;
+    case "activities":
+      return messages.emojiActivities;
+    case "objects":
+      return messages.emojiObjects;
+    case "symbols":
+      return messages.emojiSymbols;
+    case "flags":
+      return messages.emojiFlags;
+  }
+};
+const toneLabel = (messages, tone) => [messages.emojiToneDefault, messages.emojiToneLight, messages.emojiToneMediumLight, messages.emojiToneMedium, messages.emojiToneMediumDark, messages.emojiToneDark][tone];
+const toneSample = tone => tone === 0 ? TONE_SAMPLE : TONE_SAMPLE_LIGHT.replace("\u{1F3FB}", String.fromCodePoint(0x1f3fb + tone - 1));
+
+/** Where `index` moves for an arrow key in rows of `COLUMNS`, where every section starts a new row. */
+export const nextEmojiIndex = (sizes, index, key) => {
+  const total = sizes.reduce((sum, size) => sum + size, 0);
+  if (total === 0) return -1;
+  if (index < 0) return 0;
+  if (key === "ArrowLeft") return Math.max(0, index - 1);
+  if (key === "ArrowRight") return Math.min(total - 1, index + 1);
+  const starts = [];
+  sizes.reduce((start, size) => (starts.push(start), start + size), 0);
+  const section = starts.findLastIndex((start, position) => start <= index && sizes[position] > 0);
+  const offset = index - starts[section];
+  const column = offset % COLUMNS;
+  const size = sizes[section];
+  if (key === "ArrowUp") {
+    if (offset >= COLUMNS) return index - COLUMNS;
+    for (let previous = section - 1; previous >= 0; previous--) {
+      if (!sizes[previous]) continue;
+      const lastRow = Math.floor((sizes[previous] - 1) / COLUMNS) * COLUMNS;
+      return starts[previous] + Math.min(lastRow + column, sizes[previous] - 1);
+    }
+    return index;
+  }
+  if (offset + COLUMNS < size) return index + COLUMNS;
+  // A shorter last row: the last emoji of the section is below.
+  if (Math.floor(offset / COLUMNS) < Math.floor((size - 1) / COLUMNS)) return starts[section] + size - 1;
+  for (let next = section + 1; next < sizes.length; next++) {
+    if (sizes[next]) return starts[next] + Math.min(column, sizes[next] - 1);
+  }
+  return index;
+};
+
+/**
+ * A search field, the groups, and a grid of emoji. Search finds English and German names, keywords and GitHub
+ * shortcodes. The focus stays in the search field: arrow keys move through the grid, Enter picks.
+ */
+function EmojiPickerPanel(props) {
+  const messages = useUiMessages();
+  const text = useEmojiMessages();
+  const locale = useLocale();
+  const id = `k2b-emoji-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
+  const [index, setIndex] = createSignal();
+  const [failed, setFailed] = createSignal(false);
+  const [query, setQuery] = createSignal("");
+  const [active, setActive] = createSignal(0);
+  const isActive = createSelector(active);
+  const [tonesOpen, setTonesOpen] = createSignal(false);
+  const [currentGroup, setCurrentGroup] = createSignal();
+  /** Up or down moved into the grid; from then on, left and right move there too, until the search changes. */
+  const [gridEntered, setGridEntered] = createSignal(false);
+  let searchRef;
+  let scrollRef;
+  let toneButtonRef;
+  let tonesRef;
+  let groupsRef;
+  /** Keyboard moves scroll the active emoji into view; the pointer does not. */
+  let revealActive = false;
+  const load = () => {
+    setFailed(false);
+    loadEmojiIndex().then(setIndex, () => setFailed(true));
+  };
+  onMount(load);
+  const tone = () => props.skinTone ?? 0;
+  const searching = () => query().trim().length > 0;
+  // The groups render once and stay while a search shows its results above them, so clearing a search is instant.
+  const groups = createMemo(() => {
+    const data = index();
+    if (!data) return [];
+    const recent = {
+      key: "recent",
+      items: (props.recent ?? []).slice(0, RECENT_EMOJI_LIMIT).map(emoji => ({
+        emoji,
+        entry: findEmoji(data, emoji)
+      }))
+    };
+    const all = EMOJI_GROUPS.map(group => ({
+      key: group.key,
+      items: data.entries.filter(entry => entry.group === group.id).map(entry => ({
+        emoji: emojiInTone(entry, tone()),
+        entry
+      }))
+    }));
+    return recent.items.length ? [recent, ...all] : all;
+  });
+  const groupStarts = createMemo(() => {
+    const starts = [];
+    groups().reduce((start, section) => (starts.push(start), start + section.items.length), 0);
+    return starts;
+  });
+  const results = createMemo(() => {
+    const data = index();
+    if (!data || !searching()) return [];
+    return searchEmoji(data, query()).map(entry => ({
+      emoji: emojiInTone(entry, tone()),
+      entry
+    }));
+  });
+  const resultBlocks = createMemo(() => Array.from({
+    length: Math.ceil(results().length / RESULT_BLOCK)
+  }, (_, block) => results().slice(block * RESULT_BLOCK, (block + 1) * RESULT_BLOCK)));
+  /** The sizes of the visible sections, for the arrow keys. */
+  const sizes = () => searching() ? [results().length] : groups().map(section => section.items.length);
+  const items = createMemo(() => searching() ? results() : groups().flatMap(section => section.items));
+  const activeItem = () => items()[active()];
+  const optionId = (position, list = searching() ? "r" : "g") => `${id}-${list}${position}`;
+  const nameOf = item => item.entry ? emojiName(item.entry, locale()) : item.emoji;
+  /** Where an element sits in the list, from its top. */
+  const offsetOf = element => element.getBoundingClientRect().top - scrollRef.getBoundingClientRect().top + scrollRef.scrollTop;
+
+  // A new search starts at its best match; the groups at their top.
+  createEffect(on([query, index], () => {
+    setActive(0);
+    if (scrollRef) scrollRef.scrollTop = 0;
+  }));
+  createEffect(() => {
+    const position = active();
+    if (!revealActive) return;
+    revealActive = false;
+    const option = document.getElementById(optionId(position));
+    if (!option || !scrollRef) return;
+    // Sticky group titles cover the top of the list; an emoji in a first row scrolls with its title.
+    const covered = option.closest("[role='group']")?.querySelector("[data-emoji-heading]")?.offsetHeight ?? 0;
+    const top = offsetOf(option) - covered;
+    const bottom = offsetOf(option) + option.offsetHeight;
+    if (top < scrollRef.scrollTop) scrollRef.scrollTop = top;else if (bottom > scrollRef.scrollTop + scrollRef.clientHeight) scrollRef.scrollTop = bottom - scrollRef.clientHeight;
+  });
+
+  /** The group whose title sits at the top of the list, for the group bar. */
+  const syncGroup = () => {
+    if (!scrollRef || searching()) return;
+    const top = scrollRef.scrollTop + 1;
+    let current;
+    for (const group of scrollRef.querySelectorAll("[data-emoji-group]")) {
+      if (offsetOf(group) <= top) current = group.dataset.emojiGroup;
+    }
+    setCurrentGroup(current ?? groups()[0]?.key);
+  };
+  createEffect(on([groups, searching], () => queueMicrotask(syncGroup)));
+  onMount(() => {
+    if (props.autofocus) queueMicrotask(() => searchRef?.focus({
+      preventScroll: true
+    }));
+  });
+  const pick = item => {
+    if (item) props.onPick(item.emoji);
+  };
+  const showGroup = key => {
+    setQuery("");
+    queueMicrotask(() => {
+      const group = scrollRef?.querySelector(`[data-emoji-group="${key}"]`);
+      if (!group || !scrollRef) return;
+      scrollRef.scrollTop = offsetOf(group);
+      const position = groups().findIndex(section => section.key === key);
+      if (position >= 0) setActive(groupStarts()[position]);
+      syncGroup();
+    });
+  };
+  const onSearchKeyDown = event => {
+    // WebKit ends the composition before the keydown of the Enter that confirms it; that keydown keeps keyCode 229.
+    if (event.isComposing || event.keyCode === 229) return;
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+      // Left and right edit a search until up or down enters the grid.
+      if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && query() && !gridEntered()) return;
+      event.preventDefault();
+      revealActive = true;
+      setGridEntered(true);
+      setActive(nextEmojiIndex(sizes(), active(), event.key));
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      pick(activeItem());
+      return;
+    }
+    if (event.key === "Escape") {
+      if (query()) {
+        event.preventDefault();
+        event.stopPropagation();
+        setQuery("");
+        return;
+      }
+      if (props.onClose) {
+        event.preventDefault();
+        event.stopPropagation();
+        props.onClose();
+      }
+    }
+  };
+  const openTones = () => {
+    setTonesOpen(true);
+    queueMicrotask(() => tonesRef?.querySelector("[aria-checked='true']")?.focus());
+  };
+  const closeTones = focusButton => {
+    setTonesOpen(false);
+    if (focusButton) queueMicrotask(() => toneButtonRef?.focus());
+  };
+  /** As in any radio group, the arrow keys choose; Enter, Space, a click or Escape close the choice. */
+  const onTonesKeyDown = event => {
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const step = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+      const next = EMOJI_SKIN_TONES[(tone() + step + EMOJI_SKIN_TONES.length) % EMOJI_SKIN_TONES.length];
+      props.onSkinToneChange?.(next);
+      queueMicrotask(() => tonesRef?.querySelector(`[data-tone="${next}"]`)?.focus());
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      closeTones(true);
+    }
+  };
+
+  /** The group bar is one tab stop; arrow keys move along it. */
+  const onGroupsKeyDown = event => {
+    const buttons = [...(groupsRef?.querySelectorAll("button") ?? [])];
+    const current = buttons.indexOf(document.activeElement);
+    const target = event.key === "ArrowLeft" ? current - 1 : event.key === "ArrowRight" ? current + 1 : event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : undefined;
+    if (target === undefined) return;
+    event.preventDefault();
+    buttons[(target + buttons.length) % buttons.length]?.focus();
+  };
+  const groupKeys = createMemo(() => [...(props.recent?.length ? ["recent"] : []), ...EMOJI_GROUPS.map(group => group.key)]);
+  const groupIcon = key => key === "recent" ? "ti ti-clock" : EMOJI_GROUPS.find(group => group.key === key)?.icon ?? "ti ti-mood-smile";
+  const tabStop = () => currentGroup() ?? groupKeys()[0];
+
+  /** The grid shares its pointer listeners; the target's position says which emoji it is. */
+  const itemAt = event => {
+    const option = event.target?.closest("[data-emoji-index]");
+    return option ? Number(option.dataset.emojiIndex) : undefined;
+  };
+
+  // A button, so that a tap is a click on every engine; the focus stays in the search field.
+  const option = (item, list, position) => (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _el$.$$click = () => pick(item);
+    _$insert(_el$, () => item.emoji);
+    _$effect(_p$ => {
+      var _v$ = optionId(position(), list),
+        _v$2 = isActive(position()),
+        _v$3 = nameOf(item),
+        _v$4 = position(),
+        _v$5 = isActive(position()) ? "true" : undefined;
+      _v$ !== _p$.e && _$setAttribute(_el$, "id", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "aria-selected", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "aria-label", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$, "data-emoji-index", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$, "data-active", _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    _$runHydrationEvents();
+    return _el$;
+  })();
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$7),
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$4.firstChild,
+      _el$6 = _el$5.nextSibling,
+      _el$0 = _el$4.nextSibling,
+      [_el$1, _co$] = _$getNextMarker(_el$0.nextSibling),
+      _el$10 = _el$3.nextSibling,
+      _el$11 = _el$10.nextSibling,
+      _el$18 = _el$11.nextSibling;
+    _el$6.$$keydown = onSearchKeyDown;
+    _el$6.$$input = event => {
+      setQuery(event.currentTarget.value);
+      setGridEntered(false);
+    };
+    var _ref$ = searchRef;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$6) : searchRef = _el$6;
+    _$setAttribute(_el$6, "aria-controls", `${id}-list`);
+    _$setAttribute(_el$6, "spellcheck", false);
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return props.onSkinToneChange;
+      },
+      get children() {
+        return [(() => {
+          var _el$7 = _$getNextElement(_tmpl$2),
+            _el$8 = _el$7.firstChild;
+          _el$7.$$click = openTones;
+          var _ref$2 = toneButtonRef;
+          typeof _ref$2 === "function" ? _$use(_ref$2, _el$7) : toneButtonRef = _el$7;
+          _$insert(_el$8, () => toneSample(tone()));
+          _$effect(_p$ => {
+            var _v$6 = text().emojiSkinTone,
+              _v$7 = tonesOpen(),
+              _v$8 = `${text().emojiSkinTone}: ${toneLabel(text(), tone())}`,
+              _v$9 = tonesOpen();
+            _v$6 !== _p$.e && _$setAttribute(_el$7, "aria-label", _p$.e = _v$6);
+            _v$7 !== _p$.t && _$setAttribute(_el$7, "aria-expanded", _p$.t = _v$7);
+            _v$8 !== _p$.a && _$setAttribute(_el$7, "title", _p$.a = _v$8);
+            _v$9 !== _p$.o && _$setProperty(_el$7, "inert", _p$.o = _v$9);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined
+          });
+          _$runHydrationEvents();
+          return _el$7;
+        })(), _$createComponent(Show, {
+          get when() {
+            return tonesOpen();
+          },
+          get children() {
+            var _el$9 = _$getNextElement(_tmpl$3);
+            _el$9.$$focusout = event => {
+              if (!tonesRef?.contains(event.relatedTarget)) closeTones(false);
+            };
+            _el$9.$$keydown = onTonesKeyDown;
+            var _ref$3 = tonesRef;
+            typeof _ref$3 === "function" ? _$use(_ref$3, _el$9) : tonesRef = _el$9;
+            _$insert(_el$9, _$createComponent(For, {
+              each: EMOJI_SKIN_TONES,
+              children: value => (() => {
+                var _el$19 = _$getNextElement(_tmpl$8),
+                  _el$20 = _el$19.firstChild;
+                _el$19.$$click = () => {
+                  props.onSkinToneChange?.(value);
+                  closeTones(true);
+                };
+                _$setAttribute(_el$19, "data-tone", value);
+                _$insert(_el$20, () => toneSample(value));
+                _$effect(_p$ => {
+                  var _v$17 = value === tone(),
+                    _v$18 = toneLabel(text(), value),
+                    _v$19 = toneLabel(text(), value),
+                    _v$20 = value === tone() ? 0 : -1;
+                  _v$17 !== _p$.e && _$setAttribute(_el$19, "aria-checked", _p$.e = _v$17);
+                  _v$18 !== _p$.t && _$setAttribute(_el$19, "aria-label", _p$.t = _v$18);
+                  _v$19 !== _p$.a && _$setAttribute(_el$19, "title", _p$.a = _v$19);
+                  _v$20 !== _p$.o && _$setAttribute(_el$19, "tabindex", _p$.o = _v$20);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
+                });
+                _$runHydrationEvents();
+                return _el$19;
+              })()
+            }));
+            _$effect(() => _$setAttribute(_el$9, "aria-label", text().emojiSkinTone));
+            _$runHydrationEvents();
+            return _el$9;
+          }
+        })];
+      }
+    }), _el$1, _co$);
+    _el$10.$$keydown = onGroupsKeyDown;
+    var _ref$4 = groupsRef;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$10) : groupsRef = _el$10;
+    _$insert(_el$10, _$createComponent(For, {
+      get each() {
+        return groupKeys();
+      },
+      children: key => (() => {
+        var _el$21 = _$getNextElement(_tmpl$9),
+          _el$22 = _el$21.firstChild;
+        _el$21.$$click = () => showGroup(key);
+        _$effect(_p$ => {
+          var _v$21 = groupTitle(text(), key),
+            _v$22 = groupTitle(text(), key),
+            _v$23 = !searching() && currentGroup() === key ? "true" : undefined,
+            _v$24 = key === tabStop() ? 0 : -1,
+            _v$25 = !index(),
+            _v$26 = groupIcon(key);
+          _v$21 !== _p$.e && _$setAttribute(_el$21, "aria-label", _p$.e = _v$21);
+          _v$22 !== _p$.t && _$setAttribute(_el$21, "title", _p$.t = _v$22);
+          _v$23 !== _p$.a && _$setAttribute(_el$21, "aria-current", _p$.a = _v$23);
+          _v$24 !== _p$.o && _$setAttribute(_el$21, "tabindex", _p$.o = _v$24);
+          _v$25 !== _p$.i && _$setProperty(_el$21, "disabled", _p$.i = _v$25);
+          _v$26 !== _p$.n && _$className(_el$22, _p$.n = _v$26);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined
+        });
+        _$runHydrationEvents();
+        return _el$21;
+      })()
+    }));
+    _el$11.addEventListener("scroll", syncGroup);
+    var _ref$5 = scrollRef;
+    typeof _ref$5 === "function" ? _$use(_ref$5, _el$11) : scrollRef = _el$11;
+    _$insert(_el$11, _$createComponent(Show, {
+      get when() {
+        return index();
+      },
+      get fallback() {
+        return (() => {
+          var _el$23 = _$getNextElement(_tmpl$6);
+          _$insert(_el$23, _$createComponent(Show, {
+            get when() {
+              return failed();
+            },
+            get fallback() {
+              return [_$getNextElement(_tmpl$1), (() => {
+                var _el$26 = _$getNextElement(_tmpl$10);
+                _$insert(_el$26, () => messages().loading);
+                return _el$26;
+              })()];
+            },
+            get children() {
+              return [(() => {
+                var _el$24 = _$getNextElement(_tmpl$0);
+                _$insert(_el$24, () => text().emojiLoadFailed);
+                return _el$24;
+              })(), _$createComponent(Button, {
+                size: "sm",
+                variant: "subtle",
+                onClick: load,
+                get children() {
+                  return messages().retry;
+                }
+              })];
+            }
+          }));
+          return _el$23;
+        })();
+      },
+      get children() {
+        return [(() => {
+          var _el$12 = _$getNextElement(_tmpl$5),
+            _el$15 = _el$12.firstChild,
+            [_el$16, _co$2] = _$getNextMarker(_el$15.nextSibling),
+            _el$14 = _el$16.nextSibling;
+          _el$12.$$mousedown = event => {
+            // The focus stays in the search field, where the keyboard works.
+            if (itemAt(event) !== undefined) event.preventDefault();
+          };
+          _el$12.$$pointermove = event => {
+            const position = itemAt(event);
+            if (position !== undefined && !isActive(position) && event.pointerType === "mouse") setActive(position);
+          };
+          _$setAttribute(_el$12, "id", `${id}-list`);
+          _$insert(_el$12, _$createComponent(Show, {
+            get when() {
+              return searching();
+            },
+            get children() {
+              var _el$13 = _$getNextElement(_tmpl$4);
+              _$insert(_el$13, _$createComponent(For, {
+                get each() {
+                  return resultBlocks();
+                },
+                children: (block, blockIndex) => (() => {
+                  var _el$27 = _$getNextElement(_tmpl$11);
+                  _$insert(_el$27, _$createComponent(For, {
+                    each: block,
+                    children: (item, itemIndex) => option(item, "r", () => blockIndex() * RESULT_BLOCK + itemIndex())
+                  }));
+                  _$effect(_$p => _$setStyleProperty(_el$27, "--k2b-emoji-rows", String(Math.ceil(block.length / COLUMNS))));
+                  return _el$27;
+                })()
+              }));
+              _$effect(() => _$setAttribute(_el$13, "aria-label", messages().searchResults));
+              return _el$13;
+            }
+          }), _el$16, _co$2);
+          _$insert(_el$14, _$createComponent(For, {
+            get each() {
+              return groups();
+            },
+            children: (section, sectionIndex) => (() => {
+              var _el$28 = _$getNextElement(_tmpl$12),
+                _el$29 = _el$28.firstChild,
+                _el$30 = _el$29.nextSibling;
+              _$insert(_el$29, () => groupTitle(text(), section.key));
+              _$insert(_el$30, _$createComponent(For, {
+                get each() {
+                  return section.items;
+                },
+                children: (item, itemIndex) => option(item, "g", () => groupStarts()[sectionIndex()] + itemIndex())
+              }));
+              _$effect(_p$ => {
+                var _v$27 = section.key,
+                  _v$28 = `${id}-${section.key}`,
+                  _v$29 = String(Math.ceil(section.items.length / COLUMNS)),
+                  _v$30 = `${id}-${section.key}`;
+                _v$27 !== _p$.e && _$setAttribute(_el$28, "data-emoji-group", _p$.e = _v$27);
+                _v$28 !== _p$.t && _$setAttribute(_el$28, "aria-labelledby", _p$.t = _v$28);
+                _v$29 !== _p$.a && _$setStyleProperty(_el$28, "--k2b-emoji-rows", _p$.a = _v$29);
+                _v$30 !== _p$.o && _$setAttribute(_el$29, "id", _p$.o = _v$30);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined
+              });
+              return _el$28;
+            })()
+          }));
+          _$effect(_p$ => {
+            var _v$0 = props.label ?? text().emojiPicker,
+              _v$1 = searching();
+            _v$0 !== _p$.e && _$setAttribute(_el$12, "aria-label", _p$.e = _v$0);
+            _v$1 !== _p$.t && _$setProperty(_el$14, "hidden", _p$.t = _v$1);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          _$runHydrationEvents();
+          return _el$12;
+        })(), _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!searching())() && results().length === 0;
+          },
+          get children() {
+            var _el$17 = _$getNextElement(_tmpl$6);
+            _$insert(_el$17, () => text().emojiNoResults);
+            return _el$17;
+          }
+        })];
+      }
+    }));
+    _$insert(_el$18, _$createComponent(Show, {
+      get when() {
+        return activeItem();
+      },
+      children: item => [(() => {
+        var _el$31 = _$getNextElement(_tmpl$13);
+        _$insert(_el$31, () => item().emoji);
+        return _el$31;
+      })(), (() => {
+        var _el$32 = _$getNextElement(_tmpl$14);
+        _$insert(_el$32, () => nameOf(item()));
+        return _el$32;
+      })(), _$createComponent(Show, {
+        get when() {
+          return item().entry?.shortcodes[0];
+        },
+        children: code => (() => {
+          var _el$33 = _$getNextElement(_tmpl$15),
+            _el$34 = _el$33.firstChild,
+            _el$36 = _el$34.nextSibling,
+            [_el$37, _co$3] = _$getNextMarker(_el$36.nextSibling),
+            _el$35 = _el$37.nextSibling;
+          _$insert(_el$33, code, _el$37, _co$3);
+          return _el$33;
+        })()
+      })]
+    }));
+    _$effect(_p$ => {
+      var _v$10 = `k2b-emoji-picker ${props.class ?? ""}`,
+        _v$11 = props.label ?? text().emojiPicker,
+        _v$12 = tonesOpen(),
+        _v$13 = text().emojiSearch,
+        _v$14 = activeItem() ? optionId(active()) : undefined,
+        _v$15 = text().emojiSearch,
+        _v$16 = text().emojiGroups;
+      _v$10 !== _p$.e && _$className(_el$2, _p$.e = _v$10);
+      _v$11 !== _p$.t && _$setAttribute(_el$2, "aria-label", _p$.t = _v$11);
+      _v$12 !== _p$.a && _$setProperty(_el$4, "inert", _p$.a = _v$12);
+      _v$13 !== _p$.o && _$setAttribute(_el$6, "aria-label", _p$.o = _v$13);
+      _v$14 !== _p$.i && _$setAttribute(_el$6, "aria-activedescendant", _p$.i = _v$14);
+      _v$15 !== _p$.n && _$setAttribute(_el$6, "placeholder", _p$.n = _v$15);
+      _v$16 !== _p$.s && _$setAttribute(_el$10, "aria-label", _p$.s = _v$16);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined
+    });
+    _$effect(() => _$setProperty(_el$6, "value", query()));
+    _$runHydrationEvents();
+    return _el$2;
+  })();
+}
+const touchOnlyQuery = "(any-pointer: coarse) and (not (any-pointer: fine))";
+const GAP = 6;
+const MARGIN = 8;
+
+/**
+ * The picker next to a control, such as the composer's emoji button or a message's "Add reaction". It opens above the
+ * control where there is room and below it otherwise, closes after a pick, and returns the focus to where it was.
+ */
+function EmojiPickerPopover(props) {
+  let surface;
+  /** Where the focus was when the picker opened, and whether a keyboard opened it. */
+  let previous = null;
+  let ring = false;
+  /** An anchor pressed while the picker was open closes it; the same click must not open it again. */
+  let pressedAnchor;
+  const [shown, setShown] = createSignal();
+  const place = () => {
+    const anchor = shown();
+    if (!surface || !anchor) return;
+    // An anchor that left the page, such as a row a virtual list recycled, takes the picker with it.
+    if (!anchor.isConnected) {
+      hide();
+      props.onClose();
+      return;
+    }
+    // The visible part of the page: a phone's keyboard shrinks only the visual viewport.
+    const viewport = window.visualViewport;
+    const view = {
+      top: (viewport?.offsetTop ?? 0) + MARGIN,
+      bottom: (viewport ? viewport.offsetTop + viewport.height : window.innerHeight) - MARGIN,
+      left: (viewport?.offsetLeft ?? 0) + MARGIN,
+      right: (viewport ? viewport.offsetLeft + viewport.width : window.innerWidth) - MARGIN
+    };
+    surface.style.setProperty("--k2b-emoji-popover-height", `${Math.round(view.bottom - view.top)}px`);
+    const box = anchor.getBoundingClientRect();
+    const size = surface.getBoundingClientRect();
+    const above = box.top - GAP - size.height;
+    const below = box.bottom + GAP;
+    const top = above >= view.top || below + size.height > view.bottom ? above : below;
+    // Aligned with the anchor's end, like a menu at the end of a composer.
+    const left = box.right - size.width;
+    surface.style.left = `${Math.round(Math.max(view.left, Math.min(left, view.right - size.width)))}px`;
+    surface.style.top = `${Math.round(Math.max(view.top, Math.min(top, view.bottom - size.height)))}px`;
+  };
+  const restoreFocus = () => {
+    // A pick that moved the focus on purpose, such as into a composer, keeps it there.
+    const focused = document.activeElement;
+    if (focused && focused !== document.body && !surface?.contains(focused)) return;
+    if (previous?.isConnected) returnFocus(previous, ring);
+  };
+  const hide = () => {
+    restoreFocus();
+    if (surface?.matches(":popover-open")) surface.hidePopover();
+    setShown(undefined);
+  };
+  const pressed = event => {
+    const anchor = shown();
+    pressedAnchor = anchor && event.target instanceof Node && anchor.contains(event.target) ? anchor : undefined;
+  };
+
+  /** A key press on the anchor dismisses nothing on its way, unlike a pointer: its click closes the open picker. */
+  const clicked = event => {
+    const anchor = shown();
+    if (!anchor || !(event.target instanceof Node) || !anchor.contains(event.target)) return;
+    pressedAnchor = anchor;
+    hide();
+    props.onClose();
+  };
+  createEffect(() => {
+    const anchor = props.anchor ?? undefined;
+    untrack(() => {
+      if (!anchor) {
+        if (shown()) hide();
+        return;
+      }
+      if (anchor === pressedAnchor) {
+        // The press that closed the picker also asked to open it: it stays closed.
+        pressedAnchor = undefined;
+        props.onClose();
+        return;
+      }
+      if (shown() === anchor || !surface) return;
+      // Moving to another anchor keeps the picker open and the focus to return to.
+      if (!shown()) {
+        previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        ring = ringOnReturn(previous ?? anchor);
+      }
+      setShown(anchor);
+      if (!surface.matches(":popover-open")) surface.showPopover();
+      place();
+    });
+  });
+
+  /** The page scrolled under the anchor; the picker's own list scrolling moves nothing. */
+  const scrolled = event => {
+    if (!(event.target instanceof Node && surface?.contains(event.target))) place();
+  };
+  onMount(() => {
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", scrolled, true);
+    window.visualViewport?.addEventListener("resize", place);
+    window.visualViewport?.addEventListener("scroll", place);
+    document.addEventListener("pointerdown", pressed, true);
+    document.addEventListener("click", clicked, true);
+    // The picker renders into the open surface after it is shown; its size places it.
+    const observer = typeof ResizeObserver === "function" && surface ? new ResizeObserver(place) : undefined;
+    if (surface) observer?.observe(surface);
+    onCleanup(() => {
+      observer?.disconnect();
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", scrolled, true);
+      window.visualViewport?.removeEventListener("resize", place);
+      window.visualViewport?.removeEventListener("scroll", place);
+      document.removeEventListener("pointerdown", pressed, true);
+      document.removeEventListener("click", clicked, true);
+      if (surface?.matches(":popover-open")) hide();
+    });
+  });
+  const touchOnly = () => typeof matchMedia === "function" && matchMedia(touchOnlyQuery).matches;
+  return (() => {
+    var _el$38 = _$getNextElement(_tmpl$16);
+    _el$38.addEventListener("toggle", event => {
+      if (event.newState === "open") return;
+      // Light dismissal by the browser: a click outside, Escape, or another popover.
+      if (shown()) {
+        setShown(undefined);
+        restoreFocus();
+        props.onClose();
+      }
+      // The pressed anchor is forgotten once its click has had the chance to reopen the picker.
+      setTimeout(() => {
+        pressedAnchor = undefined;
+      });
+    });
+    var _ref$6 = surface;
+    typeof _ref$6 === "function" ? _$use(_ref$6, _el$38) : surface = _el$38;
+    _$insert(_el$38, _$createComponent(Show, {
+      get when() {
+        return shown();
+      },
+      get children() {
+        return _$createComponent(EmojiPickerPanel, {
+          onPick: emoji => {
+            props.onPick(emoji);
+            hide();
+            props.onClose();
+          },
+          get recent() {
+            return props.recent;
+          },
+          get skinTone() {
+            return props.skinTone;
+          },
+          get onSkinToneChange() {
+            return props.onSkinToneChange;
+          },
+          get label() {
+            return props.label;
+          },
+          get ["class"]() {
+            return props.class;
+          },
+          get autofocus() {
+            return !touchOnly();
+          },
+          onClose: () => {
+            hide();
+            props.onClose();
+          }
+        });
+      }
+    }));
+    return _el$38;
+  })();
+}
+
+/** The emoji picker. `EmojiPicker.Popover` opens it next to a control. */
+export const EmojiPicker = Object.assign(EmojiPickerPanel, {
+  Popover: EmojiPickerPopover
+});
+_$delegateEvents(["click", "input", "keydown", "focusout", "pointermove", "mousedown"]);
+//# sourceMappingURL=EmojiPicker.js.map