TypeSafe AI / field notes

03 / PATTERNS · 17 OBSERVED FAMILIES

What changes
when you act.

Follow the transition, not just the screenshot. These contracts separate observed source behavior from the local behavior used to make this reference testable.

Interaction contracts

PatternTriggerVisible resultRecovery
NavigationLink or menu triggerRoute changes, or aria-expanded and visible menu change togetherEscape closes an open local menu; focus stays on its trigger. Browser Back restores route.
SearchOpen search, type queryMatching local destinations, or explicit empty resultEscape closes dialog and restores trigger. Query stays in memory only.
DisclosureEnter, Space or pointer on summaryExpanded answer in document flowSecond activation collapses it. No focus jump to the answer.
CopyActivate copyPersistent visible success or clipboard-unavailable instructionCode remains selectable. No timeout removes confirmation while it is being read.
FormSubmit invalid fieldsLinked error; first invalid field focused; input preservedCorrect the value and submit again. Local success states explicitly say nothing was sent.
ThemeToggle themeText, surfaces, borders and logo variant change togetherPreference is local to the open page; reload resets the default.
Code tabsClick or Arrow/Home/EndOne selected tab with linked visible panelRoving tabindex keeps one stop in the tablist; next Tab leaves the group.
FeedbackChoose Yes or NoVisible local acknowledgementChanging the response replaces the prior acknowledgement; no telemetry is sent.
Media inspectionExpand imageNative dialog with labelled mediaEscape or Close restores opener focus. No remote embed or autoplay.

Decorative motion

A real pause control

Default: a still from the source GIF. Enabling motion loads that GIF; pausing replaces it with the still.

Decorative motion is paused.

Pattern inventory

marketing-long-scroll

Marketing long-scroll narrative

Observed
default, scrolled/lazy-media, four viewports
Evidence boundary
Browser-observed default composition.
Local composition
Open the marketing-home example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

marketing-editorial-detail

Editorial detail

Observed
default and rich technical-content variant
Evidence boundary
Browser-observed default composition.
Local composition
Open the blog-article example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-persistent-shell

Documentation shell

Observed
desktop/default
Evidence boundary
Browser-observed default composition.
Local composition
Open the docs-prose-code-article example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-mobile-navigation

Documentation narrow navigation

Observed
390 and 768 screenshots; expanded-menu candidate
Evidence boundary
State transition intentionally not exercised in this crawl.
Local composition
Open the docs-prose-code-article example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-theme

Documentation theme selection

Observed
theme trigger
Evidence boundary
State transition intentionally not exercised in this crawl.
Local composition
Open the docs-prose-code-article example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-copy-code

Code copy feedback

Observed
copy controls
Evidence boundary
State transition intentionally not exercised in this crawl.
Local composition
Open the docs-quickstart example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-code-tabs

Language/code tabs

Observed
tab labels and selected state candidate
Evidence boundary
State transition intentionally not exercised in this crawl.
Local composition
Open the docs-quickstart example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-disclosure

Concept/property disclosure

Observed
collapsed and expandable candidates
Evidence boundary
State transition intentionally not exercised in this crawl.
Local composition
Open the docs-reference-article example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-media-canvas

Image/map interaction

Observed
expand/zoom/pan/fullscreen triggers
Evidence boundary
State transition intentionally not exercised in this crawl.
Local composition
Open the docs-interactive-demo-article example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-page-feedback

Page feedback

Observed
initial Yes/No; disabled message input
Evidence boundary
State transition intentionally not exercised in this crawl.
Local composition
Open the docs-prose-code-article example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-api-reference

Generated API documentation

Observed
long and short member-content variants
Evidence boundary
Browser-observed default composition.
Local composition
Open the docs-api-reference example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-cookbook

Task-oriented cookbook

Observed
long content, code-heavy, selected table/image variants
Evidence boundary
Browser-observed default composition.
Local composition
Open the docs-cookbook example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

docs-demo-embed

Interactive-demo documentation

Observed
default embedded-demo state
Evidence boundary
Browser-observed default composition.
Local composition
Open the docs-interactive-demo-article example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

console-auth-entry

Unauthenticated authentication

Observed
provider/email choices and terms links
Evidence boundary
Browser-observed default composition.
Local composition
Open the console-unauthenticated-entry example
Recovery and adverse states
Input validation and local handoff only. Authenticated success, role changes and server failures are outside the verified public boundary.

public-not-found-recovery

Public missing-route recovery

Observed
404 and back-home link
Evidence boundary
Browser-observed default composition.
Local composition
Open the primary-not-found example
Recovery and adverse states
Test narrow reflow, keyboard-only input, reduced motion, no result, invalid content and repeated activation as applicable. Static content remains readable when JavaScript is unavailable.

Content and environment extremes

Use long labels, a 300-character unbroken token, empty search, invalid email, an interrupted clipboard permission and a second activation. At 390px the document must stay within its viewport; code and data tables may scroll in labelled internal regions. At 200% text zoom, reading content remains in normal flow.

For an open page, controls need no network. A cold offline navigation requires the page and its assets to have been saved; this static reference does not install a service worker. No page claims a completed server operation.

Operational rules and fixtures · Observed source-state ledger

GUIDE-ONLY LOCAL FIXTURE / NO NETWORK REQUEST

Join the reference list.

Use this original guide fixture to inspect validation and confirmation. The observed source form has one email field. Nothing is sent.