@bendyline/squisq 1.1.0 → 1.2.0

package/src/__tests__/markdownToDoc.test.ts

@@ -372,3 +372,99 @@ describe('template annotation in markdownToDoc', () => {
     expect(doc.blocks[0].children![0].template).toBe('chart');
   });
 });
+
+// ============================================
+// Reading-time durations & caption generation
+// ============================================
+
+describe('reading-time durations', () => {
+  it('sets block duration based on body content reading time', () => {
+    // ~50 words at 200 WPM = 15 seconds
+    const body = Array.from({ length: 50 }, (_, i) => `word${i}`).join(' ');
+    const md = parseMarkdown(`# Title\n\n${body}`);
+    const doc = markdownToDoc(md);
+
+    const block = doc.blocks[0];
+    expect(block.duration).toBeGreaterThan(5); // more than default
+    expect(block.duration).toBe(15); // 50 words / 200 WPM * 60 = 15s
+  });
+
+  it('applies minimum 3s duration for very short content', () => {
+    const md = parseMarkdown('# Title\n\nHi.');
+    const doc = markdownToDoc(md);
+
+    expect(doc.blocks[0].duration).toBe(3);
+  });
+
+  it('uses defaultDuration for blocks with no body content', () => {
+    const md = parseMarkdown('# Title');
+    const doc = markdownToDoc(md);
+
+    expect(doc.blocks[0].duration).toBe(5); // default
+  });
+
+  it('doc.duration sums all reading-time block durations', () => {
+    // Block A: no body → 5s default. Block B: ~20 words → 6s
+    const body = Array.from({ length: 20 }, (_, i) => `word${i}`).join(' ');
+    const md = parseMarkdown(`# A\n\n# B\n\n${body}`);
+    const doc = markdownToDoc(md);
+
+    const flat = flattenBlocks(doc.blocks);
+    expect(flat[0].duration).toBe(5); // A: no body
+    expect(flat[1].duration).toBe(6); // B: 20 words / 200 WPM * 60 = 6s
+    expect(doc.duration).toBe(11);
+  });
+});
+
+describe('caption generation', () => {
+  it('generates captions from body content', () => {
+    const md = parseMarkdown('# Title\n\nThis is the first sentence. This is the second sentence.');
+    const doc = markdownToDoc(md);
+
+    expect(doc.captions).toBeDefined();
+    expect(doc.captions!.phrases.length).toBeGreaterThanOrEqual(2);
+    expect(doc.captions!.phrases[0].text).toContain('first sentence');
+    expect(doc.captions!.phrases[1].text).toContain('second sentence');
+  });
+
+  it('caption times span the block duration', () => {
+    const md = parseMarkdown('# Section\n\nSome text here. More text follows.');
+    const doc = markdownToDoc(md);
+
+    expect(doc.captions).toBeDefined();
+    const phrases = doc.captions!.phrases;
+    // First phrase starts at block start
+    expect(phrases[0].startTime).toBe(doc.blocks[0].startTime);
+    // Last phrase ends at block end
+    const last = phrases[phrases.length - 1];
+    expect(last.endTime).toBeCloseTo(doc.blocks[0].startTime + doc.blocks[0].duration, 1);
+  });
+
+  it('does not generate captions for blocks without body content', () => {
+    const md = parseMarkdown('# A\n\n# B\n\n# C');
+    const doc = markdownToDoc(md);
+
+    // No body content anywhere → no captions
+    expect(doc.captions).toBeUndefined();
+  });
+
+  it('generates captions version and timestamp', () => {
+    const md = parseMarkdown('# Title\n\nHello world and more text.');
+    const doc = markdownToDoc(md);
+
+    expect(doc.captions!.version).toBe(1);
+    expect(doc.captions!.generatedAt).toBeTruthy();
+  });
+
+  it('caption phrases have sequential non-overlapping times', () => {
+    const md = parseMarkdown(
+      '# A\n\nFirst sentence here. Second sentence here.\n\n# B\n\nThird sentence. Fourth sentence.',
+    );
+    const doc = markdownToDoc(md);
+
+    const phrases = doc.captions!.phrases;
+    for (let i = 1; i < phrases.length; i++) {
+      expect(phrases[i].startTime).toBeGreaterThanOrEqual(phrases[i - 1].endTime - 0.001);
+    }
+  });
+});

package/src/doc/audioMapping.ts

@@ -0,0 +1,346 @@
+/**
+ * Audio Mapping
+ *
+ * Associates audio segments (MP3 files) with document blocks.
+ * Supports two modes:
+ *
+ * 1. **Explicit annotation**: Blocks with `{[audio=filename.mp3]}` in their
+ *    heading annotation are directly mapped to that audio file.
+ *
+ * 2. **Auto-matching**: When no annotations exist but the container has MP3s
+ *    with `.timing.json` files, matches MP3s to blocks by comparing the
+ *    timing.json `sourceText` against block text content (word overlap).
+ *    Falls back to filename-based matching (slugified title comparison).
+ */
+
+import type { Doc, Block, AudioSegment, AudioTimingData } from '../schemas/Doc.js';
+import type { ContentContainer } from '../storage/ContentContainer.js';
+import { extractPlainText } from '../markdown/utils.js';
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+/**
+ * Parse a timing.json file from raw data.
+ */
+function parseTimingJson(data: ArrayBuffer): AudioTimingData | null {
+  try {
+    const text = new TextDecoder().decode(data);
+    const parsed = JSON.parse(text);
+    if (parsed && typeof parsed.sourceText === 'string' && typeof parsed.duration === 'number') {
+      return {
+        sourceText: parsed.sourceText,
+        bookmarks: Array.isArray(parsed.bookmarks) ? parsed.bookmarks : [],
+        duration: parsed.duration,
+      };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Normalize text for comparison: lowercase, strip punctuation, split into word set.
+ */
+function normalizeToWords(text: string): Set<string> {
+  const words = text
+    .toLowerCase()
+    .replace(/[^\w\s]/g, ' ')
+    .split(/\s+/)
+    .filter((w) => w.length > 2);
+  return new Set(words);
+}
+
+/**
+ * Calculate Jaccard similarity between two texts (word overlap).
+ * Returns 0–1 where 1 = identical word sets.
+ */
+export function scoreTextSimilarity(a: string, b: string): number {
+  const wordsA = normalizeToWords(a);
+  const wordsB = normalizeToWords(b);
+  if (wordsA.size === 0 || wordsB.size === 0) return 0;
+
+  let intersection = 0;
+  for (const w of wordsA) {
+    if (wordsB.has(w)) intersection++;
+  }
+
+  const union = new Set([...wordsA, ...wordsB]).size;
+  return union > 0 ? intersection / union : 0;
+}
+
+/**
+ * Slugify a title for filename comparison.
+ * "The Behring Gambit" → "the-behring-gambit"
+ */
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+/**
+ * Extract plain text from a block's contents and title.
+ */
+function blockToPlainText(block: Block): string {
+  const parts: string[] = [];
+  if (block.title) parts.push(block.title);
+  if (block.contents) {
+    for (const node of block.contents) {
+      parts.push(extractPlainText(node));
+    }
+  }
+  return parts.join('\n');
+}
+
+/**
+ * Flatten a block tree into a linear array of leaf blocks
+ * (blocks that represent actual content sections).
+ */
+function flattenForAudio(blocks: Block[]): Block[] {
+  const result: Block[] = [];
+  for (const block of blocks) {
+    if (block.children && block.children.length > 0) {
+      result.push(...flattenForAudio(block.children));
+    } else {
+      result.push(block);
+    }
+  }
+  return result;
+}
+
+/** Info about an MP3 file found in the container. */
+interface Mp3Info {
+  /** Path in the container (e.g., "images/c23n-issaquah-highlands-intro.mp3") */
+  path: string;
+  /** Filename without path (e.g., "c23n-issaquah-highlands-intro.mp3") */
+  filename: string;
+  /** Parsed timing data (if .timing.json exists) */
+  timing: AudioTimingData | null;
+}
+
+// ── Core Functions ───────────────────────────────────────────────────
+
+/**
+ * Discover all MP3 files in a container and load their timing data.
+ */
+async function discoverMp3s(container: ContentContainer): Promise<Mp3Info[]> {
+  const files = await container.listFiles();
+  const mp3Files = files.filter((f) => f.path.endsWith('.mp3'));
+  const results: Mp3Info[] = [];
+
+  for (const file of mp3Files) {
+    const filename = file.path.split('/').pop() ?? file.path;
+    let timing: AudioTimingData | null = null;
+
+    // Try to load timing.json
+    const timingPath = `${file.path}.timing.json`;
+    const timingData = await container.readFile(timingPath);
+    if (timingData) {
+      timing = parseTimingJson(timingData);
+    }
+
+    results.push({ path: file.path, filename, timing });
+  }
+
+  return results;
+}
+
+/**
+ * Resolve audio from explicit `{[audio=filename.mp3]}` annotations on blocks.
+ * Returns the matched pairs or an empty array if no annotations found.
+ */
+function resolveFromAnnotations(
+  blocks: Block[],
+  mp3s: Mp3Info[],
+): Array<{ block: Block; mp3: Mp3Info }> {
+  const matches: Array<{ block: Block; mp3: Mp3Info }> = [];
+  const flat = flattenForAudio(blocks);
+
+  for (const block of flat) {
+    const audioRef = block.templateOverrides?.audio;
+    if (!audioRef) continue;
+
+    // Find the MP3 by filename (exact or suffix match)
+    const mp3 = mp3s.find(
+      (m) => m.filename === audioRef || m.path === audioRef || m.path.endsWith(`/${audioRef}`),
+    );
+
+    if (mp3) {
+      matches.push({ block, mp3 });
+    }
+  }
+
+  return matches;
+}
+
+/** Minimum similarity score to consider a content match. */
+const MIN_CONTENT_SIMILARITY = 0.35;
+
+/** Minimum similarity score for filename-based matching. */
+const MIN_FILENAME_SIMILARITY = 0.5;
+
+/**
+ * Auto-match MP3 files to blocks by content similarity.
+ * Uses timing.json sourceText when available, falls back to filename matching.
+ */
+function autoMatchBlocks(
+  blocks: Block[],
+  mp3s: Mp3Info[],
+): Array<{ block: Block; mp3: Mp3Info; score: number }> {
+  const flat = flattenForAudio(blocks);
+  if (flat.length === 0 || mp3s.length === 0) return [];
+
+  // Score all (mp3, block) pairs
+  const scoredPairs: Array<{
+    block: Block;
+    blockIndex: number;
+    mp3: Mp3Info;
+    mp3Index: number;
+    score: number;
+  }> = [];
+
+  for (let mi = 0; mi < mp3s.length; mi++) {
+    const mp3 = mp3s[mi];
+
+    for (let bi = 0; bi < flat.length; bi++) {
+      const block = flat[bi];
+      const blockText = blockToPlainText(block);
+      if (!blockText.trim()) continue;
+
+      let score = 0;
+
+      // Primary: content similarity via timing.json sourceText
+      if (mp3.timing?.sourceText) {
+        score = scoreTextSimilarity(mp3.timing.sourceText, blockText);
+      }
+
+      // Fallback: filename-based matching
+      if (score < MIN_CONTENT_SIMILARITY && block.title) {
+        const titleSlug = slugify(block.title);
+        const fileSlug = slugify(mp3.filename.replace(/\.mp3$/, ''));
+        // Check if the title slug appears in the filename slug
+        if (fileSlug.includes(titleSlug) && titleSlug.length >= 3) {
+          score = Math.max(score, MIN_FILENAME_SIMILARITY + 0.1);
+        }
+      }
+
+      if (score >= MIN_CONTENT_SIMILARITY) {
+        scoredPairs.push({ block, blockIndex: bi, mp3, mp3Index: mi, score });
+      }
+    }
+  }
+
+  // Greedy assignment: highest score first, each mp3 and block used at most once
+  scoredPairs.sort((a, b) => b.score - a.score);
+  const usedBlocks = new Set<number>();
+  const usedMp3s = new Set<number>();
+  const matches: Array<{ block: Block; mp3: Mp3Info; score: number }> = [];
+
+  for (const pair of scoredPairs) {
+    if (usedBlocks.has(pair.blockIndex) || usedMp3s.has(pair.mp3Index)) continue;
+    usedBlocks.add(pair.blockIndex);
+    usedMp3s.add(pair.mp3Index);
+    matches.push({ block: pair.block, mp3: pair.mp3, score: pair.score });
+  }
+
+  return matches;
+}
+
+// ── Public API ───────────────────────────────────────────────────────
+
+/**
+ * Resolve audio mapping for a Doc using a ContentContainer.
+ *
+ * Tries explicit `{[audio=filename.mp3]}` annotations first,
+ * then falls back to auto-matching by content similarity.
+ *
+ * Returns a new Doc with `audio.segments` populated and blocks
+ * assigned to the correct `audioSegment` indices.
+ *
+ * @param doc - The source Doc (not mutated).
+ * @param container - ContentContainer with MP3 and timing files.
+ * @returns New Doc with audio segments resolved, or original doc if no matches.
+ */
+export async function resolveAudioMapping(doc: Doc, container: ContentContainer): Promise<Doc> {
+  // Discover MP3 files and their timing data
+  const mp3s = await discoverMp3s(container);
+  if (mp3s.length === 0) return doc;
+
+  // Try annotations first
+  let matches = resolveFromAnnotations(doc.blocks, mp3s);
+
+  // Fall back to auto-matching if no annotations found
+  if (matches.length === 0) {
+    matches = autoMatchBlocks(doc.blocks, mp3s).map((m) => ({
+      block: m.block,
+      mp3: m.mp3,
+    }));
+  }
+
+  if (matches.length === 0) return doc;
+
+  // Build audio segments in document order
+  // Sort matches by the block's position in the flattened tree
+  const flat = flattenForAudio(doc.blocks);
+  const blockOrder = new Map(flat.map((b, i) => [b.id, i]));
+  matches.sort((a, b) => (blockOrder.get(a.block.id) ?? 0) - (blockOrder.get(b.block.id) ?? 0));
+
+  // Build segment list and assign indices
+  const segments: AudioSegment[] = [];
+  const blockToSegment = new Map<string, number>();
+  let startTime = 0;
+
+  for (let i = 0; i < matches.length; i++) {
+    const { block, mp3 } = matches[i];
+    const duration = mp3.timing?.duration ?? 30; // Fallback duration if no timing
+
+    segments.push({
+      src: mp3.path,
+      name: block.title ?? block.id,
+      duration,
+      startTime,
+    });
+
+    blockToSegment.set(block.id, i);
+    startTime += duration;
+  }
+
+  // Deep clone blocks and assign audioSegment indices
+  const newBlocks = assignSegmentIndices(doc.blocks, blockToSegment);
+
+  return {
+    ...doc,
+    blocks: newBlocks,
+    duration: startTime,
+    audio: { segments },
+  };
+}
+
+/**
+ * Recursively clone blocks and assign audioSegment indices.
+ * Blocks not in the map keep their original audioSegment.
+ * Children of a matched block inherit the parent's segment.
+ */
+function assignSegmentIndices(
+  blocks: Block[],
+  blockToSegment: Map<string, number>,
+  inheritedSegment?: number,
+): Block[] {
+  return blocks.map((block) => {
+    const segment = blockToSegment.get(block.id) ?? inheritedSegment ?? block.audioSegment;
+    const newBlock: Block = {
+      ...block,
+      audioSegment: segment,
+    };
+
+    if (block.children) {
+      newBlock.children = assignSegmentIndices(block.children, blockToSegment, segment);
+    }
+
+    return newBlock;
+  });
+}

package/src/doc/index.ts

@@ -6,3 +6,4 @@ export type { MarkdownToDocOptions } from './markdownToDoc.js';
 export { docToMarkdown } from './docToMarkdown.js';
 export { getLayers } from './getLayers.js';
 export type { RenderContext } from './getLayers.js';
+export { resolveAudioMapping, scoreTextSimilarity } from './audioMapping.js';

package/src/doc/markdownToDoc.ts

@@ -22,9 +22,10 @@
  * ```
  */
 
-import type { Doc, Block } from '../schemas/Doc.js';
+import type { Doc, Block, CaptionTrack, CaptionPhrase } from '../schemas/Doc.js';
 import type { MarkdownDocument, MarkdownBlockNode, MarkdownHeading } from '../markdown/types.js';
 import { extractPlainText } from '../markdown/utils.js';
+import { estimateReadingTime } from '../timing/readingTime.js';
 
 // ============================================
 // Options
@@ -141,6 +142,10 @@ export function markdownToDoc(markdownDoc: MarkdownDocument, options?: MarkdownT
     const annotation = heading?.templateAnnotation;
     const template = annotation?.template ?? (heading ? defaultTemplate : undefined);
 
+    // Extract heading text so templates (e.g. sectionHeader) that expect a
+    // `title` property receive it without having to reach into sourceHeading.
+    const title = heading ? extractPlainText(heading) : undefined;
+
     const block: Block = {
       id,
       startTime: 0,
@@ -148,6 +153,7 @@ export function markdownToDoc(markdownDoc: MarkdownDocument, options?: MarkdownT
       audioSegment: 0,
       template,
       ...(heading ? { sourceHeading: heading } : {}),
+      ...(title ? { title } : {}),
     };
 
     // Propagate key-value params from annotation to templateOverrides
@@ -217,14 +223,50 @@ export function markdownToDoc(markdownDoc: MarkdownDocument, options?: MarkdownT
     rootBlocks.push(currentBlock);
   }
 
-  // Calculate basic timing
+  // Calculate reading-time-based durations and generate captions
   const allBlocks = flattenBlocks(rootBlocks);
+  const minDuration = 3; // seconds — minimum for blocks with little/no text
+  const phrases: CaptionPhrase[] = [];
+
+  // First pass: compute duration from body-content reading time
+  for (const block of allBlocks) {
+    const bodyText = getBlockBodyText(block);
+    if (bodyText.length > 0) {
+      const estimate = estimateReadingTime(bodyText);
+      block.duration = Math.max(minDuration, estimate.seconds);
+    } else {
+      block.duration = defaultDuration;
+    }
+  }
+
+  // Second pass: assign start times sequentially and build caption phrases
   let currentTime = 0;
   for (const block of allBlocks) {
     block.startTime = currentTime;
+
+    // Generate caption phrases from the block's body content
+    const bodyText = getBlockBodyText(block);
+    if (bodyText.length > 0) {
+      const sentences = splitIntoSentences(bodyText);
+      if (sentences.length > 0) {
+        const timePerSentence = block.duration / sentences.length;
+        for (let i = 0; i < sentences.length; i++) {
+          phrases.push({
+            text: sentences[i],
+            startTime: currentTime + i * timePerSentence,
+            endTime: currentTime + (i + 1) * timePerSentence,
+            audioSegment: 0,
+          });
+        }
+      }
+    }
+
     currentTime += block.duration;
   }
 
+  const captions: CaptionTrack | undefined =
+    phrases.length > 0 ? { phrases, generatedAt: new Date().toISOString(), version: 1 } : undefined;
+
   return {
     articleId,
     duration: currentTime,
@@ -232,6 +274,7 @@ export function markdownToDoc(markdownDoc: MarkdownDocument, options?: MarkdownT
     audio: {
       segments: [],
     },
+    ...(captions ? { captions } : {}),
     ...(markdownDoc.frontmatter ? { frontmatter: markdownDoc.frontmatter } : {}),
   };
 }
@@ -275,3 +318,94 @@ export function countBlocks(blocks: Block[]): number {
 export function getBlockDepth(block: Block): number {
   return block.sourceHeading?.depth ?? 0;
 }
+
+// ============================================
+// Internal helpers
+// ============================================
+
+/**
+ * Extract the plain text from a block's body contents (excluding heading text).
+ */
+function getBlockBodyText(block: Block): string {
+  if (!block.contents || block.contents.length === 0) return '';
+  // Join with newlines to preserve paragraph/list-item boundaries.
+  // splitIntoPhrases uses these newlines as natural split points.
+  return block.contents
+    .map((node) => extractPlainText(node))
+    .join('\n')
+    .trim();
+}
+
+/** Maximum words per caption phrase. Long sentences get split at this point. */
+const MAX_PHRASE_WORDS = 12;
+
+/**
+ * Split text into caption-sized phrases.
+ *
+ * Splits on:
+ * 1. Newlines (paragraph/list-item boundaries from markdown)
+ * 2. Sentence endings (.!?) followed by whitespace
+ * 3. Long fragments (> MAX_PHRASE_WORDS) at clause boundaries (commas, semicolons, dashes)
+ *
+ * Merges very short fragments (< 15 chars) with the previous phrase.
+ */
+function splitIntoSentences(text: string): string[] {
+  // First split on newlines (each paragraph/list item becomes separate)
+  const lines = text
+    .split(/\n+/)
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+
+  // Then split each line on sentence boundaries
+  const sentenceRe = /(?<=[.!?])\s+/;
+  const fragments: string[] = [];
+  for (const line of lines) {
+    const sentences = line
+      .split(sentenceRe)
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0);
+    fragments.push(...sentences);
+  }
+
+  if (fragments.length === 0) return [];
+
+  // Split long fragments at clause boundaries
+  const split: string[] = [];
+  for (const frag of fragments) {
+    const words = frag.split(/\s+/);
+    if (words.length > MAX_PHRASE_WORDS) {
+      // Try to split at comma, semicolon, or dash near the midpoint
+      const mid = Math.floor(frag.length / 2);
+      const clauseRe = /[,;]\s+|\s+—\s+|\s+-\s+/g;
+      let bestSplit = -1;
+      let bestDist = Infinity;
+      let match;
+      while ((match = clauseRe.exec(frag)) !== null) {
+        const dist = Math.abs(match.index - mid);
+        if (dist < bestDist) {
+          bestDist = dist;
+          bestSplit = match.index + match[0].length;
+        }
+      }
+      if (bestSplit > 0 && bestSplit < frag.length - 5) {
+        split.push(frag.slice(0, bestSplit).trim());
+        split.push(frag.slice(bestSplit).trim());
+      } else {
+        split.push(frag);
+      }
+    } else {
+      split.push(frag);
+    }
+  }
+
+  // Merge very short fragments (< 15 chars) with the previous phrase
+  const merged: string[] = [split[0]];
+  for (let i = 1; i < split.length; i++) {
+    if (split[i].length < 15 && merged.length > 0) {
+      merged[merged.length - 1] += ' ' + split[i];
+    } else {
+      merged.push(split[i]);
+    }
+  }
+  return merged;
+}

package/src/doc/templates/comparisonBar.ts

@@ -11,7 +11,7 @@
 import type { Layer } from '../../schemas/Doc.js';
 import type { ComparisonBarInput, TemplateContext } from '../../schemas/BlockTemplates.js';
 import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme } from '../utils/themeUtils.js';
+import { resolveColorScheme, getThemeFont } from '../utils/themeUtils.js';
 
 export function comparisonBar(input: ComparisonBarInput, context: TemplateContext): Layer[] {
   const { leftLabel, leftValue, rightLabel, rightValue, unit, colorScheme = 'blue' } = input;
@@ -61,7 +61,11 @@ export function comparisonBar(input: ComparisonBarInput, context: TemplateContex
       id: 'left-label',
       content: {
         text: leftLabel,
-        style: { fontSize: labelFontSize, color: theme.colors.textMuted },
+        style: {
+          fontSize: labelFontSize,
+          fontFamily: getThemeFont(context, 'body'),
+          color: theme.colors.textMuted,
+        },
       },
       position: { x: `${barStartX}%`, y: `${topBarY - 8}%` },
     },
@@ -72,7 +76,12 @@ export function comparisonBar(input: ComparisonBarInput, context: TemplateContex
       id: 'left-value',
       content: {
         text: leftDisplay,
-        style: { fontSize: valueFontSize, fontWeight: 'bold', color: colors.text },
+        style: {
+          fontSize: valueFontSize,
+          fontFamily: getThemeFont(context, 'body'),
+          fontWeight: 'bold',
+          color: colors.text,
+        },
       },
       position: { x: `${barStartX + leftBarWidth + 2}%`, y: `${topBarY - 1}%` },
       animation: { type: 'fadeIn', duration: 0.8, delay: 0.3 },
@@ -102,7 +111,11 @@ export function comparisonBar(input: ComparisonBarInput, context: TemplateContex
       id: 'right-label',
       content: {
         text: rightLabel,
-        style: { fontSize: labelFontSize, color: theme.colors.textMuted },
+        style: {
+          fontSize: labelFontSize,
+          fontFamily: getThemeFont(context, 'body'),
+          color: theme.colors.textMuted,
+        },
       },
       position: { x: `${barStartX}%`, y: `${bottomBarY - 8}%` },
     },
@@ -113,7 +126,12 @@ export function comparisonBar(input: ComparisonBarInput, context: TemplateContex
       id: 'right-value',
       content: {
         text: rightDisplay,
-        style: { fontSize: valueFontSize, fontWeight: 'bold', color: colors.accent },
+        style: {
+          fontSize: valueFontSize,
+          fontFamily: getThemeFont(context, 'body'),
+          fontWeight: 'bold',
+          color: colors.accent,
+        },
       },
       position: { x: `${barStartX + rightBarWidth + 2}%`, y: `${bottomBarY - 1}%` },
       animation: { type: 'fadeIn', duration: 0.8, delay: 0.6 },