@inflexa-ai/harness 0.17.0 → 0.18.0

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[]>;

package/dist/report-render/render.js

@@ -0,0 +1,125 @@
+/**
+ * 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 { err, ok } from "neverthrow";
+import { renderChart } from "./views/chart-view.js";
+import { deriveChartOption } from "./chart.js";
+import { assemblePage, renderReferenceSection } from "./views/page-view.js";
+import { renderClaim, renderNav, renderSection, renderText } from "./views/prose.js";
+import { ReferenceLedger } from "./references.js";
+import { renderCitation, renderFigure, renderMetric, renderTable } from "./views/values.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 function renderReportPage(document, values) {
+    const problems = [];
+    const ledger = new ReferenceLedger();
+    const content = [];
+    for (const section of document.sections) {
+        content.push(renderBlock(section, values, ledger, 0, problems));
+    }
+    if (problems.length > 0) {
+        return err(problems);
+    }
+    const nav = renderNav(document.sections);
+    const references = renderReferenceSection(ledger);
+    return ok(assemblePage(document.title, nav, content.join(""), references));
+}
+/**
+ * Render one block to its HTML, and collect a value problem into `problems`. A block whose value is missing
+ * or of the wrong shape adds one problem and renders nothing. The empty result drops out, because the whole
+ * render fails when any problem exists.
+ */
+function renderBlock(block, values, ledger, depth, problems) {
+    switch (block.kind) {
+        case "text":
+            return renderText(block);
+        case "claim":
+            return renderClaim(block, ledger);
+        case "citation":
+            return renderCitation(block, ledger);
+        case "metric": {
+            const entry = values[block.id];
+            if (entry === undefined) {
+                problems.push(missingValue(block.id, "scalar"));
+                return "";
+            }
+            if (entry.type !== "scalar") {
+                problems.push(wrongShape(block.id, entry.type, "scalar"));
+                return "";
+            }
+            return renderMetric(block, entry);
+        }
+        case "table": {
+            const entry = values[block.id];
+            if (entry === undefined) {
+                problems.push(missingValue(block.id, "table"));
+                return "";
+            }
+            if (entry.type !== "table") {
+                problems.push(wrongShape(block.id, entry.type, "table"));
+                return "";
+            }
+            return renderTable(block, entry);
+        }
+        case "figure": {
+            const entry = values[block.id];
+            if (entry === undefined) {
+                problems.push(missingValue(block.id, "figure"));
+                return "";
+            }
+            if (entry.type !== "figure") {
+                problems.push(wrongShape(block.id, entry.type, "figure"));
+                return "";
+            }
+            return renderFigure(block, entry);
+        }
+        case "chart": {
+            const entry = values[block.id];
+            if (entry === undefined) {
+                problems.push(missingValue(block.id, "table"));
+                return "";
+            }
+            if (entry.type !== "table") {
+                problems.push(wrongShape(block.id, entry.type, "table"));
+                return "";
+            }
+            const option = deriveChartOption(block, entry.rows, entry.columns);
+            if (option.isErr()) {
+                problems.push(option.error);
+                return "";
+            }
+            return renderChart(block, option.value);
+        }
+        case "section": {
+            const parts = [];
+            for (const child of block.blocks) {
+                parts.push(renderBlock(child, values, ledger, depth + 1, problems));
+            }
+            return renderSection(block, depth, parts.join(""));
+        }
+    }
+}
+/** A `missing-value` problem that names the block and the shape that it needs. */
+function missingValue(blockId, expected) {
+    return { blockId, kind: "missing-value", detail: `The block needs a ${expected} value entry.` };
+}
+/** A `wrong-shape` problem that names the block, the shape that arrived, and the shape that it needs. */
+function wrongShape(blockId, actual, expected) {
+    return { blockId, kind: "wrong-shape", detail: `The block needs a ${expected} value entry, but the entry is a ${actual}.` };
+}

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

@@ -0,0 +1,13 @@
+/**
+ * The one script sink helper.
+ *
+ * The markup runtime escapes each child and each attribute value. A `<script>` sink is the exception,
+ * because the JSON inside it goes to the page through `raw()`, and `raw()` adds no protection. Thus this
+ * helper is the sole guard of the two JSON sinks.
+ *
+ * A `</script` sequence inside a data cell can close the element too soon. The helper serializes the value,
+ * then it replaces every `<` with `\u003c`. The replacement makes a `</script` sequence unrepresentable,
+ * and the JSON value stays identical, because the JSON parser reads `\u003c` as `<`.
+ */
+/** Serialize a value to JSON that is safe inside a `<script>` element. */
+export declare function scriptJson(value: unknown): string;

package/dist/report-render/script-json.js

@@ -0,0 +1,15 @@
+/**
+ * The one script sink helper.
+ *
+ * The markup runtime escapes each child and each attribute value. A `<script>` sink is the exception,
+ * because the JSON inside it goes to the page through `raw()`, and `raw()` adds no protection. Thus this
+ * helper is the sole guard of the two JSON sinks.
+ *
+ * A `</script` sequence inside a data cell can close the element too soon. The helper serializes the value,
+ * then it replaces every `<` with `\u003c`. The replacement makes a `</script` sequence unrepresentable,
+ * and the JSON value stays identical, because the JSON parser reads `\u003c` as `<`.
+ */
+/** Serialize a value to JSON that is safe inside a `<script>` element. */
+export function scriptJson(value) {
+    return JSON.stringify(value).replace(/</g, "\\u003c");
+}

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

@@ -0,0 +1,39 @@
+/**
+ * The value model that the renderer takes, keyed by block id.
+ *
+ * The renderer declares its own value union. It does not take `ResolvedValue`, because a `ResolvedValue`
+ * can be a file echo of a path and a hash. A page cannot show a path and a hash. The caller owns the
+ * policy that turns the echo into a source string. The string is a data URI, or a URL that the host
+ * serves. Thus a `figure` here carries a ready `src` string, and the renderer holds no policy about the
+ * image bytes.
+ */
+/**
+ * The value that one block resolves to, as a closed union. A `scalar` gives one number or one string. A
+ * `table` gives the rows and the optional column order. A `figure` gives a ready source string. A
+ * `citation` echoes one external id.
+ */
+export type RenderValue = {
+    type: "scalar";
+    value: string | number;
+} | {
+    type: "table";
+    rows: Array<Record<string, string | number>>;
+    columns?: string[];
+} | {
+    type: "figure";
+    src: string;
+} | {
+    type: "citation";
+    id: string;
+};
+/**
+ * One typed fault of a render. `blockId` names the block. `kind` names the class of the fault. `detail`
+ * names what the block expected. The render collects every problem, and it returns them at once.
+ */
+export interface RenderProblem {
+    blockId: string;
+    kind: "missing-value" | "wrong-shape" | "invalid-chart-input";
+    detail: string;
+}
+/** The value map that the renderer takes, keyed by block id. */
+export type RenderValues = Record<string, RenderValue>;

package/dist/report-render/types.js

@@ -0,0 +1,10 @@
+/**
+ * The value model that the renderer takes, keyed by block id.
+ *
+ * The renderer declares its own value union. It does not take `ResolvedValue`, because a `ResolvedValue`
+ * can be a file echo of a path and a hash. A page cannot show a path and a hash. The caller owns the
+ * policy that turns the echo into a source string. The string is a data URI, or a URL that the host
+ * serves. Thus a `figure` here carries a ready `src` string, and the renderer holds no policy about the
+ * image bytes.
+ */
+export {};

package/dist/report-render/views/chart-view.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The chart container markup.
+ *
+ * The bootstrap in `page.ts` reads the option from the next element sibling of the container. Thus the
+ * `<script type="application/json">` element MUST follow the container div with no element between them.
+ * The title renders above the container, and the caption renders below.
+ */
+import type { ChartBlock } from "../../contracts/report-blocks.js";
+import type { EchartOption } from "../chart.js";
+/** Render the container markup for a chart. */
+export declare function renderChart(block: ChartBlock, option: EchartOption): string;

package/dist/report-render/views/chart-view.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+/**
+ * The chart container markup.
+ *
+ * The bootstrap in `page.ts` reads the option from the next element sibling of the container. Thus the
+ * `<script type="application/json">` element MUST follow the container div with no element between them.
+ * The title renders above the container, and the caption renders below.
+ */
+import { raw } from "hono/html";
+import { scriptJson } from "../script-json.js";
+/** Render the container markup for a chart. */
+export function renderChart(block, option) {
+    const containerId = chartContainerId(block.id);
+    // The JSON goes to the page through `raw()`, thus `scriptJson` is the sole guard of this sink. It
+    // replaces every `<` with `\u003c`, thus a `</script` sequence in a string cell cannot close the
+    // element early. The JSON parser reads `\u003c` as `<`, thus the option value stays exact.
+    const json = scriptJson(option);
+    return String(_jsxs(_Fragment, { children: [block.title !== undefined ? _jsx("p", { class: "chart-title", children: block.title }) : null, _jsx("div", { id: containerId, "data-echarts-id": block.id, class: "chart-container" }), _jsx("script", { type: "application/json", children: raw(json) }), block.caption !== undefined ? _jsx("p", { class: "chart-caption", children: block.caption }) : null] }));
+}
+/** The container id derives from the block id, thus the id stays stable across renders. */
+function chartContainerId(blockId) {
+    return `chart-${blockId}`;
+}