@qilin-agent/client-ui-theme 3.1.4 → 3.1.6

package/lib/index.js

@@ -21,20 +21,115 @@ const FONT_SIZE_MIN = 10;
 const FONT_SIZE_MAX = 22;
 /** Content font size when the user-settings document has no override (px). */
 const DEFAULT_FONT_SIZE = 14;
-/** Durable theme schema; also the wire envelope the browser scope validates against. */
-const ThemeSettingsSchema = z.object({
+/** Independently configurable font roles. */
+const FONT_ROLES = [
+	"text",
+	"code",
+	"terminal"
+];
+/**
+* Font sizes by role. `text` is the conversation content size; `code` is the
+* code-block size (inline code stays 1px larger); `terminal` is the sidebar
+* terminal cell font size.
+*/
+const FONT_SIZE_SPECS = {
+	text: {
+		field: FONT_SIZE_FIELD,
+		variable: "--qilin-content-font-size",
+		min: 10,
+		max: 22,
+		default: 14
+	},
+	code: {
+		field: "codeFontSize",
+		variable: "--qilin-code-font-size",
+		min: 10,
+		max: 16,
+		default: 11
+	},
+	terminal: {
+		field: "terminalFontSize",
+		variable: "--qilin-terminal-font-size",
+		min: 10,
+		max: 20,
+		default: 13
+	}
+};
+/** Default font sizes by role. */
+const DEFAULT_FONT_SIZES = Object.freeze({
+	text: FONT_SIZE_SPECS.text.default,
+	code: FONT_SIZE_SPECS.code.default,
+	terminal: FONT_SIZE_SPECS.terminal.default
+});
+/** Settings field carrying each role's font-family list. */
+const FONT_FAMILY_FIELDS = {
+	text: "textFontFamily",
+	code: "codeFontFamily",
+	terminal: "terminalFontFamily"
+};
+/**
+* Body variable carrying one role's normalized font list; the token sheet
+* places it ahead of that role's built-in stack.
+* @param kind - font role.
+* @returns the CSS custom property name.
+*/
+function fontFamilyVariable(kind) {
+	return `--qilin-font-family-${kind}`;
+}
+/**
+* Integer px schema for one role's font size.
+* @param spec - the role's range and default.
+* @returns the validated number schema.
+*/
+function fontSizeSchema(spec) {
+	return z.number().step(1).min(spec.min).max(spec.max).default(spec.default);
+}
+z.object({
 	[THEME_PREFERENCE_FIELD]: z.union([...THEME_PREFERENCES]).default(DEFAULT_PREFERENCE),
-	[FONT_SIZE_FIELD]: z.number().step(1).min(10).max(22).default(14)
+	[FONT_SIZE_FIELD]: fontSizeSchema(FONT_SIZE_SPECS.text),
+	[FONT_SIZE_SPECS.code.field]: fontSizeSchema(FONT_SIZE_SPECS.code),
+	[FONT_SIZE_SPECS.terminal.field]: fontSizeSchema(FONT_SIZE_SPECS.terminal),
+	[FONT_FAMILY_FIELDS.text]: z.string().default(""),
+	[FONT_FAMILY_FIELDS.code]: z.string().default(""),
+	[FONT_FAMILY_FIELDS.terminal]: z.string().default("")
 });
+/** CSS Fonts generic and system family keywords, which must stay unquoted. */
+const GENERIC_FAMILIES = new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded",
+	"emoji",
+	"math",
+	"fangsong",
+	"-apple-system",
+	"blinkmacsystemfont"
+]);
+/**
+* Normalize user input into a CSS font-family list. Names are comma separated;
+* quotes, backslashes, angle brackets, and control characters are dropped, and
+* every non-generic name is double-quoted, so the result is always a valid list
+* safe to embed in inline CSS and boot scripts. Normalizing a result returns it unchanged.
+* @param value - user-entered or stored font list.
+* @returns the normalized list, or `''` when no family name remains.
+*/
+function normalizeFontFamily(value) {
+	return value.split(",").map((name) => name.replace(/["'\\<>\u0000-\u001f\u007f]/gu, "").replace(/\s+/gu, " ").trim()).filter((name) => name !== "").map((name) => GENERIC_FAMILIES.has(name.toLowerCase()) ? name : `"${name}"`).join(", ");
+}
 //#endregion
 //#region lib/types/boot-theme.js
 /**
 * Theme bootstrap row for the browser's pre-plugin interval. Each index
-* render embeds the current durable built-in preference, content font size,
-* and content font size. Head CSS colors the document canvas before script
-* execution; the body script installs the palette selector and both content
-* axes that ui-layout's ThemePresenter adopts after the client plugin tree
-* activates.
+* render embeds the current durable built-in preference, font sizes, and
+* font-family lists. Head CSS colors the document canvas before script
+* execution; the body script installs the palette selector and font variables
+* that the client presenters adopt.
 */
 const LIGHT_BACKGROUND = "#fff";
 const DARK_BACKGROUND = "#151517";
@@ -46,8 +141,13 @@ function bootThemeStyle(preference) {
 	if (preference === "dark") return dark;
 	return `${light}@media(prefers-color-scheme:dark){${dark}}`;
 }
-/** Build the body script that installs the palette selector, font size, and leading. */
-function bootThemeBodyScript(preference, fontSize) {
+/** Build the body script that installs the palette selector and font variables. */
+function bootThemeBodyScript(preference, fontSizes, fontFamilies) {
+	const sizes = FONT_ROLES.map((role) => `\n  document.body.style.setProperty(${JSON.stringify(FONT_SIZE_SPECS[role].variable)}, ${JSON.stringify(`${fontSizes[role]}px`)})`).join("");
+	const families = FONT_ROLES.flatMap((kind) => {
+		const list = normalizeFontFamily(fontFamilies[kind]);
+		return list === "" ? [] : [`\n  document.body.style.setProperty(${JSON.stringify(fontFamilyVariable(kind))}, ${JSON.stringify(list)})`];
+	}).join("");
 	return `(() => {
   const preference = ${JSON.stringify(preference)}
   const systemDark = preference === 'system'
@@ -55,58 +155,71 @@ function bootThemeBodyScript(preference, fontSize) {
     && matchMedia('(prefers-color-scheme: dark)').matches
   const dark = preference === 'dark' || systemDark
   document.documentElement.dataset.dsThemeSource = preference
-  document.body.toggleAttribute('data-ds-dark-theme', dark)
-  document.body.style.setProperty('--qilin-content-font-size', ${JSON.stringify(`${fontSize}px`)})
+  document.body.toggleAttribute('data-ds-dark-theme', dark)${sizes}${families}
 })()`;
 }
 /**
 * Theme bootstrap rows: head CSS colors the document canvas before
-* first paint, then the body script installs the palette selector and the
-* content font size and leading before the shell mount and module script.
+* first paint, then the body script installs the palette selector and font
+* size and font families before the shell mount and module script.
 * @param preference - Current Host-backed built-in preference.
-* @param fontSize - Current Host-backed content font size in px.
-* @returns head style and body script rows in execution order.
+* @param fontSizes - Current Host-backed font sizes in px by role.
+* @param fontFamilies - Current Host-backed font lists; each is normalized before embedding.
+* @returns head and body script rows in execution order.
 */
-function bootThemeInjections(preference = DEFAULT_PREFERENCE, fontSize = 14) {
+function bootThemeInjections(preference = DEFAULT_PREFERENCE, fontSizes = DEFAULT_FONT_SIZES, fontFamilies = {
+	text: "",
+	code: "",
+	terminal: ""
+}) {
 	return [{
 		kind: "style",
 		text: bootThemeStyle(preference)
 	}, {
 		kind: "script",
 		placement: "body",
-		text: bootThemeBodyScript(preference, fontSize)
+		text: bootThemeBodyScript(preference, fontSizes, fontFamilies)
 	}];
 }
 //#endregion
 //#region lib/types/index.js
-/** Host registration for the browser theme preference and pre-plugin palette. */
-const THEME_NAMESPACE = THEME_SETTINGS_NAMESPACE;
-/** Read the registered theme section or the schema defaults without a settings provider. */
-function readSection(ctx) {
-	const fallback = {
-		preference: DEFAULT_PREFERENCE,
-		fontSize: 14
-	};
-	const settings = ctx.get("settings");
-	if (settings === void 0) return fallback;
-	const section = settings.get(THEME_NAMESPACE);
-	if (section === void 0) return fallback;
-	return section;
-}
 /**
-* Register the durable theme section when the optional settings service is
-* composed, and answer every index injection collection with the current
-* theme bootstrap row.
-* @param ctx - Host context that may acquire the settings service.
+* Font-family lists read from the live config, keyed by role.
+* @param families - the detached per-role lists.
+* @returns the frozen per-role font-family lists.
+*/
+function sectionFontFamilies(families) {
+	return Object.freeze({ ...families });
+}
+/** Live theme and typography preferences. */
+const Config = z.object({
+	preference: z.union([...THEME_PREFERENCES]).default(DEFAULT_PREFERENCE).volatile(),
+	fontSize: fontSizeSchema(FONT_SIZE_SPECS.text).volatile(),
+	codeFontSize: fontSizeSchema(FONT_SIZE_SPECS.code).volatile(),
+	terminalFontSize: fontSizeSchema(FONT_SIZE_SPECS.terminal).volatile(),
+	textFontFamily: z.string().default("").volatile(),
+	codeFontFamily: z.string().default("").volatile(),
+	terminalFontFamily: z.string().default("").volatile()
+});
+/** Supply the current palette before browser plugins start.
+* @param ctx Host plugin context.
+* @param config Validated live theme preferences.
 */
-function apply(ctx) {
-	ctx.inject(["settings"], (settingsCtx) => {
-		settingsCtx.settings.register(THEME_NAMESPACE, ThemeSettingsSchema);
+function apply(ctx, config) {
+	ctx.inject(["settings"], (child) => {
+		child.effect(() => child.settings.configure({ auto: false }, ctx.fiber));
 	});
 	ctx.on("webserver/index-inject", (table) => {
-		const section = readSection(ctx);
-		table.push(...bootThemeInjections(section.preference, section.fontSize));
+		table.push(...bootThemeInjections(config.preference.get(), {
+			text: config.fontSize.get(),
+			code: config.codeFontSize.get(),
+			terminal: config.terminalFontSize.get()
+		}, sectionFontFamilies({
+			text: config.textFontFamily.get(),
+			code: config.codeFontFamily.get(),
+			terminal: config.terminalFontFamily.get()
+		})));
 	}, { prepend: true });
 }
 //#endregion
-export { DEFAULT_FONT_SIZE, DEFAULT_PREFERENCE, FONT_SIZE_FIELD, FONT_SIZE_MAX, FONT_SIZE_MIN, THEME_PREFERENCES, THEME_PREFERENCE_FIELD, THEME_SETTINGS_NAMESPACE, apply };
+export { Config, DEFAULT_FONT_SIZE, DEFAULT_PREFERENCE, FONT_FAMILY_FIELDS, FONT_ROLES, FONT_SIZE_FIELD, FONT_SIZE_MAX, FONT_SIZE_MIN, FONT_SIZE_SPECS, THEME_PREFERENCES, THEME_PREFERENCE_FIELD, THEME_SETTINGS_NAMESPACE, apply, sectionFontFamilies };

package/lib/types/boot-theme.d.ts

@@ -1,20 +1,20 @@
 /**
  * Theme bootstrap row for the browser's pre-plugin interval. Each index
- * render embeds the current durable built-in preference, content font size,
- * and content font size. Head CSS colors the document canvas before script
- * execution; the body script installs the palette selector and both content
- * axes that ui-layout's ThemePresenter adopts after the client plugin tree
- * activates.
+ * render embeds the current durable built-in preference, font sizes, and
+ * font-family lists. Head CSS colors the document canvas before script
+ * execution; the body script installs the palette selector and font variables
+ * that the client presenters adopt.
  */
 import type { IndexInjection } from '@qilin-agent/host-webserver';
-import { type ThemePreference } from './theme-settings.ts';
+import { type FontFamilies, type FontSizes, type ThemePreference } from './theme-settings.ts';
 /**
  * Theme bootstrap rows: head CSS colors the document canvas before
- * first paint, then the body script installs the palette selector and the
- * content font size and leading before the shell mount and module script.
+ * first paint, then the body script installs the palette selector and font
+ * size and font families before the shell mount and module script.
  * @param preference - Current Host-backed built-in preference.
- * @param fontSize - Current Host-backed content font size in px.
- * @returns head style and body script rows in execution order.
+ * @param fontSizes - Current Host-backed font sizes in px by role.
+ * @param fontFamilies - Current Host-backed font lists; each is normalized before embedding.
+ * @returns head and body script rows in execution order.
  */
-export declare function bootThemeInjections(preference?: ThemePreference, fontSize?: number): IndexInjection[];
+export declare function bootThemeInjections(preference?: ThemePreference, fontSizes?: FontSizes, fontFamilies?: FontFamilies): IndexInjection[];
 //# sourceMappingURL=boot-theme.d.ts.map

package/lib/types/client/FontFamilyRow.d.ts

@@ -0,0 +1,19 @@
+import type { PropsLocale, PropsRuntime, PropsStore } from '@qilin-agent/client-ui-slots';
+import { type FontRole } from '../theme-settings.ts';
+import type { createFontRowStore } from './settings-store.ts';
+/** Injected business face: the row's font role and its write. */
+export interface FontFamilyRowInjected {
+    /** Font role this row edits. */
+    role: FontRole;
+    /** Change this role's font list (normalized by the theme service). */
+    setFontFamily: (value: string) => void;
+}
+/** Full component props: runtime share + store share + locale seat + injected face. */
+export type FontFamilyRowComponentProps = PropsRuntime<'settings.general.item'> & PropsStore<ReturnType<typeof createFontRowStore>> & PropsLocale<'settings.theme'> & FontFamilyRowInjected;
+/**
+ * Render one font-family row.
+ * @param props - composed slot props.
+ * @returns the row element tree.
+ */
+export declare function FontFamilyRow({ t, role, setFontFamily, useStore }: FontFamilyRowComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=FontFamilyRow.d.ts.map

package/lib/types/client/FontSettingsGroup.d.ts

@@ -0,0 +1,19 @@
+import type { PropsLocale, PropsRuntime, PropsStore } from '@qilin-agent/client-ui-slots';
+import type { FontRole } from '../theme-settings.ts';
+import type { createFontRowStore } from './settings-store.ts';
+/** Injected business face: font writes by role. */
+export interface FontSettingsInjected {
+    /** Change one role's font list (normalized by the theme service). */
+    setFontFamily: (role: FontRole, value: string) => void;
+    /** Change one role's font size (integer px within its FONT_SIZE_SPECS range). */
+    setFontSize: (role: FontRole, px: number) => void;
+}
+/** Full component props: runtime share + store share + locale seat + injected face. */
+export type FontSettingsGroupProps = PropsRuntime<'settings.general.item'> & PropsStore<ReturnType<typeof createFontRowStore>> & PropsLocale<'settings.theme'> & FontSettingsInjected;
+/**
+ * Render the text font-size row and its expandable font settings.
+ * @param props - composed slot props.
+ * @returns the text size row and, when expanded, the font rows.
+ */
+export declare function FontSettingsGroup({ setFontFamily, setFontSize, ...shared }: FontSettingsGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=FontSettingsGroup.d.ts.map

package/lib/types/client/FontSizeRow.d.ts

@@ -1,16 +1,31 @@
 import type { PropsLocale, PropsRuntime, PropsStore } from '@qilin-agent/client-ui-slots';
-import type { createTypographyRowStore } from './settings-store.ts';
-/** Injected business face: the preference write (t rides the standard locale seat). */
+import { type FontRole } from '../theme-settings.ts';
+import type { createFontRowStore } from './settings-store.ts';
+/** Injected business face: the row's font role and its write (t rides the standard locale seat). */
 export interface FontSizeRowInjected {
-    /** Change the content font size (integer px within FONT_SIZE_MIN..FONT_SIZE_MAX). */
+    /** Font role this row edits. */
+    role: FontRole;
+    /** Change this role's font size (integer px within its FONT_SIZE_SPECS range). */
     setFontSize: (px: number) => void;
 }
 /** Full component props: runtime share + store share + locale seat + injected face. */
-export type FontSizeRowComponentProps = PropsRuntime<'settings.general.item'> & PropsStore<ReturnType<typeof createTypographyRowStore>> & PropsLocale<'settings.theme'> & FontSizeRowInjected;
+export type FontSizeRowComponentProps = PropsRuntime<'settings.general.item'> & PropsStore<ReturnType<typeof createFontRowStore>> & PropsLocale<'settings.theme'> & FontSizeRowInjected & {
+    /** Disclosure button after the unit label; the font settings group passes it for the text row. */
+    expander?: FontSizeRowExpander | undefined;
+};
+/** Controlled disclosure state for the button that expands more font settings. */
+export interface FontSizeRowExpander {
+    /** Whether the controlled region is shown. */
+    open: boolean;
+    /** Id of the controlled region. */
+    controls: string;
+    /** Toggle the region. */
+    onToggle: () => void;
+}
 /**
  * Render the font-size row.
  * @param props - composed slot props.
  * @returns the row element tree.
  */
-export declare function FontSizeRow({ t, setFontSize, useStore }: FontSizeRowComponentProps): import("react").JSX.Element;
+export declare function FontSizeRow({ t, role, setFontSize, useStore, expander }: FontSizeRowComponentProps): import("react").JSX.Element;
 //# sourceMappingURL=FontSizeRow.d.ts.map

package/lib/types/client/font-size-shortcuts.d.ts

@@ -0,0 +1,13 @@
+/** Desktop keyboard shortcuts that step all three font sizes together. */
+import type { Context as ClientContext } from '@qilin-agent/kylin';
+/**
+ * Register the desktop font-size keys and consume their gestures.
+ * The web client keeps the browser's own zoom for these keys, so the
+ * registration exists only where the keyboard service reports the desktop
+ * runtime.
+ * @param ctx - client cordis context owning the registration effects.
+ * @param namespace - locale namespace carrying the shortcut labels (this package's own).
+ * @param adjust - applies one +1 or -1 px step to every font-size role.
+ */
+export declare function installFontSizeShortcuts(ctx: ClientContext, namespace: 'settings.theme', adjust: (delta: 1 | -1) => void): void;
+//# sourceMappingURL=font-size-shortcuts.d.ts.map

package/lib/types/client/index.d.ts

@@ -1,21 +1,22 @@
 /**
- * Browser theme registry over the `--qilin-*` token stylesheets. The service
+ * Browser theme registry over the `--dsw-*` token stylesheets. The service
  * owns the live theme preference (light/dark/system), resolves `system` through
  * `prefers-color-scheme`, and publishes immutable snapshots; it never touches
  * the DOM — ui-layout's presenter consumes the resolved snapshot. The Host
  * settings scope loads and stores the preference in the user-settings
- * document. The plugin also registers the Appearance preference row into the
- * settings General section — the theme feature owns its own settings surface.
+ * document. The plugin also registers the Appearance and font settings rows
+ * into the settings General section — the theme feature owns its own settings
+ * surface.
  */
 import type { Context as ClientContext } from '@qilin-agent/kylin';
 import type { ConfigForm } from '@qilin-agent/client-ui-settings/client';
 import { type ThemeKey } from './locales.ts';
-import { type ThemePreference, type ThemeSettings } from '../theme-settings.ts';
-export type { FontSizeRowComponentProps, FontSizeRowInjected } from './FontSizeRow.tsx';
+import { type FontFamilies, type FontRole, type FontSizes, type ThemePreference, type ThemeSettings } from '../theme-settings.ts';
 export type { AppearanceRowComponentProps, AppearanceRowInjected } from './AppearanceRow.tsx';
-export type { AppearanceRowState, TypographyRowState } from './settings-store.ts';
+export type { FontSettingsGroupProps, FontSettingsInjected } from './FontSettingsGroup.tsx';
+export type { AppearanceRowState, FontRowState } from './settings-store.ts';
 export type { ThemeKey } from './locales.ts';
-export type { ThemePreference, ThemeSettings } from '../theme-settings.ts';
+export type { FontFamilies, FontRole, FontSizes, ThemePreference, ThemeSettings } from '../theme-settings.ts';
 /** Namespace owning this feature's settings-row copy. */
 export declare const SETTINGS_NS = "settings.theme";
 declare module '@qilin-agent/client-ui-slots' {
@@ -24,7 +25,7 @@ declare module '@qilin-agent/client-ui-slots' {
         'settings.theme': ThemeKey;
     }
 }
-/** Theme token dictionary: --qilin-alias-* overrides keyed by variable name. */
+/** Theme token dictionary: --dsw-alias-* overrides keyed by variable name. */
 export type ThemeTokens = Record<string, string>;
 /**
  * One override-layer token value: both palette modes are mandatory (repeat
@@ -55,8 +56,10 @@ export interface ThemeDefinition {
 export interface ThemeSnapshot {
     /** The persisted preference (may be `system`). */
     preference: ThemePreference;
-    /** Conversation content font size in px (integer within FONT_SIZE_MIN..FONT_SIZE_MAX). */
-    fontSize: number;
+    /** Integer px font sizes by role, each within its `FONT_SIZE_SPECS` range (`text` is the conversation content size). */
+    fontSizes: FontSizes;
+    /** Normalized user font lists by role; `''` selects the role's built-in stack. */
+    fontFamilies: FontFamilies;
     /**
      * The resolved active theme (`system` resolved via prefers-color-scheme)
      * with override layers folded into its tokens (seq order, later layers win
@@ -111,8 +114,11 @@ export declare class ThemeRuntime {
     private readonly host;
     private themes;
     private preference;
-    private fontSize;
+    private fontSizes;
+    private fontFamilies;
     private revision;
+    /** Own settings writes not yet settled; adoption waits for zero so a Host echo of an earlier write cannot revert a later local change. */
+    private pendingWrites;
     private snapshot;
     private readonly media;
     /** Override layers by source; seq (monotonic) is the stacking order. */
@@ -142,12 +148,28 @@ export declare class ThemeRuntime {
      */
     setTheme(id: string): void;
     /**
-     * Change the conversation content font size — the only font-size write
-     * entry. Accepted values are written through the settings scope and emit
-     * `theme/change`.
-     * @param px - integer px within FONT_SIZE_MIN..FONT_SIZE_MAX; out-of-range or fractional values throw.
+     * Change one role's font size — the only font-size write entry. Accepted
+     * values are written through the settings scope and emit `theme/change`.
+     * @param role - font role.
+     * @param px - integer px within the role's `FONT_SIZE_SPECS` range; out-of-range or fractional values throw.
      */
-    setFontSize(px: number): void;
+    setFontSize(role: FontRole, px: number): void;
+    /**
+     * Step all font sizes within their own ranges and save changed fields in one mutation.
+     * Emits one `theme/change`; no write or event occurs when every role is at its limit.
+     * @param delta - one pixel to add or remove from each role's current size.
+     */
+    private adjustFontSizes;
+    /**
+     * Change one role's font list — the only font-family write entry. The value
+     * is normalized, written through the settings scope, and emits `theme/change`
+     * when the normalized list differs.
+     * @param role - font role.
+     * @param value - comma-separated family names; a value without names restores the built-in stack.
+     */
+    setFontFamily(role: FontRole, value: string): void;
+    /** Queue one settings write, then adopt the durable section once no own write remains. */
+    private write;
     /** Adopt the scope's accepted durable preference without writing it back. */
     private adopt;
     /**
@@ -194,8 +216,8 @@ export declare class ThemeRuntime {
 export declare const inject: string[];
 /**
  * Client plugin body: provide the theme service and register the
- * feature-owned Appearance, font-size, and line-spacing preference rows into
- * the General section's item slot (a feature owns its settings surface).
+ * feature-owned Appearance and font settings rows into the General section's item
+ * slot (a feature owns its settings surface).
  * @param ctx - client cordis context.
  */
 export declare function apply(ctx: ClientContext): void;

package/lib/types/client/locales.d.ts

@@ -1,15 +1,31 @@
-/** `settings.theme` namespace dictionaries (the Appearance, font-size, and line-spacing rows' copy). */
+/** `settings.theme` namespace dictionaries (the Appearance and font settings rows' copy). */
 /** Simplified Chinese dictionary (the key-set source of truth). */
 export declare const zh: {
     'appearance.title': string;
     'appearance.light': string;
     'appearance.dark': string;
     'appearance.system': string;
-    'fontSize.title': string;
-    'fontSize.description': string;
+    'fontSize.text.title': string;
+    'fontSize.text.description': string;
+    'fontSize.text.increase': string;
+    'fontSize.text.decrease': string;
+    'fontSize.code.title': string;
+    'fontSize.code.description': string;
+    'fontSize.code.increase': string;
+    'fontSize.code.decrease': string;
+    'fontSize.terminal.title': string;
+    'fontSize.terminal.description': string;
+    'fontSize.terminal.increase': string;
+    'fontSize.terminal.decrease': string;
     'fontSize.unit': string;
-    'fontSize.increase': string;
-    'fontSize.decrease': string;
+    'fontFamily.text.title': string;
+    'fontFamily.text.description': string;
+    'fontFamily.code.title': string;
+    'fontFamily.code.description': string;
+    'fontFamily.terminal.title': string;
+    'fontFamily.terminal.description': string;
+    'fontFamily.placeholder': string;
+    'fontSize.more': string;
 };
 /** The settings.theme namespace key union. */
 export type ThemeKey = keyof typeof zh;
@@ -19,10 +35,26 @@ export declare const en: {
     'appearance.light': string;
     'appearance.dark': string;
     'appearance.system': string;
-    'fontSize.title': string;
-    'fontSize.description': string;
+    'fontSize.text.title': string;
+    'fontSize.text.description': string;
+    'fontSize.text.increase': string;
+    'fontSize.text.decrease': string;
+    'fontSize.code.title': string;
+    'fontSize.code.description': string;
+    'fontSize.code.increase': string;
+    'fontSize.code.decrease': string;
+    'fontSize.terminal.title': string;
+    'fontSize.terminal.description': string;
+    'fontSize.terminal.increase': string;
+    'fontSize.terminal.decrease': string;
     'fontSize.unit': string;
-    'fontSize.increase': string;
-    'fontSize.decrease': string;
+    'fontFamily.text.title': string;
+    'fontFamily.text.description': string;
+    'fontFamily.code.title': string;
+    'fontFamily.code.description': string;
+    'fontFamily.terminal.title': string;
+    'fontFamily.terminal.description': string;
+    'fontFamily.placeholder': string;
+    'fontSize.more': string;
 };
 //# sourceMappingURL=locales.d.ts.map

package/lib/types/client/settings-store.d.ts

@@ -1,11 +1,11 @@
 /**
- * Appearance and typography settings-row slot stores: mirrors of the theme
- * service snapshot. The plugin's apply-world change listener is the only
- * writer; the rows read their fields via props.useStore.
+ * Appearance and font row slot stores: mirrors of the theme service
+ * snapshot. The plugin's apply-world change listener is the only writer; the
+ * row components read via props.useStore.
  */
 import { type EngineStoreHandle } from '@qilin-agent/client-store';
-import { type ThemePreference } from '../theme-settings.ts';
-/** Store state mirrored from the theme snapshot's appearance preference. */
+import { type FontFamilies, type FontSizes, type ThemePreference } from '../theme-settings.ts';
+/** Store state mirrored from the theme snapshot. */
 export interface AppearanceRowState {
     /** Persisted preference (selection state reads this, never the resolved active theme). */
     preference: ThemePreference;
@@ -21,21 +21,23 @@ type AppearanceRowActions = {
  * @returns the store handle.
  */
 export declare function createAppearanceRowStore(): EngineStoreHandle<AppearanceRowState, AppearanceRowActions>;
-/** Store state mirrored from the theme snapshot's typography fields. */
-export interface TypographyRowState {
-    /** Persisted content font size in px. */
-    fontSize: number;
+/** Store state mirrored from the theme snapshot's fonts (shared by the font-size row and the font settings group). */
+export interface FontRowState {
+    /** Persisted font sizes in px by role. */
+    fontSizes: FontSizes;
+    /** Persisted normalized font lists by role. */
+    fontFamilies: FontFamilies;
     /** Service revision; -1 until first sync so revision 0 lands as a change. */
     revision: number;
 }
 /** Declared action shape giving the exported factory a stable return type. */
-type TypographyRowActions = {
-    sync: (draft: TypographyRowState, fontSize: number, revision: number) => void;
+type FontRowActions = {
+    sync: (draft: FontRowState, fontSizes: FontSizes, fontFamilies: FontFamilies, revision: number) => void;
 };
 /**
- * Declares the shared typography-row state and write surface.
+ * Declares the font rows' state and write surface.
  * @returns the store handle.
  */
-export declare function createTypographyRowStore(): EngineStoreHandle<TypographyRowState, TypographyRowActions>;
+export declare function createFontRowStore(): EngineStoreHandle<FontRowState, FontRowActions>;
 export {};
 //# sourceMappingURL=settings-store.d.ts.map