@master/internal-site 0.1.3 → 0.2.0

package/src/demo/DemoViewport.svelte

@@ -28,6 +28,8 @@
 </script>
 
 <script lang="ts">
+  import { getSite } from '@master/internal-site/site'
+  const { t } = getSite()
   import '@master/internal-site/styles/interface.css'
   import '@master/internal-site/styles/system/browser.css'
   import '@master/internal-site/styles/system/range.css'
@@ -292,38 +294,38 @@
   {#if chrome}<div class="ui-browser-bar" aria-hidden="true"><span class="ui-browser-dots"><i></i><i></i><i></i></span></div>{/if}
   <div bind:this={body} class="ui-browser-body">
     <div class="ui-browser-viewport" style:width={width ? `${width}px` : `min(100%, ${maxWidth}px)`}>
-      <iframe bind:this={frame} {title} srcdoc={source} {src} loading="lazy" data-ready={ready} data-sizing={sizing}
+      <iframe bind:this={frame} title={t(title)} srcdoc={source} {src} loading="lazy" data-ready={ready} data-sizing={sizing}
         style:height={`${sizing === 'content' ? contentHeight ?? height : height}px`} onload={load}></iframe>
       {#if responsive}<span class="ui-resize" aria-hidden="true" onpointerdown={drag}></span>{/if}
     </div>
   </div>
 </div>
 {#if responsive || motion || print || theme || Boolean(inspect?.length)}
-  <div class="ui-browser-tools" role="group" aria-label={`${title} controls`}>
+  <div class="ui-browser-tools" role="group" aria-label={t('{label} controls').replace('{label}', t(title))}>
     {#if responsive}
-      {#if widthPresets?.length}<div class="ui-segmented" role="group" aria-label={`${rangeLabel} presets`}>
+      {#if widthPresets?.length}<div class="ui-segmented" role="group" aria-label={t('{label} presets').replace('{label}', t(rangeLabel))}>
         {#each widthPresets as preset (preset.label)}<button type="button" disabled={!ready}
-          aria-pressed={width === preset.width} onclick={() => { width = preset.width }}>{preset.label}</button>{/each}
+          aria-pressed={width === preset.width} onclick={() => { width = preset.width }}>{t(preset.label)}</button>{/each}
       </div>{/if}
       <span class="ui-browser-range">
-        <label class="ui-label" data-case="as-is" for={widthId}>{rangeLabel}</label>
+        <label class="ui-label" data-case="as-is" for={widthId}>{t(rangeLabel)}</label>
         <input id={widthId} class="ui-range" disabled={!ready} type="range" min={range.min} max={range.max} step="1" value={range.value}
           style:--value={`${((range.value - range.min) / Math.max(1, range.max - range.min)) * 100}%`}
           oninput={event => { width = Number(event.currentTarget.value) }} />
         {#if ready}<output class="ui-browser-size" for={widthId}>{fitWidth} px</output>{/if}
       </span>
-      <button type="button" disabled={!ready} class="ui-button" data-size="sm" onclick={() => { width = undefined }}>Fit</button>
+      <button type="button" disabled={!ready} class="ui-button" data-size="sm" onclick={() => { width = undefined }}>{t('Fit')}</button>
     {/if}
-    {#if theme}<button type="button" disabled={!ready} class="ui-button" data-size="sm" aria-pressed={isDark} title="Toggle dark theme" onclick={() => { dark = !isDark }}>
-      {#if isDark}<IconMoon aria-hidden="true" />{:else}<IconSun aria-hidden="true" />{/if}Theme
+    {#if theme}<button type="button" disabled={!ready} class="ui-button" data-size="sm" aria-pressed={isDark} title={t('Toggle dark theme')} onclick={() => { dark = !isDark }}>
+      {#if isDark}<IconMoon aria-hidden="true" />{:else}<IconSun aria-hidden="true" />{/if}{t('Theme')}
     </button>{/if}
     {#if motion}
       <button type="button" disabled={!ready} class="ui-button" data-size="sm" onclick={() => animate(playing ? 'pause' : 'play')}>
-        {#if playing}<IconPlayerPause aria-hidden="true" />{:else}<IconPlayerPlay aria-hidden="true" />{/if}{playing ? 'Pause' : 'Play'}
+        {#if playing}<IconPlayerPause aria-hidden="true" />{:else}<IconPlayerPlay aria-hidden="true" />{/if}{playing ? t('Pause') : t('Play')}
       </button>
-      <button type="button" disabled={!ready} class="ui-button" data-size="sm" data-variant="quiet" onclick={() => animate('restart')}><IconRefresh aria-hidden="true" />Replay</button>
+      <button type="button" disabled={!ready} class="ui-button" data-size="sm" data-variant="quiet" onclick={() => animate('restart')}><IconRefresh aria-hidden="true" />{t('Replay')}</button>
     {/if}
-    {#if print}<button type="button" disabled={!ready} class="ui-button" data-size="sm" onclick={() => frame?.contentWindow?.print()}><IconPrinter aria-hidden="true" />Print preview</button>{/if}
+    {#if print}<button type="button" disabled={!ready} class="ui-button" data-size="sm" onclick={() => frame?.contentWindow?.print()}><IconPrinter aria-hidden="true" />{t('Print preview')}</button>{/if}
     {#if properties}<output aria-live="polite">{properties}</output>{/if}
   </div>
 {/if}

package/src/demo/DemoWaterfall.astro

@@ -1,4 +1,6 @@
 ---
+import { siteOf } from '@master/internal-site/astro/site-context'
+const { t } = siteOf(Astro)
 import '@master/internal-site/styles/system/waterfall.css'
 import Demo from '@master/internal-site/demo/Demo.svelte'
 import type { DemoWaterfallProps } from '@master/internal-site/demo/demo-waterfall.ts'
@@ -15,7 +17,7 @@ for (const { label, start, end } of rows) {
 
 <Demo title={title} description={description} caption={caption} padding="sm" aria-label={title}>
   <div class="w-full ui-waterfall">
-    <div class="ui-waterfall-axis" aria-hidden="true"><span /><div class="relative"><span>Earlier</span>{marker && <span class="absolute font-medium fg-text-strong (translate:-50%)" style={{ left: `${marker.position}%` }}>{marker.label}</span>}<span>Later</span></div></div>
+    <div class="ui-waterfall-axis" aria-hidden="true"><span /><div class="relative"><span>{t("Earlier")}</span>{marker && <span class="absolute font-medium fg-text-strong (translate:-50%)" style={{ left: `${marker.position}%` }}>{marker.label}</span>}<span>{t("Later")}</span></div></div>
     {/* Preserve WebKit list semantics without list markers. */}
     <ul role="list" class="grid gap-2xs m(0) p(0) (list-style:none)">
       {rows.map(({ label, start, end, tone = 'blue' }) => <li class="ui-waterfall-row">

package/src/demo/ProjectStyleExample.astro

@@ -1,6 +1,8 @@
 ---
 import DemoConfiguredExample from '@master/internal-site/demo/DemoConfiguredExample.astro'
 import { projectStyleExample, type ProjectStyleName } from '@master/internal-site/demo/project-style-examples.ts'
+import { documentCopyOf, siteOf } from '@master/internal-site/astro/site-context'
+import { demoCopy } from '@master/internal-site/utils/document-copy.js'
 
 interface Props {
   name: ProjectStyleName
@@ -8,6 +10,7 @@ interface Props {
 }
 
 const { name, code = true } = Astro.props
+const example = demoCopy(documentCopyOf(Astro), siteOf(Astro).locale, `ProjectStyleExample:${name}`, projectStyleExample(name))
 ---
 
-<DemoConfiguredExample name={name} {...projectStyleExample(name)} code={code} />
+<DemoConfiguredExample name={name} {...example} code={code} />

package/src/demo/foundations/FoundationDialog.astro

@@ -1,9 +1,12 @@
 ---
 import '@master/internal-site/styles/interface.css'
 import FoundationSpecimen from '@master/internal-site/demo/foundations/FoundationSpecimen.astro'
+import { dialogCopy } from './dialog-copy.js'
+interface Props { title?: string; caption?: string }
+const { title = dialogCopy.title, caption = dialogCopy.caption } = Astro.props
 ---
 
-<FoundationSpecimen name="dialog-entrance" title="Motion follows a real action" scene={{ systemButtons: true, sizing: 'viewport', height: 340, css: `@theme {
+<FoundationSpecimen name="dialog-entrance" title={title} scene={{ systemButtons: true, sizing: 'viewport', height: 340, css: `@theme {
   --duration-enter: 180ms;
   --easing-emphasized: cubic-bezier(.16, 1, .3, 1);
   --animate-dialog-in: dialog-in var(--duration-enter) var(--easing-emphasized) both;
@@ -12,4 +15,4 @@ import FoundationSpecimen from '@master/internal-site/demo/foundations/Foundatio
     from { translate: 0 0.5rem; opacity: 0; }
     to { translate: 0; opacity: 1; }
   }
-`, html: "<article class=\"p-md r-sm b(1) b-solid b-line-divider bg-surface-raised\"><h2 class=\"m(0) text-lg font-regular\">Collection settings</h2><p class=\"mt-xs mb-md fg-text-muted\">Open a native dialog to preview its entrance.</p><button id=\"open\" type=\"button\" class=\"ui-button\">Open details</button></article>\n<dialog id=\"details\" aria-labelledby=\"dialog-title\" aria-describedby=\"dialog-description\" class=\"(width:calc(100%-32px)) max-w-xs m-auto p-md r-lg b(1) b-solid b-line-divider bg-surface-floating fg-text-body shadow-xl animate-dialog-in@media(screen)@motion-safe\">\n<h2 id=\"dialog-title\" class=\"m(0) text-lg font-regular fg-text-strong\">Collection details</h2><p id=\"dialog-description\" class=\"mt-sm mb-md\">This dialog has a finite entrance. Closing it is immediate.</p><form method=\"dialog\"><button class=\"ui-button\" autofocus>Close details</button></form>\n</dialog><script>const dialog = document.getElementById('details'); const openButton = document.getElementById('open'); openButton.addEventListener('click', () => dialog.showModal()); dialog.addEventListener('close', () => openButton.focus());</script>", caption: 'The dialog enters once on opening. Escape or Close details returns focus to its trigger. Reduced motion opens it immediately. Its modal boundary stays inside this preview.' }} />
+`, html: "<article class=\"p-md r-sm b(1) b-solid b-line-divider bg-surface-raised\"><h2 class=\"m(0) text-lg font-regular\">Collection settings</h2><p class=\"mt-xs mb-md fg-text-muted\">Open a native dialog to preview its entrance.</p><button id=\"open\" type=\"button\" class=\"ui-button\">Open details</button></article>\n<dialog id=\"details\" aria-labelledby=\"dialog-title\" aria-describedby=\"dialog-description\" class=\"(width:calc(100%-32px)) max-w-xs m-auto p-md r-lg b(1) b-solid b-line-divider bg-surface-floating fg-text-body shadow-xl animate-dialog-in@media(screen)@motion-safe\">\n<h2 id=\"dialog-title\" class=\"m(0) text-lg font-regular fg-text-strong\">Collection details</h2><p id=\"dialog-description\" class=\"mt-sm mb-md\">This dialog has a finite entrance. Closing it is immediate.</p><form method=\"dialog\"><button class=\"ui-button\" autofocus>Close details</button></form>\n</dialog><script>const dialog = document.getElementById('details'); const openButton = document.getElementById('open'); openButton.addEventListener('click', () => dialog.showModal()); dialog.addEventListener('close', () => openButton.focus());</script>", caption }} />

package/src/demo/foundations/FoundationTokensView.astro

@@ -1,4 +1,6 @@
 ---
+import { siteOf } from '@master/internal-site/astro/site-context.ts'
+const { t } = siteOf(Astro)
 import Demo from '@master/internal-site/demo/Demo.svelte'
 import DemoViewport from '@master/internal-site/demo/DemoViewport.svelte'
 import DemoThemeComparison from '@master/internal-site/demo/DemoThemeComparison.astro'
@@ -17,6 +19,13 @@ interface Props {
 const { namespace, keys, presentation = 'reference' } = Astro.props
 const tokens = namespace === 'breakpoints' ? [] : specimenTokens(namespace, keys)
 const tokenKeys = tokens.map(token => token.key).join(' ')
+const namespaceTitles: Record<string, string> = {
+  'color-surface': t('Surface colors'), 'color-line': t('Line colors'), 'color-text': t('Text colors'),
+  shadow: t('Shadow scale'), radius: t('Corner radius scale'), container: t('Container widths'),
+  'font-family': t('Font families'), 'font-size': t('Font sizes'), 'font-weight': t('Font weights'),
+  text: t('Text styles'), leading: t('Line heights'), tracking: t('Letter spacing'),
+  animate: t('Animations'), duration: t('Animation durations'), easing: t('Timing functions'),
+}
 
 function tokenScene(tokens: FoundationToken[], title: string, compare = false) {
   const scene = foundationScene(namespace, tokens.map(token => token.key))
@@ -39,22 +48,24 @@ if (namespace === 'color') {
   const aliases = rest.filter(token => defaultValue(token).startsWith('var('))
   const specials = rest.filter(token => !aliases.includes(token))
   scenes = [
-    aliases.length > 0 ? tokenScene(aliases, 'Hue aliases', true) : undefined,
-    specials.length > 0 ? tokenScene(specials, 'Special colors', true) : undefined,
+    aliases.length > 0 ? tokenScene(aliases, t('Hue aliases'), true) : undefined,
+    specials.length > 0 ? tokenScene(specials, t('Special colors'), true) : undefined,
   ].filter(scene => scene !== undefined)
 } else if (namespace !== 'breakpoints' && namespace !== 'spacing') {
-  const scene = tokenScene(tokens, namespace === 'shadow' ? 'Shadow scale' : namespace === 'radius' ? 'Corner radius scale' : namespace.replaceAll('-', ' '), namespace.startsWith('color-') || (namespace === 'shadow' && presentation === 'reference'))
+  const title = namespaceTitles[namespace]
+  if (!title) throw new Error(`Missing foundation title: ${namespace}`)
+  const scene = tokenScene(tokens, title, namespace.startsWith('color-') || (namespace === 'shadow' && presentation === 'reference'))
   scenes = scene ? [scene] : []
 }
 ---
 
 {namespace === 'breakpoints' ? <ThemeNumberVariableTable namespace="breakpoint" />
   : namespace === 'color' ? <div data-foundation-tokens={namespace} data-token-keys={tokenKeys}>
-    {palette.length > 0 && <Demo title="Fixed color steps" padding="sm" caption={specimenCaption.color}><Palette client:idle={{ timeout: 500 }} groups={palette} /></Demo>}
+    {palette.length > 0 && <Demo title={t('Fixed color steps')} padding="sm" caption={specimenCaption.color}><Palette client:idle={{ timeout: 500 }} groups={palette} /></Demo>}
     {scenes.map(({ scene, title }) => <DemoThemeComparison name={`tokens-${namespace}`} title={title} html={scene.html!} css={scene.css} caption={scene.caption} />)}
   </div>
   : <div data-foundation-tokens={namespace} data-token-keys={tokenKeys}>
-    {namespace === 'spacing' ? <><ThemeNumberVariableTable namespace="spacing" keys={keys} representation="spacing" referenceUnits={presentation !== 'guide'} /><p class="m(0) font-xs fg-text-muted">{presentation === 'guide' ? 'The striped area is the actual gap between two equal blocks.' : specimenCaption.spacing}</p></>
+    {namespace === 'spacing' ? <><ThemeNumberVariableTable namespace="spacing" keys={keys} representation="spacing" referenceUnits={presentation !== 'guide'} /><p class="m(0) font-xs fg-text-muted">{presentation === 'guide' ? t('The striped area is the actual gap between two equal blocks.') : t(specimenCaption.spacing)}</p></>
       : scenes.map(({ scene, title, compare }) => compare
         ? <DemoThemeComparison name={`tokens-${namespace}`} title={title} html={scene.html!} css={scene.css} caption={scene.caption} />
         : <Demo title={title} frame="none" caption={scene.caption}>

package/src/demo/foundations/Palette.svelte

@@ -3,6 +3,8 @@
 </script>
 
 <script lang="ts">
+  import { getSite } from '@master/internal-site/site'
+  const { t } = getSite()
   import '@master/internal-site/styles/system/fields.css'
 
   import '@master/internal-site/styles/system/specimens.css'
@@ -17,23 +19,23 @@
   const endId = `${id}-end`
 </script>
 
-<div class="w-full"><DemoCopyGroup instruction={format === 'value' ? 'Choose a swatch to copy its original CSS color value.' : 'Choose a swatch to copy its CSS variable reference.'}>
-  <label class="w-fit ui-field" for={id}>Copy as
+<div class="w-full"><DemoCopyGroup instruction={format === 'value' ? t('Choose a swatch to copy its original CSS color value.') : t('Choose a swatch to copy its CSS variable reference.')}>
+  <label class="w-fit ui-field" for={id}>{t('Copy as')}
     <select {id} class="ui-select" data-variant="raised" bind:value={format}>
-      <option value="value">CSS value</option><option value="variable">CSS variable</option>
+      <option value="value">{t('CSS value')}</option><option value="variable">{t('CSS variable')}</option>
     </select>
   </label>
-  <a class="ui-skip" href={`#${endId}`}>Skip color swatches</a>
+  <a class="ui-skip" href={`#${endId}`}>{t('Skip color swatches')}</a>
   <div class="ui-palette">
-    {#each groups as group (group.family)}<div class="ui-palette-row" role="group" aria-label={`${group.family} palette`}>
+    {#each groups as group (group.family)}<div class="ui-palette-row" role="group" aria-label={t('{family} palette').replace('{family}', group.family)}>
       <span>{group.family}</span>
       {#each group.colors as color (color.name)}<div class="ui-palette-cell">
         <DemoCopyButton icon={null} class="ui-palette-chip" style={`background-color:${color.value}`}
           value={format === 'value' ? color.value : `var(--${color.name})`}
-          label={`Copy ${color.name} ${format === 'value' ? 'CSS value' : 'CSS variable'}`} title={`${color.name}: ${color.value}`} />
+          label={format === 'value' ? t('Copy {name} CSS value').replace('{name}', color.name) : t('Copy {name} CSS variable').replace('{name}', color.name)} title={`${color.name}: ${color.value}`} />
         <span aria-hidden="true">{color.step}</span>
       </div>{/each}
     </div>{/each}
   </div>
-  <div id={endId} tabindex="-1"><span class="sr-only">End of color palette</span></div>
+  <div id={endId} tabindex="-1"><span class="sr-only">{t('End of color palette')}</span></div>
 </DemoCopyGroup></div>

package/src/demo/foundations/dialog-copy.d.ts

@@ -0,0 +1 @@
+export declare const dialogCopy: { title: string; caption: string }

package/src/demo/foundations/dialog-copy.js

@@ -0,0 +1,5 @@
+/** Reader-facing copy; the executable dialog specimen stays English. */
+export const dialogCopy = {
+  title: 'Motion follows a real action',
+  caption: 'The dialog enters once on opening. Escape or Close details returns focus to its trigger. Reduced motion opens it immediately. Its modal boundary stays inside this preview.'
+}

package/src/docs-shell/common/i18n.config.d.ts

@@ -1,2 +1,2 @@
-declare const config: { defaultLocale: string; locales: readonly string[]; hreflangOfLocale: Record<string, string>; nameOfLocale: Record<string, string> }
+declare const config: { defaultLocale: string; locales: readonly string[]; hreflangOfLocale: Record<string, string>; nameOfLocale: Record<string, string>; localizableOrigins: Record<string, readonly string[]> }
 export default config

package/src/docs-shell/common/i18n.config.js

@@ -1,13 +1,5 @@
-const i18n = {
-  defaultLocale: 'en',
-  locales: ['en', 'tw'],
-  hreflangOfLocale: {
-    tw: 'zh-TW'
-  },
-  nameOfLocale: {
-    tw: '中文 (臺灣)',
-    en: 'English'
-  }
-}
+import { defaultLocale, locales, hreflangOfLocale, nameOfLocale, localizableOrigins } from './locales.js'
 
-export default i18n
+const i18n = { defaultLocale, locales, hreflangOfLocale, nameOfLocale, localizableOrigins }
+
+export default i18n

package/src/docs-shell/common/locales.d.ts

@@ -0,0 +1,8 @@
+export declare const locales: readonly ['en', 'tw', 'ja', 'ko', 'cn']
+export declare const defaultLocale: 'en'
+export type Locale = typeof locales[number]
+export declare const hreflangOfLocale: Record<string, string>
+export declare const nameOfLocale: Record<string, string>
+export declare const localizableOrigins: Record<string, readonly string[]>
+export declare function languageOf(locale: string): string
+export declare function formatDate(value: string | number | Date, locale: string, options?: Intl.DateTimeFormatOptions): string

package/src/docs-shell/common/locales.js

@@ -0,0 +1,18 @@
+/** URL prefixes stay stable; document language tags use standard BCP 47 values. */
+export const locales = ['en', 'tw', 'ja', 'ko', 'cn']
+export const defaultLocale = 'en'
+export const hreflangOfLocale = { en: 'en', tw: 'zh-TW', ja: 'ja', ko: 'ko', cn: 'zh-CN' }
+export const nameOfLocale = { en: 'English', tw: '繁體中文（台灣）', ja: '日本語', ko: '한국어', cn: '简体中文' }
+/** Only first-party page links inherit the reader's language across sites. */
+export const localizableOrigins = {
+  'https://master.co': ['blog', 'brand', 'design-system'],
+  'https://css.master.co': ['guide', 'reference', 'benchmarks', 'roadmap'],
+  'https://rc.css.master.co': ['guide', 'reference', 'benchmarks', 'roadmap']
+}
+
+export function languageOf(locale) { return hreflangOfLocale[locale] ?? locale }
+
+/** UTC keeps publication dates identical in static builds and hydrated islands. */
+export function formatDate(value, locale, options = {}) {
+  return new Intl.DateTimeFormat(languageOf(locale), { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC', ...options }).format(new Date(value))
+}

package/src/docs-shell/common/terminology.json

@@ -0,0 +1,32 @@
+{
+  "stylesheet": { "tw": "樣式表", "ja": "スタイルシート", "ko": "스타일시트", "cn": "样式表" },
+  "declaration": { "tw": "宣告", "ja": "宣言", "ko": "선언", "cn": "声明" },
+  "selector": { "tw": "選擇器", "ja": "セレクター", "ko": "선택자", "cn": "选择器" },
+  "cascade": { "tw": "階層串接", "ja": "カスケード", "ko": "캐스케이드", "cn": "层叠" },
+  "cascade layer": { "tw": "串接層", "ja": "カスケードレイヤー", "ko": "캐스케이드 레이어", "cn": "层叠层" },
+  "specificity": { "tw": "選擇器權重", "ja": "詳細度", "ko": "명시도", "cn": "选择器优先级" },
+  "theme token": { "tw": "主題 token", "ja": "テーマトークン", "ko": "테마 토큰", "cn": "主题令牌" },
+  "utility": { "tw": "utility", "ja": "ユーティリティ", "ko": "유틸리티", "cn": "工具类" },
+  "custom property": { "tw": "自訂屬性", "ja": "カスタムプロパティ", "ko": "사용자 지정 속성", "cn": "自定义属性" },
+  "build time": { "tw": "建置階段", "ja": "ビルド時", "ko": "빌드 시점", "cn": "构建时" },
+  "runtime": { "tw": "執行階段", "ja": "ランタイム", "ko": "런타임", "cn": "运行时" },
+  "compiler": { "tw": "編譯器", "ja": "コンパイラー", "ko": "컴파일러", "cn": "编译器" },
+  "rendering": { "tw": "渲染", "ja": "レンダリング", "ko": "렌더링", "cn": "渲染" },
+  "extraction": { "tw": "擷取", "ja": "抽出", "ko": "추출", "cn": "提取" },
+  "scope": { "tw": "作用範圍", "ja": "スコープ", "ko": "범위", "cn": "作用域" },
+  "inheritance": { "tw": "繼承", "ja": "継承", "ko": "상속", "cn": "继承" },
+  "fallback": { "tw": "備援方式", "ja": "フォールバック", "ko": "폴백", "cn": "回退方案" },
+  "breakpoint": { "tw": "斷點", "ja": "ブレークポイント", "ko": "중단점", "cn": "断点" },
+  "container query": { "tw": "容器查詢", "ja": "コンテナークエリー", "ko": "컨테이너 쿼리", "cn": "容器查询" },
+  "media query": { "tw": "媒體查詢", "ja": "メディアクエリー", "ko": "미디어 쿼리", "cn": "媒体查询" },
+  "viewport": { "tw": "檢視區", "ja": "ビューポート", "ko": "뷰포트", "cn": "视口" },
+  "accessibility": { "tw": "無障礙", "ja": "アクセシビリティ", "ko": "접근성", "cn": "无障碍" },
+  "screen reader": { "tw": "螢幕閱讀器", "ja": "スクリーンリーダー", "ko": "스크린 리더", "cn": "屏幕阅读器" },
+  "reduced motion": { "tw": "減少動態效果", "ja": "動きを抑える設定", "ko": "동작 줄이기", "cn": "减少动态效果" },
+  "source file": { "tw": "原始檔", "ja": "ソースファイル", "ko": "소스 파일", "cn": "源文件" },
+  "package": { "tw": "套件", "ja": "パッケージ", "ko": "패키지", "cn": "软件包" },
+  "configuration": { "tw": "設定", "ja": "設定", "ko": "설정", "cn": "配置" },
+  "default": { "tw": "預設", "ja": "既定", "ko": "기본값", "cn": "默认" },
+  "interface": { "tw": "介面", "ja": "インターフェース", "ko": "인터페이스", "cn": "界面" },
+  "mouse": { "tw": "滑鼠", "ja": "マウス", "ko": "마우스", "cn": "鼠标" }
+}

package/src/docs-shell/common/translations.d.ts

@@ -0,0 +1,3 @@
+export declare const translations: Record<string, Record<string, string>>
+export default translations
+export declare function translateShell(locale: string, text: string): string