fix: show theme font names in image sharing

apps/web/src/components/dialogs/ShareNoteImageDialog.tsx

@@ -31,7 +31,7 @@ import {
   type NoteImageTheme,
   type PreparedNoteImage,
 } from "@/lib/note-image-export";
-import { NOTE_IMAGE_THEME_OPTIONS, buildNoteImageCardMarkup, escapeCardHtml, generateCardCss } from "@edgeever/shared/note-image-card";
+import { NOTE_IMAGE_BUNDLED_FONTS, NOTE_IMAGE_TEMPLATE_TYPOGRAPHY, resolveTheme, NOTE_IMAGE_THEME_OPTIONS, buildNoteImageCardMarkup, escapeCardHtml, generateCardCss } from "@edgeever/shared/note-image-card";
 import { getHtmlImageEmbedNoticeKind } from "@/lib/note-html-export";
 import { readNoteImagePreferences, writeNoteImagePreferences, type NoteImagePreferences } from "@/lib/note-image-preference";
 import { cn } from "@/lib/utils";
@@ -148,6 +148,16 @@ export const ShareNoteImageDialog = ({
   const [retry, setRetry] = useState(0);
   const [copyState, setCopyState] = useState<"idle" | "copying" | "copied" | "failed">("idle");
   const [contentFontStatus, setContentFontStatus] = useState<FontLoadStatus>("loading");
+  const themeFontLabel = NOTE_IMAGE_TEMPLATE_TYPOGRAPHY[resolveTheme(undefined, theme)].body
+    .map(font => t(NOTE_IMAGE_BUNDLED_FONTS[font].labelKey))
+    .join(" / ");
+  const selectedFontLabel = fontStyle === "auto"
+    ? themeFontLabel
+    : t(FONT_OPTIONS.find(item => item.id === fontStyle)!.labelKey);
+  const fontOptionLabel = (item: (typeof FONT_OPTIONS)[number]) => item.id === "auto"
+    ? `${t(item.labelKey)} (${themeFontLabel})`
+    : t(item.labelKey);
+
   const { status: selectedFontStatus, onPreviewStatus } = useFontPreviewStatus(`${fontStyle}:${theme}:${retry}`, contentFontStatus);
   const generationRef = useRef(0);
   const copyAttemptRef = useRef(0);
@@ -358,13 +368,13 @@ export const ShareNoteImageDialog = ({
               <Select value={fontStyle} onOpenChange={setFontMenuOpen} onValueChange={(value) => setPreference("fontStyle", value as NoteImageFontStyle)}>
                 <SelectTrigger aria-label={t("editor.imageShare.fontStyle")} className="h-9 w-full text-xs font-normal">
                   <SelectValue>
-                    <NoteImageFontLabel label={t(FONT_OPTIONS.find(item => item.id === fontStyle)!.labelKey)} fontStyle={fontStyle} theme={theme} enabled={open} status={error === true ? undefined : selectedFontStatus} onStatusChange={onPreviewStatus} retryKey={retry} />
+                    <NoteImageFontLabel label={selectedFontLabel} fontStyle={fontStyle} theme={theme} enabled={open} status={error === true ? undefined : selectedFontStatus} onStatusChange={onPreviewStatus} retryKey={retry} />
                   </SelectValue>
                 </SelectTrigger>
                 <SelectContent className="max-h-80">
                   {FONT_OPTIONS.map((item) => (
-                    <SelectItem key={item.id} value={item.id} textValue={t(item.labelKey)}>
-                      <NoteImageFontLabel label={t(item.labelKey)} fontStyle={item.id} theme={theme} enabled={open && fontMenuOpen} visibleOnly />
+                    <SelectItem key={item.id} value={item.id} textValue={fontOptionLabel(item)}>
+                      <NoteImageFontLabel label={fontOptionLabel(item)} fontStyle={item.id} theme={theme} enabled={open && fontMenuOpen} visibleOnly />
                     </SelectItem>
                   ))}
                 </SelectContent>

packages/shared/src/i18n/en-US.ts

@@ -2478,6 +2478,14 @@ export const enUS = {
         warm: "Warm",
       },
       fontStyle: "Typography",
+      templateFonts: {
+        puhui: "Alibaba PuHuiTi",
+        misans: "MiSans",
+        mincho: "Huiwen Mincho",
+        song: "Source Han Serif",
+        longcang: "Long Cang",
+        geist: "Geist Mono",
+      },
       fontStyles: {
         "source-han-serif": "Noto Serif SC",
         "anton": "Anton",

packages/shared/src/i18n/ja.ts

@@ -2467,6 +2467,14 @@ export const ja = {
         warm: "あたたか",
       },
       fontStyle: "書体",
+      templateFonts: {
+        puhui: "Alibaba PuHuiTi",
+        misans: "MiSans",
+        mincho: "匯文明朝体",
+        song: "源ノ明朝",
+        longcang: "Long Cang",
+        geist: "Geist Mono",
+      },
       fontStyles: {
         "source-han-serif": "Noto Serif SC",
         "anton": "Anton",

packages/shared/src/i18n/pl.ts

@@ -2467,6 +2467,14 @@ export const pl = {
         warm: "Ciepłe",
       },
       fontStyle: "Typografia",
+      templateFonts: {
+        puhui: "Alibaba PuHuiTi",
+        misans: "MiSans",
+        mincho: "Huiwen Mincho",
+        song: "Source Han Serif",
+        longcang: "Long Cang",
+        geist: "Geist Mono",
+      },
       fontStyles: {
         "source-han-serif": "Noto Serif SC",
         "anton": "Anton",

packages/shared/src/i18n/zh-CN.ts

@@ -2476,6 +2476,14 @@ export const zhCN = {
         warm: "暖色",
       },
       fontStyle: "字体风格",
+      templateFonts: {
+        puhui: "阿里巴巴普惠体",
+        misans: "MiSans",
+        mincho: "汇文明朝体",
+        song: "思源宋体",
+        longcang: "龙藏体",
+        geist: "Geist Mono",
+      },
       fontStyles: {
         "source-han-serif": "思源宋体",
         "anton": "Anton",

packages/shared/src/note-image-card.ts

@@ -108,12 +108,12 @@ export const NOTE_IMAGE_FONT_FAMILIES: Record<Exclude<NoteImageFontStyle, "auto"
 
 /** Keep CSS families and asset selection together so defaults cannot silently fall back. */
 export const NOTE_IMAGE_BUNDLED_FONTS = {
-  puhui: { family: "Alibaba-PuHuiTi-Regular", fallback: "sans" },
-  misans: { family: "MiSans", fallback: "sans" },
-  mincho: { family: "Huiwen_mingchao", fallback: "serif" },
-  song: { family: "SourceHanSerifCN_SemiBold", fallback: "serif" },
-  longcang: { family: "Long Cang", fallback: "kai" },
-  geist: { family: "Geist Mono Variable", fallback: "mono" },
+  puhui: { labelKey: "editor.imageShare.templateFonts.puhui", family: "Alibaba-PuHuiTi-Regular", fallback: "sans" },
+  misans: { labelKey: "editor.imageShare.templateFonts.misans", family: "MiSans", fallback: "sans" },
+  mincho: { labelKey: "editor.imageShare.templateFonts.mincho", family: "Huiwen_mingchao", fallback: "serif" },
+  song: { labelKey: "editor.imageShare.templateFonts.song", family: "SourceHanSerifCN_SemiBold", fallback: "serif" },
+  longcang: { labelKey: "editor.imageShare.templateFonts.longcang", family: "Long Cang", fallback: "kai" },
+  geist: { labelKey: "editor.imageShare.templateFonts.geist", family: "Geist Mono Variable", fallback: "mono" },
 } as const;
 
 type BundledNoteImageFont = keyof typeof NOTE_IMAGE_BUNDLED_FONTS;