Screenshot gallery

230 E2E screenshots. Open a capture to inspect the visual evidence and its readable test context.

admonitions-dark-full.png

Full-page dark capture of every admonition variant. The reference for colour bleed: each paragraph between blocks must match the baseline paragraph at the top.

admonitions-dark-nested.png

An admonition containing a list, a code block, a table and a blockquote. Nested elements keep their own spacing and the last child has no trailing margin.

admonitions-dark-titled.png

Titled admonitions close up. Exactly one title line per block; two means the default heading is being printed above the author's title.

admonitions-forced-cream-full.png

Every admonition variant on the cream page. Each accent must stay distinguishable from its neighbours and every title and body must stay readable on its tinted panel.

admonitions-light-full.png

Full-page light capture of every admonition variant, including the accent used for a generic admonition carrying an author-supplied class.

admonitions-narrow-full.png

The same gallery at panel width, to catch wrapping inside tinted panels.

bare-urls-light-wide.png

Bare URLs typed without Markdown link syntax in a paragraph, a list item and a table cell are rendered as ordinary underlined links (trailing punctuation left outside the link); the URL inside inline code stays plain code text.

chapter-dark-bottom.png

True end of the chapter. The final paragraph names itself, so a screenshot that does not show it means the scroll stopped short.

chapter-dark-half.png

The typeset display-equation landmark with surrounding shift-change content.

chapter-dark-quarter.png

The important-block landmark and following body-colour paragraph.

chapter-dark-three-quarters.png

Incident patterns landmark with back-to-back admonitions.

chapter-dark-top.png

Opening of a realistic chapter: note, prose, then a loaded figure with caption text. The caption has no generated figure number; inspect its separation from body text.

chapter-figure-dark.png

Close-up of a chapter figure referenced from a sibling external-img directory. The SVG must load and the caption must remain visible beneath it.

chapter-light-top.png

Same chapter opening on a light theme, for side-by-side contrast review.

chapter-max-width-dark-full.png

The full long chapter in a 1600px dark preview. Its content column stays centered at the configured 960px maximum.

chapter-max-width-light-full.png

The full long chapter in a 1600px light preview. The readable column stays centered at the configured 960px maximum.

checkbox-e2e-mVkAMl/01-reading-unchecked.png

Reading mode before any click: the first task and the Unit tests cell are unchecked.

checkbox-e2e-mVkAMl/02-reading-checked.png

Reading mode after clicking the first task: it is checked in the preview and `- [x]` in the source.

checkbox-e2e-mVkAMl/03-edit-mode-unchecked.png

Edit mode is on (pencil pressed); the Unit tests table cell checkbox is unchecked.

checkbox-e2e-mVkAMl/04-edit-mode-checked.png

Edit mode after clicking the Unit tests cell: it is checked, no cell editor opened, and the table row reads `| Unit tests | [x] |`.

code-dark-table-narrow.png

The sixteen-column table at 640 px, whole page, not scrolled. Short identifiers such as nw-02 and North stay on one line, and a shadow on the overflow edge shows that the table scrolls.

code-dark-table.png

A sixteen-column table deliberately wider than the preview. The final capture is scrolled to its FAR-RIGHT-ACCESS column without a horizontal page scrollbar.

code-dark-top.png

A long TypeScript block. Checks monospace selection, padding and radius.

code-light-full.png

Whole document on a light theme: code, wide table, four-level nested list and definition list in one frame.

code-light-table-narrow.png

The sixteen-column table at 640 px on a light theme, whole page, not scrolled. Short identifiers such as nw-02 and North stay on one line, and a shadow on the overflow edge shows that the table scrolls.

code-tables-forced-cream.png

Code blocks, inline code and tables on cream. Code sits on a slightly darker cream with a warm border, syntax colours use the light palette and table borders and header bands are warm grey rather than cold grey.

context-tags-dark-narrow.png

Narrow dark side-panel capture of the exact adjacent YAML form plus simple and snake_case tags. The panels must wrap without widening the page or hiding the YAML code.

context-tags-dark-wide.png

Desktop dark capture of the exact adjacent YAML context form plus simple and snake_case tags. Literal titles, Markdown body, mapped ranges, and YAML code must remain visible.

context-tags-light-narrow.png

Narrow light side-panel capture of the exact adjacent YAML form plus simple and snake_case tags. The panels must wrap without widening the page or hiding the YAML code.

context-tags-light-wide.png

Desktop light capture of the exact adjacent YAML context form plus simple and snake_case tags. Literal titles, Markdown body, mapped ranges, and YAML code must remain visible.

diff-dark-edit.png

The same diff block in page-wide edit mode on a dark theme. Rendered line styling must remain visible while the preview is editable.

diff-dark-preview.png

A fenced diff block in readonly preview on a dark theme. Added and removed lines must use distinct full-width treatments while the patch markers remain visible.

diff-light-edit.png

The same diff block in page-wide edit mode on a light theme. The rendered preview must retain its green and red line treatments.

diff-light-preview.png

A fenced diff block in readonly preview on a light theme. Green and red line treatments must remain legible against the code panel.

edit-admonition-dark.png

Clicking an admonition title opens the complete mapped directive source.

edit-affordances-hover-and-open-hover.png

No sidecar metadata was recorded for this capture.

edit-affordances-hover-and-open.png

Edit mode on. A hovered list is outlined with a dashed line (a second PNG, -hover, is kept); the final frame shows a paragraph editor with its frame, line-range hint, and the status line on one row with the Done and Cancel buttons (status left, buttons right, smaller editor text).

edit-affordances-narrow-hover.png

No sidecar metadata was recorded for this capture.

edit-affordances-narrow.png

460 px preview: the paragraph editor's status line wraps onto its own lines without overlapping the Done and Cancel buttons, which stay right-aligned on the same row or below.

edit-empty-document-enter-opens-editor.png

Edit mode on with an empty file after pressing Enter in the preview: the new-block editor is open with its caret in it, replacing the Start writing button, with at least 20 px above its frame.

edit-empty-document-start-writing.png

Edit mode on with an empty file: the Start writing button is shown at least 20 px below the top edge of the preview, not stuck against it.

edit-first-block-top-narrow.png

Same as the wide first-block case on a narrow dark preview: the open heading editor keeps a visible gap above its frame and does not touch the floating toolbar.

edit-first-block-top-wide.png

Edit mode on, light theme, a document without frontmatter whose first block is the heading. The heading's editor is open and its frame sits at least 20 px below the top edge of the preview, clear of the floating toolbar; the paragraph below it is still visible.

edit-frontmatter-boolean-dark.png

The checkbox starts checked, is clicked once, and is captured unchecked after posting a false save to the mock host.

edit-frontmatter-key-dark.png

The expanded key suggestions show an unused property from the matching JSON Schema.

edit-frontmatter-list-dark.png

List reorder, addition and removal are exercised; the final set-as-null save is pending with the editor disabled. The mock host does not persist or rerender values.

edit-frontmatter-list-light.png

Light-theme list reorder/add/remove checks end with a pending set-as-null save and disabled editor; the mock host does not persist or rerender values.

edit-frontmatter-value-dark.png

The final frame shows only the active status enum control, with the Add-field picker closed. Add and draft-save messages are checked; a simulated mock-host rejection re-enables Escape cancellation before reopening the original active value. No real persistence is claimed.

edit-insert-after-final-figure.png

Edit mode on, light theme, a document that ends with a figure. After hovering the figure and clicking the round + below it, an empty block editor is open directly under the figure caption; the insertion message carried the line of the closing fence.

edit-insert-after-final-image.png

Edit mode on, light theme, a document that ends with a plain Markdown image. After hovering the image and clicking the round + below it, an empty block editor is open directly under the image; the insertion message carried the image's line (5).

edit-insert-point-hover-hover.png

No sidecar metadata was recorded for this capture.

edit-insert-point-hover.png

Edit mode on, light theme. Hovering a list reveals the round + insertion button in the left gutter below it (the -hover PNG); the insertion points add no height to the page.

edit-list-narrow.png

Clicking one item opens the complete list, including a wrapped continuation line, in the editor.

edit-paragraph-dark.png

Clicking a body paragraph opens its source editor while retaining the hard source lines.

edit-paragraph-forced-cream.png

An open paragraph editor in edit mode on the cream page: the editor frame, textarea, caret, hint and Save/Cancel buttons all use the cream palette and stay readable.

edit-table-cell-dark-arrowdown.png

No sidecar metadata was recorded for this capture.

edit-table-cell-dark-end.png

No sidecar metadata was recorded for this capture.

edit-table-cell-dark-open.png

No sidecar metadata was recorded for this capture.

edit-table-wide-end-dark-end.png

No sidecar metadata was recorded for this capture.

edit-table-wide-end-dark.png

Edit mode on a sixteen-column table wider than the preview. After pressing End in the far-right cell editor (the -end PNG) the caret is at the end of the cell text and the table has not shifted horizontally. Done and Cancel sit inside the cell without widening the column and the toolbar status is centred with its buttons.

edit-table-wrapped-dark-460-arrowdown.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-dark-460-end.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-dark-460-open.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-dark-460.png

Long table-cell source wraps inside the cell in the block editor font, with Done and Cancel under the field inside the cell and unchanged column widths; the -arrowdown PNG shows the editor moved to the cell below.

edit-table-wrapped-dark-900-arrowdown.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-dark-900-end.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-dark-900-open.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-dark-900.png

Long table-cell source wraps inside the cell in the block editor font, with Done and Cancel under the field inside the cell and unchanged column widths; the -arrowdown PNG shows the editor moved to the cell below.

edit-table-wrapped-light-460-arrowdown.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-light-460-end.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-light-460-open.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-light-460.png

Long table-cell source wraps inside the cell in the block editor font, with Done and Cancel under the field inside the cell and unchanged column widths; the -arrowdown PNG shows the editor moved to the cell below.

edit-table-wrapped-light-900-arrowdown.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-light-900-end.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-light-900-open.png

No sidecar metadata was recorded for this capture.

edit-table-wrapped-light-900.png

Long table-cell source wraps inside the cell in the block editor font, with Done and Cancel under the field inside the cell and unchanged column widths; the -arrowdown PNG shows the editor moved to the cell below.

editor-keyboard-wrapped-narrow-selected.png

No sidecar metadata was recorded for this capture.

editor-keyboard-wrapped-narrow.png

460 px preview with a long wrapping paragraph open in its editor. ArrowUp on the second wrapped line moved the caret to the first line without leaving the editor; typing * twice on the selected word Wrapped shows **Wrapped** in the textarea, and undo and redo restored the text.

frontmatter-dark.png

Plain two-column frontmatter table on the dark theme: lean, no outer frame or cell backgrounds, grid separators retained and values readable on the editor background.

frontmatter-e2e-pUQ6Kw/description-dark-collapsed-after-refresh-narrow.png

Description header and cells are hidden. Name and Value remain readable, and the expand icon stays visible.

frontmatter-e2e-pUQ6Kw/description-dark-collapsed-after-refresh.png

Description header and cells are hidden. Name and Value remain readable, and the expand icon stays visible.

frontmatter-e2e-pUQ6Kw/description-dark-collapsed-narrow.png

Description header and cells are hidden. Name and Value remain readable, and the expand icon stays visible.

frontmatter-e2e-pUQ6Kw/description-dark-collapsed.png

Description header and cells are hidden. Name and Value remain readable, and the expand icon stays visible.

frontmatter-e2e-pUQ6Kw/description-dark-expanded-again-narrow.png

Description header and cells are visible. Check column spacing, text contrast, and the collapse icon beside the frontmatter title.

frontmatter-e2e-pUQ6Kw/description-dark-expanded-again.png

Description header and cells are visible. Check column spacing, text contrast, and the collapse icon beside the frontmatter title.

frontmatter-e2e-pUQ6Kw/description-dark-expanded-narrow.png

Description header and cells are visible. Check column spacing, text contrast, and the collapse icon beside the frontmatter title.

frontmatter-e2e-pUQ6Kw/description-dark-expanded.png

Description header and cells are visible. Check column spacing, text contrast, and the collapse icon beside the frontmatter title.

frontmatter-e2e-pUQ6Kw/description-white-collapsed-after-refresh-narrow.png

Description header and cells are hidden. Name and Value remain readable, and the expand icon stays visible.

frontmatter-e2e-pUQ6Kw/description-white-collapsed-after-refresh.png

Description header and cells are hidden. Name and Value remain readable, and the expand icon stays visible.

frontmatter-e2e-pUQ6Kw/description-white-collapsed-narrow.png

Description header and cells are hidden. Name and Value remain readable, and the expand icon stays visible.

frontmatter-e2e-pUQ6Kw/description-white-collapsed.png

Description header and cells are hidden. Name and Value remain readable, and the expand icon stays visible.

frontmatter-e2e-pUQ6Kw/description-white-expanded-again-narrow.png

Description header and cells are visible. Check column spacing, text contrast, and the collapse icon beside the frontmatter title.

frontmatter-e2e-pUQ6Kw/description-white-expanded-again.png

Description header and cells are visible. Check column spacing, text contrast, and the collapse icon beside the frontmatter title.

frontmatter-e2e-pUQ6Kw/description-white-expanded-narrow.png

Description header and cells are visible. Check column spacing, text contrast, and the collapse icon beside the frontmatter title.

frontmatter-e2e-pUQ6Kw/description-white-expanded.png

Description header and cells are visible. Check column spacing, text contrast, and the collapse icon beside the frontmatter title.

frontmatter-e2e-pUQ6Kw/links-dark-hover.png

Action: hover the related link. Expected: visible target path and description: Original target description, with readable text, preserved line breaks and no viewport clipping.

frontmatter-e2e-pUQ6Kw/links-dark-long-ellipsis.png

Action: save twelve repetitions of Saved target metadata with a deliberately long description. Assert full excerpt/title preserved and actual scrollWidth exceeds clientWidth with text-overflow: ellipsis. Visual review: truncation and contrast.

frontmatter-e2e-pUQ6Kw/links-dark-original.png

Setup: original target metadata. Excerpt and title contain Original target description. Both evidence links carry exactly line 2. Check muted italic excerpt and marker labels remain readable.

frontmatter-e2e-pUQ6Kw/links-dark-saved-target.png

Action: save target description on disk and await linked-file enrichment. Original target description is replaced with exactly Updated target description in excerpt and native title without a full document render.

frontmatter-e2e-pUQ6Kw/links-marker-removed.png

Action: remove implementation marker on disk and await linked-file enrichment. Implementation remains a valid link with zero line badges; test evidence still has exactly line 2.

frontmatter-e2e-pUQ6Kw/links-white-hover.png

Action: hover the related link. Expected: visible target path and description: Original target description, with readable text, preserved line breaks and no viewport clipping.

frontmatter-e2e-pUQ6Kw/links-white-long-ellipsis.png

Action: save twelve repetitions of Saved target metadata with a deliberately long description. Assert full excerpt/title preserved and actual scrollWidth exceeds clientWidth with text-overflow: ellipsis. Visual review: truncation and contrast.

frontmatter-e2e-pUQ6Kw/links-white-original.png

Setup: original target metadata. Excerpt and title contain Original target description. Both evidence links carry exactly line 2. Check muted italic excerpt and marker labels remain readable.

frontmatter-e2e-pUQ6Kw/links-white-saved-target.png

Action: save target description on disk and await linked-file enrichment. Original target description is replaced with exactly Updated target description in excerpt and native title without a full document render.

frontmatter-e2e-pUQ6Kw/marker-navigation-destination.png

Active source editor shows evidence/implementation.py at line 2, containing @implements_req finding-frontmatter-001.

frontmatter-forced-cream.png

The OKF properties table at the top of a cream page. Field names, values and the header band are readable and inline code uses clay text on the darker cream code background; the toolbar theme button shows a steaming coffee cup icon.

frontmatter-forced-white.png

YAML frontmatter rendered at the top of the document. Metadata and inline code use readable link-blue text against the soft white-mode code background.

frontmatter-light.png

Plain two-column frontmatter table on the light theme: transparent cells keep body-text contrast against the white page.

frontmatter-link-details-dark-460.png

Resolved links show fresh target metadata and a clipped long excerpt. Beta intentionally lacks the optional description. Inspect excerpt ellipsis, Alpha's line 9 label and the visible Refresh tooltip without page overflow; native link title metadata is DOM-asserted, not visible in the PNG.

frontmatter-link-details-dark-900.png

Resolved links show fresh target metadata and a clipped long excerpt. Beta intentionally lacks the optional description. Inspect excerpt ellipsis, Alpha's line 9 label and the visible Refresh tooltip without page overflow; native link title metadata is DOM-asserted, not visible in the PNG.

frontmatter-link-details-white-460.png

Resolved links show fresh target metadata and a clipped long excerpt. Beta intentionally lacks the optional description. Inspect excerpt ellipsis, Alpha's line 9 label and the visible Refresh tooltip without page overflow; native link title metadata is DOM-asserted, not visible in the PNG.

frontmatter-link-details-white-900.png

Resolved links show fresh target metadata and a clipped long excerpt. Beta intentionally lacks the optional description. Inspect excerpt ellipsis, Alpha's line 9 label and the visible Refresh tooltip without page overflow; native link title metadata is DOM-asserted, not visible in the PNG.

frontmatter-links-loaded.png

The same properties table after deferred link inspection. The spinners are gone and both resolved values are rendered as links.

frontmatter-links-loading.png

The properties table while filesystem-backed links are being inspected. Each linked value keeps its text and shows a small spinner immediately after it.

frontmatter-scroll-feedback-edit.png

Edit mode remains on after three scroll cycles; the field editor is closed and the final capture is at the top.

frontmatter-scroll-feedback.png

Three scroll cycles reach both ends; the final capture returns to the top of the tall frontmatter table.

handbook-dark-bottom.png

Bottom of the document. The trailing padding must keep the last paragraph reachable and visible rather than pinned against the viewport edge.

handbook-dark-third.png

The first code landmark in the same document. Mid-scroll rendering of an ordered list, a fenced Python block, and a titled warning admonition.

handbook-dark-top.png

Top of a long mixed document on a dark theme. Checks the h1 rule, the first note admonition, and that the paragraph following it returns to body colour.

handbook-forced-cream.png

Forced cream preview while the VS Code host remains dark. Warm light paper page, warm near-black text, clay-coloured links and a note panel that stays distinct from the page. Nothing may look dark, yellow or washed out.

handbook-forced-white.png

Forced white preview while the VS Code host remains dark. The page, text and note panel must all use the light palette.

handbook-light-failures.png

The run of danger, caution, error, hint, seealso and attention blocks on a light theme. Every accent must be distinguishable from its neighbours.

handbook-light-top.png

Same opening on a light theme. This is where a near-white admonition background on a white page would be invisible.

handbook-narrow-table.png

The service level table at panel width, captured after internal scrolling to its far-right Audit column. The page itself must not widen.

handbook-narrow-top.png

Narrow side-panel width, the width most users actually preview at. Checks gutters and that admonition padding does not eat the usable column.

inline-code-cream.png

Inline code in a heading, paragraphs, a wrapped long identifier, links, a list, an admonition and a table. Each span is a subtle tinted pill with a hairline border and rounded corners, slightly smaller than the text, never a heavy black box; paragraph lines with code are as tall as lines without; code inside links keeps the link colour and underline.

inline-code-dark.png

Inline code in a heading, paragraphs, a wrapped long identifier, links, a list, an admonition and a table. Each span is a subtle tinted pill with a hairline border and rounded corners, slightly smaller than the text, never a heavy black box; paragraph lines with code are as tall as lines without; code inside links keeps the link colour and underline.

inline-code-light.png

Inline code in a heading, paragraphs, a wrapped long identifier, links, a list, an admonition and a table. Each span is a subtle tinted pill with a hairline border and rounded corners, slightly smaller than the text, never a heavy black box; paragraph lines with code are as tall as lines without; code inside links keeps the link colour and underline.

inline-code-narrow.png

Inline code at 460px. Identifiers in the squeezed table cells are not split mid-word (the table scrolls or widens instead), while the long REGIONAL_ARBITER identifier in the paragraph wraps without causing horizontal page overflow.

inline-code-white.png

Inline code in a heading, paragraphs, a wrapped long identifier, links, a list, an admonition and a table. Each span is a subtle tinted pill with a hairline border and rounded corners, slightly smaller than the text, never a heavy black box; paragraph lines with code are as tall as lines without; code inside links keeps the link colour and underline.

math-edit-offline-dark.png

KaTeX rendering is checked before interaction. The final frame shows the original $$ Markdown in the focused equation editor, not the pre-edit typeset equation.

math-edit-offline-light-narrow.png

Offline KaTeX fonts are checked before interaction. The final narrow frame shows the original $$ Markdown editor after activation without a scroll jump.

mermaid-map-dark.png

The OKF knowledge-base map in the dark preview.

mermaid-map-fallback.png

The OKF knowledge-base map without host color variables.

mermaid-map-light.png

The OKF knowledge-base map in the light preview.

nested-list-typing-dark.png

Edit the user's nested plugin list with six literal spaces, Enter, and a new list item. Check exact text, caret, focus, and autosave without period substitution or blocked newlines.

nested-list-typing-light.png

Edit the user's nested plugin list with six literal spaces, Enter, and a new list item. Check exact text, caret, focus, and autosave without period substitution or blocked newlines.

okf-schema-dark.png

OKF schema table on the dark theme itself (preview mode auto): lean transparent cells with grid separators, description text smaller than name/value, and title badge with readable contrast.

okf-schema-missing-required-dark.png

An OKF schema table with missing required fields. The descriptions remain plain prose, and a red summary below the table names every missing field.

okf-schema-missing-required-light.png

The same incomplete OKF schema in a light theme, showing the red missing-required summary below the last property row.

okf-schema-table.png

OKF frontmatter with a matching schema. The three-column properties table shows name, value, and the schema description of each field.

plantuml-executable-not-found.png

A missing PlantUML executable shows an actionable settings message and preserves the source.

plantuml-success-dark.png

A successful PlantUML render on a dark preview background when plantuml is available on PATH.

plantuml-success-light.png

A successful PlantUML render on a white preview background when plantuml is available on PATH.

plantuml-unconfigured.png

Intentionally unconfigured PlantUML shows the JAR-path guidance and expandable source, not a successful diagram.

preview-edit-activation-scroll-narrow.png

Opening a centered paragraph editor in a narrow preview preserves scroll throughout source loading and layout stabilization.

preview-edit-activation-scroll-wide.png

A centered paragraph keeps its scroll position when its editor loads asynchronously, without transient jumps or delayed anchor corrections.

preview-sticky-headings-1.png

Depth one keeps only the current Markdown heading visible at the top of the preview.

preview-sticky-headings-2.png

Depth two keeps the current heading and its parent visible at the top of the preview.

preview-sticky-headings-3-light-narrow.png

Depth three remains legible in a narrow preview at the normal text size.

preview-sticky-headings-3.png

Depth three keeps the current heading and two parent levels visible in the preview.

preview-sticky-headings-natural-growth.png

Long, wrapped heading ancestry grows the sticky band to its rendered content height.

real-input-9nLPSn/01-paragraph-blur-commit.png

Edit mode on; the paragraph gained ` Added.` and the heading click moved focus out. The buffer line reads `Second paragraph. Added.`; nothing else changed.

real-input-9nLPSn/02-ctrl-enter-commit.png

Edit mode on; the first paragraph gained ` X` and Cmd/Ctrl+Enter saved it. The editor is closed after the re-render, and buffer line 4 reads `continues on line two. X`.

real-input-9nLPSn/03-arrow-navigation.png

Edit mode on; ArrowDown at the end of the paragraph moved the raw Markdown editor to the table, whose textarea starts with `| Name | Value |`.

real-input-9nLPSn/04-table-cell-enter.png

Edit mode on; the cell `one` was edited with End, `1` and Enter. The buffer contains `| alpha | one1 |` and the table still has four lines.

real-input-9nLPSn/05-open-with-editor.png

Opened with the Studio Open With editor (no side preview); edit mode on; Cmd/Ctrl+Enter saved `Second paragraph. Z` to the buffer.

real-input-9nLPSn/06-table-padded-edit.png

Edit mode on; the padded table cell `second` gained ` X` and Enter saved it. The buffer changed only the line `| first | second X |`; the alignment padding is kept.

real-input-9nLPSn/07-table-compact-edit.png

Edit mode on; the compact table cell `Ana` gained ` Lee` and Enter saved it. The buffer changed only the line `| Plan | Ana Lee |`; the compact `|---|---|` delimiter is untouched.

real-input-9nLPSn/08-frontmatter-value-minimal-patch.png

Edit mode on; the status row was changed to `active` by typing `a` on the focused select and pressing Enter. The buffer changed only the line `status: active`; the compact sequences and the two-line summary are untouched.

real-input-9nLPSn/09-frontmatter-rename-minimal-patch.png

Edit mode on; the name cell `summary` was renamed to `abstract` by select-all, typing and Enter. The buffer changed only the line `abstract: When export ...`; the continuation line ` as CSV.` is untouched.

real-input-9nLPSn/10-frontmatter-remove-minimal-patch.png

Edit mode on; the `tags` value was opened and the Remove frontmatter field button pressed. The buffer lost exactly the three lines `tags:`, `- alpha` and `- beta`.

real-input-9nLPSn/11-frontmatter-title-enter.png

Edit mode on; the title was replaced and Enter saved it as a one-line scalar.

real-input-9nLPSn/12-frontmatter-title-multiline.png

Edit mode on; Shift+Enter added a line and Cmd/Ctrl+Enter saved a two-line title.

real-input-9nLPSn/13-escape-cancels-block.png

Edit mode on; ` DROP ME TOO.` was typed (and autosaved) in the paragraph and Escape closed the editor. The preview and the source buffer show the original text again.

real-input-9nLPSn/14-escape-cancels-table-cell.png

Edit mode on; the cell `two` gained `2` (autosaved) and Escape closed the editor. The cell reads `two` again in the preview and in the buffer.

real-input-9nLPSn/15-typing-undo-grouping.png

Typed 20 characters inline; 1 content change(s) reached the source ([{"rangeLength":0,"textLength":20}]), and one undo restored `Second paragraph.`.

real-input-9nLPSn/16-undo-stays-open-with.png

Typed ` abc` and ` def` inline (open-with); Cmd/Ctrl+Z undid typing inside the textarea and Cmd/Ctrl+Shift+Z restored it; the inline editor stayed open and focused.

real-input-9nLPSn/16-undo-stays-side.png

Typed ` abc` and ` def` inline (side); Cmd/Ctrl+Z undid typing inside the textarea and Cmd/Ctrl+Shift+Z restored it; the inline editor stayed open and focused.

real-input-9nLPSn/17-enter-continues-list.png

Edit mode on; Enter after `Refrigerated goods` continued the list, and `Frozen goods` is a sibling at the same indentation while `Deduplication` kept its place.

real-input-9nLPSn/18-tab-indents.png

Edit mode on; Tab indented `Refrigerated goods` by 2 spaces and Shift+Tab restored it, with the focus staying in the editor.

real-input-9nLPSn/19-preview-keeps-markdown.png

A Python file is active in column One; the side preview still shows `First heading T13`.

real-input-9nLPSn/20-caret-at-click.png

Edit mode on; clicking the word `bravo` placed the caret there, and the typed `X` landed in line one.

real-input-9nLPSn/21-edit-hover.png

Edit mode on; hovering the nested item outlines the list a click would edit.

real-input-9nLPSn/22-editor-frame-and-buttons.png

A paragraph editor is open and ` R` was typed: framed editor, monospace text, status line with Done and Cancel on one row.

real-input-9nLPSn/23-edit-mode-no-reflow.png

Edit mode on; hard-wrapped paragraphs (about 40 characters per source line) keep their reading flow.

real-input-9nLPSn/24-start-writing-open.png

Empty document, edit mode on; Start writing opened an empty editor with its placeholder.

real-input-9nLPSn/24-table-tab.png

Edit mode on; Tab moved from `one` to `beta` (typed `X`) and `two`, on to a new third row where `gamma` and `three` were typed; Enter saved. The buffer holds the new row.

real-input-9nLPSn/25-block-inserted.png

Edit mode on; the list was inserted between the heading and the paragraph with the + button.

real-input-9nLPSn/25-table-toolbar.png

Edit mode on; the cell `one` is open. The toolbar sits in the flow above the table with text labels, and the selected cell is outlined.

real-input-9nLPSn/25b-insert-after-figure-with-newline.png

Edit mode on; the + after the final figure opened an empty editor below it.

real-input-9nLPSn/25b-insert-after-figure-without-newline.png

Edit mode on; the + after the final figure opened an empty editor below it.

real-input-9nLPSn/26-boolean-one-click.png

Edit mode on; one click on the annotation_exemption checkbox saved `true`. No editor stays open.

real-input-9nLPSn/26-focus-change-still.png

The preview was scrolled, then the editor was clicked and typed in, then a table cell was clicked; the page scroll and the cell's position on screen stayed within 4 px.

real-input-9nLPSn/27-hidden-preview-catches-up.png

The preview was hidden behind another tab, the editor scrolled about 200 lines, and the revealed preview shows the editor's top line.

real-input-9nLPSn/27-list-click-edits.png

Edit mode on; a plain click on the StRS-A link opened the list editor and the preview kept the document.

real-input-9nLPSn/28-list-enter-adds.png

Enter added an item, `StRS-B` was typed, Enter again and Enter on the empty item saved the list.

real-input-9nLPSn/29-list-link-warning.png

`StRS-BX` typed in a new list item: the datalist offered the known stems and the warning is shown.

real-input-9nLPSn/30-frontmatter-actions-value.png

Window 1100 px wide, preview frame 521 px. The `scope` value editor is open; Add field / Remove field sit under the one-row textarea inside the row and cover no other row.

real-input-9nLPSn/30-properties-in-place.png

The linked file changed on disk: the excerpt updated in the open page without a reload.

real-input-9nLPSn/31-frontmatter-actions-picker.png

Same row after clicking Add field: the picker and its Add button wrap inside the row, not over other rows.

real-input-9nLPSn/32-required-remove-disabled.png

The `scope` value editor is open: Remove field is disabled (required by the schema) and the add picker is open.

real-input-9nLPSn/32-save-keeps-list-in-place.png

Edit mode on; `Frozen goods` was added with Enter and committed with Mod+Enter in a list whose top was 39.609375 px below the preview top (reading line at 81.80000000000001 px). List top after Save T1=39.609375, after a second render T2=39.609375, 700 ms later T3=39.609375.

real-input-9nLPSn/33-custom-key-added.png

A custom `reviewer` key was added after `owner` (the last table row), typed as `Ana` and saved with Enter as `reviewer: Ana`.

real-input-9nLPSn/33-save-keeps-table-in-place.png

Edit mode on; the cell `Ana` gained `-Lee` and Enter committed it in a visible table. Table top 299.125 before the click, 299.125 at Enter and 299.125 after Save.

real-input-9nLPSn/34-content-patched.png

Twenty characters typed in the source: the open page shows them and the diagram, without a reload.

real-input-9nLPSn/34-link-diagnostic-tooltip.png

The invalid `missing.py` value reads `File not found` and its explanation shows on keyboard focus.

real-input-9nLPSn/35-status-two-lines.png

Missing-source page: the title and the message sit on separate lines.

real-input-9nLPSn/36-title-bar-button.png

A Markdown file is active in the text editor; a click on the book icon in the editor title bar opened the Studio preview beside it.

real-input-9nLPSn/38-anchor-disabled.png

The Open With editor is alone: the anchor button is disabled with its tooltip.

real-input-9nLPSn/38-anchor-enabled.png

A text editor now shows the file beside the Open With editor: the anchor button is enabled.

real-input-9nLPSn/38-edit-mode-remembered.png

A white-background preview restores edit mode and renders a nested MyST admonition, a Mermaid dispatch flowchart, and a local SVG fleet operating loop.

real-input-9nLPSn/38-toolbar-dark-cream.png

cream preview mode updates the document and floating toolbar on the Dark VS Code theme.

real-input-9nLPSn/38-toolbar-dark-current.png

current preview mode updates the document and floating toolbar on the Dark VS Code theme.

real-input-9nLPSn/38-toolbar-dark-dark.png

dark preview mode updates the document and floating toolbar on the Dark VS Code theme.

real-input-9nLPSn/38-toolbar-dark-white.png

white preview mode updates the document and floating toolbar on the Dark VS Code theme.

real-input-9nLPSn/38-toolbar-light-cream.png

cream preview mode updates the document and floating toolbar on the Light VS Code theme.

real-input-9nLPSn/38-toolbar-light-current.png

current preview mode updates the document and floating toolbar on the Light VS Code theme.

real-input-9nLPSn/38-toolbar-light-dark.png

dark preview mode updates the document and floating toolbar on the Light VS Code theme.

real-input-9nLPSn/38-toolbar-light-white.png

white preview mode updates the document and floating toolbar on the Light VS Code theme.

real-input-9nLPSn/39-quick-open-beside-preview.png

Quick Open from the focused preview opened the file in the source group; the preview stayed visible.

real-input-9nLPSn/43-pending-overlay.png

A slow render: the previous page stays still and a floating overlay says the preview is pending.

real-input-9nLPSn/t41-add-field-position.png

`depends_on` was added from the `title` row; the source line sits after `owner` and its row is shown right after `owner`.

real-input-9nLPSn/t41-custom-key-plain.png

A custom `approver` key was added from the `title` row, typed as `Ann` and saved with Enter: the line is `approver: Ann`.

real-input-9nLPSn/t41-escape-on-picker.png

Escape with focus on the field picker closed the status editor and the picker; the typed `x` was not written.

reload-e2e-b4BDFO/01-before-window-reload.png

Reload evidence document and its properties remain visible; Description is collapsed. Name and Value remain readable.

reload-e2e-b4BDFO/02-after-window-reload.png

Reload evidence document and its properties remain visible; Description is collapsed. Name and Value remain readable.

reload-e2e-b4BDFO/03-after-close-reopen.png

Reload evidence document and its properties remain visible; Description is collapsed. Name and Value remain readable.

schema-validation-error-dark.png

An unsupported schema keyword produces a red diagnostic across all three table columns.

schema-validation-error-light.png

The schema-compilation failure uses the same full-width red treatment in a light theme.

schema-validation-error-narrow.png

The full-width schema diagnostic wraps on a narrow viewport without overflowing its cell.

standalone-frontmatter-dark.png

Standalone SKILL.md metadata on a dark theme. Generic fields stay in two columns, and nested object values appear as YAML code rather than JSON.

standalone-frontmatter-light.png

The same standalone SKILL.md metadata on a light theme, with the nested YAML code block and generic two-column table remaining legible.

syntax-dark-markdown.png

A quadruple-backtick Markdown fence on a dark theme. The inner triple fences, the table and the link must appear as literal highlighted Markdown, not as rendered content that escaped the block.

syntax-dark-python.png

Python on a dark theme. Decorator, docstring, f-string and trailing comment are the tokens most likely to be mis-scoped by a highlighter.

syntax-dark-rust.png

Rust on a dark theme. Keywords, the attribute macro, the doc comment, the string literals and the numeric literal must each take a distinct colour.

syntax-light-rust.png

The same Rust block on a light theme. Token colours drawn from the chart palette must stay legible against the pale code-block background.

syntax-narrow-python.png

Python in a narrow pane, captured at the code block's far-right scroll position. Long signatures scroll internally without widening the page.

unresolved-dark-full.png

Citations, citation groups, build-only directives and both Mermaid syntaxes. Citation groups stay inline and both diagrams render as SVG.

unresolved-light-full.png

The same constructs on a light theme, including both rendered Mermaid diagrams.