@umami/shiso 1.17.0 → 1.18.0

package/dist/chunks/ganttDiagram-EL5Y4UJY.js

@@ -1,4 +1,4 @@
-import { Ar as __commonJSMin, jr as __toESM } from "./docs.js";
+import { Rr as __commonJSMin, zr as __toESM } from "./docs.js";
 import { n as __name } from "./chunk-Y2CYZVJY.js";
 import { a as nogamma, c as Rgb, d as define_default, f as extend, g as require_dayjs_min, i as hue, m as log, p as select_default, s as Color, u as rgbConvert } from "./src.js";
 import { H as setAccDescription, K as setDiagramTitle, U as setAccTitle, a as clear, c as configureSvgSize, s as common_default, v as getAccDescription, w as getDiagramTitle, x as getConfig2, y as getAccTitle } from "./chunk-DU6HZSFF.js";

package/dist/chunks/src.js

@@ -1,4 +1,4 @@
-import { Ar as __commonJSMin, jr as __toESM } from "./docs.js";
+import { Rr as __commonJSMin, zr as __toESM } from "./docs.js";
 import { n as __name } from "./chunk-Y2CYZVJY.js";
 
 //#region ../../node_modules/.pnpm/dayjs@1.11.23/node_modules/dayjs/dayjs.min.js

package/dist/entry-client.js

@@ -1,4 +1,4 @@
-import { yr as BrowserRouter } from "./chunks/docs.js";
+import { Dr as BrowserRouter } from "./chunks/docs.js";
 import { h as BASE_URL, t as App } from "./chunks/App.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/entry-server.js

@@ -1,4 +1,4 @@
-import { Cr as Router, Dr as createPath, Or as parsePath, kr as ABSOLUTE_URL_REGEX } from "./chunks/docs.js";
+import { Fr as createPath, Ir as parsePath, Lr as ABSOLUTE_URL_REGEX, jr as Router } from "./chunks/docs.js";
 import { a as docsSite, c as getSeo, d as standalonePages, f as getDocModule, g as toAbsoluteUrl, h as BASE_URL, i as docsHomeUrl, l as siteConfig, m as getScopeForPage, n as buildHead, o as getLocaleByPathname, p as getLastModified, r as renderHeadToString, s as getRedirects, t as App, u as siteName } from "./chunks/App.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";

package/docs.schema.json

@@ -232,6 +232,10 @@
           "title": {
             "allOf": [{ "$ref": "#/definitions/stringValue" }],
             "description": "Page title used in the document head. Frontmatter title wins."
+          },
+          "language": {
+            "allOf": [{ "$ref": "#/definitions/nonEmptyStringValue" }],
+            "description": "Navigation language this page belongs to, e.g. \"ja\". Must match a language in navigation.languages. The language selector links pages whose file slugs match once the language folder is removed, e.g. \"ja/home\" and \"home\"."
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Open-source documentation framework for Markdown and MDX sites.",
   "type": "module",
   "bin": {

package/scripts/check-content.mjs

@@ -87,6 +87,8 @@ function collectPageReferences(navigation) {
 
   function visitContainer(container) {
     if (!container || typeof container !== 'object') return;
+    // Groups reached through tabs/dropdowns/languages carry their own landing page.
+    if (typeof container.root === 'string') references.push(container.root);
     if (Array.isArray(container.pages)) visitItems(container.pages);
     for (const key of ['tabs', 'dropdowns', 'groups', 'versions', 'languages']) {
       if (Array.isArray(container[key])) container[key].forEach(visitContainer);

package/scripts/load-shiso-config.mjs

@@ -2,6 +2,7 @@ import fs from 'node:fs/promises';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { createJiti } from 'jiti';
+import englishLabels from '../src/lib/translations/en.json' with { type: 'json' };
 
 /**
  * Loads the optional project code config (shiso.config.ts/.mjs/.js).
@@ -16,7 +17,7 @@ import { createJiti } from 'jiti';
 export const SHISO_CONFIG_FILES = ['shiso.config.ts', 'shiso.config.mjs', 'shiso.config.js'];
 
 const STRING_KEYS = ['docsPrefix', 'contentDir', 'siteUrl', 'locale'];
-const KNOWN_KEYS = [...STRING_KEYS, 'mdx'];
+const KNOWN_KEYS = [...STRING_KEYS, 'mdx', 'translations'];
 const MDX_KEYS = ['remarkPlugins', 'rehypePlugins'];
 
 let importGeneration = 0;
@@ -88,6 +89,31 @@ function resolveMdxConfig(value, sourcePath) {
   };
 }
 
+function resolveTranslations(value, sourcePath) {
+  if (value === undefined) return undefined;
+  const invalid = message => {
+    throw new ShisoConfigLoadError(message, { code: 'INVALID_OPTION', sourcePath });
+  };
+  if (!isPlainObject(value)) invalid('Shiso config option "translations" must be an object.');
+  const result = {};
+  for (const [locale, labels] of Object.entries(value)) {
+    let canonical;
+    try {
+      canonical = Intl.getCanonicalLocales(locale)[0];
+    } catch {
+      invalid(`Invalid translations locale "${locale}". Use a BCP 47 tag such as "fr" or "pt-BR".`);
+    }
+    if (!isPlainObject(labels)) invalid(`translations.${locale} must be an object.`);
+    for (const [key, label] of Object.entries(labels)) {
+      if (!Object.hasOwn(englishLabels, key))
+        invalid(`Unknown UI label "translations.${locale}.${key}".`);
+      if (typeof label !== 'string') invalid(`translations.${locale}.${key} must be a string.`);
+    }
+    result[canonical] = { ...result[canonical], ...labels };
+  }
+  return result;
+}
+
 /**
  * Applies defaults and normalization. Single source of truth for resolved
  * values, so runtime and build-time consumers never re-implement defaulting.
@@ -103,6 +129,9 @@ export function resolveShisoConfig(raw = {}, sourcePath = null) {
     siteUrl: raw.siteUrl?.trim().replace(/\/+$/, '') || undefined,
     locale: raw.locale?.trim() || 'en-US',
     mdx: resolveMdxConfig(raw.mdx, sourcePath),
+    ...(raw.translations === undefined
+      ? {}
+      : { translations: resolveTranslations(raw.translations, sourcePath) }),
   };
 }
 

package/src/App.tsx

@@ -3,12 +3,18 @@ import '@fontsource/jetbrains-mono/400.css';
 import '@umami/shiso/styles.css';
 
 import { MDXProvider } from '@mdx-js/react';
-import { Navigate, Route, Routes } from 'react-router';
+import { Navigate, Route, Routes, useLocation } from 'react-router';
 import { CodeBlock } from '@/components/CodeBlock';
 import * as docsComponents from '@/components/docs/index';
 import { Layout } from '@/components/Layout';
 import { TooltipProvider } from '@/components/ui/tooltip';
-import { docsHomeUrl, hasRootStandalonePage, siteModel, standalonePages } from '@/lib/site-config';
+import { LabelContext } from '@/lib/label-context';
+import {
+  docsHomeUrl,
+  getSiteModelByPathname,
+  hasRootStandalonePage,
+  standalonePages,
+} from '@/lib/site-config';
 import { DocPage } from '@/pages/DocPage';
 import { StandalonePageView } from '@/pages/StandalonePage';
 
@@ -27,27 +33,31 @@ const mdxComponents = {
 };
 
 export function App() {
+  const { pathname } = useLocation();
+  const siteModel = getSiteModelByPathname(pathname);
   return (
-    <TooltipProvider>
-      <MDXProvider components={mdxComponents}>
-        <Layout site={siteModel}>
-          <Routes>
-            {standalonePages.map(page => (
-              <Route
-                key={page.path}
-                path={page.path}
-                element={<StandalonePageView page={page} site={siteModel} />}
-              />
-            ))}
-            {/* When the default scope's landing page is the root, or a
+    <LabelContext.Provider value={siteModel.labels}>
+      <TooltipProvider>
+        <MDXProvider components={mdxComponents}>
+          <Layout site={siteModel}>
+            <Routes>
+              {standalonePages.map(page => (
+                <Route
+                  key={page.path}
+                  path={page.path}
+                  element={<StandalonePageView page={page} site={siteModel} />}
+                />
+              ))}
+              {/* When the default scope's landing page is the root, or a
                 standalone page owns "/", there is nothing to redirect. */}
-            {docsHomeUrl !== '/' && !hasRootStandalonePage ? (
-              <Route path="/" element={<Navigate to={docsHomeUrl} replace />} />
-            ) : null}
-            <Route path="*" element={<DocPage site={siteModel} />} />
-          </Routes>
-        </Layout>
-      </MDXProvider>
-    </TooltipProvider>
+              {docsHomeUrl !== '/' && !hasRootStandalonePage ? (
+                <Route path="/" element={<Navigate to={docsHomeUrl} replace />} />
+              ) : null}
+              <Route path="*" element={<DocPage site={siteModel} />} />
+            </Routes>
+          </Layout>
+        </MDXProvider>
+      </TooltipProvider>
+    </LabelContext.Provider>
   );
 }

package/src/components/CodeBlock.tsx

@@ -3,6 +3,7 @@ import { type ComponentProps, type CSSProperties, useRef, useState } from 'react
 import { CheckIcon, Copy } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { useLabels } from '@/lib/label-context';
 import { cn } from '@/lib/utils';
 import { Mermaid, type MermaidPlacement } from './docs/Mermaid';
 
@@ -60,6 +61,7 @@ function copyText(pre: HTMLPreElement | null, language?: string): string {
 }
 
 export function CodeBlock({ children, className, style, ...rest }: CodeBlockProps) {
+  const labels = useLabels();
   const {
     'data-title': title,
     'data-language': language,
@@ -137,7 +139,7 @@ export function CodeBlock({ children, className, style, ...rest }: CodeBlockProp
           title ? 'top-1' : 'top-2.5',
         )}
         onClick={handleCopy}
-        aria-label="Copy code"
+        aria-label={copied ? labels.copied : labels.copyCode}
       >
         {copied ? <CheckIcon className="size-3.5 text-primary" /> : <Copy className="size-3.5" />}
       </Button>

package/src/components/Docs.tsx

@@ -60,7 +60,9 @@ export function Docs({ page, doc, site }: DocsProps) {
 
   // API reference pages append their generated section anchors to the TOC.
   const operation = getOperation(doc.frontmatter?.openapi);
-  const toc = operation ? [...(doc.toc || []), ...operationSections(operation)] : doc.toc;
+  const toc = operation
+    ? [...(doc.toc || []), ...operationSections(operation, site.labels)]
+    : doc.toc;
 
   return (
     <PanelProvider>

package/src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import { ConfiguredIcon } from '@/components/ConfiguredIcon';
+import { useLabels } from '@/lib/label-context';
 import type { NormalizedFooter } from '@/lib/types';
 
 export function Footer({
@@ -8,6 +9,7 @@ export function Footer({
   footer: NormalizedFooter | null;
   className?: string;
 }) {
+  const labels = useLabels();
   if (!footer) {
     return null;
   }
@@ -48,7 +50,7 @@ export function Footer({
               href="https://shiso.umami.is?ref=docs-footer"
               className="text-sm hover:text-foreground"
             >
-              Powered by <span className="font-bold">shiso</span>
+              {labels.poweredBy} <span className="font-bold">shiso</span>
             </a>
           ) : (
             <span />

package/src/components/Header.tsx

@@ -6,7 +6,7 @@ import { ThemeToggle } from '@/components/ThemeToggle';
 import { TopNav } from '@/components/TopNav';
 import { VersionSwitcher } from '@/components/VersionSwitcher';
 import { isExternalHref } from '@/lib/paths';
-import { docsHomeUrl, getScopeByPathname, hasRootStandalonePage } from '@/lib/site-config';
+import { getHomeHref, getScopeByPathname } from '@/lib/site-config';
 import type { NormalizedLink, SiteModel } from '@/lib/types';
 
 /**
@@ -62,8 +62,9 @@ export function Header({ site }: { site: SiteModel }) {
   const { pathname } = useLocation();
   // The header renders the navigation of whichever scope owns the current page.
   const docs = getScopeByPathname(pathname).docs;
-  // The brand links to the standalone home page when one owns "/".
-  const brandHref = logo?.href || (hasRootStandalonePage ? '/' : docsHomeUrl);
+  // The brand links to the standalone home page in the current language when
+  // one owns "/", else the docs home.
+  const brandHref = logo?.href || getHomeHref(pathname);
   const hasBrand = !!name || !!logo?.light || !!logo?.dark;
   const brandClassName =
     'inline-flex items-center gap-2 text-xl font-bold text-foreground tracking-[-0.03em]';

package/src/components/LanguageSwitcher.tsx

@@ -9,12 +9,19 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { getLanguageScopes } from '@/lib/docs-config';
 import { getLanguageName, isValidLocale } from '@/lib/locale';
-import { docsSite, getScopeByPathname } from '@/lib/site-config';
+import {
+  docsSite,
+  getScopeByPathname,
+  getStandaloneCounterpart,
+  getStandalonePage,
+} from '@/lib/site-config';
 
 /**
  * Language selector for multi-language sites. Each option is a language's
- * landing scope — its default version — so switching languages always lands
- * on that language's default-version first page. Hidden languages never
+ * landing scope — its default version — so switching languages lands on that
+ * language's default-version first page. On a standalone page (e.g. a home
+ * page) it lands on the same page in the chosen language when one exists.
+ * Hidden languages never
  * appear as options. Each language is shown by its native name, e.g. "ja"
  * as "日本語".
  */
@@ -23,6 +30,7 @@ export function LanguageSwitcher() {
   const navigate = useNavigate();
   const current = getScopeByPathname(pathname);
   const options = getLanguageScopes(docsSite);
+  const standalone = getStandalonePage(pathname);
 
   if (!current.language || (options.length < 2 && !current.hidden)) {
     return null;
@@ -47,7 +55,12 @@ export function LanguageSwitcher() {
             key={scope.id}
             onClick={() => {
               if (scope.language !== current.language) {
-                navigate(scope.firstPageUrl);
+                const counterpart =
+                  standalone && scope.language
+                    ? getStandaloneCounterpart(standalone, scope.language)
+                    : null;
+
+                navigate(counterpart?.path || scope.firstPageUrl);
               }
             }}
           >

package/src/components/OpenApiOperation.tsx

@@ -3,16 +3,18 @@ import { Badge } from '@/components/docs/Badge';
 import { CodeGroup } from '@/components/docs/CodeGroup';
 import { Expandable } from '@/components/docs/Expandable';
 import { PropertiesTable } from '@/components/docs/PropertiesTable';
+import { useLabels } from '@/lib/label-context';
 import { operationParameterSections, operationSections, statusColor } from '@/lib/openapi';
-import type { NormalizedOperation, SchemaNode } from '@/lib/types';
+import type { NormalizedOperation, SchemaNode, ThemeLabels } from '@/lib/types';
 
 function FieldChildren({ node }: { node: SchemaNode }) {
+  const labels = useLabels();
   return (
     <>
       {node.description}
       {node.enum && node.enum.length > 0 && (
         <div className="mt-1">
-          Options:{' '}
+          {labels.fieldOptions}{' '}
           {node.enum.map((value, index) => (
             <span key={value}>
               {index > 0 && ', '}
@@ -25,12 +27,14 @@ function FieldChildren({ node }: { node: SchemaNode }) {
   );
 }
 
-function schemaDetails(node: SchemaNode) {
+function schemaDetails(node: SchemaNode, labels: ThemeLabels) {
   if (!node.children?.length) return undefined;
 
   return (
     <Expandable
-      title={node.type === 'oneOf' || node.type === 'anyOf' ? 'Allowed types' : 'properties'}
+      title={
+        node.type === 'oneOf' || node.type === 'anyOf' ? labels.allowedTypes : labels.properties
+      }
     >
       <SchemaTable nodes={node.children} />
     </Expandable>
@@ -38,6 +42,7 @@ function schemaDetails(node: SchemaNode) {
 }
 
 function SchemaTable({ nodes }: { nodes: SchemaNode[] }) {
+  const labels = useLabels();
   return (
     <PropertiesTable>
       {nodes.map(node => (
@@ -48,7 +53,7 @@ function SchemaTable({ nodes }: { nodes: SchemaNode[] }) {
           required={node.required}
           deprecated={node.deprecated}
           default={node.default}
-          details={schemaDetails(node)}
+          details={schemaDetails(node, labels)}
         >
           <FieldChildren node={node} />
         </PropertiesTable.Row>
@@ -105,17 +110,19 @@ export interface OpenApiOperationProps {
 
 /** The generated reference for one API operation, rendered under the page body. */
 export function OpenApiOperation({ operation }: OpenApiOperationProps) {
-  const sections = new Map(operationSections(operation).map(entry => [entry.name, entry.id]));
+  const labels = useLabels();
+  const sectionEntries = operationSections(operation);
+  const sections = new Map(sectionEntries.map(entry => [entry.name, entry.id]));
 
   return (
     <div className="docs-markdown">
-      {operationParameterSections(operation).map(({ location, name }) => (
+      {operationParameterSections(operation, labels).map(({ location, name }, index) => (
         <section key={location}>
-          <h2 id={sections.get(name)}>{name}</h2>
+          <h2 id={sectionEntries[index].id}>{name}</h2>
           <PropertiesTable>
             {location === 'header' && operation.security.length > 0 && (
               <PropertiesTable.Row name="Authorization" type="string" required>
-                Authentication credentials, e.g. <code>Bearer &lt;token&gt;</code>.
+                {labels.apiCredentials} <code>Bearer &lt;token&gt;</code>.
               </PropertiesTable.Row>
             )}
             {operation.parameters[location].map(parameter => (
@@ -126,7 +133,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
                 required={parameter.required}
                 deprecated={parameter.deprecated}
                 default={parameter.default}
-                details={schemaDetails(parameter)}
+                details={schemaDetails(parameter, labels)}
               >
                 <FieldChildren node={parameter} />
               </PropertiesTable.Row>
@@ -136,12 +143,12 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
       ))}
       {operation.requestBody && (
         <section>
-          <h2 id={sections.get('Request body')}>Request body</h2>
+          <h2 id={sections.get('Request body')}>{labels.apiRequestBody}</h2>
           <SchemaFields node={operation.requestBody.schema} />
           {operation.requestBody.example && (
             <HighlightedCode
               language="json"
-              title="Example request"
+              title={labels.apiExampleRequest}
               html={operation.requestBody.exampleHtml}
               source={operation.requestBody.example}
             />
@@ -150,7 +157,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
       )}
       {operation.responses.length > 0 && (
         <section>
-          <h2 id={sections.get('Responses')}>Responses</h2>
+          <h2 id={sections.get('Responses')}>{labels.apiResponses}</h2>
           {operation.responses.map(response => (
             <div key={response.status} className="mt-6 first:mt-0">
               <div className="flex items-center gap-2">
@@ -165,7 +172,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
               {response.example && (
                 <HighlightedCode
                   language="json"
-                  title={`${response.status} example`}
+                  title={labels.apiExampleResponse.replace('{status}', () => response.status)}
                   html={response.exampleHtml}
                   source={response.example}
                 />
@@ -176,7 +183,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
       )}
       {operation.samples.length > 0 && (
         <section>
-          <h2 id={sections.get('Code samples')}>Code samples</h2>
+          <h2 id={sections.get('Code samples')}>{labels.apiCodeSamples}</h2>
           <CodeGroup>
             {operation.samples.map(sample => (
               <HighlightedCode

package/src/components/PageActions.tsx

@@ -90,7 +90,7 @@ export function PageActions({
               rel="noopener noreferrer"
               className="ml-auto inline-flex shrink-0 items-center gap-1.5 text-right no-underline hover:text-primary"
             >
-              {site.editLink?.label || 'Edit this page'}
+              {site.editLink?.label || site.labels.editPage}
               <ExternalLink size={14} aria-hidden="true" />
             </a>
           )}
@@ -103,11 +103,11 @@ export function PageActions({
           data-pagefind-ignore
         >
           <fieldset
-            aria-label={feedback.prompt || 'Was this page helpful?'}
+            aria-label={feedback.prompt || site.labels.feedbackPrompt}
             className="flex flex-wrap items-center gap-2"
           >
             <span className="mr-2 text-muted-foreground">
-              {feedback.prompt || 'Was this page helpful?'}
+              {feedback.prompt || site.labels.feedbackPrompt}
             </span>
             {[true, false].map(helpful => (
               <button
@@ -118,14 +118,15 @@ export function PageActions({
                 onClick={() => void submit(helpful)}
                 className="rounded-md border border-border px-3 py-1.5 text-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-default disabled:opacity-60 aria-pressed:border-primary aria-pressed:text-primary"
               >
-                {helpful ? feedback.helpfulLabel || 'Yes' : feedback.unhelpfulLabel || 'No'}
+                {helpful
+                  ? feedback.helpfulLabel || site.labels.feedbackYes
+                  : feedback.unhelpfulLabel || site.labels.feedbackNo}
               </button>
             ))}
           </fieldset>
           <div role="status" aria-live="polite" className="text-muted-foreground">
-            {status === 'success' && (feedback.successMessage || 'Thanks for your feedback!')}
-            {status === 'error' &&
-              (feedback.errorMessage || 'Could not send feedback. Please try again.')}
+            {status === 'success' && (feedback.successMessage || site.labels.feedbackSuccess)}
+            {status === 'error' && (feedback.errorMessage || site.labels.feedbackError)}
           </div>
         </div>
       )}

package/src/components/docs/Changelog.tsx

@@ -7,6 +7,7 @@ import {
   useMemo,
 } from 'react';
 import { useSearchParams } from 'react-router';
+import { useLabels } from '@/lib/label-context';
 import { Badge } from './Badge';
 import { styles } from './styles';
 import { Update } from './Update';
@@ -73,6 +74,7 @@ function updateInfo(children: React.ReactNode): Map<string, UpdateChildInfo> {
  * Pages without any tagged updates render as a plain list.
  */
 export function Changelog({ children }: ChangelogProps) {
+  const labels = useLabels();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const allTags = useMemo(() => {
@@ -144,7 +146,7 @@ export function Changelog({ children }: ChangelogProps) {
   return (
     <div className={styles.changelog}>
       {/* biome-ignore lint/a11y/useSemanticElements: toggle-button group labelled for the filter */}
-      <div className={styles.changelogFilters} role="group" aria-label="Filter updates by tag">
+      <div className={styles.changelogFilters} role="group" aria-label={labels.filterUpdates}>
         {allTags.map(tag => {
           const active = selectedSet.has(tag.toLowerCase());
           return (
@@ -164,13 +166,11 @@ export function Changelog({ children }: ChangelogProps) {
         })}
         {selected.length > 0 ? (
           <button type="button" onClick={clear} className={styles.changelogClear}>
-            Clear
+            {labels.clear}
           </button>
         ) : null}
       </div>
-      {visibleUpdates === 0 ? (
-        <p className={styles.changelogEmpty}>No updates match the selected tags.</p>
-      ) : null}
+      {visibleUpdates === 0 ? <p className={styles.changelogEmpty}>{labels.noUpdates}</p> : null}
       {filtered}
     </div>
   );

package/src/components/docs/CodeGroup.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 import { TabsContent, TabsList, Tabs as TabsPrimitive, TabsTrigger } from '@/components/ui/tabs';
+import { useLabels } from '@/lib/label-context';
 import { styles } from './styles';
 import { findCodeLanguage, findCodeTitle, slugify, toElementArray } from './utils';
 
@@ -9,6 +10,7 @@ export interface CodeGroupProps {
 }
 
 export function CodeGroup({ children }: CodeGroupProps) {
+  const labels = useLabels();
   const blocks = useMemo(() => {
     const counts = new Map<string, number>();
 
@@ -55,7 +57,7 @@ export function CodeGroup({ children }: CodeGroupProps) {
       <TabsList
         variant="line"
         className="h-9 w-full justify-start gap-5 overflow-x-auto overflow-y-hidden rounded-none px-3 py-0 shadow-[inset_0_-1px_0_var(--border)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-        aria-label="Code snippets"
+        aria-label={labels.codeSnippets}
       >
         {blocks.map(block => (
           <TabsTrigger

package/src/components/docs/Mermaid.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode, useEffect, useId, useRef, useState } from 'react';
+import { useLabels } from '@/lib/label-context';
 import { styles } from './styles';
 
 export type MermaidPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
@@ -63,6 +64,7 @@ export function Mermaid({
   placement = 'bottom-right',
   children,
 }: MermaidProps) {
+  const labels = useLabels();
   const source = mermaidSource(chart, children);
   const containerRef = useRef<HTMLDivElement>(null);
   const svgHostRef = useRef<HTMLDivElement>(null);
@@ -129,29 +131,29 @@ export function Mermaid({
             // biome-ignore lint/security/noDangerouslySetInnerHtml: mermaid generates this SVG from the page's own diagram source.
             dangerouslySetInnerHTML={{ __html: svg }}
             role="img"
-            aria-label={title ? String(title) : 'Diagram'}
+            aria-label={title ? String(title) : labels.diagram}
           />
         ) : (
-          <pre className={styles.mermaidFallback} title="Diagram source">
+          <pre className={styles.mermaidFallback} title={labels.diagramSource}>
             {source}
           </pre>
         )}
-        {error ? <p className={styles.mermaidError}>Could not render this diagram.</p> : null}
+        {error ? <p className={styles.mermaidError}>{labels.diagramError}</p> : null}
         {showControls && svg && !error ? (
           <div className={`${styles.mermaidControls} ${PLACEMENT_CLASS[placement]}`}>
             <button
               type="button"
-              aria-label="Zoom out"
+              aria-label={labels.zoomOut}
               onClick={() => setZoom(z => Math.max(0.5, +(z - 0.25).toFixed(2)))}
             >
               −
             </button>
-            <button type="button" aria-label="Reset view" onClick={() => setZoom(1)}>
+            <button type="button" aria-label={labels.resetView} onClick={() => setZoom(1)}>
               ⟳
             </button>
             <button
               type="button"
-              aria-label="Zoom in"
+              aria-label={labels.zoomIn}
               onClick={() => setZoom(z => Math.min(2.5, +(z + 0.25).toFixed(2)))}
             >
               +