feat: persist font family

koharu-mcp/src/lib.rs

@@ -373,6 +373,7 @@ impl KoharuMcp {
                 index: p.index,
                 text_block_index: p.text_block_index,
                 shader_effect: effect,
+                font_family: p.font_family,
             },
         )
         .await
@@ -451,6 +452,7 @@ impl KoharuMcp {
                 llm_model_id: p.llm_model_id,
                 language: p.language,
                 shader_effect: effect,
+                font_family: p.font_family,
             },
         )
         .await

koharu-mcp/src/params.rs

@@ -49,6 +49,8 @@ pub(crate) struct RenderParams {
     pub text_block_index: Option<usize>,
     /// Shader effect: "normal", "antique", "metal", "manga", "motionblur"
     pub shader_effect: Option<String>,
+    /// Selected font family for rendering
+    pub font_family: Option<String>,
 }
 
 #[derive(Deserialize, JsonSchema)]
@@ -77,6 +79,8 @@ pub(crate) struct ProcessParams {
     pub language: Option<String>,
     /// Shader effect
     pub shader_effect: Option<String>,
+    /// Selected font family for rendering
+    pub font_family: Option<String>,
 }
 
 #[derive(Deserialize, JsonSchema)]

koharu-pipeline/src/operations.rs

@@ -509,6 +509,7 @@ pub struct RenderPayload {
     pub index: usize,
     pub text_block_index: Option<usize>,
     pub shader_effect: Option<TextShaderEffect>,
+    pub font_family: Option<String>,
 }
 
 #[instrument(level = "info", skip_all)]
@@ -527,6 +528,7 @@ pub async fn render(state: AppResources, payload: RenderPayload) -> anyhow::Resu
         &mut updated,
         payload.text_block_index,
         payload.shader_effect.unwrap_or_default(),
+        payload.font_family.as_deref(),
     )?;
 
     let mut guard = state.state.write().await;

koharu-pipeline/src/pipeline.rs

@@ -69,6 +69,8 @@ pub struct ProcessRequest {
     pub language: Option<String>,
     /// Shader effect for rendering.
     pub shader_effect: Option<TextShaderEffect>,
+    /// Selected font family for rendering.
+    pub font_family: Option<String>,
 }
 
 /// Handle to a running pipeline, used for cancellation.
@@ -242,6 +244,7 @@ async fn run_pipeline_inner(
                         &mut snapshot,
                         None,
                         req.shader_effect.unwrap_or_default(),
+                        req.font_family.as_deref(),
                     )?;
                 }
             }

koharu-renderer/src/facade.rs

@@ -49,6 +49,7 @@ impl Renderer {
         document: &mut Document,
         text_block_index: Option<usize>,
         effect: TextShaderEffect,
+        font_family: Option<&str>,
     ) -> Result<()> {
         let mut text_blocks = match text_block_index {
             Some(index) => document
@@ -60,7 +61,7 @@ impl Renderer {
         };
 
         text_blocks.par_iter_mut().for_each(|text_block| {
-            let _ = self.render_text_block(text_block, effect);
+            let _ = self.render_text_block(text_block, effect, font_family);
         });
 
         if let Some(inpainted) = &document.inpainted
@@ -93,6 +94,7 @@ impl Renderer {
         &self,
         text_block: &mut TextBlock,
         effect: TextShaderEffect,
+        font_family: Option<&str>,
     ) -> Result<()> {
         let Some(translation) = &text_block.translation else {
             return Ok(());
@@ -101,12 +103,21 @@ impl Renderer {
             return Ok(());
         };
 
-        let style = text_block.style.clone().unwrap_or_else(|| TextStyle {
+        let mut style = text_block.style.clone().unwrap_or_else(|| TextStyle {
             font_families: fonts_for_script(translation),
             font_size: None,
             color: [0, 0, 0, 255],
             effect: None,
         });
+
+        if let Some(ff) = font_family {
+            if !style.font_families.contains(&ff.to_string()) {
+                style.font_families.insert(0, ff.to_string());
+            } else {
+                style.font_families.retain(|x| x != ff);
+                style.font_families.insert(0, ff.to_string());
+            }
+        }
         let font = self.select_font(&style)?;
         let block_effect = style.effect.unwrap_or(effect);
         let color = text_block

ui/components/canvas/CanvasToolbar.tsx

@@ -12,7 +12,7 @@ import {
   LanguagesIcon,
 } from 'lucide-react'
 import { Separator } from '@/components/ui/separator'
-import { useAppStore } from '@/lib/store'
+import { useAppStore, useConfigStore } from '@/lib/store'
 import { useTextBlocks } from '@/hooks/useTextBlocks'
 import { RenderEffect, RgbaColor, TextStyle } from '@/types'
 import { Button } from '@/components/ui/button'
@@ -154,6 +154,7 @@ export function RenderControls() {
     availableFonts,
     fetchAvailableFonts,
   } = useAppStore()
+  const { fontFamily, setFontFamily } = useConfigStore()
   const { textBlocks, selectedBlockIndex, replaceBlock } = useTextBlocks()
   const { t } = useTranslation()
   const selectedBlock =
@@ -169,11 +170,13 @@ export function RenderControls() {
     availableFonts.length > 0
       ? availableFonts
       : [
+          ...(fontFamily ? [fontFamily] : []),
           ...(selectedBlock?.style?.fontFamilies?.slice(0, 1) ?? []),
           ...DEFAULT_FONT_FAMILIES,
         ]
   const fontOptions = uniqueStrings(fontCandidates)
   const currentFont =
+    fontFamily ??
     selectedBlock?.style?.fontFamilies?.[0] ??
     firstBlock?.style?.fontFamilies?.[0] ??
     (hasBlocks ? fallbackFontFamilies[0] : '')
@@ -236,6 +239,7 @@ export function RenderControls() {
       <Select
         value={currentFont}
         onValueChange={(value) => {
+          setFontFamily(value)
           const nextFamilies = mergeFontFamilies(
             value,
             selectedBlock?.style?.fontFamilies,
@@ -250,7 +254,7 @@ export function RenderControls() {
           }))
           void updateTextBlocks(nextBlocks)
         }}
-        disabled={!hasBlocks || fontOptions.length === 0}
+        disabled={fontOptions.length === 0}
       >
         <SelectTrigger
           size='sm'
@@ -259,7 +263,7 @@ export function RenderControls() {
         >
           <SelectValue placeholder={t('render.fontPlaceholder')} />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent position='popper'>
           {fontOptions.map((font) => (
             <SelectItem key={font} value={font} style={{ fontFamily: font }}>
               {font}
@@ -299,7 +303,7 @@ export function RenderControls() {
         <SelectTrigger size='sm' className='h-8 w-28 text-sm'>
           <SelectValue />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent position='popper'>
           {effects.map((effect) => (
             <SelectItem key={effect.value} value={effect.value}>
               {effect.label}
@@ -371,7 +375,7 @@ function LlmStatusPopover() {
             <SelectTrigger className='w-full'>
               <SelectValue placeholder={t('llm.selectPlaceholder')} />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent position='popper'>
               {llmModels.map((model) => (
                 <SelectItem key={model.id} value={model.id}>
                   {model.id}
@@ -389,7 +393,7 @@ function LlmStatusPopover() {
               <SelectTrigger className='w-full'>
                 <SelectValue placeholder={t('llm.languagePlaceholder')} />
               </SelectTrigger>
-              <SelectContent>
+              <SelectContent position='popper'>
                 {activeLanguages.map((language) => (
                   <SelectItem key={language} value={language}>
                     {language}

ui/lib/rpc-types.ts

@@ -63,6 +63,7 @@ export type RpcMethodMap = {
       index: number
       textBlockIndex?: number
       shaderEffect?: RenderEffect
+      fontFamily?: string
     },
     void,
   ]
@@ -82,6 +83,7 @@ export type RpcMethodMap = {
       llmModelId?: string
       language?: string
       shaderEffect?: RenderEffect
+      fontFamily?: string
     },
     void,
   ]

ui/lib/store.ts

@@ -1,6 +1,7 @@
 'use client'
 
 import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
 import i18n from '@/lib/i18n'
 import {
   invoke,
@@ -463,6 +464,7 @@ export const useAppStore = create<AppState>((set, get) => {
       await invoke('render', {
         index,
         shaderEffect: get().renderEffect,
+        fontFamily: useConfigStore.getState().fontFamily,
       })
       if (index === get().currentDocumentIndex) {
         await get().refreshCurrentDocument()
@@ -478,6 +480,7 @@ export const useAppStore = create<AppState>((set, get) => {
         index,
         textBlockIndex,
         shaderEffect: get().renderEffect,
+        fontFamily: useConfigStore.getState().fontFamily,
       })
       if (index === get().currentDocumentIndex) {
         await get().refreshCurrentDocument()
@@ -630,6 +633,7 @@ export const useAppStore = create<AppState>((set, get) => {
           llmModelId: get().llmSelectedModel,
           language: get().llmSelectedLanguage,
           shaderEffect: get().renderEffect,
+          fontFamily: useConfigStore.getState().fontFamily,
         })
       } catch (err) {
         console.error('Failed to start processing:', err)
@@ -659,6 +663,7 @@ export const useAppStore = create<AppState>((set, get) => {
           llmModelId: get().llmSelectedModel,
           language: get().llmSelectedLanguage,
           shaderEffect: get().renderEffect,
+          fontFamily: useConfigStore.getState().fontFamily,
         })
       } catch (err) {
         console.error('Failed to start processing:', err)
@@ -694,6 +699,8 @@ type ConfigState = {
     color: string
   }
   setBrushConfig: (config: Partial<ConfigState['brushConfig']>) => void
+  fontFamily?: string
+  setFontFamily: (font: string) => void
 }
 
 // Subscribe to pipeline progress at module level so the EventSource is
@@ -741,13 +748,22 @@ if (typeof window !== 'undefined') {
   })
 }
 
-export const useConfigStore = create<ConfigState>((set) => ({
-  brushConfig: {
-    size: 36,
-    color: '#ffffff',
-  },
-  setBrushConfig: (config) =>
-    set((state) => ({
-      brushConfig: { ...state.brushConfig, ...config },
-    })),
-}))
+export const useConfigStore = create<ConfigState>()(
+  persist(
+    (set) => ({
+      brushConfig: {
+        size: 36,
+        color: '#ffffff',
+      },
+      setBrushConfig: (config) =>
+        set((state) => ({
+          brushConfig: { ...state.brushConfig, ...config },
+        })),
+      fontFamily: undefined,
+      setFontFamily: (font) => set({ fontFamily: font }),
+    }),
+    {
+      name: 'koharu-config',
+    },
+  ),
+)