@cyber-dash-tech/revela 0.19.2 → 0.19.3

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 (19) hide show
  1. package/README.md +14 -14
  2. package/README.zh-CN.md +14 -14
  3. package/designs/lucent/DESIGN.md +2 -1
  4. package/designs/lucent/design.css +16 -6
  5. package/designs/lucent-dark/DESIGN.md +2 -1
  6. package/designs/lucent-dark/design.css +27 -12
  7. package/designs/monet/DESIGN.md +2 -1
  8. package/designs/monet/design.css +18 -8
  9. package/designs/starter/DESIGN.md +2 -1
  10. package/designs/starter/design.css +16 -6
  11. package/designs/summit/DESIGN.md +2 -1
  12. package/designs/summit/design.css +18 -8
  13. package/lib/page-templates/built-in-preview.html +42 -30
  14. package/lib/page-templates/render.ts +51 -10
  15. package/lib/page-templates/templates/index.ts +1 -0
  16. package/lib/page-templates/templates/table.ts +3 -0
  17. package/lib/page-templates/vocabulary.ts +8 -2
  18. package/package.json +1 -1
  19. package/plugins/revela/.codex-plugin/plugin.json +1 -1
package/README.md CHANGED
@@ -39,7 +39,7 @@ npm_config_cache=/tmp/revela-npm-cache bun run smoke:mcp-pack
39
39
  Install Revela through the Codex Git marketplace:
40
40
 
41
41
  ```bash
42
- codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.2
42
+ codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.3
43
43
  codex plugin add revela@revela
44
44
  ```
45
45
 
@@ -121,7 +121,7 @@ Revela includes built-in deck designs. Design previews are generated from the bu
121
121
 
122
122
  To switch designs in Codex, ask:
123
123
 
124
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), use summit as the design.
124
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), use summit as the design.
125
125
 
126
126
  In Codex, ask Revela to list or switch designs; the plugin uses the active design when making decks.
127
127
 
@@ -129,7 +129,7 @@ In Codex, ask Revela to list or switch designs; the plugin uses the active desig
129
129
 
130
130
  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.
131
131
 
132
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), list available domains.
132
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), list available domains.
133
133
 
134
134
  In Codex, ask Revela to list or switch domains; the active domain guides deck framing during init, research, and planning.
135
135
 
@@ -139,35 +139,35 @@ Use these prompts in Codex from the workspace that contains your source material
139
139
 
140
140
  1. Choose the narrative domain before authoring so Revela frames the audience, decision, risks, and objections for your context.
141
141
 
142
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), use consulting as the domain.
142
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), use consulting as the domain.
143
143
 
144
144
  2. Choose the deck design before rendering so generated artifacts use the intended visual language.
145
145
 
146
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), use summit as the design.
146
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), use summit as the design.
147
147
 
148
148
  3. Create a custom design when you want a different visual direction.
149
149
 
150
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/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.
150
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/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.
151
151
 
152
152
  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:
153
153
 
154
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), use neon-finance as the design.
154
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), use neon-finance as the design.
155
155
 
156
156
  4. Initialize local material intake. Init scans, extracts, and reviews workspace sources; it does not create a Narrative Vault.
157
157
 
158
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), help me init this workspace from the local materials.
158
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), help me init this workspace from the local materials.
159
159
 
160
160
  5. Research source-linked deck inputs and save findings.
161
161
 
162
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), research the public evidence and examples needed for this deck.
162
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), research the public evidence and examples needed for this deck.
163
163
 
164
164
  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.
165
165
 
166
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), create or update the deck plan before generating HTML.
166
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), create or update the deck plan before generating HTML.
167
167
 
168
168
  7. Make an HTML deck from the current deck plan.
169
169
 
170
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), make the deck from the current deck plan.
170
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), make the deck from the current deck plan.
171
171
 
172
172
  8. Review and annotate the generated deck from the localhost website card after make-deck completes.
173
173
 
@@ -175,15 +175,15 @@ Revela serves the deck from `http://127.0.0.1:<port>/decks/<file>.html` so you c
175
175
 
176
176
  9. Export a PDF after deck QA passes.
177
177
 
178
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), export the deck to PDF.
178
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), export the deck to PDF.
179
179
 
180
180
  10. Export an editable PPTX after deck QA passes.
181
181
 
182
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), export the deck to PPTX.
182
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), export the deck to PPTX.
183
183
 
184
184
  11. Export per-slide PNG files after deck QA passes.
185
185
 
186
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md), export the deck to PNG.
186
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md), export the deck to PNG.
187
187
 
188
188
  ## Annotate A Deck
189
189
 
package/README.zh-CN.md CHANGED
@@ -39,7 +39,7 @@ npm_config_cache=/tmp/revela-npm-cache bun run smoke:mcp-pack
39
39
  通过 Codex Git marketplace 安装 Revela：
40
40
 
41
41
  ```bash
42
- codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.2
42
+ codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.3
43
43
  codex plugin add revela@revela
44
44
  ```
45
45
 
@@ -121,7 +121,7 @@ Revela 内置多个 deck design。Design preview 由内置 page-template preview
121
121
 
122
122
  在 Codex 中切换 design，可以这样问：
123
123
 
124
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，use summit as design.
124
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，use summit as design.
125
125
 
126
126
  在 Codex 中，可以直接让 Revela 列出或切换 design；生成 deck 时会使用 active design。
127
127
 
@@ -129,7 +129,7 @@ Revela 内置多个 deck design。Design preview 由内置 page-template preview
129
129
 
130
130
  Domain 提供特定场景的沟通 guidance，例如 consulting、product 或 investor communication。需要让 Revela 按具体沟通场景调整 deck framing 时使用。
131
131
 
132
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，列出 available domains。
132
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，列出 available domains。
133
133
 
134
134
  在 Codex 中，可以直接让 Revela 列出或切换 domain；active domain 会用于 init、research 和 deck planning 阶段的 framing。
135
135
 
@@ -139,35 +139,35 @@ Domain 提供特定场景的沟通 guidance，例如 consulting、product 或 in
139
139
 
140
140
  1. 先选择 domain，让 Revela 按你的沟通场景 framing 受众、决策、风险和潜在质疑。
141
141
 
142
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，use consulting as domain.
142
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，use consulting as domain.
143
143
 
144
144
  2. 再选择 design，让后续生成的 deck 使用指定视觉风格。
145
145
 
146
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，use summit as design.
146
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，use summit as design.
147
147
 
148
148
  3. 如果需要不同的视觉方向，可以创建一个自定义 design。
149
149
 
150
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，创建一个名为 neon-finance 的新 design：金融仪表盘风格，深色界面、精密网格、亮绿色重点色。
150
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，创建一个名为 neon-finance 的新 design：金融仪表盘风格，深色界面、精密网格、亮绿色重点色。
151
151
 
152
152
  Revela 可能会继续询问参考图、风格约束或禁忌项，然后在 workspace draft 中创建 `DESIGN.md`、`design.css` 和需要的本地 `assets/**`。它会用内置 page-template fixture 加上这份 CSS 生成 preview，让你在 install 前先检查 cover、agenda、timeline、chart、table、card 和 visual slot。创建完成后再切换使用：
153
153
 
154
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，使用 neon-finance 作为 design。
154
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，使用 neon-finance 作为 design。
155
155
 
156
156
  4. 初始化本地 material intake。Init 会扫描、抽取并审阅 workspace source；它不会创建 Narrative Vault。
157
157
 
158
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，帮我 init 这个 workspace，先读本地材料。
158
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，帮我 init 这个 workspace，先读本地材料。
159
159
 
160
160
  5. 针对 deck 所需输入做 research，并保存带来源的 findings。
161
161
 
162
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，research 这个 deck 需要的公开证据、案例和 source。
162
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，research 这个 deck 需要的公开证据、案例和 source。
163
163
 
164
164
  6. 先创建或更新 deck plan，明确 slide 顺序、章节结构、source links、unresolved inputs、source limitations 和 visual intent，再生成 HTML。
165
165
 
166
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，生成 HTML 前先 create or update deck plan。
166
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，生成 HTML 前先 create or update deck plan。
167
167
 
168
168
  7. 基于当前 deck plan 生成 HTML deck。
169
169
 
170
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，基于当前 deck plan make deck。
170
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，基于当前 deck plan make deck。
171
171
 
172
172
  8. make-deck 完成后，从 localhost website card 打开生成的 deck，并在 Codex Browser 中做 annotation 和定向修改。
173
173
 
@@ -175,15 +175,15 @@ Revela 会通过 `http://127.0.0.1:<port>/decks/<file>.html` 服务 deck，你
175
175
 
176
176
  9. QA 通过后导出 PDF。
177
177
 
178
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，把 deck export 成 PDF。
178
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，把 deck export 成 PDF。
179
179
 
180
180
  10. QA 通过后导出可编辑 PPTX。
181
181
 
182
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，把 deck export 成 PPTX。
182
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，把 deck export 成 PPTX。
183
183
 
184
184
  11. QA 通过后导出每页 PNG。
185
185
 
186
- > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.2/skills/revela/SKILL.md)，把 deck export 成 PNG。
186
+ > [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.3/skills/revela/SKILL.md)，把 deck export 成 PNG。
187
187
 
188
188
  ## Annotate Deck
189
189
 
package/designs/lucent/DESIGN.md CHANGED
@@ -259,7 +259,8 @@ Lucent skins Revela built-in page templates without owning their semantic struct
259
259
 
260
260
  - `cover`, `section-divider`, `closing`: use full-bleed hero treatment with Lucent package assets.
261
261
  - `agenda`, `executive-summary`, `problem-context`, `key-message-evidence`, `claim-supporting-visual`: use report-story/card-grid language with quiet surfaces.
262
- - `metric-highlight`, `chart-takeaways`, `table-comparison`: use data-forward Lucent panels with explicit interpretation regions.
262
+ - `metric-highlight`, `chart-takeaways`, `table`, `table-comparison`: use data-forward Lucent panels with explicit interpretation regions.
263
+ - 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.
263
264
  - `milestone`: map to the horizontal roadmap visual system. Dots remain milestone anchors inside each milestone item; do not absolutely position detached decorative dots.
264
265
  - `timeline`: map to the vertical timeline visual system. Dots remain event anchors inside each timeline item; do not absolutely position detached decorative dots.
265
266
  - `process-steps`, `recommendation-decision`, `risks-tradeoffs`: use recommendation and steps surfaces with no nested card-in-card framing.
package/designs/lucent/design.css CHANGED
@@ -140,19 +140,27 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
140
140
  .template-chart-placeholder { width: 76%; height: 56%; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); display: flex; align-items: end; gap: 28px; padding: 0 28px 24px; }
141
141
  .template-visual-slot-panel { width: 100%; min-height: 520px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.08), rgba(24,168,216,0.08)); display: grid; place-items: center; padding: 0; }
142
142
  .template-visual-slot-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
143
- .template-text-panel.template-chart-takeaway-panel { gap: 28px; 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); }
144
- .template-chart-takeaway-panel .template-text-panel-title { color: white; }
143
+ .template-text-panel.template-chart-takeaway-panel { gap: 28px; }
144
+ .template-text-panel--plain { background: rgba(255,255,255,0.74); border: 1px solid transparent; box-shadow: none; }
145
+ .template-text-panel--clear { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
146
+ .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); }
147
+ .template-text-panel--color .template-text-panel-title { color: white; }
148
+ .template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
145
149
  .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
146
150
  .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
147
151
  .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
148
152
  .template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
149
153
  .template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
150
154
  .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
155
+ .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
156
+ .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
157
+ .template-table-region { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
158
+ .template-table-region .template-table-wrap { height: 100%; }
151
159
  .template-table-wrap { display: grid; grid-template-rows: minmax(0, auto) auto; gap: 22px; height: 100%; align-content: start; }
152
160
  .template-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.86); box-shadow: 0 18px 44px var(--shadow-soft); }
153
161
  .template-table th, .template-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 21px; }
154
162
  .template-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
155
- .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.74); border-radius: var(--surface-radius); padding: 42px; }
163
+ .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; border-radius: var(--surface-radius); padding: 42px; }
156
164
  .template-text-panel-title { margin: 0; font-size: 34px; line-height: 1.28; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
157
165
  .template-text-panel-body { margin: 0; font-size: 23px; line-height: 1.52; color: var(--text-secondary); }
158
166
  .template-side-panel { align-self: stretch; }
@@ -174,9 +182,7 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
174
182
  .template-timeline-layout--right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
175
183
  .template-timeline-layout--right .template-timeline { grid-column: 1; grid-row: 1; }
176
184
  .template-timeline-layout--right .template-side-panel { grid-column: 2; grid-row: 1; }
177
- .template-timeline-layout .template-text-panel { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
178
- .template-timeline-layout .template-text-panel-title { color: white; }
179
- .template-timeline-layout .template-text-panel-body { color: rgba(255,255,255,0.78); }
185
+ .template-timeline-layout .template-text-panel--color { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
180
186
  .template-timeline--horizontal { grid-template-columns: repeat(var(--timeline-count), 1fr); column-gap: 18px; align-items: stretch; --timeline-axis-y: 86%; }
181
187
  .template-timeline--horizontal::before { content: ""; position: absolute; left: 4%; right: 4%; top: var(--timeline-axis-y); border-top: 2px solid var(--line-strong); transform: translateY(-1px); }
182
188
  .template-timeline-item { position: relative; min-height: 400px; display: grid; justify-items: center; align-items: center; }
@@ -250,6 +256,10 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
250
256
  .template-frame--catalog .template-chart-takeaway-item { gap: 4px; padding-top: 11px; }
251
257
  .template-frame--catalog .template-chart-takeaway-item h3 { font-size: 19px; line-height: 1.2; }
252
258
  .template-frame--catalog .template-chart-takeaway-item p { font-size: 15px; line-height: 1.3; }
259
+ .template-frame--catalog .template-table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
260
+ .template-frame--catalog .template-table-layout .template-text-panel { padding: 22px; gap: 10px; }
261
+ .template-frame--catalog .template-table-layout .template-text-panel-title { font-size: 25px; line-height: 1.3; }
262
+ .template-frame--catalog .template-table-layout .template-text-panel-body { font-size: 18px; line-height: 1.4; }
253
263
  .template-frame--catalog .template-table-wrap { gap: 16px; }
254
264
  .template-frame--catalog .template-table th,
255
265
  .template-frame--catalog .template-table td { padding: 14px 18px; font-size: 17px; line-height: 1.32; }
package/designs/lucent-dark/DESIGN.md CHANGED
@@ -259,7 +259,8 @@ Lucent skins Revela built-in page templates without owning their semantic struct
259
259
 
260
260
  - `cover`, `section-divider`, `closing`: use full-bleed hero treatment with Lucent package assets.
261
261
  - `agenda`, `executive-summary`, `problem-context`, `key-message-evidence`, `claim-supporting-visual`: use report-story/card-grid language with quiet surfaces.
262
- - `metric-highlight`, `chart-takeaways`, `table-comparison`: use data-forward Lucent panels with explicit interpretation regions.
262
+ - `metric-highlight`, `chart-takeaways`, `table`, `table-comparison`: use data-forward Lucent panels with explicit interpretation regions.
263
+ - 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.
263
264
  - `milestone`: map to the horizontal roadmap visual system. Dots remain milestone anchors inside each milestone item; do not absolutely position detached decorative dots.
264
265
  - `timeline`: map to the vertical timeline visual system. Dots remain event anchors inside each timeline item; do not absolutely position detached decorative dots.
265
266
  - `process-steps`, `recommendation-decision`, `risks-tradeoffs`: use recommendation and steps surfaces with no nested card-in-card framing.
package/designs/lucent-dark/design.css CHANGED
@@ -140,19 +140,27 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
140
140
  .template-chart-placeholder { width: 76%; height: 56%; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); display: flex; align-items: end; gap: 28px; padding: 0 28px 24px; }
141
141
  .template-visual-slot-panel { width: 100%; min-height: 520px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.08), rgba(24,168,216,0.08)); display: grid; place-items: center; padding: 0; }
142
142
  .template-visual-slot-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
143
- .template-text-panel.template-chart-takeaway-panel { gap: 28px; 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); }
144
- .template-chart-takeaway-panel .template-text-panel-title { color: white; }
143
+ .template-text-panel.template-chart-takeaway-panel { gap: 28px; }
144
+ .template-text-panel--plain { background: rgba(255,255,255,0.74); border: 1px solid transparent; box-shadow: none; }
145
+ .template-text-panel--clear { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
146
+ .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); }
147
+ .template-text-panel--color .template-text-panel-title { color: white; }
148
+ .template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
145
149
  .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
146
150
  .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
147
151
  .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
148
152
  .template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
149
153
  .template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
150
154
  .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
155
+ .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
156
+ .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
157
+ .template-table-region { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
158
+ .template-table-region .template-table-wrap { height: 100%; }
151
159
  .template-table-wrap { display: grid; grid-template-rows: minmax(0, auto) auto; gap: 22px; height: 100%; align-content: start; }
152
160
  .template-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.86); box-shadow: 0 18px 44px var(--shadow-soft); }
153
161
  .template-table th, .template-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 21px; }
154
162
  .template-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
155
- .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.74); border-radius: var(--surface-radius); padding: 42px; }
163
+ .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; border-radius: var(--surface-radius); padding: 42px; }
156
164
  .template-text-panel-title { margin: 0; font-size: 34px; line-height: 1.28; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
157
165
  .template-text-panel-body { margin: 0; font-size: 23px; line-height: 1.52; color: var(--text-secondary); }
158
166
  .template-side-panel { align-self: stretch; }
@@ -174,9 +182,7 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
174
182
  .template-timeline-layout--right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
175
183
  .template-timeline-layout--right .template-timeline { grid-column: 1; grid-row: 1; }
176
184
  .template-timeline-layout--right .template-side-panel { grid-column: 2; grid-row: 1; }
177
- .template-timeline-layout .template-text-panel { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
178
- .template-timeline-layout .template-text-panel-title { color: white; }
179
- .template-timeline-layout .template-text-panel-body { color: rgba(255,255,255,0.78); }
185
+ .template-timeline-layout .template-text-panel--color { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
180
186
  .template-timeline--horizontal { grid-template-columns: repeat(var(--timeline-count), 1fr); column-gap: 18px; align-items: stretch; --timeline-axis-y: 86%; }
181
187
  .template-timeline--horizontal::before { content: ""; position: absolute; left: 4%; right: 4%; top: var(--timeline-axis-y); border-top: 2px solid var(--line-strong); transform: translateY(-1px); }
182
188
  .template-timeline-item { position: relative; min-height: 400px; display: grid; justify-items: center; align-items: center; }
@@ -250,6 +256,10 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
250
256
  .template-frame--catalog .template-chart-takeaway-item { gap: 4px; padding-top: 11px; }
251
257
  .template-frame--catalog .template-chart-takeaway-item h3 { font-size: 19px; line-height: 1.2; }
252
258
  .template-frame--catalog .template-chart-takeaway-item p { font-size: 15px; line-height: 1.3; }
259
+ .template-frame--catalog .template-table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
260
+ .template-frame--catalog .template-table-layout .template-text-panel { padding: 22px; gap: 10px; }
261
+ .template-frame--catalog .template-table-layout .template-text-panel-title { font-size: 25px; line-height: 1.3; }
262
+ .template-frame--catalog .template-table-layout .template-text-panel-body { font-size: 18px; line-height: 1.4; }
253
263
  .template-frame--catalog .template-table-wrap { gap: 16px; }
254
264
  .template-frame--catalog .template-table th,
255
265
  .template-frame--catalog .template-table td { padding: 14px 18px; font-size: 17px; line-height: 1.32; }
@@ -349,12 +359,17 @@ body { background: var(--bg-frame); color: var(--text-primary); }
349
359
  .template-image-caption {
350
360
  color: var(--text-muted);
351
361
  }
352
- .template-text-panel,
362
+ .template-text-panel--plain,
353
363
  .template-metric-layout .template-insight-panel {
354
364
  background: rgba(13, 25, 47, 0.78);
355
365
  border: 1px solid var(--line);
356
366
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
357
367
  }
368
+ .template-text-panel--clear {
369
+ background: transparent;
370
+ border: 0;
371
+ box-shadow: none;
372
+ }
358
373
  .template-key-message-panel,
359
374
  .template-claim-text-panel {
360
375
  background: transparent;
@@ -388,19 +403,19 @@ body { background: var(--bg-frame); color: var(--text-primary); }
388
403
  .template-timeline--vertical::before {
389
404
  border-color: var(--line-strong);
390
405
  }
391
- .template-text-panel.template-chart-takeaway-panel,
392
- .template-timeline-layout .template-text-panel {
406
+ .template-text-panel--color,
407
+ .template-timeline-layout .template-text-panel--color {
393
408
  background: linear-gradient(135deg, #6f73e8 0%, #4d78d7 52%, #0ba4cf 115%);
394
409
  color: white;
395
410
  box-shadow: 0 24px 66px rgba(35, 83, 190, 0.32);
396
411
  }
397
- .template-chart-takeaway-panel .template-text-panel-title,
412
+ .template-text-panel--color .template-text-panel-title,
398
413
  .template-chart-takeaway-item h3,
399
- .template-timeline-layout .template-text-panel-title {
414
+ .template-timeline-layout .template-text-panel--color .template-text-panel-title {
400
415
  color: white;
401
416
  }
402
417
  .template-chart-takeaway-item p,
403
- .template-timeline-layout .template-text-panel-body {
418
+ .template-timeline-layout .template-text-panel--color .template-text-panel-body {
404
419
  color: rgba(255, 255, 255, 0.78);
405
420
  }
406
421
  .template-slide[data-design="lucent-dark"][data-template="cover"] .slide-canvas,
package/designs/monet/DESIGN.md CHANGED
@@ -2886,7 +2886,8 @@ Monet skins Revela built-in page templates with soft editorial rhythm, painterly
2886
2886
 
2887
2887
  - `cover`, `section-divider`, `closing`: use expressive title-led structural pages.
2888
2888
  - `agenda`, `executive-summary`, `problem-context`, `key-message-evidence`, `claim-supporting-visual`: use soft narrative regions with no heavy outer box.
2889
- - `metric-highlight`, `chart-takeaways`, `table-comparison`: use calm data surfaces and readable interpretation zones.
2889
+ - `metric-highlight`, `chart-takeaways`, `table`, `table-comparison`: use calm data surfaces and readable interpretation zones.
2890
+ - 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.
2890
2891
  - `milestone`: dots remain milestone anchors inside each horizontal milestone item; do not position detached decorative markers.
2891
2892
  - `timeline`: dots remain event anchors inside each vertical timeline item; do not position detached decorative markers.
2892
2893
  - `process-steps`, `recommendation-decision`, `risks-tradeoffs`: use quiet action and tradeoff panels.
package/designs/monet/design.css CHANGED
@@ -140,19 +140,27 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
140
140
  .template-chart-placeholder { width: 76%; height: 56%; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); display: flex; align-items: end; gap: 28px; padding: 0 28px 24px; }
141
141
  .template-visual-slot-panel { width: 100%; min-height: 520px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.08), rgba(24,168,216,0.08)); display: grid; place-items: center; padding: 0; }
142
142
  .template-visual-slot-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
143
- .template-text-panel.template-chart-takeaway-panel { gap: 28px; 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); }
144
- .template-chart-takeaway-panel .template-text-panel-title { color: white; }
143
+ .template-text-panel.template-chart-takeaway-panel { gap: 28px; }
144
+ .template-text-panel--plain { background: rgba(255,255,255,0.74); border: 1px solid transparent; box-shadow: none; }
145
+ .template-text-panel--clear { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
146
+ .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); }
147
+ .template-text-panel--color .template-text-panel-title { color: white; }
148
+ .template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
145
149
  .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
146
150
  .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
147
151
  .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
148
152
  .template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
149
153
  .template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
150
154
  .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
155
+ .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
156
+ .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
157
+ .template-table-region { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
158
+ .template-table-region .template-table-wrap { height: 100%; }
151
159
  .template-table-wrap { display: grid; grid-template-rows: minmax(0, auto) auto; gap: 22px; height: 100%; align-content: start; }
152
160
  .template-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.86); box-shadow: 0 18px 44px var(--shadow-soft); }
153
161
  .template-table th, .template-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 21px; }
154
162
  .template-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
155
- .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.74); border-radius: var(--surface-radius); padding: 42px; }
163
+ .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; border-radius: var(--surface-radius); padding: 42px; }
156
164
  .template-text-panel-title { margin: 0; font-size: 34px; line-height: 1.28; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
157
165
  .template-text-panel-body { margin: 0; font-size: 23px; line-height: 1.52; color: var(--text-secondary); }
158
166
  .template-side-panel { align-self: stretch; }
@@ -174,9 +182,7 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
174
182
  .template-timeline-layout--right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
175
183
  .template-timeline-layout--right .template-timeline { grid-column: 1; grid-row: 1; }
176
184
  .template-timeline-layout--right .template-side-panel { grid-column: 2; grid-row: 1; }
177
- .template-timeline-layout .template-text-panel { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
178
- .template-timeline-layout .template-text-panel-title { color: white; }
179
- .template-timeline-layout .template-text-panel-body { color: rgba(255,255,255,0.78); }
185
+ .template-timeline-layout .template-text-panel--color { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
180
186
  .template-timeline--horizontal { grid-template-columns: repeat(var(--timeline-count), 1fr); column-gap: 18px; align-items: stretch; --timeline-axis-y: 86%; }
181
187
  .template-timeline--horizontal::before { content: ""; position: absolute; left: 4%; right: 4%; top: var(--timeline-axis-y); border-top: 2px solid var(--line-strong); transform: translateY(-1px); }
182
188
  .template-timeline-item { position: relative; min-height: 400px; display: grid; justify-items: center; align-items: center; }
@@ -250,6 +256,10 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
250
256
  .template-frame--catalog .template-chart-takeaway-item { gap: 4px; padding-top: 11px; }
251
257
  .template-frame--catalog .template-chart-takeaway-item h3 { font-size: 19px; line-height: 1.2; }
252
258
  .template-frame--catalog .template-chart-takeaway-item p { font-size: 15px; line-height: 1.3; }
259
+ .template-frame--catalog .template-table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
260
+ .template-frame--catalog .template-table-layout .template-text-panel { padding: 22px; gap: 10px; }
261
+ .template-frame--catalog .template-table-layout .template-text-panel-title { font-size: 25px; line-height: 1.3; }
262
+ .template-frame--catalog .template-table-layout .template-text-panel-body { font-size: 18px; line-height: 1.4; }
253
263
  .template-frame--catalog .template-table-wrap { gap: 16px; }
254
264
  .template-frame--catalog .template-table th,
255
265
  .template-frame--catalog .template-table td { padding: 14px 18px; font-size: 17px; line-height: 1.32; }
@@ -322,8 +332,8 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
322
332
  .template-text-panel-body,
323
333
  .template-claim-text-body,
324
334
  .template-insight-body { font-size: 24px; }
325
- .template-text-panel.template-chart-takeaway-panel,
326
- .template-timeline-layout .template-text-panel {
335
+ .template-text-panel--color,
336
+ .template-timeline-layout .template-text-panel--color {
327
337
  background: linear-gradient(135deg, #416f88 0%, #5c948b 56%, #9c6f3a 118%);
328
338
  }
329
339
  .template-slide[data-design="monet"][data-template="cover"] .slide-canvas,
package/designs/starter/DESIGN.md CHANGED
@@ -910,7 +910,8 @@ Starter skins Revela built-in page templates as a neutral authoring system. The
910
910
 
911
911
  - `cover`, `section-divider`, `closing`: use clear title-first structural pages.
912
912
  - `agenda`, `executive-summary`, `problem-context`, `key-message-evidence`, `claim-supporting-visual`: use plain narrative and card-grid surfaces.
913
- - `metric-highlight`, `chart-takeaways`, `table-comparison`: use direct data panels with minimal decoration.
913
+ - `metric-highlight`, `chart-takeaways`, `table`, `table-comparison`: use direct data panels with minimal decoration.
914
+ - 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.
914
915
  - `milestone`: dots remain milestone anchors inside each horizontal milestone item; do not position detached decorative markers.
915
916
  - `timeline`: dots remain event anchors inside each vertical timeline item; do not position detached decorative markers.
916
917
  - `process-steps`, `recommendation-decision`, `risks-tradeoffs`: use simple step and decision panels.
package/designs/starter/design.css CHANGED
@@ -140,19 +140,27 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
140
140
  .template-chart-placeholder { width: 76%; height: 56%; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); display: flex; align-items: end; gap: 28px; padding: 0 28px 24px; }
141
141
  .template-visual-slot-panel { width: 100%; min-height: 520px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.08), rgba(24,168,216,0.08)); display: grid; place-items: center; padding: 0; }
142
142
  .template-visual-slot-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
143
- .template-text-panel.template-chart-takeaway-panel { gap: 28px; 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); }
144
- .template-chart-takeaway-panel .template-text-panel-title { color: white; }
143
+ .template-text-panel.template-chart-takeaway-panel { gap: 28px; }
144
+ .template-text-panel--plain { background: rgba(255,255,255,0.74); border: 1px solid transparent; box-shadow: none; }
145
+ .template-text-panel--clear { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
146
+ .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); }
147
+ .template-text-panel--color .template-text-panel-title { color: white; }
148
+ .template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
145
149
  .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
146
150
  .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
147
151
  .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
148
152
  .template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
149
153
  .template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
150
154
  .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
155
+ .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
156
+ .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
157
+ .template-table-region { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
158
+ .template-table-region .template-table-wrap { height: 100%; }
151
159
  .template-table-wrap { display: grid; grid-template-rows: minmax(0, auto) auto; gap: 22px; height: 100%; align-content: start; }
152
160
  .template-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.86); box-shadow: 0 18px 44px var(--shadow-soft); }
153
161
  .template-table th, .template-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 21px; }
154
162
  .template-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
155
- .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.74); border-radius: var(--surface-radius); padding: 42px; }
163
+ .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; border-radius: var(--surface-radius); padding: 42px; }
156
164
  .template-text-panel-title { margin: 0; font-size: 34px; line-height: 1.28; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
157
165
  .template-text-panel-body { margin: 0; font-size: 23px; line-height: 1.52; color: var(--text-secondary); }
158
166
  .template-side-panel { align-self: stretch; }
@@ -174,9 +182,7 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
174
182
  .template-timeline-layout--right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
175
183
  .template-timeline-layout--right .template-timeline { grid-column: 1; grid-row: 1; }
176
184
  .template-timeline-layout--right .template-side-panel { grid-column: 2; grid-row: 1; }
177
- .template-timeline-layout .template-text-panel { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
178
- .template-timeline-layout .template-text-panel-title { color: white; }
179
- .template-timeline-layout .template-text-panel-body { color: rgba(255,255,255,0.78); }
185
+ .template-timeline-layout .template-text-panel--color { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
180
186
  .template-timeline--horizontal { grid-template-columns: repeat(var(--timeline-count), 1fr); column-gap: 18px; align-items: stretch; --timeline-axis-y: 86%; }
181
187
  .template-timeline--horizontal::before { content: ""; position: absolute; left: 4%; right: 4%; top: var(--timeline-axis-y); border-top: 2px solid var(--line-strong); transform: translateY(-1px); }
182
188
  .template-timeline-item { position: relative; min-height: 400px; display: grid; justify-items: center; align-items: center; }
@@ -250,6 +256,10 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
250
256
  .template-frame--catalog .template-chart-takeaway-item { gap: 4px; padding-top: 11px; }
251
257
  .template-frame--catalog .template-chart-takeaway-item h3 { font-size: 19px; line-height: 1.2; }
252
258
  .template-frame--catalog .template-chart-takeaway-item p { font-size: 15px; line-height: 1.3; }
259
+ .template-frame--catalog .template-table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
260
+ .template-frame--catalog .template-table-layout .template-text-panel { padding: 22px; gap: 10px; }
261
+ .template-frame--catalog .template-table-layout .template-text-panel-title { font-size: 25px; line-height: 1.3; }
262
+ .template-frame--catalog .template-table-layout .template-text-panel-body { font-size: 18px; line-height: 1.4; }
253
263
  .template-frame--catalog .template-table-wrap { gap: 16px; }
254
264
  .template-frame--catalog .template-table th,
255
265
  .template-frame--catalog .template-table td { padding: 14px 18px; font-size: 17px; line-height: 1.32; }
package/designs/summit/DESIGN.md CHANGED
@@ -2670,7 +2670,8 @@ Summit skins Revela built-in page templates with editorial hierarchy, broad whit
2670
2670
 
2671
2671
  - `cover`, `section-divider`, `closing`: use strong editorial title pages.
2672
2672
  - `agenda`, `executive-summary`, `problem-context`, `key-message-evidence`, `claim-supporting-visual`: use borderless narrative groupings with clear hierarchy.
2673
- - `metric-highlight`, `chart-takeaways`, `table-comparison`: use evidence-first data regions without outer container borders.
2673
+ - `metric-highlight`, `chart-takeaways`, `table`, `table-comparison`: use evidence-first data regions without outer container borders.
2674
+ - 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.
2674
2675
  - `milestone`: dots remain milestone anchors inside each horizontal milestone item; do not position detached decorative markers.
2675
2676
  - `timeline`: dots remain event anchors inside each vertical timeline item; do not position detached decorative markers.
2676
2677
  - `process-steps`, `recommendation-decision`, `risks-tradeoffs`: use decisive action panels with minimal framing.
package/designs/summit/design.css CHANGED
@@ -140,19 +140,27 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
140
140
  .template-chart-placeholder { width: 76%; height: 56%; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); display: flex; align-items: end; gap: 28px; padding: 0 28px 24px; }
141
141
  .template-visual-slot-panel { width: 100%; min-height: 520px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.08), rgba(24,168,216,0.08)); display: grid; place-items: center; padding: 0; }
142
142
  .template-visual-slot-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
143
- .template-text-panel.template-chart-takeaway-panel { gap: 28px; 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); }
144
- .template-chart-takeaway-panel .template-text-panel-title { color: white; }
143
+ .template-text-panel.template-chart-takeaway-panel { gap: 28px; }
144
+ .template-text-panel--plain { background: rgba(255,255,255,0.74); border: 1px solid transparent; box-shadow: none; }
145
+ .template-text-panel--clear { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
146
+ .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); }
147
+ .template-text-panel--color .template-text-panel-title { color: white; }
148
+ .template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
145
149
  .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
146
150
  .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
147
151
  .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
148
152
  .template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
149
153
  .template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
150
154
  .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
155
+ .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
156
+ .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
157
+ .template-table-region { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
158
+ .template-table-region .template-table-wrap { height: 100%; }
151
159
  .template-table-wrap { display: grid; grid-template-rows: minmax(0, auto) auto; gap: 22px; height: 100%; align-content: start; }
152
160
  .template-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.86); box-shadow: 0 18px 44px var(--shadow-soft); }
153
161
  .template-table th, .template-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 21px; }
154
162
  .template-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
155
- .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.74); border-radius: var(--surface-radius); padding: 42px; }
163
+ .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; border-radius: var(--surface-radius); padding: 42px; }
156
164
  .template-text-panel-title { margin: 0; font-size: 34px; line-height: 1.28; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
157
165
  .template-text-panel-body { margin: 0; font-size: 23px; line-height: 1.52; color: var(--text-secondary); }
158
166
  .template-side-panel { align-self: stretch; }
@@ -174,9 +182,7 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
174
182
  .template-timeline-layout--right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
175
183
  .template-timeline-layout--right .template-timeline { grid-column: 1; grid-row: 1; }
176
184
  .template-timeline-layout--right .template-side-panel { grid-column: 2; grid-row: 1; }
177
- .template-timeline-layout .template-text-panel { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
178
- .template-timeline-layout .template-text-panel-title { color: white; }
179
- .template-timeline-layout .template-text-panel-body { color: rgba(255,255,255,0.78); }
185
+ .template-timeline-layout .template-text-panel--color { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
180
186
  .template-timeline--horizontal { grid-template-columns: repeat(var(--timeline-count), 1fr); column-gap: 18px; align-items: stretch; --timeline-axis-y: 86%; }
181
187
  .template-timeline--horizontal::before { content: ""; position: absolute; left: 4%; right: 4%; top: var(--timeline-axis-y); border-top: 2px solid var(--line-strong); transform: translateY(-1px); }
182
188
  .template-timeline-item { position: relative; min-height: 400px; display: grid; justify-items: center; align-items: center; }
@@ -250,6 +256,10 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
250
256
  .template-frame--catalog .template-chart-takeaway-item { gap: 4px; padding-top: 11px; }
251
257
  .template-frame--catalog .template-chart-takeaway-item h3 { font-size: 19px; line-height: 1.2; }
252
258
  .template-frame--catalog .template-chart-takeaway-item p { font-size: 15px; line-height: 1.3; }
259
+ .template-frame--catalog .template-table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
260
+ .template-frame--catalog .template-table-layout .template-text-panel { padding: 22px; gap: 10px; }
261
+ .template-frame--catalog .template-table-layout .template-text-panel-title { font-size: 25px; line-height: 1.3; }
262
+ .template-frame--catalog .template-table-layout .template-text-panel-body { font-size: 18px; line-height: 1.4; }
253
263
  .template-frame--catalog .template-table-wrap { gap: 16px; }
254
264
  .template-frame--catalog .template-table th,
255
265
  .template-frame--catalog .template-table td { padding: 14px 18px; font-size: 17px; line-height: 1.32; }
@@ -316,8 +326,8 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
316
326
  .template-card h3,
317
327
  .template-text-panel-title,
318
328
  .template-claim-text-title { letter-spacing: 0; }
319
- .template-text-panel.template-chart-takeaway-panel,
320
- .template-timeline-layout .template-text-panel {
329
+ .template-text-panel--color,
330
+ .template-timeline-layout .template-text-panel--color {
321
331
  background: linear-gradient(135deg, #176c63 0%, #2a8f84 54%, #b0822e 125%);
322
332
  }
323
333
  .template-slide[data-design="summit"][data-template="cover"] .slide-canvas,
package/lib/page-templates/built-in-preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <div class="slide-canvas">
13
13
  <div class="template-frame template-hero template-hero--cover">
14
14
  <div data-template-slot="hero"><header>
15
- <p class="template-eyebrow">Template 01 / 16</p>
15
+ <p class="template-eyebrow">Template 01 / 17</p>
16
16
  <h1 class="template-title template-hero-title">cover</h1>
17
17
  </header></div>
18
18
 
@@ -24,7 +24,7 @@
24
24
  <div class="slide-canvas">
25
25
  <div class="template-frame template-hero template-hero--section-divider">
26
26
  <div data-template-slot="hero"><header>
27
- <p class="template-eyebrow">Template 02 / 16</p>
27
+ <p class="template-eyebrow">Template 02 / 17</p>
28
28
  <h1 class="template-title template-hero-title">section-divider</h1>
29
29
  </header></div>
30
30
 
@@ -36,7 +36,7 @@
36
36
  <div class="slide-canvas">
37
37
  <div class="template-frame template-hero template-hero--closing">
38
38
  <div data-template-slot="hero"><header>
39
- <p class="template-eyebrow">Template 03 / 16</p>
39
+ <p class="template-eyebrow">Template 03 / 17</p>
40
40
  <h1 class="template-title template-hero-title">closing</h1>
41
41
  </header></div>
42
42
 
@@ -50,7 +50,7 @@
50
50
  <div class="template-body template-agenda-panel" data-template-slot="agenda">
51
51
  <div class="template-agenda-inner">
52
52
  <div class="template-agenda-header">
53
- <p class="template-eyebrow">Template 04 / 16</p>
53
+ <p class="template-eyebrow">Template 04 / 17</p>
54
54
  <h1 class="template-title">agenda</h1>
55
55
  <p class="template-agenda-footer">Structure-First-Design</p>
56
56
  </div>
@@ -66,7 +66,7 @@
66
66
  <div class="slide-canvas">
67
67
  <div class="template-frame">
68
68
  <header>
69
- <p class="template-eyebrow">Template 05 / 16</p>
69
+ <p class="template-eyebrow">Template 05 / 17</p>
70
70
  <h1 class="template-title">executive-summary</h1>
71
71
  </header><div class="template-body template-grid cols-3" data-template-slot="summary-cards"><article class="template-card"><h2>Decision is ready</h2><p>The facts support moving from discussion to selection without adding another analysis cycle.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><h2>Risk is bounded</h2><p>Known caveats are visible, named, and can be managed through rollout gates.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><h2>Next step is narrow</h2><p>A pilot decision creates more learning without overcommitting capital or team capacity.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article></div>
72
72
 
@@ -78,7 +78,7 @@
78
78
  <div class="slide-canvas">
79
79
  <div class="template-frame">
80
80
  <header>
81
- <p class="template-eyebrow">Template 06 / 16</p>
81
+ <p class="template-eyebrow">Template 06 / 17</p>
82
82
  <h1 class="template-title">problem-context</h1>
83
83
  </header><div class="template-body template-grid cols-2"><div class="template-card" data-template-slot="context"><p>Use this template when the audience needs the situation, tension, and implication before seeing recommendations.</p></div><div class="template-card" data-template-slot="supporting-points"><ul class="template-list"><li><strong>Situation</strong> A shift has changed the operating baseline.</li><li><strong>Tension</strong> Current process cannot absorb the new variance cleanly.</li><li><strong>Implication</strong> Delay increases rework and weakens decision confidence.</li></ul></div></div>
84
84
 
@@ -90,7 +90,7 @@
90
90
  <div class="slide-canvas">
91
91
  <div class="template-frame">
92
92
  <header>
93
- <p class="template-eyebrow">Template 07 / 16</p>
93
+ <p class="template-eyebrow">Template 07 / 17</p>
94
94
  <h1 class="template-title">key-message-evidence</h1>
95
95
  </header><div class="template-body template-grid cols-2"><div class="template-key-message-panel" data-template-slot="key-message">
96
96
  <h2 class="template-key-message-kicker">Key message</h2>
@@ -105,7 +105,7 @@
105
105
  <div class="slide-canvas">
106
106
  <div class="template-frame">
107
107
  <header>
108
- <p class="template-eyebrow">Template 08 / 16</p>
108
+ <p class="template-eyebrow">Template 08 / 17</p>
109
109
  <h1 class="template-title">claim-supporting-visual</h1>
110
110
  </header><div class="template-body template-grid cols-2"><div class="template-claim-text-panel" data-template-slot="claim">
111
111
  <h2 class="template-claim-text-title">A single visual should carry one argument.</h2>
@@ -121,7 +121,7 @@
121
121
  <div class="slide-canvas">
122
122
  <div class="template-frame">
123
123
  <header>
124
- <p class="template-eyebrow">Template 09 / 16</p>
124
+ <p class="template-eyebrow">Template 09 / 17</p>
125
125
  <h1 class="template-title">metric-highlight</h1>
126
126
  </header><div class="template-body"><div class="template-metric-layout template-metric-layout--insight-bottom"><div class="template-stat-grid" data-template-slot="metrics"><article class="template-card"><div class="template-stat-value">67%</div><h2>Adoption signal</h2><p>Primary number plus interpretation.</p></article><article class="template-card"><div class="template-stat-value">3x</div><h2>Review speed</h2><p>Comparison is stated beside the metric.</p></article><article class="template-card"><div class="template-stat-value">14d</div><h2>Pilot window</h2><p>Time bound keeps the ask concrete.</p></article></div><div class="template-insight-panel">
127
127
  <h2 class="template-insight-title"><i class="template-insight-icon" data-lucide="scan-search" aria-hidden="true"></i><span>Read the signal</span></h2>
@@ -136,9 +136,9 @@
136
136
  <div class="slide-canvas">
137
137
  <div class="template-frame">
138
138
  <header>
139
- <p class="template-eyebrow">Template 10 / 16</p>
139
+ <p class="template-eyebrow">Template 10 / 17</p>
140
140
  <h1 class="template-title">chart-takeaways</h1>
141
- </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-chart-takeaway-panel" data-template-slot="takeaways">
141
+ </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">
142
142
  <h2 class="template-text-panel-title">What to read</h2>
143
143
  <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>
144
144
  </div></div>
@@ -147,11 +147,23 @@
147
147
  <div class="template-page-number">10</div>
148
148
  </div>
149
149
  </section>
150
- <section class="slide template-slide" slide-qa="true" data-slide-index="11" data-design="built-in-preview" data-template="table-comparison">
150
+ <section class="slide template-slide" slide-qa="true" data-slide-index="11" data-design="built-in-preview" data-template="table">
151
151
  <div class="slide-canvas">
152
152
  <div class="template-frame">
153
153
  <header>
154
- <p class="template-eyebrow">Template 11 / 16</p>
154
+ <p class="template-eyebrow">Template 11 / 17</p>
155
+ <h1 class="template-title">table</h1>
156
+ </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>
157
+
158
+ </div>
159
+ <div class="template-page-number">11</div>
160
+ </div>
161
+ </section>
162
+ <section class="slide template-slide" slide-qa="true" data-slide-index="12" data-design="built-in-preview" data-template="table-comparison">
163
+ <div class="slide-canvas">
164
+ <div class="template-frame">
165
+ <header>
166
+ <p class="template-eyebrow">Template 12 / 17</p>
155
167
  <h1 class="template-title">table-comparison</h1>
156
168
  </header><div class="template-body" data-template-slot="table"><div class="template-table-wrap"><table class="template-table"><thead><tr><th>Layer</th><th>Owns</th><th>Agent task</th></tr></thead><tbody><tr><td>Template</td><td>Structure and DOM contract</td><td>Select the page pattern</td></tr><tr><td>Content</td><td>Claim, evidence, caveat</td><td>Fill the meaning</td></tr><tr><td>Design</td><td>Color, type, surfaces</td><td>Skin stable classes</td></tr></tbody></table><div class="template-insight-panel">
157
169
  <h2 class="template-insight-title"><i class="template-insight-icon" data-lucide="lightbulb" aria-hidden="true"></i><span>Insight</span></h2>
@@ -159,14 +171,14 @@
159
171
  </div></div></div>
160
172
 
161
173
  </div>
162
- <div class="template-page-number">11</div>
174
+ <div class="template-page-number">12</div>
163
175
  </div>
164
176
  </section>
165
- <section class="slide template-slide" slide-qa="true" data-slide-index="12" data-design="built-in-preview" data-template="milestone">
177
+ <section class="slide template-slide" slide-qa="true" data-slide-index="13" data-design="built-in-preview" data-template="milestone">
166
178
  <div class="slide-canvas">
167
179
  <div class="template-frame">
168
180
  <header>
169
- <p class="template-eyebrow">Template 12 / 16</p>
181
+ <p class="template-eyebrow">Template 13 / 17</p>
170
182
  <h1 class="template-title">milestone</h1>
171
183
  </header><div class="template-body"><div class="template-timeline template-timeline--horizontal" data-template-slot="timeline" style="--timeline-count:5"><article class="template-timeline-item">
172
184
  <div class="template-timeline-copy template-card">
@@ -211,16 +223,16 @@
211
223
  </article></div></div>
212
224
 
213
225
  </div>
214
- <div class="template-page-number">12</div>
226
+ <div class="template-page-number">13</div>
215
227
  </div>
216
228
  </section>
217
- <section class="slide template-slide" slide-qa="true" data-slide-index="13" data-design="built-in-preview" data-template="timeline">
229
+ <section class="slide template-slide" slide-qa="true" data-slide-index="14" data-design="built-in-preview" data-template="timeline">
218
230
  <div class="slide-canvas">
219
231
  <div class="template-frame">
220
232
  <header>
221
- <p class="template-eyebrow">Template 13 / 16</p>
233
+ <p class="template-eyebrow">Template 14 / 17</p>
222
234
  <h1 class="template-title">timeline</h1>
223
- </header><div class="template-body"><div class="template-timeline-layout template-timeline-layout--left"><div class="template-side-panel template-text-panel" 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">
235
+ </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">
224
236
  <span class="template-timeline-dot" aria-hidden="true"></span>
225
237
  <div class="template-timeline-copy">
226
238
  <p class="template-timeline-date">Mar 2019</p>
@@ -251,43 +263,43 @@
251
263
  </article></div></div></div>
252
264
 
253
265
  </div>
254
- <div class="template-page-number">13</div>
266
+ <div class="template-page-number">14</div>
255
267
  </div>
256
268
  </section>
257
- <section class="slide template-slide" slide-qa="true" data-slide-index="14" data-design="built-in-preview" data-template="process-steps">
269
+ <section class="slide template-slide" slide-qa="true" data-slide-index="15" data-design="built-in-preview" data-template="process-steps">
258
270
  <div class="slide-canvas">
259
271
  <div class="template-frame">
260
272
  <header>
261
- <p class="template-eyebrow">Template 14 / 16</p>
273
+ <p class="template-eyebrow">Template 15 / 17</p>
262
274
  <h1 class="template-title">process-steps</h1>
263
275
  </header><div class="template-body"><div class="template-steps" data-template-slot="steps"><article class="template-card"><div class="template-step-number">1</div><h2>Choose</h2><p>Select the page template that matches the communication job.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">2</div><h2>Fill</h2><p>Provide only the content fields the template needs.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">3</div><h2>Style</h2><p>Let the active design control type, color, and surfaces.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">4</div><h2>QA</h2><p>Run contract and visual checks before export.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article></div></div>
264
276
 
265
277
  </div>
266
- <div class="template-page-number">14</div>
278
+ <div class="template-page-number">15</div>
267
279
  </div>
268
280
  </section>
269
- <section class="slide template-slide" slide-qa="true" data-slide-index="15" data-design="built-in-preview" data-template="recommendation-decision">
281
+ <section class="slide template-slide" slide-qa="true" data-slide-index="16" data-design="built-in-preview" data-template="recommendation-decision">
270
282
  <div class="slide-canvas">
271
283
  <div class="template-frame">
272
284
  <header>
273
- <p class="template-eyebrow">Template 15 / 16</p>
285
+ <p class="template-eyebrow">Template 16 / 17</p>
274
286
  <h1 class="template-title">recommendation-decision</h1>
275
287
  </header><div class="template-body template-grid cols-3"><div class="template-card" data-template-slot="recommendation"><h2>Recommendation</h2><p>Adopt page templates as the structural layer, with designs remaining user-customizable.</p><figure class="template-image-card"><div class="template-image-frame"><img src="./assets/card-lens.jpg" alt="Lucent design asset"></div><figcaption class="template-image-caption">Design asset example</figcaption></figure></div><div data-template-slot="rationale"><article class="template-card"><h3>Rationale</h3><p>This keeps generation reliable while leaving style expressive and replaceable.</p></article></div><div class="template-card" data-template-slot="next-steps"><h2>Next steps</h2><ol class="template-list"><li><strong>Pilot</strong> Use the built-in preview to tune every template.</li><li><strong>Validate</strong> Promote only contracts that pass QA and browser review.</li><li><strong>Ship</strong> Document the add-slide workflow for agents.</li></ol></div></div>
276
288
 
277
289
  </div>
278
- <div class="template-page-number">15</div>
290
+ <div class="template-page-number">16</div>
279
291
  </div>
280
292
  </section>
281
- <section class="slide template-slide" slide-qa="true" data-slide-index="16" data-design="built-in-preview" data-template="risks-tradeoffs">
293
+ <section class="slide template-slide" slide-qa="true" data-slide-index="17" data-design="built-in-preview" data-template="risks-tradeoffs">
282
294
  <div class="slide-canvas">
283
295
  <div class="template-frame">
284
296
  <header>
285
- <p class="template-eyebrow">Template 16 / 16</p>
297
+ <p class="template-eyebrow">Template 17 / 17</p>
286
298
  <h1 class="template-title">risks-tradeoffs</h1>
287
299
  </header><div class="template-body template-grid cols-3" data-template-slot="risks"><article class="template-card"><h3>Constraint</h3><p>Templates can over-constrain if they become decorative presets instead of communication jobs.</p><figure class="template-image-card"><div class="template-image-frame"><img src="./assets/report-visual.jpg" alt="Report visual"></div><figcaption class="template-image-caption">Design asset example</figcaption></figure></article><article class="template-card"><h3>Mitigation</h3><p>Keep bounded HTML edit flow after scaffold insertion so agents can improve the page directly.</p></article><article class="template-card"><h3>Tradeoff</h3><p>More structure improves QA, but only if template contracts stay small and semantic.</p></article></div>
288
300
 
289
301
  </div>
290
- <div class="template-page-number">16</div>
302
+ <div class="template-page-number">17</div>
291
303
  </div>
292
304
  </section>
293
305
  <!-- revela-slides:end -->
package/lib/page-templates/render.ts CHANGED
@@ -142,6 +142,13 @@ const templates: PageTemplateDefinition[] = [
142
142
  field("takeawaysTitle", "string", "Title for the interpretation text panel."),
143
143
  field("items", "items[]", "Takeaways.", true),
144
144
  ], ["Chart area must be explicit and bounded."], ["Chart panel and takeaways both exist."]),
145
+ define("table", "Table", "Explain a structured table with a left reading card and right table region.", [
146
+ field("title", "string", "Slide title.", true),
147
+ field("textTitle", "string", "Left text card title."),
148
+ field("textBody", "string", "Left text card body."),
149
+ field("columns", "string[]", "Column labels.", true),
150
+ field("rows", "rows[]", "Table rows.", true),
151
+ ], ["Use the text card to tell the audience how to read the table.", "Keep table rows structured and scannable."], ["Left text card and right table region both exist.", "Table has headers and body rows."]),
145
152
  define("table-comparison", "Table / Comparison", "Compare options, segments, or facts in a structured table.", [
146
153
  field("title", "string", "Slide title.", true),
147
154
  field("columns", "string[]", "Column labels.", true),
@@ -277,6 +284,20 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
277
284
  { label: "Decision use", description: "Explain how the chart changes the recommendation, what threshold matters, and what follow-up evidence would reduce risk." },
278
285
  ],
279
286
  }),
287
+ fixture("table", {
288
+ title: "table",
289
+ textTitle: "Financial readout",
290
+ textBody: "Read top-line growth first, then check margin, cash conversion, and retention to see whether the plan is financially durable.",
291
+ columns: ["Line item", "FY2025", "FY2026 Plan", "YoY / note"],
292
+ rows: [
293
+ ["Revenue", "$84.2M", "$104.8M", "+24% planned growth"],
294
+ ["Gross margin", "68.4%", "71.2%", "+280 bps mix shift"],
295
+ ["Operating expense", "$42.7M", "$49.1M", "Scale hiring below revenue growth"],
296
+ ["EBITDA", "$14.9M", "$23.6M", "+58% operating leverage"],
297
+ ["Free cash flow", "$9.8M", "$16.4M", "Cash conversion improves to 69%"],
298
+ ["Net retention", "116%", "121%", "Expansion supports plan quality"],
299
+ ],
300
+ }),
280
301
  fixture("table-comparison", {
281
302
  title: "table-comparison",
282
303
  columns: ["Layer", "Owns", "Agent task"],
@@ -546,19 +567,27 @@ ${lucentClosingBackgroundCss}
546
567
  .template-chart-placeholder { width: 76%; height: 56%; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); display: flex; align-items: end; gap: 28px; padding: 0 28px 24px; }
547
568
  .template-visual-slot-panel { width: 100%; min-height: 520px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.08), rgba(24,168,216,0.08)); display: grid; place-items: center; padding: 0; }
548
569
  .template-visual-slot-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
549
- .template-text-panel.template-chart-takeaway-panel { gap: 28px; 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); }
550
- .template-chart-takeaway-panel .template-text-panel-title { color: white; }
570
+ .template-text-panel.template-chart-takeaway-panel { gap: 28px; }
571
+ .template-text-panel--plain { background: rgba(255,255,255,0.74); border: 1px solid transparent; box-shadow: none; }
572
+ .template-text-panel--clear { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
573
+ .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); }
574
+ .template-text-panel--color .template-text-panel-title { color: white; }
575
+ .template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
551
576
  .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
552
577
  .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
553
578
  .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
554
579
  .template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
555
580
  .template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
556
581
  .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
582
+ .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
583
+ .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
584
+ .template-table-region { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
585
+ .template-table-region .template-table-wrap { height: 100%; }
557
586
  .template-table-wrap { display: grid; grid-template-rows: minmax(0, auto) auto; gap: 22px; height: 100%; align-content: start; }
558
587
  .template-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.86); box-shadow: 0 18px 44px var(--shadow-soft); }
559
588
  .template-table th, .template-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 21px; }
560
589
  .template-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
561
- .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.74); border-radius: var(--surface-radius); padding: 42px; }
590
+ .template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; border-radius: var(--surface-radius); padding: 42px; }
562
591
  .template-text-panel-title { margin: 0; font-size: 34px; line-height: 1.28; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
563
592
  .template-text-panel-body { margin: 0; font-size: 23px; line-height: 1.52; color: var(--text-secondary); }
564
593
  .template-side-panel { align-self: stretch; }
@@ -580,9 +609,7 @@ ${lucentClosingBackgroundCss}
580
609
  .template-timeline-layout--right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
581
610
  .template-timeline-layout--right .template-timeline { grid-column: 1; grid-row: 1; }
582
611
  .template-timeline-layout--right .template-side-panel { grid-column: 2; grid-row: 1; }
583
- .template-timeline-layout .template-text-panel { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
584
- .template-timeline-layout .template-text-panel-title { color: white; }
585
- .template-timeline-layout .template-text-panel-body { color: rgba(255,255,255,0.78); }
612
+ .template-timeline-layout .template-text-panel--color { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
586
613
  .template-timeline--horizontal { grid-template-columns: repeat(var(--timeline-count), 1fr); column-gap: 18px; align-items: stretch; --timeline-axis-y: 86%; }
587
614
  .template-timeline--horizontal::before { content: ""; position: absolute; left: 4%; right: 4%; top: var(--timeline-axis-y); border-top: 2px solid var(--line-strong); transform: translateY(-1px); }
588
615
  .template-timeline-item { position: relative; min-height: 400px; display: grid; justify-items: center; align-items: center; }
@@ -656,6 +683,10 @@ ${lucentClosingBackgroundCss}
656
683
  .template-frame--catalog .template-chart-takeaway-item { gap: 4px; padding-top: 11px; }
657
684
  .template-frame--catalog .template-chart-takeaway-item h3 { font-size: 19px; line-height: 1.2; }
658
685
  .template-frame--catalog .template-chart-takeaway-item p { font-size: 15px; line-height: 1.3; }
686
+ .template-frame--catalog .template-table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
687
+ .template-frame--catalog .template-table-layout .template-text-panel { padding: 22px; gap: 10px; }
688
+ .template-frame--catalog .template-table-layout .template-text-panel-title { font-size: 25px; line-height: 1.3; }
689
+ .template-frame--catalog .template-table-layout .template-text-panel-body { font-size: 18px; line-height: 1.4; }
659
690
  .template-frame--catalog .template-table-wrap { gap: 16px; }
660
691
  .template-frame--catalog .template-table th,
661
692
  .template-frame--catalog .template-table td { padding: 14px 18px; font-size: 17px; line-height: 1.32; }
@@ -962,6 +993,7 @@ function renderBody(templateId: string, content: Record<string, any>): string {
962
993
  if (templateId === "claim-supporting-visual") return `${renderHeader(content, "Claim + Supporting Visual")}<div class="template-body template-grid cols-2">${claimTextPanel(content)}${visualSlotPanel()}</div>`
963
994
  if (templateId === "metric-highlight") return `${renderHeader(content, "Metric Highlight")}<div class="template-body">${metricHighlight(content)}</div>`
964
995
  if (templateId === "chart-takeaways") return `${renderHeader(content, "Chart + Takeaways")}<div class="template-body template-grid template-chart-layout">${visualSlotPanel()}${chartTakeawayPanel(content)}</div>`
996
+ if (templateId === "table") return `${renderHeader(content, "Table")}<div class="template-body">${tablePage(content)}</div>`
965
997
  if (templateId === "table-comparison") return `${renderHeader(content, "Table / Comparison")}<div class="template-body" data-template-slot="table">${table(content)}</div>`
966
998
  if (templateId === "milestone") return `${renderHeader(content, "Milestone")}<div class="template-body">${timeline({ ...content, orientation: "horizontal" })}</div>`
967
999
  if (templateId === "timeline") return `${renderHeader(content, "Timeline")}<div class="template-body">${timeline({ ...content, orientation: "vertical" })}</div>`
@@ -1010,7 +1042,7 @@ function evidenceCards(items: Array<{ label: string; description: string; image?
1010
1042
  function chartTakeawayPanel(content: Record<string, any>): string {
1011
1043
  const takeawayItems = items(content)
1012
1044
  const title = stringValue(content.takeawaysTitle) || "What to read"
1013
- return `<div class="template-text-panel template-chart-takeaway-panel" data-template-slot="takeaways">
1045
+ return `<div class="template-text-panel template-text-panel--color template-chart-takeaway-panel" data-template-slot="takeaways">
1014
1046
  <h2 class="template-text-panel-title">${escapeHtml(title)}</h2>
1015
1047
  <div class="template-chart-takeaway-list">${takeawayItems.map((item) => `<section class="template-chart-takeaway-item"><h3>${escapeHtml(item.label)}</h3><p>${escapeHtml(item.description)}</p></section>`).join("")}</div>
1016
1048
  </div>`
@@ -1044,6 +1076,14 @@ function table(content: Record<string, any>): string {
1044
1076
  return `<div class="template-table-wrap"><table class="template-table"><thead><tr>${columns.map((column) => `<th>${escapeHtml(column)}</th>`).join("")}</tr></thead><tbody>${rows.map((row) => `<tr>${columns.map((column, index) => `<td>${escapeHtml(Array.isArray(row) ? stringValue(row[index]) : stringValue(row[column]) || stringValue(row[slug(column)]))}</td>`).join("")}</tr>`).join("")}</tbody></table>${insight}</div>`
1045
1077
  }
1046
1078
 
1079
+ function tablePage(content: Record<string, any>): string {
1080
+ const panelContent = {
1081
+ insightTitle: stringValue(content.textTitle) || "What to read",
1082
+ insightBody: stringValue(content.textBody) || "Use this card to explain the comparison, caveat, or decision implication before the audience scans the table.",
1083
+ }
1084
+ return `<div class="template-table-layout">${renderTextPanel(panelContent, "text-card", "clear")}<div class="template-table-region" data-template-slot="table">${table({ ...content, insightTitle: "", insightBody: "" })}</div></div>`
1085
+ }
1086
+
1047
1087
  function renderInsightPanel(content: Record<string, any>): string {
1048
1088
  const body = stringValue(content.insightBody)
1049
1089
  if (!body) return ""
@@ -1090,14 +1130,14 @@ function timelineMilestone(item: any, orientation: "horizontal" | "vertical"): s
1090
1130
  }
1091
1131
 
1092
1132
  function renderSidePanel(content: Record<string, any>): string {
1093
- return renderTextPanel(content)
1133
+ return renderTextPanel(content, "insight", "color")
1094
1134
  }
1095
1135
 
1096
- function renderTextPanel(content: Record<string, any>): string {
1136
+ function renderTextPanel(content: Record<string, any>, slot = "insight", variant: "plain" | "clear" | "color" = "plain"): string {
1097
1137
  const body = stringValue(content.insightBody)
1098
1138
  if (!body) return ""
1099
1139
  const title = stringValue(content.insightTitle) || "Insight"
1100
- return `<div class="template-side-panel template-text-panel" data-template-slot="insight"><h2 class="template-side-panel-title template-text-panel-title">${escapeHtml(title)}</h2><p class="template-side-panel-body template-text-panel-body">${escapeHtml(body)}</p></div>`
1140
+ return `<div class="template-side-panel template-text-panel template-text-panel--${variant}" data-template-slot="${escapeAttribute(slot)}"><h2 class="template-side-panel-title template-text-panel-title">${escapeHtml(title)}</h2><p class="template-side-panel-body template-text-panel-body">${escapeHtml(body)}</p></div>`
1101
1141
  }
1102
1142
 
1103
1143
  function imageCard(input: any): string {
@@ -1150,6 +1190,7 @@ function scaffoldSeed(templateId: string, seed: Record<string, any>): Record<str
1150
1190
  if (templateId === "claim-supporting-visual") return { claim: "Replace with one visual claim.", body: "Use this copy to guide how the visual should be read.", items: defaultItems(["Anchor", "Callout"]), ...base }
1151
1191
  if (templateId === "metric-highlight") return { metrics: [{ value: "67%", label: "Metric", description: "Replace with interpretation." }, { value: "3x", label: "Comparison", description: "Replace with reading note." }, { value: "14d", label: "Window", description: "Replace with time context." }], insightTitle: "Read the signal", insightBody: "Replace with the decision implication, caveat, or next reading step.", ...base }
1152
1192
  if (templateId === "chart-takeaways") return { takeawaysTitle: "What to read", items: defaultItems(["Trend", "Driver", "Decision use"]), ...base }
1193
+ if (templateId === "table") return { textTitle: "Financial readout", textBody: "Replace with the table reading note, caveat, or decision implication.", columns: ["Line item", "FY2025", "FY2026 Plan", "YoY / note"], rows: [["Revenue", "$84.2M", "$104.8M", "+24% planned growth"], ["Gross margin", "68.4%", "71.2%", "+280 bps mix shift"], ["Operating expense", "$42.7M", "$49.1M", "Scale hiring below revenue growth"], ["EBITDA", "$14.9M", "$23.6M", "+58% operating leverage"], ["Free cash flow", "$9.8M", "$16.4M", "Cash conversion improves"], ["Net retention", "116%", "121%", "Expansion supports plan quality"]], ...base }
1153
1194
  if (templateId === "table-comparison") return { columns: ["Dimension", "Current", "Target"], rows: [["Replace", "Current state", "Target state"], ["Caveat", "Known limit", "Next proof"]], insightTitle: "Insight", insightBody: "Replace with the table reading note or caveat.", ...base }
1154
1195
  if (templateId === "milestone" || templateId === "timeline-roadmap") return { orientation: "horizontal", milestones: [{ date: "2022", label: "Signal", description: "Name the starting condition." }, { date: "2023", label: "Proof", description: "Show the evidence threshold." }, { date: "2024", label: "Inflection", description: "Use the pivotal moment to frame the shift." }, { date: "2025", label: "Scale", description: "Use a taller card for the highlighted milestone.", highlight: true }, { date: "2026", label: "Decision", description: "State what changes next." }], ...base }
1155
1196
  if (templateId === "timeline") return { orientation: "vertical", insightTitle: "Reading the journey", insightBody: "Replace with the timeline interpretation or caveat.", milestones: [{ date: "Mar 2019", label: "Launch", description: "Name the starting event." }, { date: "Nov 2019", label: "Audit", description: "Show the evidence threshold." }, { date: "May 2020", label: "Scale", description: "Explain the operating cadence." }, { date: "Feb 2021", label: "Review", description: "State what changes next." }], ...base }
package/lib/page-templates/templates/index.ts CHANGED
@@ -16,6 +16,7 @@ export * from "./process-steps"
16
16
  export * from "./recommendation-decision"
17
17
  export * from "./risks-tradeoffs"
18
18
  export * from "./section-divider"
19
+ export * from "./table"
19
20
  export * from "./table-comparison"
20
21
  export * from "./timeline"
21
22
  export * from "./timeline-roadmap"
package/lib/page-templates/templates/table.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { templateModule } from "./shared"
2
+
3
+ export const tableTemplate = templateModule("table")
package/lib/page-templates/vocabulary.ts CHANGED
@@ -55,10 +55,11 @@ export const PAGE_TEMPLATE_VOCABULARY: PageTemplateVocabulary[] = [
55
55
  vocab("key-message-evidence", ["template-key-message-panel", "template-evidence-grid"], ["key-message", "evidence"], ["key-message", "evidence"], ["Key message and evidence regions must remain distinct."]),
56
56
  vocab("claim-supporting-visual", ["template-claim-text-panel", "template-visual-slot-panel"], ["claim", "visual"], ["claim", "visual"], ["Visual slot may be replaced by image, chart, table, or diagram container."]),
57
57
  vocab("metric-highlight", ["template-stat-grid"], ["metrics"], ["metrics", "insight"], ["Metric values should remain visible outside prose."]),
58
- vocab("chart-takeaways", ["template-chart-panel", "template-chart-takeaway-panel"], ["visual", "takeaways"], ["visual", "takeaways"], ["Chart/image slot and takeaway text panel must both remain present."]),
58
+ vocab("chart-takeaways", ["template-chart-panel", "template-chart-takeaway-panel", "template-text-panel--color"], ["visual", "takeaways"], ["visual", "takeaways"], ["Chart/image slot and color takeaway text panel must both remain present."]),
59
+ vocab("table", ["template-table-layout", "template-table-wrap", "template-table", "template-side-panel", "template-text-panel", "template-text-panel--clear"], ["text-card", "table"], ["text-card", "table"], ["Left clear text card explains how to read the structured table.", "Table headers and body should remain structured, not prose-only."]),
59
60
  vocab("table-comparison", ["template-table-wrap", "template-table"], ["table"], ["table", "insight"], ["Table headers and body should remain structured, not prose-only."]),
60
61
  vocab("milestone", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy", "template-insight-icon"], ["timeline"], ["timeline"], ["Each milestone item must keep dot and copy as sibling anchors inside one item.", "Milestone cards reuse .template-card; highlight uses the item modifier."]),
61
- vocab("timeline", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy"], ["timeline"], ["timeline", "insight"], ["Each timeline item must keep dot and copy as sibling anchors inside one item.", "The optional insight slot explains the sequence without replacing event copy."]),
62
+ vocab("timeline", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy"], ["timeline"], ["timeline", "insight"], ["Each timeline item must keep dot and copy as sibling anchors inside one item.", "The optional color insight slot explains the sequence without replacing event copy."]),
62
63
  vocab("process-steps", ["template-steps", "template-step-number"], ["steps"], ["steps"], ["Steps should remain ordered in DOM order."]),
63
64
  vocab("recommendation-decision", ["template-card"], ["recommendation", "rationale", "next-steps"], ["recommendation", "rationale", "next-steps"], ["Keep recommendation, rationale, and next steps separate."]),
64
65
  vocab("risks-tradeoffs", ["template-card"], ["risks"], ["risks"], ["Risk/tradeoff cards should name uncertainty explicitly."]),
@@ -91,6 +92,8 @@ const additionalClasses = [
91
92
  "template-chart-takeaway-list",
92
93
  "template-chart-takeaway-item",
93
94
  "template-bar",
95
+ "template-table-layout",
96
+ "template-table-region",
94
97
  "template-table",
95
98
  "template-table-wrap",
96
99
  "template-side-panel",
@@ -99,6 +102,9 @@ const additionalClasses = [
99
102
  "template-side-panel--left",
100
103
  "template-side-panel--right",
101
104
  "template-text-panel",
105
+ "template-text-panel--plain",
106
+ "template-text-panel--clear",
107
+ "template-text-panel--color",
102
108
  "template-text-panel-title",
103
109
  "template-text-panel-body",
104
110
  "template-insight-panel",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cyber-dash-tech/revela",
3
- "version": "0.19.2",
3
+ "version": "0.19.3",
4
4
  "description": "Codex-first CLI/MCP workspace for trusted narrative artifacts from local sources, research, and evidence",
5
5
  "type": "module",
6
6
  "main": "./index.ts",
package/plugins/revela/.codex-plugin/plugin.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "revela",
3
- "version": "0.19.2",
3
+ "version": "0.19.3",
4
4
  "description": "Use Revela in Codex to specify, research, plan, make, and export trusted narrative decision artifacts.",
5
5
  "author": {
6
6
  "name": "cyber-dash-tech",