blume 1.3.1 → 1.4.1

package/src/components/islands/ask-ai.tsx

@@ -5,13 +5,8 @@ import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import { createPortal } from "react-dom";
 
 import type { UIStrings } from "../../core/i18n-ui.ts";
-import { joinBase, prefixBase, stripBase } from "./base-path.ts";
-
-interface ChatMessage {
-  content: string;
-  id: number;
-  role: "assistant" | "user";
-}
+import { joinBase, prefixBase } from "./base-path.ts";
+import { useAskAI } from "./hooks.ts";
 
 /** A resolved empty-state prompt; `icon` is ready-to-inline SVG (or null). */
 interface Suggestion {
@@ -57,20 +52,10 @@ const DEFAULT_ASK: UIStrings["ask"] = {
   you: "You",
 };
 
-let idCounter = 0;
-const nextId = (): number => {
-  idCounter += 1;
-  return idCounter;
-};
-
-// The endpoint and page path both honor the deployment `base` so grounding works
-// under a non-root base path (the server matches base-less document routes).
+// The endpoint honors the deployment `base` so grounding works under a
+// non-root base path (the server matches base-less document routes).
 const DEFAULT_ASK_ENDPOINT = joinBase(import.meta.env.BASE_URL, "api/ask");
 
-/** The current route with the deployment base stripped, for page-context lookup. */
-const currentPath = (): string =>
-  stripBase(import.meta.env.BASE_URL, window.location.pathname);
-
 // GitHub-flavored markdown with soft line breaks, matching how the docs read.
 marked.setOptions({ breaks: true, gfm: true });
 
@@ -149,20 +134,20 @@ const AskAI = ({
   const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
   const [input, setInput] = useState("");
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [busy, setBusy] = useState(false);
+  // The streaming client — request shaping, optimistic assistant bubble,
+  // stale-stream/abort guards, error-body handling — is the public useAskAI
+  // hook, so the built-in panel and custom UIs share one implementation.
+  const {
+    ask,
+    loading: busy,
+    messages,
+    reset,
+  } = useAskAI({ endpoint, errorMessage: t.error });
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
   // Where focus came from when the panel opened, restored on close.
   const returnFocusRef = useRef<HTMLElement | null>(null);
-  // The stream writes into the conversation via functional updates, so "Clear
-  // conversation" mid-answer must revoke the in-flight stream's right to write
-  // — otherwise its next chunk re-appends the assistant bubble onto the
-  // emptied list as an orphaned answer. Clearing bumps the generation (stale
-  // streams stop writing) and aborts the request (the stream stops arriving).
-  const abortRef = useRef<AbortController | null>(null);
-  const generationRef = useRef(0);
 
   // Portal target (document.body) only exists after mount; guards SSR. The
   // one-time false→true flip is deliberate, so the initial `false` is required.
@@ -245,86 +230,22 @@ const AskAI = ({
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
   }, [messages]);
 
-  const runQuestion = async (raw: string) => {
+  const runQuestion = (raw: string) => {
     const question = raw.trim();
     if (!question || busy) {
       return;
     }
-
-    const userMessage: ChatMessage = {
-      content: question,
-      id: nextId(),
-      role: "user",
-    };
-    const history = [...messages, userMessage];
-    const assistant: ChatMessage = {
-      content: "",
-      id: nextId(),
-      role: "assistant",
-    };
-    setMessages([...history, assistant]);
+    void ask(question);
     setInput("");
-    setBusy(true);
-    const generation = generationRef.current;
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    try {
-      const response = await fetch(endpoint, {
-        body: JSON.stringify({
-          messages: history.map((m) => ({ content: m.content, role: m.role })),
-          page: { path: currentPath() },
-        }),
-        headers: { "content-type": "application/json" },
-        method: "POST",
-        signal: controller.signal,
-      });
-      // A 4xx/5xx still has a body; without this guard its error text would be
-      // decoded and shown as the assistant's answer instead of the error notice.
-      if (!(response.ok && response.body)) {
-        throw new Error(`Ask AI request failed (${response.status}).`);
-      }
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      let done = false;
-      while (!done) {
-        // oxlint-disable-next-line no-await-in-loop, react-doctor/async-await-in-loop -- sequential stream consumption; iterations are not independent
-        const chunk = await reader.read();
-        ({ done } = chunk);
-        if (chunk.value) {
-          // Streaming mode: a multi-byte UTF-8 sequence split across chunks
-          // must not flush as U+FFFD garbage.
-          // oxlint-disable-next-line react/react-compiler -- local streaming accumulator, spread into state below
-          assistant.content += decoder.decode(chunk.value, { stream: true });
-          if (generationRef.current === generation) {
-            setMessages((current) => [
-              ...current.slice(0, -1),
-              { ...assistant },
-            ]);
-          }
-        }
-      }
-    } catch {
-      // A cleared (aborted) stream must not resurrect its bubble as an error.
-      if (generationRef.current === generation) {
-        // oxlint-disable-next-line react/react-compiler -- local streaming accumulator, spread into state below
-        assistant.content = t.error;
-        setMessages((current) => [...current.slice(0, -1), { ...assistant }]);
-      }
-    } finally {
-      setBusy(false);
-    }
   };
 
   const clearConversation = () => {
-    generationRef.current += 1;
-    abortRef.current?.abort();
-    setMessages([]);
+    reset();
   };
 
   const onSubmit = (event: FormEvent) => {
     event.preventDefault();
-    void runQuestion(input);
+    runQuestion(input);
   };
 
   const onInputKeyDown = (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
@@ -336,7 +257,7 @@ const AskAI = ({
       !event.nativeEvent.isComposing
     ) {
       event.preventDefault();
-      void runQuestion(input);
+      runQuestion(input);
     }
   };
 
@@ -398,16 +319,20 @@ const AskAI = ({
       >
         {hasMessages ? (
           <div className="flex flex-col gap-4 p-4">
-            {messages.map((message) =>
+            {/* Index keys are safe here: the list only appends, mutates its
+                last entry while streaming, or clears wholesale on reset. */}
+            {messages.map((message, index) =>
               message.role === "user" ? (
                 <div
                   className="max-w-[85%] self-end whitespace-pre-wrap rounded-blume bg-muted px-3 py-2 text-foreground text-sm"
-                  key={message.id}
+                  // oxlint-disable-next-line react/no-array-index-key -- append-only list, see above
+                  key={index}
                 >
                   {message.content}
                 </div>
               ) : (
-                <div className={ANSWER_CLASS} key={message.id}>
+                // oxlint-disable-next-line react/no-array-index-key -- append-only list, see above
+                <div className={ANSWER_CLASS} key={index}>
                   {message.content ? (
                     // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized above
                     <div

package/src/components/islands/hooks.ts

@@ -144,6 +144,12 @@ const DEFAULT_ASK_ENDPOINT = joinBase(import.meta.env.BASE_URL, "api/ask");
 export interface UseAskAIOptions {
   /** Existing Ask AI endpoint; defaults to Blume's generated `/api/ask`. */
   endpoint?: string;
+  /**
+   * Shown as the assistant's answer when the request fails or throws.
+   * Defaults to an English notice; the built-in island passes its localized
+   * dictionary string.
+   */
+  errorMessage?: string;
 }
 
 /** Shown as the assistant's answer when the request fails or throws. */
@@ -159,6 +165,7 @@ const currentPath = (): string =>
  */
 export const useAskAI = (options: UseAskAIOptions = {}): UseAskAI => {
   const endpoint = options.endpoint ?? DEFAULT_ASK_ENDPOINT;
+  const errorMessage = options.errorMessage ?? ASK_ERROR;
   const [messages, setMessages] = useState<AskMessage[]>([]);
   const [loading, setLoading] = useState(false);
   // The stream writes into the conversation via state updates, so `reset()`
@@ -205,7 +212,7 @@ export const useAskAI = (options: UseAskAIOptions = {}): UseAskAI => {
           // An error body (JSON, HTML error page) must not stream in as the
           // assistant's answer.
           if (live()) {
-            assistant.content = ASK_ERROR;
+            assistant.content = errorMessage;
             setMessages([...history, { ...assistant }]);
           }
           return;
@@ -236,7 +243,7 @@ export const useAskAI = (options: UseAskAIOptions = {}): UseAskAI => {
         // pre-appended empty assistant message as a stuck placeholder. A
         // reset's abort lands here too — the guard keeps it silent.
         if (live()) {
-          assistant.content = ASK_ERROR;
+          assistant.content = errorMessage;
           setMessages([...history, { ...assistant }]);
         }
       } finally {
@@ -245,7 +252,7 @@ export const useAskAI = (options: UseAskAIOptions = {}): UseAskAI => {
         }
       }
     },
-    [endpoint, loading, messages]
+    [endpoint, errorMessage, loading, messages]
   );
 
   // Retained for the compiler-off opt-out path (`react: { compiler: false }`):

package/src/components/layout/LanguageSwitcher.astro

@@ -26,7 +26,8 @@ const menuRowClass =
         class={`${iconButton} list-none [&::-webkit-details-marker]:hidden`}
       >
         <Icon name="globe" size={16} />
-        <span class="max-sm:hidden">{current?.label ?? label}</span>
+        {/* Collapses to the globe icon below `lg`, matching the search field. */}
+        <span class="max-lg:hidden">{current?.label ?? label}</span>
         <Icon
           class="transition-transform group-open:rotate-180"
           name="chevron-down"

package/src/components/layout/Logo.astro

@@ -36,7 +36,7 @@ const brandText = logo?.text ?? site.title;
     logoSvg && (
       <span
         aria-hidden="true"
-        class="inline-flex h-5 items-center [&>svg]:h-5 [&>svg]:w-auto"
+        class="inline-flex h-5 shrink-0 items-center [&>svg]:h-5 [&>svg]:w-auto"
         set:html={logoSvg}
       />
     )
@@ -47,7 +47,7 @@ const brandText = logo?.text ?? site.title;
       (logoLight === logoDark ? (
         <img
           alt={logoAlt}
-          class="h-5 w-auto"
+          class="h-5 w-auto shrink-0"
           height={logoLightDimensions?.height}
           src={withBase(logoLight)}
           width={logoLightDimensions?.width}
@@ -56,14 +56,14 @@ const brandText = logo?.text ?? site.title;
         <>
           <img
             alt={logoAlt}
-            class="h-5 w-auto dark:hidden"
+            class="h-5 w-auto shrink-0 dark:hidden"
             height={logoLightDimensions?.height}
             src={withBase(logoLight)}
             width={logoLightDimensions?.width}
           />
           <img
             alt={logoAlt}
-            class="hidden h-5 w-auto dark:block"
+            class="hidden h-5 w-auto shrink-0 dark:block"
             height={logoDarkDimensions?.height}
             src={withBase(logoDark)}
             width={logoDarkDimensions?.width}

package/src/components/layout/PageActions.astro

@@ -44,14 +44,19 @@ const LOGOS: Record<string, string> = {
   v0: '<svg class="size-4 shrink-0" fill="currentColor" viewBox="0 0 147 70" xmlns="http://www.w3.org/2000/svg"><path d="M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z"/><path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z"/></svg>',
 };
 
+// Brand names stay verbatim; the surrounding "Open in" phrase localizes via
+// the `actions.openIn` template.
 const PROVIDERS = [
-  { key: "v0", label: "Open in v0" },
-  { key: "chatgpt", label: "Open in ChatGPT" },
-  { key: "claude", label: "Open in Claude" },
-  { key: "t3", label: "Open in T3 Chat" },
-  { key: "scira", label: "Open in Scira" },
-  { key: "cursor", label: "Open in Cursor" },
-];
+  { key: "v0", name: "v0" },
+  { key: "chatgpt", name: "ChatGPT" },
+  { key: "claude", name: "Claude" },
+  { key: "t3", name: "T3 Chat" },
+  { key: "scira", name: "Scira" },
+  { key: "cursor", name: "Cursor" },
+].map((provider) => ({
+  ...provider,
+  label: a.openIn.replace("{name}", provider.name),
+}));
 
 // Top-level actions match the ToC links: flat, no background/padding, color
 // shift on hover only.

package/src/components/layout/RootLayout.astro

@@ -847,122 +847,50 @@ const bannerKey = banner?.dismissible ? banner.key : null;
         pre.appendChild(button);
       }
 
-      // Click-to-zoom for content images (gated by `markdown.imageZoom`).
-      // Enhances every `.prose img` so plain Markdown images open in a lightbox.
+      // Click-to-zoom for content images (gated by `markdown.imageZoom`),
+      // via medium-zoom: ESC/scroll/click dismissal, natural-size capping,
+      // and the open/close transition races are its problem, not ours.
       // Opt out per-image with `data-no-zoom`.
-      const zoomImages: Iterable<HTMLImageElement> =
-        document.body.hasAttribute("data-blume-image-zoom")
-          ? document.querySelectorAll<HTMLImageElement>(
-              ".prose img:not([data-no-zoom])"
-            )
-          : [];
-      const zoomTargets = Array.from(zoomImages);
-      if (zoomTargets.length > 0) {
-        const reduceMotion = window.matchMedia(
-          "(prefers-reduced-motion: reduce)"
-        ).matches;
-        let active: {
-          clone: HTMLImageElement;
-          original: HTMLImageElement;
-          overlay: HTMLElement;
-        } | null = null;
-
-        const closeZoom = () => {
-          if (!active) {
-            return;
-          }
-          const { clone, original, overlay } = active;
-          active = null;
-          overlay.style.opacity = "0";
-          clone.style.transform = "translate(0px, 0px) scale(1)";
-          const cleanup = () => {
-            overlay.remove();
-            original.style.visibility = "";
-            document.removeEventListener("keydown", onKey);
-            window.removeEventListener("scroll", closeZoom);
-          };
-          if (reduceMotion) {
-            cleanup();
-          } else {
-            clone.addEventListener("transitionend", cleanup, { once: true });
-          }
-        };
-
-        const onKey = (event: KeyboardEvent) => {
-          if (event.key === "Escape") {
-            closeZoom();
-          }
-        };
-
-        const openZoom = (image: HTMLImageElement) => {
-          if (active) {
-            return;
-          }
-          const start = image.getBoundingClientRect();
-          if (start.width === 0 || start.height === 0) {
-            return;
-          }
-
-          const overlay = document.createElement("div");
-          overlay.className =
-            "fixed inset-0 z-[100] flex cursor-zoom-out items-center justify-center bg-background/80 opacity-0 backdrop-blur-sm transition-opacity duration-300";
-
-          const clone = image.cloneNode(true) as HTMLImageElement;
-          clone.className = "absolute m-0 max-w-none rounded-blume shadow-2xl";
-          clone.style.top = `${start.top}px`;
-          clone.style.left = `${start.left}px`;
-          clone.style.width = `${start.width}px`;
-          clone.style.height = `${start.height}px`;
-          clone.style.transformOrigin = "top left";
-          if (!reduceMotion) {
-            clone.style.transition =
-              "transform 300ms cubic-bezier(0.22, 1, 0.36, 1)";
-          }
-
-          overlay.appendChild(clone);
-          document.body.appendChild(overlay);
-          image.style.visibility = "hidden";
-          active = { clone, original: image, overlay };
-
-          const margin = 0.92;
-          const ratio = start.width / start.height;
-          let targetWidth = window.innerWidth * margin;
-          let targetHeight = targetWidth / ratio;
-          if (targetHeight > window.innerHeight * margin) {
-            targetHeight = window.innerHeight * margin;
-            targetWidth = targetHeight * ratio;
-          }
-          const naturalWidth = image.naturalWidth || targetWidth;
-          if (targetWidth > naturalWidth) {
-            targetWidth = naturalWidth;
-            targetHeight = targetWidth / ratio;
-          }
-          const scale = targetWidth / start.width;
-          const dx = (window.innerWidth - targetWidth) / 2 - start.left;
-          const dy = (window.innerHeight - targetHeight) / 2 - start.top;
-
-          requestAnimationFrame(() => {
-            overlay.style.opacity = "1";
-            clone.style.transform = `translate(${dx}px, ${dy}px) scale(${scale})`;
-          });
-
-          overlay.addEventListener("click", closeZoom);
-          document.addEventListener("keydown", onKey);
-          window.addEventListener("scroll", closeZoom, { passive: true });
-        };
-
-        for (const image of zoomTargets) {
+      if (document.body.hasAttribute("data-blume-image-zoom")) {
+        const zoomTargets = Array.from(
+          document.querySelectorAll<HTMLImageElement>(
+            ".prose img:not([data-no-zoom])"
+          )
           // An image that is itself a link navigates on click — binding zoom
           // to it would flash a zoom overlay in the instant before navigation
           // and advertise (via the cursor) a zoom that never happens.
-          if (image.closest("a")) {
-            continue;
-          }
-          image.classList.add("cursor-zoom-in");
-          image.addEventListener("click", () => openZoom(image));
+        ).filter((image) => !image.closest("a"));
+        if (zoomTargets.length > 0) {
+          // Lazy: pages without a zoomable image never load the library,
+          // matching how mermaid is only fetched on pages with a diagram.
+          const { default: mediumZoom } = await import("medium-zoom");
+          mediumZoom(zoomTargets, {
+            background:
+              "color-mix(in oklab, var(--color-background) 80%, transparent)",
+            margin: 24,
+          });
         }
       }
     </script>
+    <style is:global>
+      /* medium-zoom ships no z-index; lift the lightbox above the chrome
+         (header/sidebar) the way the previous z-[100] overlay sat. */
+      .medium-zoom-overlay {
+        backdrop-filter: blur(4px);
+        z-index: 100;
+      }
+      .medium-zoom-image--opened {
+        z-index: 101;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        /* html prefix outranks the library's injected rules regardless of
+           insertion order; its transition declarations carry !important. */
+        html .medium-zoom-image,
+        html .medium-zoom-overlay {
+          transition: none !important;
+        }
+      }
+    </style>
     <WebMcp />
   </body>
 </html>

package/src/components/layout/Search.astro

@@ -2,7 +2,7 @@
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { Navigation } from "../../core/types.ts";
-import { resolveIcon } from "../../theme/icons.ts";
+import { resolvePopularIconMarkup } from "../../search/popular-icon.ts";
 import Icon from "../Icon.astro";
 import { flattenPages } from "./nav-utils.ts";
 
@@ -28,23 +28,15 @@ const { askEnabled = false, navigation, popularPages, strings, locale } =
 // default, matching the pattern PageActions uses for its own dictionary.
 const s = { ...EN_UI.search, ...strings };
 
-// Icons resolve to inline SVG here (`theme/icons.ts` is a server-only module —
-// far too large to ship to the browser), so the island gets ready-to-render
-// markup rather than a name it can't resolve. Same approach as AskAI.astro.
-// A name outside the set falls through to the island's own file glyph.
-const iconSvg = (name: string | undefined): string | undefined => {
-  const resolved = name ? resolveIcon(name) : null;
-  return resolved
-    ? `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="${resolved.viewBox}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${resolved.body}</svg>`
-    : undefined;
-};
-
-// Pages shown in the empty state, before the user has typed anything. Only
-// curated entries carry an icon; sidebar-derived rows keep the file glyph.
+// Resolve popular icons to markup here (icon set is server-only). Unknown
+// names fall through to the island's file glyph.
 const popular =
   popularPages && popularPages.length > 0
     ? popularPages.map((page) => ({
-        icon: iconSvg(page.icon),
+        icon: resolvePopularIconMarkup(
+          page.icon,
+          import.meta.env.BASE_URL ?? "/"
+        ),
         label: page.label,
         route: page.route,
       }))
@@ -68,15 +60,18 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
   data-i18n-results={s.results}
   data-locale={locale || undefined}
 >
+  {/* The label and shortcut hint wait until `lg`: below it the hamburger and
+      inline tab bar share the header row, and a full-width search field would
+      press into the language switcher. */}
   <button
     aria-label={s.button}
-    class="inline-flex h-9 cursor-pointer items-center gap-2 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground sm:min-w-48"
+    class="inline-flex h-9 cursor-pointer items-center gap-2 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground lg:min-w-48"
     data-blume-search-open
     type="button"
   >
     <Icon name="search" size={16} />
-    <span class="flex-1 text-start max-sm:hidden">{s.button}</span>
-    <kbd class="font-mono text-[0.7rem] max-sm:hidden" data-blume-search-kbd
+    <span class="flex-1 text-start max-lg:hidden">{s.button}</span>
+    <kbd class="font-mono text-[0.7rem] max-lg:hidden" data-blume-search-kbd
       >⌘K</kbd
     >
   </button>
@@ -176,11 +171,9 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
   <script>
     import { chromeIcons as icons } from "../../theme/chrome-icons.ts";
     import { prefixBase } from "../islands/base-path.ts";
-    import {
-      escapeHtml,
-      highlight,
-      matchSnippet,
-    } from "./search/types.ts";
+    import { escape as escapeHtml } from "html-escaper";
+
+    import { highlight, matchSnippet } from "./search/types.ts";
     import type { SearchFn, SearchHit } from "./search/types.ts";
 
     interface Selectable {
@@ -626,8 +619,8 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         const href = prefixBase(import.meta.env.BASE_URL, url);
         el.href = href;
         el.className = ROW_CLASS;
-        // `icon` is server-resolved markup from the bundled icon set, not
-        // author HTML — the label still goes through `escapeHtml`.
+        // `icon` is server-resolved markup (built-in Lucide, `<img>`, or
+        // config-authored inline SVG) — the label still goes through `escapeHtml`.
         el.innerHTML = `
           <span class="mt-0.5 shrink-0 text-muted-foreground">${icon ?? svg("file")}</span>
           <span class="flex-1">

package/src/components/layout/search/orama.ts

@@ -23,7 +23,9 @@ export const createSearch = async (opts: {
   const db = await buildOramaIndex(documents, opts.locale);
 
   return async (query, options) => {
-    const docs = await queryOramaIndex(db, query, RESULT_POOL, options?.locale);
+    const docs = await queryOramaIndex(db, query, RESULT_POOL, {
+      locale: options?.locale,
+    });
     return buildResult(docs as IndexedDocument[], query, options?.section);
   };
 };

package/src/components/layout/search/types.ts

@@ -1,3 +1,5 @@
+import { escape } from "html-escaper";
+
 /** A single result rendered in the search dialog. */
 export interface SearchHit {
   url: string;
@@ -51,21 +53,9 @@ export const SEARCH_LIMIT = 12;
  */
 export const RESULT_POOL = 48;
 
-const HTML_ESCAPES: Record<string, string> = {
-  '"': "&quot;",
-  "&": "&amp;",
-  "'": "&#39;",
-  "<": "&lt;",
-  ">": "&gt;",
-};
-const HTML_CHARS = /["&'<>]/gu;
 const REGEXP_SPECIAL = /[$()*+.?[\\\]^{|}]/gu;
 const WORD_BREAK = /\s+/u;
 
-/** Escape HTML so untrusted text renders literally inside the dialog. */
-export const escapeHtml = (text: string): string =>
-  text.replaceAll(HTML_CHARS, (char) => HTML_ESCAPES[char] ?? char);
-
 /** Split a query into escaped, non-empty search tokens. */
 const queryTokens = (query: string): string[] =>
   query
@@ -83,15 +73,13 @@ const queryTokens = (query: string): string[] =>
 export const highlight = (text: string, query: string): string => {
   const tokens = queryTokens(query);
   if (tokens.length === 0) {
-    return escapeHtml(text);
+    return escape(text);
   }
   const pattern = new RegExp(`(${tokens.join("|")})`, "giu");
   return text
     .split(pattern)
     .map((segment, index) =>
-      index % 2 === 1
-        ? `<mark>${escapeHtml(segment)}</mark>`
-        : escapeHtml(segment)
+      index % 2 === 1 ? `<mark>${escape(segment)}</mark>` : escape(segment)
     )
     .join("");
 };