@inflexa-ai/harness 0.19.1 → 0.19.2

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

@@ -1,123 +1,15 @@
 /**
- * The page constants: the CDN pins, the inline style, the ECharts theme, and the chart bootstrap.
+ * The page constants: the head references, the readiness names, and the two page-side scripts.
  *
- * 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.
+ * A script here is browser source text, not module code. Thus it reads no module binding, and each value
+ * that it needs is interpolated at build time. The style rules and the ECharts theme live in `design.ts`.
  */
 /**
- * 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.
+ * The head references of the staged assets. The page loads the chart runtime from the sibling assets
+ * directory, thus the head names no remote host. The manifest gives the staged name, thus the tag and the
+ * stage step of the caller cannot disagree.
  */
-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;
-            };
-        };
-    };
-};
+export declare const ASSET_HEAD: string;
 /**
  * The name of the readiness event, and the name of the window sentinel that guards a late listener. The
  * bootstrap below emits both names, thus this module owns them. A capture that waits for the page reads the
@@ -144,7 +36,32 @@ export declare const PAGE_READY_TIMEOUT_MS = 8000;
  * not at a timeout. The sentinel guards a listener that registers after the dispatch, thus a late listener
  * still resolves.
  *
+ * The signal passes through the reveal gate of the fade-in script. Thus the signal comes after the first
+ * reveal pass, and a capture reads a settled page instead of a page in the middle of a transition.
+ *
  * Each chart initializes inside a guard. One malformed option is exactly the fault that a look must
  * diagnose, thus it must never stop a sibling chart and it must never withhold the readiness signal.
  */
 export declare const CHART_BOOTSTRAP: string;
+/**
+ * The page-side script that reveals each `fade-in` element as it enters the viewport. The `data-delay`
+ * attribute holds a stagger in milliseconds, and the observer releases each element one time.
+ *
+ * The threshold is zero, thus one visible pixel reveals an element. A band is a whole top-level section,
+ * and a tall band can never cover a fraction of the viewport. A threshold above zero leaves such a band at
+ * zero opacity for the whole life of the page.
+ *
+ * The first callback of the observer is the first reveal pass. It reveals what the viewport already holds,
+ * and it drops the transition for that reveal with the `fade-in-instant` class. Thus the page settles in
+ * one frame. An element that arrives later keeps the transition and the stagger.
+ *
+ * The script installs the reveal gate on the window object before it observes anything. The chart bootstrap
+ * runs after this script and it signals readiness through that gate. Thus the readiness signal always comes
+ * after the first reveal pass. A page with no `fade-in` element, and a browser with no
+ * `IntersectionObserver`, opens the gate at once.
+ *
+ * A browser with no `IntersectionObserver` reveals every element at once. Thus the content is visible in
+ * each browser, and the reveal is decoration alone. The print rules and the reduced-motion rules show every
+ * element without this script.
+ */
+export declare const FADE_IN_OBSERVER = "(function () {\n  var waiting = [];\n  var settled = false;\n  function settle() {\n    if (settled) {\n      return;\n    }\n    settled = true;\n    for (var w = 0; w < waiting.length; w++) {\n      waiting[w]();\n    }\n    waiting = [];\n  }\n  window.__inflexaWhenRevealed = function (done) {\n    if (settled) {\n      done();\n      return;\n    }\n    waiting.push(done);\n  };\n  function reveal(node) {\n    node.classList.add(\"fade-in-visible\");\n  }\n  function revealSettled(node) {\n    node.classList.add(\"fade-in-instant\");\n    node.classList.add(\"fade-in-visible\");\n  }\n  function start() {\n    var nodes = document.querySelectorAll(\".fade-in\");\n    if (typeof IntersectionObserver === \"undefined\" || nodes.length === 0) {\n      for (var i = 0; i < nodes.length; i++) {\n        revealSettled(nodes[i]);\n      }\n      settle();\n      return;\n    }\n    var firstPass = true;\n    var observer = new IntersectionObserver(function (entries) {\n      var instant = firstPass;\n      firstPass = false;\n      for (var j = 0; j < entries.length; j++) {\n        var entry = entries[j];\n        if (!entry.isIntersecting) {\n          continue;\n        }\n        var target = entry.target;\n        observer.unobserve(target);\n        if (instant) {\n          revealSettled(target);\n          continue;\n        }\n        var delay = parseInt(target.getAttribute(\"data-delay\") || \"0\", 10) || 0;\n        setTimeout(reveal.bind(null, target), delay);\n      }\n      if (instant) {\n        settle();\n      }\n    }, { threshold: 0 });\n    for (var k = 0; k < nodes.length; k++) {\n      observer.observe(nodes[k]);\n    }\n    setTimeout(settle, 2000);\n  }\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", start);\n  } else {\n    start();\n  }\n})();";

package/dist/report-render/page.js

@@ -1,279 +1,17 @@
 /**
- * The page constants: the CDN pins, the inline style, the ECharts theme, and the chart bootstrap.
+ * The page constants: the head references, the readiness names, and the two page-side scripts.
  *
- * 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.
+ * A script here is browser source text, not module code. Thus it reads no module binding, and each value
+ * that it needs is interpolated at build time. The style rules and the ECharts theme live in `design.ts`.
  */
+import { assetSource, ECHARTS_ASSET } from "./assets.js";
+import { ECHARTS_THEME_NAME } from "./design.js";
 /**
- * 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.
+ * The head references of the staged assets. The page loads the chart runtime from the sibling assets
+ * directory, thus the head names no remote host. The manifest gives the staged name, thus the tag and the
+ * stage step of the caller cannot disagree.
  */
-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" } },
-    },
-};
+export const ASSET_HEAD = `<script src="${assetSource(ECHARTS_ASSET)}"></script>`;
 /**
  * The name of the readiness event, and the name of the window sentinel that guards a late listener. The
  * bootstrap below emits both names, thus this module owns them. A capture that waits for the page reads the
@@ -288,6 +26,24 @@ export const THEME_READY_SENTINEL = "__inflexaThemeReady";
  */
 export const PAGE_NAV_TIMEOUT_MS = 20_000;
 export const PAGE_READY_TIMEOUT_MS = 8_000;
+/**
+ * The name of the reveal gate on the window object. The fade-in script installs the gate, and the chart
+ * bootstrap reads it. Both scripts read this one constant, thus the installer and the reader cannot
+ * disagree over a rename.
+ *
+ * The gate takes one callback. It runs the callback when the first reveal pass completes, and immediately
+ * when that pass already completed. A page that carries no gate runs the callback at once, thus the
+ * bootstrap stays correct on its own.
+ */
+const REVEAL_GATE = "__inflexaWhenRevealed";
+/**
+ * The budget of the wait for the first observer callback, in milliseconds.
+ *
+ * The browser delivers that callback in the first rendering update after the observer registers. A page
+ * that updates no rendering, for example a hidden tab, delivers nothing. The budget releases the readiness
+ * signal in that condition, thus such a page still signals and the capture returns on the signal.
+ */
+const REVEAL_SETTLE_TIMEOUT_MS = 2_000;
 /**
  * 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
@@ -300,6 +56,9 @@ export const PAGE_READY_TIMEOUT_MS = 8_000;
  * not at a timeout. The sentinel guards a listener that registers after the dispatch, thus a late listener
  * still resolves.
  *
+ * The signal passes through the reveal gate of the fade-in script. Thus the signal comes after the first
+ * reveal pass, and a capture reads a settled page instead of a page in the middle of a transition.
+ *
  * Each chart initializes inside a guard. One malformed option is exactly the fault that a look must
  * diagnose, thus it must never stop a sibling chart and it must never withhold the readiness signal.
  */
@@ -308,8 +67,16 @@ export const CHART_BOOTSTRAP = `(function () {
     window.${THEME_READY_SENTINEL} = true;
     document.dispatchEvent(new Event(${JSON.stringify(THEME_READY_EVENT)}));
   }
+  function whenRevealed(done) {
+    var gate = window.${REVEAL_GATE};
+    if (typeof gate === "function") {
+      gate(done);
+      return;
+    }
+    done();
+  }
   if (typeof echarts === "undefined") {
-    signalReady();
+    whenRevealed(signalReady);
     return;
   }
   var containers = document.querySelectorAll("[data-echarts-id]");
@@ -336,5 +103,95 @@ export const CHART_BOOTSTRAP = `(function () {
       }
     }
   });
-  signalReady();
+  whenRevealed(signalReady);
+})();`;
+/**
+ * The page-side script that reveals each `fade-in` element as it enters the viewport. The `data-delay`
+ * attribute holds a stagger in milliseconds, and the observer releases each element one time.
+ *
+ * The threshold is zero, thus one visible pixel reveals an element. A band is a whole top-level section,
+ * and a tall band can never cover a fraction of the viewport. A threshold above zero leaves such a band at
+ * zero opacity for the whole life of the page.
+ *
+ * The first callback of the observer is the first reveal pass. It reveals what the viewport already holds,
+ * and it drops the transition for that reveal with the `fade-in-instant` class. Thus the page settles in
+ * one frame. An element that arrives later keeps the transition and the stagger.
+ *
+ * The script installs the reveal gate on the window object before it observes anything. The chart bootstrap
+ * runs after this script and it signals readiness through that gate. Thus the readiness signal always comes
+ * after the first reveal pass. A page with no `fade-in` element, and a browser with no
+ * `IntersectionObserver`, opens the gate at once.
+ *
+ * A browser with no `IntersectionObserver` reveals every element at once. Thus the content is visible in
+ * each browser, and the reveal is decoration alone. The print rules and the reduced-motion rules show every
+ * element without this script.
+ */
+export const FADE_IN_OBSERVER = `(function () {
+  var waiting = [];
+  var settled = false;
+  function settle() {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    for (var w = 0; w < waiting.length; w++) {
+      waiting[w]();
+    }
+    waiting = [];
+  }
+  window.${REVEAL_GATE} = function (done) {
+    if (settled) {
+      done();
+      return;
+    }
+    waiting.push(done);
+  };
+  function reveal(node) {
+    node.classList.add("fade-in-visible");
+  }
+  function revealSettled(node) {
+    node.classList.add("fade-in-instant");
+    node.classList.add("fade-in-visible");
+  }
+  function start() {
+    var nodes = document.querySelectorAll(".fade-in");
+    if (typeof IntersectionObserver === "undefined" || nodes.length === 0) {
+      for (var i = 0; i < nodes.length; i++) {
+        revealSettled(nodes[i]);
+      }
+      settle();
+      return;
+    }
+    var firstPass = true;
+    var observer = new IntersectionObserver(function (entries) {
+      var instant = firstPass;
+      firstPass = false;
+      for (var j = 0; j < entries.length; j++) {
+        var entry = entries[j];
+        if (!entry.isIntersecting) {
+          continue;
+        }
+        var target = entry.target;
+        observer.unobserve(target);
+        if (instant) {
+          revealSettled(target);
+          continue;
+        }
+        var delay = parseInt(target.getAttribute("data-delay") || "0", 10) || 0;
+        setTimeout(reveal.bind(null, target), delay);
+      }
+      if (instant) {
+        settle();
+      }
+    }, { threshold: 0 });
+    for (var k = 0; k < nodes.length; k++) {
+      observer.observe(nodes[k]);
+    }
+    setTimeout(settle, ${REVEAL_SETTLE_TIMEOUT_MS});
+  }
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", start);
+  } else {
+    start();
+  }
 })();`;