@cyber-dash-tech/revela 0.17.4 → 0.17.5

package/designs/monet/DESIGN.md

@@ -481,6 +481,8 @@ These rules are mandatory for Monet.
 - **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
 
@@ -2805,3 +2807,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.
+- 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

@@ -234,6 +234,8 @@ new SlidePresentation();
 - **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.
@@ -881,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

@@ -444,6 +444,8 @@ These rules are mandatory for Summit.
 - **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
 
@@ -2608,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/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.4",
+  "version": "0.17.5",
   "description": "OpenCode plugin for trusted narrative artifacts from local sources, research, and evidence",
   "type": "module",
   "main": "./index.ts",