@cyber-dash-tech/revela 0.19.4 → 0.19.7

package/designs/starter/DESIGN.md

@@ -240,7 +240,7 @@ new SlidePresentation();
 - **Images for photographic references.** Use image treatment rules rather than fake SVG when the reference is photographic, UI, webpage, or product imagery.
 - **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.
 - **Preview must be real.** A design preview should show actual layout/component behavior, not empty placeholder boxes only.
 
 ### Common Mistakes
@@ -447,18 +447,18 @@ Structural intent:
 
 ### Components
 
-Components are reusable primitives. Use this hierarchy: `layout -> box/card -> text-panel + media/chart/table/stat/quote`.
+Components are reusable primitives. Use this hierarchy: `layout -> box/card -> text-panel + media/chart/table/stat`.
 
 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` instead 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 `.timeline-journey-*` 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 `svg-motif` as new component choices. Old classes may remain in CSS as compatibility implementation details.
@@ -470,7 +470,7 @@ Density guidance: normal content slides usually need 2-4 boxes. Evidence slides
 <!-- @component:box:start -->
 #### Box (.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">
@@ -494,15 +494,20 @@ Card/group primitive for one idea, case, evidence item, metric, objection, risk,
 <!-- @component:text-panel:start -->
 #### Text Panel (.text-panel)
 
-Language module for headings, body copy, lists, and footer/source metadata. It can sit inside `box` or directly in a layout slot.
+Language module for headings, body copy, lists, italic quote text, formula text, and footer/source metadata. It can sit inside `box` or directly in a layout slot.
 
-`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. If a slide needs emphasis, use a `box`, `stat-card`, `quote`, `toc`, or a layout-level divider instead.
+`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. If a slide needs emphasis, use a `box`, `stat-card`, `toc`, or a layout-level divider instead. Quotes and formulas are text members inside `.text-panel-body`, not standalone components.
 
 ```html
 <div class="text-panel text-panel--light">
   <div class="text-panel-body">
     <p class="eyebrow">Context</p>
     <h2>Panel heading</h2>
+    <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>
     <ul class="editorial-list"><li><strong>Signal.</strong> Supporting copy.</li></ul>
   </div>
   <div class="text-panel-footer"><span class="source">Source: dataset</span><span class="caption">01</span></div>
@@ -515,6 +520,10 @@ Language module for headings, body copy, lists, and footer/source metadata. It c
 .text-panel--light { background: var(--bg-page-alt); color: var(--text-primary); }
 .text-panel--dark { background: #1f242b; color: #f8fafc; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --line: rgba(248,250,252,0.16); }
 .text-panel-body { display: flex; flex-direction: column; gap: 14px; }
+.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); }
 .text-panel-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
 ```
 <!-- @component:text-panel:end -->
@@ -711,23 +720,6 @@ Table of contents or section index.
 ```
 <!-- @component:toc:end -->
 
-<!-- @component:quote:start -->
-#### Quote (.quote-block)
-
-Large quotation or summary statement.
-
-```html
-<div class="quote-block"><p class="quote-mark">“</p><blockquote>Statement text goes here.</blockquote><p class="quote-source">Source</p></div>
-```
-
-```css
-.quote-block { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 24px; max-width: 980px; }
-.quote-mark { font-size: 96px; line-height: 0.7; color: var(--accent-primary); }
-.quote-block blockquote { font-family: var(--font-display); font-size: 54px; line-height: 1.06; letter-spacing: -0.04em; color: var(--text-primary); }
-.quote-source { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
-```
-<!-- @component:quote:end -->
-
 <!-- @component:brand-watermark:start -->
 #### Brand Watermark (.brand-watermark)
 
@@ -910,6 +902,7 @@ Starter skins Revela built-in page templates as a neutral authoring system. The
 
 - `cover`, `section-divider`, `closing`: use clear title-first structural pages.
 - `agenda`, `executive-summary`, `problem-context`, `key-message-evidence`, `claim-supporting-visual`: use plain narrative and card-grid surfaces.
+- Agenda typography follows design tokens: title and numbers use `--font-display`; item labels and footer use `--font-body`.
 - `metric-highlight`, `chart-takeaways`, `table`, `table-comparison`: use direct data panels with minimal decoration.
 - Text panels use explicit variants: `template-text-panel--clear` is transparent with no border or background, `template-text-panel--plain` is theme-neutral, and `template-text-panel--color` is the multicolor emphasis treatment used by chart and timeline reading panels.
 - `milestone`: dots remain milestone anchors inside each horizontal milestone item; do not position detached decorative markers.

package/designs/starter/design.css

@@ -99,24 +99,24 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
     linear-gradient(135deg, #07111f, #101a2b 62%, #243a73);
 }
 
-.template-slide[data-design="lucent"][data-template="cover"] .slide-canvas {
+.template-slide[data-design="starter"][data-template="cover"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(7,17,31,0.42) 52%, rgba(7,17,31,0.24)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="lucent"][data-template="agenda"] .slide-canvas {
+.template-slide[data-design="starter"][data-template="agenda"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(7,17,31,0.58) 52%, rgba(7,17,31,0.32)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="lucent"][data-template="section-divider"] .slide-canvas {
+.template-slide[data-design="starter"][data-template="section-divider"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(16,26,43,0.62) 58%, rgba(36,58,115,0.36)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
 .template-slide[data-template="closing"] .slide-canvas { background: linear-gradient(135deg, #07111f, #315eea 58%, #18a8d8); }
 
-.template-slide[data-design="lucent"][data-template="closing"] .slide-canvas {
+.template-slide[data-design="starter"][data-template="closing"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(49,94,234,0.42) 58%, rgba(24,168,216,0.24)),
     url("./assets/closing-background.jpg") center center / cover no-repeat;
@@ -125,12 +125,12 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-agenda-inner { width: 100%; display: grid; grid-template-columns: 37% minmax(0, 1fr); align-items: stretch; gap: 76px; }
 .template-agenda-header { display: flex; flex-direction: column; min-height: 0; padding: 10px 0 0; }
 .template-agenda-header .template-eyebrow { color: rgba(255,255,255,0.64); }
-.template-agenda-header .template-title { max-width: 440px; font-size: 54px; line-height: 1.16; letter-spacing: 0; text-transform: uppercase; color: white; padding-bottom: 8px; overflow: visible; }
-.template-agenda-footer { margin: auto 0 0; font-size: 13px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.84); }
+.template-agenda-header .template-title { max-width: 440px; font-family: var(--font-display); font-size: 54px; line-height: 1.16; letter-spacing: 0; text-transform: uppercase; color: white; padding-bottom: 8px; overflow: visible; }
+.template-agenda-footer { margin: auto 0 0; font-family: var(--font-body); font-size: 13px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.84); }
 .template-agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 40px; height: 100%; }
 .template-agenda-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 44px; align-items: center; min-height: 58px; overflow: visible; }
 .template-agenda-item span { font-family: var(--font-display); font-size: 44px; line-height: 1; letter-spacing: 0.03em; color: var(--accent-cyan, #18a8d8); font-weight: 800; font-variant-numeric: tabular-nums; }
-.template-agenda-item strong { font-size: 18px; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.92); }
+.template-agenda-item strong { font-family: var(--font-body); font-size: 18px; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.92); }
 .template-metric-layout { height: 100%; min-height: 0; display: grid; gap: 26px; }
 .template-metric-layout--insight-top { grid-template-rows: auto minmax(0, 1fr); }
 .template-metric-layout--insight-bottom { grid-template-rows: minmax(0, 1fr) auto; }
@@ -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/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
 
@@ -2670,6 +2603,7 @@ Summit skins Revela built-in page templates with editorial hierarchy, broad whit
 
 - `cover`, `section-divider`, `closing`: use strong editorial title pages.
 - `agenda`, `executive-summary`, `problem-context`, `key-message-evidence`, `claim-supporting-visual`: use borderless narrative groupings with clear hierarchy.
+- Agenda typography follows design tokens: title and numbers use `--font-display`; item labels and footer use `--font-body`.
 - `metric-highlight`, `chart-takeaways`, `table`, `table-comparison`: use evidence-first data regions without outer container borders.
 - Text panels use explicit variants: `template-text-panel--clear` is transparent with no border or background, `template-text-panel--plain` is theme-neutral, and `template-text-panel--color` is the multicolor emphasis treatment used by chart and timeline reading panels.
 - `milestone`: dots remain milestone anchors inside each horizontal milestone item; do not position detached decorative markers.

package/designs/summit/design.css

@@ -99,24 +99,24 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
     linear-gradient(135deg, #07111f, #101a2b 62%, #243a73);
 }
 
-.template-slide[data-design="lucent"][data-template="cover"] .slide-canvas {
+.template-slide[data-design="summit"][data-template="cover"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(7,17,31,0.42) 52%, rgba(7,17,31,0.24)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="lucent"][data-template="agenda"] .slide-canvas {
+.template-slide[data-design="summit"][data-template="agenda"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(7,17,31,0.58) 52%, rgba(7,17,31,0.32)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="lucent"][data-template="section-divider"] .slide-canvas {
+.template-slide[data-design="summit"][data-template="section-divider"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(16,26,43,0.62) 58%, rgba(36,58,115,0.36)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
 .template-slide[data-template="closing"] .slide-canvas { background: linear-gradient(135deg, #07111f, #315eea 58%, #18a8d8); }
 
-.template-slide[data-design="lucent"][data-template="closing"] .slide-canvas {
+.template-slide[data-design="summit"][data-template="closing"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(49,94,234,0.42) 58%, rgba(24,168,216,0.24)),
     url("./assets/closing-background.jpg") center center / cover no-repeat;
@@ -125,12 +125,12 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-agenda-inner { width: 100%; display: grid; grid-template-columns: 37% minmax(0, 1fr); align-items: stretch; gap: 76px; }
 .template-agenda-header { display: flex; flex-direction: column; min-height: 0; padding: 10px 0 0; }
 .template-agenda-header .template-eyebrow { color: rgba(255,255,255,0.64); }
-.template-agenda-header .template-title { max-width: 440px; font-size: 54px; line-height: 1.16; letter-spacing: 0; text-transform: uppercase; color: white; padding-bottom: 8px; overflow: visible; }
-.template-agenda-footer { margin: auto 0 0; font-size: 13px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.84); }
+.template-agenda-header .template-title { max-width: 440px; font-family: var(--font-display); font-size: 54px; line-height: 1.16; letter-spacing: 0; text-transform: uppercase; color: white; padding-bottom: 8px; overflow: visible; }
+.template-agenda-footer { margin: auto 0 0; font-family: var(--font-body); font-size: 13px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.84); }
 .template-agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 40px; height: 100%; }
 .template-agenda-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 44px; align-items: center; min-height: 58px; overflow: visible; }
 .template-agenda-item span { font-family: var(--font-display); font-size: 44px; line-height: 1; letter-spacing: 0.03em; color: var(--accent-cyan, #18a8d8); font-weight: 800; font-variant-numeric: tabular-nums; }
-.template-agenda-item strong { font-size: 18px; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.92); }
+.template-agenda-item strong { font-family: var(--font-body); font-size: 18px; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.92); }
 .template-metric-layout { height: 100%; min-height: 0; display: grid; gap: 26px; }
 .template-metric-layout--insight-top { grid-template-rows: auto minmax(0, 1fr); }
 .template-metric-layout--insight-bottom { grid-template-rows: minmax(0, 1fr) auto; }
@@ -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>