The Studio's custom elements each hold one view the build renders

outcome

Give the Studio a small set of custom elements that each hold one view of the graph, rendered by the build, in a Studio page or in any HTML page that holds that markup and loads the element script.

rule.selfContained line 25 · specs/consumers/spec-studio.components.sdp.md:25

Each element is self-contained and light on dependencies, and works in any HTML page that holds the markup the build wrote for it and loads the Studio's script.

no example exercises it

rule.buildRenders line 26 · specs/consumers/spec-studio.components.sdp.md:26

The build renders every element's view into its markup, from reader values and the recipe answers the page names, so the view reads without script; the element adds only interaction, and an element whose view needs none is defined with no behavior.

no example exercises it

rule.subjectAttribute line 27 · specs/consumers/spec-studio.components.sdp.md:27

An element with a graph subject takes that subject's graph id in the attribute its Design entry names; an element over gathered intents has no single graph subject.

no example exercises it

rule line 28 · specs/consumers/spec-studio.components.sdp.md:28

Every element's name starts with sdp-.

rule.diagramRenderer line 29 · specs/consumers/spec-studio.components.sdp.md:29

A diagram is laid out by the engine when the page set is built and written as inline SVG, and its element adds only pan, zoom and pinch, as spec:decisions.studio-diagram-renderer rules; one diagram draws within the bound spec:consumers.spec-studio.diagrams#design.bound names.

no example exercises it

rule.oneScript line 30 · specs/consumers/spec-studio.components.sdp.md:30

Every element ships in the one classic script the page elements ship in, and none loads anything at run time.

no example exercises it

1 unkeyed rule.

The elements in the original's order, with their attributes.

specCard line 34 · specs/consumers/spec-studio.components.sdp.md:34

sdp-spec-card with spec-id and variant: one Spec as a card; full is a Pack page's member card, short one line with the title linked, the id, the rung badge and the floor in words; no behavior.

no citation recorded

traceGraph line 35 · specs/consumers/spec-studio.components.sdp.md:35

sdp-trace-graph with spec-id: the Spec's relations one hop each way, drawn in relation bands inside an sdp-diagram, then its text equivalent; no behavior of its own.

no citation recorded

maturityMap line 36 · specs/consumers/spec-studio.components.sdp.md:36

sdp-maturity-map with pack-id: the Pack's members placed by stated rung and floor reached, drawn as a static SVG grid of counts, then its count table and each populated cell's member list; no behavior.

no citation recorded

exampleSpace line 37 · specs/consumers/spec-studio.components.sdp.md:37

sdp-example-space with spec-id, naming the Spec that owns the example space: the space's slots with their types and the step that declares each, its children's bound points as a table with one row per example and one column per slot, an unbound slot written unbound, its expected-outcome oracle binding as present or none, and recipe 44's coverage; its coverage is a report, never a verifier run or a delivery fact; no behavior beyond the composing actions inside it.

no citation recorded

diagramView line 38 · specs/consumers/spec-studio.components.sdp.md:38

sdp-diagram with subject, the element spec:consumers.spec-studio.diagrams#design.diagramElement states.

no citation recorded

scenarioEditor line 39 · specs/consumers/spec-studio.components.sdp.md:39

sdp-scenario-editor with spec-id and mode: in edit mode a form holding the example's given, when and then steps, in propose mode the parent's step vocabulary as a starting point; submitting gathers an intent scoped to the example or to the parent, with the steps as its exact text; without script it shows the steps as text and says that composing needs the script.

no citation recorded

impactView line 40 · specs/consumers/spec-studio.components.sdp.md:40

sdp-impact-view with spec-id: a Spec's impact panel on its own, its trace graph, what it rests on and what rests on it; no behavior.

no citation recorded

intentPanel line 41 · specs/consumers/spec-studio.components.sdp.md:41

sdp-intent-panel with page-root and no graph-subject attribute, rendering the gathered intents across their scopes as spec:consumers.spec-studio.intent-panel states.

no citation recorded

composeAction line 42 · specs/consumers/spec-studio.components.sdp.md:42

sdp-compose with scope and action: a button labelled with what it composes that opens the compose dialog and gathers the intent in the composing panel; scope is a Spec id, entry address or Pack id, with a Pack's space-separated resolved member ids in members, members-complete set to true only when every manifest member resolves, and a Change applies to choice between member Specs and Pack membership or framing; action is one of resolve-question, promote-question, edit-example, propose-example, change-target, propose-target, propose-values and change-entry; hidden without script.

no citation recorded

validationFindings line 43 · specs/consumers/spec-studio.components.sdp.md:43

sdp-validation-findings with filter: the validation report's findings for the Spec or Pack id the filter names; no behavior.

no citation recorded

Verifier bindings

• test:protocol.studio-intent-handoff · anchored · test anchor binding present · test/studio-s5.test.ts:407

  External run evidence from test/studio-s5.test.ts

  Test anchors: test:protocol.studio-export-contained, test:protocol.studio-intent-handoff, test:protocol.studio-intents-refresh, test:protocol.studio-memo-shared, test:protocol.studio-watch-plain. Specs verified by those bindings: spec:consumers.edit-model, spec:consumers.intent-composition, spec:consumers.intent-composition.proposal.memo, spec:consumers.intent-composition.proposal.memo.shared, spec:consumers.spec-studio.components, spec:consumers.spec-studio.export, spec:consumers.spec-studio.export.self-contained, spec:consumers.spec-studio.intent-panel, spec:consumers.spec-studio.intent-panel.refresh-keeps-intents, spec:consumers.spec-studio.publisher.watch, spec:consumers.spec-studio.publisher.watch.matches-plain-run, spec:consumers.spec-studio.responsive.

  Run 1: external run evidence from vitest 4.1.10

  Build: CI 380 · Branch: feature/roadmap-and-slices-v0 · Commit: 34909918bf0be0e849959644401797191cae379f · Start: 2026-10-22T17:40:31.456Z · Stop: 2026-10-22T17:42:16.171Z

  Name	Suite	Result	Duration
  executes the bound example against a fresh world	Refreshing a tab keeps every gathered intent (spec:consumers.spec-studio.intent-panel.refresh-keeps-intents)	passed	10.32 ms
  executes the bound example against a fresh world	Recipe 49 and the composing panel write one memo for one proposal (spec:consumers.intent-composition.proposal.memo.shared)	passed	4.64 ms
  executes the bound example against a fresh world	A Pack's export opens alone and keeps its links inside it (spec:consumers.spec-studio.export.self-contained)	passed	63.72 ms
  executes the bound example against a fresh world	Each watch cycle writes the page set a plain run writes (spec:consumers.spec-studio.publisher.watch.matches-plain-run)	passed	133.79 ms
  keeps unsupported intents apart and expands Pack members only against the stamped base	not recorded	passed	2.36 ms
  returns the same schema problems as recipe 38 and renders in any corpus	not recorded	passed	8.22 ms
  composes locally without changing source or requesting a network service	not recorded	passed	1.63 ms
  keeps the last local intents when storage refuses writes	not recorded	passed	0.28 ms
  keeps unsaved local intents when storage remains readable but its quota refuses writes	not recorded	passed	0.34 ms
  rewrites SVG and accessibility references without changing subject attributes or authored text	not recorded	passed	3.98 ms
  opens disclosures for print and restores exactly their prior state	not recorded	passed	1.63 ms
  leaves Mermaid source closed for print unless the reader opened it	not recorded	passed	1.13 ms
  stops the actual Studio watch process with exit zero on SIGINT	not recorded	passed	492.7 ms
  removes a failed watch publication, keeps watching and recovers on the next carrier edit	not recorded	passed	38.33 ms
  ships a phone layout and a print stylesheet for the whole canvas	not recorded	passed	14.52 ms
  keeps exports graph-only when the browsing pages receive a base and run records	not recorded	passed	25.05 ms
  starts no cycle for source or input-file events	not recorded	passed	26.7 ms
  merges concurrent panels before gathering or discarding and flags rejected storage records	not recorded	passed	0.51 ms
  refreshes the browser panel on storage and pageshow and removes those listeners on disconnect	not recorded	passed	1.55 ms
  prefills compose with the authored entry text including code spans and no rendered annotations	not recorded	passed	13.61 ms
  omits blank exact text and reports whitespace requests in the compose dialog	not recorded	passed	2.32 ms
  uses the stamp base, labels fields, orders actions and copies and saves the named documents	not recorded	passed	4.06 ms
  copies distinct actions and recorded scopes for both Pack choices without a stamp	not recorded	passed	3.09 ms
  keeps Pack framing changes apart and gathers scenario editor steps verbatim	not recorded	passed	2.64 ms
  matches the literal memo for the shared proposal, including the full relation and document	not recorded	passed	0.82 ms
  keeps the last watch pages when an optional base becomes unreadable, just like a plain run	not recorded	passed	1014.27 ms
  inlines the selected stylesheet asset in exports and publishes those same style bytes	not recorded	passed	22.14 ms
  introduces studio before its watch option and gives recipe 49 a use case	not recorded	passed	1.43 ms
  renders edit scenario steps outside inert templates without script	not recorded	passed	1.08 ms
  renders propose scenario steps outside inert templates without script	not recorded	passed	0.75 ms
  writes both memo reasons as code spans: "<details>Review the design.</details>", "`Keep` the ``literal`` reason`"	not recorded	passed	0.71 ms
  writes both memo reasons as code spans: "`Review` the ``design`` reason`", "<details>Keep the change.</details>"	not recorded	passed	0.44 ms
  fences requests so their Markdown cannot alter the memo: "Fix a typo.\n<!--"	not recorded	passed	0.96 ms
  fences requests so their Markdown cannot alter the memo: "Use this text.\n```\n## Forged heading\n``````\n<!--hidden-->"	not recorded	passed	0.81 ms
  contains phone navigation, stamp and wide tables within the viewport	not recorded	passed	12.93 ms
  keeps the maturity caption readable and empty cells compact on a phone	not recorded	passed	25.57 ms
  aligns maturity cell counts with the empty cell dashes	not recorded	passed	14.09 ms
  keeps table headers and one-word cells intact while allowing word-boundary wrapping	not recorded	passed	18.22 ms
  keeps natural desktop diagram size and fits only on phones	not recorded	passed	10.27 ms
  hides phone scroll advice and closed source in print while keeping opened source printable	not recorded	passed	13.92 ms

Requirement drawing

Decisions

• The build renders every Studio view, and an element only enhances it

  The build renders every Studio view into the page's markup from reader values and the recipe answers its page names, and a custom element adds only the interaction its view needs; a host page that embeds a view carries the markup the build wrote and loads the element script, and supplies no graph data.

• The engine lays out every Studio diagram as static SVG when the page set is built

  The engine lays out every Studio diagram at build time with its own deterministic layered layout and writes it into the page as inline SVG followed by a text equivalent. The custom element that holds a diagram adds only pan, zoom and pinch, by changing the SVG's view box. One diagram draws at most the bound spec:consumers.spec-studio.diagrams#design.bound names, and above it the diagram folds, by context and then by layer, as that Spec states.

• The Studio is built from custom elements, not a framework

  The Studio is built from Web Components, custom elements written without React, Vue, Svelte or another framework.

• component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

  Uses

  • component:protocol.extract · the carrier and source pipeline · src/extract/index.ts:192 · layer application · context protocol
  • component:protocol.graph · the one graph and its semantic decisions · src/graph/schema.ts:34 · layer domain · context protocol
  • component:protocol.model · the authored contracts and stable ids · src/model/anchors.ts:100 · layer domain · context protocol
  • component:protocol.notation · the leaf step codec · src/notation/slots.ts:261 · layer domain · context protocol
  • component:protocol.reader · the typed graph contract and body evaluator · src/reader/reader.ts:671 · layer application · context protocol
  • component:protocol.validate · one finding currency and ordered checks · src/validate/validators.ts:72 · layer domain · context protocol
• component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  • component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol
  • component:protocol.reader · the typed graph contract and body evaluator · src/reader/reader.ts:671 · layer application · context protocol
• impl:protocol.studio-compose · opens a native request dialog beside build-rendered scopes without changing their content · src/studio-elements/compose.ts:13

  Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-diagram-element · adds view-box pan, zoom and pinch to build-rendered SVG without changing its layout · src/studio-elements/diagram.ts:23

  Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-filter · filters build-rendered rows through their recorded attributes · src/studio-elements/filter.ts:25

  Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-intent-panel-element · displays gathered requests and writes copy selections or local download links · src/studio-elements/intent-panel-element.ts:14

  Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-maturity-map · places resolved Pack members by their stated rung and floor in authored order · src/projections/studio/pages/maturity-map.ts:7

  Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-pack-page · renders Pack members, maturity and boundary joins · src/projections/studio/pages/pack-page.ts:68

  Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-scenario-editor · gathers the edited Given, When and Then as exact text scoped to its subject · src/studio-elements/scenario-editor.ts:17

  Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-search-results · ranks and renders concept, entry and file search hits · src/studio-elements/search-results.ts:95

  Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-spec-structure · renders requirement and trace diagrams and the recorded structural neighborhood · src/projections/studio/pages/spec-structure.ts:44

  Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-verification-panels · renders rule coverage, example cards, constraint targets, verifiers and example-space coverage · src/projections/studio/pages/spec-verification.ts:74

  Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

  Uses

  None.

Runtime observation: not tracked.

Runtime observation: not tracked.

Build attestations: not tracked.

Deployments: not tracked.

Bills of materials: not tracked.