Spec Studio

The Studio's shell frames every page with navigation, a rail and a canvas

spec:consumers.spec-studio.shellUse Case / Behavior · storyready floor ready

Packs: pack:self-hosting-v1, pack:spec-studio-v1

Design: 5 design entries · no pinned declarations · no decisions

Findings: no errors, no warnings

specs/consumers/spec-studio.shell.sdp.md

No open questions and no blocking questions; implementation binding present, verifier binding present, and expected-outcome oracle none.

The shell carries what every page shares, including the rules that keep a page readable: by keyboard, without color, on a phone and without its script. Recent edits stay out of it, because a page is a function of the graph alone and git holds the history.

Intent
outcome
Let a person move between the index, Packs and Specs from any page, find a Spec by what they remember of it, and read every page by keyboard, on a phone and without its script.
Behavior
rule line 27 · specs/consumers/spec-studio.shell.sdp.md:27
Every page has the same shell: a top navigation, a left rail and a main canvas, and it opens with a link that skips to the canvas.
rule line 28 · specs/consumers/spec-studio.shell.sdp.md:28
A search field is on every page; spec:consumers.spec-studio.search states what it matches and how its results show.
rule line 29 · specs/consumers/spec-studio.shell.sdp.md:29
The rail's count of findings is the count of the validation report's findings, never a count the page derives.
rule.noRecentEdits line 30 · specs/consumers/spec-studio.shell.sdp.md:30
The shell shows no recent edits and no other history: git holds it.

no example exercises it

rule.stamp line 31 · specs/consumers/spec-studio.shell.sdp.md:31
Served over http or https, the shell reads stamp.json beside the page set and, when it loads, shows the build context it names; a page opened through file:// requests nothing and shows no stamp.

no example exercises it

rule.rungBadge line 32 · specs/consumers/spec-studio.shell.sdp.md:32
A stated rung shows as a badge that carries the rung's word, colored from a palette of four that stays distinct under color blindness; the floor reached shows beside it as words with no color of its own, and only the divergence banner adds a warning color, beside its words.

no example exercises it

rule.wordsBesideColor line 33 · specs/consumers/spec-studio.shell.sdp.md:33
Every meaning a color conveys is also written in words, so no reading depends on color.

no example exercises it

rule.keyboard line 34 · specs/consumers/spec-studio.shell.sdp.md:34
Every link and control is reachable from the keyboard in reading order and shows where the focus is.

no example exercises it

rule.lineLength line 35 · specs/consumers/spec-studio.shell.sdp.md:35
Prose runs no wider than about 80 characters, and a table wider than the canvas scrolls inside its own box, never the page.

no example exercises it

rule.text line 36 · specs/consumers/spec-studio.shell.sdp.md:36
Authored text renders as plain text with each inline code span as code, and no other Markdown is read. A mention the prose-mentions validator reads links to its target's page when the target resolves, and to the entry when the mention is an entry address.

no example exercises it

rule.withoutScript line 37 · specs/consumers/spec-studio.shell.sdp.md:37
Every page but the search page reads in full without its script: its collapsible parts are native disclosure elements, and only filtering, copying, the stamp, pan and zoom, and the composing panel need the script. The search page needs its script to match, and without it says so and links to the index.

no example exercises it

3 unkeyed rules.

UI

The parts of the shell, top to bottom and left to right.

topNavigation line 41 · specs/consumers/spec-studio.shell.sdp.md:41
the Studio's name linking to the index, then Packs, linking to the index's Packs section, then the search field; each lens page the page set holds adds its entry in the order spec:consumers.spec-studio.lenses gives.
stampLine line 42 · specs/consumers/spec-studio.shell.sdp.md:42
at the end of the top navigation, the stamp's corpus commit, engine and build time, when the stamp loads.
leftRail line 43 · specs/consumers/spec-studio.shell.sdp.md:43
on a Pack page, the Pack's members in authored order, each linked to its card on the page; on a Spec page, each Pack the Spec belongs to with its members in authored order, each linked to its Spec page and the current one marked; on any other page, every Pack; then, on a Pack or Spec page, under an Example spaces heading shown only when there is one, each member of the rail's Packs that owns an example space, linked to its Spec page, with no harness named; then the validation report's finding counts by severity, linked to the index's findings.
railOnPhone line 44 · specs/consumers/spec-studio.shell.sdp.md:44
below the phone breakpoint the rail follows the canvas, so a page opens on its content.
mainCanvas line 45 · specs/consumers/spec-studio.shell.sdp.md:45
the page of the Spec or Pack selected in the rail or in a lens.
Verification

Verifier bindings

  • test:protocol.studio-pages · anchored · test anchor binding present · test/studio-pages.test.ts:18

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

    Test anchors: test:protocol.studio-pages. Specs verified by those bindings: spec:consumers.spec-studio.index-page, spec:consumers.spec-studio.pack-page, spec:consumers.spec-studio.search, spec:consumers.spec-studio.shell, spec:consumers.spec-studio.spec-page.core.

    Run 1: external run evidence from vitest 4.1.10

    Build: CI 391 · Branch: cursor/media-plan-and-articles-09b1 · Commit: 076cd4f1f85640d8236e5cca1bffffa68ab79a33 · Start: 2026-10-31T15:32:20.471Z · Stop: 2026-10-31T15:34:02.073Z

    NameSuiteResultDuration
    rejects malformed page links: <div id="same"></div><div id="same"></div>not recordedpassed3.03 ms
    rejects malformed page links: <a href="missing.html">Missing</a>not recordedpassed0.61 ms
    rejects malformed page links: <a href="#missing">Missing</a>not recordedpassed0.42 ms
    rejects malformed page links: <a href="https://example.com">Outside</a>not recordedpassed0.3 ms
    renders Model definitions without exposing the derived term key mapStudio static pagespassed9.63 ms
    frames every browsing page with a skip link, labelled search, rail, canvas, classic script and stampStudio static pagespassed2.2 ms
    lists example-space owners only in Pack and Spec railsStudio static pagespassed0.36 ms
    shows a keyed question once with a copy action naming its full addressStudio static pagespassed0.35 ms
    opens the index with counts, four task routes, every filter and stable section idsStudio static pagespassed0.84 ms
    gives each Spec row one rung badge and binding wordsStudio static pagespassed1.06 ms
    puts Pack totals before framing and folds holds into that summaryStudio static pagespassed0.53 ms
    leaves member names out when every member waits only for its authorStudio static pagespassed15.8 ms
    agrees each boundary verb with its countStudio static pagespassed13.16 ms
    shows only the Spec's own Packs in its rail and every Pack on the indexStudio static pagespassed21.3 ms
    asserts every index summary sentence including fact-based verifier countsStudio static pagespassed10.79 ms
    renders code spans in titles on every page and strips them in document titlesStudio static pagespassed13.22 ms
    orders rung filters by the ladder and uses none everywhere for an unmet idea floorStudio static pagespassed12.07 ms
    keeps navigation links outside Pack disclosure controlsStudio static pagespassed0.23 ms
    labels next rungs, UI and finding links and avoids repeating absent bindingsStudio static pagespassed0.49 ms
    renders Pack members in authored order, closed and with one colored badge per summaryStudio static pagespassed0.7 ms
    renders the four Pack boundary sections and the verifier gap sentence onceStudio static pagespassed0.29 ms
    shows the stated rung beside its floor and warns only in the dishonest directionStudio static pagespassed0.24 ms
    renders every section in order and every addressable entry with its key and recorded lineStudio static pagespassed0.49 ms
    names the first unmet clause and renders a missing idea floor as noneStudio static pagespassed5.38 ms
    shows question fields, code location, component, bindings and relations both waysStudio static pagespassed0.93 ms
    escapes authored text, reads only code spans and links resolving mentionsStudio static pagespassed0.42 ms
    links validator-readable escaped mentions and preserves unequal code delimitersStudio static pagespassed0.36 ms
    shows findings on the index and only links page-bearing subjectsStudio static pagespassed10.06 ms
    embeds the index only on search and supplies its element and no-script explanationStudio static pagespassed0.78 ms
    resolves all probe links including fragments in dynamic search resultsStudio static pagespassed9.25 ms
    keeps unresolved component bindings as text and resolves every remaining linkStudio static pagespassed22.76 ms
    renders deterministically with no time or commit metadataStudio static pagespassed11.35 ms
    ships the native layout and focus stylesheet in the browser assetsStudio static pagespassed0.4 ms
    resolves every page link and element fragmentProtocol Studio page setpassed1364.19 ms
    contains the complete Spec prose without executing scriptProtocol Studio page setpassed103.58 ms
Design view

Requirement drawing

  • Declared verifying examples: no declared verifying example.
Requirement drawing for spec:consumers.spec-studio.shell
The diagram as text
  • spec:consumers.spec-studio.shell: The Studio's shell frames every page with navigation, a rail and a canvas · declared Spec
  • spec:consumers.spec-studio.search: Search finds a Spec, a Pack, an entry or a bound file by a word · declared Spec
  • spec:consumers.spec-studio: The Spec Studio is a static HTML workbench over the one graph · declared Spec
  • impl:protocol.studio-code-spans: escapes and maps code spans across Studio text · anchored code · src/projections/studio/pages/code-spans.ts:9
  • impl:protocol.studio-concept-match: matches concepts deterministically across graph and browser queries · anchored code · src/reader/concept-match.ts:43
  • impl:protocol.studio-frame: renders Studio navigation, page rails and composing controls · anchored code · src/projections/studio/pages/frame.ts:6
  • impl:protocol.studio-html: shared Studio HTML, source and link encoding · anchored code · src/projections/studio/pages/html.ts:8
  • impl:protocol.studio-search-page: publishes search records beside the browser results view · anchored code · src/projections/studio/pages/search-page.ts:5
  • impl:protocol.studio-search-results: ranks and renders concept, entry and file search hits · anchored code · src/studio-elements/search-results.ts:95
  • impl:protocol.studio-text: escapes prose and links graph-resolving mentions · anchored code · src/projections/studio/pages/text.ts:7
  • test:protocol.studio-concept-match: test:protocol.studio-concept-match · anchored test binding · binding present · test/concept-match.test.ts:9
  • test:protocol.studio-page-elements: test:protocol.studio-page-elements · anchored test binding · binding present · test/studio-elements.test.ts:26
  • test:protocol.studio-pages: test:protocol.studio-pages · anchored test binding · binding present · test/studio-pages.test.ts:18
  • spec:consumers.spec-studio.search refines spec:consumers.spec-studio.shell · declared
  • spec:consumers.spec-studio.shell refines spec:consumers.spec-studio · declared
  • impl:protocol.studio-code-spans satisfies spec:consumers.spec-studio.shell · anchored
  • impl:protocol.studio-concept-match satisfies spec:consumers.spec-studio.search · anchored
  • impl:protocol.studio-frame satisfies spec:consumers.spec-studio.shell · anchored
  • impl:protocol.studio-html satisfies spec:consumers.spec-studio.shell · anchored
  • impl:protocol.studio-search-page satisfies spec:consumers.spec-studio.search · anchored
  • impl:protocol.studio-search-results satisfies spec:consumers.spec-studio.search · anchored
  • impl:protocol.studio-text satisfies spec:consumers.spec-studio.shell · anchored
  • test:protocol.studio-concept-match verifies spec:consumers.spec-studio.search · anchored
  • test:protocol.studio-page-elements verifies spec:consumers.spec-studio.search · anchored
  • test:protocol.studio-pages verifies spec:consumers.spec-studio.shell · anchored
  • test:protocol.studio-pages verifies spec:consumers.spec-studio.search · anchored
Mermaid source

Copyable source; the Studio draws static SVG.

Preferred syntax: requirementDiagram. Chosen syntax: flowchart TB because folds require exact labels unavailable in requirement syntax.

Decisions

No decision record named.

Runtime
  • 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
  • impl:protocol.studio-code-spans · escapes and maps code spans across Studio text · src/projections/studio/pages/code-spans.ts:9

    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-frame · renders Studio navigation, page rails and composing controls · src/projections/studio/pages/frame.ts:6

    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-html · shared Studio HTML, source and link encoding · src/projections/studio/pages/html.ts:8

    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-text · escapes prose and links graph-resolving mentions · src/projections/studio/pages/text.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.

Runtime observation: not tracked.

Evidence

Runtime observation: not tracked.

Build attestations: not tracked.

Deployments: not tracked.

Bills of materials: not tracked.

Impact
Relations of spec:consumers.spec-studio.shell
The diagram as text
  • spec:consumers.spec-studio: The Spec Studio is a static HTML workbench over the one graph
  • spec:consumers.spec-studio.data: The Studio renders from the reader's values and embeds only what its script reads
  • spec:consumers.spec-studio.index-page: The index says where the corpus stands and narrows every Spec
  • spec:consumers.spec-studio.lenses: Five lenses read the graph as Packs, capabilities, architecture, tests and evidence
  • spec:consumers.spec-studio.navigation: Every page of the page set is reached from the top navigation and the index
  • spec:consumers.spec-studio.owner-queue: The owner queue page orders the statements and questions only a person can settle
  • spec:consumers.spec-studio.pack-page: A Pack page shows the Pack's design as one card per member
  • spec:consumers.spec-studio.page-elements: A few custom elements filter, search, open and copy on a rendered page
  • spec:consumers.spec-studio.registers: The corpus's registers are pages a reviewer opens from a link
  • spec:consumers.spec-studio.responsive: The Studio reads on a phone as on a desktop
  • spec:consumers.spec-studio.roadmap-page: The roadmap page shows the upcoming work in priority order, split by what it needs
  • spec:consumers.spec-studio.search: Search finds a Spec, a Pack, an entry or a bound file by a word
  • spec:consumers.spec-studio.sharing: A Studio build is stamped and shared from a static host
  • spec:consumers.spec-studio.shell: The Studio's shell frames every page with navigation, a rail and a canvas
  • spec:consumers.spec-studio.spec-page.core: A Spec page's core shows the whole Spec, with an anchor for every entry
  • spec:validation.prose-mentions: Every Spec id written in prose resolves
  • spec:consumers.spec-studio.shell dependsOn spec:consumers.spec-studio.data · declared
  • spec:consumers.spec-studio.shell dependsOn spec:consumers.spec-studio.lenses · declared — the top navigation opens each lens
  • spec:consumers.spec-studio.shell dependsOn spec:consumers.spec-studio.responsive · declared — the rail moves below the canvas under the phone breakpoint
  • spec:consumers.spec-studio.shell dependsOn spec:consumers.spec-studio.sharing · declared — the shell shows the stamp a publishing step writes beside the page set
  • spec:consumers.spec-studio.shell dependsOn spec:validation.prose-mentions · declared — a mention links where the validator resolves it
  • spec:consumers.spec-studio.shell refines spec:consumers.spec-studio · declared
  • spec:consumers.spec-studio.index-page dependsOn spec:consumers.spec-studio.shell · declared
  • spec:consumers.spec-studio.navigation dependsOn spec:consumers.spec-studio.shell · declared — the entries extend the shell's top navigation
  • spec:consumers.spec-studio.owner-queue dependsOn spec:consumers.spec-studio.shell · declared
  • spec:consumers.spec-studio.pack-page dependsOn spec:consumers.spec-studio.shell · declared
  • spec:consumers.spec-studio.page-elements dependsOn spec:consumers.spec-studio.shell · declared
  • spec:consumers.spec-studio.registers dependsOn spec:consumers.spec-studio.shell · declared
  • spec:consumers.spec-studio.roadmap-page dependsOn spec:consumers.spec-studio.shell · declared
  • spec:consumers.spec-studio.spec-page.core dependsOn spec:consumers.spec-studio.shell · declared
  • spec:consumers.spec-studio.search refines spec:consumers.spec-studio.shell · declared
Mermaid source

Copyable source; the Studio draws static SVG.

Preferred syntax: flowchart. Chosen syntax: labelled flowchart, preserving exact relations, claims and folds.

Rests on

Rested on by

Distance 1

Distance 2

Distance 3

Relations

Relation and directionOther endClaimReasonExercised keys
dependsOn · outgoingThe Studio renders from the reader's values and embeds only what its script reads
spec:consumers.spec-studio.data · resolves
declaredNoneNone
dependsOn · outgoingFive lenses read the graph as Packs, capabilities, architecture, tests and evidence
spec:consumers.spec-studio.lenses · resolves
declaredthe top navigation opens each lensNone
dependsOn · outgoingThe Studio reads on a phone as on a desktop
spec:consumers.spec-studio.responsive · resolves
declaredthe rail moves below the canvas under the phone breakpointNone
dependsOn · outgoingA Studio build is stamped and shared from a static host
spec:consumers.spec-studio.sharing · resolves
declaredthe shell shows the stamp a publishing step writes beside the page setNone
dependsOn · outgoingEvery Spec id written in prose resolves
spec:validation.prose-mentions · resolves
declareda mention links where the validator resolves itNone
refines · outgoingThe Spec Studio is a static HTML workbench over the one graph
spec:consumers.spec-studio · resolves
declaredNoneNone
dependsOn · incomingThe index says where the corpus stands and narrows every Spec
spec:consumers.spec-studio.index-page · resolves
declaredNoneNone
dependsOn · incomingEvery page of the page set is reached from the top navigation and the index
spec:consumers.spec-studio.navigation · resolves
declaredthe entries extend the shell's top navigationNone
dependsOn · incomingThe owner queue page orders the statements and questions only a person can settle
spec:consumers.spec-studio.owner-queue · resolves
declaredNoneNone
dependsOn · incomingA Pack page shows the Pack's design as one card per member
spec:consumers.spec-studio.pack-page · resolves
declaredNoneNone
dependsOn · incomingA few custom elements filter, search, open and copy on a rendered page
spec:consumers.spec-studio.page-elements · resolves
declaredNoneNone
dependsOn · incomingThe corpus's registers are pages a reviewer opens from a link
spec:consumers.spec-studio.registers · resolves
declaredNoneNone
dependsOn · incomingThe roadmap page shows the upcoming work in priority order, split by what it needs
spec:consumers.spec-studio.roadmap-page · resolves
declaredNoneNone
dependsOn · incomingA Spec page's core shows the whole Spec, with an anchor for every entry
spec:consumers.spec-studio.spec-page.core · resolves
declaredNoneNone
refines · incomingSearch finds a Spec, a Pack, an entry or a bound file by a word
spec:consumers.spec-studio.search · resolves
declaredNoneNone

Bindings

Implementation binding: present

  • impl:protocol.studio-code-spans · escapes and maps code spans across Studio text · src/projections/studio/pages/code-spans.ts:9 · role codec · component component:protocol.projections · layer edge · context protocol
  • impl:protocol.studio-frame · renders Studio navigation, page rails and composing controls · src/projections/studio/pages/frame.ts:6 · role projection · component component:protocol.projections · layer edge · context protocol
  • impl:protocol.studio-html · shared Studio HTML, source and link encoding · src/projections/studio/pages/html.ts:8 · role codec · component component:protocol.projections · layer edge · context protocol
  • impl:protocol.studio-text · escapes prose and links graph-resolving mentions · src/projections/studio/pages/text.ts:7 · role codec · component component:protocol.projections · layer edge · context protocol

Design reference: none

Verifier binding: present

  • test:protocol.studio-pages · anchored · test/studio-pages.test.ts:18 · test anchor

Expected-outcome oracle: none

Runtime observation: not tracked.

Run results: not recorded in the graph.

Findings

None.

Composing (0)

Composing needs the script.