feat(docs): colocate localized package sandboxes

docs/src/components/sandbox/sandbox.tsx

@@ -1,13 +1,15 @@
 import React from "react"
 import { Icon } from "@icones/react"
 
-import { useTranslate } from "../../lib/locale"
+import { useLocale, useTranslate } from "../../lib/locale"
 import { getSandboxDefinition } from "./registry"
 import { SandboxErrorBoundary } from "./sandbox-error-boundary"
 import { SandboxFrame } from "./sandbox-frame"
 import { highlightSource, type HighlightedSource } from "./highlight-source"
 import type {
   SandboxDefinition,
+  SandboxLocalizedText,
+  SandboxPreviewProps,
   SandboxPreviewModule,
   SandboxSource,
 } from "./types"
@@ -19,7 +21,7 @@ const codeFontSizes = [12, 13, 14, 16] as const
 export type SandboxProps = {
   className?: string
   example: string
-  title?: string
+  title?: SandboxLocalizedText
 }
 
 export function Sandbox({ className, example, title }: SandboxProps) {
@@ -51,7 +53,7 @@ export type SingleFileSandboxProps = {
   component: React.ComponentType
   filename?: string
   source: string
-  title?: string
+  title?: SandboxLocalizedText
 }
 
 export function SingleFileSandbox({
@@ -64,7 +66,9 @@ export function SingleFileSandbox({
   const definition = React.useMemo<SandboxDefinition>(
     () => ({
       defaultFile: filename,
-      entry: async () => ({ default: component }),
+      entry: async () => ({
+        default: component as React.ComponentType<SandboxPreviewProps>,
+      }),
       files: { [filename]: source },
       id: `single-file:${filename}`,
       title,
@@ -82,9 +86,10 @@ function SandboxViewer({
 }: {
   className?: string
   definition: SandboxDefinition
-  title?: string
+  title?: SandboxLocalizedText
 }) {
   const rootRef = React.useRef<HTMLElement>(null)
+  const locale = useLocale()
   const t = useTranslate()
   const filenames = React.useMemo(
     () => Object.keys(definition.files),
@@ -105,7 +110,11 @@ function SandboxViewer({
   const [reloadKey, setReloadKey] = React.useState(0)
   const [copied, setCopied] = React.useState(false)
   const [fullscreen, setFullscreen] = React.useState(false)
-  const resolvedTitle = title ?? definition.title ?? definition.id
+  const resolvedTitle = resolveSandboxText(
+    title ?? definition.title,
+    locale,
+    definition.id
+  )
 
   React.useEffect(() => {
     const root = rootRef.current
@@ -288,6 +297,7 @@ function SandboxViewer({
       {view === "preview" ? (
         <SandboxFrame
           fill={fullscreen}
+          locale={locale}
           reloadKey={reloadKey}
           title={resolvedTitle}
         >
@@ -297,7 +307,10 @@ function SandboxViewer({
                 {previewError.message}
               </SandboxMessage>
             ) : previewModule ? (
-              React.createElement(previewModule.default, { key: reloadKey })
+              React.createElement(previewModule.default, {
+                key: reloadKey,
+                locale,
+              })
             ) : (
               <SandboxMessage>
                 {t({ zh: "正在加载预览…", us: "Loading preview…" })}
@@ -350,6 +363,15 @@ function SandboxViewer({
   )
 }
 
+function resolveSandboxText(
+  value: SandboxLocalizedText | undefined,
+  locale: "en-US" | "zh-Hans",
+  fallback: string
+) {
+  if (typeof value === "string") return value
+  return value?.[locale] ?? fallback
+}
+
 function CodeFontSizeControl({
   decreaseLabel,
   increaseLabel,