@zzclub/pipeline 0.3.0 → 0.4.0

package/{dist/assets → src}/imgx/assets/templates/poster-3-4.html

@@ -164,10 +164,10 @@
     }
 
     function getLetterSpacing(fontSize) {
-      if (fontSize >= 110) return "-2.8px";
-      if (fontSize >= 90) return "-2px";
-      if (fontSize >= 70) return "-1px";
-      return "-0.4px";
+      const t = (fontSize - 34) / (132 - 34);
+      const clamped = Math.min(1, Math.max(0, t));
+      const spacing = -2.8 + clamped * 2.6;
+      return `${spacing.toFixed(1)}px`;
     }
 
     function measureLayout(fontSize, maxWidth) {
@@ -202,26 +202,42 @@
       };
     }
 
-    function countVisibleChars(text) {
-      let total = 0;
-      total += Array.from(text).filter(ch => ch.trim().length > 0).length;
-      return total;
+    // Character width coefficients for visual estimation.
+    // CJK characters are roughly 2x the width of Latin characters in CJK fonts.
+    const CJK_RE = /[一-鿿㐀-䶿豈-﫿　-〿＀-￯]/;
+    const LATIN_WIDE_RE = /[A-Z0-9@#%&]/;
+    const LATIN_NARROW_RE = /[a-z \t\n\r.,;:!?()[\]{}\-+=*/\\|]/;
+
+    function estimateVisualWidth(text) {
+      let width = 0;
+      for (const ch of Array.from(text)) {
+        if (CJK_RE.test(ch)) {
+          width += 2.0;
+        } else if (LATIN_WIDE_RE.test(ch)) {
+          width += 1.0;
+        } else if (LATIN_NARROW_RE.test(ch)) {
+          width += 0.55;
+        } else {
+          width += 1.0;
+        }
+      }
+      return width;
     }
 
-    function getDesiredLineRange(chars) {
-      if (chars <= 8) return [1, 2];
-      if (chars <= 16) return [2, 3];
-      if (chars <= 28) return [3, 4];
-      if (chars <= 44) return [4, 6];
-      if (chars <= 64) return [5, 7];
+    function getDesiredLineRange(visualWidth) {
+      if (visualWidth <= 16) return [1, 2];
+      if (visualWidth <= 32) return [2, 3];
+      if (visualWidth <= 50) return [3, 4];
+      if (visualWidth <= 72) return [4, 6];
+      if (visualWidth <= 100) return [5, 7];
       return [6, 8];
     }
 
-    function getBlockMaxWidth(chars) {
-      if (chars <= 10) return Math.floor(textBlock.clientWidth);
-      if (chars <= 22) return Math.floor(textBlock.clientWidth * 0.92);
-      if (chars <= 40) return Math.floor(textBlock.clientWidth * 0.86);
-      if (chars <= 64) return Math.floor(textBlock.clientWidth * 0.8);
+    function getBlockMaxWidth(visualWidth) {
+      if (visualWidth <= 18) return Math.floor(textBlock.clientWidth);
+      if (visualWidth <= 38) return Math.floor(textBlock.clientWidth * 0.92);
+      if (visualWidth <= 60) return Math.floor(textBlock.clientWidth * 0.86);
+      if (visualWidth <= 90) return Math.floor(textBlock.clientWidth * 0.80);
       return Math.floor(textBlock.clientWidth * 0.74);
     }
 
@@ -229,28 +245,51 @@
       if (layout.totalHeight > availableHeight) return Number.POSITIVE_INFINITY;
 
       let score = 0;
+
+      // 1. Optical centering: text block should sit slightly above mathematical center
+      //    (~46% from top, not 50%) — this is a well-established magazine design rule.
+      const opticalCenter = availableHeight * 0.46;
+      const topPadding = (availableHeight - layout.totalHeight) / 2;
+      const centerError = Math.abs(topPadding - opticalCenter) / availableHeight;
+      score += centerError * 400;
+
+      // 2. Per-block line quality
       for (const block of layout.blocks) {
-        const charCount = countVisibleChars(block.text);
-        const [minLines, maxLines] = getDesiredLineRange(charCount);
+        const visualWidth = estimateVisualWidth(block.text);
+        const [minLines, maxLines] = getDesiredLineRange(visualWidth);
         const lineCount = block.lineCount;
-        if (lineCount < minLines) score += (minLines - lineCount) * 120;
-        if (lineCount > maxLines) score += (lineCount - maxLines) * 150;
+
+        if (lineCount < minLines) score += (minLines - lineCount) * 80;
+        if (lineCount > maxLines) score += (lineCount - maxLines) * 120;
 
         if (block.widths.length > 1) {
           const widest = Math.max(...block.widths);
           const narrowest = Math.min(...block.widths);
           const fillRatio = widest / Math.max(1, maxWidth);
           const raggedRatio = narrowest / Math.max(1, widest);
-          score += Math.max(0, 0.78 - fillRatio) * 220;
-          score += Math.max(0, 0.58 - raggedRatio) * 200;
+
+          // Last line sweet spot: 65-85% of widest line
+          const lastLine = block.widths[block.widths.length - 1];
+          const lastRatio = lastLine / Math.max(1, widest);
+          score += Math.abs(lastRatio - 0.75) * 150;
+
+          score += Math.max(0, 0.78 - fillRatio) * 180;
+          score += Math.max(0, 0.55 - raggedRatio) * 170;
         } else if (block.widths.length === 1) {
           const fillRatio = block.widths[0] / Math.max(1, maxWidth);
-          if (charCount > 10) score += Math.max(0, fillRatio - 0.88) * 180;
+          if (visualWidth > 12) {
+            score += Math.abs(fillRatio - 0.84) * 200;
+          }
         }
       }
 
-      score += Math.max(0, 0.92 - layout.totalHeight / Math.max(1, availableHeight)) * 30;
-      score += layout.fontSize * 0.015;
+      // 3. Height utilization sweet spot: 80-92%
+      const heightRatio = layout.totalHeight / Math.max(1, availableHeight);
+      score += Math.abs(heightRatio - 0.86) * 80;
+
+      // 4. Slight bias toward larger fonts
+      score -= (layout.fontSize / 132) * 5;
+
       return score;
     }
 
@@ -328,8 +367,8 @@
 
     async function boot() {
       await document.fonts.ready;
-      const sourceChars = blocks.reduce((sum, block) => sum + Array.from(block.text).filter(ch => ch.trim().length > 0).length, 0);
-      const maxWidth = getBlockMaxWidth(sourceChars);
+      const sourceVisualWidth = blocks.reduce((sum, block) => sum + estimateVisualWidth(block.text), 0);
+      const maxWidth = getBlockMaxWidth(sourceVisualWidth);
       const iconHeight = Math.ceil(iconNode.getBoundingClientRect().height);
       const watermarkHeight = Math.ceil(watermarkNode.getBoundingClientRect().height);
       const availableHeight = Math.max(

package/{dist/assets → src}/imgx/assets/templates/wechat-cover-split.html

@@ -196,20 +196,23 @@
     }
 
     function getLineHeight(fontSize) {
-      if (fontSize >= 80) return Math.round(fontSize * 1.06);
-      if (fontSize >= 60) return Math.round(fontSize * 1.05);
-      return Math.round(fontSize * 1.04);
+      // Smooth interpolation: 1.04 at 36px → 1.08 at 88px
+      const t = (fontSize - 36) / (88 - 36);
+      const ratio = 1.04 + Math.min(1, Math.max(0, t)) * 0.04;
+      return Math.round(fontSize * ratio);
     }
 
     function getBlockGap(fontSize) {
-      return fontSize >= 64 ? 12 : fontSize >= 52 ? 10 : 8;
+      // Smooth: 8px at 36px → 14px at 88px
+      const t = (fontSize - 36) / (88 - 36);
+      return Math.round(8 + Math.min(1, Math.max(0, t)) * 6);
     }
 
     function getLetterSpacing(fontSize) {
-      if (fontSize >= 80) return "-2px";
-      if (fontSize >= 64) return "-1.5px";
-      if (fontSize >= 48) return "-1px";
-      return "-0.5px";
+      // Smooth: -0.5px at 36px → -2.5px at 88px
+      const t = (fontSize - 36) / (88 - 36);
+      const val = -0.5 + Math.min(1, Math.max(0, t)) * (-2.0);
+      return `${val.toFixed(1)}px`;
     }
 
     function measureLayout(fontSize, maxWidth) {
@@ -265,39 +268,67 @@
         .join("");
     }
 
+    function scoreCoverLayout(layout, availableHeight, maxWidth) {
+      let score = 0;
+
+      // 1. Height within sweet zone (75-90%)
+      const heightRatio = layout.totalHeight / Math.max(1, availableHeight);
+      score += Math.abs(heightRatio - 0.82) * 200;
+
+      // 2. Per-block line quality
+      for (const block of layout.blocks) {
+        if (block.widths.length === 1) {
+          const fill = block.widths[0] / maxWidth;
+          score += Math.abs(fill - 0.85) * 150;
+        } else if (block.widths.length === 2) {
+          const line1Fill = block.widths[0] / maxWidth;
+          const line2Fill = block.widths[1] / maxWidth;
+          // Prefer pyramid: line1 wider than line2
+          if (line2Fill > line1Fill) score += 80;
+          // Line2 should be 60-85% of line1
+          const ratio = block.widths[1] / Math.max(1, block.widths[0]);
+          score += Math.abs(ratio - 0.72) * 180;
+        }
+      }
+
+      // 3. Slight bias toward larger fonts
+      score -= (layout.fontSize / 88) * 10;
+
+      return score;
+    }
+
     async function boot() {
       await document.fonts.ready;
 
-      const maxWidth  = Math.min(MAX_WIDTH, Math.floor(textBlock.clientWidth));
-      const leftEl    = document.querySelector(".left");
+      const maxWidth = Math.min(MAX_WIDTH, Math.floor(textBlock.clientWidth));
+      const leftEl = document.querySelector(".left");
       const eyebrowEl = document.querySelector(".eyebrow");
-      const leftH     = leftEl    ? leftEl.clientHeight                                      : 400;
-      const eyebrowH  = eyebrowEl ? Math.ceil(eyebrowEl.getBoundingClientRect().height) + 14 : 32;
-      const padV      = 34 + 28;  // .left padding-top + padding-bottom
-      const footerRes = 52;       // footer 16px 字 + bottom 24px + buffer
+      const leftH = leftEl ? leftEl.clientHeight : 400;
+      const eyebrowH = eyebrowEl ? Math.ceil(eyebrowEl.getBoundingClientRect().height) + 14 : 32;
+      const padV = 34 + 28;
+      const footerRes = 52;
       const availableHeight = Math.max(
         FALLBACK_AVAILABLE_HEIGHT,
         leftH - padV - eyebrowH - footerRes,
       );
 
-      let chosen = null;
+      let best = null;
+      let bestScore = Number.POSITIVE_INFINITY;
 
-      // Pass 1：最大字号，同时满足行数约束 + 高度约束
-      for (let fs = MAX_FONT_SIZE; fs >= MIN_FONT_SIZE; fs -= 2) {
+      for (let fs = MAX_FONT_SIZE; fs >= MIN_FONT_SIZE; fs -= 1) {
         const layout = measureLayout(fs, maxWidth);
-        if (layout.valid && layout.totalHeight <= availableHeight) { chosen = layout; break; }
-      }
-      // Pass 2：放宽高度约束，仍满足行数约束（超长标题兜底）
-      if (!chosen) {
-        for (let fs = MAX_FONT_SIZE; fs >= MIN_FONT_SIZE; fs -= 2) {
-          const layout = measureLayout(fs, maxWidth);
-          if (layout.valid) { chosen = layout; break; }
+        if (!layout.valid) continue;
+
+        const score = scoreCoverLayout(layout, availableHeight, maxWidth);
+        if (score < bestScore) {
+          bestScore = score;
+          best = layout;
         }
       }
-      // Pass 3：无条件兜底（文字极长时）
-      if (!chosen) chosen = measureLayout(MIN_FONT_SIZE, maxWidth);
 
-      renderLayout(chosen);
+      if (!best) best = measureLayout(MIN_FONT_SIZE, maxWidth);
+
+      renderLayout(best);
       document.body.classList.add("ready");
     }
 

package/src/imgx/cli.ts

@@ -0,0 +1,57 @@
+export type ParsedArgs = {
+  flags: Map<string, string[]>;
+  booleans: Set<string>;
+};
+
+export function parseArgs(argv: string[]): ParsedArgs {
+  const flags = new Map<string, string[]>();
+  const booleans = new Set<string>();
+
+  for (let index = 0; index < argv.length; index++) {
+    const token = argv[index];
+    if (!token?.startsWith("--")) continue;
+
+    const name = token.slice(2);
+    const next = argv[index + 1];
+    if (next === undefined || next.startsWith("--")) {
+      booleans.add(name);
+      continue;
+    }
+
+    const current = flags.get(name) ?? [];
+    current.push(next);
+    flags.set(name, current);
+    index += 1;
+  }
+
+  return { flags, booleans };
+}
+
+export function getArg(parsed: ParsedArgs, name: string, fallback = ""): string {
+  const values = parsed.flags.get(name);
+  if (values === undefined || values.length === 0) return fallback;
+  return values[values.length - 1] ?? fallback;
+}
+
+export function getArgs(parsed: ParsedArgs, name: string): string[] {
+  return parsed.flags.get(name) ?? [];
+}
+
+export function hasFlag(parsed: ParsedArgs, name: string): boolean {
+  return parsed.booleans.has(name);
+}
+
+export function requireArg(parsed: ParsedArgs, name: string): string {
+  const value = getArg(parsed, name);
+  if (value.length === 0) {
+    throw new Error(`Missing required argument --${name}`);
+  }
+  return value;
+}
+
+export function getIntArg(parsed: ParsedArgs, name: string, fallback: number): number {
+  const raw = getArg(parsed, name);
+  if (raw.length === 0) return fallback;
+  const value = Number.parseInt(raw, 10);
+  return Number.isFinite(value) ? value : fallback;
+}

package/src/imgx/geometry.ts

@@ -0,0 +1,68 @@
+import type { LongformGeometry, LongformTheme } from "./longform-theme";
+
+export type LongformGeometryOverrides = Partial<{
+  pageWidth: number;
+  pageHeight: number;
+  bodyPaddingX: number;
+  bodyPaddingY: number;
+  logoSize: number;
+  logoGap: number;
+  footerMarginTop: number;
+  footerHeight: number;
+  contentBottomGap: number;
+  contentWidth: number;
+  contentHeight: number;
+}>;
+
+function sanitizePositiveInt(value: number | undefined | null): number | null {
+  if (!Number.isFinite(value)) {
+    return null;
+  }
+  const rounded = Math.round(value!);
+  return rounded > 0 ? rounded : null;
+}
+
+export function applyGeometryOverrides(theme: LongformTheme, overrides: LongformGeometryOverrides): LongformTheme {
+  return {
+    ...theme,
+    pageWidth: sanitizePositiveInt(overrides.pageWidth) ?? theme.pageWidth,
+    pageHeight: sanitizePositiveInt(overrides.pageHeight) ?? theme.pageHeight,
+    bodyPaddingX: sanitizePositiveInt(overrides.bodyPaddingX) ?? theme.bodyPaddingX,
+    bodyPaddingY: sanitizePositiveInt(overrides.bodyPaddingY) ?? theme.bodyPaddingY,
+    logoSize: sanitizePositiveInt(overrides.logoSize) ?? theme.logoSize,
+    logoGap: sanitizePositiveInt(overrides.logoGap) ?? theme.logoGap,
+    footerMarginTop: sanitizePositiveInt(overrides.footerMarginTop) ?? theme.footerMarginTop,
+    footerHeight: sanitizePositiveInt(overrides.footerHeight) ?? theme.footerHeight,
+    contentBottomGap: sanitizePositiveInt(overrides.contentBottomGap) ?? theme.contentBottomGap,
+    contentWidth: sanitizePositiveInt(overrides.contentWidth) ?? theme.contentWidth,
+    contentHeight: sanitizePositiveInt(overrides.contentHeight) ?? theme.contentHeight,
+  };
+}
+
+export function getDerivedGeometry(theme: LongformTheme): LongformGeometry {
+  const pageWidth = theme.pageWidth;
+  const pageHeight = theme.pageHeight;
+  const bodyWidth = Math.max(120, pageWidth - theme.bodyPaddingX * 2);
+  const headerHeight = theme.logoSize + theme.logoGap;
+  const footerReservedHeight = theme.footerHeight + theme.footerMarginTop;
+  const derivedContentHeight = Math.max(
+    120,
+    pageHeight - theme.bodyPaddingY * 2 - headerHeight - footerReservedHeight,
+  );
+  const contentWidth = Math.min(theme.contentWidth ?? bodyWidth, bodyWidth);
+  const contentHeight = Math.min(theme.contentHeight ?? derivedContentHeight, derivedContentHeight);
+  return {
+    pageWidth,
+    pageHeight,
+    bodyPaddingX: theme.bodyPaddingX,
+    bodyPaddingY: theme.bodyPaddingY,
+    logoSize: theme.logoSize,
+    logoGap: theme.logoGap,
+    footerMarginTop: theme.footerMarginTop,
+    footerHeight: theme.footerHeight,
+    contentBottomGap: theme.contentBottomGap,
+    contentWidth,
+    contentHeight,
+    contentStageHeight: Math.max(80, contentHeight - theme.contentBottomGap),
+  };
+}

package/src/imgx/index.ts

@@ -0,0 +1,5 @@
+export { runRenderArticleCli } from "./render-article";
+export type { RenderArticleResult } from "./render-article";
+export { runRenderAsciiPortraitCli } from "./render-ascii-portrait";
+export { runRenderCardCli } from "./render-card";
+export { runRenderXLikePostsCli } from "./render-x-like-posts";

package/src/imgx/longform-theme.ts

@@ -0,0 +1,243 @@
+import { computeSpacing, proportionalLineHeight } from "./typographic-scale";
+
+export type ContentBlockKind = "paragraph" | "heading" | "quote" | "list-item";
+
+export const LONGFORM_PAGE_WIDTH = 900;
+export const LONGFORM_PAGE_HEIGHT = 1200;
+
+export type LongformLineStyle = {
+  font: string;
+  lineHeight: number;
+  className: string;
+  gapBefore?: number;
+  gapAfter?: number;
+};
+
+export type LongformTheme = {
+  name: string;
+  bgColor: string;
+  bodyColor: string;
+  accentColor: string;
+  quoteColor: string;
+  captionColor: string;
+  watermarkColor: string;
+  watermarkOpacity: number;
+  pageWidth: number;
+  pageHeight: number;
+  imageRadius: number;
+  bodyPaddingX: number;
+  bodyPaddingY: number;
+  logoSize: number;
+  logoGap: number;
+  footerMarginTop: number;
+  footerHeight: number;
+  contentBottomGap: number;
+  contentWidth: number | null;
+  contentHeight: number | null;
+  bodyStyles: Record<ContentBlockKind, LongformLineStyle>;
+};
+
+export type LongformGeometry = {
+  pageWidth: number;
+  pageHeight: number;
+  bodyPaddingX: number;
+  bodyPaddingY: number;
+  logoSize: number;
+  logoGap: number;
+  footerMarginTop: number;
+  footerHeight: number;
+  contentBottomGap: number;
+  contentWidth: number;
+  contentHeight: number;
+  contentStageHeight: number;
+};
+
+/**
+ * Return a new theme with contentHeight overridden.
+ * Used when min_pages > 1 to shrink the per-page content area so the
+ * pagination engine naturally splits content across more pages.
+ */
+export function applyContentHeightOverride(theme: LongformTheme, contentHeight: number): LongformTheme {
+  return { ...theme, contentHeight: Math.max(100, Math.round(contentHeight)) };
+}
+
+/**
+ * Parse font size from a CSS font shorthand string like `400 32px "Font", sans-serif`.
+ * Returns the numeric pixel value, or null if not found.
+ */
+function parseFontSize(font: string): number | null {
+  const m = font.match(/\b(\d+(?:\.\d+)?)px\b/);
+  return m ? parseFloat(m[1]!) : null;
+}
+
+/**
+ * Return a new theme where every bodyStyle font size is capped at fontSizeMax (px).
+ * Line heights are scaled proportionally when the font size is reduced.
+ * Used alongside applyContentHeightOverride to prevent overly large text when
+ * per-page content area is small (few words forced onto a fixed number of pages).
+ */
+export function applyFontSizeMax(theme: LongformTheme, fontSizeMax: number): LongformTheme {
+  const clampedStyles = {} as Record<ContentBlockKind, LongformLineStyle>;
+  for (const [kind, style] of Object.entries(theme.bodyStyles) as [ContentBlockKind, LongformLineStyle][]) {
+    const original = parseFontSize(style.font);
+    if (original !== null && original > fontSizeMax) {
+      const ratio = fontSizeMax / original;
+      const newFont = style.font.replace(/\b\d+(?:\.\d+)?px\b/, `${fontSizeMax}px`);
+      const newLineHeight = Math.round(style.lineHeight * ratio);
+      clampedStyles[kind] = { ...style, font: newFont, lineHeight: newLineHeight };
+    } else {
+      clampedStyles[kind] = style;
+    }
+  }
+  return { ...theme, bodyStyles: clampedStyles };
+}
+
+export function getLongformGeometry(theme: LongformTheme): LongformGeometry {
+  const bodyWidth = Math.max(120, theme.pageWidth - theme.bodyPaddingX * 2);
+  const headerHeight = theme.logoSize + theme.logoGap;
+  const footerReservedHeight = theme.footerHeight + theme.footerMarginTop;
+  const derivedContentHeight = Math.max(
+    120,
+    theme.pageHeight - theme.bodyPaddingY * 2 - headerHeight - footerReservedHeight,
+  );
+  const contentWidth = Math.min(theme.contentWidth ?? bodyWidth, bodyWidth);
+  const contentHeight = Math.min(theme.contentHeight ?? derivedContentHeight, derivedContentHeight);
+  return {
+    pageWidth: theme.pageWidth,
+    pageHeight: theme.pageHeight,
+    bodyPaddingX: theme.bodyPaddingX,
+    bodyPaddingY: theme.bodyPaddingY,
+    logoSize: theme.logoSize,
+    logoGap: theme.logoGap,
+    footerMarginTop: theme.footerMarginTop,
+    footerHeight: theme.footerHeight,
+    contentBottomGap: theme.contentBottomGap,
+    contentWidth,
+    contentHeight,
+    contentStageHeight: Math.max(80, contentHeight - theme.contentBottomGap),
+  };
+}
+
+const BODY_FS = 32;
+const HEADING_FS = 50; // 32 * 1.25^2
+const QUOTE_FS = 30;
+
+const BASE_THEME: Omit<LongformTheme, "name" | "bgColor" | "bodyColor" | "accentColor" | "quoteColor" | "captionColor" | "watermarkColor" | "watermarkOpacity"> = {
+  pageWidth: LONGFORM_PAGE_WIDTH,
+  pageHeight: LONGFORM_PAGE_HEIGHT,
+  imageRadius: 22,
+
+  // Proportional geometry: ~4.5% of page height for vertical padding
+  bodyPaddingX: Math.round(LONGFORM_PAGE_WIDTH * 0.10),        // 90
+  bodyPaddingY: Math.round(LONGFORM_PAGE_HEIGHT * 0.045),       // 54 (was 48)
+  logoSize: 72,
+  logoGap: Math.round(LONGFORM_PAGE_HEIGHT * 0.045 * 0.78),    // ~42 (was 40)
+  footerMarginTop: Math.round(BODY_FS * 1.2),                   // 38 (was 28)
+  footerHeight: Math.round(BODY_FS * 1.0),                      // 32 (unchanged)
+  contentBottomGap: Math.round(BODY_FS * 0.6),                  // 19 (was 12)
+
+  contentWidth: null,
+  contentHeight: null,
+
+  bodyStyles: {
+    paragraph: {
+      font: `400 ${BODY_FS}px "LXGWNeoZhiSongPlus", "PingFang SC", "Noto Serif SC", serif`,
+      lineHeight: proportionalLineHeight(BODY_FS),
+      className: "body-line",
+      gapAfter: computeSpacing(BODY_FS, BODY_FS, 0.55),
+    },
+    heading: {
+      font: `700 ${HEADING_FS}px "AlimamaShuHeiTi", "PingFang SC", sans-serif`,
+      lineHeight: proportionalLineHeight(HEADING_FS),
+      className: "body-heading",
+      gapBefore: computeSpacing(BODY_FS, HEADING_FS, 0.85),
+      gapAfter: computeSpacing(HEADING_FS, BODY_FS, 0.45),
+    },
+    quote: {
+      font: `400 ${QUOTE_FS}px "LXGWNeoZhiSongPlus", "PingFang SC", "Noto Serif SC", serif`,
+      lineHeight: proportionalLineHeight(QUOTE_FS),
+      className: "body-quote",
+      gapBefore: computeSpacing(BODY_FS, QUOTE_FS, 0.6),
+      gapAfter: computeSpacing(QUOTE_FS, BODY_FS, 0.5),
+    },
+    "list-item": {
+      font: `400 ${BODY_FS}px "LXGWNeoZhiSongPlus", "PingFang SC", "Noto Serif SC", serif`,
+      lineHeight: proportionalLineHeight(BODY_FS),
+      className: "body-line",
+      gapAfter: computeSpacing(BODY_FS, BODY_FS, 0.3),
+    },
+  },
+};
+
+const THEMES: Record<string, LongformTheme> = {
+  "paper-sage": {
+    ...BASE_THEME,
+    name: "paper-sage",
+    bgColor: "#f9fcfa",
+    bodyColor: "#22201d",
+    accentColor: "#1d4f39",
+    quoteColor: "#474038",
+    captionColor: "#6a6257",
+    watermarkColor: "#555555",
+    watermarkOpacity: 0.55,
+  },
+  "linen-news": {
+    ...BASE_THEME,
+    name: "linen-news",
+    bgColor: "#f7f3eb",
+    bodyColor: "#2b2621",
+    accentColor: "#7a2e24",
+    quoteColor: "#625449",
+    captionColor: "#7a6a5d",
+    watermarkColor: "#6a6158",
+    watermarkOpacity: 0.62,
+    bodyStyles: {
+      ...BASE_THEME.bodyStyles,
+      heading: {
+        ...BASE_THEME.bodyStyles.heading,
+        font: `700 36px "AlimamaShuHeiTi", "PingFang SC", sans-serif`,
+        lineHeight: proportionalLineHeight(36),
+        gapBefore: computeSpacing(BODY_FS, 36, 0.85),
+        gapAfter: computeSpacing(36, BODY_FS, 0.45),
+      },
+      paragraph: {
+        ...BASE_THEME.bodyStyles.paragraph,
+        font: `400 31px "LXGWNeoZhiSongPlus", "PingFang SC", "Noto Serif SC", serif`,
+        lineHeight: 56,
+      },
+      quote: {
+        ...BASE_THEME.bodyStyles.quote,
+        lineHeight: 54,
+      },
+    },
+  },
+};
+
+export function getLongformTheme(name: string): LongformTheme {
+  return THEMES[name] ?? THEMES["paper-sage"]!;
+}
+
+export function getLongformThemeCssVars(theme: LongformTheme): string {
+  const geometry = getLongformGeometry(theme);
+  return [
+    `--page-width:${theme.pageWidth}px`,
+    `--page-height:${theme.pageHeight}px`,
+    `--page-bg:${theme.bgColor}`,
+    `--body-color:${theme.bodyColor}`,
+    `--accent-color:${theme.accentColor}`,
+    `--quote-color:${theme.quoteColor}`,
+    `--caption-color:${theme.captionColor}`,
+    `--watermark-color:${theme.watermarkColor}`,
+    `--watermark-opacity:${theme.watermarkOpacity}`,
+    `--body-padding-x:${theme.bodyPaddingX}px`,
+    `--body-padding-y:${theme.bodyPaddingY}px`,
+    `--logo-size:${theme.logoSize}px`,
+    `--logo-gap:${theme.logoGap}px`,
+    `--footer-margin-top:${theme.footerMarginTop}px`,
+    `--footer-height:${theme.footerHeight}px`,
+    `--content-width:${geometry.contentWidth}px`,
+    `--content-height:${geometry.contentHeight}px`,
+    `--content-bottom-gap:${theme.contentBottomGap}px`,
+    `--image-radius:${theme.imageRadius}px`,
+  ].join(";");
+}