blume 0.7.0 → 0.8.0

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,9 @@ 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);
 
   // 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 +190,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;
@@ -244,7 +284,13 @@ const AskAI = ({
   };
 
   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 +298,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 +309,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"
       }`}
@@ -355,7 +404,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 +420,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 +447,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/Header.astro

@@ -1,6 +1,7 @@
 ---
 import { withBase } from "../islands/base-path.ts";
 import type { ComponentOverride } from "../../core/define-components.ts";
+import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { LocaleSwitchOption, Navigation } from "../../core/types.ts";
 import { GITHUB_MARK } from "../github-mark.ts";
@@ -37,6 +38,8 @@ interface Props {
   hasDrawer?: boolean;
   searchStrings?: UIStrings["search"];
   switcherStrings?: UIStrings["languageSwitcher"];
+  /** Localized chrome labels (nav toggle, sections, GitHub, theme toggle). */
+  navStrings?: UIStrings["nav"];
   localeSwitch?: LocaleSwitchOption[];
   /** Active locale for per-language search filtering. */
   searchLocale?: string;
@@ -59,11 +62,17 @@ const {
   hasDrawer = true,
   searchStrings,
   switcherStrings,
+  navStrings,
   localeSwitch,
   searchLocale,
   layout = {},
 } = 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, ...navStrings };
+
 const LogoSlot = resolveSlot(layout.Logo, Logo);
 const SearchSlot = resolveSlot(layout.Search, Search);
 
@@ -109,7 +118,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
   {
     showNavToggle && (
       <button
-        aria-label="Toggle navigation"
+        aria-label={n.toggleNavigation}
         class={`${iconButton} lg:hidden`}
         data-blume-nav-toggle
         type="button"
@@ -130,7 +139,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
   }
   {
     navigation.tabs.length > 0 && (
-      <nav aria-label="Sections" class={tabsNavClass}>
+      <nav aria-label={n.sections} class={tabsNavClass}>
         {navigation.tabs.map((tab) => (
           <a
             aria-current={
@@ -172,7 +181,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
     {
       navigation.repoUrl && (
         <a
-          aria-label="GitHub repository"
+          aria-label={n.githubRepository}
           class={iconButton}
           href={navigation.repoUrl}
           rel="noreferrer"
@@ -191,7 +200,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
       )
     }
     <button
-      aria-label="Toggle color theme"
+      aria-label={n.toggleTheme}
       class={iconButton}
       data-blume-theme-toggle
       type="button"

package/src/components/layout/Logo.astro

@@ -43,11 +43,19 @@ const brandText = logo?.text ?? site.title;
     !logoSvg &&
       logoLight &&
       (logoLight === logoDark ? (
-        <img alt={logoAlt} class="h-5 w-auto" src={logoLight} />
+        <img alt={logoAlt} class="h-5 w-auto" src={withBase(logoLight)} />
       ) : (
         <>
-          <img alt={logoAlt} class="h-5 w-auto dark:hidden" src={logoLight} />
-          <img alt={logoAlt} class="hidden h-5 w-auto dark:block" src={logoDark} />
+          <img
+            alt={logoAlt}
+            class="h-5 w-auto dark:hidden"
+            src={withBase(logoLight)}
+          />
+          <img
+            alt={logoAlt}
+            class="hidden h-5 w-auto dark:block"
+            src={withBase(logoDark)}
+          />
         </>
       ))
   }

package/src/components/layout/NavTree.astro

@@ -1,4 +1,6 @@
 ---
+import { EN_UI } from "../../core/i18n-ui.ts";
+import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { NavNode } from "../../core/types.ts";
 import Icon from "../Icon.astro";
 import { withBase } from "../islands/base-path.ts";
@@ -22,6 +24,8 @@ interface Props {
   idPrefix?: string;
   /** True only for the top-level call; renders the `<blume-nav>` panel stack. */
   root?: boolean;
+  /** Localized labels ("Back", the deprecated badge); English when omitted. */
+  strings?: UIStrings["nav"];
 }
 
 const {
@@ -30,12 +34,18 @@ const {
   depth = 0,
   idPrefix = "n",
   root = depth === 0,
+  strings,
 } = 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 };
+
 const badgeBase =
   "shrink-0 rounded-full px-1.5 py-0.5 font-medium text-[0.65rem] leading-none";
 const badgeClass = `${badgeBase} bg-muted text-muted-foreground`;
-// HTTP-method badges (from an OpenAPI reference's sidebar) are colour-coded;
+// HTTP-method badges (from an OpenAPI reference's sidebar) are color-coded;
 // every other badge keeps the neutral style.
 const METHOD_BADGE: Record<string, string> = {
   DELETE: "bg-red-500/15 text-red-700 dark:text-red-300",
@@ -114,13 +124,14 @@ const initialId =
           idPrefix={idPrefix}
           items={items}
           root={false}
+          strings={n}
         />
       </div>
       {panels.map((panel) => (
         <div data-nav-panel={panel.id} hidden={panel.id !== initialId}>
           <div class="mb-3 flex items-center gap-1.5">
             <button
-              aria-label="Back"
+              aria-label={n.back}
               class="-ml-1 flex shrink-0 items-center justify-center rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
               data-nav-back={panel.parentId}
               type="button"
@@ -147,6 +158,7 @@ const initialId =
             idPrefix={panel.id}
             items={panel.children}
             root={false}
+            strings={n}
           />
         </div>
       ))}
@@ -173,7 +185,7 @@ const initialId =
                   <span class="flex-1 truncate">{item.label}</span>
                   {item.badge && <span class={badgeClassFor(item.badge)}>{item.badge}</span>}
                   {item.deprecated && (
-                    <span class={deprecatedClass}>deprecated</span>
+                    <span class={deprecatedClass}>{n.deprecated}</span>
                   )}
                 </span>
               </a>
@@ -272,6 +284,7 @@ const initialId =
                     idPrefix={id}
                     items={item.children}
                     root={false}
+                    strings={n}
                   />
                 </div>
               </details>
@@ -324,6 +337,7 @@ const initialId =
                 idPrefix={id}
                 items={item.children}
                 root={false}
+                strings={n}
               />
             </div>
           </li>