@cyber-dash-tech/revela 0.17.3 → 0.17.5

package/designs/monet/DESIGN.md

@@ -480,6 +480,9 @@ These rules are mandatory for Monet.
 - **Sparse slides depend on image weight.** If content is light, the photo or page framing must hold the composition.
 - **No glass cards, neon KPI styling, or startup-product chrome.** Monet is editorial and print-adjacent.
 - **Visual hierarchy is strict:** eyebrow -> heading -> body -> caption.
+- **Icon system is Lucide.** For ordinary UI, semantic, status, category, process, and navigation icons, use Lucide (`data-lucide`). Do not hand-write inline SVG for icons. SVG is allowed only for intentional decorative motifs, illustrations, or design-specific artwork. If any `data-lucide` icon is present, load Lucide via CDN and call `lucide.createIcons()` after `SlidePresentation`.
+- **Chart system is ECharts.** Data charts default to ECharts inside `echart-panel`. Do not use hand-written SVG, div/CSS shapes, canvas mocks, or static faux charts as data-chart substitutes. SVG remains acceptable for decorative motifs, diagrams, or illustrations, not data charts. Before creating or changing a chart, fetch the `echart-panel` component and `section: "chart-rules"`; if chart rules or runtime are unavailable, report the gap instead of inventing a fake chart fallback.
+- **Start from foundation.** New deck HTML starts from `@design:foundation`. Do not recreate foundation CSS, JavaScript, or the HTML skeleton from memory. Prefer a foundation helper when available; otherwise fetch `section: "foundation"` before writing a new deck shell. Existing deck edits preserve the current foundation unless the user asks for foundation repair or QA reports a foundation contract problem.
 
 ### Common Mistakes
 
@@ -823,6 +826,31 @@ Every slot accepts 1 or more components. The LLM decides what each slot contains
 
 Use these components when a page needs repeatable editorial modules inside a larger layout. Components define the block itself, not the page grid around it.
 
+<!-- @component:box:start -->
+#### Box
+
+Card/group primitive for one idea, case, evidence item, metric, objection, risk, or action. Put `text-panel`, `media`, `echart-panel`, `data-table`, `stat-card`, or `quote` inside a box when they support the same idea.
+
+```html
+<div class="box">
+  <div class="text-panel text-panel--plain">
+    <div class="text-panel-body">
+      <p class="eyebrow">Evidence</p>
+      <h3>One clear idea</h3>
+      <p>Short supporting copy or source-bound explanation.</p>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.box { height: 100%; min-height: 0; padding: 28px; border: 1px solid var(--line); background: rgba(255,255,255,0.46); display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
+.box--quiet { background: transparent; }
+.box--mist { background: rgba(240,244,247,0.72); }
+.box--dark { background: #0d1a24; --text-primary:#f0f4f7; --text-secondary:rgba(240,244,247,0.72); --text-muted:rgba(240,244,247,0.55); --line:rgba(240,244,247,0.16); }
+```
+<!-- @component:box:end -->
+
 
 
 <!-- @component:text-panel:start -->
@@ -937,6 +965,35 @@ Rules:
 - **`editorial-list` inside `--dark`.** Add `style="--accent-earth:rgba(240,244,247,0.72)"` on the `<ul>` wrapper so the bullet squares read against the dark background.
 <!-- @component:text-panel:end -->
 
+<!-- @component:media:start -->
+#### Media
+
+Normal image, screenshot, diagram, logo, or portrait component. Keep important visual information understandable. Do not use `media` for full-bleed covers/dividers/closings; use `hero` for those.
+
+```html
+<figure class="media">
+  <div class="media-frame">
+    <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1200&auto=format&fit=crop" alt="Atmospheric water garden detail">
+  </div>
+  <figcaption class="media-caption source-note">Optional source or field note</figcaption>
+</figure>
+```
+
+```css
+.media { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+.media-frame { position: relative; overflow: hidden; background: transparent; width: 100%; flex: 1; min-height: 0; }
+.media-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
+.media--contain .media-frame img { object-fit: contain; }
+.media-caption { margin-top: 0; font-size: 11px; line-height: 1.45; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
+.media-caption.source, .media-caption.source-note { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 1.35; letter-spacing: 0; text-transform: none; }
+```
+
+Rules:
+- Use `media` for screenshots, charts exported as images, diagrams, logos, portraits, and evidence visuals that must stay readable.
+- Use `object-fit: contain` through `media--contain` for screenshots, diagrams, and logos when cropping would remove information.
+- Put `media` inside a `box` when the visual and text support one semantic idea.
+<!-- @component:media:end -->
+
 <!-- @component:stat-card:start -->
 #### Stat Card
 
@@ -1010,7 +1067,7 @@ Rules:
 - **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 -->
+<!-- @compat:editorial-image-top:start -->
 #### Editorial Image Top
 
 Image-first editorial module: image on top, text below. Best for highlight grids, product/material stories, and any module where the picture should lead before the reader enters the copy.
@@ -1094,9 +1151,9 @@ Rules:
 - **Image aspect ratio.** Aim for 16:9 or 3:2 crops for the image block. Portrait crops create tall image zones that push text down and unbalance the composition.
 - **Kicker icon size.** Keep Lucide SVG icons at 16–20px. Larger icons shift visual weight from the image to the label zone.
 - **`editorial-list` font-size.** Override to `font-size:13px;gap:10px` inline when used inside a very narrow copy zone — the base `editorial-list` is `17px/gap:14px`, which may be too large for tight columns.
-<!-- @component:editorial-image-top:end -->
+<!-- @compat:editorial-image-top:end -->
 
-<!-- @component:editorial-text-top:start -->
+<!-- @compat:editorial-text-top:start -->
 #### Editorial Text Top
 
 Text-first editorial module: text on top, image below. Best for narrative snippets, report-style explanations, or blocks where the image serves as evidence rather than the primary hook.
@@ -1160,9 +1217,9 @@ Rules:
 - **Same height/stretch rule as `editorial-image-top`.** Do not set fixed heights; let parent grid stretch control the column.
 - **When used as a center spine in `highlight-cols`,** this is the one component that may legitimately be taller than its neighbors. That density imbalance is intentional — do not try to equalize it with padding or extra content in the outer columns.
 - **`editorial-list` font-size.** Override to `font-size:13px;gap:10px` inline when used inside a very narrow copy zone — the base `editorial-list` is `17px/gap:14px`, which may be too large for tight columns.
-<!-- @component:editorial-text-top:end -->
+<!-- @compat:editorial-text-top:end -->
 
-<!-- @component:editorial-text-left:start -->
+<!-- @compat:editorial-text-left:start -->
 #### Editorial Text Left
 
 Horizontal editorial module: a full-width title band on top, with text on the left and a visual slot on the right below. Best for compact feature rows or any slot where a wide-but-short frame suits a side-by-side composition with a clear heading above.
@@ -1274,7 +1331,7 @@ Rules:
 - **`echart-container` in visual slot.** Set `width:100%;height:100%` on the container and call `echarts.init()` after `SlidePresentation` is instantiated. The `position:relative;overflow:hidden` on `.editorial-text-left-visual` contains the canvas correctly.
 - **`image-title` in visual slot.** The component is self-contained and fills `width:100%;height:100%` automatically. Use `image-title--right` modifier with a bottom-heavy overlay and right-biased blur mask for the most common editorial orientation.
 - **Dark background.** Override CSS variables on `.editorial-text-left` to cascade into both the copy and visual zones: `--text-primary`, `--text-secondary`, `--text-muted`, `--line`, `--line-strong` — all set to white-family values.
-<!-- @component:editorial-text-left:end -->
+<!-- @compat:editorial-text-left:end -->
 
 <!-- @component:echart-panel:start -->
 #### EChart Panel
@@ -1357,7 +1414,11 @@ Rules:
 - **Chart sizing for `narrative-hero-left-dark`.** The left 7.8fr column is wide. A donut or candlestick chart works best centered with some breathing room. Add `padding: 24px 32px` to `.echart-container` to prevent the chart from touching the column edges.
 <!-- @component:echart-panel:end -->
 
-<!-- @component:flow-horizontal:start -->
+<!-- @component:steps:start -->
+#### Steps
+
+Monet step and phase sequences use the flow-horizontal and flow-vertical implementations. Use `.flow-horizontal` for left-to-right process stages and `.flow-vertical` for top-to-bottom phases.
+
 #### Flow Horizontal
 
 Horizontal step or phase sequence. Use for process stages, numbered definitions, or parallel concepts that should be read left to right. Suitable for 2–5 items.
@@ -1487,9 +1548,9 @@ Rules:
 - **Step copy length directly affects column balance.** One step with a long paragraph will push its column taller than the others and break the horizontal rhythm. Trim all steps to roughly equal length (2–4 lines each).
 - **Number card design.** Each `.flow-number` uses two overlapping squares: a white `::before` base square (with border) and a blue `::after` top square (`--accent-earth`) rotated by `--fn-rot`. Set `data-n="01"` on the element (the `::after` reads it via `content: attr(data-n)`). Vary `--fn-rot` per item (e.g. `-9deg`, `7deg`, `-6deg`, `10deg`) for a hand-placed impression.
 - **Horizontal rule connector.** The `::before` pseudo-element on `.flow-horizontal` draws a full-width line at `top: 18px` (vertical centre of the 36px number box). `.flow-number` sits above it via `z-index: 1`; its `::before` background is set to `var(--bg-page)` to mask the line behind the white square. On dark backgrounds, override `.flow-horizontal .flow-number::before { background: <dark-bg-color>; }` and set `.flow-horizontal::before { background: rgba(240,244,247,0.15); }`.
-<!-- @component:flow-horizontal:end -->
+<!-- flow-horizontal implementation ends -->
 
-<!-- @component:flow-vertical:start -->
+<!-- flow-vertical implementation starts -->
 #### Flow Vertical
 
 Vertical step or timeline sequence. Use for chronological phases, execution stages, or progress narratives that should be read top to bottom. Suitable for 2–6 items.
@@ -1587,7 +1648,7 @@ Rules:
 - **Number card design (same as flow-horizontal).** Use `data-n="01"` and `style="--fn-rot:-8deg;"` on each `.flow-number`. Vary the rotation angle per item.
 - **Dark text overrides.** Flow-number `::before` border: `rgba(240,244,247,0.3)`; `::after` background: a darker accent or `rgba(41,128,175,0.85)`. h4: `color:#f0f4f7`; p: `color:rgba(240,244,247,0.7)`. Also override the connecting line: `background:rgba(240,244,247,0.2)`.
 - **Column height constraint.** `flow-vertical` expands naturally with content. In a two-column layout, ensure the opposing column (`text-panel` or `echart-panel`) has enough content to avoid a large height mismatch.
-<!-- @component:flow-vertical:end -->
+<!-- @component:steps:end -->
 
 <!-- @component:data-table:start -->
 #### Data Table
@@ -1781,7 +1842,11 @@ Rules:
 
 
 
-<!-- @component:image-title:start -->
+<!-- @component:hero:start -->
+#### Hero
+
+Monet hero slides use the image-title implementation for full-bleed cover, closing, atmospheric section divider, or strong visual statement slides.
+
 #### Image Title
 
 Self-contained full-canvas component: a dominant photograph with a directional blur layer, a gradient overlay, and a foreground text stack — all composited inside one element. Use for cover slides, closing slides, atmospheric section dividers, or any full-bleed spread where a single image should dominate the entire canvas.
@@ -1945,7 +2010,7 @@ Rules:
 - **`--right` closing variant.** Mirror the blur mask: use `mask-image:linear-gradient(to right, transparent 0%, transparent 20%, black 100%)`. The right side stays blurred (text zone); the left side of the image stays sharp.
 - **`--center` variant.** Use a radial or symmetric overlay: `radial-gradient(ellipse at center, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.20) 100%)` or a flat `rgba(5,5,5,0.55)`. Center blur mask: `mask-image:radial-gradient(ellipse at center, black 0%, transparent 80%)`.
 - **Subtitle width on `--right`.** `.image-title-subtitle` inherits `max-width:480px` which is set for left-aligned text. On `--right`, override to match the `.image-title-body` width: `style="max-width:520px;margin-left:auto;"`.
-<!-- @component:image-title:end -->
+<!-- @component:hero:end -->
 
 <!-- @component:toc:start -->
 #### TOC Panel
@@ -2368,7 +2433,11 @@ Omit `--light` only on slides with a white/light background.
 
 <!-- @component:page-number:end -->
 
-<!-- @component:timeline-journey-horizontal:start -->
+<!-- @component:roadmap-horizontal:start -->
+#### Roadmap Horizontal
+
+Monet horizontal roadmaps use the timeline-journey-horizontal implementation.
+
 #### Timeline Journey Horizontal
 
 A horizontal milestone timeline with a central axis line. Nodes sit on the axis; a dashed vertical stem leads to a tip node, with date, title, and description text alongside. Alternate nodes above and below the axis for rhythm. Suitable for 4–8 milestones across a chronological arc, transformation story, or multi-year programme recap.
@@ -2534,9 +2603,13 @@ Rules:
 - **Adjust stem length**: Change `--tjh-stem-h` to lengthen or shorten the dashed connector.
 - **Dark background overrides**: Set `--line-strong: rgba(240,244,247,0.25)` on `.tjh`, override `.tjh-axis { background }`, set `.tjh-title { color: #f0f4f7 }`, `.tjh-text { color: rgba(240,244,247,0.7) }`. The `--tjh-item-color` accent colours work on dark backgrounds without change.
 - **Fewer nodes**: For 4–5 nodes, widen `--tjh-col` by using a smaller denominator (e.g. `calc(100% / 5)`), and space `left` values accordingly.
-<!-- @component:timeline-journey-horizontal:end -->
+<!-- @component:roadmap-horizontal:end -->
+
+<!-- @component:roadmap-vertical:start -->
+#### Roadmap Vertical
+
+Monet vertical roadmaps use the timeline-journey-vertical implementation.
 
-<!-- @component:timeline-journey-vertical:start -->
 #### Timeline Journey Vertical
 
 A vertical milestone timeline with a central axis line. Nodes sit on the axis; a horizontal dashed stem leads to a tip dot, with date, title, and description text alongside. Alternate nodes left and right of the axis for rhythm. Suitable for 3–8 milestones across a chronological arc, transformation story, or multi-year programme recap.
@@ -2731,6 +2804,33 @@ Rules:
 - **Dark background overrides**: set on the `.tjv` wrapper — `--line-strong: rgba(240,244,247,0.25)` (axis + stem), `.tjv-title { color: #f0f4f7 }`, `.tjv-text { color: rgba(240,244,247,0.7) }`. The `--tjv-item-color` accent colours work on dark backgrounds without change.
 - **Fewer nodes (3–4)**: increase spacing — use `top` values like `15%, 35%, 55%, 75%` to prevent the timeline from clustering at the top.
 - **More nodes (6–8)**: keep `.tjv-text` to 1-2 lines and increase vertical spacing between nodes if needed. Treat `17px` as the default body size; only use a smaller local override in exceptional dense layouts.
-<!-- @component:timeline-journey-vertical:end -->
+<!-- @component:roadmap-vertical:end -->
 
 <!-- @design:components:end -->
+
+<!-- @design:chart-rules:start -->
+
+### Data Visualization (ECharts)
+
+- Chart system is ECharts. Data charts should use `echarts.init()` with an `echart-panel` container, not hand-written SVG, div/CSS shapes, canvas mocks, or static faux charts.
+- Monet charts should feel calm and art-book-like: soft contrast, restrained labels, limited series count, and no dashboard chrome, glow, or excessive gridlines.
+- Use `--accent-earth`, `--accent-olive`, `--accent-stone`, and `--accent-sage` for primary/supporting series. Use `--accent-danger` only for negative indicators. Derive colors from CSS variables with `getComputedStyle(document.documentElement)` instead of hard-coding unrelated palettes.
+- Keep chart containers inside `echart-panel` so QA can measure stable geometry. `.echart-container` must have stable sizing through explicit width/height or flex sizing with `min-height: 0`.
+- Give every chart a unique id. Initialise with `echarts.init()` after `SlidePresentation` is instantiated, and call `chart.resize()` on window resize.
+- Set `backgroundColor: "transparent"` in chart options. Set text, axis, legend, grid, and tooltip colors explicitly; ECharts canvas text does not inherit CSS reliably.
+- Always include a short chart caption or source note when data is shown.
+- Do not use fake chart fallback when ECharts runtime or chart rules are missing. Report the missing runtime/rules or use an approved local/runtime dependency.
+
+Recommended ECharts defaults:
+
+```javascript
+const styles = getComputedStyle(document.documentElement);
+const chartText = styles.getPropertyValue('--text-secondary').trim();
+const chartMuted = styles.getPropertyValue('--text-muted').trim();
+const chartLine = styles.getPropertyValue('--line').trim();
+const primary = styles.getPropertyValue('--accent-earth').trim();
+const secondary = styles.getPropertyValue('--accent-olive').trim();
+const soft = styles.getPropertyValue('--accent-sage').trim();
+```
+
+<!-- @design:chart-rules:end -->

package/designs/starter/DESIGN.md

@@ -233,6 +233,9 @@ new SlidePresentation();
 - **Stable layout CSS.** Do not rewrite base layout/container CSS unless the structure itself must change. Prefer tokens, typography, component skins, and small motif components.
 - **Reusable class vocabulary.** New classes must be documented in this DESIGN.md. Avoid many one-off selectors in generated decks.
 - **SVG is exceptional.** Use decorative SVG only when the user explicitly asks for an illustration/icon-like visual or when design authoring requires a motif.
+- **Icon system is Lucide.** For ordinary UI, semantic, status, category, process, and navigation icons, use Lucide (`data-lucide`). Do not hand-write inline SVG for icons. SVG is allowed only for intentional decorative motifs, illustrations, or design-specific artwork. If any `data-lucide` icon is present, load Lucide via CDN and call `lucide.createIcons()` after `SlidePresentation`.
+- **Chart system is ECharts.** Data charts default to ECharts inside `echart-panel`. Do not use hand-written SVG, div/CSS shapes, canvas mocks, or static faux charts as data-chart substitutes. SVG remains acceptable for decorative motifs, diagrams, or illustrations, not data charts. Before creating or changing a chart, fetch the `echart-panel` component and `section: "chart-rules"`; if chart rules or runtime are unavailable, report the gap instead of inventing a fake chart fallback.
+- **Start from foundation.** New deck HTML starts from `@design:foundation`. Do not recreate foundation CSS, JavaScript, or the HTML skeleton from memory. Prefer a foundation helper when available; otherwise fetch `section: "foundation"` before writing a new deck shell. Existing deck edits preserve the current foundation unless the user asks for foundation repair or QA reports a foundation contract problem.
 - **Images for photographic references.** Use image treatment rules rather than fake SVG when the reference is photographic, UI, webpage, or product imagery.
 - **Content pages need a stable title block.** Except cover, TOC, closing, section divider, and full-bleed hero slides, every normal content slide should include a visible title block from the upper-left safe area. It should contain a compact chapter/section label plus a slide title written as the page's claim or takeaway.
 - **Do not hide the page title inside a card.** Body components may have their own headings, but the slide-level title block should remain separate and easy to scan unless the chosen layout explicitly defines a compact side-title variant.
@@ -880,11 +883,14 @@ Rules:
 
 ### Data Visualization (ECharts)
 
-- Use neutral chart styling by default: clean axes, limited series count, and restrained labels.
-- Use `--accent-primary` for the main series and `--accent-secondary` for supporting series.
-- Avoid dashboard chrome, glowing charts, and excessive gridlines.
+- Chart system is ECharts. Data charts should use `echarts.init()` with an `echart-panel` container, not hand-written SVG, div/CSS shapes, canvas mocks, or static faux charts.
+- Use neutral chart styling by default: clean axes, limited series count, restrained labels, and transparent backgrounds.
+- Use `--accent-primary` for the main series and `--accent-secondary` for supporting series. Derive colors from CSS variables with `getComputedStyle(document.documentElement)` instead of hard-coding unrelated palettes.
+- Keep chart containers inside `echart-panel` so QA can measure stable geometry. `.echart-container` must have stable sizing through explicit width/height or flex sizing with `min-height: 0`.
+- Give every chart a unique id. Initialise with `echarts.init()` after `SlidePresentation` is instantiated, and call `chart.resize()` on window resize.
+- Set `backgroundColor: "transparent"` in chart options. Set text, axis, legend, grid, and tooltip colors explicitly; ECharts canvas text does not inherit CSS reliably.
 - Always include a short chart caption or source note when data is shown.
-- Keep chart containers inside `echart-panel` so QA can measure stable geometry.
+- Do not use fake chart fallback when ECharts runtime or chart rules are missing. Report the missing runtime/rules or use an approved local/runtime dependency.
 
 Recommended ECharts defaults:
 

package/designs/summit/DESIGN.md

@@ -443,6 +443,9 @@ These rules are mandatory for Summit.
 - **Text panels are not decorative rule panels.** Do not add a default left border, vertical accent bar, yellow/gold line, or inline rule to `text-panel`. Use typography, spacing, boxes, stats, quotes, or layout-level dividers for emphasis.
 - **Titles are Title Case.** Do not set `text-transform:uppercase` on `h1`, `h2`, `h3`, or `h4` titles. Uppercase is reserved for eyebrows, captions, metadata labels, short codes, and date/code-like markers.
 - **Components are transparent by default.** Component primitives should not bring their own paper/background fill. Let `.page`, layout containers, or explicit modifier variants provide background color when needed.
+- **Icon system is Lucide.** For ordinary UI, semantic, status, category, process, and navigation icons, use Lucide (`data-lucide`). Do not hand-write inline SVG for icons. SVG is allowed only for intentional decorative motifs, illustrations, or design-specific artwork. If any `data-lucide` icon is present, load Lucide via CDN and call `lucide.createIcons()` after `SlidePresentation`.
+- **Chart system is ECharts.** Data charts default to ECharts inside `echart-panel`. Do not use hand-written SVG, div/CSS shapes, canvas mocks, or static faux charts as data-chart substitutes. SVG remains acceptable for decorative motifs, diagrams, or illustrations, not data charts. Before creating or changing a chart, fetch the `echart-panel` component and `section: "chart-rules"`; if chart rules or runtime are unavailable, report the gap instead of inventing a fake chart fallback.
+- **Start from foundation.** New deck HTML starts from `@design:foundation`. Do not recreate foundation CSS, JavaScript, or the HTML skeleton from memory. Prefer a foundation helper when available; otherwise fetch `section: "foundation"` before writing a new deck shell. Existing deck edits preserve the current foundation unless the user asks for foundation repair or QA reports a foundation contract problem.
 
 ### Common Mistakes
 
@@ -2607,3 +2610,30 @@ Rules:
 <!-- @component:roadmap-vertical:end -->
 
 <!-- @design:components:end -->
+
+<!-- @design:chart-rules:start -->
+
+### Data Visualization (ECharts)
+
+- Chart system is ECharts. Data charts should use `echarts.init()` with an `echart-panel` container, not hand-written SVG, div/CSS shapes, canvas mocks, or static faux charts.
+- Summit charts should feel editorial and report-like: calm typography, limited series count, restrained labels, and no dashboard chrome, glow, or excessive gridlines.
+- Use `--accent-earth`, `--accent-olive`, and `--accent-gold` for primary/supporting series. Use `--accent-danger` only for negative indicators. Derive colors from CSS variables with `getComputedStyle(document.documentElement)` instead of hard-coding unrelated palettes.
+- Keep chart containers inside `echart-panel` so QA can measure stable geometry. `.echart-container` must have stable sizing through explicit width/height or flex sizing with `min-height: 0`.
+- Give every chart a unique id. Initialise with `echarts.init()` after `SlidePresentation` is instantiated, and call `chart.resize()` on window resize.
+- Set `backgroundColor: "transparent"` in chart options. Set text, axis, legend, grid, and tooltip colors explicitly; ECharts canvas text does not inherit CSS reliably.
+- Always include a short chart caption or source note when data is shown.
+- Do not use fake chart fallback when ECharts runtime or chart rules are missing. Report the missing runtime/rules or use an approved local/runtime dependency.
+
+Recommended ECharts defaults:
+
+```javascript
+const styles = getComputedStyle(document.documentElement);
+const chartText = styles.getPropertyValue('--text-secondary').trim();
+const chartMuted = styles.getPropertyValue('--text-muted').trim();
+const chartLine = styles.getPropertyValue('--line').trim();
+const primary = styles.getPropertyValue('--accent-earth').trim();
+const secondary = styles.getPropertyValue('--accent-olive').trim();
+const highlight = styles.getPropertyValue('--accent-gold').trim();
+```
+
+<!-- @design:chart-rules:end -->

package/lib/edit/prompt.ts

@@ -79,6 +79,9 @@ Instructions:
 - Pure artifact polish such as layout, spacing, typography, alignment, color, image crop, animation, export fidelity, runtime JavaScript fixes, or deck HTML contract fixes may remain an artifact-level edit.
 - If the request mixes content meaning and visual polish, treat it as narrative-impacting unless the user clarifies otherwise.
 - Preserve the existing deck structure, active design language, typography, spacing system, animations, and slide count unless the comment explicitly asks otherwise.
+- Before patching ${"`decks/*.html`"}, call ${"`revela-designs`"} with ${"`action: \"read\"`"} and ${"`section: \"rules\"`"} to fetch the active design rules for this edit pass.
+- If the edit changes layout, component structure, typography scale, visual hierarchy, chart usage, icon usage, media treatment, or design-system classes, fetch the relevant ${"`revela-designs`"} layout/component details before editing. Fetch ${"`section: \"chart-rules\"`"} before changing or adding ECharts.
+- Follow the fetched design rules and vocabulary exactly. Do not invent layout classes, component names, CSS variables, icon systems, or visual effects from model memory or the existing deck alone.
 - If an asset/drop payload is present, this is an asset placement request. Use only the saved local asset path from the asset payload in deck HTML. Prefer asset.deckPath when present because it is relative to the target HTML file; otherwise use asset.path.
 - Do not write remote imageUrl, thumbnailUrl, source page URLs, or ${"`/__revela_asset`"} proxy URLs into deck HTML.
 - Logo assets should remain small, clear, and brand-like; do not use logos as decorative backgrounds.

package/lib/edit/server.ts

@@ -2,6 +2,8 @@ import { randomBytes } from "crypto"
 import { existsSync, readFileSync, statSync } from "fs"
 import { fileURLToPath } from "url"
 import { dirname, extname, isAbsolute, resolve, sep } from "path"
+import { ctx } from "../ctx"
+import { buildPrompt } from "../prompt-builder"
 import type { EditableDeck } from "./resolve-deck"
 import { buildEditPrompt, type EditCommentPayload } from "./prompt"
 
@@ -405,6 +407,9 @@ async function handleComment(req: Request, session: EditSession): Promise<Respon
   const elements = Array.isArray(body.elements) ? body.elements : []
   if (!comment && comments.length === 0) return jsonResponse({ ok: false, error: "Comment is required" }, 400)
 
+  ctx.enabled = true
+  buildPrompt({ mode: "deck-render" })
+
   const prompt = buildEditPrompt({
     ...body,
     deck: session.deck,

package/lib/prompt-builder.ts

@@ -202,6 +202,7 @@ function buildDesignLayer(designName: string): string {
       "",
       "| Section | Fetch with |",
       "|---|---|",
+      "| Design composition and usage rules | `section: \"rules\"` |",
       "| Layout HTML/CSS details | `layout: \"<name>\"` (see Layout Index above) |",
       "| Component CSS/HTML details | `component: \"<name>\"` (see Component Index above) |",
       "| Data Visualization (ECharts) | `section: \"chart-rules\"` |",

package/lib/refine/server.ts

@@ -2,8 +2,10 @@ import { randomBytes } from "crypto"
 import { existsSync, readFileSync, statSync } from "fs"
 import { fileURLToPath } from "url"
 import { dirname, extname, isAbsolute, relative, resolve, sep } from "path"
+import { ctx } from "../ctx"
 import type { EditableDeck } from "../edit/resolve-deck"
 import { buildEditPrompt, type EditCommentPayload } from "../edit/prompt"
+import { buildPrompt } from "../prompt-builder"
 import type { InspectionElementSnapshot } from "../inspection-context/match"
 import { buildInspectionPrompt } from "../inspect/prompt"
 import { projectWorkspaceElement } from "../inspect/request"
@@ -715,6 +717,9 @@ async function handleComment(req: Request, session: EditSession): Promise<Respon
   const elements = Array.isArray(body.elements) ? body.elements : []
   if (!comment && comments.length === 0) return jsonResponse({ ok: false, error: "Comment is required" }, 400)
 
+  ctx.enabled = true
+  buildPrompt({ mode: "deck-render" })
+
   const prompt = buildEditPrompt({
     ...body,
     deck: session.deck,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-dash-tech/revela",
-  "version": "0.17.3",
+  "version": "0.17.5",
   "description": "OpenCode plugin for trusted narrative artifacts from local sources, research, and evidence",
   "type": "module",
   "main": "./index.ts",

package/skill/SKILL.md

@@ -193,16 +193,20 @@ If a write produces QA hard errors, fix them before continuing.
 Before writing or materially changing HTML:
 
 1. Read the deck-plan projection's layout and component names.
-2. Call `revela-designs` with `action: "read"` and `layout` set to all required
+2. Call `revela-designs` with `action: "read"` and `section: "rules"` to fetch
+   the active design's current composition and usage rules.
+3. Call `revela-designs` with `action: "read"` and `layout` set to all required
    layout names, comma-separated.
-3. Call `revela-designs` with `action: "read"` and `component` set to all
+4. Call `revela-designs` with `action: "read"` and `component` set to all
    required component names, comma-separated.
-4. Fetch `section: "chart-rules"` before using ECharts.
-5. Do not update legacy `requiredInputs`; design fetching is an execution step,
+5. Fetch `section: "chart-rules"` before using ECharts.
+6. Do not update legacy `requiredInputs`; design fetching is an execution step,
    not a workflow permission gate.
 
 Never generate HTML from memory or prior knowledge of a design. Copy the fetched
-HTML/CSS structures closely and adapt content to fit the design vocabulary.
+HTML/CSS structures closely and adapt content to fit the design vocabulary. Do
+not treat the injected design summary as a substitute for the fetched `rules`,
+layout, and component details when generating or materially changing HTML.
 
 The active design's complete visual specification is injected below after the
 `---` separator. It is the sole visual reference for generating slides.
@@ -227,7 +231,8 @@ Required contract:
 - Do not use 0-based `data-index` as slide identity.
 - Keep the canvas exactly 1920x1080 and 16:9.
 - Keep all CSS inline in one `<style>` block and all JS inline in one `<script>`
-  block, except approved CDNs for fonts, Lucide icons, and ECharts when needed.
+  block, except approved CDNs for fonts, ECharts when needed, or libraries
+  explicitly required by fetched design/component rules.
 - Use vanilla JS only. No React, Vue, jQuery, or external application framework.
 - All JS methods must be fully implemented. No empty stubs and no TODO comments.
 - Do not add deck-local editing JavaScript, `contenteditable`, `editable` classes,
@@ -338,8 +343,6 @@ instructions, secrets, or unverified claims.
 - Use semantic HTML where practical.
 - Full keyboard navigation must work.
 - `prefers-reduced-motion` must disable transitions/animations.
-- Use Lucide icons only when icons are needed; load via CDN and call
-  `lucide.createIcons()`.
 - Avoid plain background plus unstyled bullet lists.
 - Every slide needs one clear message and one dominant visual focal point.
 - Keep bullet lists short. Prefer semantic boxes, evidence cards, charts, tables,

package/tools/designs.ts

@@ -25,7 +25,7 @@ export default tool({
     "Use action 'activate' to switch to a different design (requires name). " +
     "Use action 'install' to add a new design from a URL, local path, or github:user/repo shorthand (requires source). " +
     "Use action 'remove' to uninstall a design (requires name). " +
-    "Use action 'read' to fetch on-demand design content: pass layout (comma-separated names) to get full HTML/CSS for specific layouts, pass component (comma-separated names) to get full CSS/HTML for specific components, or section ('chart-rules' | 'foundation' | 'layouts' | 'components') to get an entire section. Pass neither to get the Component Index table. " +
+    "Use action 'read' to fetch on-demand design content: pass layout (comma-separated names) to get full HTML/CSS for specific layouts, pass component (comma-separated names) to get full CSS/HTML for specific components, or section ('rules' | 'chart-rules' | 'foundation' | 'layouts' | 'components') to get an entire section. Pass neither to get the Component Index table. " +
     "After activating a new design, the system prompt is automatically rebuilt.",
   args: {
     action: tool.schema