@inflexa-ai/harness 0.17.0 → 0.19.0

package/dist/report-render/page.d.ts

@@ -0,0 +1,127 @@
+/**
+ * The page constants: the CDN pins, the inline style, the ECharts theme, and the chart bootstrap.
+ *
+ * These constants are copies. The old template pack at `templates/report-html` holds the source, and the
+ * old render path owns that directory. The renderer never reads that directory at run time, thus the
+ * output stays a pure function of its inputs. A copy that drifts is a maintenance cost, and it is the
+ * price of a page with no local asset and no template engine.
+ */
+/**
+ * The head references: the Tailwind runtime, the ECharts runtime, the two fonts, and the preconnect. Each
+ * tag carries the pinned version and, where the source pins one, the integrity hash. The bytes are exact
+ * copies, thus the page stays deterministic and the hashes stay valid.
+ */
+export declare const CDN_HEAD = "<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.2/dist/index.global.min.js\" integrity=\"sha384-shaHAtPgz0ulP7R/YmFe0nZtC8FxdhJPi73vwJQcADVttxvHLJBJt/pjzkLSbIvL\" crossorigin=\"anonymous\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js\" integrity=\"sha384-Mx5lkUEQPM1pOJCwFtUICyX45KNojXbkWdYhkKUKsbv391mavbfoAmONbzkgYPzR\" crossorigin=\"anonymous\"></script>\n<link rel=\"preconnect\" href=\"https://cdn.jsdelivr.net\" crossorigin>\n<link href=\"https://cdn.jsdelivr.net/npm/@fontsource-variable/space-grotesk@5.1.1/index.css\" rel=\"stylesheet\" integrity=\"sha384-b3Dtcpab/ltw+oDnVHstCCa9ENEb2hKouCSRAfb8o0ROkWOb2uNWYG6+l7HGrHmG\" crossorigin=\"anonymous\">\n<link href=\"https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-mono@5.1.1/index.css\" rel=\"stylesheet\">";
+/**
+ * The style rules of the page. The renderer inlines them in one `<style>` block, thus the page holds the
+ * whole design token set and every component rule with no external stylesheet.
+ */
+export declare const PAGE_CSS = "/* \u2500\u2500 Color Palette \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:root {\n  /* Primary Scale */\n  --color-primary-50:  #f0f1fe;   /* Tag bg, CTA section bg */\n  --color-primary-100: #dde0fc;\n  --color-primary-200: #bcc2f9;   /* Badge borders, corner accent default */\n  --color-primary-300: #9ba5f5;   /* Corner button accent default */\n  --color-primary-400: #7987f0;   /* Section illustration icons */\n  --color-primary-500: #576dea;   /* Primary action, section labels, links */\n  --color-primary-600: #4458d4;   /* Button hover */\n  --color-primary-700: #3545b0;   /* Tag text on primary-50 bg */\n\n  /* Text */\n  --color-heading:        #0f172a; /* slate-900 \u2014 all headings */\n  --color-text:           #475569; /* slate-600 \u2014 body text */\n  --color-text-secondary: #64748b; /* slate-500 \u2014 captions, metadata */\n  --color-text-muted:     #94a3b8; /* slate-400 \u2014 timestamps, footnotes */\n\n  /* Surface */\n  --color-bg:             #ffffff; /* Page background (white) */\n  --color-bg-alt:         #f8fafc; /* Alternating section bg (slate-50) */\n  --color-card:           #ffffff; /* Cards (white) */\n  --color-border:         #e2e8f0; /* slate-200 \u2014 card borders, dividers */\n  --color-border-hover:   #cbd5e1; /* slate-300 \u2014 hover borders */\n\n  /* Data Visualization */\n  --color-up:   #ef4444; /* Red 500 \u2014 upregulated, positive */\n  --color-down: #576dea; /* Primary 500 \u2014 downregulated, negative */\n  --color-ns:   #94a3b8; /* Slate 400 \u2014 not significant */\n\n  /* Semantic (Tags \u2014 solid bg + colored text) */\n  --color-high-bg:    #f0fdf4;  /* green-50 */\n  --color-high-text:  #15803d;  /* green-700 */\n  --color-medium-bg:  #fffbeb;  /* amber-50 */\n  --color-medium-text:#b45309;  /* amber-700 */\n  --color-low-bg:     #fef2f2;  /* red-50 */\n  --color-low-text:   #b91c1c;  /* red-700 */\n\n  /* Stat card accent colors */\n  --color-stat-primary: #576dea;\n  --color-stat-green:   #22c55e;\n  --color-stat-red:     #ef4444;\n  --color-stat-purple:  #a78bfa;\n  --color-stat-amber:   #f59e0b;\n}\n\n/* \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\nbody {\n  font-family: 'Space Grotesk Variable', system-ui, sans-serif;\n  font-size: 16px;\n  line-height: 1.6;\n  color: var(--color-text);\n}\n\n.font-mono, code, .gene {\n  font-family: 'IBM Plex Mono Variable', ui-monospace, monospace;\n}\n\n/* Rule: Headings use font-sans (Space Grotesk), never font-mono.\n   Labels, tags, badges, data, product names always use font-mono (IBM Plex Mono). */\n\n/* \u2500\u2500 Corner Accent Cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.corner-accents {\n  position: relative;\n  border: 1px solid var(--color-border);\n  background: var(--color-card);\n  /* No border-radius \u2014 square corners */\n}\n.corner-accents::before,\n.corner-accents::after {\n  content: '';\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  transition: all 0.3s ease;\n  pointer-events: none;\n}\n.corner-accents::before {\n  top: -1px; left: -1px;\n  border-top: 2px solid var(--color-primary-200);\n  border-left: 2px solid var(--color-primary-200);\n}\n.corner-accents::after {\n  bottom: -1px; right: -1px;\n  border-bottom: 2px solid var(--color-primary-200);\n  border-right: 2px solid var(--color-primary-200);\n}\n.corner-accents:hover::before,\n.corner-accents:hover::after {\n  width: 28px;\n  height: 28px;\n  border-color: var(--color-primary-500);\n}\n.corner-accents:hover {\n  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.08);\n}\n\n/* \u2500\u2500 Window Chrome Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* Exception: uses rounded-xl (only rounded component) */\n.window-chrome {\n  border-radius: 12px;\n  border: 1px solid var(--color-border);\n  background: var(--color-card);\n  box-shadow: 0 8px 30px -8px rgba(15,23,42,0.08), 0 4px 12px -4px rgba(15,23,42,0.04);\n  transition: all 0.5s ease;\n}\n.window-chrome:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 25px 50px -12px rgba(15,23,42,0.18), 0 12px 24px -8px rgba(15,23,42,0.1);\n  border-color: var(--color-border-hover);\n}\n.window-chrome .chrome-dots span { transition: background-color 0.3s ease; }\n.window-chrome:hover .chrome-dots .dot-1 { background-color: #fb7185; }\n.window-chrome:hover .chrome-dots .dot-2 { background-color: #fbbf24; }\n.window-chrome:hover .chrome-dots .dot-3 { background-color: #4ade80; }\n\n/* \u2500\u2500 Terminal Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.terminal-card {\n  position: relative;\n  overflow: hidden;\n}\n.terminal-card .terminal-header {\n  background: #1e293b; /* slate-800 */\n}\n.terminal-card .terminal-body-dark {\n  background: #0f172a; /* slate-900 */\n  color: #e2e8f0;\n}\n.terminal-card::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: 0;\n  background: repeating-linear-gradient(\n    0deg, transparent, transparent 2px,\n    rgba(148, 163, 184, 0.03) 2px, rgba(148, 163, 184, 0.03) 4px\n  );\n  transition: opacity 0.3s ease;\n}\n.terminal-card:hover::after { opacity: 1; }\n\n/* \u2500\u2500 Block Progress Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* Usage: <span class=\"block-progress\"><span class=\"filled-high\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588</span><span class=\"empty\">\u2591\u2591</span> <span class=\"score\">0.82</span></span> */\n.block-progress {\n  font-family: 'IBM Plex Mono Variable', ui-monospace, monospace;\n  font-size: 14px;\n}\n.block-progress .filled-high { color: var(--color-primary-500); } /* \u2265 0.8 */\n.block-progress .filled-mid  { color: #f59e0b; }                  /* \u2265 0.6 */\n.block-progress .filled-low  { color: #f43f5e; }                  /* < 0.6 */\n.block-progress .empty       { color: #e2e8f0; }\n.block-progress .score       { font-size: 12px; color: #94a3b8; margin-left: 8px; }\n\n/* \u2500\u2500 Sidebar Navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* When a sidebar is rendered (#report-sidebar), the body shifts right on lg+\n   to make room. Styling matches the corner-accent / mono-label language. */\n@media (min-width: 1024px) {\n  body:has(#report-sidebar) { padding-left: 15rem; }\n}\n.sidebar-link {\n  border-left: 2px solid transparent;\n}\n.sidebar-link.active {\n  color: var(--color-primary-500);\n  background-color: var(--color-primary-50);\n  border-left-color: var(--color-primary-500);\n  font-weight: 600;\n}\n\n/* \u2500\u2500 Insight Box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.insight-box {\n  background: var(--color-card);\n  border: 1px solid var(--color-border);\n  /* No border-radius \u2014 uses corner-accents class */\n}\n\n/* \u2500\u2500 Section Textures \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* Apply to <section>: combine one pattern + noise, e.g. class=\"texture-dots texture-noise\" */\n/* Textures should be felt, not seen \u2014 low opacity, faded edges */\n\n/* \u2500\u2500 Fade-In \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.fade-in {\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n}\n.fade-in-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n/* Stagger with data-delay attribute: <div class=\"fade-in\" data-delay=\"100\"> */";
+/**
+ * The registered name of the ECharts theme. The skeleton registers the theme under this name, and the
+ * bootstrap reads the same name. One source prevents a silent mismatch between the two sites.
+ */
+export declare const ECHARTS_THEME_NAME = "inflexa";
+/**
+ * The ECharts theme as a plain object. The renderer serializes this object and registers it, thus the
+ * theme never rides a JSON file and no run-time read is necessary. The palette and the axis styles mirror
+ * the light design tokens of the page.
+ */
+export declare const ECHARTS_THEME: {
+    color: string[];
+    backgroundColor: string;
+    textStyle: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+    };
+    title: {
+        show: boolean;
+    };
+    legend: {
+        bottom: number;
+        textStyle: {
+            fontSize: number;
+            color: string;
+        };
+        itemGap: number;
+        itemWidth: number;
+        itemHeight: number;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    tooltip: {
+        backgroundColor: string;
+        borderColor: string;
+        textStyle: {
+            color: string;
+            fontSize: number;
+        };
+        extraCssText: string;
+    };
+    toolbox: {
+        feature: {
+            saveAsImage: {
+                title: string;
+                pixelRatio: number;
+            };
+        };
+        iconStyle: {
+            borderColor: string;
+        };
+        right: number;
+        top: number;
+    };
+    xAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+            fontSize: number;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+                type: string;
+            };
+        };
+    };
+    yAxis: {
+        axisLine: {
+            show: boolean;
+        };
+        axisTick: {
+            show: boolean;
+        };
+        axisLabel: {
+            color: string;
+            fontSize: number;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+                type: string;
+            };
+        };
+    };
+};
+/**
+ * The page-side script that wires each chart. It finds every chart container, reads the option JSON from
+ * the sibling `<script type="application/json">` element, and initializes ECharts with the registered
+ * theme. The skeleton registers the theme before this script runs. A resize handler keeps each chart
+ * fit to the window.
+ */
+export declare const CHART_BOOTSTRAP: string;

package/dist/report-render/page.js

@@ -0,0 +1,307 @@
+/**
+ * The page constants: the CDN pins, the inline style, the ECharts theme, and the chart bootstrap.
+ *
+ * These constants are copies. The old template pack at `templates/report-html` holds the source, and the
+ * old render path owns that directory. The renderer never reads that directory at run time, thus the
+ * output stays a pure function of its inputs. A copy that drifts is a maintenance cost, and it is the
+ * price of a page with no local asset and no template engine.
+ */
+/**
+ * The head references: the Tailwind runtime, the ECharts runtime, the two fonts, and the preconnect. Each
+ * tag carries the pinned version and, where the source pins one, the integrity hash. The bytes are exact
+ * copies, thus the page stays deterministic and the hashes stay valid.
+ */
+export const CDN_HEAD = `<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.2/dist/index.global.min.js" integrity="sha384-shaHAtPgz0ulP7R/YmFe0nZtC8FxdhJPi73vwJQcADVttxvHLJBJt/pjzkLSbIvL" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js" integrity="sha384-Mx5lkUEQPM1pOJCwFtUICyX45KNojXbkWdYhkKUKsbv391mavbfoAmONbzkgYPzR" crossorigin="anonymous"></script>
+<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+<link href="https://cdn.jsdelivr.net/npm/@fontsource-variable/space-grotesk@5.1.1/index.css" rel="stylesheet" integrity="sha384-b3Dtcpab/ltw+oDnVHstCCa9ENEb2hKouCSRAfb8o0ROkWOb2uNWYG6+l7HGrHmG" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-mono@5.1.1/index.css" rel="stylesheet">`;
+/**
+ * The style rules of the page. The renderer inlines them in one `<style>` block, thus the page holds the
+ * whole design token set and every component rule with no external stylesheet.
+ */
+export const PAGE_CSS = `/* ── Color Palette ────────────────────────────────────── */
+:root {
+  /* Primary Scale */
+  --color-primary-50:  #f0f1fe;   /* Tag bg, CTA section bg */
+  --color-primary-100: #dde0fc;
+  --color-primary-200: #bcc2f9;   /* Badge borders, corner accent default */
+  --color-primary-300: #9ba5f5;   /* Corner button accent default */
+  --color-primary-400: #7987f0;   /* Section illustration icons */
+  --color-primary-500: #576dea;   /* Primary action, section labels, links */
+  --color-primary-600: #4458d4;   /* Button hover */
+  --color-primary-700: #3545b0;   /* Tag text on primary-50 bg */
+
+  /* Text */
+  --color-heading:        #0f172a; /* slate-900 — all headings */
+  --color-text:           #475569; /* slate-600 — body text */
+  --color-text-secondary: #64748b; /* slate-500 — captions, metadata */
+  --color-text-muted:     #94a3b8; /* slate-400 — timestamps, footnotes */
+
+  /* Surface */
+  --color-bg:             #ffffff; /* Page background (white) */
+  --color-bg-alt:         #f8fafc; /* Alternating section bg (slate-50) */
+  --color-card:           #ffffff; /* Cards (white) */
+  --color-border:         #e2e8f0; /* slate-200 — card borders, dividers */
+  --color-border-hover:   #cbd5e1; /* slate-300 — hover borders */
+
+  /* Data Visualization */
+  --color-up:   #ef4444; /* Red 500 — upregulated, positive */
+  --color-down: #576dea; /* Primary 500 — downregulated, negative */
+  --color-ns:   #94a3b8; /* Slate 400 — not significant */
+
+  /* Semantic (Tags — solid bg + colored text) */
+  --color-high-bg:    #f0fdf4;  /* green-50 */
+  --color-high-text:  #15803d;  /* green-700 */
+  --color-medium-bg:  #fffbeb;  /* amber-50 */
+  --color-medium-text:#b45309;  /* amber-700 */
+  --color-low-bg:     #fef2f2;  /* red-50 */
+  --color-low-text:   #b91c1c;  /* red-700 */
+
+  /* Stat card accent colors */
+  --color-stat-primary: #576dea;
+  --color-stat-green:   #22c55e;
+  --color-stat-red:     #ef4444;
+  --color-stat-purple:  #a78bfa;
+  --color-stat-amber:   #f59e0b;
+}
+
+/* ── Typography ───────────────────────────────────────── */
+body {
+  font-family: 'Space Grotesk Variable', system-ui, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--color-text);
+}
+
+.font-mono, code, .gene {
+  font-family: 'IBM Plex Mono Variable', ui-monospace, monospace;
+}
+
+/* Rule: Headings use font-sans (Space Grotesk), never font-mono.
+   Labels, tags, badges, data, product names always use font-mono (IBM Plex Mono). */
+
+/* ── Corner Accent Cards ─────────────────────────────── */
+.corner-accents {
+  position: relative;
+  border: 1px solid var(--color-border);
+  background: var(--color-card);
+  /* No border-radius — square corners */
+}
+.corner-accents::before,
+.corner-accents::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+.corner-accents::before {
+  top: -1px; left: -1px;
+  border-top: 2px solid var(--color-primary-200);
+  border-left: 2px solid var(--color-primary-200);
+}
+.corner-accents::after {
+  bottom: -1px; right: -1px;
+  border-bottom: 2px solid var(--color-primary-200);
+  border-right: 2px solid var(--color-primary-200);
+}
+.corner-accents:hover::before,
+.corner-accents:hover::after {
+  width: 28px;
+  height: 28px;
+  border-color: var(--color-primary-500);
+}
+.corner-accents:hover {
+  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.08);
+}
+
+/* ── Window Chrome Panel ─────────────────────────────── */
+/* Exception: uses rounded-xl (only rounded component) */
+.window-chrome {
+  border-radius: 12px;
+  border: 1px solid var(--color-border);
+  background: var(--color-card);
+  box-shadow: 0 8px 30px -8px rgba(15,23,42,0.08), 0 4px 12px -4px rgba(15,23,42,0.04);
+  transition: all 0.5s ease;
+}
+.window-chrome:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 25px 50px -12px rgba(15,23,42,0.18), 0 12px 24px -8px rgba(15,23,42,0.1);
+  border-color: var(--color-border-hover);
+}
+.window-chrome .chrome-dots span { transition: background-color 0.3s ease; }
+.window-chrome:hover .chrome-dots .dot-1 { background-color: #fb7185; }
+.window-chrome:hover .chrome-dots .dot-2 { background-color: #fbbf24; }
+.window-chrome:hover .chrome-dots .dot-3 { background-color: #4ade80; }
+
+/* ── Terminal Card ───────────────────────────────────── */
+.terminal-card {
+  position: relative;
+  overflow: hidden;
+}
+.terminal-card .terminal-header {
+  background: #1e293b; /* slate-800 */
+}
+.terminal-card .terminal-body-dark {
+  background: #0f172a; /* slate-900 */
+  color: #e2e8f0;
+}
+.terminal-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  background: repeating-linear-gradient(
+    0deg, transparent, transparent 2px,
+    rgba(148, 163, 184, 0.03) 2px, rgba(148, 163, 184, 0.03) 4px
+  );
+  transition: opacity 0.3s ease;
+}
+.terminal-card:hover::after { opacity: 1; }
+
+/* ── Block Progress Bar ──────────────────────────────── */
+/* Usage: <span class="block-progress"><span class="filled-high">████████</span><span class="empty">░░</span> <span class="score">0.82</span></span> */
+.block-progress {
+  font-family: 'IBM Plex Mono Variable', ui-monospace, monospace;
+  font-size: 14px;
+}
+.block-progress .filled-high { color: var(--color-primary-500); } /* ≥ 0.8 */
+.block-progress .filled-mid  { color: #f59e0b; }                  /* ≥ 0.6 */
+.block-progress .filled-low  { color: #f43f5e; }                  /* < 0.6 */
+.block-progress .empty       { color: #e2e8f0; }
+.block-progress .score       { font-size: 12px; color: #94a3b8; margin-left: 8px; }
+
+/* ── Sidebar Navigation ──────────────────────────────── */
+/* When a sidebar is rendered (#report-sidebar), the body shifts right on lg+
+   to make room. Styling matches the corner-accent / mono-label language. */
+@media (min-width: 1024px) {
+  body:has(#report-sidebar) { padding-left: 15rem; }
+}
+.sidebar-link {
+  border-left: 2px solid transparent;
+}
+.sidebar-link.active {
+  color: var(--color-primary-500);
+  background-color: var(--color-primary-50);
+  border-left-color: var(--color-primary-500);
+  font-weight: 600;
+}
+
+/* ── Insight Box ─────────────────────────────────────── */
+.insight-box {
+  background: var(--color-card);
+  border: 1px solid var(--color-border);
+  /* No border-radius — uses corner-accents class */
+}
+
+/* ── Section Textures ────────────────────────────────── */
+/* Apply to <section>: combine one pattern + noise, e.g. class="texture-dots texture-noise" */
+/* Textures should be felt, not seen — low opacity, faded edges */
+
+/* ── Fade-In ─────────────────────────────────────────── */
+.fade-in {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+}
+.fade-in-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+/* Stagger with data-delay attribute: <div class="fade-in" data-delay="100"> */`;
+/**
+ * The registered name of the ECharts theme. The skeleton registers the theme under this name, and the
+ * bootstrap reads the same name. One source prevents a silent mismatch between the two sites.
+ */
+export const ECHARTS_THEME_NAME = "inflexa";
+/**
+ * The ECharts theme as a plain object. The renderer serializes this object and registers it, thus the
+ * theme never rides a JSON file and no run-time read is necessary. The palette and the axis styles mirror
+ * the light design tokens of the page.
+ */
+export const ECHARTS_THEME = {
+    color: ["#576dea", "#ef4444", "#22c55e", "#a78bfa", "#f59e0b", "#ec4899", "#06b6d4", "#f97316", "#8b5cf6", "#14b8a6"],
+    backgroundColor: "transparent",
+    textStyle: {
+        fontFamily: "'Space Grotesk Variable', system-ui, sans-serif",
+        fontSize: 12,
+        color: "#64748b",
+    },
+    title: {
+        show: false,
+    },
+    legend: {
+        bottom: 0,
+        textStyle: { fontSize: 11, color: "#64748b" },
+        itemGap: 16,
+        itemWidth: 12,
+        itemHeight: 12,
+    },
+    grid: {
+        left: 60,
+        right: 24,
+        top: 24,
+        bottom: 48,
+        containLabel: false,
+    },
+    tooltip: {
+        backgroundColor: "#ffffff",
+        borderColor: "#e2e8f0",
+        textStyle: { color: "#334155", fontSize: 12 },
+        extraCssText: "border-radius: 4px; box-shadow: 0 4px 12px rgba(15,23,42,0.1);",
+    },
+    toolbox: {
+        feature: {
+            saveAsImage: { title: "Save", pixelRatio: 2 },
+        },
+        iconStyle: { borderColor: "#94a3b8" },
+        right: 16,
+        top: 0,
+    },
+    xAxis: {
+        axisLine: { lineStyle: { color: "#e2e8f0" } },
+        axisTick: { lineStyle: { color: "#e2e8f0" } },
+        axisLabel: { color: "#64748b", fontSize: 11 },
+        splitLine: { lineStyle: { color: "#f1f5f9", type: "dashed" } },
+    },
+    yAxis: {
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { color: "#64748b", fontSize: 11 },
+        splitLine: { lineStyle: { color: "#f1f5f9", type: "dashed" } },
+    },
+};
+/**
+ * The page-side script that wires each chart. It finds every chart container, reads the option JSON from
+ * the sibling `<script type="application/json">` element, and initializes ECharts with the registered
+ * theme. The skeleton registers the theme before this script runs. A resize handler keeps each chart
+ * fit to the window.
+ */
+export const CHART_BOOTSTRAP = `(function () {
+  if (typeof echarts === "undefined") {
+    return;
+  }
+  var containers = document.querySelectorAll("[data-echarts-id]");
+  for (var i = 0; i < containers.length; i++) {
+    var container = containers[i];
+    var optionScript = container.nextElementSibling;
+    if (!optionScript || optionScript.getAttribute("type") !== "application/json") {
+      continue;
+    }
+    var option = JSON.parse(optionScript.textContent || "{}");
+    var chart = echarts.init(container, ${JSON.stringify(ECHARTS_THEME_NAME)});
+    chart.setOption(option);
+  }
+  window.addEventListener("resize", function () {
+    var nodes = document.querySelectorAll("[data-echarts-id]");
+    for (var j = 0; j < nodes.length; j++) {
+      var instance = echarts.getInstanceByDom(nodes[j]);
+      if (instance) {
+        instance.resize();
+      }
+    }
+  });
+})();`;

package/dist/report-render/references.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The reference ledger state.
+ *
+ * A claim binds to evidence, and a citation block points at an external source. The ledger collects each
+ * reference in first-appearance order, and it gives one marker number to each distinct reference. A claim
+ * marker and a citation marker read from the same ledger, thus one reference that two blocks share gets
+ * one number and one list entry.
+ *
+ * Identity is the canonical serialization of the reference. `serializeReference` sorts the keys at every
+ * depth, thus two references match only when every field matches. The key order of the source object does
+ * not change the identity.
+ */
+import { type Reference } from "../contracts/report-reference.js";
+/**
+ * The mutable ledger of references.
+ *
+ * The page walk makes one ledger, and it threads the ledger through each claim and each citation. The
+ * order of the entries is the order of the first mark, thus the marker numbers count up by first
+ * appearance.
+ */
+export declare class ReferenceLedger {
+    private readonly order;
+    private readonly markers;
+    /**
+     * Give the marker number of a reference. A new reference gets the next number, and it joins the
+     * order. A reference that matches an earlier one gives the earlier number, thus the list holds it one
+     * time.
+     */
+    mark(reference: Reference): number;
+    /** The references in first-appearance order. The marker of an entry is its position plus one. */
+    entries(): readonly Reference[];
+}

package/dist/report-render/references.js

@@ -0,0 +1,44 @@
+/**
+ * The reference ledger state.
+ *
+ * A claim binds to evidence, and a citation block points at an external source. The ledger collects each
+ * reference in first-appearance order, and it gives one marker number to each distinct reference. A claim
+ * marker and a citation marker read from the same ledger, thus one reference that two blocks share gets
+ * one number and one list entry.
+ *
+ * Identity is the canonical serialization of the reference. `serializeReference` sorts the keys at every
+ * depth, thus two references match only when every field matches. The key order of the source object does
+ * not change the identity.
+ */
+import { serializeReference } from "../contracts/report-reference.js";
+/**
+ * The mutable ledger of references.
+ *
+ * The page walk makes one ledger, and it threads the ledger through each claim and each citation. The
+ * order of the entries is the order of the first mark, thus the marker numbers count up by first
+ * appearance.
+ */
+export class ReferenceLedger {
+    order = [];
+    markers = new Map();
+    /**
+     * Give the marker number of a reference. A new reference gets the next number, and it joins the
+     * order. A reference that matches an earlier one gives the earlier number, thus the list holds it one
+     * time.
+     */
+    mark(reference) {
+        const key = serializeReference(reference);
+        const seen = this.markers.get(key);
+        if (seen !== undefined) {
+            return seen;
+        }
+        const marker = this.order.length + 1;
+        this.markers.set(key, marker);
+        this.order.push(reference);
+        return marker;
+    }
+    /** The references in first-appearance order. The marker of an entry is its position plus one. */
+    entries() {
+        return this.order;
+    }
+}

package/dist/report-render/render.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The page walk: the document walk, the value-map validation, and the problem collection.
+ *
+ * `renderReportPage` walks the sections in document order. It dispatches each block to its kind renderer,
+ * and it validates the bound value against the shape that the block needs. A missing entry, or an entry of
+ * the wrong shape, becomes one typed problem. The walk collects every problem, thus one render reports each
+ * fault at one time. A page with no problem assembles to one HTML string.
+ *
+ * One shared `ReferenceLedger` threads through the whole walk. Thus a claim marker and a citation marker
+ * count by first appearance across the page, and a reference that two blocks share keeps one number and one
+ * list entry.
+ *
+ * The output is a pure function of the two inputs. The renderer reads no clock, no random value, and no
+ * locale. Thus the same document and the same values give the same bytes.
+ */
+import { type Result } from "neverthrow";
+import type { ReportDocument } from "../contracts/report-blocks.js";
+import type { RenderProblem, RenderValues } from "./types.js";
+/**
+ * Render a report document and its value map to one HTML string.
+ *
+ * The walk collects every value problem. When any problem exists, the render returns the problems and no
+ * HTML. When no problem exists, the render assembles the page and returns the string.
+ */
+export declare function renderReportPage(document: ReportDocument, values: RenderValues): Result<string, RenderProblem[]>;