Rendered proof model

LZR fragment tape

A template does not disappear into a final DOM string. LZR lowers it into a linear fragment tape: static runs, dynamic tokens, control frames, component expansions. Everything below is generated from one small example that builds in this project — the stream you see is its real rendered-spans sidecar, joined with its recorded data reads.

Parse templatesrc://tape/mini-a.html

Expand componentssrc://_components/tape-mini-*.html

Evaluate readscache://…/data-reads/…/tape/mini-a.data-reads.json

Assemble tapecache://…/tape-ledgers/…/tape/mini-a.tape-ledger.json

Prove spanscache://…/spans/…/tape/mini-a.rendered-spans.json

Emit effectrendered://public/tape/mini-a.html

The tape, from a real build

Hover or tab through the stream in the middle: each segment lights up the exact source bytes that produced it and the exact bytes it rendered. Segments that the minifier fused across files light up in both files — the </h2> in the component and the <ul> at the call site, in one op. Data reads show the real data:// address and the value that flowed through. No JavaScript drives this panel: every highlight is a CSS rule generated at build time, one per segment, so the linking works with scripting off — and tabbing to a segment pins it, tabbing away releases it.

Data variant A — data://tape-mini/a.json (38 segments, featured: true, 2 items)

Source src://tape/mini-a.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Tape mini example</title>
	<link rel="stylesheet" href="/assets/site.css?v={{ public://assets/site.css | sha256 }}">
</head>
<body>
<set key="campaign" value="{{ data://tape-mini/a.json }}" />
<set key="labels" value="{{ data://tape-mini/labels.json }}" />
<main class="tape-mini-page">
	<h1>{{ campaign.title }}</h1>
	<if if="{{ campaign.featured }}">
		<p class="tape-mini-banner">Featured: {{ campaign.items[0].name }}</p>
	</if>
	<else>
		<p class="tape-mini-banner tape-mini-banner--muted">Nothing featured right now.</p>
	</else>
	<tape-mini-card title="{{ campaign.title }}" tone="{{ campaign.tone }}">
		<ul class="tape-mini-list">
			<foreach items="{{ campaign.items }}" key="item">
				<li>{{ index + 1 }}. {{ item.name }} <tape-mini-status status="{{ item.status }}" label="{{ labels.statuses[item.status] }}"></tape-mini-status></li>
			</foreach>
		</ul>
	</tape-mini-card>
	<p class="tape-mini-footnote">{{ labels.footnote }}</p>
</main>
</body>
</html>

src://_components/tape-mini-card.html 4 segments

<tape-mini-card
	title="string"
	tone="string|default:'green'"
>
	<article class="tape-mini-card tape-mini-card--{{ tone }}">
		<h2>{{ title }}</h2>
		<slot name="body"></slot>
	</article>
</tape-mini-card>

src://_components/tape-mini-status.html 4 segments

<tape-mini-status
	status="string"
	label="string"
>
	<span class="tape-mini-status tape-mini-status--{{ status }}">{{ label }}</span>
</tape-mini-status>

The data this build read

data://tape-mini/a.json

{
	"title": "Spring Campaign",
	"tone": "green",
	"featured": true,
	"items": [
		{ "name": "Hero banner", "status": "ready" },
		{ "name": "Newsletter", "status": "draft" }
	]
}

data://tape-mini/labels.json

{
	"footnote": "Every value above flowed through a recorded data read.",
	"statuses": {
		"ready": "Ready to ship",
		"draft": "In draft",
		"archived": "Archived"
	}
}

Fragment stream cache://hypermake/lzr/spans/rendered/public/tape/mini-a.rendered-spans.json

34 segments attributed to one source range, 4 fused across files, 0 unexplained — every range re-proved against file bytes at build time.

Rendered output rendered://public/tape/mini-a.html

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Tape mini example</title> <link rel=stylesheet href="/assets/site.css?v=9ac16d687334620041d74a5d801956e8c5f4ddc983492a6a0b9d077f3708df4f"></head> <body><main class=tape-mini-page><h1>Spring Campaign</h1> <p class=tape-mini-banner>Featured: Hero banner</p> <article class="tape-mini-card tape-mini-card--green"><h2>Spring Campaign</h2> <ul class=tape-mini-list><li>1. Hero banner <span class="tape-mini-status tape-mini-status--ready">Ready to ship</span> </li> <li>2. Newsletter <span class="tape-mini-status tape-mini-status--draft">In draft</span> </li> </ul> </article> <p class=tape-mini-footnote>Every value above flowed through a recorded data read.</p> </main> </body> </html>

Data variant B — data://tape-mini/b.json (46 segments, featured: false, 3 items — same template, different shape)

Source src://tape/mini-b.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Tape mini example</title>
	<link rel="stylesheet" href="/assets/site.css?v={{ public://assets/site.css | sha256 }}">
</head>
<body>
<set key="campaign" value="{{ data://tape-mini/b.json }}" />
<set key="labels" value="{{ data://tape-mini/labels.json }}" />
<main class="tape-mini-page">
	<h1>{{ campaign.title }}</h1>
	<if if="{{ campaign.featured }}">
		<p class="tape-mini-banner">Featured: {{ campaign.items[0].name }}</p>
	</if>
	<else>
		<p class="tape-mini-banner tape-mini-banner--muted">Nothing featured right now.</p>
	</else>
	<tape-mini-card title="{{ campaign.title }}" tone="{{ campaign.tone }}">
		<ul class="tape-mini-list">
			<foreach items="{{ campaign.items }}" key="item">
				<li>{{ index + 1 }}. {{ item.name }} <tape-mini-status status="{{ item.status }}" label="{{ labels.statuses[item.status] }}"></tape-mini-status></li>
			</foreach>
		</ul>
	</tape-mini-card>
	<p class="tape-mini-footnote">{{ labels.footnote }}</p>
</main>
</body>
</html>

src://_components/tape-mini-card.html 4 segments

<tape-mini-card
	title="string"
	tone="string|default:'green'"
>
	<article class="tape-mini-card tape-mini-card--{{ tone }}">
		<h2>{{ title }}</h2>
		<slot name="body"></slot>
	</article>
</tape-mini-card>

src://_components/tape-mini-status.html 6 segments

<tape-mini-status
	status="string"
	label="string"
>
	<span class="tape-mini-status tape-mini-status--{{ status }}">{{ label }}</span>
</tape-mini-status>

The data this build read

data://tape-mini/b.json

{
	"title": "Archive Sweep",
	"tone": "amber",
	"featured": false,
	"items": [
		{ "name": "Retired banner", "status": "archived" },
		{ "name": "Legacy landing page", "status": "archived" },
		{ "name": "Sunset newsletter", "status": "draft" }
	]
}

data://tape-mini/labels.json

{
	"footnote": "Every value above flowed through a recorded data read.",
	"statuses": {
		"ready": "Ready to ship",
		"draft": "In draft",
		"archived": "Archived"
	}
}

Fragment stream cache://hypermake/lzr/spans/rendered/public/tape/mini-b.rendered-spans.json

41 segments attributed to one source range, 5 fused across files, 0 unexplained — the if takes the else branch and the foreach runs three times.

Rendered output rendered://public/tape/mini-b.html

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Tape mini example</title> <link rel=stylesheet href="/assets/site.css?v=9ac16d687334620041d74a5d801956e8c5f4ddc983492a6a0b9d077f3708df4f"></head> <body><main class=tape-mini-page><h1>Archive Sweep</h1> <p class="tape-mini-banner tape-mini-banner--muted">Nothing featured right now.</p> <article class="tape-mini-card tape-mini-card--amber"><h2>Archive Sweep</h2> <ul class=tape-mini-list><li>1. Retired banner <span class="tape-mini-status tape-mini-status--archived">Archived</span> </li> <li>2. Legacy landing page <span class="tape-mini-status tape-mini-status--archived">Archived</span> </li> <li>3. Sunset newsletter <span class="tape-mini-status tape-mini-status--draft">In draft</span> </li> </ul> </article> <p class=tape-mini-footnote>Every value above flowed through a recorded data read.</p> </main> </body> </html>

Sidecars are trust surfaces

Sidecar	Answers	Example artifact (resolves here)
Rendered spans	Which source span produced this rendered range?	`cache://hypermake/lzr/spans/rendered/public/tape/mini-a.rendered-spans.json`
Data reads	Which `data://` paths flowed into which output bytes?	`cache://hypermake/lzr/data-reads/rendered/public/tape/mini-a.data-reads.json`
Tape ledger	Hash chain of tape chunks and proof roots for diff and lineage.	`cache://hypermake/lzr/tape-ledgers/rendered/public/tape/mini-a.tape-ledger.json`
Fragment graph	Runtime-root packet metadata without the full ledger payload.	`cache://hypermake/lzr/fragment-graphs/rendered/public/tape/mini-a.fragment-graph.json`

Verify this yourself shell

hypermake explain rendered/public/tape/mini-a.html
hypermake affected-by data/tape-mini/a.json
hypermake state-summary rendered/public/tape/mini-a.html --json
hypermake public://_hypermake/site/tape-explainer/a.json