blume 1.4.2 → 1.5.0

package/src/components/layout/PageLayout.astro

@@ -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

@@ -8,6 +8,7 @@ import type {
   Heading,
   LocaleSwitchOption,
   Navigation,
+  NavSelector as NavSelectorType,
 } from "../../core/types.ts";
 import "blume:theme";
 import type { ComponentOverride } from "../../core/define-components.ts";
@@ -46,6 +47,7 @@ import PageActions from "./PageActions.astro";
 import PageFeedback from "./PageFeedback.astro";
 import Pagination from "./Pagination.astro";
 import TableOfContents from "./TableOfContents.astro";
+import VersionBanner from "./VersionBanner.astro";
 
 interface Props {
   site: { title: string; description?: string };
@@ -149,6 +151,16 @@ interface Props {
   xDefault?: string | null;
   /** Language-switcher entries for the current page. */
   localeSwitch?: LocaleSwitchOption[];
+  /** Auto-populated version switcher (`null` when versioning is off or a user selector owns it). */
+  versionSelector?: NavSelectorType | null;
+  /** Old-version notice for archived pages (`null` on current-docs pages). */
+  versionNotice?: {
+    message: string;
+    latestHref: string;
+    latestLabel: string;
+  } | null;
+  /** Viewed docs version for search filtering (`""` = current; `null`/absent = off). */
+  searchVersion?: string | null;
   /**
    * User layout-slot overrides from `components.ts` (`defineComponents`). Each
    * key replaces the matching built-in; unknown keys are ignored. Wired slots:
@@ -220,6 +232,9 @@ const {
   localeAlternates,
   xDefault,
   localeSwitch,
+  versionSelector,
+  versionNotice,
+  searchVersion = null,
   layout = {},
   clientData,
   toc = { enabled: true, maxLevel: 3, minLevel: 2 },
@@ -499,16 +514,19 @@ const bannerKey = banner?.dismissible ? banner.key : null;
       href="#blume-content">{strings.page.skipToContent}</a
     >
     <Banner banner={banner} strings={strings.banner} />
+    <VersionBanner notice={versionNotice ?? null} />
     <HeaderSlot
       askEnabled={askEnabled}
       askStrings={strings.ask}
       layout={layout}
       localeSwitch={localeSwitch}
+      versionSelector={versionSelector}
       logo={logo}
       navigation={navigation}
       route={page.route}
       searchEnabled={searchEnabled}
       searchLocale={searchLocale}
+      searchVersion={searchVersion}
       navStrings={navStrings}
       searchStrings={strings.search}
       site={site}
@@ -712,6 +730,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.
@@ -723,32 +743,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>`;
@@ -767,14 +762,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",
@@ -854,7 +841,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 ?? "";
@@ -870,20 +857,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

@@ -19,10 +19,21 @@ interface Props {
   strings?: UIStrings["search"];
   /** Active locale to filter results to; omitted disables locale filtering. */
   locale?: string;
+  /**
+   * Docs version to filter results to (`""` = the current docs — a meaningful
+   * value, so `null`/omitted is what disables version filtering).
+   */
+  version?: string | null;
 }
 
-const { askEnabled = false, navigation, popularPages, strings, locale } =
-  Astro.props;
+const {
+  askEnabled = false,
+  navigation,
+  popularPages,
+  strings,
+  locale,
+  version = null,
+} = Astro.props;
 // Merge over the English baseline per key (rather than `strings ?? …`) so a
 // partial — or empty `{}` — strings object still resolves every label to a
 // default, matching the pattern PageActions uses for its own dictionary.
@@ -59,13 +70,15 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
   data-i18n-popular={s.popular}
   data-i18n-results={s.results}
   data-locale={locale || undefined}
+  data-version={version ?? undefined}
+  data-versioned={version === null ? 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 lg: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-40"
     data-blume-search-open
     type="button"
   >
@@ -86,11 +99,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 +124,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
@@ -128,15 +148,29 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       class="flex items-center justify-between gap-3 border-border border-t px-3 py-2 text-muted-foreground text-xs"
     >
       {
-        locale ? (
-          <label class="flex cursor-pointer select-none items-center gap-1.5">
-            <input
-              class="size-3.5 accent-accent"
-              data-blume-search-all-locales
-              type="checkbox"
-            />
-            {s.allLanguages}
-          </label>
+        locale || version !== null ? (
+          <span class="flex items-center gap-3">
+            {locale && (
+              <label class="flex cursor-pointer select-none items-center gap-1.5">
+                <input
+                  class="size-3.5 accent-accent"
+                  data-blume-search-all-locales
+                  type="checkbox"
+                />
+                {s.allLanguages}
+              </label>
+            )}
+            {version !== null && (
+              <label class="flex cursor-pointer select-none items-center gap-1.5">
+                <input
+                  class="size-3.5 accent-accent"
+                  data-blume-search-all-versions
+                  type="checkbox"
+                />
+                {s.allVersions}
+              </label>
+            )}
+          </span>
         ) : (
           <span />
         )
@@ -207,6 +241,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 +280,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.";
@@ -239,6 +295,11 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       // reader has opted to search across every language instead.
       locale: string | null = null;
       allLocales = false;
+      // The viewed docs version ("" = current; null when versioning is off),
+      // and the opt-in to search across every version.
+      versioned = false;
+      version = "";
+      allVersions = false;
 
       connectedCallback() {
         this.devOnlyMsg =
@@ -255,6 +316,10 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         this.resultsMsg =
           this.getAttribute("data-i18n-results") || this.resultsMsg;
         this.locale = this.getAttribute("data-locale");
+        // "" (the current docs) is a real version value, so a presence flag —
+        // not the attribute's truthiness — decides whether filtering is on.
+        this.versioned = this.hasAttribute("data-versioned");
+        this.version = this.getAttribute("data-version") ?? "";
         this.dialog = this.querySelector("[data-blume-search-dialog]")!;
         this.input = this.querySelector("[data-blume-search-input]")!;
         this.grid = this.querySelector("[data-blume-search-grid]")!;
@@ -273,8 +338,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 +347,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"
             );
@@ -296,6 +359,25 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
           });
         }
 
+        // Per-version filtering mirrors the locale toggle: default to the
+        // viewed version, with a remembered opt-in to search every version.
+        const allVersionsToggle = this.querySelector<HTMLInputElement>(
+          "[data-blume-search-all-versions]"
+        );
+        if (allVersionsToggle) {
+          this.allVersions =
+            readStorage("blume-search-all-versions") === "1";
+          allVersionsToggle.checked = this.allVersions;
+          allVersionsToggle.addEventListener("change", () => {
+            this.allVersions = allVersionsToggle.checked;
+            writeStorage(
+              "blume-search-all-versions",
+              this.allVersions ? "1" : "0"
+            );
+            this.render();
+          });
+        }
+
         // The handlers accept both ⌘ and Ctrl chords; show the right modifier
         // per platform on the button hint and the footer's preview hint.
         const isApple = /mac|iphone|ipad|ipod/iu.test(navigator.platform);
@@ -456,11 +538,14 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
 
         const localeFilter =
           this.locale && !this.allLocales ? this.locale : undefined;
+        const versionFilter =
+          this.versioned && !this.allVersions ? this.version : undefined;
         let result: Awaited<ReturnType<SearchFn>>;
         try {
           result = await this.searchFn(query, {
             locale: localeFilter,
             section: this.activeSection ?? undefined,
+            version: versionFilter,
           });
         } catch {
           // A hosted provider can reject (network error, outage); the results
@@ -568,7 +653,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;
       }
@@ -603,10 +694,16 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         const excerpt = hit.excerpt
           ? `<span class="mt-0.5 line-clamp-2 text-muted-foreground text-xs">${hit.excerpt}</span>`
           : "";
+        // A cross-version hit (all-versions search) names its version so the
+        // reader knows they're about to leave the docs they're viewing.
+        const versionTag =
+          this.versioned && hit.version !== undefined && hit.version !== this.version
+            ? `<span class="ms-2 inline-block rounded-full bg-muted px-1.5 py-0.5 align-middle text-[0.65rem] text-muted-foreground">${escapeHtml(hit.version || "latest")}</span>`
+            : "";
         el.innerHTML = `
           <span class="mt-0.5 shrink-0 text-muted-foreground">${svg("file")}</span>
           <span class="flex-1">
-            <span class="block truncate font-normal text-foreground text-sm">${hit.title}</span>
+            <span class="block truncate font-normal text-foreground text-sm">${hit.title}${versionTag}</span>
             ${excerpt}
           </span>`;
         const item: Selectable = { el, hit, kind: "link", url: href };
@@ -632,6 +729,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 +748,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 +768,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 +828,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/VersionBanner.astro

@@ -0,0 +1,39 @@
+---
+import { withBase } from "../islands/base-path.ts";
+import Icon from "../Icon.astro";
+
+// The "you're viewing an old version" notice, shared by RootLayout and
+// ReferenceLayout so every shell shows the same bar on archived pages. Unlike
+// the announcement Banner it is never dismissible — the reader should know
+// they're on frozen docs for as long as they are. The message and link label
+// arrive fully resolved (localized, `{version}` substituted) from the
+// catch-all, so this component carries no string fallbacks of its own.
+interface Props {
+  notice: {
+    message: string;
+    /** The same page in the latest docs when it exists, else the docs root. */
+    latestHref: string;
+    latestLabel: string;
+  } | null;
+}
+
+const { notice } = Astro.props;
+---
+
+{
+  notice && (
+    <div
+      class="flex items-center justify-center gap-x-2 gap-y-0.5 border-amber-300 border-b bg-amber-100 px-10 py-2.5 text-center text-amber-900 text-sm max-sm:flex-wrap dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200"
+      data-blume-version-banner
+    >
+      <span>{notice.message}</span>
+      <a
+        class="inline-flex items-center gap-1 font-medium underline underline-offset-2"
+        href={withBase(notice.latestHref)}
+      >
+        {notice.latestLabel}
+        <Icon name="arrow-right" size={14} />
+      </a>
+    </div>
+  )
+}

package/src/components/layout/analytics-client.ts

@@ -19,10 +19,15 @@ interface AnalyticsWindow {
 }
 
 export const track = (event: string, props: TrackProps): void => {
-  if (typeof window === "undefined") {
+  // Read through `globalThis` so an SSR/import-time call sees `undefined`
+  // instead of a bare-identifier ReferenceError.
+  const browserWindow = globalThis.window;
+  if (browserWindow === undefined) {
     return;
   }
-  const w = window as typeof window & AnalyticsWindow;
+  // SAFETY: AnalyticsWindow only adds optional provider globals, so any window
+  // satisfies the intersection; each provider is feature-checked before use.
+  const w = browserWindow as typeof browserWindow & AnalyticsWindow;
 
   // Vercel Web Analytics — self-gates to a no-op until `window.va` is set up.
   vercelTrack(event, props);
@@ -32,7 +37,5 @@ export const track = (event: string, props: TrackProps): void => {
   w.gtag?.("event", event, props);
   w.plausible?.(event, { props });
   // Universal hook for any other integration.
-  window.dispatchEvent(
-    new CustomEvent("blume:track", { detail: { event, props } })
-  );
+  w.dispatchEvent(new CustomEvent("blume:track", { detail: { event, props } }));
 };

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

@@ -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/hydration-hint.ts

@@ -13,7 +13,7 @@ const PATTERNS = [
   /server rendered html/iu,
 ];
 
-if (import.meta.env.DEV && typeof window !== "undefined") {
+if (import.meta.env.DEV && "window" in globalThis) {
   const original = console.error.bind(console);
   let shown = false;
   console.error = (...args: unknown[]) => {

package/src/components/layout/nav-utils.ts

@@ -209,10 +209,7 @@ export const sidebarForRoute = (
 };
 
 /** Resolve previous/next pages around the current route. */
-export const getPagination = (
-  flat: FlatPage[],
-  route: string
-): { prev: FlatPage | null; next: FlatPage | null } => {
+export const getPagination = (flat: FlatPage[], route: string) => {
   const index = flat.findIndex((page) => page.route === route);
   if (index === -1) {
     return { next: null, prev: null };