blume 0.7.0 → 1.0.0

package/src/components/content/Tabs.astro

@@ -51,6 +51,10 @@ const hashEnabled = String(hash) !== "false";
     "w-full rounded-blume border border-border bg-background px-3 py-2 font-medium text-foreground text-sm";
   const SYNC_EVENT = "blume-tabs-change";
 
+  // Disambiguates generated trigger/panel ids when the same tab labels appear
+  // in several <Tabs> instances on one page.
+  let instanceCount = 0;
+
   const panelTitle = (panel: HTMLElement, index: number) =>
     panel.dataset.title ?? `Tab ${index + 1}`;
   const panelId = (panel: HTMLElement) => panel.dataset.tabId ?? panel.id;
@@ -119,7 +123,8 @@ const hashEnabled = String(hash) !== "false";
       if (this.dataset.dropdown === "true") {
         this.#select = document.createElement("select");
         this.#select.className = SELECT_CLASS;
-        this.#select.setAttribute("aria-label", "Select code example");
+        // Neutral default: tab sets aren't necessarily code examples.
+        this.#select.setAttribute("aria-label", "Select tab");
         panels.forEach((panel, index) => {
           const option = document.createElement("option");
           option.value = String(index);
@@ -131,6 +136,7 @@ const hashEnabled = String(hash) !== "false";
         });
         list.appendChild(this.#select);
       } else {
+        const instance = ++instanceCount;
         panels.forEach((panel, index) => {
           const trigger = document.createElement("button");
           trigger.type = "button";
@@ -138,9 +144,15 @@ const hashEnabled = String(hash) !== "false";
           trigger.className = TRIGGER_CLASS;
           appendTriggerContent(trigger, panel, index);
           trigger.tabIndex = index === 0 ? 0 : -1;
-          if (panel.id) {
-            trigger.setAttribute("aria-controls", panel.id);
+          // Wire tab and panel both ways. An author-supplied panel id is kept;
+          // otherwise derive unique ids from the label slug per instance.
+          const slug = panelId(panel) || `tab-${index + 1}`;
+          if (!panel.id) {
+            panel.id = `blume-tabpanel-${slug}-${instance}`;
           }
+          trigger.id = `blume-tab-${slug}-${instance}`;
+          trigger.setAttribute("aria-controls", panel.id);
+          panel.setAttribute("aria-labelledby", trigger.id);
           trigger.setAttribute(
             "aria-selected",
             index === 0 ? "true" : "false"

package/src/components/content/Tile.astro

@@ -1,5 +1,6 @@
 ---
 import Icon from "../Icon.astro";
+import { contentHref } from "./base-href.ts";
 
 const { description, href, title } = Astro.props;
 const Tag = href ? "a" : "div";
@@ -11,7 +12,7 @@ const previewPattern =
 <Tag
   class="not-prose block overflow-hidden rounded-blume border border-border bg-background text-inherit no-underline! transition-colors hover:no-underline! hover:[&[href]]:border-accent"
   data-blume-tile
-  href={href}
+  href={href === undefined ? undefined : contentHref(href)}
   rel={external ? "noreferrer" : undefined}
   target={external ? "_blank" : undefined}
 >

package/src/components/content/Tooltip.astro

@@ -1,6 +1,8 @@
 ---
 import { randomUUID } from "node:crypto";
 
+import { contentHref } from "./base-href.ts";
+
 interface Props {
   cta?: string;
   headline?: string;
@@ -43,7 +45,7 @@ const labelHtml = Astro.slots.has("default")
       cta && href && (
         <a
           class="mt-2 inline-flex font-medium text-accent text-xs hover:underline"
-          href={href}
+          href={contentHref(href)}
           rel={external ? "noreferrer" : undefined}
           target={external ? "_blank" : undefined}
         >

package/src/components/content/Update.astro

@@ -1,4 +1,6 @@
 ---
+import { contentHref } from "./base-href.ts";
+
 interface RssMetadata {
   description?: string;
   title?: string;
@@ -6,7 +8,12 @@ interface RssMetadata {
 
 interface Props {
   description?: string;
-  /** Link the heading to a dedicated page; falls back to the in-page anchor. */
+  /**
+   * Link the heading to a dedicated page; falls back to the in-page anchor.
+   * A root-relative route gains the composed `deployment.base` + `basePath`
+   * prefix at emit time (like a markdown link); anchors and external URLs
+   * pass through.
+   */
   href?: string;
   id?: string;
   label?: string;
@@ -47,7 +54,7 @@ const tagList = Array.isArray(tags) ? tags : tags ? [tags] : [];
   <header class="md:border-border md:border-e md:pe-4">
     <a
       class="font-semibold text-foreground text-sm no-underline hover:text-accent"
-      href={href ?? `#${id}`}
+      href={contentHref(href ?? `#${id}`)}
     >
       {updateLabel}
     </a>

package/src/components/content/auto-type-table.ts

@@ -144,7 +144,13 @@ export const extractTypeTable = async (
       default: defaultValue || undefined,
       description: description || undefined,
       name: symbol.getName(),
-      required: !signature?.questionToken,
+      // Optionality lives on the checker's symbol, not the backing
+      // declaration: mapped/utility types synthesize members whose
+      // declaration has no question token (`Partial<Base>` would read as
+      // all-required), and `Required<Base>` strips optionality while the
+      // declaration keeps its `?` — the token is wrong in both directions.
+      // oxlint-disable-next-line no-bitwise -- SymbolFlags is a bitfield
+      required: (symbol.flags & ts.SymbolFlags.Optional) === 0,
       type: typeText,
     };
   });

package/src/components/content/base-href.ts

@@ -0,0 +1,33 @@
+import data from "blume:data";
+
+import {
+  isInternalPath,
+  normalizeBasePath,
+  withComposedBasePath,
+} from "../../core/base-path.ts";
+
+// Mirrors `markdown/base-links.ts`: a path whose final segment carries a file
+// extension is a `public/` asset, served at the site root and never moved
+// under `basePath`.
+const ASSET_PATH = /\.[a-z0-9]+$/iu;
+
+/** Strip any `#fragment`/`?query` so only the path is extension-tested. */
+const pathOf = (url: string): string => url.replace(/[#?].*$/u, "");
+
+/**
+ * Rebase a component-emitted `href` the way `markdown/base-links.ts` rebases
+ * `[x](/guide)`: a root-relative internal page link gains the composed
+ * `deployment.base` + `basePath` prefix, so authors write component links
+ * (`<Card href="/guide">`) under the same "as if mounted at root" contract as
+ * markdown links. Idempotent per layer (a hand-written `/docs/x` isn't
+ * double-prefixed) and inert for external URLs, fragments, relative paths, and
+ * asset links.
+ */
+export const contentHref = (href: string): string =>
+  isInternalPath(href) && !ASSET_PATH.test(pathOf(href))
+    ? withComposedBasePath(
+        normalizeBasePath(import.meta.env.BASE_URL),
+        data.config.basePath,
+        href
+      )
+    : href;

package/src/components/content/changelog-element.ts

@@ -1,5 +1,5 @@
 /**
- * Client behaviour for the `<blume-changelog>` custom element wrapping the
+ * Client behavior for the `<blume-changelog>` custom element wrapping the
  * generated changelog timeline when its releases are semver-versioned. The
  * newest major line stays visible; every older major is collapsed into a group
  * revealed one major at a time by the "Show N.x releases" button at the bottom.
@@ -24,6 +24,10 @@ class BlumeChangelog extends HTMLElement {
       return;
     }
 
+    // Localized button template from the generated page markup (the
+    // data-attribute channel); `{version}` is replaced with the major line.
+    const template = this.dataset.i18nMore || "Show {version} releases";
+
     for (const group of groups) {
       group.hidden = true;
       // Focusable only programmatically, so revealing a group can move focus to
@@ -35,7 +39,10 @@ class BlumeChangelog extends HTMLElement {
     const sync = () => {
       const next = groups[revealed];
       if (next) {
-        button.textContent = `Show ${next.dataset.changelogLabel} releases`;
+        button.textContent = template.replace(
+          "{version}",
+          next.dataset.changelogLabel ?? ""
+        );
         button.hidden = false;
       } else {
         button.hidden = true;

package/src/components/content/mermaid-element.ts

@@ -1,5 +1,5 @@
 /**
- * Client behaviour for the `<blume-mermaid>` custom element emitted by the
+ * Client behavior for the `<blume-mermaid>` custom element emitted by the
  * Mermaid markdown plugin. Mermaid is lazy-loaded — it needs a DOM and is large,
  * so the dependency only downloads on pages that actually contain a diagram —
  * and each diagram re-renders when the color theme flips so it tracks light/dark.
@@ -61,7 +61,12 @@ class BlumeMermaid extends HTMLElement {
           output.innerHTML = svg;
         }
       } catch {
-        output.textContent = "Could not render this diagram.";
+        // Localized message stamped on <body> by RootLayout's markup (the
+        // data-attribute channel); English fallback when the attribute is
+        // missing (a stale snapshot or a custom layout).
+        output.textContent =
+          document.body.dataset.i18nDiagramError ||
+          "Could not render this diagram.";
       }
       output.removeAttribute("aria-busy");
     };

package/src/components/islands/AskAI.astro

@@ -63,13 +63,16 @@ const icons = {
   }
 
   /* The table of contents only shows at xl; reclaim its column for the article
-     while the panel is open so the shrunken content still has room to breathe. */
+     while the panel is open so the shrunken content still has room to breathe.
+     Scoped to grids that actually have a TOC column: a "bare" layout (the
+     changelog index) is single-column, and forcing the sidebar tracks onto it
+     would squeeze its only item — <main> — into the 17.5rem track. */
   @media (min-width: 1280px) {
     body[data-blume-ask="open"] [data-blume-toc] {
       display: none;
     }
 
-    body[data-blume-ask="open"] [data-blume-doc-grid] {
+    body[data-blume-ask="open"] [data-blume-doc-grid]:has([data-blume-toc]) {
       grid-template-columns: 17.5rem minmax(0, 1fr);
     }
   }

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

@@ -5,7 +5,7 @@ import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import { createPortal } from "react-dom";
 
 import type { UIStrings } from "../../core/i18n-ui.ts";
-import { joinBase, stripBase } from "./base-path.ts";
+import { joinBase, prefixBase, stripBase } from "./base-path.ts";
 
 interface ChatMessage {
   content: string;
@@ -43,6 +43,7 @@ const EMPTY_ICONS: AskIcons = {
 
 // English fallback so the island renders even if no dictionary is passed.
 const DEFAULT_ASK: UIStrings["ask"] = {
+  ai: "AI",
   clear: "Clear conversation",
   close: "Close",
   copy: "Copy conversation",
@@ -53,6 +54,7 @@ const DEFAULT_ASK: UIStrings["ask"] = {
   send: "Send",
   tip: "Tip: You can open and close chat with",
   title: "Ask AI",
+  you: "You",
 };
 
 let idCounter = 0;
@@ -72,6 +74,17 @@ const currentPath = (): string =>
 // 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({
+  walkTokens: (token) => {
+    if (token.type === "link") {
+      token.href = prefixBase(import.meta.env.BASE_URL, token.href);
+    }
+  },
+});
+
 const renderMarkdown = (content: string): string =>
   DOMPurify.sanitize(marked.parse(content, { async: false }));
 
@@ -97,6 +110,14 @@ const Glyph = ({ path, size = 16 }: { path: string; size?: number }) => (
 // Stable empty default so an unset `suggestions` prop doesn't re-render.
 const EMPTY_SUGGESTIONS: Suggestion[] = [];
 
+// The toggle shortcut accepts both ⌘I and Ctrl+I; show the right modifier per
+// platform (same detection Search.astro uses for its ⌘K hint). Guarded so the
+// island still server-renders, where `navigator` doesn't exist; the hint itself
+// only renders client-side, inside the portaled panel.
+const IS_APPLE =
+  typeof navigator !== "undefined" &&
+  /mac|iphone|ipad|ipod/iu.test(navigator.platform);
+
 // Ghost icon button, matching the header's theme toggle and repo link.
 const TRIGGER_CLASS =
   "inline-flex size-9 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
@@ -120,7 +141,9 @@ const AskAI = ({
   strings?: UIStrings["ask"];
   suggestions?: Suggestion[];
 }) => {
-  const t = strings ?? DEFAULT_ASK;
+  // Merge per key (not `strings ?? …`) so a dictionary from a stale snapshot
+  // that predates newer keys still resolves every label to its English default.
+  const t = { ...DEFAULT_ASK, ...strings };
   const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
   const [input, setInput] = useState("");
@@ -128,6 +151,16 @@ const AskAI = ({
   const [busy, setBusy] = useState(false);
   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.
@@ -164,10 +197,24 @@ const AskAI = ({
   // Drive the desktop content push from a body attribute (see AskAI.astro CSS).
   useEffect(() => {
     if (open) {
+      returnFocusRef.current =
+        document.activeElement instanceof HTMLElement
+          ? document.activeElement
+          : null;
       document.body.dataset.blumeAsk = "open";
       inputRef.current?.focus();
     } else {
       delete document.body.dataset.blumeAsk;
+      // Return focus to the element that opened the panel (or the trigger when
+      // it's gone), so closing doesn't strand keyboard focus in an inert tree.
+      // `returnFocusRef` is only set on open, so initial mount is a no-op.
+      if (returnFocusRef.current) {
+        const target = returnFocusRef.current.isConnected
+          ? returnFocusRef.current
+          : triggerRef.current;
+        returnFocusRef.current = null;
+        target?.focus();
+      }
     }
     return () => {
       delete document.body.dataset.blumeAsk;
@@ -199,6 +246,9 @@ const AskAI = ({
     setMessages([...history, assistant]);
     setInput("");
     setBusy(true);
+    const generation = generationRef.current;
+    const controller = new AbortController();
+    abortRef.current = controller;
 
     try {
       const response = await fetch(ASK_ENDPOINT, {
@@ -208,6 +258,7 @@ const AskAI = ({
         }),
         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.
@@ -226,25 +277,45 @@ const AskAI = ({
           // 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 });
-          setMessages((current) => [...current.slice(0, -1), { ...assistant }]);
+          if (generationRef.current === generation) {
+            setMessages((current) => [
+              ...current.slice(0, -1),
+              { ...assistant },
+            ]);
+          }
         }
       }
     } catch {
-      // 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 }]);
+      // 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([]);
+  };
+
   const onSubmit = (event: FormEvent) => {
     event.preventDefault();
     void runQuestion(input);
   };
 
   const onInputKeyDown = (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === "Enter" && !event.shiftKey) {
+    // `isComposing` guards IME input: Enter confirming a CJK conversion must
+    // commit the text, not submit the question.
+    if (
+      event.key === "Enter" &&
+      !event.shiftKey &&
+      !event.nativeEvent.isComposing
+    ) {
       event.preventDefault();
       void runQuestion(input);
     }
@@ -252,7 +323,7 @@ const AskAI = ({
 
   const copyConversation = () => {
     const text = messages
-      .map((m) => `${m.role === "user" ? "You" : "AI"}: ${m.content}`)
+      .map((m) => `${m.role === "user" ? t.you : t.ai}: ${m.content}`)
       .join("\n\n");
     void navigator.clipboard?.writeText(text);
   };
@@ -263,6 +334,9 @@ const AskAI = ({
     <aside
       aria-hidden={open ? undefined : "true"}
       aria-label={t.title}
+      // The closed panel is only translated off-screen; `inert` drops its
+      // buttons/textarea from the tab order and the accessibility tree.
+      inert={!open}
       className={`fixed inset-y-0 end-0 z-[60] flex w-[var(--blume-ask-width)] flex-col border-border border-s bg-background shadow-2xl transition-transform duration-200 ease-out ${
         open ? "translate-x-0" : "translate-x-full rtl:-translate-x-full"
       }`}
@@ -283,7 +357,7 @@ const AskAI = ({
             aria-label={t.clear}
             className={ICON_BUTTON_CLASS}
             disabled={!hasMessages}
-            onClick={() => setMessages([])}
+            onClick={clearConversation}
             type="button"
           >
             <Glyph path={icons.clear} />
@@ -355,7 +429,7 @@ const AskAI = ({
             <p className="mt-3 flex items-center gap-1.5 px-2 text-muted-foreground text-sm">
               {t.tip}
               <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-sans text-xs">
-                ⌘
+                {IS_APPLE ? "⌘" : "Ctrl"}
               </kbd>
               <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-sans text-xs">
                 I
@@ -371,7 +445,7 @@ const AskAI = ({
       >
         <textarea
           aria-label={t.label}
-          className="max-h-48 min-h-[5rem] w-full resize-none bg-transparent px-4 py-3.5 pe-14 text-foreground text-sm outline-none placeholder:text-muted-foreground"
+          className="max-h-48 min-h-[5rem] w-full resize-none bg-transparent px-4 py-3.5 pe-14 text-foreground text-sm pointer-coarse:text-base outline-none placeholder:text-muted-foreground"
           onChange={(event) => setInput(event.target.value)}
           onKeyDown={onInputKeyDown}
           placeholder={t.placeholder}
@@ -398,6 +472,7 @@ const AskAI = ({
         aria-label={t.title}
         className={TRIGGER_CLASS}
         onClick={() => setOpen((value) => !value)}
+        ref={triggerRef}
         type="button"
       >
         <Glyph path={icons.chat} size={18} />

package/src/components/islands/hooks.ts

@@ -89,23 +89,36 @@ export const useSearch = (): UseSearch => {
   const [results, setResults] = useState<SearchResult | null>(null);
   const [loading, setLoading] = useState(false);
   const searchFn = useRef<SearchFn | null>(null);
+  const generation = useRef(0);
 
   // Retained for the compiler-off opt-out path (`react: { compiler: false }`):
   // this useCallback keeps a stable `search` identity for consumers that use it
   // as an effect/memo dependency. With the compiler on it's redundant but inert.
   // oxlint-disable-next-line react-doctor/react-compiler-no-manual-memoization -- see above
   const search = useCallback<UseSearch["search"]>(async (query, options) => {
-    if (!searchFn.current) {
-      const { createSearch } = await import("blume:search-client");
-      searchFn.current = await createSearch();
-    }
+    // Stale-response guard, mirroring the built-in dialog's renderGeneration:
+    // provider responses can land out of order, so only the latest call may
+    // commit results or clear `loading` — otherwise the last response to land
+    // wins over the last query typed ("a" clobbering "ab").
+    generation.current += 1;
+    const { current } = generation;
+    // Before the lazy client import: the first search's heaviest phase is
+    // creating the provider client (index download), and it must show loading.
     setLoading(true);
     try {
+      if (!searchFn.current) {
+        const { createSearch } = await import("blume:search-client");
+        searchFn.current = await createSearch();
+      }
       const result = await searchFn.current(query, options);
-      setResults(result);
+      if (current === generation.current) {
+        setResults(result);
+      }
       return result;
     } finally {
-      setLoading(false);
+      if (current === generation.current) {
+        setLoading(false);
+      }
     }
   }, []);
 
@@ -128,6 +141,9 @@ export interface UseAskAI {
 
 const ASK_ENDPOINT = joinBase(import.meta.env.BASE_URL, "api/ask");
 
+/** Shown as the assistant's answer when the request fails or throws. */
+const ASK_ERROR = "Something went wrong answering that. Please try again.";
+
 /** The current route with the deployment base stripped, for page grounding. */
 const currentPath = (): string =>
   stripBase(import.meta.env.BASE_URL, window.location.pathname);
@@ -169,8 +185,7 @@ export const useAskAI = (): UseAskAI => {
         if (!response.ok) {
           // An error body (JSON, HTML error page) must not stream in as the
           // assistant's answer.
-          assistant.content =
-            "Something went wrong answering that. Please try again.";
+          assistant.content = ASK_ERROR;
           setMessages([...history, { ...assistant }]);
           return;
         }
@@ -195,6 +210,11 @@ export const useAskAI = (): UseAskAI => {
             }
           }
         }
+      } catch {
+        // A thrown fetch (offline, DNS failure, CORS) must not strand the
+        // pre-appended empty assistant message as a stuck placeholder.
+        assistant.content = ASK_ERROR;
+        setMessages([...history, { ...assistant }]);
       } finally {
         setLoading(false);
       }

package/src/components/layout/Banner.astro

@@ -1,4 +1,6 @@
 ---
+import { EN_UI } from "../../core/i18n-ui.ts";
+import type { UIStrings } from "../../core/i18n-ui.ts";
 import { withBase } from "../islands/base-path.ts";
 import Icon from "../Icon.astro";
 
@@ -14,9 +16,15 @@ interface Props {
         key: string;
       }
     | null;
+  /** Localized banner labels. */
+  strings?: UIStrings["banner"];
 }
 
-const { banner } = Astro.props;
+const { banner, strings } = Astro.props;
+// Merge over the English baseline per key (rather than `strings ?? …`) so a
+// partial — or missing — strings object still resolves every label to a
+// default, matching the pattern PageFeedback and Search use.
+const b = { ...EN_UI.banner, ...strings };
 ---
 
 {
@@ -38,7 +46,7 @@ const { banner } = Astro.props;
       )}
       {banner.dismissible && (
         <button
-          aria-label="Dismiss announcement"
+          aria-label={b.dismiss}
           class="absolute end-1.5 inline-flex size-7 items-center justify-center rounded-full text-background/80 transition-colors hover:bg-white/10 hover:text-background dark:text-foreground/70 dark:hover:bg-foreground/10 dark:hover:text-foreground"
           data-blume-banner-dismiss
           type="button"

package/src/components/layout/Breadcrumbs.astro

@@ -1,15 +1,24 @@
 ---
+import { EN_UI } from "../../core/i18n-ui.ts";
+import type { UIStrings } from "../../core/i18n-ui.ts";
 import { withBase } from "../islands/base-path.ts";
 import type { Crumb } from "./nav-utils.ts";
 
 interface Props {
   /** Full breadcrumb trail from the site root to the current page. */
   crumbs: Crumb[];
+  /** Localized nav labels (the landmark's `aria-label`); English when omitted. */
+  strings?: UIStrings["nav"];
   /** Left-align full width (for the wide API layout) instead of the prose measure. */
   wide?: boolean;
 }
 
-const { crumbs, wide = false } = Astro.props;
+const { crumbs, strings, wide = false } = Astro.props;
+
+// Merge over the English defaults so a label missing from a translation (or
+// from a not-yet-regenerated snapshot) still renders instead of coming out
+// blank — the PageActions pattern.
+const n = { ...EN_UI.nav, ...strings };
 
 // The built-in shows a single "eyebrow" crumb — the parent group — rather than
 // the whole trail. An override receives the complete list and can render more.
@@ -19,7 +28,7 @@ const eyebrowCrumb = crumbs.length > 1 ? crumbs[crumbs.length - 2] : null;
 {
   eyebrowCrumb && (
     <nav
-      aria-label="Breadcrumb"
+      aria-label={n.breadcrumb}
       class:list={[
         "mb-2 text-muted-foreground text-sm",
         wide ? "max-w-none" : "mx-auto max-w-[42rem]",