@umami/shiso 1.16.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "1.16.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,43 +3,61 @@ 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';
 
+// Runtime helpers are public exports, but cannot be rendered as MDX components.
+const {
+  mermaidSource: _mermaidSource,
+  usePanelContent: _usePanelContent,
+  useSetPanelContent: _useSetPanelContent,
+  ...mdxDocsComponents
+} = docsComponents;
+
 const mdxComponents = {
-  ...docsComponents,
+  ...mdxDocsComponents,
   img: docsComponents.ZoomableImage,
   pre: CodeBlock,
 };
 
 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/DocContent.tsx

@@ -3,6 +3,7 @@ import { ContextualMenu } from '@/components/ContextualMenu';
 import { Badge } from '@/components/docs/Badge';
 import { ArrowLeft, ArrowRight, FileText } from '@/components/icons';
 import { OpenApiOperation } from '@/components/OpenApiOperation';
+import { PageActions } from '@/components/PageActions';
 import { getLastModified } from '@/lib/content';
 import { getScopeForPage } from '@/lib/docs-config';
 import { resolveLocale } from '@/lib/locale';
@@ -135,12 +136,20 @@ export function DocContent({ page, doc, site }: DocContentProps) {
         <Content />
       </div>
       {operation && <OpenApiOperation operation={operation} />}
-      {lastModified && (
-        <div className="mt-8 text-sm text-muted-foreground">
-          {site.labels.lastUpdated}{' '}
-          <time dateTime={lastModified}>{dateFormat.format(new Date(lastModified))}</time>
-        </div>
-      )}
+      <PageActions
+        key={page.url}
+        page={page}
+        frontmatter={doc.frontmatter}
+        site={site}
+        lastUpdated={
+          lastModified ? (
+            <>
+              {site.labels.lastUpdated}{' '}
+              <time dateTime={lastModified}>{dateFormat.format(new Date(lastModified))}</time>
+            </>
+          ) : undefined
+        }
+      />
       {related.length > 0 && (
         <nav className="mt-8" aria-label={site.labels.relatedTopics} data-pagefind-ignore>
           <div className="text-sm text-muted-foreground">{site.labels.relatedTopics}</div>

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

@@ -8,19 +8,29 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { getLanguageScopes } from '@/lib/docs-config';
-import { docsSite, getScopeByPathname } from '@/lib/site-config';
+import { getLanguageName, isValidLocale } from '@/lib/locale';
+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
- * appear as options.
+ * 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 "日本語".
  */
 export function LanguageSwitcher() {
   const { pathname } = useLocation();
   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;
@@ -36,7 +46,7 @@ export function LanguageSwitcher() {
           />
         }
       >
-        {current.language}
+        {getLanguageName(current.language)}
         <ChevronRight className="size-3.5 rotate-90 text-muted-foreground" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="min-w-32">
@@ -45,11 +55,21 @@ 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);
               }
             }}
           >
-            <span className="grow">{scope.language}</span>
+            <span
+              className="grow"
+              lang={isValidLocale(scope.language) ? scope.language : undefined}
+            >
+              {scope.language ? getLanguageName(scope.language) : null}
+            </span>
             {scope.language === current.language ? <Check className="size-3.5" /> : null}
           </DropdownMenuItem>
         ))}

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

@@ -0,0 +1,135 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { ExternalLink } from '@/components/icons';
+import { toHref } from '@/lib/paths';
+import type { DocFrontmatter, NormalizedDocsPage, SiteModel } from '@/lib/types';
+
+function editHref(template: string | undefined, filePath: string): string | undefined {
+  if (!template) return undefined;
+  const file = filePath.replace(/^\/+/, '').split('/').map(encodeURIComponent).join('/');
+  const href = template.replaceAll('$file', file);
+  try {
+    const url = new URL(href);
+    if (url.protocol === 'https:' || url.protocol === 'http:') return url.href;
+  } catch {
+    // Invalid frontmatter URLs should never become executable links.
+  }
+  return undefined;
+}
+
+export function PageActions({
+  page,
+  frontmatter,
+  site,
+  lastUpdated,
+}: {
+  page: NormalizedDocsPage;
+  frontmatter?: DocFrontmatter;
+  site: SiteModel;
+  lastUpdated?: ReactNode;
+}) {
+  const [status, setStatus] = useState<'idle' | 'pending' | 'success' | 'error'>('idle');
+  const [rating, setRating] = useState<boolean>();
+  const request = useRef<AbortController | null>(null);
+  useEffect(() => () => request.current?.abort(), []);
+
+  const feedback = frontmatter?.feedback === false ? null : site.feedback;
+  const href =
+    frontmatter?.editLink === false
+      ? undefined
+      : editHref(
+          typeof frontmatter?.editLink === 'string' ? frontmatter.editLink : site.editLink?.url,
+          page.filePath,
+        );
+
+  async function submit(helpful: boolean) {
+    if (!feedback || request.current || status === 'success') return;
+    const controller = new AbortController();
+    request.current = controller;
+    setRating(helpful);
+    setStatus('pending');
+    const timeout = window.setTimeout(() => controller.abort(), 15000);
+    try {
+      const endpoint = new URL(toHref(feedback.endpoint), window.location.origin);
+      if (!['https:', 'http:'].includes(endpoint.protocol)) throw new Error('Invalid endpoint');
+      const response = await fetch(endpoint.href, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          helpful,
+          path: toHref(page.url),
+          title: frontmatter?.title || page.label,
+          language: page.language,
+          version: page.version,
+        }),
+        signal: controller.signal,
+      });
+      if (!response.ok) throw new Error('Feedback submission failed');
+      setStatus('success');
+    } catch {
+      setStatus('error');
+    } finally {
+      window.clearTimeout(timeout);
+      request.current = null;
+    }
+  }
+
+  if (!href && !feedback && !lastUpdated) return null;
+
+  return (
+    <>
+      {(lastUpdated || href) && (
+        <div
+          className="mt-8 flex items-baseline gap-4 text-sm text-muted-foreground"
+          data-pagefind-ignore
+        >
+          {lastUpdated && <div className="min-w-0">{lastUpdated}</div>}
+          {href && (
+            <a
+              href={href}
+              target="_blank"
+              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 || site.labels.editPage}
+              <ExternalLink size={14} aria-hidden="true" />
+            </a>
+          )}
+        </div>
+      )}
+      {feedback && (
+        <div
+          className="mt-8 flex flex-col gap-2 border-t border-border pt-6 text-sm"
+          aria-busy={status === 'pending'}
+          data-pagefind-ignore
+        >
+          <fieldset
+            aria-label={feedback.prompt || site.labels.feedbackPrompt}
+            className="flex flex-wrap items-center gap-2"
+          >
+            <span className="mr-2 text-muted-foreground">
+              {feedback.prompt || site.labels.feedbackPrompt}
+            </span>
+            {[true, false].map(helpful => (
+              <button
+                key={String(helpful)}
+                type="button"
+                aria-pressed={rating === helpful}
+                disabled={status === 'pending' || status === 'success'}
+                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 || site.labels.feedbackYes
+                  : feedback.unhelpfulLabel || site.labels.feedbackNo}
+              </button>
+            ))}
+          </fieldset>
+          <div role="status" aria-live="polite" className="text-muted-foreground">
+            {status === 'success' && (feedback.successMessage || site.labels.feedbackSuccess)}
+            {status === 'error' && (feedback.errorMessage || site.labels.feedbackError)}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}