Component catalog

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Marketing header link cluster

Observed occurrence

primary sitemap marketing pages

Source state boundary

default and narrow-width navigation are observed; open-menu behavior is not claimed

api

stable Id

mkt-global-navigation

root Selector

[data-component="mkt-global-navigation"]

dom Hooks

• event

  navigate

  selector

  [data-component="mkt-global-navigation"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

default and narrow-width navigation are observed; open-menu behavior is not claimed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Enter activates each anchor; focus follows document order.

content Limits

Link labels stay one line; three links observed.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 keeps the horizontal link row; 1440 retains the top edge alignment.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

[data-component="mkt-global-navigation"]

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  links

  type

  NavLink[]

  default

  • label

    TypeSafe AI

    href

    /

  • label

    Manifesto

    href

    /manifesto

  • label

    Our Team

    href

    /team

  required

  true

state Transitions

• from

  idle

  on

  link activation

  to

  route

type Definitions

Nav Link

fields

• name

  label

  type

  string

  required

  true

• name

  href

  type

  string

  required

  true

• name

  current

  type

  boolean

  required

  false

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Home release/status copy near top of page

Observed occurrence

home

Source state boundary

default only observed

api

stable Id

mkt-announcement-strip

root Selector

[data-component="mkt-announcement-strip"]

dom Hooks

• event

  navigate

  selector

  [data-component="mkt-announcement-strip"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

default only observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Anchor is keyboard-operable with Enter.

content Limits

Title and metadata may wrap inside the strip.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 is a 300px-wide centered strip; desktop remains a compact announcement row.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

[data-component="mkt-announcement-strip"]

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  date

  type

  string

  default

  Sept 15, 2026

  required

  true

• name

  href

  type

  string

  default

  article route

  required

  true

state Transitions

• from

  idle

  on

  article activation

  to

  article route

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Large Framer headline composition

Observed occurrence

home and manifesto

Source state boundary

content and responsive typography observed

api

stable Id

mkt-hero-headline

root Selector

[data-component="mkt-hero-headline"]

dom Hooks

callbacks

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

content and responsive typography observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

No widget focus; actions carry the focus.

content Limits

Headline is authored copy; allow wrap, never crop.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

Observed source headline is 54px/43.2px at 390 and wraps across the hero; 1440 uses its source-sized desktop measure.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

[data-component="mkt-hero-headline"]

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  headline

  type

  string

  default

  The First (Public) System One Model…

  required

  true

• name

  actions

  type

  Action[]

  default

  • label

    Join Waitlist

    opens Dialog

    true

  • label

    Join Discord

    href

    https://discord.gg/typesafe

  required

  true

state Transitions

• from

  static

  on

  none

  to

  static

type Definitions

Action

fields

• name

  label

  type

  string

  required

  true

• name

  href

  type

  string

  required

  false

• name

  opensDialog

  type

  boolean

  required

  false

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

CTA links such as Open Roles and Read More

Observed occurrence

home, manifesto, team and footer

Source state boundary

link default observed; hover/focus not separately captured

api

stable Id

mkt-action-link

root Selector

.text-action, .large-link

dom Hooks

• event

  navigate

  selector

  .text-action, .large-link

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

link default observed; hover/focus not separately captured

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Enter activates anchor; visible focus is required.

content Limits

Use a short label; wrap only when the source link wraps.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

At 390 actions use the hero’s two-column/stacked available space; desktop follows its parent row.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

.text-action, .large-link

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  label

  type

  string

  default

  visible link text

  required

  true

• name

  href

  type

  string

  default

  destination

  required

  true

• name

  external

  type

  boolean

  default

  false

  required

  false

state Transitions

• from

  idle

  on

  anchor activation

  to

  destination

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Images, two videos, embedded visual and Framer animation

Observed occurrence

home

Source state boundary

loaded/scrolled media observed; playback controls not claimed

api

stable Id

mkt-product-media

root Selector

[data-component="mkt-product-media"]

dom Hooks

• event

  scenariochange

  selector

  [data-component="mkt-product-media"]

callbacks

• name

  onScenariochange

  payload

  scenario

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  scenariochange

  payload

  scenario

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

loaded/scrolled media observed; playback controls not claimed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Selector is a native control; Tab and Enter/Space use native behavior.

content Limits

One named scenario and one output panel per fixture.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

The framed demo narrows at 390 while inner controls remain legible; 1440 permits the full side-by-side view.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

[data-component="mkt-product-media"]

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  scenario

  type

  string

  default

  fixture default

  required

  true

• name

  mediaAlt

  type

  string

  default

  product demonstration

  required

  true

state Transitions

• from

  default

  on

  scenario select

  to

  scenario result

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Headline and numeric claim clusters

Observed occurrence

home

Source state boundary

default and responsive text wrapping observed

api

stable Id

mkt-metric-claim

root Selector

[data-component="mkt-metric-claim"]

dom Hooks

• event

  navigate

  selector

  [data-component="mkt-metric-claim"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

default and responsive text wrapping observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Only the optional proof anchor is focusable.

content Limits

Metric and qualifier must wrap instead of clipping.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 stacks metric language in the measured section width; desktop preserves the claim’s larger whitespace.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

[data-component="mkt-metric-claim"]

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  value

  type

  string

  default

  193.6x

  required

  true

• name

  label

  type

  string

  default

  Faster / Cheaper

  required

  true

• name

  proofHref

  type

  string

  default

  optional proof route

  required

  false

state Transitions

• from

  idle

  on

  proof activation

  to

  proof route

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Article teaser cards that link to editorial detail

Observed occurrence

home

Source state boundary

default card composition observed

api

stable Id

mkt-blog-card

root Selector

[data-component="mkt-blog-card"]

dom Hooks

• event

  navigate

  selector

  [data-component="mkt-blog-card"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

default card composition observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

One anchor target; Enter opens it.

content Limits

One title plus a short excerpt.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 cards occupy the single column; desktop cards participate in the article grid.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

[data-component="mkt-blog-card"]

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  title

  type

  string

  default

  article title

  required

  true

• name

  summary

  type

  string

  default

  article excerpt

  required

  true

• name

  href

  type

  string

  default

  article route

  required

  true

state Transitions

• from

  idle

  on

  card activation

  to

  article route

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

FAQ wording exists in captured home source; control interaction owned by state-extraction worker

Observed occurrence

home

Source state boundary

candidate only until the associated state capture is reconciled

api

stable Id

mkt-faq-disclosure

root Selector

[data-component="mkt-faq-disclosure"]

dom Hooks

• event

  toggle

  selector

  [data-component="mkt-faq-disclosure"]

callbacks

• name

  onToggle

  payload

  open

  boolean

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  toggle

  payload

  open

  boolean

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

candidate only until the associated state capture is reconciled

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Source question is a public clickable text control; reconstruction uses a button with aria-expanded and Enter/Space.

content Limits

Question is one concise line where possible; answer expands vertically.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 FAQ is a narrow dark stack; desktop uses the wider section without fixed answer height.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

[data-component="mkt-faq-disclosure"]

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  items

  type

  FaqItem[]

  default

  • question

    Is Jev Just A Smaller LLM?

    answer

    Observed public answer is expanded only in state evidence.

  required

  true

• name

  openIndex

  type

  number|null

  default

  null

  required

  false

state Transitions

• from

  closed

  on

  question activation

  to

  open

• from

  open

  on

  question activation

  to

  closed

type Definitions

Faq Item

fields

• name

  question

  type

  string

  required

  true

• name

  answer

  type

  string

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

CTA/form candidate in captured source; no submission performed

Observed occurrence

home and team

Source state boundary

candidate only; no side-effectful state exercised

api

stable Id

mkt-waitlist-contact

root Selector

.retro-dialog, [data-dialog-open="waitlist"]

dom Hooks

• event

  open

  selector

  .retro-dialog, [data-dialog-open="waitlist"]

• event

  validate

  selector

  .retro-dialog, [data-dialog-open="waitlist"]

• event

  close

  selector

  .retro-dialog, [data-dialog-open="waitlist"]

callbacks

• name

  onOpen

  payload

  open

  true

  required

  false

  boundary

  Local fixture callback only.

• name

  onValidate

  payload

  email

  string

  valid

  boolean

  required

  false

  boundary

  Local fixture callback only.

• name

  onClose

  payload

  open

  false

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  open

  payload

  open

  true

  boundary

  Local fixture event only; no production API call is asserted.

• name

  validate

  payload

  email

  string

  valid

  boolean

  boundary

  Local fixture event only; no production API call is asserted.

• name

  close

  payload

  open

  false

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

candidate only; no side-effectful state exercised

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Open moves focus to email; Escape and close return focus to trigger; native required email validation.

content Limits

One visible email field only; placeholder “your email”.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

Source-open popup is anchored near the trigger: 300×118 desktop and 290×118 mobile, with a dim backdrop; never center it.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/home.html

local Dom

selector

.retro-dialog, [data-dialog-open="waitlist"]

recipe

examples/home.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  email

  type

  email

  default

  empty

  required

  true

• name

  open

  type

  boolean

  default

  false

  required

  false

• name

  submitLabel

  type

  string

  default

  submit

  required

  true

state Transitions

• from

  closed

  on

  waitlist link

  to

  open

• from

  open

  on

  submit invalid email

  to

  invalid

• from

  open

  on

  Escape/close

  to

  closed

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

176 images and keyboard-labelled merchandise controls on team route

Observed occurrence

team

Source state boundary

default and interactive-control presence observed

api

stable Id

team-profile-gallery

root Selector

[data-component="team-profile-gallery"]

dom Hooks

• event

  navigate

  selector

  [data-component="team-profile-gallery"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

default and interactive-control presence observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Profile links, if supplied, are regular anchors.

content Limits

Each item needs an image alt and short name/role copy.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 collapses to the measured narrow gallery; desktop lays profiles out across the page.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/team.html

local Dom

selector

[data-component="team-profile-gallery"]

recipe

examples/team.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  people

  type

  Profile[]

  default

  • name

    Observed team member

    role

    Team profile

    image

    public source image

  required

  true

• name

  columns

  type

  number

  default

  source layout

  required

  false

state Transitions

• from

  idle

  on

  profile link activation

  to

  profile route

type Definitions

Profile

fields

• name

  name

  type

  string

  required

  true

• name

  role

  type

  string

  required

  true

• name

  image

  type

  string

  required

  true

• name

  href

  type

  string

  required

  false

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Editorial title and flowing prose content

Observed occurrence

all five blog routes

Source state boundary

basic and technical variants observed

api

stable Id

blog-article-body

root Selector

[data-component="blog-article-body"]

dom Hooks

callbacks

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

basic and technical variants observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Document headings and links participate in normal reading order.

content Limits

Prose width is parent-owned; no fixed body height.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 wraps article headings and prose; desktop retains the source article measure.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/launch.html

local Dom

selector

[data-component="blog-article-body"]

recipe

examples/launch.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  title

  type

  string

  default

  article title

  required

  true

• name

  sections

  type

  RichTextSection[]

  default

  • heading

    Article

    body

    Local source-derived article fixture.

  required

  true

state Transitions

• from

  static

  on

  none

  to

  static

type Definitions

Rich Text Section

fields

• name

  heading

  type

  string

  required

  false

• name

  body

  type

  string

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Inline media, embeds; technical article adds figure/table/code

Observed occurrence

blog routes

Source state boundary

content-dependent variants observed

api

stable Id

blog-rich-media

root Selector

[data-component="blog-rich-media"]

dom Hooks

• event

  play

  selector

  [data-component="blog-rich-media"]

callbacks

• name

  onPlay

  payload

  playing

  true

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  play

  payload

  playing

  true

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

content-dependent variants observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Only supplied controls are focusable; image alt is required for meaningful images.

content Limits

Caption is optional; media must preserve aspect ratio.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

Media scales to article width at 390 and desktop without overflowing it.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/launch.html

local Dom

selector

[data-component="blog-rich-media"]

recipe

examples/launch.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  kind

  type

  image|video|code|table

  default

  image

  required

  true

• name

  caption

  type

  string

  default

  empty

  required

  false

state Transitions

• from

  paused

  on

  visible media control

  to

  playing

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Legal title and embedded document content

Observed occurrence

four legal sitemap routes

Source state boundary

responsive outer shell observed; embedded content behavior uninspected

api

stable Id

legal-document-embed

root Selector

[data-component="legal-document-embed"]

dom Hooks

• event

  navigate

  selector

  [data-component="legal-document-embed"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

responsive outer shell observed; embedded content behavior uninspected

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Semantic headings and native anchors.

content Limits

Legal text wraps freely and remains selectable.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 uses the document column; desktop uses the source legal reading width.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/terms.html

local Dom

selector

[data-component="legal-document-embed"]

recipe

examples/terms.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  title

  type

  string

  default

  Terms of Use

  required

  true

• name

  sections

  type

  LegalSection[]

  default

  • heading

    Terms

    body

    Local legal reading fixture.

  required

  true

state Transitions

• from

  idle

  on

  inline link activation

  to

  linked legal route

type Definitions

Legal Section

fields

• name

  heading

  type

  string

  required

  true

• name

  body

  type

  string

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Mintlify shell with two headers, 3–4 navs, main and footer

Observed occurrence

all 109 docs routes

Source state boundary

desktop shell and responsive screenshots captured

api

stable Id

docs-shell

root Selector

[data-component="docs-shell"]

dom Hooks

• event

  navigate

  selector

  [data-component="docs-shell"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

desktop shell and responsive screenshots captured

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Skip link precedes shell; landmarks are header/nav/main.

content Limits

Shell owns outer columns; children own internal spacing.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

Source-sized 48px top bar and 56px mobile breadcrumb bar; 390 hides desktop sidebar.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

[data-component="docs-shell"]

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  activePath

  type

  string

  default

  /introduction

  required

  true

• name

  theme

  type

  light|dark

  default

  dark

  required

  false

state Transitions

• from

  idle

  on

  docs link

  to

  route

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Section buttons plus current-page links

Observed occurrence

all 109 docs routes

Source state boundary

collapsed/mobile behavior is a state candidate

api

stable Id

docs-navigation

root Selector

[data-component="docs-navigation"]

dom Hooks

• event

  navigate

  selector

  [data-component="docs-navigation"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

collapsed/mobile behavior is a state candidate

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Links use Enter; mobile trigger uses button semantics and Escape closes if present.

content Limits

Group labels and links may wrap, active route remains identifiable.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 substitutes the desktop sidebar with the compact navigation affordance.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

[data-component="docs-navigation"]

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  groups

  type

  NavGroup[]

  default

  • label

    INTRODUCTION

    links

    • label

      Introduction

      href

      docs-intro.html

  required

  true

• name

  activePath

  type

  string

  default

  /introduction

  required

  true

state Transitions

• from

  idle

  on

  route link

  to

  route

type Definitions

Nav Group

fields

• name

  label

  type

  string

  required

  true

• name

  links

  type

  NavLink[]

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Article context/navigation links in common shell

Observed occurrence

docs articles

Source state boundary

default observed

api

stable Id

docs-breadcrumb

root Selector

[data-component="docs-breadcrumb"]

dom Hooks

• event

  navigate

  selector

  [data-component="docs-breadcrumb"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

default observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Ancestor entries are anchors; current item is not an interactive duplicate.

content Limits

Keep a short ancestor chain.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 occupies the 56px breadcrumb bar; desktop shares the top content rail.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

[data-component="docs-breadcrumb"]

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  items

  type

  BreadcrumbItem[]

  default

  • label

    INTRODUCTION

    href

    docs-intro.html

  required

  true

state Transitions

• from

  idle

  on

  ancestor link

  to

  route

type Definitions

Breadcrumb Item

fields

• name

  label

  type

  string

  required

  true

• name

  href

  type

  string

  required

  false

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Search trigger labelled Search… Ctrl K / Search…

Observed occurrence

all 109 docs routes

Source state boundary

trigger observed; dialog-open state owned by state-extraction worker

api

stable Id

docs-search-trigger-dialog

root Selector

.dr-search, .dr-search-dialog

dom Hooks

• event

  open

  selector

  .dr-search, .dr-search-dialog

• event

  query

  selector

  .dr-search, .dr-search-dialog

• event

  close

  selector

  .dr-search, .dr-search-dialog

callbacks

• name

  onOpen

  payload

  open

  true

  required

  false

  boundary

  Local fixture callback only.

• name

  onQuery

  payload

  query

  string

  required

  false

  boundary

  Local fixture callback only.

• name

  onClose

  payload

  open

  false

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  open

  payload

  open

  true

  boundary

  Local fixture event only; no production API call is asserted.

• name

  query

  payload

  query

  string

  boundary

  Local fixture event only; no production API call is asserted.

• name

  close

  payload

  open

  false

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

trigger observed; dialog-open state owned by state-extraction worker

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Trigger is labelled Open search; focus enters query on open and returns on close.

content Limits

Query is short; result list is source-backed only.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 uses the 32px icon trigger; desktop shows the wider “Search… Ctrl K” trigger.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

.dr-search, .dr-search-dialog

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  open

  type

  boolean

  default

  false

  required

  false

• name

  query

  type

  string

  default

  empty

  required

  false

state Transitions

• from

  closed

  on

  trigger or Ctrl+K

  to

  open

• from

  open

  on

  input

  to

  filtered results

• from

  open

  on

  Escape

  to

  closed

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Change theme preference trigger

Observed occurrence

all 109 docs routes

Source state boundary

trigger observed; dark-theme state owned by state-extraction worker

api

stable Id

docs-theme-control

root Selector

.dr-theme

dom Hooks

• event

  toggle

  selector

  .dr-theme

callbacks

• name

  onToggle

  payload

  open

  boolean

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  toggle

  payload

  open

  boolean

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

trigger observed; dark-theme state owned by state-extraction worker

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

A labelled button with aria-pressed/current theme text; Enter/Space toggle.

content Limits

No visible text requirement when the icon has an accessible name.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

Control stays in the header action cluster at both sampled widths.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

.dr-theme

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  theme

  type

  light|dark

  default

  dark

  required

  true

state Transitions

• from

  dark

  on

  button activation

  to

  light

• from

  light

  on

  button activation

  to

  dark

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

H1 and article hierarchy

Observed occurrence

all 109 docs routes

Source state boundary

short and long titles observed across crawl

api

stable Id

docs-article-header

root Selector

[data-component="docs-article-header"]

dom Hooks

callbacks

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

short and long titles observed across crawl

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

One document h1; links are separate anchors.

content Limits

H1/lead wrap naturally; do not truncate.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

Mobile source-sized h1 is 61.6px; desktop uses the measured article rail.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

[data-component="docs-article-header"]

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  title

  type

  string

  default

  Introduction

  required

  true

• name

  lead

  type

  string

  default

  source lead copy

  required

  false

state Transitions

• from

  static

  on

  none

  to

  static

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Article prose and content callouts

Observed occurrence

docs prose/reference/cookbook routes

Source state boundary

content-dependent

api

stable Id

docs-prose-and-callout

root Selector

[data-component="docs-prose-and-callout"]

dom Hooks

• event

  navigate

  selector

  [data-component="docs-prose-and-callout"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

content-dependent

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Native links and list semantics; callout is supplemental content.

content Limits

No fixed paragraph/callout height; preserve text density.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 keeps a single readable column; desktop follows main article max width.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

[data-component="docs-prose-and-callout"]

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  blocks

  type

  ProseBlock[]

  default

  • kind

    paragraph

    content

    Local source-derived prose fixture.

  required

  true

• name

  tone

  type

  note|warning|tip

  default

  note

  required

  false

state Transitions

• from

  idle

  on

  inline link

  to

  destination

type Definitions

Prose Block

fields

• name

  kind

  type

  paragraph|list|callout

  required

  true

• name

  content

  type

  string

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Code region and copy-control label

Observed occurrence

97 docs routes with pre or code

Source state boundary

multiple-code-block content observed

api

stable Id

docs-code-block

root Selector

[data-component="docs-code-block"]

dom Hooks

• event

  copy

  selector

  [data-component="docs-code-block"]

• event

  reset

  selector

  [data-component="docs-code-block"]

callbacks

• name

  onCopy

  payload

  copied

  true

  required

  false

  boundary

  Local fixture callback only.

• name

  onReset

  payload

  copied

  false

  required

  false

  boundary

  Local fixture callback only.

observed Source Anatomy

• name

  Copy button

  selector

  button[data-copy-docs]

  order

  1

• name

  code text

  selector

  pre

  order

  2

• name

  copy status

  selector

  p[role=status]

  order

  3

local Anatomy

• name

  Copy button

  selector

  button[data-copy-docs]

  order

  1

• name

  code text

  selector

  pre

  order

  2

• name

  copy status

  selector

  p[role=status]

  order

  3

relationships

The three elements are direct children of [data-component=docs-code-block]. The rendered recipe has no language-label element and no nested code element.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  copy

  payload

  copied

  true

  boundary

  Local fixture event only; no production API call is asserted.

• name

  reset

  payload

  copied

  false

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

multiple-code-block content observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Copy button uses aria-label “Copy the contents from the code block”; Tab reaches it.

content Limits

Code preserves whitespace and scrolls horizontally rather than wraps arbitrarily.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 code frame retains horizontal overflow; desktop fits the article rail.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/quickstart.html

local Dom

selector

[data-component="docs-code-block"]

recipe

examples/quickstart.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  code

  type

  string

  default

  fixture code

  required

  true

• name

  language

  type

  string

  default

  text

  required

  false

• name

  copied

  type

  boolean

  default

  false

  required

  false

state Transitions

• from

  ready

  on

  copy button

  to

  copied

• from

  copied

  on

  feedback timeout

  to

  ready

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Language/implementation tab labels such as pip, uv, Async, Sync

Observed occurrence

quickstart, SDK and selected API routes

Source state boundary

selected/unselected states are observed candidates

api

stable Id

docs-code-tabs

root Selector

[data-component="docs-code-tabs"]

dom Hooks

• event

  select

  selector

  [data-component="docs-code-tabs"]

callbacks

• name

  onSelect

  payload

  selected

  string

  required

  false

  boundary

  Local fixture callback only.

observed Source Anatomy

• name

  tablist

  selector

  [data-component=docs-code-tabs][role=tablist]

  order

  1

• name

  install-method tabs

  selector

  button[role=tab]

  order

  2

local Anatomy

• name

  tablist

  selector

  [data-component=docs-code-tabs][role=tablist]

  order

  1

• name

  install-method tabs

  selector

  button[role=tab]

  order

  2

relationships

Each tab's aria-controls names a sibling pre[role=tabpanel] in the same .dr-steps li. The panel's aria-labelledby names the selected tab. The panel and docs-code-block are not descendants of the docs-code-tabs root.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  select

  payload

  selected

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

selected/unselected states are observed candidates

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Source tabs expose role=tab, aria-selected, aria-controls and roving tabindex; arrow-key behavior is unverified unless local handler supplies it.

content Limits

Use one short label per tab and one associated panel.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 permits horizontal tab overflow; desktop keeps tabs across the code frame.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/quickstart.html

local Dom

selector

[data-component="docs-code-tabs"]

recipe

examples/quickstart.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  tabs

  type

  CodeTab[]

  default

  • id

    pip

    label

    pip

    code

    pip install typesafe-sdk --extra-index-url https://pypi.typesafe.ai/

  required

  true

• name

  selected

  type

  string

  default

  first tab

  required

  true

state Transitions

• from

  any tab

  on

  tab activation

  to

  selected tab panel

type Definitions

Code Tab

fields

• name

  id

  type

  string

  required

  true

• name

  label

  type

  string

  required

  true

• name

  code

  type

  string

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Semantic data tables

Observed occurrence

reference and some cookbook routes

Source state boundary

content-dependent

api

stable Id

docs-table

root Selector

[data-component="docs-table"]

dom Hooks

callbacks

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

content-dependent

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Use native table semantics with th scope where applicable.

content Limits

Cell content wraps; no clipped columns.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 makes the table scrollable inside its article container; desktop shows its full measured width.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

[data-component="docs-table"]

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  columns

  type

  TableColumn[]

  default

  • label

    Field

    key

    field

  required

  true

• name

  rows

  type

  TableRow[]

  default

  • cells

    • score

  required

  true

state Transitions

• from

  static

  on

  none

  to

  static

type Definitions

Table Column

fields

• name

  label

  type

  string

  required

  true

• name

  key

  type

  string

  required

  true

Table Row

fields

• name

  cells

  type

  string[]

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Ordered visual instructions

Observed occurrence

quickstart and how-to route

Source state boundary

observed on two routes

api

stable Id

docs-steps

root Selector

[data-component="docs-steps"]

dom Hooks

callbacks

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

observed on two routes

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Use an ordered list so sequence is announced.

content Limits

At least one titled step; step body can contain code/links.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 maintains vertical numbered steps; desktop uses the same source article column.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/quickstart.html

local Dom

selector

[data-component="docs-steps"]

recipe

examples/quickstart.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  steps

  type

  Step[]

  default

  • title

    Install the client

    body

    pip install typesafe-sdk --extra-index-url https://pypi.typesafe.ai/

  required

  true

state Transitions

• from

  static

  on

  none

  to

  static

type Definitions

Step

fields

• name

  title

  type

  string

  required

  true

• name

  body

  type

  string

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Native expandable topic/property sections

Observed occurrence

selected concept, model and API routes

Source state boundary

collapsed default observed; expanded state candidate

api

stable Id

docs-disclosure

root Selector

[data-component="docs-disclosure"]

dom Hooks

• event

  toggle

  selector

  [data-component="docs-disclosure"]

callbacks

• name

  onToggle

  payload

  open

  boolean

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  toggle

  payload

  open

  boolean

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

collapsed default observed; expanded state candidate

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Source uses button[aria-expanded]; Enter/Space toggle and answer is tied to the control.

content Limits

Question can wrap; expanded body grows vertically.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

Disclosure spans the article width at 390 and 1440.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/score.html

local Dom

selector

[data-component="docs-disclosure"]

recipe

examples/score.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  label

  type

  string

  default

  source question

  required

  true

• name

  open

  type

  boolean

  default

  false

  required

  false

state Transitions

• from

  collapsed

  on

  button activation

  to

  expanded

• from

  expanded

  on

  button activation

  to

  collapsed

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Classes/functions/interfaces/type aliases/variables member clusters

Observed occurrence

58 generated SDK API routes

Source state boundary

default section controls observed

api

stable Id

docs-api-member-navigation

root Selector

[data-component="docs-api-member-navigation"]

dom Hooks

• event

  navigate

  selector

  [data-component="docs-api-member-navigation"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

default section controls observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Member links are normal anchors in navigation order.

content Limits

Member names stay intact; long names wrap or scroll safely.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 uses the compact docs navigation pattern; desktop remains in the side rail.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/python-api.html

local Dom

selector

[data-component="docs-api-member-navigation"]

recipe

examples/python-api.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  members

  type

  ApiMember[]

  default

  • name

    AsyncTypeSafeClient

    href

    python-api.html

  required

  true

• name

  activeMember

  type

  string

  default

  current member

  required

  false

state Transitions

• from

  idle

  on

  member link

  to

  member anchor/route

type Definitions

Api Member

fields

• name

  name

  type

  string

  required

  true

• name

  href

  type

  string

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Generated API member heading, signature and content

Observed occurrence

58 generated SDK API routes

Source state boundary

long/short member variants observed

api

stable Id

docs-api-signature

root Selector

[data-component="docs-api-signature"]

dom Hooks

callbacks

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

long/short member variants observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Code remains selectable; any copy control follows the code-block contract.

content Limits

Use current public AsyncTypeSafeClient and system_one names; do not retain the older evaluate fixture.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 scrolls long signatures; desktop has the API article measure.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/python-api.html

local Dom

selector

[data-component="docs-api-signature"]

recipe

examples/python-api.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  signature

  type

  string

  default

  AsyncTypeSafeClient.system_one(...)

  required

  true

• name

  parameters

  type

  Parameter[]

  default

  • name

    question

    type

    Question

    required

    true

  required

  false

state Transitions

• from

  static

  on

  none

  to

  static

type Definitions

Parameter

fields

• name

  name

  type

  string

  required

  true

• name

  type

  type

  string

  required

  true

• name

  required

  type

  boolean

  required

  true

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Expand image, zoom/pan/fullscreen controls and demo iframe

Observed occurrence

selected docs routes

Source state boundary

controls observed; opened/zoomed state candidates

api

stable Id

docs-media-viewer

root Selector

[data-component="docs-media-viewer"]

dom Hooks

• event

  open

  selector

  [data-component="docs-media-viewer"]

• event

  close

  selector

  [data-component="docs-media-viewer"]

callbacks

• name

  onOpen

  payload

  open

  true

  required

  false

  boundary

  Local fixture callback only.

• name

  onClose

  payload

  open

  false

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  open

  payload

  open

  true

  boundary

  Local fixture event only; no production API call is asserted.

• name

  close

  payload

  open

  false

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

controls observed; opened/zoomed state candidates

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Open control is labelled and focusable; dialog focus behavior applies only when an overlay is present.

content Limits

Keep source aspect ratio and concise caption.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

Frame scales inside the article rail at 390 and 1440.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/smart-home.html

local Dom

selector

[data-component="docs-media-viewer"]

recipe

examples/smart-home.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  src

  type

  string

  default

  source media URL

  required

  true

• name

  alt

  type

  string

  default

  media description

  required

  true

• name

  open

  type

  boolean

  default

  false

  required

  false

state Transitions

• from

  closed

  on

  viewer activation

  to

  open

• from

  open

  on

  Escape/close

  to

  closed

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Yes/No feedback plus disabled Send message control

Observed occurrence

all 109 docs routes

Source state boundary

initial state observed; no feedback/API side effects sent

api

stable Id

docs-page-feedback

root Selector

[data-component="docs-page-feedback"]

dom Hooks

• event

  answer

  selector

  [data-component="docs-page-feedback"]

callbacks

• name

  onAnswer

  payload

  value

  helpful|not-helpful

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  answer

  payload

  value

  helpful|not-helpful

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

initial state observed; no feedback/API side effects sent

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Buttons have clear labels and native Enter/Space activation; no network submission is claimed.

content Limits

Prompt and two actions only in the local fixture.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 stacks or wraps actions within article width; desktop keeps inline feedback row.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

[data-component="docs-page-feedback"]

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  value

  type

  helpful|not-helpful|null

  default

  null

  required

  false

state Transitions

• from

  idle

  on

  Yes/No activation

  to

  acknowledged

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Previous/next article links at content end

Observed occurrence

docs articles

Source state boundary

default observed

api

stable Id

docs-pagination

root Selector

[data-component="docs-pagination"]

dom Hooks

• event

  navigate

  selector

  [data-component="docs-pagination"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

default observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Anchors use Enter and descriptive accessible names.

content Limits

One or two adjacent pages; labels may wrap.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 fits links into the article rail; desktop places them across its footer row.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/docs-intro.html

local Dom

selector

[data-component="docs-pagination"]

recipe

examples/docs-intro.html

css Files

• file

  site/assets/docs-recipes.css

  hash

  sha256:3958b16c92660583c33df955f56392808670f3aff0b1607e7e30999d20a5d353

• file

  site/assets/docs-recipes.js

  hash

  sha256:ef4befe6e118aea058cb19350ae5a1947e1ae53f264b2470a5c466f2f58e32a6

props

• name

  previous

  type

  PageLink|null

  default

  label

  Quick start

  href

  quickstart.html

  required

  false

• name

  next

  type

  PageLink|null

  default

  label

  Async client

  href

  python-api.html

  required

  false

state Transitions

• from

  idle

  on

  previous/next activation

  to

  adjacent route

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Google provider button, email input, Continue and email-code action

Observed occurrence

console entry/login

Source state boundary

unauthenticated default only; credentials/actions intentionally not used

api

stable Id

console-login-form

root Selector

[data-component="console-login-form"]

dom Hooks

• event

  validate

  selector

  [data-component="console-login-form"]

• event

  continue

  selector

  [data-component="console-login-form"]

callbacks

• name

  onValidate

  payload

  email

  string

  valid

  boolean

  required

  false

  boundary

  Local fixture callback only.

• name

  onContinue

  payload

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  validate

  payload

  email

  string

  valid

  boolean

  boundary

  Local fixture event only; no production API call is asserted.

• name

  continue

  payload

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

unauthenticated default only; credentials/actions intentionally not used

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Email is labelled and required; Tab order is mark-free then input/actions. Auth completion is unobserved.

content Limits

One email address and short helper copy.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 keeps a single centered form column; desktop uses the same compact login card.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/console.html

local Dom

selector

[data-component="console-login-form"]

recipe

examples/console.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  email

  type

  email

  default

  empty

  required

  true

• name

  provider

  type

  string

  default

  Google

  required

  false

state Transitions

• from

  idle

  on

  continue invalid email

  to

  invalid

• from

  valid

  on

  submit

  to

  external auth boundary

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.

Open full-page composition · CSS trace · Measured geometry · Raw contract JSON

Source anatomy

Framer 404 title, explanation and Back to Home link

Observed occurrence

intentional nonexistent primary URL

Source state boundary

404 state observed

api

stable Id

primary-not-found

root Selector

[data-component="primary-not-found"]

dom Hooks

• event

  navigate

  selector

  [data-component="primary-not-found"]

callbacks

• name

  onNavigate

  payload

  href

  string

  required

  false

  boundary

  Local fixture callback only.

inputs

Visible content and documented local fixture props only; no private SDK/API surface inferred.

events

• name

  navigate

  payload

  href

  string

  boundary

  Local fixture event only; no production API call is asserted.

allowed Composition

Use within its recorded recipe family; preserve parent-owned outer spacing and component-owned inner layout.

variants

404 state observed

states

Observed states are limited to public-state capture; unseen production states remain unverified.

keyboard Focus Aria

Recovery link is an anchor with visible focus.

content Limits

Short heading/body and one recovery action.

spacing Ownership

Parent recipe owns outer placement; this component owns the measured padding/gap in source-component-traces samples.

breakpoint Rules

390 and desktop center the error message in the available page frame.

extension Points

The documented props and slots only; no private API or authenticated runtime behavior is inferred.

recipe

examples/not-found.html

local Dom

selector

[data-component="primary-not-found"]

recipe

examples/not-found.html

css Files

• file

  site/assets/product-recipes.css

  hash

  sha256:a608abf039e5b8b498f9e1e9212cb41722d5c6a300ed9c4755f5e80f7a89f32f

• file

  site/assets/product-recipes.js

  hash

  sha256:69a128956de0b00857b9dee1bbef67b744ec3f4956cbb5a93e9a54c78538547f

props

• name

  title

  type

  string

  default

  Page not found

  required

  true

• name

  homeHref

  type

  string

  default

  /

  required

  true

state Transitions

• from

  idle

  on

  recovery link

  to

  home

type Definitions

The specimen is a local reconstruction. Product-source cascade, private runtime and unseen states remain unverified unless the linked trace explicitly records them.