Palette

1"use client";
2 
3import * as React from "react";
4import "./palette.css";
5import { smoothScrollTo } from "@/components/moco/hooks";
6 
7export interface IndexEntry {
8  kind: "post" | "page" | "section";
9  label: string;
10  href?: string;
11  id?: string;
12}
13 
14export interface PaletteProps {
15  index: IndexEntry[];
16  /** Headings scraped into the index each time the palette opens. */
17  sectionSelector?: string;
18  /** Called for entries with an href. Defaults to a full navigation. */
19  onNavigate?: (href: string) => void;
20}
21 
22/** Subsequence match. Returns matched character indices, or null. */
23function fuzzy(needle: string, hay: string): number[] | null {
24  if (!needle) return [];
25  const h = hay.toLowerCase();
26  const n = needle.toLowerCase();
27  const hits: number[] = [];
28  let i = 0;
29  for (const ch of n) {
30    const at = h.indexOf(ch, i);
31    if (at === -1) return null;
32    hits.push(at);
33    i = at + 1;
34  }
35  return hits;
36}
37 
38function Highlighted({ text, hits }: { text: string; hits: number[] }) {
39  const set = new Set(hits);
40  return (
41    <span>
42      {text.split("").map((c, i) => (set.has(i) ? <mark key={i}>{c}</mark> : <span key={i}>{c}</span>))}
43    </span>
44  );
45}
46 
47/** ⌘K / Ctrl-K. Traps focus while open, restores it on close. */
48export function Palette({
49  index,
50  sectionSelector = ".prose h2[id]",
51  onNavigate,
52}: PaletteProps) {
53  const [open, setOpen] = React.useState(false);
54  const [q, setQ] = React.useState("");
55  const [sel, setSel] = React.useState(0);
56  const [sections, setSections] = React.useState<IndexEntry[]>([]);
57  const restore = React.useRef<HTMLElement | null>(null);
58  const input = React.useRef<HTMLInputElement>(null);
59  const box = React.useRef<HTMLDivElement>(null);
60 
61  React.useEffect(() => {
62    const onKey = (e: KeyboardEvent) => {
63      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
64        e.preventDefault();
65        setOpen((v) => !v);
66      }
67    };
68    document.addEventListener("keydown", onKey);
69    return () => document.removeEventListener("keydown", onKey);
70  }, []);
71 
72  React.useEffect(() => {
73    if (!open) {
74      restore.current?.focus();
75      return;
76    }
77    restore.current = document.activeElement as HTMLElement;
78    setQ("");
79    setSel(0);
80    setSections(
81      Array.from(document.querySelectorAll<HTMLElement>(sectionSelector)).map((h) => ({
82        kind: "section" as const,
83        label: h.textContent ?? "",
84        id: h.id,
85      })),
86    );
87// … truncated