2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T4db0,"use client"; import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentProps, type CSSProperties, type ReactElement, type ReactNode, } from "react"; import { EmojiPicker as Frimousse, type Emoji, type EmojiDataResolver, type EmojiPickerListCategoryHeaderProps, type EmojiPickerListEmojiProps, type SkinTone } from "frimousse"; import { IconActivity, IconBulb, IconBuildingSkyscraper, IconFlag, IconHash, IconLeaf, IconMoodSmile, IconMoodSad, IconSalad, IconSearch, IconUsers, } from "@tabler/icons-react"; import { buttonVariants } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Spinner } from "@/components/ui/spinner"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; /* ---- recents ------------------------------------------------------------------------------ */ type Recent = { emoji: string; label: string }; const EMPTY: Recent[] = []; const NO_TABS: EmojiCategoryTab[] = []; const cache = new Map(); const listeners = new Set<() => void>(); function readRecents(key: string): Recent[] { let raw: string | null = null; try { raw = window.localStorage.getItem(key); } catch { return EMPTY; } const hit = cache.get(key); if (hit && hit.raw === raw) return hit.value; let value = EMPTY; try { const parsed: unknown = raw ? JSON.parse(raw) : []; if (Array.isArray(parsed)) value = parsed.filter((r): r is Recent => typeof r?.emoji === "string" && typeof r?.label === "string"); } catch { value = EMPTY; } cache.set(key, { raw, value }); return value; } function subscribe(onChange: () => void) { listeners.add(onChange); window.addEventListener("storage", onChange); return () => { listeners.delete(onChange); window.removeEventListener("storage", onChange); }; } /** Recently used emoji, kept in localStorage under `key` and shared by every picker with that key. */ export function useEmojiRecents(key: string, max = 8) { const recents = useSyncExternalStore( subscribe, () => readRecents(key), () => EMPTY, ); const push = useCallback( (emoji: Emoji) => { const next = [{ emoji: emoji.emoji, label: emoji.label }, ...readRecents(key).filter((r) => r.emoji !== emoji.emoji)].slice(0, max); try { window.localStorage.setItem(key, JSON.stringify(next)); } catch { // storage unavailable: recents just do not persist } cache.delete(key); listeners.forEach((l) => l()); }, [key, max], ); const clear = useCallback(() => { try { window.localStorage.removeItem(key); } catch { // nothing stored } cache.delete(key); listeners.forEach((l) => l()); }, [key]); return { recents: recents.slice(0, max), push, clear }; } /* ---- categories --------------------------------------------------------------------------- */ export type EmojiCategoryTab = { id: string; /** Accessible name of the tab. */ label: string; /** Lowercase text found in the category header the tab scrolls to, e.g. "smileys". */ match: string; icon?: ReactNode; }; /** The Unicode groups, matched against the headers frimousse renders for its default data. */ export const defaultEmojiCategories: EmojiCategoryTab[] = [ { id: "smileys", label: "Smileys and emotion", match: "smileys", icon: }, { id: "people", label: "People and body", match: "people", icon: }, { id: "animals", label: "Animals and nature", match: "animals", icon: }, { id: "food", label: "Food and drink", match: "food", icon: }, { id: "travel", label: "Travel and places", match: "travel", icon: }, { id: "activities", label: "Activities", match: "activities", icon: }, { id: "objects", label: "Objects", match: "objects", icon: }, { id: "symbols", label: "Symbols", match: "symbols", icon: }, { id: "flags", label: "Flags", match: "flags", icon: }, ]; /* ---- context ------------------------------------------------------------------------------ */ type Size = "sm" | "default" | "lg"; const SIZES: Record = { sm: { px: 28, columns: 9 }, default: { px: 36, columns: 8 }, lg: { px: 44, columns: 7 }, }; type PickerContext = { viewport: React.RefObject; categories: EmojiCategoryTab[]; active: string | null; present: string[]; setActive: (id: string | null) => void; setPresent: (ids: string[]) => void; recents: Recent[]; pick: (emoji: Emoji) => void; skinTone: SkinTone; setSkinTone: (tone: SkinTone) => void; }; const Ctx = createContext(null); function usePicker() { const ctx = useContext(Ctx); if (!ctx) throw new Error("Emoji picker parts must be used inside "); return ctx; } /* ---- list parts --------------------------------------------------------------------------- */ function CategoryHeader({ category, ...props }: EmojiPickerListCategoryHeaderProps) { return (

{category.label}

); } function Row(props: ComponentProps<"div">) { return

; } function EmojiButton({ emoji, ...props }: EmojiPickerListEmojiProps) { return ( ); } const listComponents = { CategoryHeader, Row, Emoji: EmojiButton }; /* ---- the picker --------------------------------------------------------------------------- */ export type EmojiPickerProps = { /** Fires with the chosen emoji. */ onEmojiSelect?: (emoji: Emoji) => void; size?: Size; /** A fixed column count, or "auto" to fill the width of the container. Default: the size's own. */ columns?: number | "auto"; /** Search field on top. Default true. */ search?: boolean; /** Category rail under the search. Pass your own tabs for custom data. Default the Unicode groups; `false` hides it. */ categories?: EmojiCategoryTab[] | false; /** Skin tone button in the footer. Default true. */ skinToneSelector?: boolean; skinTone?: SkinTone; defaultSkinTone?: SkinTone; onSkinToneChange?: (tone: SkinTone) => void; /** A row of recently used emoji under the rail. Pass the localStorage key, or `false` to turn it off. Default "kc-emoji-recents". */ recentsKey?: string | false; maxRecents?: number; /** Footer with the emoji under the pointer or the keyboard. Default true. */ preview?: boolean; locale?: string; /** Custom emoji data, e.g. your own categories. Used as is, no version or flag filtering. */ resolveEmojiData?: EmojiDataResolver; /** Where the empty state says what to do. */ emptyHint?: string; /** Fill the height of the container (a sheet) instead of the fixed seven rows. */ fill?: boolean; className?: string; }; function CategoryRail() { const { categories, active, present, viewport } = usePicker(); const shown = categories.filter((c) => present.includes(c.id)); if (shown.length === 0) return null; return ( { const id = next[0]; if (!id) return; const tab = categories.find((c) => c.id === id); const el = viewport.current; if (!tab || !el) return; const target = Array.from(el.querySelectorAll("[frimousse-category]")).find((c) => c.textContent?.toLowerCase().includes(tab.match)); if (!target) return; const calm = window.matchMedia("(prefers-reduced-motion: reduce)").matches || document.documentElement.dataset.input === "keyboard"; el.scrollTo({ top: target.offsetTop, behavior: calm ? "auto" : "smooth" }); }} > {shown.map((c) => ( {c.icon ?? c.label.slice(0, 1)} ))} ); } function RecentsRow() { const { recents, pick } = usePicker(); if (recents.length === 0) return null; return (

Recent

{recents.map((r) => ( ))}

); } function Viewport({ emptyHint }: { emptyHint: string }) { const { viewport, categories, setActive, setPresent } = usePicker(); const measure = useCallback(() => { const el = viewport.current; if (!el) return; const headers = Array.from(el.querySelectorAll("[frimousse-category]")); const ids = headers.map((h) => categories.find((c) => h.textContent?.toLowerCase().includes(c.match))?.id ?? ""); const here = el.scrollTop + 4; let current: string | null = null; headers.forEach((h, i) => { if (ids[i] && h.offsetTop <= here) current = ids[i]; }); if (el.scrollTop > 0 && el.scrollTop + el.clientHeight >= el.scrollHeight - 2) current = [...ids].reverse().find(Boolean) ?? current; setActive(current ?? ids.find(Boolean) ?? null); setPresent(ids.filter(Boolean)); }, [viewport, categories, setActive, setPresent]); useEffect(() => { const el = viewport.current; if (!el) return; const mo = new MutationObserver(measure); mo.observe(el, { childList: true, subtree: true }); measure(); return () => mo.disconnect(); }, [viewport, measure]); return ( Loading emoji {({ search }) => ( <> No emoji for “{search}” {emptyHint} )} ); } function SkinToneButton() { return ( {({ skinTone, setSkinTone, skinToneVariations }) => } ); } function SkinToneControl({ tone, setTone, variations }: { tone: SkinTone; setTone: (t: SkinTone) => void; variations: { skinTone: SkinTone; emoji: string }[] }) { const picker = usePicker(); const at = Math.max(0, variations.findIndex((v) => v.skinTone === tone)); const next = variations[(at + 1) % variations.length]; return ( ); } function Footer({ skinToneSelector }: { skinToneSelector: boolean }) { return (

{({ emoji }) => emoji ? ( {emoji.emoji} {emoji.label} ) : ( Pick an emoji ) } {skinToneSelector ? ( ) : null}

); } /** * Emoji picker on frimousse (headless, virtualized, keyboard navigable) wearing Kobra tokens: a * Kobra Input for search, a Kobra toggle group as the category rail, recents and a skin tone button. * Inline by default; wrap it in `EmojiPickerPopover` to float it. */ export function EmojiPicker({ onEmojiSelect, size = "default", columns, search = true, categories = defaultEmojiCategories, skinToneSelector = true, skinTone, defaultSkinTone = "none", onSkinToneChange, recentsKey = "kc-emoji-recents", maxRecents, preview = true, locale, resolveEmojiData, emptyHint = "Try another word or clear the search.", fill = false, className, }: EmojiPickerProps) { const { px, columns: sizeColumns } = SIZES[size]; const root = useRef(null); const viewport = useRef(null); const auto = columns === "auto"; const [fit, setFit] = useState(sizeColumns); const cols = auto ? fit : (columns ?? sizeColumns); useEffect(() => { if (!auto) return; const el = root.current; if (!el) return; const ro = new ResizeObserver(([entry]) => { const width = entry.contentRect.width - 32; setFit(Math.max(5, Math.floor(width / px))); }); ro.observe(el); return () => ro.disconnect(); }, [auto, px]); const [tone, setTone] = useState(defaultSkinTone); const effectiveTone = skinTone ?? tone; const changeTone = useCallback( (next: SkinTone) => { setTone(next); onSkinToneChange?.(next); }, [onSkinToneChange], ); const { recents, push } = useEmojiRecents(recentsKey || "kc-emoji-recents", maxRecents ?? cols); const [active, setActive] = useState(null); const [present, setPresentState] = useState([]); const setPresent = useCallback((ids: string[]) => setPresentState((prev) => (prev.join() === ids.join() ? prev : ids)), []); const rail = useMemo(() => (categories === false ? NO_TABS : categories), [categories]); const pick = useCallback( (emoji: Emoji) => { if (recentsKey) push(emoji); onEmojiSelect?.(emoji); }, [onEmojiSelect, push, recentsKey], ); const ctx = useMemo( () => ({ viewport, categories: rail, active, present, setActive, setPresent, recents: recentsKey ? recents : EMPTY, pick, skinTone: effectiveTone, setSkinTone: changeTone }), [rail, active, present, setPresent, recents, recentsKey, pick, effectiveTone, changeTone], ); const searchProps = { render: } as unknown as ComponentProps<"input">; const width = auto ? undefined : `calc(${px}px * ${cols} + 2rem)`; return ( {search ? (

) : null} {preview || skinToneSelector ?