From aaa8e46b81bda8da0b4ebddbc802167eb52472e5 Mon Sep 17 00:00:00 2001
From: mattenarle10 <enarlem10@gmail.com>
Date: Sat, 27 Jun 2026 11:38:03 +0800
Subject: [PATCH 1/6] fix: polish reading display controls

---
 src/app.css                            |  16 +++-
 src/app.tsx                            |  34 ++++++-
 src/components/chrome/breadcrumb.tsx   |  12 +++
 src/components/chrome/theme-button.tsx |  36 +++++++-
 src/components/chrome/title-bar.tsx    |  12 +++
 src/hooks/use-selection-sync-text.ts   | 123 +------------------------
 src/lib/index.ts                       |   9 ++
 src/lib/storage.ts                     |   3 +
 src/lib/theme.ts                       |   2 +-
 src/lib/writing-display.ts             |  48 ++++++++++
 src/locales/en.json                    |  11 ++-
 src/styles/editor/prose.css            |   4 +-
 src/styles/tokens.css                  |  18 ++--
 tests/writing-display.test.ts          |  28 ++++++
 14 files changed, 216 insertions(+), 140 deletions(-)
 create mode 100644 tests/writing-display.test.ts

diff --git a/src/app.css b/src/app.css
index c68df99..f26dbb6 100644
--- a/src/app.css
+++ b/src/app.css
@@ -20,8 +20,12 @@
 .mdv-app {
   --mdv-writing-font-size: 14px;
   --mdv-writing-line-height: 1.55;
+  --mdv-prose-font-family: var(--font-ui);
   --mdv-prose-font-size: 15px;
   --mdv-prose-line-height: 1.65;
+  --mdv-reading-font-size: 16px;
+  --mdv-reading-content-width: 880px;
+  --mdv-reading-prose-width: 720px;
   display: grid;
   grid-template-rows: var(--titlebar-h) var(--breadcrumb-h) 1fr var(--statusbar-h);
   height: 100vh;
@@ -62,13 +66,17 @@
   display: flex;
 }
 
+html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-breadcrumb {
+  padding-left: 84px;
+}
+
 /* iA Writer-style reading mode: wide max-width, generous breathing room,
    subtle warmer tint, and slow calm fade-in */
 .mdv-app.is-reading .mdv-shell > .mdv-preview {
   flex: 1;
   min-width: 0;
-  padding-left: max(56px, calc((100% - 880px) / 2));
-  padding-right: max(56px, calc((100% - 880px) / 2));
+  padding-left: max(56px, calc((100% - var(--mdv-reading-content-width)) / 2));
+  padding-right: max(56px, calc((100% - var(--mdv-reading-content-width)) / 2));
   padding-top: 80px;
   padding-bottom: 96px;
   background: color-mix(in srgb, var(--bg) 96%, var(--fg) 4%);
@@ -76,8 +84,8 @@
 }
 
 .mdv-app.is-reading .mdv-shell > .mdv-preview .mdv-prose {
-  max-width: 720px;
-  font-size: 16px;
+  max-width: var(--mdv-reading-prose-width);
+  font-size: var(--mdv-reading-font-size);
   line-height: 1.75;
 }
 
diff --git a/src/app.tsx b/src/app.tsx
index 17de59e..04f28de 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -37,6 +37,9 @@ import {
   getContextBundleStats,
   getWhatsNewToastMessage,
   isSupportedTextPath,
+  normalizeProseFontFamily,
+  normalizeReadingFontSize,
+  normalizeReadingWidth,
   normalizeWritingFontSize,
   normalizeWritingLineHeight,
   PdfExportError,
@@ -47,6 +50,9 @@ import {
   removeEntry,
   STORAGE_KEYS,
   useI18n,
+  type ProseFontFamily,
+  type ReadingFontSize,
+  type ReadingWidth,
   type WritingDisplay,
   type WritingFontSize,
   type WritingLineHeight,
@@ -260,6 +266,18 @@ export function App() {
     STORAGE_KEYS.writingLineHeight,
     DEFAULT_WRITING_DISPLAY.lineHeight,
   );
+  const [readingFontSize, setReadingFontSize] = usePersistedState<ReadingFontSize>(
+    STORAGE_KEYS.readingFontSize,
+    DEFAULT_WRITING_DISPLAY.readingFontSize,
+  );
+  const [readingWidth, setReadingWidth] = usePersistedState<ReadingWidth>(
+    STORAGE_KEYS.readingWidth,
+    DEFAULT_WRITING_DISPLAY.readingWidth,
+  );
+  const [proseFontFamily, setProseFontFamily] = usePersistedState<ProseFontFamily>(
+    STORAGE_KEYS.proseFontFamily,
+    DEFAULT_WRITING_DISPLAY.proseFontFamily,
+  );
   const [dragActive, setDragActive] = useState(false);
   const [stagedPaths, setStagedPaths] = useState<string[]>([]);
   const [stagedTokenLabel, setStagedTokenLabel] = useState("0");
@@ -269,8 +287,11 @@ export function App() {
     () => ({
       fontSize: normalizeWritingFontSize(writingFontSize),
       lineHeight: normalizeWritingLineHeight(writingLineHeight),
+      readingFontSize: normalizeReadingFontSize(readingFontSize),
+      readingWidth: normalizeReadingWidth(readingWidth),
+      proseFontFamily: normalizeProseFontFamily(proseFontFamily),
     }),
-    [writingFontSize, writingLineHeight],
+    [writingFontSize, writingLineHeight, readingFontSize, readingWidth, proseFontFamily],
   );
 
   const writingDisplayStyle = useMemo(
@@ -281,7 +302,10 @@ export function App() {
   const resetWritingDisplay = useCallback(() => {
     setWritingFontSize(DEFAULT_WRITING_DISPLAY.fontSize);
     setWritingLineHeight(DEFAULT_WRITING_DISPLAY.lineHeight);
-  }, [setWritingFontSize, setWritingLineHeight]);
+    setReadingFontSize(DEFAULT_WRITING_DISPLAY.readingFontSize);
+    setReadingWidth(DEFAULT_WRITING_DISPLAY.readingWidth);
+    setProseFontFamily(DEFAULT_WRITING_DISPLAY.proseFontFamily);
+  }, [setWritingFontSize, setWritingLineHeight, setReadingFontSize, setReadingWidth, setProseFontFamily]);
 
   const handleToggleSidebar = useCallback(() => {
     setSidebarOpen((v: boolean) => !v);
@@ -815,6 +839,9 @@ export function App() {
         writingDisplay={writingDisplay}
         onWritingFontSizeChange={setWritingFontSize}
         onWritingLineHeightChange={setWritingLineHeight}
+        onReadingFontSizeChange={setReadingFontSize}
+        onReadingWidthChange={setReadingWidth}
+        onProseFontFamilyChange={setProseFontFamily}
         onResetWritingDisplay={resetWritingDisplay}
       />
 
@@ -839,6 +866,9 @@ export function App() {
         writingDisplay={writingDisplay}
         onWritingFontSizeChange={setWritingFontSize}
         onWritingLineHeightChange={setWritingLineHeight}
+        onReadingFontSizeChange={setReadingFontSize}
+        onReadingWidthChange={setReadingWidth}
+        onProseFontFamilyChange={setProseFontFamily}
         onResetWritingDisplay={resetWritingDisplay}
       />
 
diff --git a/src/components/chrome/breadcrumb.tsx b/src/components/chrome/breadcrumb.tsx
index 20759bb..67d22ad 100644
--- a/src/components/chrome/breadcrumb.tsx
+++ b/src/components/chrome/breadcrumb.tsx
@@ -18,6 +18,9 @@ import {
   startWindowDrag,
   useI18n,
   type Translate,
+  type ProseFontFamily,
+  type ReadingFontSize,
+  type ReadingWidth,
   type WritingDisplay,
   type WritingFontSize,
   type WritingLineHeight,
@@ -48,6 +51,9 @@ type BreadcrumbProps = {
   writingDisplay: WritingDisplay;
   onWritingFontSizeChange: (value: WritingFontSize) => void;
   onWritingLineHeightChange: (value: WritingLineHeight) => void;
+  onReadingFontSizeChange: (value: ReadingFontSize) => void;
+  onReadingWidthChange: (value: ReadingWidth) => void;
+  onProseFontFamilyChange: (value: ProseFontFamily) => void;
   onResetWritingDisplay: () => void;
 };
 
@@ -93,6 +99,9 @@ export function Breadcrumb({
   writingDisplay,
   onWritingFontSizeChange,
   onWritingLineHeightChange,
+  onReadingFontSizeChange,
+  onReadingWidthChange,
+  onProseFontFamilyChange,
   onResetWritingDisplay,
 }: BreadcrumbProps) {
   const { t } = useI18n();
@@ -181,6 +190,9 @@ export function Breadcrumb({
           writingDisplay={writingDisplay}
           onWritingFontSizeChange={onWritingFontSizeChange}
           onWritingLineHeightChange={onWritingLineHeightChange}
+          onReadingFontSizeChange={onReadingFontSizeChange}
+          onReadingWidthChange={onReadingWidthChange}
+          onProseFontFamilyChange={onProseFontFamilyChange}
           onResetWritingDisplay={onResetWritingDisplay}
         />
 
diff --git a/src/components/chrome/theme-button.tsx b/src/components/chrome/theme-button.tsx
index 4003357..a330149 100644
--- a/src/components/chrome/theme-button.tsx
+++ b/src/components/chrome/theme-button.tsx
@@ -20,13 +20,19 @@ import { Button, Icon, Popover } from "@/components/primitives";
 import {
   getSystemTheme,
   LANGUAGE_CHOICES,
+  PROSE_FONT_FAMILY_OPTIONS,
   previewTheme,
+  READING_FONT_SIZE_OPTIONS,
+  READING_WIDTH_OPTIONS,
   THEME_GROUPS,
   WRITING_FONT_SIZE_OPTIONS,
   WRITING_LINE_HEIGHT_OPTIONS,
   useI18n,
   useThemeMode,
   useTransparency,
+  type ProseFontFamily,
+  type ReadingFontSize,
+  type ReadingWidth,
   type Theme,
   type ThemeMode,
   type WritingDisplay,
@@ -58,6 +64,9 @@ type ThemeButtonProps = {
   writingDisplay: WritingDisplay;
   onWritingFontSizeChange: (value: WritingFontSize) => void;
   onWritingLineHeightChange: (value: WritingLineHeight) => void;
+  onReadingFontSizeChange: (value: ReadingFontSize) => void;
+  onReadingWidthChange: (value: ReadingWidth) => void;
+  onProseFontFamilyChange: (value: ProseFontFamily) => void;
   onResetWritingDisplay: () => void;
 };
 
@@ -109,6 +118,9 @@ export function ThemeButton({
   writingDisplay,
   onWritingFontSizeChange,
   onWritingLineHeightChange,
+  onReadingFontSizeChange,
+  onReadingWidthChange,
+  onProseFontFamilyChange,
   onResetWritingDisplay,
 }: ThemeButtonProps) {
   const { language, setLanguage, t } = useI18n();
@@ -245,7 +257,8 @@ export function ThemeButton({
                 <span className="mdv-menu__settings-summary">
                   {opacity >= 100 ? t("title.off") : `${100 - opacity}%`} /{" "}
                   {t(`writing.font.${writingDisplay.fontSize}`)} /{" "}
-                  {t(`writing.spacing.${writingDisplay.lineHeight}`)}
+                  {t(`writing.spacing.${writingDisplay.lineHeight}`)} /{" "}
+                  {t(`reading.width.${writingDisplay.readingWidth}`)}
                 </span>
                 <Icon icon={ChevronRight} size={13} strokeWidth={1.7} />
               </button>
@@ -289,6 +302,27 @@ export function ThemeButton({
                   labelFor={(option) => t(`writing.spacing.${option}`)}
                   onChange={onWritingLineHeightChange}
                 />
+                <SliderControl
+                  label={t("title.readingZoom")}
+                  value={writingDisplay.readingFontSize}
+                  options={READING_FONT_SIZE_OPTIONS}
+                  labelFor={(option) => t(`writing.font.${option}`)}
+                  onChange={onReadingFontSizeChange}
+                />
+                <SliderControl
+                  label={t("title.readingWidth")}
+                  value={writingDisplay.readingWidth}
+                  options={READING_WIDTH_OPTIONS}
+                  labelFor={(option) => t(`reading.width.${option}`)}
+                  onChange={onReadingWidthChange}
+                />
+                <SliderControl
+                  label={t("title.proseFont")}
+                  value={writingDisplay.proseFontFamily}
+                  options={PROSE_FONT_FAMILY_OPTIONS}
+                  labelFor={(option) => t(`prose.font.${option}`)}
+                  onChange={onProseFontFamilyChange}
+                />
                 <button
                   type="button"
                   className="mdv-menu__reset-row"
diff --git a/src/components/chrome/title-bar.tsx b/src/components/chrome/title-bar.tsx
index de9f491..bc83f24 100644
--- a/src/components/chrome/title-bar.tsx
+++ b/src/components/chrome/title-bar.tsx
@@ -4,6 +4,9 @@ import {
   shortcutLabel,
   startWindowDrag,
   useI18n,
+  type ProseFontFamily,
+  type ReadingFontSize,
+  type ReadingWidth,
   type WritingDisplay,
   type WritingFontSize,
   type WritingLineHeight,
@@ -24,6 +27,9 @@ type TitleBarProps = {
   writingDisplay: WritingDisplay;
   onWritingFontSizeChange: (value: WritingFontSize) => void;
   onWritingLineHeightChange: (value: WritingLineHeight) => void;
+  onReadingFontSizeChange: (value: ReadingFontSize) => void;
+  onReadingWidthChange: (value: ReadingWidth) => void;
+  onProseFontFamilyChange: (value: ProseFontFamily) => void;
   onResetWritingDisplay: () => void;
 };
 
@@ -41,6 +47,9 @@ export function TitleBar({
   writingDisplay,
   onWritingFontSizeChange,
   onWritingLineHeightChange,
+  onReadingFontSizeChange,
+  onReadingWidthChange,
+  onProseFontFamilyChange,
   onResetWritingDisplay,
 }: TitleBarProps) {
   const { t } = useI18n();
@@ -76,6 +85,9 @@ export function TitleBar({
             writingDisplay={writingDisplay}
             onWritingFontSizeChange={onWritingFontSizeChange}
             onWritingLineHeightChange={onWritingLineHeightChange}
+            onReadingFontSizeChange={onReadingFontSizeChange}
+            onReadingWidthChange={onReadingWidthChange}
+            onProseFontFamilyChange={onProseFontFamilyChange}
             onResetWritingDisplay={onResetWritingDisplay}
           />
         ) : null}
diff --git a/src/hooks/use-selection-sync-text.ts b/src/hooks/use-selection-sync-text.ts
index be8fb22..96abf6d 100644
--- a/src/hooks/use-selection-sync-text.ts
+++ b/src/hooks/use-selection-sync-text.ts
@@ -1,22 +1,6 @@
 import { useEffect, type RefObject } from "react";
 import { EditorView } from "@codemirror/view";
 
-function stripMarkdown(text: string): string {
-  return text
-    .replace(/!\[[^\]]*\]\([^)]*\)/g, "")        // images → remove entirely
-    .replace(/\[([^\]]+)\]\([^)]*\)/g, "$1")      // links → label only
-    .replace(/\*{1,2}([^*\n]+)\*{1,2}/g, "$1")   // bold/italic
-    .replace(/_{1,2}([^_\n]+)_{1,2}/g, "$1")     // underscore bold/italic
-    .replace(/`([^`\n]+)`/g, "$1")                // inline code
-    .replace(/^#{1,6}\s+/gm, "")                  // headings
-    .replace(/^[-*+]\s+/gm, "")                   // unordered list markers
-    .replace(/^\d+\.\s+/gm, "")                   // ordered list markers
-    .replace(/^>\s*/gm, "")                       // blockquotes
-    .replace(/\|/g, " ")                           // table pipes
-    .replace(/\s{2,}/g, " ")                      // collapse extra whitespace
-    .trim();
-}
-
 // markdown-it's typographer turns straight quotes into curly ones in the
 // preview; normalize both sides before matching. Every replacement is 1:1 in
 // length so computed indices remain valid on the original strings.
@@ -27,71 +11,11 @@ function normalizeTypography(text: string): string {
     .replace(/ /g, " ");
 }
 
-// Find all occurrences of `needle` in `haystack`, return the start index of
-// the one whose position is closest to `targetOffset` (an absolute char index).
-function nearestOccurrence(haystack: string, needle: string, targetOffset: number): number {
-  let bestIdx = -1;
-  let bestDist = Infinity;
-  let searchFrom = 0;
-  while (true) {
-    const found = haystack.indexOf(needle, searchFrom);
-    if (found < 0) break;
-    const dist = Math.abs(found - targetOffset);
-    if (dist < bestDist) {
-      bestDist = dist;
-      bestIdx = found;
-    }
-    searchFrom = found + 1;
-  }
-  return bestIdx;
-}
-
-function findTextInDOM(root: HTMLElement, text: string, targetOffset = 0): Range | null {
-  if (!text || !text.trim()) return null;
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-  const nodes: Text[] = [];
-  let n: Node | null;
-  while ((n = walker.nextNode())) nodes.push(n as Text);
-
-  const fullText = normalizeTypography(nodes.map((tn) => tn.textContent ?? "").join(""));
-  if (fullText.length === 0) return null;
-
-  // Pick the occurrence nearest to the estimated absolute offset so that
-  // duplicate words in the same area resolve to the correct instance.
-  const idx = nearestOccurrence(fullText, normalizeTypography(text), targetOffset);
-  if (idx < 0) return null;
-  let pos = 0;
-  let startNode: Text | null = null;
-  let startOff = 0;
-  let endNode: Text | null = null;
-  let endOff = 0;
-
-  for (const tn of nodes) {
-    const len = tn.textContent?.length ?? 0;
-    if (!startNode && pos + len > idx) {
-      startNode = tn;
-      startOff = idx - pos;
-    }
-    if (!endNode && pos + len >= idx + text.length) {
-      endNode = tn;
-      endOff = idx + text.length - pos;
-      break;
-    }
-    pos += len;
-  }
-
-  if (!startNode || !endNode) return null;
-  const range = document.createRange();
-  range.setStart(startNode, startOff);
-  range.setEnd(endNode, endOff);
-  return range;
-}
-
 /**
- * Bidirectional text-selection sync between the editor and preview.
+ * Text-selection sync from preview to editor.
  *
- * - mouseup in preview → find selected text in the markdown source → set CM selection
- * - mouseup in editor  → find selected text in the preview DOM → set browser selection
+ * Keep this one-way: mirroring editor selections into the browser's native
+ * preview selection can steal replacement typing from CodeMirror.
  */
 export function useSelectionSyncText(
   viewRef: RefObject<EditorView | null>,
@@ -140,7 +64,6 @@ export function useSelectionSyncText(
       };
 
       const prose = document.querySelector<HTMLElement>(".mdv-prose");
-      const editorContent = document.querySelector<HTMLElement>(".mdv-editor .cm-content");
       const anchor = sel.anchorNode;
 
       if (prose && anchor && prose.contains(anchor)) {
@@ -175,46 +98,6 @@ export function useSelectionSyncText(
         });
         return;
       }
-
-      if (editorContent && anchor && editorContent.contains(anchor)) {
-        // Editor → Preview: resolve the selection's source line to its exact
-        // preview block via data-sline, then search only inside that block.
-        if (!prose) return;
-        const stripped = stripMarkdown(text);
-        if (!stripped) return;
-        const view = viewRef.current;
-        if (!view) return;
-        const doc = view.state.doc;
-        const selFrom = view.state.selection.main.from;
-        const selLine = doc.lineAt(selFrom).number - 1; // 0-based
-        let scope: HTMLElement | null = null;
-        for (const el of prose.querySelectorAll<HTMLElement>("[data-sline]")) {
-          const s = Number(el.dataset.sline);
-          const e = Number(el.dataset.eline ?? s + 1);
-          if (selLine >= s && selLine < e) {
-            // keep the innermost (deepest) block containing the line
-            if (!scope || scope.contains(el)) scope = el;
-          }
-        }
-        let range: Range | null = null;
-        if (scope) {
-          // offset within the block: stripped length of source from block
-          // start to selection start — disambiguates repeats in one paragraph
-          const blockFrom = doc.line(Number(scope.dataset.sline) + 1).from;
-          const localOffset = stripMarkdown(doc.sliceString(blockFrom, selFrom)).length;
-          range = findTextInDOM(scope, stripped, localOffset);
-        }
-        range ??= findTextInDOM(prose, stripped, 0);
-        if (!range) return;
-        const domSel = window.getSelection();
-        if (domSel) {
-          domSel.removeAllRanges();
-          domSel.addRange(range);
-          // intentionally do NOT scroll: keep both panes' positions fixed,
-          // only mirror the selection (scrolling here would echo through
-          // useSyncScroll and jump the editor)
-        }
-      }
     };
 
     document.addEventListener("mouseup", onMouseUp);
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 81092a7..60bfcee 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -25,11 +25,20 @@ export {
 } from "./i18n";
 export {
   DEFAULT_WRITING_DISPLAY,
+  PROSE_FONT_FAMILY_OPTIONS,
+  READING_FONT_SIZE_OPTIONS,
+  READING_WIDTH_OPTIONS,
   WRITING_FONT_SIZE_OPTIONS,
   WRITING_LINE_HEIGHT_OPTIONS,
   getWritingDisplayVars,
+  normalizeProseFontFamily,
+  normalizeReadingFontSize,
+  normalizeReadingWidth,
   normalizeWritingFontSize,
   normalizeWritingLineHeight,
+  type ProseFontFamily,
+  type ReadingFontSize,
+  type ReadingWidth,
   type WritingDisplay,
   type WritingFontSize,
   type WritingLineHeight,
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 0f3c4c6..2459043 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -16,6 +16,9 @@ export const STORAGE_KEYS = {
   favorites: "mdview.favorites",
   writingFontSize: "mdview.writing.fontSize",
   writingLineHeight: "mdview.writing.lineHeight",
+  readingFontSize: "mdview.reading.fontSize",
+  readingWidth: "mdview.reading.width",
+  proseFontFamily: "mdview.prose.fontFamily",
   viewMode: "mdview.viewMode",
 } as const;
 
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index dfac901..0aff3bd 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -95,7 +95,7 @@ export const THEME_HINTS: Record<ThemeMode, string> = {
   ayu: "ayu mirage dark",
   claude: "warm parchment + terracotta",
   codex: "openai black + green",
-  gemini: "blue and violet glow",
+  gemini: "google white + blue",
   cursor: "warm editor neutrals",
 };
 
diff --git a/src/lib/writing-display.ts b/src/lib/writing-display.ts
index 91defb0..bc98a70 100644
--- a/src/lib/writing-display.ts
+++ b/src/lib/writing-display.ts
@@ -1,18 +1,30 @@
 export type WritingFontSize = "small" | "default" | "large" | "x-large";
 export type WritingLineHeight = "compact" | "comfortable" | "airy";
+export type ReadingFontSize = "small" | "default" | "large" | "x-large";
+export type ReadingWidth = "narrow" | "comfortable" | "wide" | "full";
+export type ProseFontFamily = "inter" | "system";
 
 export type WritingDisplay = {
   fontSize: WritingFontSize;
   lineHeight: WritingLineHeight;
+  readingFontSize: ReadingFontSize;
+  readingWidth: ReadingWidth;
+  proseFontFamily: ProseFontFamily;
 };
 
 export const DEFAULT_WRITING_DISPLAY: WritingDisplay = {
   fontSize: "default",
   lineHeight: "comfortable",
+  readingFontSize: "default",
+  readingWidth: "comfortable",
+  proseFontFamily: "inter",
 };
 
 export const WRITING_FONT_SIZE_OPTIONS: WritingFontSize[] = ["small", "default", "large", "x-large"];
 export const WRITING_LINE_HEIGHT_OPTIONS: WritingLineHeight[] = ["compact", "comfortable", "airy"];
+export const READING_FONT_SIZE_OPTIONS: ReadingFontSize[] = ["small", "default", "large", "x-large"];
+export const READING_WIDTH_OPTIONS: ReadingWidth[] = ["narrow", "comfortable", "wide", "full"];
+export const PROSE_FONT_FAMILY_OPTIONS: ProseFontFamily[] = ["inter", "system"];
 
 const EDITOR_FONT_VALUES: Record<WritingFontSize, string> = {
   small: "13px",
@@ -28,6 +40,13 @@ const PROSE_FONT_VALUES: Record<WritingFontSize, string> = {
   "x-large": "19px",
 };
 
+const READING_FONT_VALUES: Record<ReadingFontSize, string> = {
+  small: "15px",
+  default: "16px",
+  large: "18px",
+  "x-large": "20px",
+};
+
 const EDITOR_LINE_HEIGHT_VALUES: Record<WritingLineHeight, string> = {
   compact: "1.45",
   comfortable: "1.55",
@@ -40,6 +59,18 @@ const PROSE_LINE_HEIGHT_VALUES: Record<WritingLineHeight, string> = {
   airy: "1.8",
 };
 
+const READING_WIDTH_VALUES: Record<ReadingWidth, { content: string; prose: string }> = {
+  narrow: { content: "760px", prose: "620px" },
+  comfortable: { content: "880px", prose: "720px" },
+  wide: { content: "1080px", prose: "880px" },
+  full: { content: "1360px", prose: "1120px" },
+};
+
+const PROSE_FONT_FAMILY_VALUES: Record<ProseFontFamily, string> = {
+  inter: "var(--font-ui)",
+  system: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+};
+
 function normalizeOption<T extends string>(value: unknown, options: readonly T[], fallback: T): T {
   return typeof value === "string" && options.includes(value as T) ? (value as T) : fallback;
 }
@@ -52,11 +83,28 @@ export function normalizeWritingLineHeight(value: unknown): WritingLineHeight {
   return normalizeOption(value, WRITING_LINE_HEIGHT_OPTIONS, DEFAULT_WRITING_DISPLAY.lineHeight);
 }
 
+export function normalizeReadingFontSize(value: unknown): ReadingFontSize {
+  return normalizeOption(value, READING_FONT_SIZE_OPTIONS, DEFAULT_WRITING_DISPLAY.readingFontSize);
+}
+
+export function normalizeReadingWidth(value: unknown): ReadingWidth {
+  return normalizeOption(value, READING_WIDTH_OPTIONS, DEFAULT_WRITING_DISPLAY.readingWidth);
+}
+
+export function normalizeProseFontFamily(value: unknown): ProseFontFamily {
+  return normalizeOption(value, PROSE_FONT_FAMILY_OPTIONS, DEFAULT_WRITING_DISPLAY.proseFontFamily);
+}
+
 export function getWritingDisplayVars(display: WritingDisplay): Record<string, string> {
+  const readingWidth = READING_WIDTH_VALUES[display.readingWidth];
   return {
     "--mdv-writing-font-size": EDITOR_FONT_VALUES[display.fontSize],
     "--mdv-writing-line-height": EDITOR_LINE_HEIGHT_VALUES[display.lineHeight],
     "--mdv-prose-font-size": PROSE_FONT_VALUES[display.fontSize],
     "--mdv-prose-line-height": PROSE_LINE_HEIGHT_VALUES[display.lineHeight],
+    "--mdv-prose-font-family": PROSE_FONT_FAMILY_VALUES[display.proseFontFamily],
+    "--mdv-reading-font-size": READING_FONT_VALUES[display.readingFontSize],
+    "--mdv-reading-content-width": readingWidth.content,
+    "--mdv-reading-prose-width": readingWidth.prose,
   };
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index d708aec..b33b530 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -75,6 +75,9 @@
   "title.writing": "text",
   "title.writingFont": "size",
   "title.writingSpacing": "spacing",
+  "title.readingZoom": "reading size",
+  "title.readingWidth": "reading width",
+  "title.proseFont": "font",
   "title.resetWriting": "reset text",
   "writing.font.small": "sm",
   "writing.font.default": "base",
@@ -83,6 +86,12 @@
   "writing.spacing.compact": "compact",
   "writing.spacing.comfortable": "comfort",
   "writing.spacing.airy": "airy",
+  "reading.width.narrow": "narrow",
+  "reading.width.comfortable": "comfort",
+  "reading.width.wide": "wide",
+  "reading.width.full": "full",
+  "prose.font.inter": "inter",
+  "prose.font.system": "system",
   "theme.group.neutral": "neutral",
   "theme.group.catppuccin": "catppuccin",
   "theme.group.ai": "ai",
@@ -198,7 +207,7 @@
   "help.tip2": "star important files for quick access, then use tabs to keep active drafts and references open.",
   "help.tip3": "stage sidebar files to reveal the context tray with file count and token estimate.",
   "help.tip4": "copy context when you want one ai-ready bundle; copy markdown when you only need the current file.",
-  "help.tip5": "press ⌘. for reading mode, then use the same theme and export controls while proofing.",
+  "help.tip5": "press ⌘. for reading mode, then tune size, width, theme, and export while proofing.",
   "help.tip6": "plantuml previews load only when requested; mermaid renders live in the preview.",
   "help.tip7": "open .csv files for quick read-only tables without leaving the editor.",
   "help.tip8": "use ⌘K for everything: files, views, themes, context, pdf export, updates, help, and tutorial replay.",
diff --git a/src/styles/editor/prose.css b/src/styles/editor/prose.css
index bf97f92..b701e97 100644
--- a/src/styles/editor/prose.css
+++ b/src/styles/editor/prose.css
@@ -1,7 +1,7 @@
 .mdv-prose {
   max-width: 720px;
   margin: 0 auto;
-  font-family: var(--font-ui);
+  font-family: var(--mdv-prose-font-family);
   font-size: var(--mdv-prose-font-size);
   line-height: var(--mdv-prose-line-height);
   color: var(--fg);
@@ -15,7 +15,7 @@
 .mdv-prose h2,
 .mdv-prose h3,
 .mdv-prose h4 {
-  font-family: var(--font-ui);
+  font-family: var(--mdv-prose-font-family);
   font-weight: 600;
   letter-spacing: -0.015em;
   line-height: 1.25;
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index a4dd0b0..5cabb11 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -185,17 +185,17 @@
   color-scheme: dark;
 }
 
-/* gemini-inspired — blue/violet AI glow kept quiet for writing */
+/* gemini-inspired — google white, soft gray lines, blue accent */
 :root[data-theme="gemini"] {
-  --bg: #f6f8ff;
-  --bg-rgb: 246, 248, 255;
+  --bg: #ffffff;
+  --bg-rgb: 255, 255, 255;
   --fg: #202124;
-  --muted: #7b8193;
-  --border: #d8def2;
-  --accent: #6f7ee8;
-  --surface: #eef2ff;
-  --surface-hover: #e2e8ff;
-  --shadow-soft: 0 1px 2px rgba(71, 150, 227, 0.08), 0 2px 10px rgba(145, 119, 199, 0.08);
+  --muted: #6f737a;
+  --border: #dadce0;
+  --accent: #1a73e8;
+  --surface: #f8fafd;
+  --surface-hover: #edf4ff;
+  --shadow-soft: 0 1px 2px rgba(60, 64, 67, 0.08), 0 2px 10px rgba(26, 115, 232, 0.08);
   color-scheme: light;
 }
 
diff --git a/tests/writing-display.test.ts b/tests/writing-display.test.ts
new file mode 100644
index 0000000..1bb07d9
--- /dev/null
+++ b/tests/writing-display.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from "bun:test";
+import {
+  DEFAULT_WRITING_DISPLAY,
+  getWritingDisplayVars,
+  normalizeProseFontFamily,
+  normalizeReadingFontSize,
+  normalizeReadingWidth,
+} from "../src/lib/writing-display";
+
+test("normalizes new display options back to defaults", () => {
+  expect(normalizeReadingFontSize("huge")).toBe(DEFAULT_WRITING_DISPLAY.readingFontSize);
+  expect(normalizeReadingWidth("book")).toBe(DEFAULT_WRITING_DISPLAY.readingWidth);
+  expect(normalizeProseFontFamily("serif")).toBe(DEFAULT_WRITING_DISPLAY.proseFontFamily);
+});
+
+test("emits reading display css variables", () => {
+  const vars = getWritingDisplayVars({
+    ...DEFAULT_WRITING_DISPLAY,
+    readingFontSize: "large",
+    readingWidth: "wide",
+    proseFontFamily: "system",
+  });
+
+  expect(vars["--mdv-reading-font-size"]).toBe("18px");
+  expect(vars["--mdv-reading-content-width"]).toBe("1080px");
+  expect(vars["--mdv-reading-prose-width"]).toBe("880px");
+  expect(vars["--mdv-prose-font-family"]).toContain("system-ui");
+});

From 286baa613be14d407c25147e5d2d3f05f00c5e78 Mon Sep 17 00:00:00 2001
From: mattenarle10 <enarlem10@gmail.com>
Date: Sat, 27 Jun 2026 12:33:46 +0800
Subject: [PATCH 2/6] fix: refine display menu behavior

---
 src/components/chrome/breadcrumb.tsx   | 132 +++++++++++++------------
 src/components/chrome/theme-button.tsx |  36 ++++++-
 src/lib/writing-display.ts             |   5 +-
 src/locales/en.json                    |   3 +-
 src/styles/chrome/breadcrumb.css       |   6 ++
 src/styles/shared/menu.css             |   8 ++
 tests/writing-display.test.ts          |   4 +-
 7 files changed, 126 insertions(+), 68 deletions(-)

diff --git a/src/components/chrome/breadcrumb.tsx b/src/components/chrome/breadcrumb.tsx
index 67d22ad..f4220ba 100644
--- a/src/components/chrome/breadcrumb.tsx
+++ b/src/components/chrome/breadcrumb.tsx
@@ -110,7 +110,11 @@ export function Breadcrumb({
   const label = statusLabel(saveStatus, t);
 
   return (
-    <div className="mdv-breadcrumb" data-tauri-drag-region onMouseDown={startWindowDrag}>
+    <div
+      className={`mdv-breadcrumb${titlebarVisible ? "" : " is-titlebar-hidden"}`}
+      data-tauri-drag-region
+      onMouseDown={startWindowDrag}
+    >
       <Button
         data-tooltip={shortcutLabel(sidebarOpen ? t("breadcrumb.hideSidebarShortcut") : t("breadcrumb.showSidebarShortcut"))}
         aria-label={sidebarOpen ? t("breadcrumb.hideSidebar") : t("breadcrumb.showSidebar")}
@@ -177,68 +181,72 @@ export function Breadcrumb({
             />
           }
         />
-        <Button
-          data-tooltip={readingMode ? t("title.exitReadingTooltip") : shortcutLabel(t("title.readingModeShortcut"))}
-          aria-label={readingMode ? t("title.exitReading") : t("title.readingMode")}
-          aria-pressed={readingMode}
-          onClick={onToggleReading}
-          icon={<Icon icon={readingMode ? BookOpen : BookOpen} size={14} strokeWidth={1.5} />}
-        />
-        <ThemeButton
-          vimOn={vimOn}
-          onToggleVim={onToggleVim}
-          writingDisplay={writingDisplay}
-          onWritingFontSizeChange={onWritingFontSizeChange}
-          onWritingLineHeightChange={onWritingLineHeightChange}
-          onReadingFontSizeChange={onReadingFontSizeChange}
-          onReadingWidthChange={onReadingWidthChange}
-          onProseFontFamilyChange={onProseFontFamilyChange}
-          onResetWritingDisplay={onResetWritingDisplay}
-        />
+        {titlebarVisible ? (
+          <>
+            <Button
+              data-tooltip={readingMode ? t("title.exitReadingTooltip") : shortcutLabel(t("title.readingModeShortcut"))}
+              aria-label={readingMode ? t("title.exitReading") : t("title.readingMode")}
+              aria-pressed={readingMode}
+              onClick={onToggleReading}
+              icon={<Icon icon={readingMode ? BookOpen : BookOpen} size={14} strokeWidth={1.5} />}
+            />
+            <ThemeButton
+              vimOn={vimOn}
+              onToggleVim={onToggleVim}
+              writingDisplay={writingDisplay}
+              onWritingFontSizeChange={onWritingFontSizeChange}
+              onWritingLineHeightChange={onWritingLineHeightChange}
+              onReadingFontSizeChange={onReadingFontSizeChange}
+              onReadingWidthChange={onReadingWidthChange}
+              onProseFontFamilyChange={onProseFontFamilyChange}
+              onResetWritingDisplay={onResetWritingDisplay}
+            />
 
-        {/* file actions — border-left matches the status→actions separator */}
-        <div className="mdv-breadcrumb__file-actions">
-          {onCopyMarkdown ? (
-            <button
-              type="button"
-              className={`mdv-copybtn${copyPulse ? " is-copied" : ""}`}
-              data-tooltip={copyPulse ? t("app.copied") : shortcutLabel(t("app.copyMarkdownShortcut"))}
-              aria-label={copyPulse ? t("app.copied") : t("app.copyMarkdown")}
-              onClick={onCopyMarkdown}
-            >
-              <span className="mdv-copybtn__icon mdv-copybtn__icon--copy" aria-hidden>
-                <Icon icon={Copy} size={12} strokeWidth={1.5} />
-              </span>
-              <span className="mdv-copybtn__icon mdv-copybtn__icon--check" aria-hidden>
-                <Icon icon={Check} size={13} strokeWidth={2} />
-              </span>
-            </button>
-          ) : null}
-          <Button
-            data-tooltip={shortcutLabel(t("app.exportPdfShortcut"))}
-            aria-label={t("app.exportPdf")}
-            onClick={onExportPdf}
-            icon={<Icon icon={FileDown} size={13} strokeWidth={1.5} />}
-          />
-          <Button
-            data-tooltip={shortcutLabel(t("app.newFileShortcut"))}
-            aria-label={t("app.newFile")}
-            onClick={onNewFile}
-            icon={<Icon icon={FilePlus2} size={13} strokeWidth={1.5} />}
-          />
-          <Button
-            data-tooltip={shortcutLabel(t("app.openFileShortcut"))}
-            aria-label={t("app.openFile")}
-            onClick={onOpenFile}
-            icon={<Icon icon={FileText} size={13} strokeWidth={1.5} />}
-          />
-          <Button
-            data-tooltip={shortcutLabel(t("app.openFolderShortcut"))}
-            aria-label={t("app.openFolder")}
-            onClick={onOpenFolder}
-            icon={<Icon icon={FolderOpen} size={13} strokeWidth={1.5} />}
-          />
-        </div>
+            {/* file actions — border-left matches the status→actions separator */}
+            <div className="mdv-breadcrumb__file-actions">
+              {onCopyMarkdown ? (
+                <button
+                  type="button"
+                  className={`mdv-copybtn${copyPulse ? " is-copied" : ""}`}
+                  data-tooltip={copyPulse ? t("app.copied") : shortcutLabel(t("app.copyMarkdownShortcut"))}
+                  aria-label={copyPulse ? t("app.copied") : t("app.copyMarkdown")}
+                  onClick={onCopyMarkdown}
+                >
+                  <span className="mdv-copybtn__icon mdv-copybtn__icon--copy" aria-hidden>
+                    <Icon icon={Copy} size={12} strokeWidth={1.5} />
+                  </span>
+                  <span className="mdv-copybtn__icon mdv-copybtn__icon--check" aria-hidden>
+                    <Icon icon={Check} size={13} strokeWidth={2} />
+                  </span>
+                </button>
+              ) : null}
+              <Button
+                data-tooltip={shortcutLabel(t("app.exportPdfShortcut"))}
+                aria-label={t("app.exportPdf")}
+                onClick={onExportPdf}
+                icon={<Icon icon={FileDown} size={13} strokeWidth={1.5} />}
+              />
+              <Button
+                data-tooltip={shortcutLabel(t("app.newFileShortcut"))}
+                aria-label={t("app.newFile")}
+                onClick={onNewFile}
+                icon={<Icon icon={FilePlus2} size={13} strokeWidth={1.5} />}
+              />
+              <Button
+                data-tooltip={shortcutLabel(t("app.openFileShortcut"))}
+                aria-label={t("app.openFile")}
+                onClick={onOpenFile}
+                icon={<Icon icon={FileText} size={13} strokeWidth={1.5} />}
+              />
+              <Button
+                data-tooltip={shortcutLabel(t("app.openFolderShortcut"))}
+                aria-label={t("app.openFolder")}
+                onClick={onOpenFolder}
+                icon={<Icon icon={FolderOpen} size={13} strokeWidth={1.5} />}
+              />
+            </div>
+          </>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/components/chrome/theme-button.tsx b/src/components/chrome/theme-button.tsx
index a330149..4093fe4 100644
--- a/src/components/chrome/theme-button.tsx
+++ b/src/components/chrome/theme-button.tsx
@@ -112,6 +112,40 @@ function SliderControl<T extends string>({
   );
 }
 
+type SelectControlProps<T extends string> = {
+  label: string;
+  value: T;
+  options: readonly T[];
+  labelFor: (option: T) => string;
+  onChange: (value: T) => void;
+};
+
+function SelectControl<T extends string>({
+  label,
+  value,
+  options,
+  labelFor,
+  onChange,
+}: SelectControlProps<T>) {
+  return (
+    <label className="mdv-menu__select-row mdv-menu__select-row--display">
+      <span className="mdv-menu__select-label">{label}</span>
+      <select
+        className="mdv-menu__select"
+        value={value}
+        onChange={(e) => onChange(e.target.value as T)}
+        aria-label={label}
+      >
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {labelFor(option)}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
 export function ThemeButton({
   vimOn = false,
   onToggleVim,
@@ -316,7 +350,7 @@ export function ThemeButton({
                   labelFor={(option) => t(`reading.width.${option}`)}
                   onChange={onReadingWidthChange}
                 />
-                <SliderControl
+                <SelectControl
                   label={t("title.proseFont")}
                   value={writingDisplay.proseFontFamily}
                   options={PROSE_FONT_FAMILY_OPTIONS}
diff --git a/src/lib/writing-display.ts b/src/lib/writing-display.ts
index bc98a70..5dac028 100644
--- a/src/lib/writing-display.ts
+++ b/src/lib/writing-display.ts
@@ -2,7 +2,7 @@ export type WritingFontSize = "small" | "default" | "large" | "x-large";
 export type WritingLineHeight = "compact" | "comfortable" | "airy";
 export type ReadingFontSize = "small" | "default" | "large" | "x-large";
 export type ReadingWidth = "narrow" | "comfortable" | "wide" | "full";
-export type ProseFontFamily = "inter" | "system";
+export type ProseFontFamily = "inter" | "system" | "mono";
 
 export type WritingDisplay = {
   fontSize: WritingFontSize;
@@ -24,7 +24,7 @@ export const WRITING_FONT_SIZE_OPTIONS: WritingFontSize[] = ["small", "default",
 export const WRITING_LINE_HEIGHT_OPTIONS: WritingLineHeight[] = ["compact", "comfortable", "airy"];
 export const READING_FONT_SIZE_OPTIONS: ReadingFontSize[] = ["small", "default", "large", "x-large"];
 export const READING_WIDTH_OPTIONS: ReadingWidth[] = ["narrow", "comfortable", "wide", "full"];
-export const PROSE_FONT_FAMILY_OPTIONS: ProseFontFamily[] = ["inter", "system"];
+export const PROSE_FONT_FAMILY_OPTIONS: ProseFontFamily[] = ["inter", "system", "mono"];
 
 const EDITOR_FONT_VALUES: Record<WritingFontSize, string> = {
   small: "13px",
@@ -69,6 +69,7 @@ const READING_WIDTH_VALUES: Record<ReadingWidth, { content: string; prose: strin
 const PROSE_FONT_FAMILY_VALUES: Record<ProseFontFamily, string> = {
   inter: "var(--font-ui)",
   system: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+  mono: "var(--font-mono)",
 };
 
 function normalizeOption<T extends string>(value: unknown, options: readonly T[], fallback: T): T {
diff --git a/src/locales/en.json b/src/locales/en.json
index b33b530..d967269 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -77,7 +77,7 @@
   "title.writingSpacing": "spacing",
   "title.readingZoom": "reading size",
   "title.readingWidth": "reading width",
-  "title.proseFont": "font",
+  "title.proseFont": "preview font",
   "title.resetWriting": "reset text",
   "writing.font.small": "sm",
   "writing.font.default": "base",
@@ -92,6 +92,7 @@
   "reading.width.full": "full",
   "prose.font.inter": "inter",
   "prose.font.system": "system",
+  "prose.font.mono": "mono",
   "theme.group.neutral": "neutral",
   "theme.group.catppuccin": "catppuccin",
   "theme.group.ai": "ai",
diff --git a/src/styles/chrome/breadcrumb.css b/src/styles/chrome/breadcrumb.css
index e4aaae7..8e5fa5c 100644
--- a/src/styles/chrome/breadcrumb.css
+++ b/src/styles/chrome/breadcrumb.css
@@ -107,6 +107,12 @@
   border-left: 1px solid var(--border);
 }
 
+.mdv-breadcrumb.is-titlebar-hidden .mdv-breadcrumb__actions {
+  margin-left: 0;
+  padding-left: 0;
+  border-left: 0;
+}
+
 .mdv-breadcrumb__actions .mdv-btn {
   height: 22px;
   padding: 0 5px;
diff --git a/src/styles/shared/menu.css b/src/styles/shared/menu.css
index 6a06f09..d2f9aeb 100644
--- a/src/styles/shared/menu.css
+++ b/src/styles/shared/menu.css
@@ -471,6 +471,10 @@
   background: color-mix(in srgb, var(--surface-hover) 58%, transparent);
 }
 
+.mdv-menu__select-row--display {
+  padding: 5px 10px;
+}
+
 .mdv-menu__select-label {
   font-size: 12px;
   color: var(--fg);
@@ -489,6 +493,10 @@
   outline: none;
 }
 
+.mdv-menu__select-row--display .mdv-menu__select {
+  width: 104px;
+}
+
 .mdv-menu__select:focus-visible {
   border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
diff --git a/tests/writing-display.test.ts b/tests/writing-display.test.ts
index 1bb07d9..886c4d8 100644
--- a/tests/writing-display.test.ts
+++ b/tests/writing-display.test.ts
@@ -18,11 +18,11 @@ test("emits reading display css variables", () => {
     ...DEFAULT_WRITING_DISPLAY,
     readingFontSize: "large",
     readingWidth: "wide",
-    proseFontFamily: "system",
+    proseFontFamily: "mono",
   });
 
   expect(vars["--mdv-reading-font-size"]).toBe("18px");
   expect(vars["--mdv-reading-content-width"]).toBe("1080px");
   expect(vars["--mdv-reading-prose-width"]).toBe("880px");
-  expect(vars["--mdv-prose-font-family"]).toContain("system-ui");
+  expect(vars["--mdv-prose-font-family"]).toBe("var(--font-mono)");
 });

From 65dd8f638519be4c78aac59ee13942e4098239d6 Mon Sep 17 00:00:00 2001
From: mattenarle10 <enarlem10@gmail.com>
Date: Sat, 27 Jun 2026 13:07:47 +0800
Subject: [PATCH 3/6] fix: add reading zoom controls

---
 src/app.css                         |  2 +-
 src/components/chrome/title-bar.tsx | 44 ++++++++++++++++++++++++++++-
 src/locales/en.json                 |  3 ++
 src/styles/chrome/titlebar.css      | 27 ++++++++++++++++++
 4 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index f26dbb6..1aa8919 100644
--- a/src/app.css
+++ b/src/app.css
@@ -67,7 +67,7 @@
 }
 
 html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-breadcrumb {
-  padding-left: 84px;
+  padding-left: 152px;
 }
 
 /* iA Writer-style reading mode: wide max-width, generous breathing room,
diff --git a/src/components/chrome/title-bar.tsx b/src/components/chrome/title-bar.tsx
index bc83f24..f720839 100644
--- a/src/components/chrome/title-bar.tsx
+++ b/src/components/chrome/title-bar.tsx
@@ -1,6 +1,8 @@
-import { Check, Copy, FileDown, Minimize2 } from "lucide-react";
+import { Check, Copy, FileDown, Minimize2, RotateCcw, ZoomIn, ZoomOut } from "lucide-react";
 import { Button, Icon } from "@/components/primitives";
 import {
+  DEFAULT_WRITING_DISPLAY,
+  READING_FONT_SIZE_OPTIONS,
   shortcutLabel,
   startWindowDrag,
   useI18n,
@@ -53,6 +55,21 @@ export function TitleBar({
   onResetWritingDisplay,
 }: TitleBarProps) {
   const { t } = useI18n();
+  const readingFontIndex = Math.max(
+    0,
+    READING_FONT_SIZE_OPTIONS.indexOf(writingDisplay.readingFontSize),
+  );
+  const defaultReadingFontIndex = READING_FONT_SIZE_OPTIONS.indexOf(
+    DEFAULT_WRITING_DISPLAY.readingFontSize,
+  );
+  const canZoomOut = readingFontIndex > 0;
+  const canZoomIn = readingFontIndex < READING_FONT_SIZE_OPTIONS.length - 1;
+  const canResetZoom = readingFontIndex !== defaultReadingFontIndex;
+
+  const setReadingFontAt = (index: number) => {
+    const next = READING_FONT_SIZE_OPTIONS[index];
+    if (next) onReadingFontSizeChange(next);
+  };
 
   return (
     <header className="mdv-titlebar" data-tauri-drag-region onMouseDown={startWindowDrag}>
@@ -78,6 +95,31 @@ export function TitleBar({
       </div>
 
       <div className="mdv-titlebar__actions" data-tauri-drag-region>
+        {readingMode ? (
+          <div className="mdv-titlebar__zoom" aria-label={t("title.readingZoom")}>
+            <Button
+              data-tooltip={t("title.readingZoomOut")}
+              aria-label={t("title.readingZoomOut")}
+              disabled={!canZoomOut}
+              onClick={() => setReadingFontAt(readingFontIndex - 1)}
+              icon={<Icon icon={ZoomOut} size={13} strokeWidth={1.6} />}
+            />
+            <Button
+              data-tooltip={t("title.resetReadingZoom")}
+              aria-label={t("title.resetReadingZoom")}
+              disabled={!canResetZoom}
+              onClick={() => setReadingFontAt(defaultReadingFontIndex)}
+              icon={<Icon icon={RotateCcw} size={13} strokeWidth={1.6} />}
+            />
+            <Button
+              data-tooltip={t("title.readingZoomIn")}
+              aria-label={t("title.readingZoomIn")}
+              disabled={!canZoomIn}
+              onClick={() => setReadingFontAt(readingFontIndex + 1)}
+              icon={<Icon icon={ZoomIn} size={13} strokeWidth={1.6} />}
+            />
+          </div>
+        ) : null}
         {readingMode ? (
           <ThemeButton
             vimOn={vimOn}
diff --git a/src/locales/en.json b/src/locales/en.json
index d967269..0ae49e9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -76,6 +76,9 @@
   "title.writingFont": "size",
   "title.writingSpacing": "spacing",
   "title.readingZoom": "reading size",
+  "title.readingZoomOut": "zoom out",
+  "title.readingZoomIn": "zoom in",
+  "title.resetReadingZoom": "reset zoom",
   "title.readingWidth": "reading width",
   "title.proseFont": "preview font",
   "title.resetWriting": "reset text",
diff --git a/src/styles/chrome/titlebar.css b/src/styles/chrome/titlebar.css
index 975d77c..56ccc61 100644
--- a/src/styles/chrome/titlebar.css
+++ b/src/styles/chrome/titlebar.css
@@ -105,6 +105,33 @@ html.is-mac .mdv-titlebar {
   -webkit-app-region: no-drag;
 }
 
+.mdv-titlebar__zoom {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  height: 22px;
+  margin-right: 4px;
+  padding-right: 6px;
+  border-right: 1px solid var(--border);
+}
+
+.mdv-titlebar__zoom .mdv-btn {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+}
+
+.mdv-titlebar__zoom .mdv-btn:disabled {
+  color: color-mix(in srgb, var(--muted) 42%, transparent);
+  cursor: default;
+  transform: none;
+}
+
+.mdv-titlebar__zoom .mdv-btn:disabled:hover {
+  background: transparent;
+  color: color-mix(in srgb, var(--muted) 42%, transparent);
+}
+
 .mdv-titlebar__theme {
   position: relative;
 }

From ba7ff7fc72551bf8d552e898818865d0b3ce7a63 Mon Sep 17 00:00:00 2001
From: mattenarle10 <enarlem10@gmail.com>
Date: Sat, 27 Jun 2026 14:56:32 +0800
Subject: [PATCH 4/6] fix: reserve mac traffic light row

---
 src/app.css | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 1aa8919..d162a58 100644
--- a/src/app.css
+++ b/src/app.css
@@ -67,7 +67,21 @@
 }
 
 html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-breadcrumb {
-  padding-left: 152px;
+  padding-left: 8px;
+}
+
+html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) {
+  grid-template-rows: var(--titlebar-h) var(--breadcrumb-h) 1fr var(--statusbar-h);
+}
+
+html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-titlebar {
+  display: flex;
+}
+
+html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-titlebar__lead,
+html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-titlebar__center,
+html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-titlebar__actions {
+  display: none;
 }
 
 /* iA Writer-style reading mode: wide max-width, generous breathing room,

From c0a1499d3b2782ab8a9d0a79d85e54c034f3419b Mon Sep 17 00:00:00 2001
From: mattenarle10 <enarlem10@gmail.com>
Date: Sat, 27 Jun 2026 18:35:18 +0800
Subject: [PATCH 5/6] fix: collapse hidden toolbar chrome

---
 src/app.css | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/app.css b/src/app.css
index d162a58..bac88a1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -67,21 +67,7 @@
 }
 
 html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-breadcrumb {
-  padding-left: 8px;
-}
-
-html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) {
-  grid-template-rows: var(--titlebar-h) var(--breadcrumb-h) 1fr var(--statusbar-h);
-}
-
-html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-titlebar {
-  display: flex;
-}
-
-html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-titlebar__lead,
-html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-titlebar__center,
-html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-titlebar__actions {
-  display: none;
+  padding-left: 132px;
 }
 
 /* iA Writer-style reading mode: wide max-width, generous breathing room,

From 77df38f66d7f0e986b5b7bb4a9794560e0529230 Mon Sep 17 00:00:00 2001
From: mattenarle10 <enarlem10@gmail.com>
Date: Sat, 27 Jun 2026 18:50:25 +0800
Subject: [PATCH 6/6] fix: tune hidden toolbar height

---
 src/app.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app.css b/src/app.css
index bac88a1..0abf8e5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -68,6 +68,11 @@
 
 html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) .mdv-breadcrumb {
   padding-left: 132px;
+  height: 42px;
+}
+
+html.is-mac .mdv-app.has-hidden-titlebar:not(.is-reading) {
+  grid-template-rows: 0 42px 1fr var(--statusbar-h);
 }
 
 /* iA Writer-style reading mode: wide max-width, generous breathing room,