@cyber-dash-tech/revela 0.19.6 → 0.19.8

package/designs/summit/DESIGN.md

@@ -66,7 +66,7 @@ Accent usage guidance:
 - `--accent-earth` — warm secondary accent, image captions, secondary labels
 - `--accent-olive` — muted structural accent, chart fills, subtle dividers
 - `--accent-stone` — lightest accent, disabled states, faint decorative lines
-- `--accent-sage` — desaturated cool green; use for environmental, sustainability, or positive-signal content (e.g. quote decorations, positive indicators, nature-themed slides)
+- `--accent-sage` — desaturated cool green; use for environmental, sustainability, or positive-signal content (e.g. positive indicators, nature-themed slides)
 - `--accent-danger` — negative indicators, alerts, down-trend markers only
 
 ### Typography
@@ -470,7 +470,7 @@ These rules are mandatory for Summit.
 - **Visual hierarchy is strict:** eyebrow -> heading -> body -> caption.
 - **Content pages need a stable title block.** Except cover, TOC, closing, section divider, and full-bleed hero slides, every normal content slide should include a visible title block from the upper-left safe area. It should contain a compact chapter/section label plus a slide title written as the page's claim or takeaway.
 - **Do not hide the page title inside a card.** Body components may have their own headings, but the slide-level title block should remain separate and easy to scan unless the chosen layout explicitly defines a compact side-title variant.
-- **Text panels are not decorative rule panels.** Do not add a default left border, vertical accent bar, yellow/gold line, or inline rule to `text-panel`. Use typography, spacing, boxes, stats, quotes, or layout-level dividers for emphasis.
+- **Text panels are not decorative rule panels.** Do not add a default left border, vertical accent bar, yellow/gold line, or inline rule to `text-panel`. Use typography, spacing, boxes, stats, italic quote text inside `text-panel`, or layout-level dividers for emphasis.
 - **Titles are Title Case.** Do not set `text-transform:uppercase` on `h1`, `h2`, `h3`, or `h4` titles. Uppercase is reserved for eyebrows, captions, metadata labels, short codes, and date/code-like markers.
 - **Components are transparent by default.** Component primitives should not bring their own paper/background fill. Let `.page`, layout containers, or explicit modifier variants provide background color when needed.
 - **Icon system is Lucide.** For ordinary UI, semantic, status, category, process, and navigation icons, use Lucide (`data-lucide`). Do not hand-write inline SVG for icons. SVG is allowed only for intentional decorative motifs, illustrations, or design-specific artwork. If any `data-lucide` icon is present, load Lucide via CDN and call `lucide.createIcons()` after `SlidePresentation`.
@@ -859,7 +859,7 @@ Structural intent:
 
 Use these components when a page needs repeatable editorial modules inside a larger layout. Components define the block itself, not the page grid around it.
 
-Use this hierarchy: `layout -> box/card -> text-panel + media/chart/table/stat/quote`.
+Use this hierarchy: `layout -> box/card -> text-panel + media/chart/table/stat`.
 
 Component defaults are transparent. Use explicit variants such as `box--paper`, `box--dark`, `text-panel--light`, or `text-panel--dark` only when a component intentionally needs its own reading field. Do not add default fills to component primitives.
 
@@ -867,14 +867,14 @@ Source and citation text should use `.source` or `.source-note`, not `.caption`.
 
 LLM-facing vocabulary:
 - `box` — card/group primitive for one idea, case, evidence item, metric, objection, risk, or action.
-- `text-panel` — language module for title, body text, bullets, and source notes.
+- `text-panel` — language module for title, body text, bullets, italic quote text, formula text, and source notes.
 - `media` — normal image/screenshot/diagram/logo/portrait component; use `hero` for full-bleed covers.
 - `echart-panel` — chart frame with caption/source structure.
 - `data-table` — structured table component for tabular data and source notes.
 - `steps` — process or phase sequence; compatibility implementation may use `.flow-*` classes.
 - `roadmap-horizontal` and `roadmap-vertical` — dated phases, milestones, historical evolution, or future plans; compatibility implementation may use `.tjh` and `.tjv` classes.
 - `hero` — full-bleed cover, section divider, closing, or strong visual statement with overlaid title/subtitle.
-- `stat-card`, `quote`, and `toc` — pattern components for their specific use cases.
+- `stat-card` and `toc` — pattern components for their specific use cases.
 - `page-number` and `brand-watermark` — utility components.
 
 Do not expose `image-title`, `media--cover`, `editorial-*`, `flow-*`, `timeline-journey-*`, or decorative SVG as new component choices. Old classes may remain in CSS as compatibility implementation details.
@@ -884,7 +884,7 @@ Density guidance: normal content slides usually need 2-4 boxes. Evidence slides
 <!-- @component:box:start -->
 #### Box
 
-Card/group primitive for one idea, case, evidence item, metric, objection, risk, or action. Put `text-panel`, `media`, `echart-panel`, `data-table`, `stat-card`, or `quote` inside a box when they support the same idea.
+Card/group primitive for one idea, case, evidence item, metric, objection, risk, or action. Put `text-panel`, `media`, `echart-panel`, `data-table`, or `stat-card` inside a box when they support the same idea.
 
 ```html
 <div class="box">
@@ -913,9 +913,9 @@ Card/group primitive for one idea, case, evidence item, metric, objection, risk,
 
 <!-- renamed from report-text-panel -->
 
-Unified narrative text container. Use inside any layout slot that needs a self-contained reading surface with heading, body copy, and optional footer metadata. The body zone accepts prose, a bullet list, or both — choose based on content, not convention.
+Unified narrative text container. Use inside any layout slot that needs a self-contained reading surface with heading, body copy, italic quote text, formula text, and optional footer metadata. The body zone accepts prose, a bullet list, quote, formula, or a mix — choose based on content, not convention.
 
-`text-panel` is a neutral language container. Do not add a default left border, vertical accent bar, yellow/gold rule, or decorative stripe to it. Summit may use thin rules at the layout level or in `toc`, but not as a default `text-panel` treatment.
+`text-panel` is a neutral language container. Do not add a default left border, vertical accent bar, yellow/gold rule, or decorative stripe to it. Summit may use thin rules at the layout level or in `toc`, but not as a default `text-panel` treatment. Quotes and formulas are text members inside `.text-panel-body`, not standalone components.
 
 ```html
 <!-- variant A: prose only (--dark) -->
@@ -925,6 +925,11 @@ Unified narrative text container. Use inside any layout slot that needs a self-c
     <h2 style="margin-top:16px;font-size:56px;line-height:1;letter-spacing:-0.03em;color:#f7f4ee;max-width:390px;">Narrative Heading</h2>
     <div class="text-panel-body" style="margin-top:20px;">
       <p style="color:rgba(243,238,230,0.84);max-width:390px;">Use one or two compact paragraphs when continuous prose fits the content better than a list.</p>
+      <blockquote class="text-panel-quote">Italic quote text belongs inside the text panel body.</blockquote>
+      <figure class="text-panel-formula" data-latex="\mathrm{ROI}=\frac{\mathrm{Gain}-\mathrm{Cost}}{\mathrm{Cost}}">
+        <span class="katex">Rendered formula</span>
+        <p class="text-panel-formula-caption">Formula text member</p>
+      </figure>
     </div>
   </div>
   <div class="text-panel-footer" style="color:rgba(243,238,230,0.68);">
@@ -1004,6 +1009,38 @@ Unified narrative text container. Use inside any layout slot that needs a self-c
     gap: 12px;
 }
 
+.text-panel-quote {
+    margin: 0;
+    font-style: italic;
+    line-height: 1.46;
+    color: var(--text-secondary);
+}
+
+.text-panel-formula {
+    margin: 0;
+    display: grid;
+    gap: 8px;
+    color: var(--text-primary);
+}
+
+.text-panel-formula-fallback {
+    display: block;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.82em;
+    line-height: 1.35;
+    color: inherit;
+}
+
+.text-panel-formula-caption {
+    margin: 0;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
 /* renamed from .report-panel-footer */
 .text-panel-footer {
     display: flex;
@@ -1014,7 +1051,7 @@ Unified narrative text container. Use inside any layout slot that needs a self-c
 ```
 
 Rules:
-- `.text-panel-body` is the only required structural child. Place `<p>` elements, an `<ul class="editorial-list">`, or both inside it.
+- `.text-panel-body` is the only required structural child. Place `<p>` elements, an `<ul class="editorial-list">`, `<blockquote class="text-panel-quote">`, `<figure class="text-panel-formula">`, or a deliberate mix inside it. Use `.text-panel-formula-fallback` only inside formula figures when LaTeX cannot be rendered.
 - Eyebrow, heading, and footer are all optional — include them only when the content calls for them.
 - Default text panels should remain transparent. Choose `--dark` or `--light` only when the component intentionally needs its own reading field; do not mix variants within a single panel.
 - Pair with a visually dominant neighbor (image, chart) when the layout needs strong contrast against the text zone.
@@ -2107,110 +2144,6 @@ Minimal table-of-contents slide with a quiet title block on the left and a spaci
 - **Left footer stays small.** The footer should read like a restrained production note, not a secondary headline.
 <!-- @component:toc:end -->
 
-<!-- @component:quote:start -->
-#### Quote (.quote-block)
-
-Flat editorial quote block. Wide and short (width > height). Transparent background — place it inside any layout slot. The large decorative quotation mark is CSS-rendered (no icon dependency).
-
-```html
-<div class="quote-block">
-  <div class="quote-mark" aria-hidden="true">“</div>
-  <p class="quote-text">The mountains teach us that progress is measured not in speed, but in the ground gained against resistance.</p>
-  <div class="quote-attribution">
-    <div class="quote-avatar">JD</div><!-- or <img src="avatar.jpg" alt="Jane Doe"> -->
-    <div class="quote-meta">
-      <p class="quote-name">Jane Doe</p>
-      <p class="caption">CEO, Acme Corporation</p>
-    </div>
-  </div>
-</div>
-```
-
-```css
-.quote-block {
-    position: relative;
-    padding: 36px 44px 32px;
-    overflow: hidden;
-}
-
-.quote-mark {
-    position: absolute;
-    top: -18px;
-    left: 28px;
-    font-family: Baskerville, Georgia, serif;
-    font-size: 140px;
-    font-weight: 700;
-    line-height: 1;
-    color: var(--accent-sage);
-    opacity: 0.42;
-    pointer-events: none;
-    user-select: none;
-}
-
-.quote-text {
-    position: relative;
-    font-size: 20px;
-    font-style: italic;
-    line-height: 1.5;
-    color: var(--text-primary);
-    max-width: 860px;
-    padding-top: 48px; /* clears the decorative mark */
-}
-
-.quote-attribution {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    margin-top: 24px;
-}
-
-.quote-avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: var(--bg-page-alt);
-    border: 1px solid var(--line-strong);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: var(--font-display);
-    font-size: var(--font-size-body);
-    font-weight: 700;
-    color: var(--text-muted);
-    flex-shrink: 0;
-    overflow: hidden;
-}
-
-.quote-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.quote-meta {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.quote-name {
-    font-size: var(--font-size-body);
-    font-weight: 600;
-    color: var(--text-primary);
-    line-height: 1.3;
-}
-```
-
-**Tips:**
-
-- **Dark background**: override text colors on the parent slot — `color: var(--bg-page)` for `.quote-text` and `.quote-name`; increase `.quote-mark` opacity to `0.15` (the sage hue reads better against dark at lower opacity).
-- **Avatar with photo**: replace `<div class="quote-avatar">JD</div>` with `<div class="quote-avatar"><img src="path/to/photo.jpg" alt="Jane Doe"></div>`. The `overflow: hidden` + `object-fit: cover` handles any image aspect ratio.
-- **Quote text length**: adjust `font-size` between `18px` (longer quotes, 3+ lines) and `24px` (short punchy quotes, 1 line). Keep `line-height: 1.5`.
-- **Opacity guidance**: on `--bg-page` (warm paper), `.quote-mark` opacity `0.25` works well. On dark `--bg-frame` backgrounds, reduce to `0.15`.
-- **Source-only attribution** (no person): omit `.quote-avatar` entirely and use `.quote-name` for the source text (e.g. a report title or publication name).
-
-<!-- @component:quote:end -->
-
 <!-- @component:brand-watermark:start -->
 #### Brand Watermark
 

package/designs/summit/design.css

@@ -146,6 +146,21 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-text-panel--color { background: linear-gradient(135deg, #5f82c8 0%, var(--accent-primary) 58%, #18a8d8 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.24); }
 .template-text-panel--color .template-text-panel-title { color: white; }
 .template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
+.template-text-panel-quote { margin: 2px 0 0; font-size: 22px; line-height: 1.44; font-style: italic; color: var(--text-secondary); }
+.template-text-panel--color .template-text-panel-quote { color: rgba(255,255,255,0.82); }
+.template-text-panel-formula { margin: 0; width: 100%; display: grid; gap: 8px; color: var(--text-primary); }
+.template-text-panel--color .template-text-panel-formula { color: white; }
+.template-text-panel-formula .katex-display { margin: 0; overflow: visible; }
+.template-text-panel-formula .katex { font-size: 1.08em; color: inherit; }
+.template-text-panel-formula-fallback { display: block; white-space: normal; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82em; line-height: 1.35; color: inherit; }
+.template-text-panel-formula-caption { margin: 0; font-size: 14px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
+.template-text-panel--color .template-text-panel-formula-caption { color: rgba(255,255,255,0.72); }
+.text-panel-quote { margin: 0; font-style: italic; line-height: 1.46; color: var(--text-secondary); }
+.text-panel-formula { margin: 0; display: grid; gap: 8px; color: var(--text-primary); }
+.text-panel-formula .katex-display { margin: 0; overflow: visible; }
+.text-panel-formula .katex { color: inherit; }
+.text-panel-formula-fallback { display: block; white-space: normal; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82em; line-height: 1.35; color: inherit; }
+.text-panel-formula-caption { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
 .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
 .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
 .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }

package/lib/design/designs.ts

@@ -1321,7 +1321,7 @@ function inferComponentNesting(name: string): DesignInventoryComponent["nesting"
     return {
       role: "container",
       acceptsChildren: true,
-      allowedChildren: ["text-panel", "media", "echart-panel", "data-table", "stat-card", "quote", "steps", "roadmap-horizontal", "roadmap-vertical", "toc"],
+      allowedChildren: ["text-panel", "media", "echart-panel", "data-table", "stat-card", "steps", "roadmap-horizontal", "roadmap-vertical", "toc"],
     }
   }
   if (name === "hero") return { role: "fullbleed", acceptsChildren: false }

package/lib/export/html.ts

@@ -0,0 +1,14 @@
+import { dirname, resolve } from "path"
+import { pathToFileURL } from "url"
+
+export function withExportBaseHref(html: string, htmlFilePath: string): string {
+  if (/<base\b/i.test(html)) return html
+
+  const baseHref = pathToFileURL(`${dirname(resolve(htmlFilePath))}/`).href
+  const baseTag = `<base href="${baseHref}">`
+
+  if (/<head[^>]*>/i.test(html)) {
+    return html.replace(/<head([^>]*)>/i, `<head$1>\n${baseTag}`)
+  }
+  return `${baseTag}\n${html}`
+}

package/lib/page-templates/built-in-preview.html

@@ -141,6 +141,7 @@
                 </header><div class="template-body template-grid template-chart-layout"><div class="template-chart-panel template-visual-slot-panel" data-template-slot="visual"><span class="template-visual-slot-label">image / chart slot (optional)</span></div><div class="template-text-panel template-text-panel--color template-chart-takeaway-panel" data-template-slot="takeaways">
                     <h2 class="template-text-panel-title">What to read</h2>
                     <div class="template-chart-takeaway-list"><section class="template-chart-takeaway-item"><h3>Trend</h3><p>Call out the movement or comparison the chart is meant to prove, including the direction and the comparison baseline.</p></section><section class="template-chart-takeaway-item"><h3>Driver</h3><p>Name the likely reason without overclaiming; separate observed movement from the interpretation or hypothesis.</p></section><section class="template-chart-takeaway-item"><h3>Decision use</h3><p>Explain how the chart changes the recommendation, what threshold matters, and what follow-up evidence would reduce risk.</p></section></div>
+                    <figure class="template-text-panel-formula" data-latex="\mathrm{CAGR}=\left(\frac{\mathrm{FY26\ Plan}}{\mathrm{FY25}}\right)^{1/n}-1"><span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mrow><mi mathvariant="normal">C</mi><mi mathvariant="normal">A</mi><mi mathvariant="normal">G</mi><mi mathvariant="normal">R</mi></mrow><mo>=</mo><msup><mrow><mo fence="true">(</mo><mfrac><mrow><mi mathvariant="normal">F</mi><mi mathvariant="normal">Y</mi><mn>26</mn><mtext> </mtext><mi mathvariant="normal">P</mi><mi mathvariant="normal">l</mi><mi mathvariant="normal">a</mi><mi mathvariant="normal">n</mi></mrow><mrow><mi mathvariant="normal">F</mi><mi mathvariant="normal">Y</mi><mn>25</mn></mrow></mfrac><mo fence="true">)</mo></mrow><mrow><mn>1</mn><mi mathvariant="normal">/</mi><mi>n</mi></mrow></msup><mo>−</mo><mn>1</mn></mrow><annotation encoding="application/x-tex">\mathrm{CAGR}=\left(\frac{\mathrm{FY26\ Plan}}{\mathrm{FY25}}\right)^{1/n}-1</annotation></semantics></math></span><p class="template-text-panel-formula-caption">Formula text member</p></figure>
                 </div></div>
                 
             </div>
@@ -153,7 +154,7 @@
                 <header>
                     <p class="template-eyebrow">Template 11 / 17</p>
                     <h1 class="template-title">table</h1>
-                </header><div class="template-body"><div class="template-table-layout"><div class="template-side-panel template-text-panel template-text-panel--clear" data-template-slot="text-card"><h2 class="template-side-panel-title template-text-panel-title">Financial readout</h2><p class="template-side-panel-body template-text-panel-body">Read top-line growth first, then check margin, cash conversion, and retention to see whether the plan is financially durable.</p></div><div class="template-table-region" data-template-slot="table"><div class="template-table-wrap"><table class="template-table"><thead><tr><th>Line item</th><th>FY2025</th><th>FY2026 Plan</th><th>YoY / note</th></tr></thead><tbody><tr><td>Revenue</td><td>$84.2M</td><td>$104.8M</td><td>+24% planned growth</td></tr><tr><td>Gross margin</td><td>68.4%</td><td>71.2%</td><td>+280 bps mix shift</td></tr><tr><td>Operating expense</td><td>$42.7M</td><td>$49.1M</td><td>Scale hiring below revenue growth</td></tr><tr><td>EBITDA</td><td>$14.9M</td><td>$23.6M</td><td>+58% operating leverage</td></tr><tr><td>Free cash flow</td><td>$9.8M</td><td>$16.4M</td><td>Cash conversion improves to 69%</td></tr><tr><td>Net retention</td><td>116%</td><td>121%</td><td>Expansion supports plan quality</td></tr></tbody></table></div></div></div></div>
+                </header><div class="template-body"><div class="template-table-layout"><div class="template-side-panel template-text-panel template-text-panel--clear" data-template-slot="text-card"><h2 class="template-side-panel-title template-text-panel-title">Financial readout</h2><p class="template-side-panel-body template-text-panel-body">Read top-line growth first, then check margin, cash conversion, and retention to see whether the plan is financially durable.</p><blockquote class="template-text-panel-quote">Durability shows up when growth, margin, and cash all point in the same direction.</blockquote></div><div class="template-table-region" data-template-slot="table"><div class="template-table-wrap"><table class="template-table"><thead><tr><th>Line item</th><th>FY2025</th><th>FY2026 Plan</th><th>YoY / note</th></tr></thead><tbody><tr><td>Revenue</td><td>$84.2M</td><td>$104.8M</td><td>+24% planned growth</td></tr><tr><td>Gross margin</td><td>68.4%</td><td>71.2%</td><td>+280 bps mix shift</td></tr><tr><td>Operating expense</td><td>$42.7M</td><td>$49.1M</td><td>Scale hiring below revenue growth</td></tr><tr><td>EBITDA</td><td>$14.9M</td><td>$23.6M</td><td>+58% operating leverage</td></tr><tr><td>Free cash flow</td><td>$9.8M</td><td>$16.4M</td><td>Cash conversion improves to 69%</td></tr><tr><td>Net retention</td><td>116%</td><td>121%</td><td>Expansion supports plan quality</td></tr></tbody></table></div></div></div></div>
                 
             </div>
             <div class="template-page-number">11</div>
@@ -232,7 +233,7 @@
                 <header>
                     <p class="template-eyebrow">Template 14 / 17</p>
                     <h1 class="template-title">timeline</h1>
-                </header><div class="template-body"><div class="template-timeline-layout template-timeline-layout--left"><div class="template-side-panel template-text-panel template-text-panel--color" data-template-slot="insight"><h2 class="template-side-panel-title template-text-panel-title">Reading the journey</h2><p class="template-side-panel-body template-text-panel-body">The timeline should show sequence and decision rhythm, while the side panel explains why the milestones matter.</p></div><div class="template-timeline template-timeline--vertical" data-template-slot="timeline" style="--timeline-count:4"><article class="template-timeline-item">
+                </header><div class="template-body"><div class="template-timeline-layout template-timeline-layout--left"><div class="template-side-panel template-text-panel template-text-panel--color" data-template-slot="insight"><h2 class="template-side-panel-title template-text-panel-title">Reading the journey</h2><p class="template-side-panel-body template-text-panel-body">The timeline should show sequence and decision rhythm, while the side panel explains why the milestones matter.</p><blockquote class="template-text-panel-quote">Sequence is evidence when each step changes what the audience can believe.</blockquote></div><div class="template-timeline template-timeline--vertical" data-template-slot="timeline" style="--timeline-count:4"><article class="template-timeline-item">
                         <span class="template-timeline-dot" aria-hidden="true"></span>
                         <div class="template-timeline-copy">
                             <p class="template-timeline-date">Mar 2019</p>

package/lib/page-templates/render.ts

@@ -1,5 +1,6 @@
 import { existsSync, readFileSync, writeFileSync } from "fs"
 import { isAbsolute, normalize, resolve } from "path"
+import katex from "katex"
 import { getPageTemplateVocabulary } from "./vocabulary"
 
 export type PageTemplateStatus = "metadata-only" | "renderable"
@@ -141,6 +142,9 @@ const templates: PageTemplateDefinition[] = [
     field("chartTitle", "string", "Chart title."),
     field("takeawaysTitle", "string", "Title for the interpretation text panel."),
     field("items", "items[]", "Takeaways.", true),
+    field("quote", "string", "Optional italic quote text member inside the text panel."),
+    field("formulaLatex", "string", "Optional LaTeX formula text member inside the text panel."),
+    field("formulaCaption", "string", "Optional formula caption."),
   ], ["Chart area must be explicit and bounded."], ["Chart panel and takeaways both exist."]),
   define("table", "Table", "Explain a structured table with a left reading card and right table region.", [
     field("title", "string", "Slide title.", true),
@@ -278,6 +282,8 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
     fixture("chart-takeaways", {
       title: "chart-takeaways",
       takeawaysTitle: "What to read",
+      formulaLatex: "\\mathrm{CAGR}=\\left(\\frac{\\mathrm{FY26\\ Plan}}{\\mathrm{FY25}}\\right)^{1/n}-1",
+      formulaCaption: "Formula text member",
       items: [
         { label: "Trend", description: "Call out the movement or comparison the chart is meant to prove, including the direction and the comparison baseline." },
         { label: "Driver", description: "Name the likely reason without overclaiming; separate observed movement from the interpretation or hypothesis." },
@@ -288,6 +294,7 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
       title: "table",
       textTitle: "Financial readout",
       textBody: "Read top-line growth first, then check margin, cash conversion, and retention to see whether the plan is financially durable.",
+      quote: "Durability shows up when growth, margin, and cash all point in the same direction.",
       columns: ["Line item", "FY2025", "FY2026 Plan", "YoY / note"],
       rows: [
         ["Revenue", "$84.2M", "$104.8M", "+24% planned growth"],
@@ -324,6 +331,7 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
       title: "timeline",
       insightTitle: "Reading the journey",
       insightBody: "The timeline should show sequence and decision rhythm, while the side panel explains why the milestones matter.",
+      quote: "Sequence is evidence when each step changes what the audience can believe.",
       milestones: [
         { date: "Mar 2019", label: "Launch", description: "Baseline mapping." },
         { date: "Nov 2019", label: "Audit", description: "Evidence sprint." },
@@ -573,6 +581,15 @@ ${lucentClosingBackgroundCss}
 .template-text-panel--color { background: linear-gradient(135deg, #5f82c8 0%, var(--accent-primary) 58%, #18a8d8 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.24); }
 .template-text-panel--color .template-text-panel-title { color: white; }
 .template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
+.template-text-panel-quote { margin: 2px 0 0; font-size: 22px; line-height: 1.44; font-style: italic; color: var(--text-secondary); }
+.template-text-panel--color .template-text-panel-quote { color: rgba(255,255,255,0.82); }
+.template-text-panel-formula { margin: 0; width: 100%; display: grid; gap: 8px; color: var(--text-primary); }
+.template-text-panel--color .template-text-panel-formula { color: white; }
+.template-text-panel-formula .katex-display { margin: 0; overflow: visible; }
+.template-text-panel-formula .katex { font-size: 1.08em; color: inherit; }
+.template-text-panel-formula-fallback { display: block; white-space: normal; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82em; line-height: 1.35; color: inherit; }
+.template-text-panel-formula-caption { margin: 0; font-size: 14px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
+.template-text-panel--color .template-text-panel-formula-caption { color: rgba(255,255,255,0.72); }
 .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
 .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
 .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
@@ -1045,6 +1062,7 @@ function chartTakeawayPanel(content: Record<string, any>): string {
   return `<div class="template-text-panel template-text-panel--color template-chart-takeaway-panel" data-template-slot="takeaways">
                     <h2 class="template-text-panel-title">${escapeHtml(title)}</h2>
                     <div class="template-chart-takeaway-list">${takeawayItems.map((item) => `<section class="template-chart-takeaway-item"><h3>${escapeHtml(item.label)}</h3><p>${escapeHtml(item.description)}</p></section>`).join("")}</div>
+                    ${renderTextMembers(content)}
                 </div>`
 }
 
@@ -1080,6 +1098,7 @@ function tablePage(content: Record<string, any>): string {
   const panelContent = {
     insightTitle: stringValue(content.textTitle) || "What to read",
     insightBody: stringValue(content.textBody) || "Use this card to explain the comparison, caveat, or decision implication before the audience scans the table.",
+    quote: stringValue(content.quote),
   }
   return `<div class="template-table-layout">${renderTextPanel(panelContent, "text-card", "clear")}<div class="template-table-region" data-template-slot="table">${table({ ...content, insightTitle: "", insightBody: "" })}</div></div>`
 }
@@ -1137,7 +1156,38 @@ function renderTextPanel(content: Record<string, any>, slot = "insight", variant
   const body = stringValue(content.insightBody)
   if (!body) return ""
   const title = stringValue(content.insightTitle) || "Insight"
-  return `<div class="template-side-panel template-text-panel template-text-panel--${variant}" data-template-slot="${escapeAttribute(slot)}"><h2 class="template-side-panel-title template-text-panel-title">${escapeHtml(title)}</h2><p class="template-side-panel-body template-text-panel-body">${escapeHtml(body)}</p></div>`
+  return `<div class="template-side-panel template-text-panel template-text-panel--${variant}" data-template-slot="${escapeAttribute(slot)}"><h2 class="template-side-panel-title template-text-panel-title">${escapeHtml(title)}</h2><p class="template-side-panel-body template-text-panel-body">${escapeHtml(body)}</p>${renderTextMembers(content)}</div>`
+}
+
+function renderTextMembers(content: Record<string, any>): string {
+  const quote = stringValue(content.quote)
+  const formulaLatex = stringValue(content.formulaLatex)
+  const parts: string[] = []
+  if (quote) parts.push(`<blockquote class="template-text-panel-quote">${escapeHtml(quote)}</blockquote>`)
+  if (formulaLatex) parts.push(renderFormulaMember(formulaLatex, stringValue(content.formulaCaption)))
+  return parts.join("")
+}
+
+function renderFormulaMember(latex: string, caption = ""): string {
+  const escapedLatex = escapeAttribute(latex)
+  const rendered = renderLatex(latex)
+  const captionHtml = caption ? `<p class="template-text-panel-formula-caption">${escapeHtml(caption)}</p>` : ""
+  return `<figure class="template-text-panel-formula" data-latex="${escapedLatex}">${rendered}${captionHtml}</figure>`
+}
+
+function renderLatex(latex: string): string {
+  try {
+    return katex.renderToString(latex, {
+      displayMode: true,
+      output: "mathml",
+      strict: "warn",
+      throwOnError: true,
+      trust: false,
+    })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    return `<code class="template-text-panel-formula-fallback" data-formula-error="${escapeAttribute(message)}">${escapeHtml(latex)}</code>`
+  }
 }
 
 function imageCard(input: any): string {
@@ -1189,11 +1239,11 @@ function scaffoldSeed(templateId: string, seed: Record<string, any>): Record<str
   if (templateId === "key-message-evidence") return { body: "Replace with the key message the audience should remember.", items: defaultItems(["Evidence 1", "Evidence 2", "Evidence 3"]), ...base }
   if (templateId === "claim-supporting-visual") return { claim: "Replace with one visual claim.", body: "Use this copy to guide how the visual should be read.", items: defaultItems(["Anchor", "Callout"]), ...base }
   if (templateId === "metric-highlight") return { metrics: [{ value: "67%", label: "Metric", description: "Replace with interpretation." }, { value: "3x", label: "Comparison", description: "Replace with reading note." }, { value: "14d", label: "Window", description: "Replace with time context." }], insightTitle: "Read the signal", insightBody: "Replace with the decision implication, caveat, or next reading step.", ...base }
-  if (templateId === "chart-takeaways") return { takeawaysTitle: "What to read", items: defaultItems(["Trend", "Driver", "Decision use"]), ...base }
-  if (templateId === "table") return { textTitle: "Financial readout", textBody: "Replace with the table reading note, caveat, or decision implication.", columns: ["Line item", "FY2025", "FY2026 Plan", "YoY / note"], rows: [["Revenue", "$84.2M", "$104.8M", "+24% planned growth"], ["Gross margin", "68.4%", "71.2%", "+280 bps mix shift"], ["Operating expense", "$42.7M", "$49.1M", "Scale hiring below revenue growth"], ["EBITDA", "$14.9M", "$23.6M", "+58% operating leverage"], ["Free cash flow", "$9.8M", "$16.4M", "Cash conversion improves"], ["Net retention", "116%", "121%", "Expansion supports plan quality"]], ...base }
+  if (templateId === "chart-takeaways") return { takeawaysTitle: "What to read", items: defaultItems(["Trend", "Driver", "Decision use"]), formulaLatex: "\\mathrm{CAGR}=\\left(\\frac{\\mathrm{FY26\\ Plan}}{\\mathrm{FY25}}\\right)^{1/n}-1", formulaCaption: "Formula text member", ...base }
+  if (templateId === "table") return { textTitle: "Financial readout", textBody: "Replace with the table reading note, caveat, or decision implication.", quote: "Durability shows up when growth, margin, and cash all point in the same direction.", columns: ["Line item", "FY2025", "FY2026 Plan", "YoY / note"], rows: [["Revenue", "$84.2M", "$104.8M", "+24% planned growth"], ["Gross margin", "68.4%", "71.2%", "+280 bps mix shift"], ["Operating expense", "$42.7M", "$49.1M", "Scale hiring below revenue growth"], ["EBITDA", "$14.9M", "$23.6M", "+58% operating leverage"], ["Free cash flow", "$9.8M", "$16.4M", "Cash conversion improves"], ["Net retention", "116%", "121%", "Expansion supports plan quality"]], ...base }
   if (templateId === "table-comparison") return { columns: ["Dimension", "Current", "Target"], rows: [["Replace", "Current state", "Target state"], ["Caveat", "Known limit", "Next proof"]], insightTitle: "Insight", insightBody: "Replace with the table reading note or caveat.", ...base }
   if (templateId === "milestone" || templateId === "timeline-roadmap") return { orientation: "horizontal", milestones: [{ date: "2022", label: "Signal", description: "Name the starting condition." }, { date: "2023", label: "Proof", description: "Show the evidence threshold." }, { date: "2024", label: "Inflection", description: "Use the pivotal moment to frame the shift." }, { date: "2025", label: "Scale", description: "Use a taller card for the highlighted milestone.", highlight: true }, { date: "2026", label: "Decision", description: "State what changes next." }], ...base }
-  if (templateId === "timeline") return { orientation: "vertical", insightTitle: "Reading the journey", insightBody: "Replace with the timeline interpretation or caveat.", milestones: [{ date: "Mar 2019", label: "Launch", description: "Name the starting event." }, { date: "Nov 2019", label: "Audit", description: "Show the evidence threshold." }, { date: "May 2020", label: "Scale", description: "Explain the operating cadence." }, { date: "Feb 2021", label: "Review", description: "State what changes next." }], ...base }
+  if (templateId === "timeline") return { orientation: "vertical", insightTitle: "Reading the journey", insightBody: "Replace with the timeline interpretation or caveat.", quote: "Sequence is evidence when each step changes what the audience can believe.", milestones: [{ date: "Mar 2019", label: "Launch", description: "Name the starting event." }, { date: "Nov 2019", label: "Audit", description: "Show the evidence threshold." }, { date: "May 2020", label: "Scale", description: "Explain the operating cadence." }, { date: "Feb 2021", label: "Review", description: "State what changes next." }], ...base }
   if (templateId === "process-steps") return { steps: defaultItems(["Step 1", "Step 2", "Step 3"]), ...base }
   if (templateId === "recommendation-decision") return { recommendation: "Replace with the recommended decision.", items: defaultItems(["Rationale"]), steps: defaultItems(["Pilot", "Validate", "Ship"]), ...base }
   if (templateId === "risks-tradeoffs") return { items: defaultItems(["Risk", "Tradeoff", "Mitigation"]), ...base }

package/lib/page-templates/vocabulary.ts

@@ -55,8 +55,8 @@ export const PAGE_TEMPLATE_VOCABULARY: PageTemplateVocabulary[] = [
   vocab("key-message-evidence", ["template-key-message-panel", "template-evidence-grid"], ["key-message", "evidence"], ["key-message", "evidence"], ["Key message and evidence regions must remain distinct."]),
   vocab("claim-supporting-visual", ["template-claim-text-panel", "template-visual-slot-panel"], ["claim", "visual"], ["claim", "visual"], ["Visual slot may be replaced by image, chart, table, or diagram container."]),
   vocab("metric-highlight", ["template-stat-grid"], ["metrics"], ["metrics", "insight"], ["Metric values should remain visible outside prose."]),
-  vocab("chart-takeaways", ["template-chart-panel", "template-chart-takeaway-panel", "template-text-panel--color"], ["visual", "takeaways"], ["visual", "takeaways"], ["Chart/image slot and color takeaway text panel must both remain present."]),
-  vocab("table", ["template-table-layout", "template-table-wrap", "template-table", "template-side-panel", "template-text-panel", "template-text-panel--clear"], ["text-card", "table"], ["text-card", "table"], ["Left clear text card explains how to read the structured table.", "Table headers and body should remain structured, not prose-only."]),
+  vocab("chart-takeaways", ["template-chart-panel", "template-chart-takeaway-panel", "template-text-panel--color"], ["visual", "takeaways"], ["visual", "takeaways"], ["Chart/image slot and color takeaway text panel must both remain present.", "Text panels may include quote and formula text members; do not model them as standalone components."]),
+  vocab("table", ["template-table-layout", "template-table-wrap", "template-table", "template-side-panel", "template-text-panel", "template-text-panel--clear"], ["text-card", "table"], ["text-card", "table"], ["Left clear text card explains how to read the structured table.", "Table headers and body should remain structured, not prose-only.", "Text panels may include quote text members; do not model quotes as standalone components."]),
   vocab("table-comparison", ["template-table-wrap", "template-table"], ["table"], ["table", "insight"], ["Table headers and body should remain structured, not prose-only."]),
   vocab("milestone", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy", "template-insight-icon"], ["timeline"], ["timeline"], ["Each milestone item must keep dot and copy as sibling anchors inside one item.", "Milestone cards reuse .template-card; highlight uses the item modifier."]),
   vocab("timeline", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy"], ["timeline"], ["timeline", "insight"], ["Each timeline item must keep dot and copy as sibling anchors inside one item.", "The optional color insight slot explains the sequence without replacing event copy."]),
@@ -107,6 +107,10 @@ const additionalClasses = [
   "template-text-panel--color",
   "template-text-panel-title",
   "template-text-panel-body",
+  "template-text-panel-quote",
+  "template-text-panel-formula",
+  "template-text-panel-formula-caption",
+  "template-text-panel-formula-fallback",
   "template-insight-panel",
   "template-insight-title",
   "template-insight-icon",

package/lib/pdf/export.ts

@@ -31,6 +31,7 @@ import { randomBytes } from "crypto"
 import { launchChrome } from "../browser/chrome"
 import { detectDeckHtml } from "../html-export/deck-detect"
 import { exportSinglePageHtmlPdf } from "../html-export"
+import { withExportBaseHref } from "../export/html"
 
 // ── Constants ────────────────────────────────────────────────────────────────
 
@@ -187,16 +188,6 @@ async function toDataUrlFromRef(ref: string, baseDir: string): Promise<string |
   }
 }
 
-function withExportBaseHref(html: string, htmlFilePath: string): string {
-  const baseHref = pathToFileURL(`${dirname(resolve(htmlFilePath))}/`).href
-  const baseTag = `<base href="${baseHref}">`
-  if (/<base\b/i.test(html)) return html
-  if (/<head[^>]*>/i.test(html)) {
-    return html.replace(/<head([^>]*)>/i, `<head$1>\n${baseTag}`)
-  }
-  return `${baseTag}\n${html}`
-}
-
 async function prepareSlidesForExport(page: any): Promise<void> {
   await page.evaluate((canvasWidth: number, canvasHeight: number) => {
     document.documentElement.style.scrollSnapType = "none"