Sybil-2/web/src/components/search/search-match-label.tsx

/// <reference lib="es2022.intl" />
import { useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";

const words = /[\p{L}\p{N}\p{M}\p{Co}]+/gu;
const fold = (text: string) => text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });

export function SearchMatchLabel({ text: source, query }: { text: string; query: string }) {
  const text = source.replace(/\s+/gu, " ").trim();
  const containerRef = useRef<HTMLSpanElement>(null);
  const measureRef = useRef<HTMLSpanElement>(null);
  const ellipsisRef = useRef<HTMLSpanElement>(null);
  const [kept, setKept] = useState<number | null>(null);
  const boundaries = useMemo(() => [0, ...Array.from(graphemes.segment(text), ({ index, segment }) => index + segment.length)], [text]);
  const runs = useMemo(() => {
    const terms = (query.match(words) ?? []).map(fold).filter(Boolean);
    const result: Array<{ start: number; end: number; match: boolean }> = [];
    let cursor = 0;
    for (const word of text.matchAll(words)) {
      if (word.index > cursor) result.push({ start: cursor, end: word.index, match: false });
      cursor = word.index + word[0].length;
      result.push({ start: word.index, end: cursor, match: terms.some((term) => fold(word[0]).startsWith(term)) });
    }
    if (cursor < text.length) result.push({ start: cursor, end: text.length, match: false });
    return result;
  }, [text, query]);

  const renderRange = (start: number, end: number) => runs.flatMap((run) => {
    const value = text.slice(Math.max(start, run.start), Math.min(end, run.end));
    if (run.end <= start || run.start >= end) return [];
    return [run.match
      ? <strong key={`${start}:${run.start}`} className="font-semibold text-violet-100/95">{value}</strong>
      : <span key={`${start}:${run.start}`}>{value}</span>];
  });

  useLayoutEffect(() => {
    const container = containerRef.current;
    const measure = measureRef.current;
    const ellipsis = ellipsisRef.current;
    if (!container || !measure || !ellipsis) return;
    let disposed = false;
    const update = () => {
      if (disposed) return;
      const width = container.getBoundingClientRect().width;
      if (measure.getBoundingClientRect().width <= width) { setKept(null); return; }
      // Measure the styled DOM, including bold runs, instead of guessing a
      // character limit. Grapheme boundaries keep accents and emoji intact.
      const nodes = Array.from(measure.children, (child) => child.firstChild as Text);
      const range = document.createRange();
      const measureRange = (start: number, end: number) => {
        if (start >= end) return 0;
        let offset = 0;
        let started = false;
        for (const node of nodes) {
          const next = offset + node.length;
          if (!started && start <= next) { range.setStart(node, start - offset); started = true; }
          if (end <= next) { range.setEnd(node, end - offset); break; }
          offset = next;
        }
        return range.getBoundingClientRect().width;
      };
      const count = boundaries.length - 1;
      const ellipsisWidth = ellipsis.getBoundingClientRect().width;
      let low = 0;
      let high = count - 1;
      while (low < high) {
        const middle = Math.ceil((low + high) / 2);
        const prefix = boundaries[Math.ceil(middle / 2)];
        const suffix = boundaries[count - Math.floor(middle / 2)];
        if (measureRange(0, prefix) + ellipsisWidth + measureRange(suffix, text.length) <= width - 1) low = middle;
        else high = middle - 1;
      }
      setKept(low);
    };
    update();
    const observer = new ResizeObserver(update);
    observer.observe(container);
    void document.fonts.ready.then(update);
    document.fonts.addEventListener("loadingdone", update);
    return () => { disposed = true; observer.disconnect(); document.fonts.removeEventListener("loadingdone", update); };
  }, [text, runs, boundaries]);

  const count = boundaries.length - 1;
  const truncated = kept !== null && kept < count;
  return (
    <span ref={containerRef} title={text} className="relative col-start-2 block min-w-0 overflow-hidden whitespace-nowrap text-xs leading-5 text-secondary-foreground/75">
      <span className="sr-only">{text}</span>
      <span aria-hidden="true">
        {truncated ? <>{renderRange(0, boundaries[Math.ceil(kept / 2)])}…{renderRange(boundaries[count - Math.floor(kept / 2)], text.length)}</> : renderRange(0, text.length)}
      </span>
      <span aria-hidden="true" className="pointer-events-none invisible absolute left-0 top-0 whitespace-pre">
        <span ref={measureRef}>{renderRange(0, text.length)}</span><span ref={ellipsisRef}>…</span>
      </span>
    </span>
  );
}