@legionworks/facet 1.9.0

package/templates/observability-map.svg

@@ -0,0 +1,101 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="760" viewBox="0 0 1200 760" role="img" aria-label="Observability architecture map">
+  <defs>
+    <linearGradient id="control-gradient" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#222436" />
+      <stop offset="1" stop-color="#1a1b26" />
+    </linearGradient>
+    <linearGradient id="signal-gradient" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#86e1fc" stop-opacity="0.18" />
+      <stop offset="1" stop-color="#c3e88d" stop-opacity="0.08" />
+    </linearGradient>
+    <linearGradient id="alert-gradient" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffc777" stop-opacity="0.22" />
+      <stop offset="1" stop-color="#ff757f" stop-opacity="0.08" />
+    </linearGradient>
+  </defs>
+
+  <g aria-label="signal sources">
+    <rect x="48" y="78" width="260" height="500" rx="18" fill="url(#control-gradient)" stroke="#3b4261" stroke-width="2" />
+    <text x="76" y="122" font-family="ui-monospace, Menlo, monospace" font-size="13" letter-spacing="2" fill="#86e1fc">SIGNAL SOURCES</text>
+    <text x="76" y="154" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#e6ecff">Release surface</text>
+
+    <g>
+      <rect x="76" y="190" width="204" height="82" rx="12" fill="#16161e" stroke="#545c7e" />
+      <text x="98" y="223" font-family="ui-monospace, Menlo, monospace" font-size="14" fill="#c8d3f5">publish envelope</text>
+      <text x="98" y="247" font-family="system-ui, sans-serif" font-size="12" fill="#828bb8">identity · policy · timing</text>
+    </g>
+    <g>
+      <rect x="76" y="304" width="204" height="82" rx="12" fill="#16161e" stroke="#545c7e" />
+      <text x="98" y="337" font-family="ui-monospace, Menlo, monospace" font-size="14" fill="#c8d3f5">tier 0 result</text>
+      <text x="98" y="361" font-family="system-ui, sans-serif" font-size="12" fill="#828bb8">parse counts · policy verdict</text>
+    </g>
+    <g>
+      <rect x="76" y="418" width="204" height="82" rx="12" fill="#16161e" stroke="#545c7e" />
+      <text x="98" y="451" font-family="ui-monospace, Menlo, monospace" font-size="14" fill="#c8d3f5">tier 1 evidence</text>
+      <text x="98" y="475" font-family="system-ui, sans-serif" font-size="12" fill="#828bb8">frame observation · screenshot</text>
+    </g>
+  </g>
+
+  <g aria-label="telemetry pipeline">
+    <rect x="400" y="78" width="390" height="500" rx="18" fill="url(#signal-gradient)" stroke="#3b4261" stroke-width="2" />
+    <text x="430" y="122" font-family="ui-monospace, Menlo, monospace" font-size="13" letter-spacing="2" fill="#86e1fc">TELEMETRY PIPELINE</text>
+    <text x="430" y="154" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#e6ecff">Evidence routing</text>
+
+    <path d="M 452 226 C 520 176, 620 176, 690 226" fill="none" stroke="#86e1fc" stroke-width="3" />
+    <path d="M 452 334 C 530 384, 610 384, 690 334" fill="none" stroke="#c3e88d" stroke-width="3" />
+    <path d="M 452 442 C 530 392, 610 392, 690 442" fill="none" stroke="#ffc777" stroke-width="3" stroke-dasharray="8 8" />
+
+    <rect x="438" y="200" width="120" height="52" rx="10" fill="#1e2030" stroke="#86e1fc" />
+    <text x="498" y="232" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="13" fill="#c8d3f5">ingest</text>
+    <rect x="632" y="200" width="120" height="52" rx="10" fill="#1e2030" stroke="#86e1fc" />
+    <text x="692" y="232" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="13" fill="#c8d3f5">normalize</text>
+
+    <rect x="438" y="308" width="120" height="52" rx="10" fill="#1e2030" stroke="#c3e88d" />
+    <text x="498" y="340" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="13" fill="#c8d3f5">correlate</text>
+    <rect x="632" y="308" width="120" height="52" rx="10" fill="#1e2030" stroke="#c3e88d" />
+    <text x="692" y="340" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="13" fill="#c8d3f5">retain</text>
+
+    <rect x="438" y="416" width="120" height="52" rx="10" fill="#1e2030" stroke="#ffc777" />
+    <text x="498" y="448" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="13" fill="#c8d3f5">query</text>
+    <rect x="632" y="416" width="120" height="52" rx="10" fill="#1e2030" stroke="#ffc777" />
+    <text x="692" y="448" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="13" fill="#c8d3f5">review</text>
+  </g>
+
+  <g aria-label="operator outcomes">
+    <rect x="882" y="78" width="270" height="500" rx="18" fill="url(#alert-gradient)" stroke="#3b4261" stroke-width="2" />
+    <text x="912" y="122" font-family="ui-monospace, Menlo, monospace" font-size="13" letter-spacing="2" fill="#86e1fc">OPERATOR OUTCOMES</text>
+    <text x="912" y="154" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#e6ecff">Decision surface</text>
+
+    <rect x="912" y="208" width="210" height="88" rx="12" fill="#16161e" stroke="#c3e88d" />
+    <text x="936" y="242" font-family="ui-monospace, Menlo, monospace" font-size="14" fill="#c3e88d">✓ release record</text>
+    <text x="936" y="268" font-family="system-ui, sans-serif" font-size="12" fill="#828bb8">evidence bound to revision</text>
+
+    <rect x="912" y="328" width="210" height="88" rx="12" fill="#16161e" stroke="#ffc777" />
+    <text x="936" y="362" font-family="ui-monospace, Menlo, monospace" font-size="14" fill="#ffc777">→ follow-up queue</text>
+    <text x="936" y="388" font-family="system-ui, sans-serif" font-size="12" fill="#828bb8">parity drift needs review</text>
+
+    <rect x="912" y="448" width="210" height="88" rx="12" fill="#16161e" stroke="#ff757f" />
+    <text x="936" y="482" font-family="ui-monospace, Menlo, monospace" font-size="14" fill="#ff757f">✗ typed refusal</text>
+    <text x="936" y="508" font-family="system-ui, sans-serif" font-size="12" fill="#828bb8">unsafe input stopped early</text>
+  </g>
+
+  <g fill="none" stroke="#545c7e" stroke-width="2" stroke-dasharray="7 7">
+    <path d="M 308 231 C 344 231, 366 226, 438 226" />
+    <path d="M 308 345 C 352 345, 382 334, 438 334" />
+    <path d="M 308 459 C 350 459, 390 442, 438 442" />
+    <path d="M 752 334 C 804 334, 842 252, 912 252" />
+    <path d="M 752 442 C 812 442, 848 372, 912 372" />
+  </g>
+
+  <g aria-label="legend">
+    <rect x="48" y="630" width="1104" height="82" rx="14" fill="#16161e" stroke="#2e2e3a" />
+    <text x="76" y="664" font-family="ui-monospace, Menlo, monospace" font-size="12" letter-spacing="2" fill="#a9b1d6">LEGEND</text>
+    <line x1="196" y1="660" x2="244" y2="660" stroke="#86e1fc" stroke-width="3" />
+    <text x="258" y="665" font-family="system-ui, sans-serif" font-size="13" fill="#c8d3f5">ingest path</text>
+    <line x1="396" y1="660" x2="444" y2="660" stroke="#c3e88d" stroke-width="3" />
+    <text x="458" y="665" font-family="system-ui, sans-serif" font-size="13" fill="#c8d3f5">verified route</text>
+    <line x1="614" y1="660" x2="662" y2="660" stroke="#ffc777" stroke-width="3" stroke-dasharray="8 8" />
+    <text x="676" y="665" font-family="system-ui, sans-serif" font-size="13" fill="#c8d3f5">operator review</text>
+    <text x="1124" y="690" text-anchor="end" font-family="ui-monospace, Menlo, monospace" font-size="11" fill="#545c7e">facet · observability map · revision-bound evidence</text>
+  </g>
+</svg>

package/templates/pipeline-audit.md

@@ -0,0 +1,108 @@
+# Release pipeline audit
+
+**Scope:** release control plane · **window:** 2026-08-14 · **verdict:** ✓ verified with two follow-ups
+
+> The pipeline accepted only immutable inputs during this audit. Markdown Mermaid labels remain visible, and each diagram's pan/zoom stays confined to its own region.
+
+## Executive signal
+
+The release path is structurally sound from source intake through visual verification. Evidence retention and operator handoff remain the two areas that need active review.
+
+| Control         | Owner         | Evidence                       | State       |
+| --------------- | ------------- | ------------------------------ | ----------- |
+| Source intake   | Build systems | immutable revision hash        | ✓ ok        |
+| Tier 0 parse    | Validation    | lexical counts + policy result | ✓ ok        |
+| Tier 1 render   | Verification  | browser observation            | ✓ ok        |
+| Release handoff | Operations    | signed deployment record       | → follow-up |
+
+## Audit boundary
+
+### Inputs reviewed
+
+- [x] Revision bytes and content address
+- [x] Validation envelope persistence
+- [x] Browser-backed visual read-back
+- [ ] Operator acknowledgement record
+
+### Invariants
+
+1. A publish request names one artifact type.
+2. Tier 1 observes the revision selected by its SHA.
+3. Remote data and executable document features fail closed.
+
+```ts
+type AuditFinding = {
+  control: string;
+  status: "ok" | "follow-up";
+  evidence: string[];
+};
+
+const finding: AuditFinding = {
+  control: "revision identity",
+  status: "ok",
+  evidence: ["sha256", "tier0", "tier1"],
+};
+```
+
+```bash
+facet create --project-id ops-audit --slug release-pipeline-audit --title "Release pipeline audit"
+facet publish --artifact-id <id> --type markdown --file templates/pipeline-audit.md
+facet read-back --artifact-id <id> --revision-sha <sha256> --tier visual
+```
+
+```json
+{
+  "control": "tier1-parity",
+  "expected": "ok",
+  "evidence": {
+    "rendererRootSvgCount": 2,
+    "externalImageCount": 0
+  }
+}
+```
+
+---
+
+## Verification path
+
+```mermaid
+flowchart LR
+  A[source revision] --> B[content hash]
+  B --> C{policy gate}
+  C -->|pass| D[tier 0]
+  D --> E[tier 1]
+  E --> F[retained evidence]
+  C -->|deny| G[typed refusal]
+```
+
+The [CLI reference](../docs/reference/cli.md) defines the envelope contract. Use `revision.sha256`, not a later lookup, when retrieving evidence.
+
+## Findings
+
+| Finding                                                   | Impact                        | Disposition |
+| --------------------------------------------------------- | ----------------------------- | ----------- |
+| Evidence records are revision-bound                       | avoids latest-write ambiguity | ✓ retained  |
+| Mermaid labels remain visible in markdown gallery renders | diagrams retain text context  | ✓ retained  |
+| Handoff acknowledgement is external to publish            | requires operator evidence    | → follow-up |
+
+### Follow-up queue
+
+- [ ] Attach the signed handoff record to the release review.
+- [x] Re-run the visual proof after the markdown Mermaid label fix.
+- [x] Keep source bytes and verification evidence separate.
+
+```mermaid
+sequenceDiagram
+  participant Build as build system
+  participant Facet as facet service
+  participant Browser as visual verifier
+  Build->>Facet: publish immutable bytes
+  Facet->>Facet: validate tier 0
+  Browser->>Facet: request revision by SHA
+  Browser-->>Facet: observed counts
+  Facet-->>Build: retained verdict
+```
+
+### Operator note
+
+> Do not treat a gallery image as a promotion authority. It proves the render path; the release record proves the handoff.

package/templates/release-metrics.vl.json

@@ -0,0 +1,98 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Release throughput and verification latency — inline data only.",
+  "background": "transparent",
+  "width": 700,
+  "height": 330,
+  "title": {
+    "text": "Release throughput · verification latency",
+    "anchor": "start",
+    "color": "#c8d3f5",
+    "font": "system-ui, sans-serif",
+    "fontSize": 16,
+    "fontWeight": 600,
+    "offset": 18
+  },
+  "data": {
+    "values": [
+      { "release": "R01", "published": 18, "verified": 17, "latencyMs": 214 },
+      { "release": "R02", "published": 22, "verified": 22, "latencyMs": 196 },
+      { "release": "R03", "published": 25, "verified": 24, "latencyMs": 228 },
+      { "release": "R04", "published": 21, "verified": 21, "latencyMs": 187 },
+      { "release": "R05", "published": 29, "verified": 28, "latencyMs": 205 },
+      { "release": "R06", "published": 31, "verified": 31, "latencyMs": 179 }
+    ]
+  },
+  "transform": [
+    { "calculate": "datum.verified / datum.published", "as": "verificationRate" },
+    { "calculate": "datum.latencyMs / 100", "as": "latencyScale" }
+  ],
+  "layer": [
+    {
+      "mark": { "type": "bar", "cornerRadiusTopLeft": 4, "cornerRadiusTopRight": 4 },
+      "encoding": {
+        "x": { "field": "release", "type": "ordinal", "title": null, "axis": { "labelAngle": 0 } },
+        "y": {
+          "field": "verified",
+          "type": "quantitative",
+          "title": "verified releases",
+          "axis": { "titleColor": "#86e1fc" },
+          "scale": { "domain": [0, 36] }
+        },
+        "color": {
+          "value": "#86e1fc",
+          "legend": { "title": "series", "labelColor": "#c8d3f5", "titleColor": "#a9b1d6" }
+        },
+        "tooltip": [
+          { "field": "release", "type": "ordinal", "title": "release" },
+          { "field": "verified", "type": "quantitative", "title": "verified" },
+          {
+            "field": "verificationRate",
+            "type": "quantitative",
+            "title": "verification rate",
+            "format": ".1%"
+          }
+        ]
+      }
+    },
+    {
+      "mark": { "type": "line", "strokeWidth": 3, "point": { "filled": true, "size": 70 } },
+      "encoding": {
+        "x": { "field": "release", "type": "ordinal", "title": null },
+        "y": {
+          "field": "latencyScale",
+          "type": "quantitative",
+          "title": "latency · 100 ms",
+          "axis": { "orient": "right", "titleColor": "#ffc777" },
+          "scale": { "domain": [0, 3.6] }
+        },
+        "color": { "value": "#ffc777" },
+        "tooltip": [
+          { "field": "release", "type": "ordinal", "title": "release" },
+          { "field": "latencyMs", "type": "quantitative", "title": "latency ms" }
+        ]
+      }
+    }
+  ],
+  "resolve": { "scale": { "y": "independent" } },
+  "config": {
+    "view": { "stroke": null },
+    "axis": {
+      "domainColor": "#3b4261",
+      "tickColor": "#3b4261",
+      "gridColor": "#232330",
+      "gridDash": [2, 4],
+      "labelColor": "#828bb8",
+      "titleColor": "#a9b1d6",
+      "labelFont": "ui-monospace, Menlo, monospace",
+      "titleFont": "ui-monospace, Menlo, monospace",
+      "labelFontSize": 11,
+      "titleFontSize": 11,
+      "titlePadding": 12
+    },
+    "legend": {
+      "labelFont": "ui-monospace, Menlo, monospace",
+      "titleFont": "ui-monospace, Menlo, monospace"
+    }
+  }
+}

package/templates/service-topology.mmd

@@ -0,0 +1,47 @@
+%%{init: {"theme": "base", "themeVariables": {"background": "transparent", "primaryColor": "#1e2030", "primaryTextColor": "#c8d3f5", "primaryBorderColor": "#3b4261", "secondaryColor": "#222436", "tertiaryColor": "#16161e", "lineColor": "#545c7e", "textColor": "#a9b1d6", "fontFamily": "ui-monospace, Menlo, monospace", "fontSize": "14px", "edgeLabelBackground": "#16161e", "clusterBkg": "#1a1b26", "clusterBorder": "#2e2e3a"}}}%%
+flowchart LR
+  subgraph Intake[release intake]
+    A([source bytes]) --> B[hash gate]
+    B --> C{content policy}
+    C -->|accepted| D{{revision queue}}
+    C -->|denied| X((typed refusal))
+  end
+
+  subgraph Control[control plane]
+    D --> E[(artifact store)]
+    E --> F[revision index]
+    F --> G{publish mode}
+    G -->|static| H[lexical validator]
+    G -->|interactive| I[tsx compiler]
+    H --> J([tier 0 verdict])
+    I --> J
+  end
+
+  subgraph Evidence[verification plane]
+    J -->|visual requested| K{{browser lease}}
+    K --> L[isolated frame]
+    L --> M{observed parity}
+    M -->|match| N((tier 1 ok))
+    M -->|drift| O{{counter finding}}
+    N --> P[(evidence ledger)]
+    O --> P
+  end
+
+  subgraph Delivery[operator surface]
+    P --> Q[gallery revision]
+    Q --> R{operator review}
+    R -->|approve| S([release record])
+    R -->|hold| T[review queue]
+  end
+
+  classDef ok fill:#1e2030,stroke:#c3e88d,color:#c3e88d
+  classDef warn fill:#222436,stroke:#ffc777,color:#ffc777
+  classDef fail fill:#222436,stroke:#ff757f,color:#ff757f
+  classDef accent fill:#1e2030,stroke:#86e1fc,color:#86e1fc
+  classDef muted fill:#16161e,stroke:#545c7e,color:#a9b1d6
+
+  class A,D,J,K,N,S ok
+  class C,G,M,R accent
+  class O,T,X fail
+  class B,E,F,H,I,L,P,Q muted
+  class X,O,T warn

package/templates/status-report.md

@@ -0,0 +1,32 @@
+# Q3 ingest pipeline — status
+
+**Summary.** What changed, what is verified, what is blocked. One paragraph,
+verdict first.
+
+## Numbers
+
+| metric                |  value |  delta |
+| --------------------- | -----: | -----: |
+| verified renders      |  9,412 |   +261 |
+| tampered caught       |      3 |     +1 |
+| p95 publish → visible | 214 ms | −12 ms |
+
+## Flow
+
+```mermaid
+%%{init: {"theme": "base", "themeVariables": {"background": "transparent", "primaryColor": "#1e2030", "primaryTextColor": "#c8d3f5", "primaryBorderColor": "#3b4261", "secondaryColor": "#222436", "tertiaryColor": "#16161e", "lineColor": "#545c7e", "textColor": "#a9b1d6", "fontFamily": "ui-monospace, Menlo, monospace", "fontSize": "14px", "edgeLabelBackground": "#16161e", "clusterBkg": "#1a1b26", "clusterBorder": "#2e2e3a"}}}%%
+flowchart LR
+  A([source bytes]) --> B[hash + store]
+  B --> C{validate}
+  C -->|tier 0| D[parse counts]
+  C -->|tier 1| E[browser verify]
+  D --> F([verdict])
+  E --> F
+  classDef ok stroke:#c3e88d,color:#c3e88d
+  class F ok
+```
+
+## Next
+
+- [ ] one action, one owner, one date
+- [ ] keep the list short enough to finish

package/templates/system-map.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-label="artifact delivery system map">
+  <rect width="960" height="540" rx="20" fill="#16161e"></rect>
+
+  <g transform="translate(56 48)">
+    <text font-family="ui-monospace, Menlo, monospace" font-size="12" letter-spacing="3" fill="#86e1fc">ARTIFACT DELIVERY</text>
+    <text y="42" font-family="system-ui, sans-serif" font-size="28" font-weight="600" fill="#e6ecff">Verification path</text>
+    <text y="70" font-family="system-ui, sans-serif" font-size="14" fill="#737aa2">Bytes stay isolated until a verifier records the rendered result.</text>
+  </g>
+
+  <g fill="none" stroke="#545c7e" stroke-width="2">
+    <path d="M 250 264 H 340"></path>
+    <path d="M 510 264 H 600"></path>
+    <path d="M 770 264 H 824"></path>
+  </g>
+  <g fill="#86e1fc">
+    <circle cx="340" cy="264" r="4"></circle>
+    <circle cx="600" cy="264" r="4"></circle>
+    <circle cx="824" cy="264" r="4"></circle>
+  </g>
+
+  <g transform="translate(56 196)">
+    <rect width="194" height="136" rx="12" fill="#1e2030" stroke="#3b4261"></rect>
+    <text x="24" y="38" font-family="ui-monospace, Menlo, monospace" font-size="11" fill="#86e1fc">01 · SOURCE</text>
+    <text x="24" y="76" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#c8d3f5">Artifact bytes</text>
+    <text x="24" y="106" font-family="system-ui, sans-serif" font-size="13" fill="#737aa2">Immutable revision</text>
+  </g>
+
+  <g transform="translate(340 196)">
+    <rect width="170" height="136" rx="12" fill="#1e2030" stroke="#3b4261"></rect>
+    <text x="24" y="38" font-family="ui-monospace, Menlo, monospace" font-size="11" fill="#86e1fc">02 · TIER 0</text>
+    <text x="24" y="76" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#c8d3f5">Policy</text>
+    <text x="24" y="106" font-family="system-ui, sans-serif" font-size="13" fill="#737aa2">Lexical checks</text>
+  </g>
+
+  <g transform="translate(600 196)">
+    <rect width="170" height="136" rx="12" fill="#1e2030" stroke="#3b4261"></rect>
+    <text x="24" y="38" font-family="ui-monospace, Menlo, monospace" font-size="11" fill="#86e1fc">03 · TIER 1</text>
+    <text x="24" y="76" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#c8d3f5">Browser</text>
+    <text x="24" y="106" font-family="system-ui, sans-serif" font-size="13" fill="#737aa2">Observed structure</text>
+  </g>
+
+  <g transform="translate(824 196)">
+    <rect width="80" height="136" rx="12" fill="#18231b" stroke="#c3e88d"></rect>
+    <text x="40" y="58" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="11" fill="#c3e88d">OK</text>
+    <text x="40" y="84" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="11" fill="#c3e88d">✓</text>
+  </g>
+
+  <g transform="translate(56 408)">
+    <rect width="848" height="76" rx="12" fill="#1e2030" stroke="#3b4261"></rect>
+    <text x="24" y="30" font-family="ui-monospace, Menlo, monospace" font-size="11" fill="#545c7e">INVARIANT</text>
+    <text x="24" y="56" font-family="system-ui, sans-serif" font-size="15" fill="#c8d3f5">A gallery view identifies an exact revision; verification remains a separate recorded verdict.</text>
+  </g>
+</svg>

package/templates/timeseries.vl.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Facet timeseries template — inline data only; a data.url spec fails closed.",
+  "background": "transparent",
+  "width": 640,
+  "height": 300,
+  "title": {
+    "text": "Verified renders · weekly",
+    "anchor": "start",
+    "color": "#c8d3f5",
+    "font": "system-ui, sans-serif",
+    "fontSize": 15,
+    "fontWeight": 600,
+    "offset": 18
+  },
+  "data": {
+    "values": [
+      { "week": "W01", "renders": 120 },
+      { "week": "W02", "renders": 132 },
+      { "week": "W03", "renders": 128 },
+      { "week": "W04", "renders": 161 },
+      { "week": "W05", "renders": 170 },
+      { "week": "W06", "renders": 158 },
+      { "week": "W07", "renders": 190 },
+      { "week": "W08", "renders": 204 },
+      { "week": "W09", "renders": 221 },
+      { "week": "W10", "renders": 218 },
+      { "week": "W11", "renders": 246 },
+      { "week": "W12", "renders": 261 }
+    ]
+  },
+  "mark": {
+    "type": "line",
+    "color": "#86e1fc",
+    "strokeWidth": 2,
+    "point": { "filled": true, "fill": "#86e1fc", "size": 34 }
+  },
+  "encoding": {
+    "x": {
+      "field": "week",
+      "type": "ordinal",
+      "title": null,
+      "axis": { "labelAngle": 0 }
+    },
+    "y": {
+      "field": "renders",
+      "type": "quantitative",
+      "title": "renders",
+      "axis": { "tickCount": 5 }
+    }
+  },
+  "config": {
+    "view": { "stroke": null },
+    "axis": {
+      "domainColor": "#3b4261",
+      "tickColor": "#3b4261",
+      "gridColor": "#232330",
+      "gridDash": [2, 3],
+      "labelColor": "#828bb8",
+      "titleColor": "#a9b1d6",
+      "labelFont": "ui-monospace, Menlo, monospace",
+      "titleFont": "ui-monospace, Menlo, monospace",
+      "labelFontSize": 11,
+      "titleFontSize": 11,
+      "titlePadding": 12
+    },
+    "range": {
+      "category": ["#86e1fc", "#82aaff", "#c099ff", "#ffc777", "#c3e88d", "#ff757f"]
+    }
+  }
+}

package/templates/tsx-interactive-counter.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+
+export default function InteractiveCounter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <section className="card bg-legion-paper p-6 w-full max-w-prose">
+      <h1 className="text-2xl font-semibold text-legion-ink">Interactive counter</h1>
+      <p className="text-legion-muted mt-2">Button presses: {count}</p>
+      <button
+        type="button"
+        className="btn bg-legion-cyan text-legion-ink mt-4 px-4 py-2 rounded"
+        onClick={() => setCount((value) => value + 1)}
+      >
+        Increment
+      </button>
+    </section>
+  );
+}

package/templates/tsx-status-report.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+export default function StatusReport() {
+  return (
+    <section className="card bg-legion-paper p-6 w-full max-w-prose">
+      <h1 className="text-2xl font-semibold text-legion-ink">Status report</h1>
+      <p className="text-legion-muted mt-2">Verification state for the current release.</p>
+      <section className="mt-4">
+        <h2 className="text-lg font-semibold text-legion-ink">Counters</h2>
+        <table className="table table-zebra mt-2 w-full">
+          <thead>
+            <tr>
+              <th className="text-legion-ink">Metric</th>
+              <th className="text-legion-ink">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Verified revisions</td>
+              <td>12</td>
+            </tr>
+            <tr>
+              <td>Open blockers</td>
+              <td>0</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+    </section>
+  );
+}