@umami/shiso 1.16.0 → 1.18.0

package/src/components/docs/Changelog.tsx

@@ -1,5 +1,13 @@
-import { Children, Fragment, isValidElement, type ReactElement, useMemo } from 'react';
+import {
+  Children,
+  Fragment,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  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';
@@ -13,12 +21,17 @@ interface UpdateChildInfo {
   tags: string[];
 }
 
+interface UpdateChildProps {
+  tags?: unknown;
+  children?: ReactNode;
+}
+
 /** Flattens fragments so <Update> entries are found however MDX nests them. */
-function flatElements(children: React.ReactNode): ReactElement<{ tags?: unknown }>[] {
-  const flat: ReactElement<{ tags?: unknown }>[] = [];
+function flatElements(children: React.ReactNode): ReactElement<UpdateChildProps>[] {
+  const flat: ReactElement<UpdateChildProps>[] = [];
 
   Children.forEach(children, child => {
-    if (!isValidElement<{ tags?: unknown }>(child)) {
+    if (!isValidElement<UpdateChildProps>(child)) {
       return;
     }
     if (child.type === Fragment) {
@@ -43,9 +56,11 @@ function updateInfo(children: React.ReactNode): Map<string, UpdateChildInfo> {
     const key = String(child.key ?? `update-${index}`);
     const raw = child.props.tags;
     const tags = Array.isArray(raw)
-      ? [...new Set(raw.filter((tag): tag is string => typeof tag === 'string' && tag.trim()))].map(
-          tag => tag.trim(),
-        )
+      ? [
+          ...new Set(
+            raw.filter((tag): tag is string => typeof tag === 'string' && tag.trim().length > 0),
+          ),
+        ].map(tag => tag.trim())
       : [];
     info.set(key, { key, tags });
   });
@@ -59,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(() => {
@@ -130,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 (
@@ -142,7 +158,7 @@ export function Changelog({ children }: ChangelogProps) {
               className={styles.changelogFilterButton}
               data-active={active ? '' : undefined}
             >
-              <Badge size="sm" color={active ? 'primary' : undefined}>
+              <Badge size="sm" tone={active ? 'primary' : undefined}>
                 {tag}
               </Badge>
             </button>
@@ -150,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)))}
             >
               +

package/src/components/docs/PropertiesTable.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { useLabels } from '@/lib/label-context';
 import { Badge } from './Badge';
 import { decodeHtmlEntities, toElementArray } from './utils';
 
@@ -27,6 +28,7 @@ function displayValue(value: PropertiesTableRowProps['type']): string | undefine
 }
 
 export function PropertiesTable({ children }: PropertiesTableProps) {
+  const labels = useLabels();
   const rows = toElementArray<PropertiesTableRowProps>(children);
 
   if (!rows.length) {
@@ -40,9 +42,9 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
       <table className="m-0 table-fixed [overflow-wrap:anywhere]">
         <thead>
           <tr>
-            <th className="w-[30%]">Name</th>
-            <th className="w-[15%]">Type</th>
-            <th>Description</th>
+            <th className="w-[30%]">{labels.fieldName}</th>
+            <th className="w-[15%]">{labels.fieldType}</th>
+            <th>{labels.fieldDescription}</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>
@@ -60,6 +62,7 @@ function PropertiesTableRow({
   children,
   details,
 }: PropertiesTableRowProps) {
+  const labels = useLabels();
   const defaultValue = displayValue(value);
 
   return (
@@ -70,17 +73,19 @@ function PropertiesTableRow({
             {name}
             {required ? (
               <Badge size="sm" tone="primary">
-                required
+                {labels.fieldRequired}
               </Badge>
             ) : null}
-            {deprecated ? <Badge size="sm">deprecated</Badge> : null}
+            {deprecated ? <Badge size="sm">{labels.fieldDeprecated}</Badge> : null}
           </span>
         </td>
         <td>{displayValue(type)}</td>
         <td className="[&_p]:m-0">
           {children}
           {defaultValue ? (
-            <span className="mt-1 block text-muted-foreground">Default: {defaultValue}</span>
+            <span className="mt-1 block text-muted-foreground">
+              {labels.fieldDefault} {defaultValue}
+            </span>
           ) : null}
         </td>
       </tr>

package/src/components/docs/Tabs.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { TabsContent, TabsList, Tabs as TabsPrimitive, TabsTrigger } from '@/components/ui/tabs';
+import { useLabels } from '@/lib/label-context';
 import { slugify, toElementArray } from './utils';
 
 interface TabChildProps {
@@ -18,6 +19,7 @@ export interface TabsProps {
 }
 
 export function Tabs({ children, group }: TabsProps) {
+  const labels = useLabels();
   const tabs = useMemo(() => {
     const counts = new Map<string, number>();
 
@@ -94,7 +96,7 @@ export function Tabs({ children, group }: TabsProps) {
       <TabsList
         variant="line"
         className="w-full justify-start gap-5 overflow-x-auto overflow-y-hidden p-0 shadow-[inset_0_-1px_0_var(--border)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-        aria-label="Content tabs"
+        aria-label={labels.contentTabs}
       >
         {tabs.map(tab => (
           <TabsTrigger

package/src/components/docs/Tree.tsx

@@ -14,6 +14,7 @@ import {
   Folder as FolderIcon,
   FolderOpen,
 } from '@/components/icons';
+import { useLabels } from '@/lib/label-context';
 import { styles } from './styles';
 
 export interface TreeFolderProps {
@@ -208,6 +209,7 @@ function visibleFocusables(root: HTMLElement): HTMLElement[] {
 }
 
 function TreeRoot({ children, style, className }: TreeProps) {
+  const labels = useLabels();
   const rootRef = useRef<HTMLDivElement>(null);
   const searchRef = useRef({ text: '', timer: 0 });
 
@@ -334,7 +336,7 @@ function TreeRoot({ children, style, className }: TreeProps) {
       onKeyDown={onKeyDown}
     >
       {/* biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: tree is the required ARIA role for this widget */}
-      <ul role="tree" aria-label="File tree" className={styles.treeList}>
+      <ul role="tree" aria-label={labels.fileTree} className={styles.treeList}>
         {content}
       </ul>
     </div>

package/src/components/docs/ZoomableImage.tsx

@@ -1,5 +1,6 @@
 import type { ImgHTMLAttributes } from 'react';
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { useLabels } from '@/lib/label-context';
 import { cn } from '@/lib/utils';
 
 export interface ZoomableImageProps extends ImgHTMLAttributes<HTMLImageElement> {
@@ -13,6 +14,7 @@ export function ZoomableImage({
   src,
   ...props
 }: ZoomableImageProps) {
+  const labels = useLabels();
   const image = (
     <img
       {...props}
@@ -26,7 +28,7 @@ export function ZoomableImage({
     return image;
   }
 
-  const label = alt ? `View “${alt}” full size` : 'View image full size';
+  const label = alt ? labels.viewNamedImage.replace('{alt}', () => alt) : labels.viewImage;
 
   return (
     <Dialog>
@@ -47,7 +49,7 @@ export function ZoomableImage({
         overlayClassName="bg-black/80 supports-backdrop-filter:backdrop-blur-sm"
         className="flex max-h-[calc(100vh-2rem)] w-auto max-w-[calc(100vw-2rem)] items-center justify-center bg-transparent p-0 ring-0 shadow-none sm:max-w-[calc(100vw-2rem)]"
       >
-        <DialogTitle className="sr-only">{alt || 'Full-size image'}</DialogTitle>
+        <DialogTitle className="sr-only">{alt || labels.fullSizeImage}</DialogTitle>
         <img
           src={src}
           srcSet={props.srcSet}

package/src/components/ui/dialog.tsx

@@ -2,6 +2,7 @@ import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { XIcon } from 'lucide-react';
 import type * as React from 'react';
 import { Button } from '@/components/ui/button';
+import { useLabels } from '@/lib/label-context';
 import { cn } from '@/lib/utils';
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
@@ -43,6 +44,7 @@ function DialogContent({
   showCloseButton?: boolean;
   overlayClassName?: string;
 }) {
+  const labels = useLabels();
   return (
     <DialogPortal>
       <DialogOverlay className={overlayClassName} />
@@ -61,7 +63,7 @@ function DialogContent({
             render={<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm" />}
           >
             <XIcon />
-            <span className="sr-only">Close</span>
+            <span className="sr-only">{labels.close}</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
@@ -83,6 +85,7 @@ function DialogFooter({
 }: React.ComponentProps<'div'> & {
   showCloseButton?: boolean;
 }) {
+  const labels = useLabels();
   return (
     <div
       data-slot="dialog-footer"
@@ -94,7 +97,9 @@ function DialogFooter({
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          {labels.close}
+        </DialogPrimitive.Close>
       )}
     </div>
   );

package/src/components/ui/sheet.tsx

@@ -1,4 +1,6 @@
-'use client';
+import { useLabels } from '@/lib/label-context';
+
+('use client');
 
 import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
 import { XIcon } from 'lucide-react';
@@ -45,6 +47,7 @@ function SheetContent({
   side?: 'top' | 'right' | 'bottom' | 'left';
   showCloseButton?: boolean;
 }) {
+  const labels = useLabels();
   return (
     <SheetPortal>
       <SheetOverlay />
@@ -64,7 +67,7 @@ function SheetContent({
             render={<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm" />}
           >
             <XIcon />
-            <span className="sr-only">Close</span>
+            <span className="sr-only">{labels.close}</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>

package/src/lib/label-context.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+import { englishLabels } from '@/lib/labels';
+
+export const LabelContext = createContext(englishLabels);
+export function useLabels() {
+  return useContext(LabelContext);
+}

package/src/lib/labels.ts

@@ -0,0 +1,37 @@
+import { resolveLocale } from '@/lib/locale';
+import de from '@/lib/translations/de.json';
+import en from '@/lib/translations/en.json';
+import es from '@/lib/translations/es.json';
+import fr from '@/lib/translations/fr.json';
+import ja from '@/lib/translations/ja.json';
+import zhHans from '@/lib/translations/zh-Hans.json';
+import zhHant from '@/lib/translations/zh-Hant.json';
+import type { ThemeLabels, Translations } from '@/lib/types';
+
+export const englishLabels: ThemeLabels = en;
+const dictionaries: Record<string, ThemeLabels> = {
+  en,
+  de,
+  es,
+  fr,
+  ja,
+  'zh-Hans': zhHans,
+  'zh-Hant': zhHant,
+};
+
+/** Merge from least to most specific; overrides win at each locale level. */
+export function resolveLabels(locale: string, overrides: Translations = {}): ThemeLabels {
+  const tag = new Intl.Locale(resolveLocale(locale, 'en'));
+  const script = tag.script || (tag.language === 'zh' ? tag.maximize().script : undefined);
+  const candidates = new Set([
+    'en',
+    tag.language,
+    ...(script ? [`${tag.language}-${script}`] : []),
+    tag.baseName,
+  ]);
+  const labels = { ...englishLabels };
+  for (const candidate of candidates) {
+    Object.assign(labels, dictionaries[candidate], overrides[candidate]);
+  }
+  return labels;
+}

package/src/lib/locale.ts

@@ -37,3 +37,28 @@ export function getTextDirection(locale: string): 'ltr' | 'rtl' {
   const primary = locale.split('-')[0]?.toLowerCase() || '';
   return RTL_LANGUAGES.has(primary) ? 'rtl' : 'ltr';
 }
+
+/**
+ * A language's name written in that language, for language selectors:
+ * "ja" -> "日本語", "zh-Hant" -> "繁體中文", "es" -> "Español". Labels that
+ * are not valid locale codes (e.g. "English") are returned unchanged.
+ */
+export function getLanguageName(language: string): string {
+  if (!isValidLocale(language)) {
+    return language;
+  }
+
+  const locale = Intl.getCanonicalLocales(language)[0];
+
+  try {
+    const name = new Intl.DisplayNames([locale], { type: 'language', fallback: 'none' }).of(locale);
+
+    if (!name) {
+      return language;
+    }
+
+    return name.charAt(0).toLocaleUpperCase(locale) + name.slice(1);
+  } catch {
+    return language;
+  }
+}

package/src/lib/openapi.ts

@@ -1,3 +1,4 @@
+import { englishLabels } from '@/lib/labels';
 /**
  * Runtime helpers for OpenAPI reference pages. Operation data is produced at
  * build time by scripts/generate-openapi.mjs and reaches the client through
@@ -7,7 +8,7 @@
 import type { BadgeColor } from '@/components/docs/Badge';
 import { OPENAPI_OPERATIONS } from '@/lib/openapi.generated';
 import { createSlugger } from '@/lib/slug';
-import type { NormalizedOperation, TocEntry } from '@/lib/types';
+import type { NormalizedOperation, ThemeLabels, TocEntry } from '@/lib/types';
 
 export const METHOD_COLORS: Record<string, BadgeColor> = {
   GET: 'green',
@@ -46,12 +47,15 @@ export function hasParameters(operation: NormalizedOperation): boolean {
 }
 
 /** Parameter groups shared by the renderer and table of contents. */
-export function operationParameterSections(operation: NormalizedOperation) {
+export function operationParameterSections(
+  operation: NormalizedOperation,
+  labels: ThemeLabels = englishLabels,
+) {
   const groups = [
-    { location: 'header', name: 'Headers' },
-    { location: 'path', name: 'Path parameters' },
-    { location: 'query', name: 'Query parameters' },
-    { location: 'cookie', name: 'Cookie parameters' },
+    { location: 'header', name: labels.apiHeaders },
+    { location: 'path', name: labels.apiPathParameters },
+    { location: 'query', name: labels.apiQueryParameters },
+    { location: 'cookie', name: labels.apiCookieParameters },
   ] as const;
 
   return groups.filter(
@@ -66,7 +70,10 @@ export function operationParameterSections(operation: NormalizedOperation) {
  * truth for section ids: the component, the table of contents, the content
  * checker, and the search indexer all derive their anchors from these labels.
  */
-export function operationSections(operation: NormalizedOperation): TocEntry[] {
+export function operationSections(
+  operation: NormalizedOperation,
+  labels: ThemeLabels = englishLabels,
+): TocEntry[] {
   const slugger = createSlugger();
   const names = [
     ...operationParameterSections(operation).map(section => section.name),
@@ -75,5 +82,11 @@ export function operationSections(operation: NormalizedOperation): TocEntry[] {
     operation.samples.length ? 'Code samples' : undefined,
   ].filter((name): name is string => Boolean(name));
 
-  return names.map(name => ({ name, id: slugger.slug(name), size: 2 }));
+  const translated = [
+    ...operationParameterSections(operation, labels).map(section => section.name),
+    ...(operation.requestBody ? [labels.apiRequestBody] : []),
+    ...(operation.responses.length ? [labels.apiResponses] : []),
+    ...(operation.samples.length ? [labels.apiCodeSamples] : []),
+  ];
+  return names.map((name, index) => ({ name: translated[index], id: slugger.slug(name), size: 2 }));
 }

package/src/lib/site-config.ts

@@ -8,6 +8,7 @@ import {
   getPageByPathname as getSitePageByPathname,
   normalizeDocsSite,
 } from '@/lib/docs-config';
+import { resolveLabels } from '@/lib/labels';
 import { getTextDirection, resolveLocale } from '@/lib/locale';
 import { DOCS_PREFIX, stripBase } from '@/lib/paths';
 import { resolveSiteModel } from '@/lib/site-model';
@@ -53,10 +54,60 @@ export function getStandalonePage(pathname: string): StandalonePage | null {
   return getStandalonePageByPathname(standalonePages, stripBase(pathname));
 }
 
-/** Scope that owns the current pathname; the default scope for unknown paths. */
+/** Landing scope of a language: its default version. */
+function getLanguageScope(language: string): DocsScope | undefined {
+  return docsSite.scopes.find(scope => scope.language === language && scope.isLanguageDefault);
+}
+
+/**
+ * Scope that owns the current pathname. A standalone page tagged with a
+ * `language` belongs to that language's landing scope; unknown paths and
+ * untagged standalone pages belong to the default scope.
+ */
 export function getScopeByPathname(pathname: string): DocsScope {
   const page = getPageByPathname(pathname);
-  return page ? getScopeForPage(docsSite, page) : getDefaultScope(docsSite);
+
+  if (page) {
+    return getScopeForPage(docsSite, page);
+  }
+
+  const standalone = getStandalonePage(pathname);
+  const languageScope = standalone?.language ? getLanguageScope(standalone.language) : undefined;
+
+  return languageScope || getDefaultScope(docsSite);
+}
+
+/**
+ * The same standalone page in another language, matched by `key`. Untagged
+ * pages count as the default scope's language.
+ */
+export function getStandaloneCounterpart(
+  page: StandalonePage,
+  language: string,
+): StandalonePage | null {
+  const defaultLanguage = getDefaultScope(docsSite).language;
+
+  return (
+    standalonePages.find(
+      candidate =>
+        candidate.key === page.key && (candidate.language || defaultLanguage) === language,
+    ) || null
+  );
+}
+
+/**
+ * Home link for the current pathname: the "/" standalone page in the current
+ * language when one exists, else "/", else the docs home when nothing owns "/".
+ */
+export function getHomeHref(pathname: string): string {
+  const root = standalonePages.find(page => page.path === '/');
+
+  if (!root) {
+    return docsHomeUrl;
+  }
+
+  const language = getScopeByPathname(pathname).language;
+  return (language && getStandaloneCounterpart(root, language)?.path) || '/';
 }
 
 /** Document language and direction for a pathname, from its scope's language. */
@@ -65,6 +116,19 @@ export function getLocaleByPathname(pathname: string): { lang: string; dir: 'ltr
   return { lang, dir: getTextDirection(lang) };
 }
 
+/** Resolve UI text on every route, including standalone pages and language switches. */
+export function getSiteModelByPathname(pathname: string) {
+  const { lang } = getLocaleByPathname(pathname);
+  const labels = resolveLabels(lang, shisoConfig.translations);
+  const customPrompt =
+    typeof siteConfig.search === 'object' ? siteConfig.search.prompt?.trim() : undefined;
+  return {
+    ...siteModel,
+    labels,
+    search: { ...siteModel.search, prompt: customPrompt || labels.searchPlaceholder },
+  };
+}
+
 export const siteName = siteModel.name;
 
 /** Trailing-slash-insensitive route key for redirect matching. */

package/src/lib/site-model.ts

@@ -1,4 +1,5 @@
 import { resolveCodeBlockConfig } from '@/lib/code-blocks';
+import { resolveLabels, englishLabels as SHISO_THEME_LABELS } from '@/lib/labels';
 import { toAbsoluteUrl, toHref } from '@/lib/paths';
 import { resolveSearchConfig } from '@/lib/search/config';
 import type {
@@ -18,37 +19,6 @@ import type {
   ThemeLabels,
 } from '@/lib/types';
 
-const SHISO_THEME_LABELS: ThemeLabels = {
-  menu: 'Menu',
-  documentationNavigation: 'Documentation navigation',
-  sections: 'Sections',
-  tableOfContents: 'On this page',
-  tableOfContentsNavigation: 'Table of contents',
-  searchTitle: 'Search',
-  searching: 'Searching...',
-  searchUnavailable: 'Search unavailable',
-  noResults: 'No results',
-  lastUpdated: 'Last updated on',
-  relatedTopics: 'Related topics',
-  previousPage: 'Previous',
-  nextPage: 'Next',
-  notFound: 'Page not found',
-  dismissBanner: 'Dismiss banner',
-  toggleTheme: 'Toggle theme',
-  moreOptions: 'More options',
-  copied: 'Copied',
-  expand: 'Expand',
-  collapse: 'Collapse',
-  copyPage: 'Copy page',
-  copyPageDescription: 'Copy this page as Markdown',
-  viewMarkdown: 'View as Markdown',
-  viewMarkdownDescription: 'Open this page as plain Markdown',
-  openInChatGPT: 'Open in ChatGPT',
-  openInClaude: 'Open in Claude',
-  openInPerplexity: 'Open in Perplexity',
-  askQuestionsAboutPage: 'Ask questions about this page',
-};
-
 function isInternalHref(href: string): boolean {
   return /^(?:#|\/|\.\.?\/)/.test(href);
 }
@@ -136,10 +106,12 @@ export function resolveSiteModel(
     search: resolveSearchConfig(config.search),
     contextualOptions: config.contextual?.options || [],
     error404: { ...config.errors?.['404'], redirect: config.errors?.['404']?.redirect !== false },
+    editLink: config.editLink || null,
+    feedback: config.feedback || null,
     showTimestamp: config.metadata?.timestamp === true,
     drilldown: config.interaction?.drilldown,
     locale: shiso?.locale || 'en-US',
-    labels: SHISO_THEME_LABELS,
+    labels: resolveLabels(shiso?.locale || 'en-US', shiso?.translations),
     docs,
   };
 }