A diagram preserves readable labels before zoom

outcome

Read a drawing's labels on first view while allowing a wide graph to scroll inside its figure.

rule.firstView line 19 · specs/consumers/spec-studio.diagram-kinds.legibility.sdp.md:19

At 720 CSS pixels of viewport width and wider, a diagram's SVG starts at its natural size inside its figure's scroll region and is never shrunk to fit. Overflow scrolls inside the figure, never the page. The build writes Scroll horizontally to read the whole drawing. above every drawing wider than the width budget. Below that viewport width the responsive contract's narrow drawing applies.

no example exercises it

rule.titleFirst line 20 · specs/consumers/spec-studio.diagram-kinds.legibility.sdp.md:20

A box starts with its title or recorded label at fourteen pixels, then a shortened id at twelve pixels, with full identity in its link title and text equivalent. Shortening changes no identity, target or element id; collisions extend the displayed suffix until it is unique within the figure. The box's remaining words, such as a component's member count, follow the id.

no example exercises it

0 unkeyed rules.

widthBudget line 23 · specs/consumers/spec-studio.diagram-kinds.legibility.sdp.md:23

880 logical pixels for a band or grid, band labels included, which stay above their band; 264 per context cell when several contexts share a grid, the full band budget when only one context is shown, and 24 between boxes. A drawing wider than 880 scrolls inside its figure. Layout reads no browser or font measurement.

no citation recorded

labelMetrics line 24 · specs/consumers/spec-studio.diagram-kinds.legibility.sdp.md:24

Title lines hold at most 28 characters at fourteen pixels with an eight-pixel character advance; ids hold at most 30 characters at twelve pixels with an eight-pixel advance. Wrap at spaces or id punctuation, then by code point, with whole-pixel coordinates and height calculated from all lines.

minimumScale line 25 · specs/consumers/spec-studio.diagram-kinds.legibility.sdp.md:25

1 on first desktop view at viewport widths of at least 720 CSS pixels; below that width the responsive contract fits the same drawing to the screen. Zooming out on desktop remains an explicit reader choice.

no citation recorded

shortId line 26 · specs/consumers/spec-studio.diagram-kinds.legibility.sdp.md:26

Drop the namespace and the leading dotted segments every id in the figure shares, and mark the elision with a leading …, so a label may show …markdown-authoring; keep more segments on collisions. A displayed id never carries a namespace unless it is shown in full. Full ids remain in the link title, the text equivalent and the source.

viewport line 27 · specs/consumers/spec-studio.diagram-kinds.legibility.sdp.md:27

.diagram-scroll is a keyboard-focusable named region with overflow auto and max-width one hundred percent. At desktop widths its SVG has natural width and height with no max-width fit; below 720 CSS pixels the SVG fits the region. The caption and legend stay outside. The build emits the scroll instruction only when SVG width exceeds the fixed width budget; CSS leaves the region discoverable on narrower columns.

no citation recorded

elementIds line 28 · specs/consumers/spec-studio.diagram-kinds.legibility.sdp.md:28

Keep each kind's text and arrow ids; the viewport uses diagram.<subject>[.<view>].viewport and its visible instruction uses .scroll-help, inserting the view name exactly where the diagram's own ids do.

Verifier bindings

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

  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 391 · Branch: cursor/media-plan-and-articles-09b1 · Commit: 076cd4f1f85640d8236e5cca1bffffa68ab79a33 · Start: 2026-10-31T15:32:20.471Z · Stop: 2026-10-31T15:34:02.073Z

  Name	Suite	Result	Duration
  wraps by code point and shortens shared segments without collisions	shared diagram core	passed	8.85 ms
  wraps boxes within the width budget and writes an instruction only for final wide drawings	shared diagram core	passed	3.9 ms
  routes forward, backward and same-band edges with distinct ports and no shared segments	shared diagram core	passed	15.19 ms
  fails closed when routing cannot fit, retaining complete text and no partial source	shared diagram core	passed	48.26 ms
  serializes full identities, exact claims, reasons, counts and folds as inert Mermaid data	shared diagram core	passed	2.03 ms
  copies the current value of the labelled textarea and selects that same area on clipboard failure	not recorded	passed	57.44 ms
  keeps the full box and edge bound routable with obstacles, separate lanes and edge labels	not recorded	passed	370.5 ms
  offers deterministic Mermaid source for each existing drawing and pins the safe text syntax	not recorded	passed	7.07 ms
  folds reason-bearing trace groups without attributing a member reason to the group	not recorded	passed	6.45 ms
  uses the full band budget for a single context and routes adjacent bands inside it	not recorded	passed	0.58 ms
  prints exact short relation words and reserves keys for wording that cannot fit	not recorded	passed	10.14 ms
  names viewport and instruction ids for trace and secondary views	not recorded	passed	6.44 ms
  names the architecture syntax and serializes aliases in displayed box order	not recorded	passed	0.47 ms
  routes the current Protocol architecture and recorded adopter architecture with distinct ports and segments	not recorded	passed	61.67 ms
  extends overflow rails past earlier labels on the adopter's dense traces	not recorded	passed	4.04 ms
  keeps high-degree boxes inside their cells when contexts share a grid	not recorded	passed	0.78 ms
  folds nine refining verifiers with their tests within the band budget and keeps every text row	not recorded	passed	2.44 ms
  names folded declared refiners by their relation and claim without an internal subtitle	not recorded	passed	1.61 ms
  keeps examples apart from refiners when dense requirement groups fold	not recorded	passed	1.02 ms
  names refines folds in plain words and preserves direction	not recorded	passed	1.21 ms
  names satisfies folds in plain words and preserves direction	not recorded	passed	2.29 ms
  names verifies folds in plain words and preserves direction	not recorded	passed	1.05 ms
  keeps a short drawing unfolded even with many boxes and incident edges	not recorded	passed	0.79 ms
  packs disjoint endpoint intervals into shared horizontal lanes	not recorded	passed	0.8 ms
  uses a legend key before spending overflow width on exact words	not recorded	passed	1.11 ms

Requirement drawing

• Declared verifying examples: no declared verifying example.

Decisions

No decision record named.

• 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-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-diagram-layout · title-first box placement, wrapping and band sizing for desktop and phone · src/projections/studio/diagrams/layout.ts:140

  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-diagrams · deterministic grid and band layouts with bounded folds and full text equivalents · src/projections/studio/diagrams/svg.ts:73

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

  Uses

  • impl:protocol.studio-diagram-model · shared diagram boxes, edges and drawing bounds · src/projections/studio/diagrams/model.ts:1

Runtime observation: not tracked.

Runtime observation: not tracked.

Build attestations: not tracked.

Deployments: not tracked.

Bills of materials: not tracked.