@tensor_1/react 2.18.0 → 2.19.0

package/dist/emoji.cjs

@@ -0,0 +1,871 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/emoji.ts
+var emoji_exports = {};
+__export(emoji_exports, {
+  DEFAULT_EMOJI_PICKER_LABELS: () => DEFAULT_EMOJI_PICKER_LABELS,
+  DEFAULT_QUICK_REACTIONS: () => DEFAULT_QUICK_REACTIONS,
+  DEFAULT_REACTION_BAR_LABELS: () => DEFAULT_REACTION_BAR_LABELS,
+  EMOJI_GRID_COLUMNS: () => EMOJI_GRID_COLUMNS,
+  EmojiPicker: () => EmojiPicker,
+  ReactionBar: () => ReactionBar,
+  buildEmojiData: () => buildEmojiData,
+  canRenderEmoji: () => canRenderEmoji,
+  emojiImageFileName: () => emojiImageFileName,
+  loadEmojiData: () => loadEmojiData,
+  normalizeEmojiImageBaseUrl: () => normalizeEmojiImageBaseUrl,
+  searchEmoji: () => searchEmoji
+});
+module.exports = __toCommonJS(emoji_exports);
+
+// src/components/EmojiPicker.tsx
+var import_react4 = require("react");
+
+// src/cx.ts
+function cx(...args) {
+  return args.filter(Boolean).join(" ");
+}
+
+// src/components/Popover.tsx
+var import_react2 = require("react");
+
+// src/hooks/useAnchoredPosition.ts
+var import_react = require("react");
+
+// src/overlay-position.ts
+var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+function parsePlacement(p) {
+  const [side, align] = p.split("-");
+  return { side, align: align ?? "center" };
+}
+var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+function spaceOn(side, a, vp, offset) {
+  switch (side) {
+    case "top":
+      return a.y - offset;
+    case "bottom":
+      return vp.height - (a.y + a.height) - offset;
+    case "left":
+      return a.x - offset;
+    case "right":
+      return vp.width - (a.x + a.width) - offset;
+  }
+}
+function fitsOn(side, a, f, vp, offset, padding) {
+  const need = side === "top" || side === "bottom" ? f.height : f.width;
+  return spaceOn(side, a, vp, offset) >= need + padding;
+}
+function computePosition(anchor, floating, viewport, options = {}) {
+  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true } = options;
+  const { side: preferred, align } = parsePlacement(placement);
+  let side = preferred;
+  if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
+    const opp = OPPOSITE[side];
+    if (fitsOn(opp, anchor, floating, viewport, offset, padding) || spaceOn(opp, anchor, viewport, offset) > spaceOn(side, anchor, viewport, offset)) {
+      side = opp;
+    }
+  }
+  let x, y;
+  const horizontal = side === "top" || side === "bottom";
+  if (side === "top") y = anchor.y - floating.height - offset;
+  else if (side === "bottom") y = anchor.y + anchor.height + offset;
+  else if (side === "left") x = anchor.x - floating.width - offset;
+  else x = anchor.x + anchor.width + offset;
+  if (horizontal) {
+    const start = anchor.x;
+    const end = anchor.x + anchor.width - floating.width;
+    const center = anchor.x + (anchor.width - floating.width) / 2;
+    x = align === "start" ? start : align === "end" ? end : center;
+    if (shift) x = clamp(x, padding, Math.max(padding, viewport.width - floating.width - padding));
+  } else {
+    const start = anchor.y;
+    const end = anchor.y + anchor.height - floating.height;
+    const center = anchor.y + (anchor.height - floating.height) / 2;
+    y = align === "start" ? start : align === "end" ? end : center;
+    if (shift) y = clamp(y, padding, Math.max(padding, viewport.height - floating.height - padding));
+  }
+  return {
+    x,
+    y,
+    placement: align === "center" ? side : `${side}-${align}`,
+    side,
+    align
+  };
+}
+
+// src/hooks/useAnchoredPosition.ts
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
+var resolve = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
+  const opts = (0, import_react.useRef)({ placement, offset, padding });
+  opts.current = { placement, offset, padding };
+  const reposition = (0, import_react.useCallback)(() => {
+    const anchorEl = resolve(anchor);
+    const floating = floatingRef.current;
+    if (!anchorEl || !floating) return;
+    const s = floating.style;
+    s.position = "fixed";
+    s.inset = "auto";
+    s.margin = "0";
+    const a = anchorEl.getBoundingClientRect();
+    const { placement: p, offset: o, padding: pad } = opts.current;
+    const pos = computePosition(
+      { x: a.x, y: a.y, width: a.width, height: a.height },
+      { width: floating.offsetWidth, height: floating.offsetHeight },
+      { width: window.innerWidth, height: window.innerHeight },
+      { placement: p, offset: o, padding: pad }
+    );
+    s.left = `${Math.round(pos.x)}px`;
+    s.top = `${Math.round(pos.y)}px`;
+    floating.dataset.placement = pos.placement;
+  }, [anchor, floatingRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    reposition();
+    const onScroll = () => reposition();
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [open, reposition]);
+  return reposition;
+}
+
+// src/components/Popover.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Popover({
+  popover = "auto",
+  anchor,
+  placement = "bottom-start",
+  offset = 6,
+  className,
+  children,
+  ...props
+}) {
+  const ref = (0, import_react2.useRef)(null);
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const popoverAttr = { popover };
+  const reposition = useAnchoredPosition(anchor ?? null, ref, {
+    open: open && !!anchor,
+    placement,
+    offset
+  });
+  (0, import_react2.useEffect)(() => {
+    const el = ref.current;
+    if (!el || !anchor) return;
+    const sync = () => {
+      const isOpen = el.matches(":popover-open");
+      if (isOpen) reposition();
+      setOpen(isOpen);
+    };
+    el.addEventListener("toggle", sync);
+    return () => el.removeEventListener("toggle", sync);
+  }, [anchor, reposition]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
+}
+
+// src/emoji-model.ts
+var COMPONENT_GROUP_KEY = "component";
+var capitalize = (s) => s ? s[0].toLocaleUpperCase() + s.slice(1) : s;
+function buildEmojiData(locale, compact, messages) {
+  const sourceGroups = [...messages.groups].sort((a, b) => a.order - b.order);
+  const groups = [];
+  const groupIndex = /* @__PURE__ */ new Map();
+  for (const g of sourceGroups) {
+    if (g.key === COMPONENT_GROUP_KEY) continue;
+    groupIndex.set(g.order, groups.length);
+    groups.push({ key: g.key, name: capitalize(g.message) });
+  }
+  const emojis = [];
+  const names = /* @__PURE__ */ new Map();
+  const sorted = [...compact].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  for (const item of sorted) {
+    if (item.group === void 0) continue;
+    const group = groupIndex.get(item.group);
+    if (group === void 0) continue;
+    const entry = { emoji: item.unicode, name: item.label, tags: item.tags ?? [], group };
+    emojis.push(entry);
+    names.set(item.unicode, item.label);
+    names.set(item.unicode.replace(/️/g, ""), item.label);
+  }
+  return { locale, groups, emojis, names };
+}
+var cache = /* @__PURE__ */ new Map();
+var loadEmojiData = (locale) => {
+  let pending = cache.get(locale);
+  if (!pending) {
+    const files = locale === "de" ? Promise.all([import("emojibase-data/de/compact.json"), import("emojibase-data/de/messages.json")]) : Promise.all([import("emojibase-data/en/compact.json"), import("emojibase-data/en/messages.json")]);
+    pending = files.then(
+      ([compact, messages]) => buildEmojiData(
+        locale,
+        compact.default ?? compact,
+        messages.default ?? messages
+      )
+    );
+    pending.catch(() => cache.delete(locale));
+    cache.set(locale, pending);
+  }
+  return pending;
+};
+var fold = (s) => s.toLocaleLowerCase().normalize("NFD").replace(/\p{M}/gu, "");
+function searchEmoji(data, query, limit = 64) {
+  const q = fold(query.trim());
+  if (!q) return [];
+  const prefix = [];
+  const contains = [];
+  for (const entry of data.emojis) {
+    const name = fold(entry.name);
+    const words = [...name.split(/[\s:,-]+/), ...entry.tags.map(fold)];
+    if (words.some((w) => w.startsWith(q)) || name.startsWith(q)) prefix.push(entry);
+    else if (name.includes(q)) contains.push(entry);
+    if (prefix.length >= limit) break;
+  }
+  return [...prefix, ...contains].slice(0, limit);
+}
+var DEFAULT_RECENT_KEY = "uix-emoji-recent";
+var RECENT_MAX = 16;
+function readRecentEmoji(key = DEFAULT_RECENT_KEY) {
+  try {
+    const raw = globalThis.localStorage?.getItem(key);
+    const list = raw ? JSON.parse(raw) : [];
+    return Array.isArray(list) ? list.filter((e) => typeof e === "string").slice(0, RECENT_MAX) : [];
+  } catch {
+    return [];
+  }
+}
+function pushRecentEmoji(emoji, key = DEFAULT_RECENT_KEY) {
+  const next = [emoji, ...readRecentEmoji(key).filter((e) => e !== emoji)].slice(0, RECENT_MAX);
+  try {
+    globalThis.localStorage?.setItem(key, JSON.stringify(next));
+  } catch {
+  }
+  return next;
+}
+function emojiGridMove(index, key, count, columns) {
+  if (count === 0) return null;
+  switch (key) {
+    case "ArrowRight":
+      return Math.min(index + 1, count - 1);
+    case "ArrowLeft":
+      return Math.max(index - 1, 0);
+    case "ArrowDown":
+      return Math.min(index + columns, count - 1);
+    case "ArrowUp":
+      return index - columns < 0 ? null : index - columns;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+function formatLabel(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+}
+
+// src/components/EmojiGlyph.tsx
+var import_react3 = require("react");
+
+// src/emoji-image.ts
+var warned = /* @__PURE__ */ new Set();
+var devWarn = (message) => {
+  if (warned.has(message) || typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  warned.add(message);
+  console.warn(message);
+};
+function normalizeEmojiImageBaseUrl(value) {
+  if (value === void 0 || value === "") return void 0;
+  const sameOrigin = /^(?:\/(?![/\\])|\.\/)/.test(value) && !/[\\\s]/.test(value) && !/^[^/?#]*:/.test(value);
+  if (!sameOrigin) {
+    devWarn(`uix: emojiImageBaseUrl "${value}" was ignored \u2014 only same-origin paths starting with "/" or "./" are allowed.`);
+    return void 0;
+  }
+  return value.replace(/\/+$/, "") || "/";
+}
+function emojiImageFileName(emoji) {
+  return `${Array.from(emoji, (ch) => ch.codePointAt(0).toString(16)).join("-")}.png`;
+}
+function emojiImageSrc(base, emoji) {
+  return `${base === "/" ? "" : base}/${emojiImageFileName(emoji)}`;
+}
+var support = /* @__PURE__ */ new Map();
+var context;
+var SIZE = 20;
+function canRenderEmoji(emoji) {
+  const cached = support.get(emoji);
+  if (cached !== void 0) return cached;
+  if (typeof document === "undefined") return true;
+  if (context === void 0) {
+    try {
+      const canvas = document.createElement("canvas");
+      canvas.width = SIZE;
+      canvas.height = SIZE;
+      context = typeof canvas.getContext === "function" ? canvas.getContext("2d", { willReadFrequently: true }) : null;
+    } catch {
+      context = null;
+    }
+  }
+  if (!context) return true;
+  let result = true;
+  try {
+    context.clearRect(0, 0, SIZE, SIZE);
+    context.fillStyle = "#000";
+    context.textBaseline = "top";
+    context.font = `${SIZE - 4}px sans-serif`;
+    context.fillText(emoji, 0, 0);
+    const { data } = context.getImageData(0, 0, SIZE, SIZE);
+    result = false;
+    for (let i = 0; i < data.length; i += 4) {
+      const [r, g, b, a] = [data[i], data[i + 1], data[i + 2], data[i + 3]];
+      if (a > 0 && (Math.abs(r - g) > 12 || Math.abs(g - b) > 12)) {
+        result = true;
+        break;
+      }
+    }
+  } catch {
+    result = true;
+  }
+  support.set(emoji, result);
+  return result;
+}
+
+// src/components/EmojiGlyph.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function useEmojiRenderer(emojiImageBaseUrl) {
+  const base = (0, import_react3.useMemo)(() => normalizeEmojiImageBaseUrl(emojiImageBaseUrl), [emojiImageBaseUrl]);
+  const [mounted, setMounted] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    if (base) setMounted(true);
+  }, [base]);
+  return (0, import_react3.useCallback)((emoji) => {
+    if (!base || !mounted || canRenderEmoji(emoji)) return emoji;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: "uix-emoji-img", src: emojiImageSrc(base, emoji), alt: emoji, draggable: false, decoding: "async" });
+  }, [base, mounted]);
+}
+
+// src/components/EmojiPicker.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_EMOJI_PICKER_LABELS = {
+  dialog: "Choose an emoji",
+  search: "Search emoji",
+  recent: "Recently used",
+  quickPicks: "Frequently used",
+  categories: "Emoji categories",
+  noResults: "No emoji found",
+  loading: "Loading emoji\u2026",
+  loadFailed: "Emoji could not be loaded."
+};
+var EMOJI_GRID_COLUMNS = 8;
+function EmojiPicker({
+  onSelect,
+  trigger,
+  labels: labelOverrides,
+  locale = "en",
+  quickPicks,
+  loadData = loadEmojiData,
+  recentStorageKey = DEFAULT_RECENT_KEY,
+  placement = "bottom-start",
+  onOpenChange,
+  className,
+  emojiImageBaseUrl
+}) {
+  const renderEmoji = useEmojiRenderer(emojiImageBaseUrl);
+  const labels = { ...DEFAULT_EMOJI_PICKER_LABELS, ...labelOverrides };
+  const id = (0, import_react4.useId)();
+  const popoverId = `${id}-picker`;
+  const anchorRef = (0, import_react4.useRef)(null);
+  const searchRef = (0, import_react4.useRef)(null);
+  const gridRef = (0, import_react4.useRef)(null);
+  const pointerWasOpen = (0, import_react4.useRef)(null);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [data, setData] = (0, import_react4.useState)(null);
+  const [failed, setFailed] = (0, import_react4.useState)(false);
+  const [query, setQuery] = (0, import_react4.useState)("");
+  const [recent, setRecent] = (0, import_react4.useState)([]);
+  const [active, setActive] = (0, import_react4.useState)(0);
+  const popoverEl = () => typeof document === "undefined" ? null : document.getElementById(popoverId);
+  const isOpen = (el) => {
+    try {
+      return !!el?.matches(":popover-open");
+    } catch {
+      return false;
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    const el = popoverEl();
+    if (!el) return;
+    const onToggle = (event) => {
+      const { newState } = event;
+      const nowOpen = newState ? newState === "open" : isOpen(el);
+      setOpen(nowOpen);
+      onOpenChange?.(nowOpen);
+      if (nowOpen) {
+        setRecent(readRecentEmoji(recentStorageKey));
+        setQuery("");
+        setActive(0);
+        requestAnimationFrame(() => searchRef.current?.focus());
+      } else if (el.contains(document.activeElement) || document.activeElement === document.body) {
+        focusTrigger();
+      }
+    };
+    el.addEventListener("toggle", onToggle);
+    return () => el.removeEventListener("toggle", onToggle);
+  }, [popoverId, recentStorageKey, onOpenChange]);
+  (0, import_react4.useEffect)(() => {
+    if (!open || data?.locale === locale) return;
+    let live = true;
+    setFailed(false);
+    loadData(locale).then(
+      (loaded) => {
+        if (live) setData(loaded);
+      },
+      () => {
+        if (live) setFailed(true);
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [open, locale, loadData, data?.locale]);
+  const focusTrigger = () => {
+    const el = anchorRef.current?.querySelector("button, [href], [tabindex]");
+    el?.focus();
+  };
+  const hide = () => {
+    const el = popoverEl();
+    if (el && isOpen(el)) el.hidePopover();
+  };
+  const sections = (0, import_react4.useMemo)(() => {
+    if (query.trim()) {
+      return data ? [{ key: "results", title: labels.search, emojis: searchEmoji(data, query).map((e) => e.emoji) }] : [];
+    }
+    const list = [];
+    if (quickPicks?.length) list.push({ key: "quick", title: labels.quickPicks, emojis: [...new Set(quickPicks)] });
+    if (recent.length) list.push({ key: "recent", title: labels.recent, emojis: recent });
+    if (data) {
+      data.groups.forEach((group, index) => {
+        list.push({ key: group.key, title: group.name, emojis: data.emojis.filter((e) => e.group === index).map((e) => e.emoji) });
+      });
+    }
+    return list;
+  }, [query, data, quickPicks, recent, labels.search, labels.quickPicks, labels.recent]);
+  const flat = (0, import_react4.useMemo)(() => sections.flatMap((s) => s.emojis), [sections]);
+  const sectionStart = (0, import_react4.useMemo)(() => {
+    const starts = /* @__PURE__ */ new Map();
+    let at = 0;
+    for (const section of sections) {
+      starts.set(section.key, at);
+      at += section.emojis.length;
+    }
+    return starts;
+  }, [sections]);
+  const activeIndex = Math.min(active, Math.max(flat.length - 1, 0));
+  const choose = (emoji) => {
+    setRecent(pushRecentEmoji(emoji, recentStorageKey));
+    onSelect(emoji);
+    hide();
+  };
+  const focusCell = (0, import_react4.useCallback)((index) => {
+    setActive(index);
+    const find = () => gridRef.current?.querySelector(`[data-emoji-index="${index}"]`);
+    const cell = find();
+    if (cell) cell.focus();
+    else requestAnimationFrame(() => find()?.focus());
+  }, []);
+  const onGridKeyDown = (event) => {
+    const target = event.target;
+    const index = Number(target.dataset.emojiIndex ?? -1);
+    if (index < 0) return;
+    const next = emojiGridMove(index, event.key, flat.length, EMOJI_GRID_COLUMNS);
+    if (event.key === "ArrowUp" && next === null) {
+      event.preventDefault();
+      searchRef.current?.focus();
+      return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    focusCell(next);
+  };
+  const onSearchKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      hide();
+    } else if (event.key === "ArrowDown" && flat.length) {
+      event.preventDefault();
+      focusCell(0);
+    } else if (event.key === "Enter" && query.trim() && flat[0]) {
+      event.preventDefault();
+      choose(flat[0]);
+    }
+  };
+  const toggleFromTrigger = (event) => {
+    const el = popoverEl();
+    if (!el || event.defaultPrevented) return;
+    const was = pointerWasOpen.current;
+    pointerWasOpen.current = null;
+    if (was === true) return;
+    if (isOpen(el)) el.hidePopover();
+    else el.showPopover();
+  };
+  const triggerProps = (0, import_react4.isValidElement)(trigger) ? trigger.props : {};
+  const triggerEl = (0, import_react4.isValidElement)(trigger) ? (0, import_react4.cloneElement)(trigger, {
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "aria-controls": popoverId,
+    onPointerDown: (event) => {
+      pointerWasOpen.current = isOpen(popoverEl());
+      triggerProps.onPointerDown?.(event);
+    },
+    onClick: (event) => {
+      triggerProps.onClick?.(event);
+      toggleFromTrigger(event);
+    }
+  }) : trigger;
+  const names = data?.names;
+  let offset = 0;
+  const status = failed ? labels.loadFailed : !data && open ? labels.loading : query.trim() && data && flat.length === 0 ? labels.noResults : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { ref: anchorRef, className: cx("uix-emoji-picker__anchor", className), children: [
+    triggerEl,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Popover,
+      {
+        id: popoverId,
+        anchor: anchorRef,
+        placement,
+        className: "uix-emoji-picker-popover",
+        role: "dialog",
+        "aria-label": labels.dialog,
+        children: open ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uix-emoji-picker uix-emoji-picker--full", lang: locale, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              ref: searchRef,
+              type: "search",
+              className: "uix-input uix-emoji-picker__search",
+              "aria-label": labels.search,
+              placeholder: labels.search,
+              value: query,
+              onChange: (event) => {
+                setQuery(event.target.value);
+                setActive(0);
+              },
+              onKeyDown: onSearchKeyDown,
+              autoComplete: "off",
+              spellCheck: false
+            }
+          ),
+          data && !query.trim() ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uix-emoji-picker__nav", role: "group", "aria-label": labels.categories, children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "uix-emoji-picker__nav-btn",
+              "aria-label": section.title,
+              title: section.title,
+              onClick: () => {
+                const start = section.emojis.length ? sectionStart.get(section.key) ?? -1 : -1;
+                gridRef.current?.querySelector(`[data-section="${section.key}"]`)?.scrollIntoView({ block: "start" });
+                if (start >= 0) focusCell(start);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", children: section.emojis[0] ? renderEmoji(section.emojis[0]) : null })
+            },
+            section.key
+          )) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uix-emoji-picker__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: sections.map((section) => {
+            const start = offset;
+            offset += section.emojis.length;
+            if (!section.emojis.length) return null;
+            const headingId = `${id}-${section.key}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: "uix-emoji-picker__section", "data-section": section.key, "aria-labelledby": headingId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { id: headingId, className: "uix-emoji-picker__heading", children: section.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uix-emoji-picker__cells", role: "group", "aria-labelledby": headingId, children: section.emojis.map((emoji, i) => {
+                const index = start + i;
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "uix-emoji-picker__btn",
+                    "data-emoji-index": index,
+                    tabIndex: index === activeIndex ? 0 : -1,
+                    "aria-label": names?.get(emoji) ?? emoji,
+                    title: names?.get(emoji),
+                    onClick: () => choose(emoji),
+                    onFocus: () => setActive(index),
+                    children: renderEmoji(emoji)
+                  },
+                  `${section.key}-${emoji}`
+                );
+              }) })
+            ] }, section.key);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "uix-emoji-picker__status", role: "status", children: status })
+        ] }) : null
+      }
+    )
+  ] });
+}
+
+// src/components/EditorIcons.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PATHS = {
+  heading1: "M4 12h8M4 18V6M12 18V6M17 12l3-2v8",
+  heading2: "M4 12h8M4 18V6M12 18V6M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1",
+  heading3: "M4 12h8M4 18V6M12 18V6M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2",
+  bold: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8",
+  italic: "M19 4h-9M14 20H5M15 4 9 20",
+  strike: "M16 4H9a3 3 0 0 0-2.83 4M14 12a4 4 0 0 1 0 8H6M4 12h16",
+  code: "m16 18 6-6-6-6M8 6l-6 6 6 6",
+  bulletList: "M3 12h.01M3 18h.01M3 6h.01M8 12h13M8 18h13M8 6h13",
+  orderedList: "M10 12h11M10 18h11M10 6h11M4 10h2M4 6h1v4M6 18H4c0-1 2-2 2-3s-1-1.5-2-1",
+  taskList: "m3 17 2 2 4-4M3 7l2 2 4-4M13 6h8M13 12h8M13 18h8",
+  blockquote: "M17 6H3M21 12H8M21 18H8M3 12v6",
+  codeBlock: "m10 9-3 3 3 3M14 15l3-3-3-3M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z",
+  horizontalRule: "M5 12h14",
+  link: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+  table: "M12 3v18M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2ZM3 9h18M3 15h18",
+  tableAddRow: "M4 3h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM12 15v6M9 18h6",
+  tableAddColumn: "M4 3h6a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM18 9v6M15 12h6",
+  tableDeleteRow: "M4 3h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM9 18h6",
+  tableDeleteColumn: "M4 3h6a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM15 12h6",
+  trash: "M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",
+  image: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2ZM9 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM21 15l-3.09-3.09a2 2 0 0 0-2.82 0L6 21",
+  emoji: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01",
+  addReaction: "M22 11v1a10 10 0 1 1-9-10M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01M16 5h6M19 2v6",
+  undo: "M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11",
+  redo: "m15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13",
+  sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
+  richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5",
+  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2"
+};
+function EditorIcon({ name, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: PATHS[name] })
+    }
+  );
+}
+
+// src/components/Tooltip.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Tooltip({ label, placement = "top", className, children, ...props }) {
+  const triggerRef = (0, import_react5.useRef)(null);
+  const bubbleRef = (0, import_react5.useRef)(null);
+  const closeTimer = (0, import_react5.useRef)(null);
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const id = (0, import_react5.useId)();
+  useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
+  const cancelClose = () => {
+    if (closeTimer.current != null) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+  const show = () => {
+    cancelClose();
+    const b = bubbleRef.current;
+    if (b && !b.matches(":popover-open")) {
+      try {
+        b.showPopover();
+      } catch {
+      }
+    }
+    setOpen(true);
+  };
+  const hide = () => {
+    cancelClose();
+    const b = bubbleRef.current;
+    if (b && b.matches(":popover-open")) {
+      try {
+        b.hidePopover();
+      } catch {
+      }
+    }
+    setOpen(false);
+  };
+  const scheduleHide = () => {
+    cancelClose();
+    closeTimer.current = window.setTimeout(hide, 100);
+  };
+  (0, import_react5.useEffect)(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  (0, import_react5.useEffect)(() => () => {
+    if (closeTimer.current != null) clearTimeout(closeTimer.current);
+    const b = bubbleRef.current;
+    if (b && b.matches(":popover-open")) {
+      try {
+        b.hidePopover();
+      } catch {
+      }
+    }
+  }, []);
+  const bubbleAttr = { popover: "manual" };
+  const single = (0, import_react5.isValidElement)(children);
+  const child = single ? (0, import_react5.cloneElement)(children, {
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
+  }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "span",
+    {
+      ref: triggerRef,
+      className: cx("uix-tooltip", className),
+      "aria-describedby": single ? void 0 : id,
+      tabIndex: single ? void 0 : 0,
+      onMouseEnter: show,
+      onMouseLeave: scheduleHide,
+      onFocus: show,
+      onBlur: hide,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") hide();
+      },
+      ...props,
+      children: [
+        child,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            ref: bubbleRef,
+            id,
+            role: "tooltip",
+            className: "uix-tooltip__bubble",
+            onMouseEnter: cancelClose,
+            onMouseLeave: scheduleHide,
+            ...bubbleAttr,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ReactionBar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DEFAULT_REACTION_BAR_LABELS = {
+  group: "Reactions",
+  addReaction: "Add reaction",
+  reactedWith: "{names} reacted with {emoji}",
+  reactedCount: "{count} reacted with {emoji}",
+  others: "and {count} more"
+};
+var DEFAULT_QUICK_REACTIONS = ["\u{1F44D}", "\u2705", "\u{1F440}", "\u{1F389}", "\u2764\uFE0F"];
+function ReactionBar({
+  reactions,
+  onToggle,
+  disabled = false,
+  quickPicks = DEFAULT_QUICK_REACTIONS,
+  labels: labelOverrides,
+  pickerLabels,
+  locale,
+  loadData,
+  maxNames = 10,
+  className,
+  emojiImageBaseUrl
+}) {
+  const renderEmoji = useEmojiRenderer(emojiImageBaseUrl);
+  const labels = { ...DEFAULT_REACTION_BAR_LABELS, ...labelOverrides };
+  const describe = (reaction) => {
+    if (reaction.names.length === 0) {
+      return formatLabel(labels.reactedCount, { count: reaction.count, emoji: reaction.emoji });
+    }
+    const shown = reaction.names.slice(0, maxNames).join(", ");
+    const hidden = Math.max(reaction.count, reaction.names.length) - Math.min(reaction.names.length, maxNames);
+    const names = hidden > 0 ? `${shown} ${formatLabel(labels.others, { count: hidden })}` : shown;
+    return formatLabel(labels.reactedWith, { names, emoji: reaction.emoji, count: reaction.count });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cx("uix-reactions", className), role: "group", "aria-label": labels.group, children: [
+    reactions.filter((r) => r.count > 0).map((reaction) => {
+      const text = describe(reaction);
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip, { label: text, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "uix-reaction",
+          "aria-pressed": reaction.reactedByMe,
+          "aria-label": text,
+          "data-mine": reaction.reactedByMe || void 0,
+          disabled,
+          onClick: () => onToggle(reaction.emoji),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", children: renderEmoji(reaction.emoji) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uix-reaction__count", "aria-hidden": "true", children: reaction.count })
+          ]
+        }
+      ) }, reaction.emoji);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      EmojiPicker,
+      {
+        quickPicks,
+        labels: pickerLabels,
+        locale,
+        loadData,
+        emojiImageBaseUrl,
+        onSelect: (emoji) => {
+          if (!reactions.some((r) => r.emoji === emoji && r.reactedByMe)) onToggle(emoji);
+        },
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "uix-reaction-add", "aria-label": labels.addReaction, title: labels.addReaction, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EditorIcon, { name: "addReaction" }) })
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_EMOJI_PICKER_LABELS,
+  DEFAULT_QUICK_REACTIONS,
+  DEFAULT_REACTION_BAR_LABELS,
+  EMOJI_GRID_COLUMNS,
+  EmojiPicker,
+  ReactionBar,
+  buildEmojiData,
+  canRenderEmoji,
+  emojiImageFileName,
+  loadEmojiData,
+  normalizeEmojiImageBaseUrl,
+  searchEmoji
+});