64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T7fbb,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, } from "react"; export type Faq = { q: string; a: string; category?: string }; export type SearchableFaqAccordionProps = { /** Question and answer pairs. Add a `category` to any entry to get topic chips. */ faqs?: Faq[]; searchPlaceholder?: string; /** Panel surface: "dark" (default) or "light". */ tone?: "dark" | "light"; /** Hex colour for highlights, chips and the focus ring. */ accent?: string; /** Indexes (into faqs) that start open. */ defaultOpen?: number[]; /** false = opening one answer closes the others. */ allowMultiple?: boolean; /** Read #anchors on load, show a copy-link button in each answer. */ deepLink?: boolean; /** Write the open answer's anchor to the URL hash when it opens (default off). */ syncHash?: boolean; /** Prefix for answer anchors, e.g. #faq-how-do-i-install-it. */ idPrefix?: string; /** Show the topic chips when the entries carry categories. */ showCategories?: boolean; /** Replaces the default width class (max-w-md). */ className?: string; }; const DEFAULT_FAQS: Faq[] = [ { q: "How do I install it?", a: "Copy the file into your project and import it. There is no package to add and no build step beyond what React and Tailwind already give you.", category: "Setup", }, { q: "Does it work with Next.js?", a: "Yes. It is a client component with no browser-only code at module scope, so it renders on the server and hydrates cleanly.", category: "Setup", }, { q: "Can I change the colors?", a: "Pass an accent color and choose a dark or light tone. The surface paints itself, so it does not depend on your theme tokens.", category: "Style", }, { q: "How do I add my own questions?", a: "Give it an array of question and answer pairs. Add a category to any entry and the topic chips appear on their own.", category: "Style", }, { q: "Is it keyboard friendly?", a: "Every question is a real button. Arrow keys move between questions, slash jumps to the search field and Escape clears it. Motion switches off when the system asks for less of it.", category: "Usage", }, { q: "Can I link to one answer?", a: "Yes. Each answer has its own anchor, so a link opens the page with that answer already expanded. Use the copy link button inside any open answer.", category: "Usage", }, ]; const NO_OPEN: number[] = []; const ACCENT_RE = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i; const ACCENT_DEFAULT = { dark: "#8aa0ff", light: "#3347d4" }; const slugify = (s: string) => s .toLowerCase() .replace(/[^a-z0-9]+/g, "-") .replace(/^-+|-+$/g, "") .slice(0, 48); const escapeRe = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); const CSS = ` .sfa{container-type:inline-size;--sfa-ring:var(--sfa-accent);font-family:inherit;text-align:left;-webkit-font-smoothing:antialiased} .sfa[data-tone="dark"]{--sfa-bg:#0b0c10;--sfa-text:#f2f3f6;--sfa-muted:rgba(232,236,246,.62);--sfa-faint:rgba(232,236,246,.38);--sfa-line:rgba(255,255,255,.08);--sfa-hover:rgba(255,255,255,.035);--sfa-open:rgba(255,255,255,.03);--sfa-field:rgba(255,255,255,.05);--sfa-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(255,255,255,.07),0 28px 70px -28px rgba(0,0,0,.85)} .sfa[data-tone="light"]{--sfa-bg:#ffffff;--sfa-text:#0f1222;--sfa-muted:rgba(15,18,34,.64);--sfa-faint:rgba(15,18,34,.42);--sfa-line:rgba(15,18,34,.09);--sfa-hover:rgba(15,18,34,.03);--sfa-open:rgba(15,18,34,.02);--sfa-field:rgba(15,18,34,.04);--sfa-shadow:0 0 0 1px rgba(15,18,34,.08),0 1px 2px rgba(15,18,34,.05),0 24px 56px -30px rgba(15,18,34,.28)} .sfa *{box-sizing:border-box} .sfa-surface{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;background:var(--sfa-bg);color:var(--sfa-text);box-shadow:var(--sfa-shadow)} .sfa-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(380px circle at var(--sfa-x,50%) var(--sfa-y,0%),color-mix(in srgb,var(--sfa-accent) 15%,transparent),transparent 72%)} @media (hover:hover){.sfa-surface:hover .sfa-glow{opacity:1}} .sfa-head{padding:14px 14px 10px} .sfa-field{display:flex;align-items:center;gap:10px;height:48px;padding:0 10px 0 14px;border-radius:14px;background:var(--sfa-field);box-shadow:inset 0 0 0 1px var(--sfa-line);transition:box-shadow .25s ease} .sfa-field:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sfa-accent) 65%,transparent),0 0 0 4px color-mix(in srgb,var(--sfa-accent) 16%,transparent)} .sfa-si{flex:none;width:16px;height:16px;color:var(--sfa-faint);transition:color .25s ease} .sfa-field:focus-within .sfa-si{color:var(--sfa-accent)} .sfa .sfa-input{flex:1;min-width:0;height:100%;padding:0;margin:0;border:0;background:transparent;color:var(--sfa-text);font:inherit;font-size:15px;letter-spacing:-.005em;outline:none!important;box-shadow:none;-webkit-appearance:none;appearance:none;border-radius:0!important} .sfa .sfa-input::placeholder{color:var(--sfa-faint);opacity:1} .sfa .sfa-input::-webkit-search-cancel-button,.sfa .sfa-input::-webkit-search-decoration{-webkit-appearance:none;display:none} .sfa-kbd{flex:none;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--sfa-faint);padding:5px 7px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--sfa-line);transition:opacity .2s ease} .sfa-field:focus-within .sfa-kbd{opacity:0} .sfa-x{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--sfa-muted);cursor:pointer;transition:background .2s ease,color .2s ease} .sfa-x:hover{background:var(--sfa-line);color:var(--sfa-text)} .sfa-x svg{width:14px;height:14px} .sfa-chipwrap{padding:0 14px 8px} .sfa-chips{position:relative;display:flex;gap:6px;padding:2px;margin:-2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .sfa-chips::-webkit-scrollbar{display:none} .sfa-ind{position:absolute;top:2px;left:0;height:32px;width:0;border-radius:999px;pointer-events:none;opacity:0;background:color-mix(in srgb,var(--sfa-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sfa-accent) 45%,transparent)} .sfa-ind[data-ready]{transition:transform .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1),opacity .2s ease} .sfa-chip{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;height:32px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--sfa-muted);font:inherit;font-size:12.5px;font-weight:500;letter-spacing:.005em;cursor:pointer;box-shadow:inset 0 0 0 1px var(--sfa-line);transition:color .2s ease,background .2s ease,transform .2s ease;-webkit-tap-highlight-color:transparent} .sfa-chip:hover{color:var(--sfa-text);background:var(--sfa-hover)} .sfa-chip:active{transform:scale(.96)} .sfa-chip[data-active="true"]{color:var(--sfa-text);box-shadow:none;background:transparent} .sfa-chip[data-dim="true"]{opacity:.45} .sfa-n{margin-left:7px;font-size:11px;font-variant-numeric:tabular-nums;opacity:.6} .sfa .sfa-chip:focus-visible,.sfa .sfa-link:focus-visible,.sfa .sfa-x:focus-visible,.sfa .sfa-copy:focus-visible,.sfa .sfa-empty-btn:focus-visible{outline:2px solid var(--sfa-ring)!important;outline-offset:2px!important;border-radius:999px} .sfa-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 18px 10px;min-height:34px} .sfa-count{margin:0;font-size:12px;color:var(--sfa-faint);font-variant-numeric:tabular-nums} .sfa-link{padding:4px 2px;border:0;background:transparent;color:var(--sfa-muted);font:inherit;font-size:12px;cursor:pointer;transition:color .2s ease} .sfa-link:hover{color:var(--sfa-accent)} .sfa-list{border-top:1px solid var(--sfa-line)} .sfa-item{position:relative;animation:sfa-in .44s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*34ms)} .sfa-item+.sfa-item{border-top:1px solid var(--sfa-line)} .sfa-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--sfa-accent);box-shadow:0 0 14px var(--sfa-accent);transform:scaleY(0);transform-origin:50% 50%;transition:transform .42s cubic-bezier(.32,.72,0,1)} .sfa-item[data-open="true"]::before{transform:scaleY(1)} .sfa-item[data-open="true"]{background:var(--sfa-open)} @keyframes sfa-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .sfa-h{margin:0;font:inherit} .sfa-trigger{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 16px 14px 18px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s ease;-webkit-tap-highlight-color:transparent} .sfa-trigger:hover{background:var(--sfa-hover)} .sfa .sfa-trigger:focus-visible{outline:2px solid var(--sfa-ring)!important;outline-offset:-2px!important;border-radius:0!important;background:var(--sfa-hover)} .sfa-q{flex:1;min-width:0;font-size:15px;font-weight:550;line-height:1.35;letter-spacing:-.01em;color:var(--sfa-text)} .sfa-tag{flex:none;display:none;font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--sfa-faint)} .sfa-tag[data-hit="true"]{display:inline-flex;align-items:center;gap:6px;color:var(--sfa-accent);letter-spacing:.06em} .sfa-tag[data-hit="true"]::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--sfa-accent)} @container (min-width:520px){.sfa-tag{display:inline-flex}} .sfa-icon{position:relative;flex:none;width:28px;height:28px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--sfa-line);color:var(--sfa-muted);transition:transform .5s cubic-bezier(.34,1.4,.64,1),background .3s ease,color .3s ease,box-shadow .3s ease} .sfa-icon i{position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:0;border-radius:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform .5s cubic-bezier(.34,1.4,.64,1)} .sfa-icon i+i{transform:translate(-50%,-50%) rotate(90deg)} .sfa-trigger:hover .sfa-icon{color:var(--sfa-text)} .sfa-item[data-open="true"] .sfa-icon{transform:rotate(180deg);color:var(--sfa-accent);background:color-mix(in srgb,var(--sfa-accent) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sfa-accent) 50%,transparent)} .sfa-item[data-open="true"] .sfa-icon i+i{transform:translate(-50%,-50%) rotate(0deg)} .sfa-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s cubic-bezier(.32,.72,0,1),visibility 0s linear .4s} .sfa-item[data-open="true"] .sfa-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .4s cubic-bezier(.32,.72,0,1),visibility 0s} .sfa-clip{min-height:0;overflow:hidden} .sfa-inner{padding:0 62px 18px 18px;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .3s cubic-bezier(.32,.72,0,1)} .sfa-item[data-open="true"] .sfa-inner{opacity:1;transform:none;transition:opacity .35s ease .08s,transform .45s cubic-bezier(.22,1,.36,1) .06s} .sfa-a{margin:0;max-width:62ch;font-size:14.5px;line-height:1.65;color:var(--sfa-muted)} .sfa-mark{padding:0 2px;margin:0 -1px;border-radius:4px;background:color-mix(in srgb,var(--sfa-accent) 28%,transparent);color:inherit;box-shadow:0 0 0 1px color-mix(in srgb,var(--sfa-accent) 22%,transparent);animation:sfa-mark .36s cubic-bezier(.22,1,.36,1) both} .sfa-q .sfa-mark{color:var(--sfa-text)} @keyframes sfa-mark{from{background-color:color-mix(in srgb,var(--sfa-accent) 60%,transparent)}} .sfa-copy{display:inline-flex;align-items:center;gap:7px;height:32px;margin-top:12px;padding:0 12px;border:0;border-radius:999px;background:var(--sfa-field);box-shadow:inset 0 0 0 1px var(--sfa-line);color:var(--sfa-muted);font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;-webkit-tap-highlight-color:transparent} .sfa-copy:hover{color:var(--sfa-text)} .sfa-copy:active{transform:scale(.96)} .sfa-copy[data-done="true"]{color:var(--sfa-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sfa-accent) 50%,transparent)} .sfa-copy svg{width:13px;height:13px} .sfa-empty{display:flex;flex-direction:column;align-items:center;padding:34px 24px 38px;text-align:center;animation:sfa-in .5s cubic-bezier(.22,1,.36,1) both} .sfa-art{width:84px;height:84px;margin-bottom:16px;color:var(--sfa-faint)} .sfa-art .sfa-orbit{transform-origin:42px 42px;animation:sfa-spin 28s linear infinite} .sfa-art .sfa-lens{animation:sfa-bob 4.2s ease-in-out infinite} @keyframes sfa-spin{to{transform:rotate(360deg)}} @keyframes sfa-bob{50%{transform:translate(2px,-3px)}} .sfa-empty-t{margin:0;font-size:15px;font-weight:550;letter-spacing:-.01em;color:var(--sfa-text);overflow-wrap:anywhere} .sfa-empty-s{margin:6px 0 0;max-width:34ch;font-size:13.5px;line-height:1.55;color:var(--sfa-muted)} .sfa-empty-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px} .sfa-empty-btn{height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--sfa-field);box-shadow:inset 0 0 0 1px var(--sfa-line);color:var(--sfa-text);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .2s ease} .sfa-empty-btn:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sfa-accent) 55%,transparent)} .sfa-empty-btn:active{transform:scale(.96)} .sfa-empty-btn[data-primary="true"]{background:color-mix(in srgb,var(--sfa-accent) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sfa-accent) 50%,transparent)} @media (hover:none),(pointer:coarse){ .sfa-kbd{display:none} .sfa .sfa-input{font-size:16px} .sfa-field{height:52px} .sfa-chip{height:40px} .sfa-ind{height:40px} .sfa-x{width:40px;height:40px} .sfa-link{min-height:40px;padding:0 4px} .sfa-copy{height:40px} .sfa-empty-btn{height:40px} .sfa-trigger{min-height:62px} } @container (max-width:380px){ .sfa-q{font-size:14.5px} .sfa-trigger{gap:10px;padding-left:14px;padding-right:12px} .sfa-inner{padding:0 14px 16px 14px} .sfa-head{padding:10px 10px 8px} .sfa-chipwrap{padding:0 10px 6px} .sfa-meta{padding:4px 14px 8px} } @media (prefers-reduced-motion:reduce){ .sfa *,.sfa *::before,.sfa *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important} .sfa-item[data-open="true"] .sfa-icon{transform:none} .sfa-item[data-open="true"] .sfa-icon i+i{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)} .sfa-inner{transform:none!important} } `; function Hl({ text, re }: { text: string; re: RegExp | null }) { if (!re) return <>{text}; const parts = text.split(re); return ( <> {parts.map((p, i) => i % 2 === 1 ? ( {p} ) : ( p ), )} ); } export function SearchableFaqAccordion({ faqs = DEFAULT_FAQS, searchPlaceholder = "Search questions", tone = "dark", accent, defaultOpen = NO_OPEN, allowMultiple = true, deepLink = true, syncHash = false, idPrefix = "faq", showCategories = true, className, }: SearchableFaqAccordionProps) { const uid = useId().replace(/[^a-zA-Z0-9]/g, ""); const rootRef = useRef(null); const inputRef = useRef(null); const chipsRef = useRef(null); const indRef = useRef(null); const copyTimer = useRef(0); const itemsRef = useRef<{ id: number; anchor: string }[]>([]); const [query, setQuery] = useState(""); const [cat, setCat] = useState(null); const [open, setOpen] = useState>( () => new Set(defaultOpen.filter((i) => i >= 0 && i < faqs.length)), ); const [copied, setCopied] = useState(null); const [announce, setAnnounce] = useState(""); const items = useMemo(() => { const seen = new Map(); return faqs.map((f, i) => { let s = slugify(f.q) || "question"; const n = seen.get(s) ?? 0; seen.set(s, n + 1); if (n > 0) s = s + "-" + (n + 1); return { ...f, id: i, anchor: idPrefix + "-" + s, hay: (f.q + " " + f.a + " " + (f.category ?? "")).toLowerCase(), qLow: f.q.toLowerCase(), }; }); }, [faqs, idPrefix]); const categories = useMemo(() => { const out: string[] = []; for (const it of items) if (it.category && !out.includes(it.category)) out.push(it.category); return out; }, [items]); const hasChips = showCategories && categories.length > 1; const activeCat = cat !== null && categories.includes(cat) ? cat : null; const terms = useMemo( () => Array.from(new Set(query.trim().toLowerCase().split(/\s+/).filter(Boolean))), [query], ); const re = useMemo( () => terms.length ? new RegExp("(" + [...terms].sort((a, b) => b.length - a.length).map(escapeRe).join("|") + ")", "gi") : null, [terms], ); const textMatches = useMemo(() => items.filter((it) => terms.every((t) => it.hay.includes(t))), [items, terms]); const visible = activeCat === null ? textMatches : textMatches.filter((it) => it.category === activeCat); const catCount = (c: string) => textMatches.filter((it) => it.category === c).length; const chipSig = String(activeCat) + "|" + categories.map((c) => c + ":" + textMatches.filter((it) => it.category === c).length).join("|") + "|" + textMatches.length + "|" + hasChips; const accentColor = accent && ACCENT_RE.test(accent) ? accent : ACCENT_DEFAULT[tone === "light" ? "light" : "dark"]; const vars = { "--sfa-accent": accentColor } as CSSProperties; useEffect(() => { itemsRef.current = items; }, [items]); useEffect( () => () => { window.clearTimeout(copyTimer.current); }, [], ); // Deep links: open the answer named by the URL hash, now and on hashchange. useEffect(() => { if (!deepLink) return; const apply = () => { let h = ""; try { h = decodeURIComponent(window.location.hash.slice(1)); } catch { return; } const it = itemsRef.current.find((x) => x.anchor === h); if (!it) return; setQuery(""); setCat(null); setOpen((prev) => (allowMultiple ? new Set(prev).add(it.id) : new Set([it.id]))); requestAnimationFrame(() => { const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; document.getElementById(it.anchor)?.scrollIntoView({ block: "nearest", behavior: reduce ? "auto" : "smooth" }); }); }; const raf = requestAnimationFrame(apply); window.addEventListener("hashchange", apply); return () => { cancelAnimationFrame(raf); window.removeEventListener("hashchange", apply); }; }, [deepLink, allowMultiple]); // Sliding chip indicator, placed in layout pixels. useEffect(() => { const wrap = chipsRef.current; const ind = indRef.current; if (!wrap || !ind || !hasChips) return; const place = () => { const btn = wrap.querySelector('[data-active="true"]'); if (!btn) { ind.style.opacity = "0"; return; } ind.style.opacity = "1"; ind.style.width = btn.offsetWidth + "px"; ind.style.transform = "translateX(" + btn.offsetLeft + "px)"; }; place(); const raf = requestAnimationFrame(() => { ind.setAttribute("data-ready", ""); const btn = wrap.querySelector('[data-active="true"]'); if (btn && wrap.scrollWidth > wrap.clientWidth + 1) { const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; wrap.scrollTo({ left: btn.offsetLeft - (wrap.clientWidth - btn.offsetWidth) / 2, behavior: reduce ? "auto" : "smooth" }); } }); const ro = new ResizeObserver(place); ro.observe(wrap); return () => { cancelAnimationFrame(raf); ro.disconnect(); }; }, [chipSig, hasChips]); const toggle = (id: number, anchor: string) => { const willOpen = !open.has(id); setOpen((prev) => { if (!allowMultiple) return prev.has(id) ? new Set() : new Set([id]); const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); if (deepLink && syncHash) { try { const base = window.location.pathname + window.location.search; window.history.replaceState(null, "", willOpen ? base + "#" + anchor : base); } catch { /* history can be unavailable in sandboxed frames */ } } }; const allOpen = visible.length > 0 && visible.every((it) => open.has(it.id)); const toggleAll = () => { setOpen((prev) => { const next = new Set(prev); for (const it of visible) { if (allOpen) next.delete(it.id); else next.add(it.id); } return next; }); }; const copyLink = async (id: number, anchor: string) => { const url = window.location.origin + window.location.pathname + window.location.search + "#" + anchor; try { await navigator.clipboard.writeText(url); setCopied(id); setAnnounce("Link copied"); } catch { setCopied(id); setAnnounce("Link: " + url); } window.clearTimeout(copyTimer.current); copyTimer.current = window.setTimeout(() => { setCopied(null); setAnnounce(""); }, 1800); }; const onSurfaceMove = (e: ReactPointerEvent) => { if (e.pointerType === "touch") return; const el = e.currentTarget; const r = el.getBoundingClientRect(); const k = r.width ? el.offsetWidth / r.width : 1; el.style.setProperty("--sfa-x", ((e.clientX - r.left) * k).toFixed(1) + "px"); el.style.setProperty("--sfa-y", ((e.clientY - r.top) * k).toFixed(1) + "px"); }; const onRootKey = (e: ReactKeyboardEvent) => { if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return; const t = e.target as HTMLElement; if (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) return; e.preventDefault(); inputRef.current?.focus(); inputRef.current?.select(); }; const onListKey = (e: ReactKeyboardEvent) => { const t = e.target as HTMLElement; if (!t.hasAttribute("data-sfa-trigger")) return; if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return; const list = Array.from(rootRef.current?.querySelectorAll("[data-sfa-trigger]") ?? []); const i = list.indexOf(t); e.preventDefault(); if (e.key === "ArrowUp" && i <= 0) { inputRef.current?.focus(); return; } const n = e.key === "ArrowDown" ? i + 1 : e.key === "ArrowUp" ? i - 1 : e.key === "Home" ? 0 : list.length - 1; list[Math.max(0, Math.min(n, list.length - 1))]?.focus(); }; const onInputKey = (e: ReactKeyboardEvent) => { if (e.key === "Escape") { if (query) { e.preventDefault(); setQuery(""); } else { e.currentTarget.blur(); } } else if (e.key === "ArrowDown") { const first = rootRef.current?.querySelector("[data-sfa-trigger]"); if (first) { e.preventDefault(); first.focus(); } } }; const clearAll = () => { setQuery(""); setCat(null); inputRef.current?.focus(); }; const total = items.length; const status = visible.length === total ? total + (total === 1 ? " question" : " questions") : visible.length + " of " + total + (total === 1 ? " question" : " questions"); const shown = query.trim().length > 30 ? query.trim().slice(0, 30) + "…" : query.trim(); return (

{hasChips && (

{["All", ...categories].map((c, i) => { const isAll = i === 0; const active = isAll ? activeCat === null : activeCat === c; const n = isAll ? textMatches.length : catCount(c); return ( ); })}

)}

{total === 0 ? "No questions" : status}

{allowMultiple && visible.length > 1 && ( )}

{visible.length === 0 ? (

{total === 0 ? ( <>

No questions yet

Pass an array of question and answer pairs to fill this list.

) : ( <>

{shown ? "Nothing matches “" + shown + "”" : "Nothing in this topic"}

Check the spelling, try fewer words, or browse a topic instead.

{categories.slice(0, 3).map((c) => ( ))}

)}

) : ( visible.map((it, idx) => { const isOpen = open.has(it.id); const panelId = uid + "-panel-" + it.id; const triggerId = uid + "-trigger-" + it.id; const answerOnly = terms.length > 0 && !terms.every((t) => it.qLow.includes(t)); return (

{deepLink && ( )}

); }) )}

{announce}

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"components/viberdy/searchable-faq-accordion.tsx","content":"$65","type":"registry:component","target":"components/viberdy/searchable-faq-accordion.tsx"}],"className":"h-[70svh] min-h-80"}]]}]