npm - @cyber-dash-tech/revela - Versions diffs - 0.1.11 → 0.1.12 - Mend

@cyber-dash-tech/revela 0.1.11 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md +180 -91
package/README.zh-CN.md +185 -128
package/designs/summit/DESIGN.md +122 -55
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -2,32 +2,44 @@
 **English** | [中文](README.zh-CN.md)
-[![npm version](https://img.shields.io/npm/v/@cyber-dash-tech/revela)](https://www.npmjs.com/package/@cyber-dash-tech/revela) [![license](https://img.shields.io/npm/l/@cyber-dash-tech/revela)](LICENSE) [![tests](https://img.shields.io/badge/tests-73%20passing-brightgreen)](tests/) [![OpenCode plugin](https://img.shields.io/badge/OpenCode-plugin-blue)](https://opencode.ai)  [![Bun](https://img.shields.io/badge/Bun-%E2%89%A51.0-orange)](https://bun.sh)
+[![npm version](https://img.shields.io/npm/v/@cyber-dash-tech/revela)](https://www.npmjs.com/package/@cyber-dash-tech/revela) [![license](https://img.shields.io/npm/l/@cyber-dash-tech/revela)](LICENSE) [![tests](https://img.shields.io/badge/tests-110%20passing-brightgreen)](tests/) [![OpenCode plugin](https://img.shields.io/badge/OpenCode-plugin-blue)](https://opencode.ai) [![Bun](https://img.shields.io/badge/Bun-%E2%89%A51.0-orange)](https://bun.sh)
 <p align="center">
   <img src="assets/img/logo.png" alt="Revela" width="800" />
 </p>
-An [OpenCode](https://opencode.ai) plugin that turns your AI into a presentation assistant.
-Tell Revela what's on your mind — it'll finish the research and analysis, and deliver a complete slide deck in a couple of minutes.
+Revela is an [OpenCode](https://opencode.ai) plugin that turns your current agent into an HTML slide deck generator.
+Enable it for a session, give the agent a presentation task, and it can research, structure, write, and QA a complete deck in `slides/*.html`.
+**[Live Demo — The AI Power Shift](https://cyber-dash-tech.github.io/revela/assets/html/ai-power-shift.html)** · A 5-slide investment brief generated with Revela.
+---
+## What Revela Is
-**[Live Demo — The AI Power Shift](https://cyber-dash-tech.github.io/revela/assets/html/ai-power-shift.html)** · A 5-slide investment brief generated entirely by Revela.
+Revela is a mode, not a separate chat agent.
+- `/revela enable` injects a presentation-specific system prompt into your current agent
+- the prompt is built from 3 layers: core skill, active domain, active design
+- the agent can scan workspace files, delegate web research, generate HTML slides, and run layout QA automatically
+- design and domain switching happen locally and rebuild the active prompt immediately
 ---
 ## Requirements
-- [OpenCode](https://opencode.ai) — Bun runtime (`bun >= 1.0.0`)
-- [Google Chrome](https://www.google.com/chrome/) or Chromium — required for the automatic Layout QA feature
-- Git — required for source install
+- [OpenCode](https://opencode.ai)
+- Bun runtime (`bun >= 1.0.0`)
+- [Google Chrome](https://www.google.com/chrome/) or Chromium for layout QA and PDF export
+- Git for source install
 ---
 ## Install
-Add `@cyber-dash-tech/revela` to the `plugin` array in your `opencode.json`:
+### Standard install
+Add `@cyber-dash-tech/revela` to the `plugin` array in `opencode.json`:
 ```json
 {
@@ -36,15 +48,24 @@ Add `@cyber-dash-tech/revela` to the `plugin` array in your `opencode.json`:
 }
 ```
-Restart OpenCode — the plugin is downloaded automatically via Bun.
+Restart OpenCode. The plugin is installed automatically via Bun.
-To install globally (available in all projects), add the same `plugin` entry to `~/.config/opencode/opencode.json`.
+To install globally, add the same `plugin` entry to `~/.config/opencode/opencode.json`.
-### From source
+### Local wrapper install
+Use this when:
+- Bun plugin install is blocked or unreliable
+- you are on a mainland China network
+- you want to run Revela from a local checkout
+From source:
 ```bash
 git clone https://github.com/cyber-dash-tech/revela
-cd revela && npm install
+cd revela
+npm install
 ```
 Create `~/.config/opencode/plugins/revela.js`:
@@ -53,24 +74,43 @@ Create `~/.config/opencode/plugins/revela.js`:
 export { default } from "/absolute/path/to/revela/index.ts";
 ```
-> **Note (China mainland):** OpenCode's plugin installer uses Bun's package manager, which does not respect npm registry mirror configuration. Use the source install method above, or manually install the package with npm and create a local wrapper — see [中文说明](README.zh-CN.md#安装).
+If you use the local wrapper route, make sure `~/.config/opencode/opencode.json` does not also contain a `plugin` entry for `@cyber-dash-tech/revela`, otherwise OpenCode will still try Bun-based installation.
+### China mainland note
+OpenCode's npm plugin installer uses Bun and may ignore npm mirror configuration. If direct installation fails, use the local wrapper method above or install the package with npm under `~/.config/opencode/` and create a local wrapper file.
 ---
 ## Quick Start
-Enable OpenCode's web search (recommended):
+Start OpenCode:
 ```bash
-OPENCODE_ENABLE_EXA=1 opencode
+opencode
 ```
-Enable Revela in your OpenCode session — turns the primary agent into a slide design expert:
-```
+Enable Revela in the current session:
+```text
 /revela enable
 ```
-To turn it off and restore the primary agent to normal:
+Then give the agent a slide task, for example:
+```text
+Create a 6-slide HTML deck on humanoid robotics supply chains. Use the summit design, cite the main market drivers, and save the result to slides/humanoid-robotics.html.
+```
+Export the resulting HTML deck to PDF if needed:
+```text
+/revela pdf slides/humanoid-robotics.html
 ```
+Disable Revela and return the current agent to normal mode:
+```text
 /revela disable
 ```
@@ -78,86 +118,113 @@ To turn it off and restore the primary agent to normal:
 ## Commands
-```
-/revela                          show status (enabled/disabled, active design/domain) + help
-/revela enable                   activate slide generation mode for this session
-/revela disable                  deactivate
+```text
+/revela                          show status and help
+/revela enable                   enable presentation mode for this session
+/revela disable                  disable presentation mode
 /revela designs                  list installed designs
-/revela designs <name>           switch to a design (rebuilds system prompt immediately)
-/revela designs-add <source>     install a design from a URL, local path, or github:user/repo
+/revela designs <name>           activate a design
+/revela designs-add <source>     install a design from URL, local path, or github:user/repo
+/revela designs-rm <name>        remove an installed design
 /revela domains                  list installed domains
-/revela domains <name>           switch to a domain
-/revela domains-add <source>     install a domain from a URL, local path, or github:user/repo
+/revela domains <name>           activate a domain
+/revela domains-add <source>     install a domain from URL, local path, or github:user/repo
+/revela domains-rm <name>        remove an installed domain
+/revela pdf <file>               export an HTML deck to PDF in the same directory
 ```
-All commands execute locally — zero LLM cost, instant feedback.
+All `/revela` commands execute locally with zero LLM cost.
 ---
-## Built-in Designs
+## How It Works
-Two designs are bundled. Switch with `/revela designs <name>`.
+When Revela is enabled, it appends a generated prompt to the current agent's system prompt.
-| Name | Description | Preview |
-|---|---|---|
-| `aurora` | Dark executive style — deep navy/slate, sharp typography, ECharts data visualization | ![default](assets/img/slide-example-aurora.jpg) |
-| `summit` | Editorial outdoor annual-report theme | ![summit](assets/img/slide-example-summit.jpg) |
+That prompt is built from 3 layers:
+1. `skill/SKILL.md` — the core slide-generation workflow
+2. active domain — domain-specific report structure and terminology
+3. active design — visual language, layouts, components, and chart rules
+The current design and domain are persisted in `~/.config/revela/config.json`. The session-level enabled/disabled state is not persisted.
 ---
-## Built-in Domains
+## Research And File Ingestion
-Domains add field-specific report frameworks and terminology to the AI's context.
+When Revela is enabled, the agent can use:
-| Name | Description |
-|---|---|
-| `general` | No domain specialization (default) |
-| `deeptech-investment` | VC/investment analysis — market sizing, technology readiness, investment thesis |
-| `consulting` | Strategic consulting — Go/No-Go reports, strategy design, belief-change frameworks |
+- `revela-workspace-scan` to discover PDFs, Office files, CSVs, Markdown, and text files in the workspace
+- the `revela-research` subagent to fetch targeted web sources and save structured findings into `researches/<topic>/`
+- `revela-research-save` to write one findings file per research axis
+Supported file types for `@` reference and automatic text extraction:
+- `.pdf`
+- `.docx`
+- `.pptx`
+- `.xlsx`
-Switch with `/revela domains <name>`.
+Revela transparently extracts text from these binary files before the main agent reasons over them.
 ---
-## Workspace Scan & Research
+## Layout QA And Compliance
-When Revela is enabled, the AI can:
+Every time the agent writes `slides/*.html`, Revela automatically runs a Puppeteer-based QA pass at `1920x1080`.
+The QA report is fed back immediately so the agent can fix layout or compliance problems before moving on.
-- **Scan your workspace** (`revela-workspace-scan` tool) — automatically discovers PDF, Word, Excel, PowerPoint, CSV, and Markdown files in your project directory. Reference them with `@filename` to include their content in your slides.
-- **Run parallel research** via the `revela-research` subagent — fetches targeted URLs and saves structured findings to `researches/<topic>/`. The primary agent then synthesises these findings into slides.
+Current QA dimensions:
-Supported file types for `@`-reference and automatic text extraction: `.pdf`, `.docx`, `.pptx`, `.xlsx`.
+| Dimension | What it checks |
+|---|---|
+| `overflow` | Elements extending outside the slide canvas |
+| `balance` | Sparse slides, weak fill, centroid drift, and bottom-gap issues |
+| `symmetry` | Side-by-side column imbalance in height or density |
+| `rhythm` | Irregular vertical spacing between stacked siblings |
+| `compliance` | Unknown design classes and novel CSS rules outside the active design vocabulary |
+Slides must declare `slide-qa="true"` or `slide-qa="false"`.
+- use `slide-qa="true"` for content-heavy slides that should undergo full layout QA
+- use `slide-qa="false"` for structural slides such as cover, TOC, quote, summary, or closing pages
+Compliance is part of the generation loop, not a soft suggestion. If the agent introduces classes or CSS rules that are not defined by the active design, QA flags them and the file should be corrected.
+You can also run QA manually with the `revela-qa` tool.
 ---
-## Layout QA
+## Built-in Designs
-Every time the AI writes a slide file, Revela automatically runs a Puppeteer-based layout check at 1920×1080. If issues are detected, the report is fed back to the AI immediately so it self-corrects — no manual intervention needed.
+Switch designs with `/revela designs <name>`.
-Checks performed on every slide:
+| Name | Description | Preview |
+|---|---|---|
+| `aurora` | Dark executive style with structured information density and ECharts-ready data visualization patterns | ![aurora](assets/img/slide-example-aurora.jpg) |
+| `summit` | Editorial annual-report style for image-rich narrative slides and restrained business storytelling | ![summit](assets/img/slide-example-summit.jpg) |
-| Check | Description |
-|---|---|
-| **Fill ratio** | Content must occupy enough of the canvas |
-| **Bottom whitespace** | Flags large empty gaps at the slide bottom |
-| **Overflow** | Elements that extend outside the canvas |
-| **Asymmetry** | Side-by-side columns with large height differences |
-| **Density imbalance** | Columns where CSS `align-items: stretch` hides content imbalance |
-| **Sparse** | Slides with too few visible elements |
+---
-Structural slides (cover, TOC, quote, summary, closing) set `slide-qa="false"` and are automatically exempted from fill/spacing checks. Content-heavy slides set `slide-qa="true"` to opt in.
+## Built-in Domains
-You can also invoke QA manually: ask the AI to "run QA on slides/my-deck.html" or use the `revela-qa` tool directly.
+Switch domains with `/revela domains <name>`.
-Requires Google Chrome or Chromium to be installed on your system.
+| Name | Description |
+|---|---|
+| `general` | No domain specialization |
+| `deeptech-investment` | VC and investment analysis: market sizing, technical readiness, moat, and investment thesis |
+| `consulting` | Strategic consulting: go/no-go decisions, strategy design, and belief-change reporting |
 ---
 ## Custom Designs
-A design is a folder with a `DESIGN.md` file. Frontmatter declares metadata:
+A custom design is a folder containing `DESIGN.md` with frontmatter metadata:
 ```yaml
 ---
@@ -168,49 +235,60 @@ version: 1.0.0
 ---
 ```
-The body provides visual style instructions injected into the AI's system prompt.
+The body defines the visual system used by the agent.
-### On-demand marker system (recommended for larger designs)
+### Marker system
-Use HTML comment markers to split the design into sections. Only `global` and `layouts` are injected every turn; everything else is fetched on demand by the AI — keeping per-turn token cost low.
+For larger designs, use the current marker format:
 ```html
-<!-- @section:global:start -->
-Color palette, typography, base CSS variables, JavaScript SlidePresentation class, HTML document structure...
-<!-- @section:global:end -->
+<!-- @design:foundation:start -->
+Colors, typography, CSS variables, HTML shell, base JS...
+<!-- @design:foundation:end -->
+<!-- @design:rules:start -->
+Composition rules, do/don't guidance, design-specific constraints...
+<!-- @design:rules:end -->
+<!-- @design:layouts:start -->
+<!-- @layout:cover:start qa=false -->
+Layout details...
+<!-- @layout:cover:end -->
-<!-- @section:layouts:start -->
-Layout primitives used on every slide (two-column, card grid, etc.)...
-<!-- @section:layouts:end -->
+<!-- @layout:two-col:start qa=true -->
+Layout details...
+<!-- @layout:two-col:end -->
+<!-- @design:layouts:end -->
-<!-- @section:components:start -->
+<!-- @design:components:start -->
 <!-- @component:card:start -->
-Card component HTML + CSS...
+Component HTML + CSS...
 <!-- @component:card:end -->
 <!-- @component:stat-card:start -->
-Stat card HTML + CSS...
+Component HTML + CSS...
 <!-- @component:stat-card:end -->
-<!-- @section:components:end -->
+<!-- @design:components:end -->
-<!-- @section:charts:start -->
-ECharts / data visualization specifications...
-<!-- @section:charts:end -->
-<!-- @section:guide:start -->
-Composition rules, common recipes, do/don't examples...
-<!-- @section:guide:end -->
+<!-- @design:chart-rules:start -->
+Chart guidance...
+<!-- @design:chart-rules:end -->
 ```
-**Injected every turn:** `global`, `layouts`, and a compact Component Index table.
+Prompt injection behavior:
+- always injected: `@design:foundation`, `@design:rules`, layout index, component index
+- fetched on demand: individual `@layout:*`, individual `@component:*`, `@design:chart-rules`
-**Fetched on demand** by the AI: individual components, `charts`, `guide`.
+If a design has no markers, Revela falls back to injecting the full `DESIGN.md` body.
-Without markers, the entire `DESIGN.md` body is injected every turn (backward-compatible).
+### Compliance note for design authors
+Revela extracts the allowed CSS class vocabulary from your design and uses it during QA compliance checks. If the agent invents a class or defines a CSS rule outside that vocabulary, QA reports it.
 ### Install a custom design
-```
+```text
 /revela designs-add github:your-org/your-design
 /revela designs-add https://example.com/my-design.zip
 /revela designs-add ./path/to/local/design-folder
@@ -220,20 +298,31 @@ Without markers, the entire `DESIGN.md` body is injected every turn (backward-co
 ## Custom Domains
-A domain adds domain-specific report frameworks, terminology, and structural guidance.
+A custom domain is a folder containing `INDUSTRY.md` with frontmatter metadata similar to a design.
-Domain folder structure: `<name>/INDUSTRY.md` with the same frontmatter format as designs.
-```
+```text
 /revela domains-add github:your-org/your-domain
 ```
+`INDUSTRY.md` is a legacy filename kept for compatibility.
+---
+## PDF Export
+Export a generated HTML deck to PDF:
+```text
+/revela pdf slides/my-deck.html
+```
+Revela renders each slide through Chrome/Chromium and assembles the final PDF in the same directory.
 ---
 ## Logging
-Revela uses structured JSON logging via [tslog](https://tslog.js.org/).
-Logs are written to `stderr`. To enable verbose debug output:
+Revela uses structured logging via [tslog](https://tslog.js.org/). To enable verbose debug output:
 ```bash
 REVELA_DEBUG=1 opencode

package/README.zh-CN.md CHANGED Viewed

@@ -2,35 +2,44 @@
 [English](README.md) | **中文**
-[![npm version](https://img.shields.io/npm/v/@cyber-dash-tech/revela)](https://www.npmjs.com/package/@cyber-dash-tech/revela)  [![license](https://img.shields.io/npm/l/@cyber-dash-tech/revela)](LICENSE) [![tests](https://img.shields.io/badge/tests-73%20passing-brightgreen)](tests/) [![OpenCode plugin](https://img.shields.io/badge/OpenCode-plugin-blue)](https://opencode.ai) [![Bun](https://img.shields.io/badge/Bun-%E2%89%A51.0-orange)](https://bun.sh)
+[![npm version](https://img.shields.io/npm/v/@cyber-dash-tech/revela)](https://www.npmjs.com/package/@cyber-dash-tech/revela) [![license](https://img.shields.io/npm/l/@cyber-dash-tech/revela)](LICENSE) [![tests](https://img.shields.io/badge/tests-110%20passing-brightgreen)](tests/) [![OpenCode plugin](https://img.shields.io/badge/OpenCode-plugin-blue)](https://opencode.ai) [![Bun](https://img.shields.io/badge/Bun-%E2%89%A51.0-orange)](https://bun.sh)
 <p align="center">
   <img src="assets/img/logo.png" alt="Revela" width="800" />
 </p>
-Revela 是一款 [OpenCode](https://opencode.ai) 插件，让 AI 成为你的PPT助手。
-用对话方式描述你的需求，Revela 会自动调研、分析、洞察，最后呈现你心中的PPT。
+Revela 是一个 [OpenCode](https://opencode.ai) 插件，可以把你当前使用的 agent 变成 HTML 幻灯片生成器。
+在当前会话中启用它之后，agent 可以完成调研、结构设计、HTML 写作和自动 QA，并把结果输出到 `slides/*.html`。
+**[在线演示 — AI 权力转移](https://cyber-dash-tech.github.io/revela/assets/html/ai-power-shift.html)** · 一份使用 Revela 生成的 5 页投资简报。
+---
+## Revela 是什么
+Revela 是一种工作模式，不是一个独立聊天 agent。
-**[在线演示 — AI 权力转移](https://cyber-dash-tech.github.io/revela/assets/html/ai-power-shift.html)** · 一份由 Revela 全程生成的 5 页投资简报。
+- `/revela enable` 会把演示文稿生成专用的 system prompt 注入到当前 agent
+- prompt 由 3 层组成：核心 skill、当前 domain、当前 design
+- agent 可以扫描工作区文件、委托网页调研、生成 HTML 幻灯片，并自动执行布局 QA
+- design 和 domain 的切换都在本地完成，并会立即重建 active prompt
 ---
 ## 环境要求
-- [OpenCode](https://opencode.ai)（Bun 运行时，`bun >= 1.0.0`）
-- [Google Chrome](https://www.google.com/chrome/) 或 Chromium —— 自动布局 QA 功能必须
-- Git —— 源码安装时需要
+- [OpenCode](https://opencode.ai)
+- Bun 运行时（`bun >= 1.0.0`）
+- [Google Chrome](https://www.google.com/chrome/) 或 Chromium，用于布局 QA 和 PDF 导出
+- Git，用于源码安装
 ---
 ## 安装
-### 方式一：通过 opencode.json（推荐）
+### 标准安装
-在项目目录的 `opencode.json` 中添加 `plugin` 字段：
+在 `opencode.json` 的 `plugin` 数组中加入 `@cyber-dash-tech/revela`：
 ```json
 {
@@ -39,69 +48,69 @@ Revela 是一款 [OpenCode](https://opencode.ai) 插件，让 AI 成为你的PPT
 }
 ```
-重启 OpenCode，插件会通过 Bun 自动下载安装。
+重启 OpenCode 后，插件会通过 Bun 自动安装。
-如需全局安装（所有项目可用），在 `~/.config/opencode/opencode.json` 中添加同样的 `plugin` 配置。
+如果想全局安装，可以把同样的 `plugin` 配置写到 `~/.config/opencode/opencode.json`。
-### 方式二：国内网络安装
+### 本地 wrapper 安装
-OpenCode 的插件安装器使用 Bun 的包管理器，**不支持 npm 镜像配置**（已知问题）。
-如果直接安装失败，推荐以下方式：
+以下情况建议直接使用本地 wrapper：
-**步骤 1**：用 npm 安装（支持国内镜像）
+- Bun 插件安装不稳定或被网络环境阻塞
+- 你在中国大陆网络环境下使用 OpenCode
+- 你希望直接运行本地源码仓库
-```bash
-# 确认 npm 镜像已配置
-npm config get registry   # 应为 https://registry.npmmirror.com/
+源码安装方式：
-# 全局安装到 opencode 配置目录
-cd ~/.config/opencode
-npm install @cyber-dash-tech/revela
+```bash
+git clone https://github.com/cyber-dash-tech/revela
+cd revela
+npm install
 ```
-**步骤 2**：创建本地插件入口文件
+创建 `~/.config/opencode/plugins/revela.js`：
-```bash
-cat > ~/.config/opencode/plugins/revela.js << 'EOF'
-export { default } from "/Users/<你的用户名>/.config/opencode/node_modules/@cyber-dash-tech/revela/index.ts";
-EOF
+```js
+export { default } from "/absolute/path/to/revela/index.ts";
 ```
-**步骤 3**：确保 `~/.config/opencode/opencode.json` 中**没有** `plugin` 字段
+如果走本地 wrapper 方案，确保 `~/.config/opencode/opencode.json` 里不要同时保留 `@cyber-dash-tech/revela` 的 `plugin` 配置，否则 OpenCode 启动时仍会尝试用 Bun 安装。
+### 中国大陆网络说明
+OpenCode 的 npm 插件安装依赖 Bun，而 Bun 可能不会遵循 npm mirror 配置。如果直接安装失败，优先使用上面的本地 wrapper 方案，或者先把包安装到 `~/.config/opencode/`，再手动创建本地插件入口文件。
-（有 `plugin` 字段时，OpenCode 启动仍会尝试用 Bun 安装，绕过本地文件）
+---
-重启 OpenCode，`ctrl+p` 中看到 `/revela` 即安装成功。
+## 快速开始
-### 方式三：源码安装
+启动 OpenCode：
 ```bash
-git clone https://github.com/cyber-dash-tech/revela
-cd revela && npm install
+opencode
 ```
-创建 `~/.config/opencode/plugins/revela.js`：
+在当前会话中启用 Revela：
-```js
-export { default } from "/path/to/revela/index.ts";
+```text
+/revela enable
 ```
----
-## 快速开始
+然后直接给 agent 一个幻灯片任务，例如：
-启用opencode搜索功能（推荐）
-```Bash
-OPENCODE_ENABLE_EXA=1 opencode
+```text
+Create a 6-slide HTML deck on humanoid robotics supply chains. Use the summit design, cite the main market drivers, and save the result to slides/humanoid-robotics.html.
 ```
-在 opencode 中启动 Revela（默认关闭），将 primary agent 变为演讲稿设计专家
-```
-/revela enable
-```
+如果需要，把生成好的 HTML 导出为 PDF：
-关闭当前会话中 Revela，primary agent 恢复正常
+```text
+/revela pdf slides/humanoid-robotics.html
 ```
+关闭 Revela，让当前 agent 回到普通模式：
+```text
 /revela disable
 ```
@@ -109,139 +118,177 @@ OPENCODE_ENABLE_EXA=1 opencode
 ## 命令
-```
-/revela                          显示当前状态（启用/禁用、当前设计/领域）+ 帮助
-/revela enable                   为当前会话启用幻灯片生成模式
-/revela disable                  禁用
+```text
+/revela                          显示当前状态与帮助
+/revela enable                   为当前会话启用演示文稿模式
+/revela disable                  关闭演示文稿模式
+/revela designs                  列出已安装 design
+/revela designs <name>           激活某个 design
+/revela designs-add <source>     从 URL、本地路径或 github:user/repo 安装 design
+/revela designs-rm <name>        删除已安装 design
-/revela designs                  列出已安装的设计
-/revela designs <name>           切换设计（立即重建系统提示）
-/revela designs-add <source>     从 URL、本地路径或 github:user/repo 安装设计
+/revela domains                  列出已安装 domain
+/revela domains <name>           激活某个 domain
+/revela domains-add <source>     从 URL、本地路径或 github:user/repo 安装 domain
+/revela domains-rm <name>        删除已安装 domain
-/revela domains                  列出已安装的领域
-/revela domains <name>           切换领域
-/revela domains-add <source>     从 URL、本地路径或 github:user/repo 安装领域
+/revela pdf <file>               将 HTML deck 导出为同目录 PDF
 ```
-所有命令本地执行，零 LLM 消耗，即时响应。
+所有 `/revela` 命令都在本地执行，不消耗 LLM token。
 ---
-## 内置设计模版
+## 工作原理
-插件内置三套设计，用 `/revela designs <name>` 切换。
+启用 Revela 后，它会把一份动态生成的 prompt 追加到当前 agent 的 system prompt 中。
-| 名称 | 说明 | 预览 |
-|---|---|---|
-| `aurora` | 颜色主题 — 极光, 高饱和度, ECharts 数据可视化 | ![default](assets/img/slide-example-aurora.jpg) |
-| `summit` | 极简主义 - 户外，适合有丰富插图，Echart 数据可视化 | ![summit](assets/img/slide-example-summit.jpg) |
+这份 prompt 由 3 层组成：
+1. `skill/SKILL.md`：核心幻灯片生成流程
+2. 当前 active domain：行业结构与术语
+3. 当前 active design：视觉语言、layout、component 和图表规则
+当前 design 和 domain 会持久化到 `~/.config/revela/config.json`。是否启用 Revela 则是会话级状态，不会跨会话持久化。
 ---
-## 内置行业SOP
+## 调研与文件摄取
-领域为 AI 的上下文提供特定行业的报告框架和术语。
+启用 Revela 后，agent 可以使用：
-| 名称 | 说明 |
-|---|---|
-| `general` | 无领域专化（默认） |
-| `deeptech-investment` | VC/投资分析 —— 市场规模、技术成熟度、投资逻辑 |
-| `consulting` | 战略咨询 —— Go/No-Go 报告、战略设计、信念转变框架 |
+- `revela-workspace-scan` 扫描工作区中的 PDF、Office 文件、CSV、Markdown 和文本文件
+- `revela-research` 子代理抓取目标网页，并把结构化结果保存到 `researches/<topic>/`
+- `revela-research-save` 按 research axis 写入单个 findings 文件
+支持 `@` 引用和自动文本提取的文件类型：
+- `.pdf`
+- `.docx`
+- `.pptx`
+- `.xlsx`
-用 `/revela domains <name>` 切换。
+Revela 会在主 agent 处理这些文件前，先透明地完成文本提取。
 ---
-## 工作区扫描与研究
+## 布局 QA 与合规检查
+每次 agent 写入 `slides/*.html` 时，Revela 都会自动在 `1920x1080` 分辨率下运行一轮基于 Puppeteer 的 QA。
+报告会立刻反馈给 agent，用于继续修正布局或 design compliance 问题。
+当前 QA 维度如下：
+| 维度 | 检查内容 |
+|---|---|
+| `overflow` | 元素是否超出 slide canvas |
+| `balance` | 是否过稀、重心偏移、底部留白过大等 |
+| `symmetry` | 并列列之间的高度或密度是否明显失衡 |
+| `rhythm` | 垂直堆叠元素之间的间距节奏是否不稳定 |
+| `compliance` | 是否使用了 active design 之外的 class 或新增 CSS 规则 |
+每张 slide 都必须显式声明 `slide-qa="true"` 或 `slide-qa="false"`。
-启用 Revela 后，AI 可以：
+- `slide-qa="true"`：适用于内容型页面，执行完整 QA
+- `slide-qa="false"`：适用于封面、目录、引用、总结、结尾等结构型页面
-- **扫描工作区**（`revela-workspace-scan` 工具）—— 自动发现项目目录中的 PDF、Word、Excel、PowerPoint、CSV 和 Markdown 文件。用 `@文件名` 引用，其内容会直接纳入幻灯片制作上下文。
-- **并行研究**（通过 `revela-research` 子代理）—— 抓取目标 URL，将结构化研究结果保存到 `researches/<topic>/`，主代理随后将这些结果整合到幻灯片中。
+`compliance` 不是软建议，而是生成流程的一部分。如果 agent 发明了 design 之外的 class 或 CSS rule，QA 会直接指出并要求修正。
-支持 `@` 引用和自动文本提取的文件格式：`.pdf`、`.docx`、`.pptx`、`.xlsx`。
+也可以手动调用 `revela-qa` 工具执行 QA。
 ---
-## 排版 QA
+## 内置 Designs
-每次 AI 写入幻灯片文件时，Revela 会自动在 1920×1080 分辨率下运行基于 Puppeteer 的排版质检。发现问题后立即将报告反馈给 AI，AI 自行修正，无需人工干预。（**功能持续更新中 ...**）
+使用 `/revela designs <name>` 切换。
-每张幻灯片的检查项：
+| 名称 | 说明 | 预览 |
+|---|---|---|
+| `aurora` | 深色 executive 风格，信息密度更高，适合结构化商业表达和 ECharts 数据可视化 | ![aurora](assets/img/slide-example-aurora.jpg) |
+| `summit` | 年报式 editorial 风格，适合图像丰富、叙事感更强的商业表达 | ![summit](assets/img/slide-example-summit.jpg) |
-| 检查项 | 说明 |
-|---|---|
-| **填充率** | 内容必须占据足够的画布面积 |
-| **底部留白** | 标记幻灯片底部的大片空白 |
-| **溢出** | 超出画布边界的元素 |
-| **不对称** | 并排列高度差异过大 |
-| **密度失衡** | CSS `align-items: stretch` 列布局中隐藏的内容不平衡 |
-| **稀疏** | 可见元素过少的幻灯片 |
+---
-结构性幻灯片（封面、目录、引言、总结、结语）设置 `slide-qa="false"`，自动豁免填充/间距检查。内容型幻灯片设置 `slide-qa="true"` 启用 QA 检查。
+## 内置 Domains
-也可以手动触发：让 AI "对 slides/my-deck.html 运行 QA"，或直接使用 `revela-qa` 工具。
+使用 `/revela domains <name>` 切换。
-需要系统中已安装 Google Chrome 或 Chromium。
+| 名称 | 说明 |
+|---|---|
+| `general` | 不做领域专化 |
+| `deeptech-investment` | VC / 投资分析：市场规模、技术成熟度、护城河与投资逻辑 |
+| `consulting` | 战略咨询：go/no-go 判断、战略设计与 belief-change 报告 |
 ---
-## 自定义模版
+## 自定义 Designs
-设计是包含 `DESIGN.md` 文件的文件夹，frontmatter 声明元数据：
+自定义 design 是一个包含 `DESIGN.md` 的文件夹，文件头使用 frontmatter：
 ```yaml
 ---
 name: my-design
 description: 在 /revela designs 中显示的简短说明
-author: 你的名字
+author: you
 version: 1.0.0
 ---
 ```
-文件体提供视觉风格指令，会被注入 AI 的系统提示。
+文件正文定义 agent 可使用的视觉系统。
-### 按需加载标记系统（大型设计推荐）
+### Marker 体系
-用 HTML 注释标记将设计分为多个区块。每轮只注入 `global` 和 `layouts`，其余内容由 AI 按需拉取，大幅降低每轮 token 消耗。
+对于较大的 design，建议使用当前 marker 格式：
 ```html
-<!-- @section:global:start -->
-色彩、字体、基础 CSS 变量、SlidePresentation JS 类、HTML 文档结构...
-<!-- @section:global:end -->
+<!-- @design:foundation:start -->
+色彩、字体、CSS 变量、HTML 外壳、基础 JS...
+<!-- @design:foundation:end -->
+<!-- @design:rules:start -->
+构图规则、正反案例、design 特定约束...
+<!-- @design:rules:end -->
-<!-- @section:layouts:start -->
-每张幻灯片通用的布局原语（双列、卡片网格等）...
-<!-- @section:layouts:end -->
+<!-- @design:layouts:start -->
+<!-- @layout:cover:start qa=false -->
+Layout 详情...
+<!-- @layout:cover:end -->
-<!-- @section:components:start -->
+<!-- @layout:two-col:start qa=true -->
+Layout 详情...
+<!-- @layout:two-col:end -->
+<!-- @design:layouts:end -->
+<!-- @design:components:start -->
 <!-- @component:card:start -->
-卡片组件的 HTML + CSS...
+Component HTML + CSS...
 <!-- @component:card:end -->
 <!-- @component:stat-card:start -->
-数据卡片的 HTML + CSS...
+Component HTML + CSS...
 <!-- @component:stat-card:end -->
-<!-- @section:components:end -->
-<!-- @section:charts:start -->
-ECharts / 数据可视化规范...
-<!-- @section:charts:end -->
+<!-- @design:components:end -->
-<!-- @section:guide:start -->
-排版规则、常用模式、正反案例...
-<!-- @section:guide:end -->
+<!-- @design:chart-rules:start -->
+图表规则...
+<!-- @design:chart-rules:end -->
 ```
-**每轮注入**：`global`、`layouts` 和一份紧凑的组件索引表。
+Prompt 注入行为如下：
-**按需获取**：单个组件详情、`charts`、`guide`。
+- 常驻注入：`@design:foundation`、`@design:rules`、layout index、component index
+- 按需获取：单个 `@layout:*`、单个 `@component:*`、`@design:chart-rules`
-没有标记时，整个 `DESIGN.md` 内容每轮全量注入（向后兼容）。
+如果 design 没有 marker，Revela 会退回到整份 `DESIGN.md` 全量注入。
-### 自定义模版安装
+### 给 design 作者的 compliance 说明
-```
+Revela 会从 design 中提取允许使用的 CSS class vocabulary，并在 QA 的 compliance 维度里做校验。如果 agent 发明了新的 class 或 CSS rule，QA 会直接报出。
+### 安装自定义 Design
+```text
 /revela designs-add github:your-org/your-design
 /revela designs-add https://example.com/my-design.zip
 /revela designs-add ./path/to/local/design-folder
@@ -249,23 +296,33 @@ ECharts / 数据可视化规范...
 ---
-## 自定义行业SOP
-领域为 AI 增加特定行业的报告框架、术语和结构化指导。
+## 自定义 Domains
-文件夹结构：`<name>/INDUSTRY.md`，frontmatter 格式与设计相同。
+自定义 domain 是一个包含 `INDUSTRY.md` 的文件夹，frontmatter 结构与 design 类似。
-```
+```text
 /revela domains-add github:your-org/your-domain
 ```
+`INDUSTRY.md` 是为了兼容历史版本而保留的文件名。
+---
+## PDF 导出
+把生成好的 HTML deck 导出为 PDF：
+```text
+/revela pdf slides/my-deck.html
+```
+Revela 会通过 Chrome / Chromium 渲染每一页 slide，并在同目录生成最终 PDF。
 ---
 ## 日志
-Revela 通过 [tslog](https://tslog.js.org/) 输出结构化 JSON 日志，写入 `stderr`。
-开启详细调试输出：
+Revela 使用 [tslog](https://tslog.js.org/) 输出结构化日志。开启详细调试输出：
 ```bash
 REVELA_DEBUG=1 opencode
@@ -275,4 +332,4 @@ REVELA_DEBUG=1 opencode
 ## 许可证
-MIT —— 详见 [LICENSE](LICENSE)。
+MIT，详见 [LICENSE](LICENSE).

package/designs/summit/DESIGN.md CHANGED Viewed

@@ -31,6 +31,8 @@ Apply this visual style when generating all slides in this session.
     --accent-danger: #b94a3c;
     --accent-sage: #9eb0a6;
     --shadow-soft: rgba(0, 0, 0, 0.18);
+    --font-display: 'IBM Plex Sans Condensed', 'Inter', ui-sans-serif, sans-serif;
+    --font-body: 'Inter', ui-sans-serif, sans-serif;
 }
 ```
@@ -150,7 +152,7 @@ html {
 body {
     background: var(--bg-frame);
     color: var(--text-primary);
-    font-family: 'Inter', ui-sans-serif, sans-serif;
+    font-family: var(--font-body);
     -webkit-font-smoothing: antialiased;
     height: 100%;
 }
@@ -202,7 +204,7 @@ body {
 }
 h1, h2, h3, h4 {
-    font-family: 'IBM Plex Sans Condensed', 'Inter', ui-sans-serif, sans-serif;
+    font-family: var(--font-display);
     font-weight: 600;
     letter-spacing: -0.02em;
     color: var(--text-primary);
@@ -572,6 +574,8 @@ Every slot accepts 1 or more components. The LLM decides what each slot contains
 Equal N-column layout. Use when 3 or more parallel items of roughly equal visual weight should appear side by side — proof blocks, highlights, feature comparisons, stat groups, or any multi-column editorial spread.
+A short section header is optional but recommended. In Summit, that header should stay lean: eyebrow plus title only, with no intro paragraph competing with the columns below.
 Structural intent:
 - each slot: 1fr column — any component(s)
 - column count: determined by the number of direct child divs in the grid container; `auto-fit` distributes space equally
@@ -582,6 +586,11 @@ Every slot accepts 1 or more components. Add or remove child divs to control col
 <section class="slide" slide-qa="true" data-index="N">
   <div class="slide-canvas">
     <div class="page">
+      <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:520px;">
+        <p class="eyebrow">Section Label</p>
+        <h2 style="font-size:52px;line-height:0.94;text-transform:uppercase;">Short framing title for the parallel columns</h2>
+      </div>
       <div class="highlight-cols-grid" style="flex:1;min-height:0;">
         <!-- [slot: 1] — 1+ components; suggested: editorial-image-top, editorial-text-top, echart-panel -->
@@ -619,8 +628,10 @@ Every slot accepts 1 or more components. Add or remove child divs to control col
 ##### Tips
 - **Grid container needs `flex:1;min-height:0` inline** when inside `.page` (which is flex-column). The class handles column sizing; the inline style handles row stretch.
+- **Header stays lean.** If you add a section header above the grid, use only `eyebrow + title`. Do not add an intro paragraph; the columns themselves should carry the explanation.
 - **Column count = number of direct child divs.** `repeat(auto-fit, minmax(0, 1fr))` distributes available width equally across however many children exist. Add a 4th or 5th div to get 4 or 5 columns — no CSS change needed.
 - **Equal columns — no hierarchy.** All slots carry the same visual weight. Adjust content density to suit the slide purpose; do not artificially inflate one column to create false hierarchy.
+- **When using 4-5 columns, compress the header.** Keep the title to one or two short lines so the grid retains most of the slide height.
 - **Do not set fixed heights on editorial components.** Let components fill height via flexbox stretch.
 <!-- @layout:highlight-cols:end -->
@@ -860,6 +871,79 @@ Rules:
 - **`editorial-list` inside `--dark`.** Add `style="--accent-earth:rgba(247,244,238,0.72)"` on the `<ul>` wrapper so the bullet squares read against the dark background.
 <!-- @component:text-panel:end -->
+<!-- @component:stat-card:start -->
+#### Stat Card
+Lightweight editorial metric module for a single highlighted number. Use when one data point should carry the visual emphasis while the metric name and guiding sentence stay quiet and compact.
+This is **not** a dashboard card. It has no border, no background fill, no shadow, and no corner treatment. Hierarchy comes from number scale, spacing, and restrained typography.
+```html
+<!-- variant A: default vertical composition -->
+<div class="stat-card">
+  <p class="caption" style="color:var(--text-muted);">Performance signal</p>
+  <div class="stat-card-value" style="color: var(--accent-gold);">27%</div>
+  <div class="text-panel-body" style="gap:10px;max-width:330px;">
+    <h3 style="font-size:24px;line-height:1.04;text-transform:uppercase;">EBIT Margin</h3>
+    <p style="font-size:14px;line-height:1.56;color:var(--text-secondary);">Expanded for the third consecutive quarter as premium mix offset freight pressure and held pricing discipline through softer volume.</p>
+  </div>
+</div>
+<!-- variant B: horizontal composition -->
+<div class="stat-card stat-card--horizontal">
+  <div style="display:flex;flex-direction:column;gap:12px;flex:0 0 220px;min-width:0;">
+    <p class="caption" style="color:var(--text-muted);">Operational baseline</p>
+    <div class="stat-card-value" style="color: var(--accent-olive);">4.8x</div>
+  </div>
+  <div class="text-panel-body" style="gap:10px;max-width:330px;">
+    <h3 style="font-size:24px;line-height:1.04;text-transform:uppercase;">Inventory Turnover</h3>
+    <p style="font-size:14px;line-height:1.56;color:var(--text-secondary);">Higher cycle efficiency reduced working-capital drag without adding new capacity, leaving more headroom for seasonal demand swings.</p>
+  </div>
+</div>
+```
+```css
+.stat-card {
+    height: 100%;
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 16px;
+    padding-top: 8px;
+}
+.stat-card--horizontal {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 30px;
+}
+.stat-card-value {
+    font-family: var(--font-display);
+    font-size: 88px;
+    line-height: 0.9;
+    letter-spacing: -0.04em;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: inherit;
+}
+```
+Rules:
+- Use this component only for a **single** highlighted metric. If the slide needs several peer metrics, switch to a multi-item layout instead of stacking several stat cards together without hierarchy.
+- The number color is chosen semantically from the Summit palette via inline `style="color: var(--accent-xxx)"`; do not hardcode a fixed color in the component CSS.
+- Do not add background fills, borders, shadows, or rounded corners. The module must remain typographic and editorial.
+- Use `h3` for the metric name and a single compact `p` for the guiding sentence. Keep the copy to one or two sentences.
+- Default `stat-card` is vertical. Add `stat-card--horizontal` only when the number and explanation need a side-by-side read.
+##### Tips
+- **Horizontal width discipline.** In the horizontal variant, keep the number column narrow (`~220px`) so the prose still reads as the explanatory side, not as a second visual block.
+- **Long numbers.** For values such as `12,450` or `83.6%`, reduce the inline font size slightly before tightening letter-spacing further.
+- **Semantic color choice.** `--accent-gold` works for primary emphasis, `--accent-olive` for stable or positive operational metrics, `--accent-danger` for negative indicators, and `--accent-sage` for environmental or resilience-oriented signals.
+- **Do not over-explain.** If the description starts to become paragraph-length, switch to `text-panel` or pair the stat card with a narrative component in the neighboring slot.
+<!-- @component:stat-card:end -->
 <!-- @component:editorial-image-top:start -->
 #### Editorial Image Top
@@ -1115,7 +1199,7 @@ Rules:
 - The left copy zone holds a kicker row followed by a `text-panel-body`. The body accepts prose `<p>`, an `<ul class="editorial-list">`, or both — choose based on content.
 - The right visual slot is open: use a plain `media-frame img`, an `echart-container`, or a full `image-title` component. Choose based on content — there is no default.
 - When using `editorial-list` inside `text-panel-body`, add `<strong>` around the first 2–5 words of each `<li>` to create a bold lead phrase for scannable hierarchy.
-- When the card carries a large statistic or callout number, place it between the header and the copy zone using an inline style (`font-size: 48px; font-family: IBM Plex Sans Condensed; font-weight: 700; color: var(--accent-gold); line-height: 1;`).
+- When the card carries a large statistic or callout number, place it between the header and the copy zone using an inline style (`font-size: 48px; font-family: var(--font-display); font-weight: 700; color: var(--accent-gold); line-height: 1;`).
 ##### Tips
 - **Parent must supply height.** `.editorial-text-left` uses `height: 100%` and `flex: 1` internally. The parent slot must have a defined height (grid cell, `height:100%` chain, or `flex:1;min-height:0`).
@@ -1239,6 +1323,34 @@ Horizontal step or phase sequence. Use for process stages, numbered definitions,
 ```
 ```css
+/* Shared by flow-horizontal and flow-vertical */
+.flow-number {
+    font-family: var(--font-display);
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    color: var(--text-muted);
+    border: 1px solid var(--line-strong);
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.flow-body h4 {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.14;
+}
+.flow-body p {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--text-secondary);
+}
 .flow-horizontal {
     position: relative;
     display: flex;
@@ -1273,30 +1385,6 @@ Horizontal step or phase sequence. Use for process stages, numbered definitions,
     position: relative;
     z-index: 1;
     background: var(--bg-page);
-    font-family: 'IBM Plex Sans Condensed', sans-serif;
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 0.12em;
-    color: var(--text-muted);
-    border: 1px solid var(--line-strong);
-    width: 34px;
-    height: 34px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-.flow-horizontal .flow-body h4 {
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 1.14;
-}
-.flow-horizontal .flow-body p {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--text-secondary);
 }
 ```
@@ -1372,21 +1460,6 @@ Vertical step or timeline sequence. Use for chronological phases, execution stag
     flex-shrink: 0;
 }
-.flow-vertical .flow-number {
-    font-family: 'IBM Plex Sans Condensed', sans-serif;
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 0.12em;
-    color: var(--text-muted);
-    border: 1px solid var(--line-strong);
-    width: 34px;
-    height: 34px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
 .flow-vertical .flow-line {
     width: 1px;
     flex: 1;
@@ -1404,17 +1477,11 @@ Vertical step or timeline sequence. Use for chronological phases, execution stag
 }
 .flow-vertical .flow-body h4 {
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 1.14;
     margin-top: 4px;
 }
 .flow-vertical .flow-body p {
     margin-top: 8px;
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--text-secondary);
 }
 ```
@@ -1502,7 +1569,7 @@ Annual-report format data table. Use for year-on-year comparisons, emissions dat
 .data-table {
     width: 100%;
     border-collapse: collapse;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     font-size: 13px;
     font-variant-numeric: tabular-nums;
     color: var(--text-primary);
@@ -1907,7 +1974,7 @@ Flat editorial quote block. Wide and short (width > height). Transparent backgro
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: 'IBM Plex Sans Condensed', sans-serif;
+    font-family: var(--font-display);
     font-size: 14px;
     font-weight: 700;
     color: var(--text-muted);
@@ -2015,7 +2082,7 @@ Omit `--light` only on slides with a white/light background.
   position: absolute;
   bottom: 36px;
   right: 52px;
-  font-family: 'IBM Plex Sans Condensed', sans-serif;
+  font-family: var(--font-display);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.18em;
@@ -2149,7 +2216,7 @@ A horizontal milestone timeline with a central axis line. Nodes sit on the axis;
 /* Date: inherits node colour via --tjh-item-color */
 .tjh-date {
-  font-family: 'IBM Plex Sans Condensed', sans-serif;
+  font-family: var(--font-display);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.16em;
@@ -2160,7 +2227,7 @@ A horizontal milestone timeline with a central axis line. Nodes sit on the axis;
 }
 .tjh-title {
-  font-family: 'IBM Plex Sans Condensed', sans-serif;
+  font-family: var(--font-display);
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.01em;
@@ -2344,7 +2411,7 @@ Can be placed inside any layout slot that provides a defined height (`narrative`
 /* Date — colored per node via --tjv-item-color */
 .tjv-date {
-  font-family: 'IBM Plex Sans Condensed', sans-serif;
+  font-family: var(--font-display);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.16em;
@@ -2355,7 +2422,7 @@ Can be placed inside any layout slot that provides a defined height (`narrative`
 }
 .tjv-title {
-  font-family: 'IBM Plex Sans Condensed', sans-serif;
+  font-family: var(--font-display);
   font-size: 18px;
   font-weight: 600;
   letter-spacing: -0.01em;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-dash-tech/revela",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "OpenCode plugin that turns AI into an HTML slide deck generator",
   "type": "module",
   "main": "./index.ts",