npm - blume - Versions diffs - 1.4.1 → 1.4.3 - Mend

blume 1.4.1 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/CHANGELOG.md +64 -0
package/dist/cli/index.js +700 -579
package/dist/cli/index.js.map +57 -56
package/dist/types/core/base-path.d.ts +8 -0
package/dist/types/core/config-input.d.ts +8 -0
package/dist/types/core/data.d.ts +10 -0
package/dist/types/core/schema.d.ts +4 -0
package/dist/types/core/sources/types.d.ts +9 -1
package/dist/types/openapi/references.d.ts +8 -2
package/docs/configuration/ai.mdx +41 -9
package/docs/content/sources.mdx +1 -1
package/package.json +17 -7
package/src/ai/agent-readability.ts +3 -2
package/src/ai/api-catalog.ts +2 -2
package/src/ai/ask-context.ts +45 -12
package/src/ai/link-headers.ts +7 -2
package/src/ai/llms.ts +2 -1
package/src/ai/mcp/discovery.ts +25 -6
package/src/ai/mcp/server.ts +108 -98
package/src/ai/tar.ts +29 -70
package/src/astro/examples.ts +7 -3
package/src/astro/generate.ts +63 -34
package/src/astro/islands.ts +7 -3
package/src/astro/templates.ts +36 -9
package/src/audit/agent.ts +14 -29
package/src/audit/crawl.ts +41 -16
package/src/audit/run.ts +10 -3
package/src/audit/snapshot.ts +27 -2
package/src/cli/commands/audit.ts +12 -17
package/src/cli/commands/build.ts +15 -7
package/src/cli/commands/dev.ts +13 -15
package/src/cli/commands/eject.ts +4 -4
package/src/cli/commands/eval.ts +17 -27
package/src/cli/env.ts +13 -30
package/src/cli/init/scaffold.ts +21 -0
package/src/cli/report-format.ts +22 -0
package/src/components/content/AccordionItem.astro +2 -9
package/src/components/content/ColorItem.astro +5 -13
package/src/components/content/Component.astro +12 -8
package/src/components/content/Frame.astro +2 -12
package/src/components/content/Prompt.astro +12 -31
package/src/components/content/Tab.astro +2 -9
package/src/components/content/Tooltip.astro +1 -9
package/src/components/content/Update.astro +2 -9
package/src/components/content/inline-markdown.ts +28 -0
package/src/components/copy-feedback.ts +96 -0
package/src/components/islands/ask-ai.tsx +78 -9
package/src/components/layout/PageActions.astro +20 -32
package/src/components/layout/PageLayout.astro +8 -28
package/src/components/layout/RootLayout.astro +47 -48
package/src/components/layout/Search.astro +56 -9
package/src/components/layout/drawer-inert.ts +31 -0
package/src/components/layout/search/pagefind.ts +6 -5
package/src/components/layout/search/types.ts +32 -0
package/src/components/openapi/panel.ts +11 -8
package/src/components/raf-throttle.ts +21 -0
package/src/components/slug.ts +14 -0
package/src/core/base-path.ts +18 -1
package/src/core/config-input.ts +8 -0
package/src/core/data.ts +7 -0
package/src/core/frontmatter.ts +45 -1
package/src/core/probe.ts +7 -19
package/src/core/project-graph.ts +12 -1
package/src/core/schema.ts +6 -0
package/src/core/site-url.ts +27 -0
package/src/core/sources/cache.ts +10 -8
package/src/core/sources/github-releases.ts +21 -1
package/src/core/sources/normalize.ts +26 -2
package/src/core/sources/notion.ts +27 -5
package/src/core/sources/portable-text.ts +16 -1
package/src/core/sources/resolve.ts +1 -0
package/src/core/sources/types.ts +13 -1
package/src/deploy/cloudflare-negotiation.ts +15 -1
package/src/deploy/robots.ts +2 -1
package/src/deploy/rss.ts +2 -1
package/src/deploy/sitemap.ts +56 -7
package/src/eval/agents.ts +13 -10
package/src/eval/report.ts +1 -14
package/src/markdown/package-commands.ts +61 -54
package/src/og/card.ts +24 -26
package/src/openapi/model.ts +9 -9
package/src/openapi/parse.ts +69 -28
package/src/openapi/references.ts +35 -12
package/src/openapi/render-mdx.ts +64 -25
package/src/openapi/scalar.ts +2 -2
package/src/openapi/source.ts +28 -1
package/src/search/documents.ts +78 -34
package/src/search/orama-index.ts +51 -12
package/src/theme/palette.ts +6 -2
package/src/translate/ledger.ts +4 -2
package/src/translate/report.ts +1 -14
package/src/translate/run.ts +20 -35
package/src/cli/coalesce.ts +0 -43

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

@@ -1,10 +1,11 @@
 import DOMPurify from "dompurify";
-import { marked } from "marked";
+import { Marked } from "marked";
 import { useEffect, useRef, useState } from "react";
 import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import { createPortal } from "react-dom";
 import type { UIStrings } from "../../core/i18n-ui.ts";
+import { copyText } from "../copy-feedback.ts";
 import { joinBase, prefixBase } from "./base-path.ts";
 import { useAskAI } from "./hooks.ts";
@@ -57,12 +58,15 @@ const DEFAULT_ASK: UIStrings["ask"] = {
 const DEFAULT_ASK_ENDPOINT = joinBase(import.meta.env.BASE_URL, "api/ask");
 // GitHub-flavored markdown with soft line breaks, matching how the docs read.
-marked.setOptions({ breaks: true, gfm: true });
-// The model cites pages as base-less logical routes (`[Title](/route)`); rewrite
-// link targets to served URLs so citations resolve under `deployment.base`.
-// `prefixBase` leaves external URLs and fragments untouched and is idempotent.
-marked.use({
+// A dedicated instance, not the shared `marked` singleton: `setOptions`/`use`
+// on the singleton would leak `breaks` and the link rewriter into any other
+// consumer of `marked` on the page (user components included).
+const markdown = new Marked({
+  breaks: true,
+  gfm: true,
+  // The model cites pages as base-less logical routes (`[Title](/route)`); rewrite
+  // link targets to served URLs so citations resolve under `deployment.base`.
+  // `prefixBase` leaves external URLs and fragments untouched and is idempotent.
   walkTokens: (token) => {
     if (token.type === "link") {
       token.href = prefixBase(import.meta.env.BASE_URL, token.href);
@@ -71,7 +75,7 @@ marked.use({
 });
 const renderMarkdown = (content: string): string =>
-  DOMPurify.sanitize(marked.parse(content, { async: false }));
+  DOMPurify.sanitize(markdown.parse(content, { async: false }));
 const Glyph = ({ path, size = 16 }: { path: string; size?: number }) => (
   <svg
@@ -146,6 +150,8 @@ const AskAI = ({
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  // The portaled panel root, excluded from the overlay-mode inert sweep.
+  const panelRef = useRef<HTMLElement>(null);
   // Where focus came from when the panel opened, restored on close.
   const returnFocusRef = useRef<HTMLElement | null>(null);
@@ -225,6 +231,68 @@ const AskAI = ({
     };
   }, [open]);
+  // Below the desktop dock breakpoint the open panel is a full-width overlay,
+  // so Tab must not escape into the page it covers: every other child of
+  // <body> (the panel portals to body) turns inert until close. The desktop
+  // dock keeps the page interactive on purpose — it's a non-modal side panel,
+  // so no sweep runs at ≥1024px. Elements that were already inert are left
+  // alone so closing doesn't accidentally re-enable them.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const media = window.matchMedia("(min-width: 1024px)");
+    let inerted: Element[] = [];
+    const release = () => {
+      for (const el of inerted) {
+        el.removeAttribute("inert");
+      }
+      inerted = [];
+    };
+    const apply = () => {
+      release();
+      if (media.matches) {
+        return;
+      }
+      inerted = [...document.body.children].filter(
+        (el) => el !== panelRef.current && !el.hasAttribute("inert")
+      );
+      for (const el of inerted) {
+        el.setAttribute("inert", "");
+      }
+    };
+    apply();
+    // The sweep snapshots body's children at open time, but overlays keep
+    // arriving afterwards — medium-zoom's backdrop, a mermaid render, another
+    // island's portal all append to <body> — and an unswept latecomer is a
+    // tab stop hiding behind the overlay. Fold additions into the sweep for
+    // as long as it is active.
+    const observer = new MutationObserver((records) => {
+      if (media.matches) {
+        return;
+      }
+      for (const record of records) {
+        for (const node of record.addedNodes) {
+          if (
+            node instanceof HTMLElement &&
+            node !== panelRef.current &&
+            !node.hasAttribute("inert")
+          ) {
+            node.setAttribute("inert", "");
+            inerted.push(node);
+          }
+        }
+      }
+    });
+    observer.observe(document.body, { childList: true });
+    media.addEventListener("change", apply);
+    return () => {
+      observer.disconnect();
+      media.removeEventListener("change", apply);
+      release();
+    };
+  }, [open]);
   // Keep the newest message in view as it streams in.
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
@@ -265,7 +333,7 @@ const AskAI = ({
     const text = messages
       .map((m) => `${m.role === "user" ? t.you : t.ai}: ${m.content}`)
       .join("\n\n");
-    void navigator.clipboard?.writeText(text);
+    void copyText(text);
   };
   const hasMessages = messages.length > 0;
@@ -274,6 +342,7 @@ const AskAI = ({
     <aside
       aria-hidden={open ? undefined : "true"}
       aria-label={t.title}
+      ref={panelRef}
       // The closed panel is only translated off-screen; `inert` drops its
       // buttons/textarea from the tab order and the accessibility tree.
       inert={!open}

package/src/components/layout/PageActions.astro CHANGED Viewed

@@ -224,7 +224,9 @@ const menuRowClass =
 </div>
 <script>
+  import { copyText, flashLabel } from "../copy-feedback.ts";
   import { prefixBase } from "../islands/base-path.ts";
+  import { rafThrottle } from "../raf-throttle.ts";
   const CHAT_URLS: Record<string, (q: string) => string> = {
     chatgpt: (q) => `https://chatgpt.com/?hints=search&prompt=${q}`,
@@ -318,12 +320,17 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
         placeMenu(details);
       });
     }
-    window.addEventListener("resize", () => {
-      const open = dropdowns.find((details) => details.open);
-      if (open) {
-        placeMenu(open);
-      }
-    });
+    // rAF-coalesced so a live resize drag re-reads layout once per frame,
+    // not once per event, while the open menu still tracks the viewport.
+    window.addEventListener(
+      "resize",
+      rafThrottle(() => {
+        const open = dropdowns.find((details) => details.open);
+        if (open) {
+          placeMenu(open);
+        }
+      })
+    );
     // `data-md` is the base-less logical route; the raw-markdown endpoint is a
     // generated page route, so it's served under the deployment base like any
@@ -376,24 +383,9 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
           `vscode:mcp/install?${encodeURIComponent(JSON.stringify({ name: id, type: "http", url: mcpUrl }))}`
         );
-      const flash = (el: Element | null, text: string) => {
-        if (!(el instanceof HTMLElement)) {
-          return;
-        }
-        // Remember the element's own (localized) label once — capturing it at
-        // click time would capture "Copied!" on a double-click and stick.
-        el.dataset.blumeLabel ??= el.textContent ?? "";
-        el.textContent = text;
-        setTimeout(() => {
-          el.textContent = el.dataset.blumeLabel ?? "";
-        }, 1500);
-      };
       const copy = async (value: string, el: Element | null) => {
-        try {
-          await navigator.clipboard.writeText(value);
-          flash(el, copiedLabel);
-        } catch {
-          // Clipboard unavailable; nothing to do.
+        if ((await copyText(value)) && el instanceof HTMLElement) {
+          flashLabel(el, copiedLabel);
         }
       };
       root
@@ -420,9 +412,6 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
     }
     const label = root.querySelector("[data-blume-copy-label]");
-    // Captured once — inside the handler a double-click would capture and
-    // permanently restore "Copied!".
-    const original = label?.textContent ?? "";
     root
       .querySelector("[data-blume-copy-page]")
       ?.addEventListener("click", async () => {
@@ -431,12 +420,11 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
           if (!response.ok) {
             throw new Error(`Fetching ${md} failed (${response.status})`);
           }
-          await navigator.clipboard.writeText(await response.text());
-          if (label) {
-            label.textContent = copiedLabel;
-            setTimeout(() => {
-              label.textContent = original;
-            }, 1500);
+          if (
+            (await copyText(await response.text())) &&
+            label instanceof HTMLElement
+          ) {
+            flashLabel(label, copiedLabel);
           }
         } catch (error) {
           // Clipboard or fetch unavailable; don't flash "Copied!" untruthfully.

package/src/components/layout/PageLayout.astro CHANGED Viewed

@@ -152,9 +152,13 @@ const basedRoute = withBase(route);
 // strip it before joining with the root-relative route so canonical/og URLs
 // don't come out double-slashed — the catch-all strips it the same way.
 const siteBase = siteUrl ? siteUrl.replace(/\/$/u, "") : null;
+// The route-derived part is percent-encoded (the sitemap convention) so a
+// Unicode route slug yields a legal URI that byte-matches the sitemap <loc>.
 const resolvedCanonical =
   canonical ??
-  (siteBase ? `${siteBase}${basedRoute === "/" ? "" : basedRoute}` : null);
+  (siteBase
+    ? `${siteBase}${basedRoute === "/" ? "" : encodeURI(basedRoute)}`
+    : null);
 // An explicit `ogImage` wins. A root-relative path (e.g. an image dropped in
 // `public/`) is resolved against the site URL so crawlers get an absolute
 // `og:image`; an already-absolute URL passes through untouched. Otherwise fall
@@ -164,7 +168,7 @@ const absolutizeOgImage = (value: string): string =>
 const resolvedOgImage = ogImage
   ? absolutizeOgImage(ogImage)
   : ogEnabled && siteBase
-    ? `${siteBase}${withBase(`/og/${ogSlug}.png`)}`
+    ? `${siteBase}${encodeURI(withBase(`/og/${ogSlug}.png`))}`
     : null;
 // Only the generated card has a known size and format, so its dimensions are
 // declared for crawlers; a user-supplied `ogImage` could be any image.
@@ -305,36 +309,12 @@ const bannerKey = banner?.dismissible ? banner.key : null;
       )
     }
     <script>
+      import { syncDrawerInert } from "./drawer-inert.ts";
       // Dev-only: friendly hint after a React island hydration mismatch;
       // tree-shaken out of production builds.
       import "./hydration-hint.ts";
-      // The closed tabs drawer is only translated off-canvas, so its links
-      // would stay in the tab order. Mirror the header's `data-blume-nav-open`
-      // toggle into `inert`/`aria-hidden` below `lg` (64rem), matching the
-      // breakpoint where the drawer is display-hidden anyway.
-      const drawer = document.querySelector<HTMLElement>(
-        "[data-blume-nav-drawer]"
-      );
-      if (drawer) {
-        const desktop = window.matchMedia("(min-width: 64rem)");
-        const syncDrawer = () => {
-          const hidden =
-            !desktop.matches &&
-            !document.documentElement.hasAttribute("data-blume-nav-open");
-          drawer.inert = hidden;
-          if (hidden) {
-            drawer.setAttribute("aria-hidden", "true");
-          } else {
-            drawer.removeAttribute("aria-hidden");
-          }
-        };
-        syncDrawer();
-        desktop.addEventListener("change", syncDrawer);
-        new MutationObserver(syncDrawer).observe(document.documentElement, {
-          attributeFilter: ["data-blume-nav-open"],
-        });
-      }
+      syncDrawerInert();
     </script>
   </body>
 </html>

package/src/components/layout/RootLayout.astro CHANGED Viewed

@@ -117,6 +117,14 @@ interface Props {
   exportPdf?: boolean;
   exportEpub?: boolean;
   feeds?: { title: string; href: string }[];
+  /**
+   * Which agent-discovery resources exist, advertised as `describedby` head
+   * links on every page — so an agent entering on a deep page (a search
+   * result, a shared link) finds the machine-readable surface without probing
+   * the site root. The HTML counterpart of the homepage-only HTTP `Link`
+   * header (see `ai/link-headers.ts`).
+   */
+  discovery?: { agentReadability: boolean; llmsTxt: boolean } | null;
   siteUrl?: string | null;
   pageType?: string;
   published?: string | Date | null;
@@ -198,6 +206,7 @@ const {
   exportPdf,
   exportEpub,
   feeds,
+  discovery,
   siteUrl,
   pageType,
   published,
@@ -312,6 +321,15 @@ const formattedLastModified =
       ).format(lastModifiedDate)
     : null;
+// This page's raw-Markdown mirror, advertised as a `text/markdown` alternate
+// in the head. Content routes always have one (see `markdownRoutePaths`, which
+// serves the same `route === "/" ? "/index.md" : "<route>.md"` mapping as the
+// PageActions menu); the generated changelog index — the only "bare" page — is
+// not a content route and has none.
+const markdownMirror = isBare
+  ? null
+  : withBase(page.route === "/" ? "/index.md" : `${page.route}.md`);
 // The hosted MCP server's absolute URL, used by the page-actions install menu.
 // Needs a configured site to be useful, so the menu is hidden without one.
 const mcpUrl =
@@ -428,6 +446,29 @@ const bannerKey = banner?.dismissible ? banner.key : null;
         />
       ))
     }
+    {/* Agent discovery on every page, not just the root: an agent that enters
+        on a deep page (a search result, a shared link) never sees the homepage
+        HTTP Link header, so the head carries the same describedby links plus
+        this page's own raw-Markdown mirror. Both rels are IANA-registered. */}
+    {
+      discovery?.agentReadability && (
+        <link
+          href={withBase("/agent-readability.json")}
+          rel="describedby"
+          type="application/json"
+        />
+      )
+    }
+    {
+      discovery?.llmsTxt && (
+        <link href={withBase("/llms.txt")} rel="describedby" type="text/plain" />
+      )
+    }
+    {
+      markdownMirror && (
+        <link href={markdownMirror} rel="alternate" type="text/markdown" />
+      )
+    }
     {
       structuredDataJson && (
         <script
@@ -671,6 +712,8 @@ const bannerKey = banner?.dismissible ? banner.key : null;
       type="button"
     ></button>
     <script>
+      import { copyText, createCopyFlash } from "../copy-feedback.ts";
+      import { syncDrawerInert } from "./drawer-inert.ts";
       import { chromeIcons as icons } from "../../theme/chrome-icons.ts";
       // Registers the <blume-mermaid> custom element (emitted by ```mermaid
       // fences). Mermaid itself is lazy-loaded only on pages that use a diagram.
@@ -682,32 +725,7 @@ const bannerKey = banner?.dismissible ? banner.key : null;
       // Tree-shaken out of production builds.
       import "./hydration-hint.ts";
-      // The closed mobile drawer is only translated off-canvas, so its links
-      // would stay in the tab order on every page. Mirror the header's
-      // `data-blume-nav-open` toggle into `inert`/`aria-hidden` — but only
-      // below `lg` (64rem), where the same element isn't the static sidebar.
-      const drawer = document.querySelector<HTMLElement>(
-        "[data-blume-nav-drawer]"
-      );
-      if (drawer) {
-        const desktop = window.matchMedia("(min-width: 64rem)");
-        const syncDrawer = () => {
-          const hidden =
-            !desktop.matches &&
-            !document.documentElement.hasAttribute("data-blume-nav-open");
-          drawer.inert = hidden;
-          if (hidden) {
-            drawer.setAttribute("aria-hidden", "true");
-          } else {
-            drawer.removeAttribute("aria-hidden");
-          }
-        };
-        syncDrawer();
-        desktop.addEventListener("change", syncDrawer);
-        new MutationObserver(syncDrawer).observe(document.documentElement, {
-          attributeFilter: ["data-blume-nav-open"],
-        });
-      }
+      syncDrawerInert();
       const svg = (name: string, cls = "") =>
         `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"${cls ? ` class="${cls}"` : ""}>${icons[name]}</svg>`;
@@ -726,14 +744,6 @@ const bannerKey = banner?.dismissible ? banner.key : null;
       const copiedLabel =
         document.body.getAttribute("data-i18n-copied") || "Copied!";
-      // Shared polite live region: the icon swap is invisible to screen
-      // readers, so copy success is announced here. Cleared when a button's
-      // checked state resets so the next copy re-announces.
-      const copyStatus = document.createElement("span");
-      copyStatus.className = "sr-only";
-      copyStatus.setAttribute("aria-live", "polite");
-      document.body.appendChild(copyStatus);
       const languageLabels: Record<string, string> = {
         astro: "Astro",
         bash: "Bash",
@@ -813,7 +823,7 @@ const bannerKey = banner?.dismissible ? banner.key : null;
             button.classList.toggle(cls, !checked);
           }
         };
-        let resetTimeout: number | undefined;
+        const flash = createCopyFlash(setChecked, copiedLabel);
         button.addEventListener("click", async () => {
           const code = pre.querySelector("code");
           let text = code?.textContent ?? "";
@@ -829,20 +839,9 @@ const bannerKey = banner?.dismissible ? banner.key : null;
             }
             text = clone.textContent ?? "";
           }
-          try {
-            await navigator.clipboard.writeText(text);
-          } catch {
-            return;
-          }
-          if (resetTimeout) {
-            window.clearTimeout(resetTimeout);
+          if (await copyText(text)) {
+            flash();
           }
-          setChecked(true);
-          copyStatus.textContent = copiedLabel;
-          resetTimeout = window.setTimeout(() => {
-            setChecked(false);
-            copyStatus.textContent = "";
-          }, 1500);
         });
         pre.appendChild(button);
       }

package/src/components/layout/Search.astro CHANGED Viewed

@@ -86,11 +86,15 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
     >
       <Icon name="search" size={18} />
       <input
+        aria-autocomplete="list"
+        aria-controls="blume-search-listbox"
+        aria-expanded="false"
         aria-label={s.label}
         autocomplete="off"
         class="flex-1 border-0 bg-transparent text-foreground text-sm pointer-coarse:text-base focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
         data-blume-search-input
         placeholder={s.placeholder}
+        role="combobox"
         type="search"
       />
       <kbd class={`${kbd} text-[0.7rem]`}>Esc</kbd>
@@ -107,8 +111,11 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         >
         </div>
         <div
+          aria-label={s.label}
           class="min-h-0 flex-1 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent overflow-y-auto p-2"
           data-blume-search-results
+          id="blume-search-listbox"
+          role="listbox"
         >
         </div>
         <p
@@ -207,6 +214,26 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
     const svg = (name: string, size = 16): string =>
       `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${icons[name] ?? ""}</svg>`;
+    // localStorage access throws SecurityError when storage is blocked (Safari
+    // "Block All Cookies", some embedded webviews). These guards make blocked
+    // storage degrade to session-default preferences instead of throwing inside
+    // connectedCallback before the open/keyboard listeners are attached — which
+    // would leave search completely dead.
+    const readStorage = (key: string): string | null => {
+      try {
+        return localStorage.getItem(key);
+      } catch {
+        return null;
+      }
+    };
+    const writeStorage = (key: string, value: string): void => {
+      try {
+        localStorage.setItem(key, value);
+      } catch {
+        // Preference simply isn't remembered.
+      }
+    };
     class BlumeSearch extends HTMLElement {
       dialog!: HTMLDialogElement;
       input!: HTMLInputElement;
@@ -226,6 +253,8 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       selectedIndex = -1;
       activeSection: string | null = null;
       renderGeneration = 0;
+      /** Monotonic id source for option rows (aria-activedescendant). */
+      optionSeq = 0;
       previewOn = true;
       devOnlyMsg = "Search is available in the production build.";
       noResultsMsg = "No results found.";
@@ -273,8 +302,7 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
           this.popular = [];
         }
-        this.previewOn =
-          localStorage.getItem("blume-search-preview") !== "0";
+        this.previewOn = readStorage("blume-search-preview") !== "0";
         this.applyPreviewState();
         // Per-language filtering: default to the active locale, with an opt-in
@@ -283,12 +311,11 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
           "[data-blume-search-all-locales]"
         );
         if (allToggle) {
-          this.allLocales =
-            localStorage.getItem("blume-search-all-locales") === "1";
+          this.allLocales = readStorage("blume-search-all-locales") === "1";
           allToggle.checked = this.allLocales;
           allToggle.addEventListener("change", () => {
             this.allLocales = allToggle.checked;
-            localStorage.setItem(
+            writeStorage(
               "blume-search-all-locales",
               this.allLocales ? "1" : "0"
             );
@@ -568,7 +595,13 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         header.className =
           "m-0 px-2.5 pt-3 pb-1 font-normal text-muted-foreground text-xs";
         header.textContent = label;
+        // The listbox tree allows only group/option descendants: the group
+        // carries the label for assistive tech, the visual header is
+        // decoration.
+        header.setAttribute("aria-hidden", "true");
         const container = document.createElement("div");
+        container.setAttribute("role", "group");
+        container.setAttribute("aria-label", label);
         this.results.append(header, container);
         return container;
       }
@@ -632,6 +665,13 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       }
       bindRow(item: Selectable) {
+        // Options for the combobox pattern: selection is announced through
+        // aria-activedescendant on the input (focus never leaves it), so
+        // every row needs a stable id and an aria-selected to flip.
+        item.el.setAttribute("role", "option");
+        item.el.setAttribute("aria-selected", "false");
+        this.optionSeq += 1;
+        item.el.id = `blume-search-option-${this.optionSeq}`;
         item.el.addEventListener("mouseenter", () => {
           this.selectIndex(this.selectables.indexOf(item));
         });
@@ -644,9 +684,14 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       }
       finishRender() {
+        this.input.setAttribute(
+          "aria-expanded",
+          String(this.selectables.length > 0)
+        );
         if (this.selectables.length > 0) {
           this.selectIndex(0);
         } else {
+          this.input.removeAttribute("aria-activedescendant");
           this.clearPreview();
         }
       }
@@ -659,11 +704,16 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         if (current) {
           current.el.classList.remove(...ROW_ON);
           current.el.classList.add(...ROW_OFF);
+          current.el.setAttribute("aria-selected", "false");
         }
         this.selectedIndex = index;
         const next = this.selectables[index];
         next.el.classList.remove(...ROW_OFF);
         next.el.classList.add(...ROW_ON);
+        next.el.setAttribute("aria-selected", "true");
+        // Focus stays on the input; the selection is surfaced to assistive
+        // tech through the active descendant.
+        this.input.setAttribute("aria-activedescendant", next.el.id);
         next.el.scrollIntoView({ block: "nearest" });
         this.updatePreview();
       }
@@ -714,10 +764,7 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       togglePreview() {
         this.previewOn = !this.previewOn;
-        localStorage.setItem(
-          "blume-search-preview",
-          this.previewOn ? "1" : "0"
-        );
+        writeStorage("blume-search-preview", this.previewOn ? "1" : "0");
         this.applyPreviewState();
         this.updatePreview();
       }

package/src/components/layout/drawer-inert.ts ADDED Viewed

@@ -0,0 +1,31 @@
+/**
+ * Keep the mobile nav drawer out of the tab order while it is closed. The
+ * closed drawer is only translated off-canvas, so its links would otherwise
+ * stay focusable on every page. Mirrors the header's `data-blume-nav-open`
+ * toggle into `inert`/`aria-hidden` — but only below `lg` (64rem), where the
+ * same element isn't the static sidebar (RootLayout) or is display-hidden
+ * anyway (PageLayout). Shared by both layouts' inline scripts.
+ */
+export const syncDrawerInert = (): void => {
+  const drawer = document.querySelector<HTMLElement>("[data-blume-nav-drawer]");
+  if (!drawer) {
+    return;
+  }
+  const desktop = window.matchMedia("(min-width: 64rem)");
+  const sync = () => {
+    const hidden =
+      !desktop.matches &&
+      !Object.hasOwn(document.documentElement.dataset, "blumeNavOpen");
+    drawer.inert = hidden;
+    if (hidden) {
+      drawer.setAttribute("aria-hidden", "true");
+    } else {
+      drawer.removeAttribute("aria-hidden");
+    }
+  };
+  sync();
+  desktop.addEventListener("change", sync);
+  new MutationObserver(sync).observe(document.documentElement, {
+    attributeFilter: ["data-blume-nav-open"],
+  });
+};

package/src/components/layout/search/pagefind.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { highlight, SEARCH_LIMIT } from "./types.ts";
+import { highlight, sanitizeExcerpt, SEARCH_LIMIT } from "./types.ts";
 import type { SearchFn } from "./types.ts";
 interface PagefindResult {
@@ -28,16 +28,17 @@ export const createSearch = async (opts: {
     /* @vite-ignore */
     opts.url
   )) as PagefindModule;
-  // Pagefind builds its own marked-up excerpt; we keep that and only highlight
-  // the title. It carries no section/breadcrumb data, so pills stay hidden and
-  // the preview pane falls back to the excerpt.
+  // Pagefind builds its own marked-up excerpt; we keep its `<mark>` highlights
+  // (dropping any other markup — the excerpt is rendered via innerHTML) and
+  // only highlight the title ourselves. It carries no section/breadcrumb data,
+  // so pills stay hidden and the preview pane falls back to the excerpt.
   return async (query) => {
     const response = await pagefind.search(query);
     const docs = await Promise.all(
       response.results.slice(0, SEARCH_LIMIT).map((result) => result.data())
     );
     const hits = docs.map((doc) => ({
-      excerpt: doc.excerpt,
+      excerpt: sanitizeExcerpt(doc.excerpt),
       title: highlight(doc.meta?.title ?? doc.url, query),
       url: doc.url,
     }));