Inspector workflow

Source + Scope workflow

The Source tab is the authoring surface; Scope explains the selected node. Together they show source ownership, expression lineage, data reads, rendered highlights, and mutation affordances without treating browser DOM as authority.

Source, Scope, Rendered Sidecar-driven

Sourcesrc://components/component-bound.html

<set key="campaign" value="{{ data://campaign.json }}" />
	<scenario-layout
		title="Component-bound rendered effects"
		family="component invocation and prop lineage"
		source="src://components/component-bound.html"
		rendered="rendered://public/components/component-bound.html"
		coverage="component prop changes, source ownership, rendered-effect proof"
	></scenario-layout>
	<test-panel label="What this page tests" tone="blue">
		<p>Component invocation attributes, component-bound text, and data-backed rendered effects.</

Datadata://campaign.json

{
  "title": "Corpus Campaign",
  "client": "Corpus Client",
  "url": "/campaign.html",
  "adCount": 2,
  "newsletterCount": 1,
  "assets": [
    {
      "src": "/assets/banner.jpg",
      "alt": "Banner asset"
    },
    {
      "src": "/assets/newsletter.jpg",
      "alt": "Newsletter asset"
    }
  ],
  "variants": [
    {
      "id": "banner",
      "width": 300,
      "height": 250
    },
    {
      "id": "newsletter",
      "width": 640,
      "height": 480
    }
  ]
}

Scopecampaign

campaign

title"Corpus Campaign"

client"Corpus Client"

url"/campaign.html"

adCount 2

newsletterCount 1

assets [2 items]

variants [2 items]

Renderedrendered://public/components/component-bound.html

<section class="card  campaign-header" data-panel="Campaign header"><h2>Campaign header</h2> <h1 id=campaign-title>Corpus Client Campaign</h1> <p class=scope-note>This page is intended to reproduce component/data-bound rendered-effect proof gaps.</p> </section>

Open the live scenario ->

Select source node

Click a template row, component, attribute, expression, or text node.

src://source-editor/actions.html

Inspect scope

See bindings, foreach context, protocol reads, and render context.

hypermake lzr scope-map src/scope/lineage.html

Highlight rendered effect

The browser view follows source selection through map-backed fragment identity.

rendered://public/source-editor/actions.html

Plan source-first edits

Mutations become validated source/data proposals, not DOM writes.

src://source-editor/actions.html

Action	Must show	Fixture
Select expression	Binding owner, uses, render context.	`src://expressions/mixed.html`
Select component	Project-owned component navigation.	`src://components/component-bound.html`
Select malformed source	Recoverable error fragment and diagnostics link.	`src://errors/malformed-repair.html`