@cyber-dash-tech/revela 0.1.11 → 0.1.13

package/designs/summit/DESIGN.md

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

package/package.json

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

package/skill/SKILL.md

@@ -34,7 +34,39 @@ Before writing any HTML, ask the user these questions **in a single message**
 
 If the user's first message already answers most of these, skip what's clear and
 only ask about what's missing. If the message is detailed enough, proceed directly
-to Phase 2.
+to Phase 1.5.
+
+Once you have the user's answers, **derive the deck slug** from the topic:
+lowercase, hyphens, no spaces (e.g. "AI Investment Shift" → `ai-investment-shift`).
+Tell the user: "I'll save this deck as `slides/{slug}.html`." They can correct the
+name at this point.
+
+### Phase 1.5 — Deck Initialization & Resume Check
+
+After confirming the deck slug, check whether this deck has been worked on before:
+
+1. Run `ls researches/{slug}/` (or `glob researches/{slug}/*.md`).
+2. **If the directory does not exist (new deck):** proceed to Phase 2.
+3. **If research files already exist (resuming):** list the files and ask the user:
+
+   > 我发现 `researches/{slug}/` 下已有以下研究文件：
+   > - `market-data.md`
+   > - `competitor-profile.md`
+   > - _(etc.)_
+   >
+   > 你想：
+   > a. 直接使用现有研究，跳到幻灯片计划阶段
+   > b. 补充某些方向的研究（请告诉我哪些方向）
+   > c. 全部重新研究
+
+   Then act based on the user's reply:
+   - **a** → skip Phase 3, go directly to Phase 4 (read existing files first)
+   - **b** → run research agents only for the specified axes, then Phase 4
+   - **c** → proceed to Phase 2 normally (full research)
+
+All subsequent file paths in this session use the confirmed slug:
+- Slides file: `slides/{slug}.html`
+- Research dir: `researches/{slug}/`
 
 ### Phase 2 — Select Design
 
@@ -127,8 +159,9 @@ research workhorse — not an optional enhancement.
 
 The research agent searches the web using `websearch` for broad discovery and
 `webfetch` for depth on specific pages, reads workspace documents, and writes
-structured findings to a single file `researches/{topic-slug}/{axis-name}.md`
-in the workspace.
+structured findings to a single file `researches/{slug}/{axis-name}.md`
+in the workspace. Use the deck slug confirmed in Phase 1.5 — do not invent a
+different slug at this point.
 
 ##### Parallelization Rule
 
@@ -151,14 +184,14 @@ need 2 axes; a complex comparison may need 4 or more. Typical decompositions:
 Launch ALL agents in a single message (parallel Task tool calls).
 
 Each agent's brief should specify:
-- The topic slug (shared, e.g. `ai-investment-shift`)
+- The deck slug from Phase 1.5 (e.g. `ai-investment-shift`) — all agents share the same slug
 - The axis name for their file (e.g. `anthropic-profile`, `openai-challenges`, `market-trends`)
 - What to research and what time period to focus on
 - An explicit instruction to use `websearch` (e.g. "Use the websearch tool to find relevant market reports, news, and data for this axis.")
 
 ##### After Agents Complete
 
-List and read the findings files: `ls researches/{topic-slug}/`, then `read`
+List and read the findings files: `ls researches/{slug}/`, then `read`
 each `.md` file. Each file contains structured `## Data`, `## Cases`,
 `## Images`, and `## Gaps` sections — use these directly as slide material.
 Cross-reference agent findings with workspace documents (Layer 1). Flag any
@@ -313,8 +346,7 @@ Once the fetch is complete, generate the complete HTML file in one shot.
 
 - Output **only** the raw HTML — no markdown fences, no explanation before or after
 - Create a `slides/` directory in the current working directory if it doesn't already exist
-- Write the file to `slides/<topic-slug>.html`
-  (e.g. "AI Future" → `slides/ai-future.html`)
+- Write the file to `slides/{slug}.html` using the deck slug confirmed in Phase 1.5
 - The file must be completely self-contained (all CSS and JS inline)
 
 ### Phase 6 — Iterate
@@ -325,7 +357,7 @@ After generating, briefly tell the user:
 - One line invitation to request changes
 
 For change requests: re-generate the **entire** file (don't patch). Apply the
-change and silently overwrite the same `slides/<topic-slug>.html` filename.
+change and silently overwrite the same `slides/{slug}.html` filename.
 
 ---
 
@@ -450,130 +482,6 @@ Lowercase, hyphens, no spaces, `.html` extension. Always place files inside the
 
 ---
 
-## Design Generation Mode
-
-Enter this mode when the user wants to create a new visual design — triggered by
-phrases like "create a design", "save this style as a design", "generate a
-design from this image/screenshot/design", "make a design based on this".
-
-Design generation produces a reusable **style definition** (not a full
-presentation). Once saved, the design appears in the design picker and
-applies its visual style to all future presentations.
-
----
-
-### Phase T1 — Analyse the reference
-
-Study the uploaded image(s) or described style and extract:
-
-- **Color palette**: exact hex values for background, surface, text (primary +
-  secondary), accent, border. If extracting from an image, sample the dominant
-  colors precisely.
-- **Typography feel**: serif vs sans-serif, weight choices, size hierarchy.
-  Pick real web fonts from Fontshare (`https://api.fontshare.com`) or Google
-  Fonts that match the feel — never use system fonts.
-- **Layout density**: generous whitespace vs compact, centered vs left-aligned.
-- **Animation mood**: subtle & professional, bold & energetic, or minimal
-  (no animation).
-  - **Aesthetic name**: 2–3 words in kebab-case that describe the look, e.g.
-    `warm-editorial`, `neon-brutalist`, `soft-corporate`. Never include the word
-    "design".
-
-Briefly tell the user what you extracted (palette, fonts, mood) and the name
-you chose. Ask if they want any adjustments before proceeding.
-
----
-
-### Phase T2 — Generate skill text
-
-Write the complete DESIGN.md body for the new design. Use the **default design's
-DESIGN.md** as the canonical reference for section structure. Your output must
-include all of the same sections: Color Palette, Typography, Background Layers,
-Slide Layout, Component Library, Layout Primitives, Data Visualization (ECharts),
-Composition Guide, Code Blocks, Do & Don't, Reduced Motion.
-
----
-
-### Phase T3 — Generate preview.html
-
-Write a self-contained HTML file with **at least 7 slides** that demonstrates
-the design can handle all common presentation content types:
-
-1. **Cover** — title, subtitle, date/author
-2. **Content with parallel items** — multiple items presented side by side
-   (e.g., features, principles, team members)
-3. **Content with quantitative data** — large numbers, metrics, or statistics
-4. **Content with two distinct areas** — narrative paired with supporting
-   evidence, or data paired with explanation
-5. **Content with sequential process** — ordered steps or timeline
-6. **Content with a quote or key message** — emphasis on a single statement
-7. **Closing** — thank you, CTA, or summary
-
-Rules:
-- Use the exact CSS variables from the skill text you just generated
-- Each slide should demonstrate the design's visual style — collectively
-  showcase all components at least once (cards, stat cards, quote block,
-  step flow, evidence lists, chart containers, decorative fills, etc.)
-- Must use the 1920×1080 canvas with `transform: scale()` and `setupScaling()` JS
-- Must look great at 900×600px (DesignModal preview iframe size — canvas auto-scales)
-- Include working keyboard navigation, nav dots, and progress bar
-
----
-
-### Phase T4 — Save the design
-
-Save the new design by writing the files and installing via the `designs` tool.
-
-**Step 1 — Write files to a temporary directory:**
-
-Create a temporary directory and write two files:
-- `DESIGN.md` — with YAML frontmatter (`name`, `description`, `author`, `version`)
-  followed by the full skill text body from Phase T2
-- `preview.html` — the full HTML from Phase T3
-
-```
-/tmp/revela-design-<name>/
-├── DESIGN.md
-└── preview.html
-```
-
-**Step 2 — Install the design:**
-
-Call the `designs` tool with action `"install"` and `source` pointing to the
-temporary directory path. Optionally pass `name` to override the design name.
-
-**Step 3 — Activate the design:**
-
-Call the `designs` tool with action `"activate"` and the design name.
-
-**Step 4 — Clean up:**
-
-Remove the temporary directory.
-
----
-
-### Phase T5 — Confirm
-
-Tell the user:
-
-> Design **`<name>`** has been created and activated.
-> Open the design picker (the design button in the bottom bar) to see it.
-> Your next presentation will use this style automatically.
-
-Do not generate a presentation unless the user asks for one.
-
----
-
-### Design Generation Rules
-
-- **Never** hardcode colors — always use CSS custom properties.
-- **Never** name a design after a brand or person. Use descriptive aesthetic names.
-- The `skill_md` you generate becomes the AI's only style reference — be precise.
-- preview.html must use the **exact same CSS variables** as the skill text.
-- If the user uploads multiple images with conflicting styles, ask which one to use.
-
----
-
 ## Active Design Reference
 
 The active design name is in the HTML comment at the top of this prompt: