hd-garden 0.7.0 → 0.8.1

package/app/components/SiteHeader.tsx

@@ -14,9 +14,11 @@ import type Fuse from "fuse.js";
 import { MagnifyingGlass, X } from "@phosphor-icons/react";
 import { brand, searchFull, searchIndexUrl } from "@garden/site-config";
 import { createSearch } from "../../ui/garden/search-match.mjs";
-import { cropMatchedText, highlightParts, noResultsText } from "../../ui/garden/search-preview.mjs";
+import { cropMatchedText, highlightParts } from "../../ui/garden/search-preview.mjs";
 import { resolveDark, themeSwitchProps } from "../../ui/garden/theme.mjs";
 import { SITE_NAV, isCurrentNav } from "../../ui/garden/site-nav.mjs";
+import { isHandbookPath, routeLang, ui } from "../lib/i18n";
+import { HandbookLangSwitch } from "./HandbookLangSwitch";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 import { siteHref } from "../lib/site-href";
@@ -87,7 +89,7 @@ function loadSearchEngine() {
   return engineLoad;
 }
 
-const nav = SITE_NAV.map((item) => ({ ...item, href: siteHref(item.href) }));
+const nav = SITE_NAV.map((item) => ({ ...item, key: item.href, href: siteHref(item.href) }));
 
 function rangesFor(
   matches: readonly SearchMatch[] | undefined,
@@ -140,6 +142,7 @@ function searchPreview(
 
 export function SiteHeader() {
   const pathname = usePathname() || "/";
+  const t = ui(routeLang(pathname));
   const [menuOpen, setMenuOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [query, setQuery] = useState("");
@@ -189,7 +192,12 @@ export function SiteHeader() {
   useEffect(() => {
     const system = window.matchMedia("(prefers-color-scheme: dark)");
     const apply = () => {
-      const stored = window.localStorage.getItem("theme");
+      let stored: string | null = null;
+      try {
+        stored = window.localStorage.getItem("theme");
+      } catch {
+        // Storage blocked (cookies off, opaque origin): follow the system.
+      }
       const useDark = resolveDark(stored, system.matches);
       document.documentElement.dataset.theme = useDark ? "dark" : "light";
       setDark(useDark);
@@ -295,7 +303,11 @@ export function SiteHeader() {
     const next = !dark;
     setDark(next);
     document.documentElement.dataset.theme = next ? "dark" : "light";
-    window.localStorage.setItem("theme", next ? "dark" : "light");
+    try {
+      window.localStorage.setItem("theme", next ? "dark" : "light");
+    } catch {
+      // Storage blocked: the choice lasts for this page only.
+    }
   };
 
   const current = (href: string) => isCurrentNav(pathname, href);
@@ -313,29 +325,30 @@ export function SiteHeader() {
             {brand.logo ? <span className="sh-mark" aria-hidden="true" dangerouslySetInnerHTML={{ __html: brand.logo }} /> : null}
             {siteConfig.name}
           </Link>
-          <nav className="sh-nav" aria-label="站点导航">
+          <nav className="sh-nav" aria-label={t.siteNav}>
             {nav.map((item) => (
               <Link key={item.href} href={item.href} aria-current={current(item.href) ? "page" : undefined}>
-                {item.label}
+                {t.navLabels[item.key] ?? item.label}
               </Link>
             ))}
           </nav>
           <div className="sh-tools">
-            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} onPointerEnter={prefetchSearch} onFocus={prefetchSearch} aria-label="搜索文章" aria-expanded={searchOpen} aria-controls="site-search-dialog">
+            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} onPointerEnter={prefetchSearch} onFocus={prefetchSearch} aria-label={t.searchArticles} aria-expanded={searchOpen} aria-controls="site-search-dialog">
               <svg viewBox="0 0 20 20" aria-hidden="true">
                 <circle cx="9" cy="9" r="5.8" />
                 <path d="M13.3 13.3 17 17" />
               </svg>
-              <span className="lbl">搜索</span>
+              <span className="lbl">{t.search}</span>
               <kbd><span className="kbd-mod kbd-mac">⌘</span><span className="kbd-mod kbd-other">Ctrl</span>{" "}K</kbd>
             </button>
-            <button className="sh-icon sh-search-m" type="button" onClick={openSearch} onPointerDown={prefetchSearch} aria-label="搜索文章">
+            <button className="sh-icon sh-search-m" type="button" onClick={openSearch} onPointerDown={prefetchSearch} aria-label={t.searchArticles}>
               <svg viewBox="0 0 20 20" aria-hidden="true">
                 <circle cx="9" cy="9" r="5.8" />
                 <path d="M13.3 13.3 17 17" />
               </svg>
             </button>
-            <button className="sh-icon sh-theme" type="button" onClick={toggleTheme} aria-label={dark ? "切换到浅色模式" : "切换到深色模式"}>
+            {isHandbookPath(pathname) ? <HandbookLangSwitch /> : null}
+            <button className="sh-icon sh-theme" type="button" onClick={toggleTheme} aria-label={dark ? t.toLight : t.toDark}>
               <svg className="i-moon" viewBox="0 0 20 20" aria-hidden="true">
                 <path d="M16.5 12.2A6.8 6.8 0 0 1 7.8 3.5a6.8 6.8 0 1 0 8.7 8.7Z" />
               </svg>
@@ -344,27 +357,27 @@ export function SiteHeader() {
                 <path d="M10 1.8v2M10 16.2v2M1.8 10h2M16.2 10h2M4.2 4.2l1.4 1.4M14.4 14.4l1.4 1.4M4.2 15.8l1.4-1.4M14.4 5.6l1.4-1.4" />
               </svg>
             </button>
-            <button className="sh-icon sh-menu-btn" type="button" aria-expanded={menuOpen} aria-controls="sh-menu" aria-label={menuOpen ? "关闭菜单" : "打开菜单"} onClick={() => setMenuOpen((open) => !open)}>
+            <button className="sh-icon sh-menu-btn" type="button" aria-expanded={menuOpen} aria-controls="sh-menu" aria-label={menuOpen ? t.closeMenu : t.openMenu} onClick={() => setMenuOpen((open) => !open)}>
               {menuOpen ? <X size={18} /> : <span aria-hidden="true">☰</span>}
             </button>
             {/* Without JavaScript the button above cannot open anything: these two links take its place
                 and open or close the menu through :target on the fixed anchors above (shell.css). */}
-            <a className="sh-icon sh-menu-nojs" id="sh-menu-open" href="#sh-menu-on" aria-label="打开菜单">
+            <a className="sh-icon sh-menu-nojs" id="sh-menu-open" href="#sh-menu-on" aria-label={t.openMenu}>
               <span aria-hidden="true">☰</span>
             </a>
-            <a className="sh-icon sh-menu-nojs-close" href="#sh-menu-off" aria-label="关闭菜单">
+            <a className="sh-icon sh-menu-nojs-close" href="#sh-menu-off" aria-label={t.closeMenu}>
               <X size={18} />
             </a>
           </div>
         </div>
-        <nav className={`sh-menu${menuOpen ? " is-open" : ""}`} id="sh-menu" aria-label="站点导航（移动端）">
+        <nav className={`sh-menu${menuOpen ? " is-open" : ""}`} id="sh-menu" aria-label={t.siteNavMobile}>
           {nav.map((item) => (
             <Link key={item.href} href={item.href} aria-current={current(item.href) ? "page" : undefined} onClick={() => setMenuOpen(false)}>
-              {item.label}
+              {t.navLabels[item.key] ?? item.label}
             </Link>
           ))}
           <button className="sh-menu-theme" {...themeSwitchProps(dark, toggleTheme)}>
-            <span>深色模式</span>
+            <span>{t.darkMode}</span>
             <span className="sh-switch" aria-hidden="true" />
           </button>
         </nav>
@@ -388,7 +401,7 @@ export function SiteHeader() {
             onKeyDown={handleSearchKeyDown}
           >
             <h2 className="sr-only" id="site-search-title">
-              搜索站内内容
+              {t.searchTitle}
             </h2>
             <div className="search-input-wrap">
               <MagnifyingGlass size={20} aria-hidden="true" />
@@ -400,8 +413,8 @@ export function SiteHeader() {
                   setActiveResult(-1);
                   resultRefs.current = [];
                 }}
-                placeholder="搜索标题、主题或正文…"
-                aria-label="模糊搜索"
+                placeholder={t.searchPlaceholder}
+                aria-label={t.searchInput}
                 role="combobox"
                 aria-expanded="true"
                 aria-autocomplete="list"
@@ -410,7 +423,7 @@ export function SiteHeader() {
                   activeResult >= 0 ? `site-search-result-${activeResult}` : undefined
                 }
               />
-              <button onClick={closeSearch} aria-label="关闭搜索">
+              <button onClick={closeSearch} aria-label={t.closeSearch}>
                 <X size={19} />
               </button>
             </div>
@@ -418,11 +431,11 @@ export function SiteHeader() {
               className="search-results"
               id="site-search-results"
               role="listbox"
-              aria-label="搜索结果"
+              aria-label={t.searchResults}
             >
               {query && engine && resultTotal === 0 ? null : (
                 <p className="search-label">
-                  {query ? `${resultTotal} 篇相关文章` : "最近内容"}
+                  {query ? t.resultCount(resultTotal) : t.recent}
                 </p>
               )}
               {results.map((result, index) => {
@@ -464,13 +477,13 @@ export function SiteHeader() {
               {results.length === 0 && (
                 <p className="empty-state">
                   {/* The query is a React text child, so it is escaped. */}
-                  {engine ? noResultsText(query) : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
+                  {engine ? t.noResults(query.trim()) : engineFailed ? t.searchFailed : t.loading}
                 </p>
               )}
             </div>
             <footer className="search-footer">
-              <span>支持模糊匹配</span>
-              <span><kbd>ESC</kbd> 关闭</span>
+              <span>{t.fuzzy}</span>
+              <span><kbd>ESC</kbd> {t.escToClose}</span>
             </footer>
           </section>
         </div>

package/app/components/TableOfContents.tsx

@@ -10,6 +10,7 @@ import {
   type ReactNode,
 } from "react";
 import { List, X } from "@phosphor-icons/react";
+import { ui, type UiLang } from "../lib/i18n";
 
 type Heading = { depth: number; text: string; id: string; no?: string };
 
@@ -115,11 +116,16 @@ const scrollToHeading = (id: string) => {
 
 export function TableOfContents({
   headings,
-  label = "本篇目录",
+  label,
+  lang,
 }: {
   headings: Heading[];
   label?: string;
+  /** Defaults to the site language; the bilingual handbook passes its own. */
+  lang?: UiLang;
 }) {
+  const t = ui(lang);
+  label ??= t.toc;
   const [activeId, setActiveId] = useState(headings[0]?.id);
   const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
     () => new Set(),
@@ -368,7 +374,7 @@ export function TableOfContents({
               type="button"
               aria-controls={childListId}
               aria-expanded={!collapsed}
-              aria-label={`${collapsed ? "展开" : "收起"}「${node.text}」的子目录`}
+              aria-label={t.tocToggle(collapsed, node.text)}
               onClick={() => toggleSection(node.id)}
             >
               <span aria-hidden="true">{collapsed ? "+" : "−"}</span>
@@ -396,25 +402,25 @@ export function TableOfContents({
         type="button"
         aria-controls={panelId}
         aria-expanded={mobileOpen}
-        aria-label={`打开${label}${activeHeading ? `，当前章节：${activeHeading.text}` : ""}`}
+        aria-label={`${t.open}${label}${activeHeading ? `${t.currentSection}${activeHeading.text}` : ""}`}
         tabIndex={mobileOpen ? -1 : 0}
         data-mobile-open={mobileOpen}
         onClick={() => setMobileOpen(true)}
       >
         <List size={17} weight="bold" aria-hidden="true" />
-        <span>目录</span>
+        <span>{t.tocShort}</span>
       </button>
       {/* Without JavaScript the button above does nothing. This link opens the
           drawer through :target instead; CSS shows it only when scripting is
           off, so with JavaScript nothing here is visible. */}
-      <a className="toc-nojs-trigger" id={`${panelId}-open`} href={`#${panelId}`} aria-label={`打开${label}`}>
+      <a className="toc-nojs-trigger" id={`${panelId}-open`} href={`#${panelId}`} aria-label={`${t.open}${label}`}>
         <List size={17} weight="bold" aria-hidden="true" />
-        <span>目录</span>
+        <span>{t.tocShort}</span>
       </a>
       <button
         className="toc-mobile-backdrop"
         type="button"
-        aria-label={`关闭${label}`}
+        aria-label={`${t.close}${label}`}
         tabIndex={mobileOpen ? 0 : -1}
         data-mobile-open={mobileOpen}
         onClick={() => closeMobileToc(true)}
@@ -431,12 +437,12 @@ export function TableOfContents({
             ref={mobileCloseRef}
             className="toc-mobile-close"
             type="button"
-            aria-label={`关闭${label}`}
+            aria-label={`${t.close}${label}`}
             onClick={() => closeMobileToc(true)}
           >
             <X size={18} aria-hidden="true" />
           </button>
-          <a className="toc-nojs-close" href={`#${panelId}-open`} aria-label={`关闭${label}`}>
+          <a className="toc-nojs-close" href={`#${panelId}-open`} aria-label={`${t.close}${label}`}>
             <X size={18} aria-hidden="true" />
           </a>
         </div>

package/app/components/ThoughtCard.tsx

@@ -15,6 +15,7 @@ import {
 import { githubUrl, siteConfig } from "../site.config";
 import { MarkdownArticle } from "./MarkdownArticle";
 import { siteHref } from "../lib/site-href";
+import { siteLang, ui } from "../lib/i18n";
 
 const icons = {
   image: ImageSquare,
@@ -66,11 +67,12 @@ export function ThoughtCard({
   const isMixed = media.length > 1;
   const Icon = isMixed ? SquaresFour : icons[thought.mediaType ?? "text"];
   const mediaGroups = groupMedia(media);
+  const t = ui();
 
   return (
     <article id={thought.slug} className="thought-card h-entry">
       <Link className="u-url sr-only" href={siteHref(`/thoughts/${thought.slug}`)}>
-        {thought.title} 永久链接
+        {siteLang === "en" ? t.permalinkLabel(thought.title) : <>{thought.title} 永久链接</>}
       </Link>
       <a
         className="p-author h-card sr-only"
@@ -83,16 +85,16 @@ export function ThoughtCard({
         <span className="thought-kind">
           <Icon size={16} />
           {isMixed
-            ? `混合记录 · ${media.length} 个附件`
+            ? t.thoughtMixedLabel(media.length)
             : thought.mediaType === "image"
-            ? "一张照片"
+            ? t.thoughtImageLabel
             : thought.mediaType === "audio"
-              ? "一段声音"
+              ? t.thoughtAudioLabel
               : thought.mediaType === "video"
-                ? "一段影像"
+                ? t.thoughtVideoLabel
                 : thought.mediaType === "link"
-                  ? "一个链接"
-                  : "随想"}
+                  ? t.thoughtLinkLabel
+                  : t.thoughtTextLabel}
         </span>
         <time className="dt-published" dateTime={thought.date}>
           {formatDate(thought.date, true)}
@@ -112,7 +114,7 @@ export function ThoughtCard({
                 <div
                   className={`thought-gallery thought-gallery-${Math.min(group.items.length, 3)}`}
                   key={`images-${groupIndex}`}
-                  aria-label={`${group.items.length} 张照片`}
+                  aria-label={t.thoughtGalleryLabel(group.items.length)}
                 >
                   {group.items.map((item, index) => (
                     // eslint-disable-next-line @next/next/no-img-element
@@ -120,7 +122,7 @@ export function ThoughtCard({
                       key={`${item.src}-${index}`}
                       className="thought-image u-photo"
                       src={item.src}
-                      alt={item.alt ?? `${thought.title} · 照片 ${index + 1}`}
+                      alt={item.alt ?? t.thoughtPhotoAlt(thought.title, index + 1)}
                       loading="lazy"
                     />
                   ))}
@@ -132,14 +134,14 @@ export function ThoughtCard({
                 <div className="audio-embed" key={`${group.item.src}-${groupIndex}`}>
                   <MusicNotes size={28} />
                   <div>
-                    <strong>{group.item.title ?? `当前播放 · ${thought.title}`}</strong>
+                    <strong>{group.item.title ?? t.thoughtNowPlaying(thought.title)}</strong>
                     <audio
                       className="u-audio"
                       controls
                       preload="none"
                       src={group.item.src}
                     >
-                      你的浏览器不支持音频播放。
+                      {t.audioFallback}
                     </audio>
                   </div>
                 </div>
@@ -194,14 +196,14 @@ export function ThoughtCard({
         <div className="audio-embed">
           <MusicNotes size={28} />
           <div>
-            <strong>当前播放 · {thought.title}</strong>
+            <strong>{t.thoughtNowPlaying(thought.title)}</strong>
             <audio
               className="u-audio"
               controls
               preload="none"
               src={thought.media}
             >
-              你的浏览器不支持音频播放。
+              {t.audioFallback}
             </audio>
           </div>
         </div>
@@ -234,7 +236,7 @@ export function ThoughtCard({
 
       {showPermalink && (
         <Link className="thought-permalink" href={siteHref(`/thoughts/${thought.slug}`)}>
-          永久链接
+          {t.thoughtPermalinkShort}
           <ArrowUpRight size={15} />
         </Link>
       )}

package/app/components/ThoughtFeed.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { ThoughtCard } from "./ThoughtCard";
+import { FeedMore } from "./FeedMore";
+import { getPublishedThoughts } from "../lib/public-thoughts";
+import { ui } from "../lib/i18n";
+import { siteHref } from "../lib/site-href";
+import { siteConfig } from "../site.config";
+import { pageCount, pageItems, pagePath, pageSizeOf } from "../../ui/garden/paging.mjs";
+
+export const thoughtsPageSize = () => pageSizeOf(siteConfig.pages.thoughts.pageSize);
+export const thoughtsPageCount = () => pageCount(getPublishedThoughts().length, thoughtsPageSize());
+export const thoughtsPageHref = (page: number) => siteHref(pagePath("/thoughts", page));
+
+/** One page of 随想 and the link (or automatic loading) to the next. */
+export function ThoughtFeed({ page }: { page: number }) {
+  const t = ui();
+  const all = getPublishedThoughts();
+  const total = thoughtsPageCount();
+  const items = pageItems(all, page, thoughtsPageSize());
+  const next = page < total ? thoughtsPageHref(page + 1) : null;
+  return (
+    <>
+      <div className="thought-stream" data-feed-page={page}>
+        {items.map((thought) => (
+          <ThoughtCard key={thought.slug} thought={thought} />
+        ))}
+      </div>
+      {page > 1 ? (
+        <p className="feed-prev">
+          <Link href={thoughtsPageHref(page - 1)} rel="prev">{t.prevPage}</Link>
+          <span>{t.pageOf(page, total)}</span>
+        </p>
+      ) : null}
+      <FeedMore
+        next={next}
+        streamSelector=".thought-stream"
+        labels={{ nextPage: t.nextPage, loadingMore: t.loadingMore, loadFailed: t.loadFailed, feedEnd: t.feedEnd }}
+      />
+    </>
+  );
+}

package/app/components/UiBlock.tsx

@@ -1,9 +1,10 @@
 import { readPayload } from "../../ui/core/compile.mjs";
 import { IntentCard, UiErrorCard, UiFigure, type Diagnostic, type UiPayload } from "../../ui/react";
+import { ui, type UiLang } from "../lib/i18n";
 
-export function UiBlock({ source }: { source: string }) {
+export function UiBlock({ source, lang }: { source: string; lang?: UiLang }) {
   const payload = readPayload(source) as UiPayload | null;
-  if (!payload) return <p className="external-embed-error">这块交互的数据损坏了，请重新运行 garden sync。</p>;
+  if (!payload) return <p className="external-embed-error">{ui(lang).uiBlockCorrupt}</p>;
   return <UiFigure payload={payload} />;
 }
 

package/app/components/UiLang.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+import { siteLang, ui, type UiLang } from "../lib/i18n";
+
+/**
+ * The language of the framework chrome inside a page body (copy buttons, code
+ * tabs, file cards...). It is the site language everywhere except the /garden/
+ * handbook, whose pages set it from their own route (/garden/en/ is English).
+ */
+const UiLangContext = createContext<UiLang>(siteLang);
+
+export function UiLangProvider({ lang, children }: { lang?: UiLang; children: ReactNode }) {
+  return <UiLangContext.Provider value={lang ?? siteLang}>{children}</UiLangContext.Provider>;
+}
+
+export const useUiLang = () => useContext(UiLangContext);
+export const useUi = () => ui(useContext(UiLangContext));

package/app/components/Webmentions.tsx

@@ -8,6 +8,7 @@ import {
   Quotes,
   Repeat,
 } from "@phosphor-icons/react";
+import { siteLang, ui } from "../lib/i18n";
 
 type WebmentionEntry = {
   author?: {
@@ -93,34 +94,34 @@ export function Webmentions({
       <div className="webmention-title">
         <LinkSimple size={21} />
         <div>
-          <h2 id="webmentions-heading">来自开放网络的回应</h2>
-          <p>引用、喜欢、转发和站外回复会通过 Webmention 回到这里。</p>
+          <h2 id="webmentions-heading">{ui().webmentions}</h2>
+          <p>{ui().webmentionsLead}</p>
         </div>
       </div>
 
       {!endpoint && (
         <div className="integration-notice">
           <Quotes size={20} weight="fill" />
-          <p>接收与展示代码已经就绪，注册正式域名后即可开始收集回应。</p>
+          <p>{ui().webmentionIdleNote}</p>
         </div>
       )}
 
       {endpoint && loading && (
         <p className="integration-status" role="status">
-          正在读取开放网络回应…
+          {ui().webmentionLoading}
         </p>
       )}
 
       {endpoint && failed && (
         <p className="integration-status" role="status">
-          暂时无法读取回应，稍后会自动恢复。
+          {ui().webmentionUnavailable}
         </p>
       )}
 
       {endpoint && !loading && !failed && entries.length === 0 && (
         <div className="integration-notice">
           <Quotes size={20} weight="fill" />
-          <p>还没有站外回应。任何链接到这篇文章的网站都可以向它发送 Webmention。</p>
+          <p>{ui().webmentionEmpty}</p>
         </div>
       )}
 
@@ -129,15 +130,15 @@ export function Webmentions({
           <span>
             <Heart size={16} weight="fill" />
             <Repeat size={16} />
-            {reactions.length} 个喜欢、转发或收藏
+            {ui().webmentionReactionCount(reactions.length)}
           </span>
-          <div className="webmention-facepile" aria-label="回应者">
+          <div className="webmention-facepile" aria-label={ui().webmentionRespondersLabel}>
             {reactions.slice(0, 16).map((entry, index) => (
               <a
                 href={entry.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label={entry.author?.name ?? "查看站外回应"}
+                aria-label={entry.author?.name ?? ui().webmentionViewResponse}
                 key={`${entry.url}-${index}`}
               >
                 {entry.author?.photo ? (
@@ -164,10 +165,10 @@ export function Webmentions({
             return (
               <article key={`${entry.url}-${index}`}>
                 <header>
-                  <strong>{entry.author?.name ?? "开放网络访客"}</strong>
+                  <strong>{entry.author?.name ?? ui().webmentionAuthorFallback}</strong>
                   {received && (
                     <time dateTime={received}>
-                      {new Intl.DateTimeFormat("zh-CN", {
+                      {new Intl.DateTimeFormat(siteLang === "en" ? "en-US" : "zh-CN", {
                         year: "numeric",
                         month: "2-digit",
                         day: "2-digit",
@@ -181,7 +182,7 @@ export function Webmentions({
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  查看原文
+                  {ui().webmentionViewOriginal}
                   <ArrowSquareOut size={14} />
                 </a>
               </article>

package/app/components/WidgetChart.tsx

@@ -3,6 +3,7 @@
 import { ArrowUpRight, Browser, CaretDown, FilePdf } from "@phosphor-icons/react";
 import { useEffect, useRef, useState } from "react";
 import { parse } from "yaml";
+import { ui, type UiLang } from "../lib/i18n";
 
 type WidgetKind = "chart" | "html" | "pdf";
 
@@ -79,7 +80,8 @@ function DocumentThumb({ kind }: { kind: "html" | "pdf" }) {
   );
 }
 
-export function WidgetChart({ source }: { source: string }) {
+export function WidgetChart({ source, lang }: { source: string; lang?: UiLang }) {
+  const s = ui(lang);
   const data = readWidgetData(source);
   const src = data?.src;
   const kind = data?.kind;
@@ -132,7 +134,7 @@ export function WidgetChart({ source }: { source: string }) {
   if (!data) {
     return (
       <p className="external-embed-error">
-        无法解析这个嵌入块。请在与 Markdown 同名的目录里放一份 .html 或 .pdf，并在围栏中写 src 与 caption。
+        {s.widgetParseError}
       </p>
     );
   }
@@ -156,7 +158,7 @@ export function WidgetChart({ source }: { source: string }) {
         <figcaption>
           <span>{data.caption}</span>
           <a href={data.src} target="_blank" rel="noopener noreferrer">
-            打开页面
+            {s.widgetOpenPage}
           </a>
         </figcaption>
         <noscript>
@@ -167,8 +169,8 @@ export function WidgetChart({ source }: { source: string }) {
   }
 
   const Icon = data.kind === "pdf" ? FilePdf : Browser;
-  const kindLabel = data.kind === "pdf" ? "PDF" : "页面";
-  const openLabel = data.kind === "pdf" ? "打开 PDF" : "打开页面";
+  const kindLabel = data.kind === "pdf" ? "PDF" : s.widgetPageKind;
+  const openLabel = data.kind === "pdf" ? s.widgetOpenPdf : s.widgetOpenPage;
 
   return (
     <figure
@@ -197,7 +199,7 @@ export function WidgetChart({ source }: { source: string }) {
             <strong>{data.caption}</strong>
           </span>
           <span className="garden-doc-action">
-            {expanded ? "收起" : "展开"}
+            {expanded ? s.widgetCollapse : s.widgetExpand}
             <CaretDown size={14} className="garden-doc-caret" />
           </span>
         </button>