@cyber-dash-tech/revela 0.19.6 → 0.19.7

package/README.md

@@ -39,7 +39,7 @@ npm_config_cache=/tmp/revela-npm-cache bun run smoke:mcp-pack
 Install Revela through the Codex Git marketplace:
 
 ```bash
-codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.6
+codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.7
 codex plugin add revela@revela
 ```
 
@@ -121,7 +121,7 @@ Revela includes built-in deck designs. Design previews are generated from the bu
 
 To switch designs in Codex, ask:
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), use summit as the design.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), use summit as the design.
 
 In Codex, ask Revela to list or switch designs; the plugin uses the active design when making decks.
 
@@ -129,7 +129,7 @@ In Codex, ask Revela to list or switch designs; the plugin uses the active desig
 
 Domains add topic-specific communication guidance, such as consulting, product, or investor communication. Use them when you want Revela to adapt deck framing to a specific context.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), list available domains.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), list available domains.
 
 In Codex, ask Revela to list or switch domains; the active domain guides deck framing during init, research, and planning.
 
@@ -139,35 +139,35 @@ Use these prompts in Codex from the workspace that contains your source material
 
 1. Choose the narrative domain before authoring so Revela frames the audience, decision, risks, and objections for your context.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), use consulting as the domain.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), use consulting as the domain.
 
 2. Choose the deck design before rendering so generated artifacts use the intended visual language.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), use summit as the design.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), use summit as the design.
 
 3. Create a custom design when you want a different visual direction.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), create a new design named neon-finance with a crisp financial-dashboard style: dark surfaces, precise grids, and bright green accents.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), create a new design named neon-finance with a crisp financial-dashboard style: dark surfaces, precise grids, and bright green accents.
 
 Revela may ask for references or constraints, then creates a workspace draft with `DESIGN.md`, `design.css`, and any local `assets/**`. It generates a preview from the built-in page-template fixture plus that CSS so you can review cover, agenda, timelines, charts, tables, cards, and visual slots before installing. When it is ready, switch to it:
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), use neon-finance as the design.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), use neon-finance as the design.
 
 4. Initialize local material intake. Init scans, extracts, and reviews workspace sources; it does not create a Narrative Vault.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), help me init this workspace from the local materials.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), help me init this workspace from the local materials.
 
 5. Research source-linked deck inputs and save findings.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), research the public evidence and examples needed for this deck.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), research the public evidence and examples needed for this deck.
 
 6. Create or update the deck plan before generating HTML so slide order, chapter structure, source links, unresolved inputs, source limitations, and visual intent are explicit.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), create or update the deck plan before generating HTML.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), create or update the deck plan before generating HTML.
 
 7. Make an HTML deck from the current deck plan.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), make the deck from the current deck plan.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), make the deck from the current deck plan.
 
 8. Review and annotate the generated deck from the localhost website card after make-deck completes.
 
@@ -175,15 +175,15 @@ Revela serves the deck from `http://127.0.0.1:<port>/decks/<file>.html` so you c
 
 9. Export a PDF after deck QA passes.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), export the deck to PDF.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), export the deck to PDF.
 
 10. Export an editable PPTX after deck QA passes.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), export the deck to PPTX.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), export the deck to PPTX.
 
 11. Export per-slide PNG files after deck QA passes.
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md), export the deck to PNG.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md), export the deck to PNG.
 
 ## Annotate A Deck
 

package/README.zh-CN.md

@@ -39,7 +39,7 @@ npm_config_cache=/tmp/revela-npm-cache bun run smoke:mcp-pack
 通过 Codex Git marketplace 安装 Revela：
 
 ```bash
-codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.6
+codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.7
 codex plugin add revela@revela
 ```
 
@@ -121,7 +121,7 @@ Revela 内置多个 deck design。Design preview 由内置 page-template preview
 
 在 Codex 中切换 design，可以这样问：
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，use summit as design.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，use summit as design.
 
 在 Codex 中，可以直接让 Revela 列出或切换 design；生成 deck 时会使用 active design。
 
@@ -129,7 +129,7 @@ Revela 内置多个 deck design。Design preview 由内置 page-template preview
 
 Domain 提供特定场景的沟通 guidance，例如 consulting、product 或 investor communication。需要让 Revela 按具体沟通场景调整 deck framing 时使用。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，列出 available domains。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，列出 available domains。
 
 在 Codex 中，可以直接让 Revela 列出或切换 domain；active domain 会用于 init、research 和 deck planning 阶段的 framing。
 
@@ -139,35 +139,35 @@ Domain 提供特定场景的沟通 guidance，例如 consulting、product 或 in
 
 1. 先选择 domain，让 Revela 按你的沟通场景 framing 受众、决策、风险和潜在质疑。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，use consulting as domain.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，use consulting as domain.
 
 2. 再选择 design，让后续生成的 deck 使用指定视觉风格。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，use summit as design.
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，use summit as design.
 
 3. 如果需要不同的视觉方向，可以创建一个自定义 design。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，创建一个名为 neon-finance 的新 design：金融仪表盘风格，深色界面、精密网格、亮绿色重点色。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，创建一个名为 neon-finance 的新 design：金融仪表盘风格，深色界面、精密网格、亮绿色重点色。
 
 Revela 可能会继续询问参考图、风格约束或禁忌项，然后在 workspace draft 中创建 `DESIGN.md`、`design.css` 和需要的本地 `assets/**`。它会用内置 page-template fixture 加上这份 CSS 生成 preview，让你在 install 前先检查 cover、agenda、timeline、chart、table、card 和 visual slot。创建完成后再切换使用：
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，使用 neon-finance 作为 design。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，使用 neon-finance 作为 design。
 
 4. 初始化本地 material intake。Init 会扫描、抽取并审阅 workspace source；它不会创建 Narrative Vault。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，帮我 init 这个 workspace，先读本地材料。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，帮我 init 这个 workspace，先读本地材料。
 
 5. 针对 deck 所需输入做 research，并保存带来源的 findings。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，research 这个 deck 需要的公开证据、案例和 source。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，research 这个 deck 需要的公开证据、案例和 source。
 
 6. 先创建或更新 deck plan，明确 slide 顺序、章节结构、source links、unresolved inputs、source limitations 和 visual intent，再生成 HTML。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，生成 HTML 前先 create or update deck plan。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，生成 HTML 前先 create or update deck plan。
 
 7. 基于当前 deck plan 生成 HTML deck。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，基于当前 deck plan make deck。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，基于当前 deck plan make deck。
 
 8. make-deck 完成后，从 localhost website card 打开生成的 deck，并在 Codex Browser 中做 annotation 和定向修改。
 
@@ -175,15 +175,15 @@ Revela 会通过 `http://127.0.0.1:<port>/decks/<file>.html` 服务 deck，你
 
 9. QA 通过后导出 PDF。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，把 deck export 成 PDF。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，把 deck export 成 PDF。
 
 10. QA 通过后导出可编辑 PPTX。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，把 deck export 成 PPTX。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，把 deck export 成 PPTX。
 
 11. QA 通过后导出每页 PNG。
 
-> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.6/skills/revela/SKILL.md)，把 deck export 成 PNG。
+> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.7/skills/revela/SKILL.md)，把 deck export 成 PNG。
 
 ## Annotate Deck
 

package/designs/lucent/DESIGN.md

@@ -210,7 +210,7 @@ Lucent agenda component using `.toc-wrap`, `.toc-title`, `.toc-list`, and option
 <!-- @component:toc:end -->
 
 <!-- @component:text-panel:start -->
-Focused text module for setup, reading guidance, and narrative explanation. Use inside report layouts or boxes.
+Focused text module for setup, reading guidance, narrative explanation, italic quote text, and formula text. Use inside report layouts or boxes. Place quotes as `<blockquote class="text-panel-quote">` and formulas as `<figure class="text-panel-formula" data-latex="...">`; use `.text-panel-formula-fallback` only when LaTeX cannot be rendered. Do not model quote or formula as standalone components.
 <!-- @component:text-panel:end -->
 
 <!-- @component:box:start -->

package/designs/lucent/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/designs/lucent-dark/DESIGN.md

@@ -210,7 +210,7 @@ Lucent agenda component using `.toc-wrap`, `.toc-title`, `.toc-list`, and option
 <!-- @component:toc:end -->
 
 <!-- @component:text-panel:start -->
-Focused text module for setup, reading guidance, and narrative explanation. Use inside report layouts or boxes.
+Focused text module for setup, reading guidance, narrative explanation, italic quote text, and formula text. Use inside report layouts or boxes. Place quotes as `<blockquote class="text-panel-quote">` and formulas as `<figure class="text-panel-formula" data-latex="...">`; use `.text-panel-formula-fallback` only when LaTeX cannot be rendered. Do not model quote or formula as standalone components.
 <!-- @component:text-panel:end -->
 
 <!-- @component:box:start -->

package/designs/lucent-dark/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/designs/monet/DESIGN.md

@@ -898,7 +898,7 @@ Use these components when a page needs repeatable editorial modules inside a lar
 <!-- @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">
@@ -927,7 +927,7 @@ 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.
 
 ```html
 <!-- variant A: prose only (--dark) -->
@@ -937,6 +937,11 @@ Unified narrative text container. Use inside any layout slot that needs a self-c
     <h2 style="margin-top:16px;font-size:60px;line-height:0.92;letter-spacing:-0.03em;text-transform:uppercase;color:#f0f4f7;max-width:360px;">Narrative heading</h2>
     <div class="text-panel-body" style="margin-top:20px;">
       <p style="font-size:17px;line-height:1.58;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);">
@@ -1011,6 +1016,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;
@@ -1021,7 +1058,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.
 - Choose `--dark` or `--light` to match the slide's tone. 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.
@@ -2293,130 +2330,6 @@ Catalogue-style table-of-contents panel for chaptered presentations. Use a compo
 - **Page references stay understated.** Right-align page numbers and keep them visually secondary to the chapter title.
 <!-- @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">
-    <!-- initials variant -->
-    <div class="quote-avatar" data-initials="JD" style="--qa-rot:-11deg;"></div>
-    <!-- photo variant: <div class="quote-avatar" style="--qa-rot:8deg;"><img src="avatar.jpg" alt="Jane Doe"></div> -->
-    <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 {
-    position: relative;
-    width: 52px;
-    height: 52px;
-    flex-shrink: 0;
-}
-
-.quote-avatar::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: #fff;
-    border: 1px solid var(--line-strong);
-}
-
-.quote-avatar::after {
-    content: attr(data-initials);
-    position: absolute;
-    inset: 0;
-    background: var(--accent-earth);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: var(--font-display);
-    font-size: 14px;
-    font-weight: 700;
-    color: #fff;
-    transform: rotate(var(--qa-rot, -8deg));
-}
-
-.quote-avatar img {
-    position: absolute;
-    inset: 0;
-    width: 52px;
-    height: 52px;
-    object-fit: cover;
-    transform: rotate(var(--qa-rot, -8deg));
-    z-index: 1;
-}
-
-.quote-meta {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.quote-name {
-    font-size: 14px;
-    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 initials variant**: use `data-initials="JD"` and `style="--qa-rot:-11deg;"` on `.quote-avatar` (no child elements). The `::after` pseudo-element reads the initials and renders them on a rotated `--accent-earth` square over a white base square.
-- **Avatar photo variant**: add `<img>` inside `.quote-avatar` with `style="--qa-rot:8deg;"` on the parent. The image is fixed at `52×52px`, rotated by `--qa-rot`, and clips to the container via `overflow:hidden`. The white `::before` base square shows as corner peeking behind the rotated photo.
-- **Quote text length**: adjust `font-size` between `17px` (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/monet/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/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)
 

package/designs/starter/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; }