A few custom elements filter, search, open and copy on a rendered page

outcome

Give the Studio's pages their few interactions through custom elements that enhance markup the build wrote, so a page with its script filters, searches and copies, and every page but the search page still reads in full without it.

rule.oneScript line 21 · specs/consumers/spec-studio.page-elements.sdp.md:21

The elements ship in one classic script, assets/studio.js, with no module syntax and nothing loaded at run time; the build bundles it from the package's source, with the concept matcher.

no example exercises it

rule.enhanceOnly line 22 · specs/consumers/spec-studio.page-elements.sdp.md:22

Each element enhances markup the build wrote and renders no graph value of its own, except that the search results element renders values from the search index its page embeds.

no example exercises it

rule.noRequest line 23 · specs/consumers/spec-studio.page-elements.sdp.md:23

No element requests anything on a page opened through file://; the stamp element requests stamp.json only over http or https.

no example exercises it

rule.nativeControls line 24 · specs/consumers/spec-studio.page-elements.sdp.md:24

Every control an element adds is a native button, link, select or input with a text label, reachable from the keyboard in reading order.

no example exercises it

rule.liveCounts line 25 · specs/consumers/spec-studio.page-elements.sdp.md:25

An element that changes what a page shows says so in words in a polite live region, such as how many rows a filter shows.

no example exercises it

0 unkeyed rules.

search line 28 · specs/consumers/spec-studio.page-elements.sdp.md:28

sdp-search with page-root, the relative path from its page to the page-set root: wraps the search field's form and, on submit, opens <page-root>search.html#q=<term> with the term percent-encoded.

no citation recorded

searchResults line 29 · specs/consumers/spec-studio.page-elements.sdp.md:29

sdp-search-results: on the search page, reads the index from the sdp-data element, matches the fragment's term and each term the person types, writes the results spec:consumers.spec-studio.search designs, and keeps the term in the fragment.

no citation recorded

filter line 30 · specs/consumers/spec-studio.page-elements.sdp.md:30

sdp-filter: wraps a hidden form of labelled select elements, each with data-filter="<name>" and an any option, and the rows marked data-row. On upgrade it shows the form, hides each row whose data-<name> differs from a chosen value, and writes <shown> of <total> shown in its output element; a row whose attribute holds several space-separated values, such as its Packs, matches when one of them equals the choice. When a followed link or a fragment change targets an element inside a row it hides, it returns every control to any, adds to its output that the filter was cleared to show that target, and scrolls the target into view.

no citation recorded

expander line 31 · specs/consumers/spec-studio.page-elements.sdp.md:31

sdp-expander: adds Open all and Close all buttons for the details elements inside it, and on load and on each fragment change opens every details that holds the fragment's target and scrolls the target into view.

no citation recorded

copy line 32 · specs/consumers/spec-studio.page-elements.sdp.md:32

sdp-copy with text, or with for naming a text area on its page: a Copy button whose accessible name includes the text or the text area's label; it copies that text and says Copied, and where the clipboard is unavailable it selects the text so the person can copy it.

no citation recorded

stamp line 33 · specs/consumers/spec-studio.page-elements.sdp.md:33

sdp-stamp with page-root: served over http or https, it requests <page-root>stamp.json and, when it loads, shows its corpus commit, engine and build time as text; otherwise it shows nothing.

no citation recorded

Verifier bindings

• test:protocol.studio-copy-source · anchored · test anchor binding present · test/studio-diagram-core.test.ts:191

  External run evidence from test/studio-diagram-core.test.ts

  Test anchors: test:protocol.studio-copy-source, test:protocol.studio-diagram-core. Specs verified by those bindings: spec:consumers.spec-studio.diagram-kinds.edge-routing, spec:consumers.spec-studio.diagram-kinds.legibility, spec:consumers.spec-studio.diagram-kinds.mermaid-source, spec:consumers.spec-studio.diagram-kinds.requirement-trace, spec:consumers.spec-studio.diagrams, spec:consumers.spec-studio.page-elements.

  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
  wraps by code point and shortens shared segments without collisions	shared diagram core	passed	8.25 ms
  wraps boxes within the width budget and writes an instruction only for final wide drawings	shared diagram core	passed	6.1 ms
  routes forward, backward and same-band edges with distinct ports and no shared segments	shared diagram core	passed	14.15 ms
  fails closed when routing cannot fit, retaining complete text and no partial source	shared diagram core	passed	50.17 ms
  serializes full identities, exact claims, reasons, counts and folds as inert Mermaid data	shared diagram core	passed	1.98 ms
  copies the current value of the labelled textarea and selects that same area on clipboard failure	not recorded	passed	55.84 ms
  keeps the full box and edge bound routable with obstacles, separate lanes and edge labels	not recorded	passed	430.81 ms
  offers deterministic Mermaid source for each existing drawing and pins the safe text syntax	not recorded	passed	5.63 ms
  folds reason-bearing trace groups without attributing a member reason to the group	not recorded	passed	8.01 ms
  uses the full band budget for a single context and routes adjacent bands inside it	not recorded	passed	0.59 ms
  prints exact short relation words and reserves keys for wording that cannot fit	not recorded	passed	6.46 ms
  names viewport and instruction ids for trace and secondary views	not recorded	passed	3.43 ms
  names the architecture syntax and serializes aliases in displayed box order	not recorded	passed	0.34 ms
  routes the current Protocol architecture and recorded adopter architecture with distinct ports and segments	not recorded	passed	74.94 ms
  extends overflow rails past earlier labels on the adopter's dense traces	not recorded	passed	4.75 ms
  keeps high-degree boxes inside their cells when contexts share a grid	not recorded	passed	1.15 ms
  folds nine refining verifiers with their tests within the band budget and keeps every text row	not recorded	passed	2.68 ms
  names folded declared refiners by their relation and claim without an internal subtitle	not recorded	passed	2.03 ms
  keeps examples apart from refiners when dense requirement groups fold	not recorded	passed	1.09 ms
  names refines folds in plain words and preserves direction	not recorded	passed	1.31 ms
  names satisfies folds in plain words and preserves direction	not recorded	passed	1.09 ms
  names verifies folds in plain words and preserves direction	not recorded	passed	1.46 ms
  keeps a short drawing unfolded even with many boxes and incident edges	not recorded	passed	1.77 ms
  packs disjoint endpoint intervals into shared horizontal lanes	not recorded	passed	0.89 ms
  uses a legend key before spending overflow width on exact words	not recorded	passed	1.18 ms

• test:protocol.studio-page-elements · anchored · test anchor binding present · test/studio-elements.test.ts:26

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

  Test anchors: test:protocol.studio-page-elements. Specs verified by those bindings: spec:consumers.spec-studio.page-elements, spec:consumers.spec-studio.search.

  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
  offers a prompt before searching and puts a real miss before the field list	Studio page interactions	passed	2.06 ms
  writes singular counts, readable fields, code-span titles and linked entry keys	Studio page interactions	passed	3.05 ms
  cuts long excerpts at word boundaries around the term	Studio page interactions	passed	0.42 ms
  copies the requested text and reports successful clipboard writes	Studio page interactions	passed	0.81 ms
  selects copy text when the clipboard is missing or rejects access	Studio page interactions	passed	0.52 ms
  decodes entry fragments literally and refuses malformed fragment escapes	Studio page interactions	passed	0.29 ms
  filters all filters together and accepts space-separated row values	Studio page interactions	passed	0.35 ms
  clears the filter when a link or fragment targets a row it hides	Studio page interactions	passed	6.32 ms
  round-trips term fragments including punctuation, spaces and Unicode	Studio page interactions	passed	0.9 ms
  matches entry tokens, and non-string values only by their coined key	Studio page interactions	passed	0.86 ms
  keeps a node whose only match is a tokenized coined entry key	Studio page interactions	passed	0.59 ms
  reads authored values at most twice per search, regardless of the entry count	Studio page interactions	passed	3.32 ms
  links addressed hits to the entry and other hits to their section or narrative	Studio page interactions	passed	0.5 ms
  groups entries beneath each node and pages fifty nodes at a time	Studio page interactions	passed	7.16 ms
  renders node words, independent rungs, bindings, locations and escaped text	Studio page interactions	passed	2.57 ms
  requests a stamp only over HTTP and HTTPS and shows only its text fields	Studio page interactions	passed	0.61 ms
  loads the built classic bundle without imports and defines the page and view elements	Studio page interactions	passed	1.95 ms
  names a question copy control with the full entry address and updates it	Studio page interactions	passed	1.42 ms
  uses the navigation search input, announces the empty prompt and reveals paging progress	Studio page interactions	passed	9.52 ms
  enhances a diagram through its view box, preserves links on click and removes handlers	not recorded	passed	2.61 ms

Requirement drawing

• Declared verifying examples: no declared verifying example.

Decisions

• 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.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-copy · copies text with selection fallback and failure feedback · src/studio-elements/copy.ts:22

  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-expander · opens fragment ancestors and expands disclosures for print · src/studio-elements/expander.ts:16

  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-search-form · routes search forms through page-root URLs and fragments · src/studio-elements/search.ts:18

  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-stamp · resolves published stamps and source links in the browser · src/studio-elements/stamp.ts:30

  Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · 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.