@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/routes/[_].flows.tsx

@@ -0,0 +1,4254 @@
+/**
+ * The flows canvas: each flow's entry point, sample screens, requests, and exit. It pans on scroll,
+ * and zooms with a pinch, keys, or its controls. @module
+ */
+/* istanbul ignore file -- With `ssr: false`, it renders only in a browser. */
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { Accordion, Button, Tooltip } from '@tempoxyz/ds'
+import { ChevronRight, ZoomIn, ZoomOut } from '@tempoxyz/ds/icons'
+import {
+  type FormEvent,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { CodeInput } from '../components/CodeInput.js'
+import { Account } from '../screens/Account.js'
+import { Approval, InvalidRequest } from '../screens/Approval.js'
+import { ChooseAccount } from '../screens/ChooseAccount.js'
+import { Deposit } from '../screens/Deposit.js'
+import { DeviceApproval } from '../screens/DeviceApproval.js'
+import { NotFound } from '../screens/NotFound.js'
+import { SignIn } from '../screens/SignIn.js'
+import { WalletUpgrade } from '../screens/WalletUpgrade.js'
+import { style, variants, vars } from '../zyzz.config.js'
+
+/** An entry point, a Tempo ID screen, or an external step. */
+type Node = {
+  /** A secondary line, such as the entry request. */
+  detail?: string | undefined
+  /** The request or event on the incoming arrow. Absent on the first node. */
+  edge?: string | undefined
+  /** The name of the screen or step. */
+  name: string
+  /** `app` for an app's own screen. Absent for Tempo ID. */
+  owner?: 'app' | undefined
+  /** Absent for an external step. */
+  screen?: ReactNode | undefined
+}
+
+/** One path from an entry point to an exit. */
+type Flow = {
+  /** What the flow does, with code spans in backticks. */
+  description: string
+  /** The entry point, the steps, and the exit, in order. */
+  nodes: readonly Node[]
+  /** The flow's name. */
+  title: string
+}
+
+/** A canvas point that stays under a viewport point during a zoom. */
+type Anchor = {
+  /** Unzoomed pixels from the canvas's top left. */
+  canvas: { x: number; y: number }
+  /** Pixels from the viewport's top left. */
+  viewport: { x: number; y: number }
+}
+
+/** A titled group of flows. */
+type Section = {
+  /** In reading order. */
+  flows: readonly Flow[]
+  /** The group's name. */
+  title: string
+}
+
+export const Route = createFileRoute('/_/flows')({
+  component: Page,
+  // The canvas renders in the browser alone, since its sample balances format in the browser's
+  // locale and its sample expiries read the clock.
+  ssr: false,
+})
+
+/** The zoom limits, and the factor of one step. */
+const zoom = { max: 2, min: 0.25, step: 1.25 } as const
+
+/** Renders the canvas. */
+function Page(): ReactNode {
+  // The screens stay the same elements between zoom renders, so React skips them.
+  const all = useMemo(sections, [])
+  const [scale, setScale] = useState(1)
+  // The wheel and gesture listeners read the scale between renders, before the state updates.
+  const current = useRef(1)
+  const anchor = useRef<Anchor | undefined>(undefined)
+  const main = useRef<HTMLElement>(null)
+  const probe = useRef<HTMLDivElement>(null)
+
+  // The zoomed content starts below the canvas's top space, which the zoom does not scale. Engines
+  // with the legacy `zoom` geometry divide a zoomed element's rect by its zoom, so the origin comes
+  // from the canvas, outside the zoom.
+  const origin = () => {
+    if (!main.current) return window.scrollY
+    return (
+      main.current.getBoundingClientRect().top +
+      Number.parseFloat(getComputedStyle(main.current).paddingTop) +
+      window.scrollY
+    )
+  }
+
+  // Returns the rect pixels per CSS pixel inside the zoom: the scale in engines with the standard
+  // `zoom` geometry, and 1 in engines with the legacy one.
+  const unit = useCallback(
+    () => (probe.current?.getBoundingClientRect().height ?? 100) / 100,
+    [],
+  )
+
+  // Sets the zoom, and keeps the canvas point under `viewport` in place, or the viewport's center.
+  const zoomTo = (next: number, viewport?: Anchor['viewport']) => {
+    const clamped = Math.min(zoom.max, Math.max(zoom.min, next))
+    // An unchanged scale renders nothing, so the layout effect would never spend the anchor.
+    if (clamped === current.current) return
+
+    const point = viewport ?? {
+      x: window.innerWidth / 2,
+      y: window.innerHeight / 2,
+    }
+
+    // The scroll position updates only after the render, so a pending anchor keeps its canvas point.
+    anchor.current = {
+      canvas: anchor.current?.canvas ?? {
+        x: (window.scrollX + point.x) / current.current,
+        y: (window.scrollY + point.y - origin()) / current.current,
+      },
+      viewport: point,
+    }
+    current.current = clamped
+    setScale(clamped)
+  }
+
+  useLayoutEffect(() => {
+    const pending = anchor.current
+    if (!pending) return
+
+    anchor.current = undefined
+    window.scrollTo(
+      pending.canvas.x * scale - pending.viewport.x,
+      pending.canvas.y * scale + origin() - pending.viewport.y,
+    )
+  }, [scale])
+
+  // A plain wheel scrolls, so it pans. A pinch on a trackpad reaches the page as a wheel with
+  // `ctrlKey`, and Safari's as gesture events, which would otherwise zoom the whole page.
+  useEffect(() => {
+    const onWheel = (event: WheelEvent) => {
+      if (!event.ctrlKey && !event.metaKey) return
+
+      event.preventDefault()
+      const delta = (() => {
+        if (event.deltaMode === WheelEvent.DOM_DELTA_LINE)
+          return event.deltaY * 16
+        if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE)
+          return event.deltaY * window.innerHeight
+        return event.deltaY
+      })()
+      const bounded = Math.min(50, Math.max(-50, delta))
+      zoomTo(current.current * Math.exp(-bounded / 200), {
+        x: event.clientX,
+        y: event.clientY,
+      })
+    }
+
+    let gestureStart = 1
+    const onGestureStart = (event: Event) => {
+      event.preventDefault()
+      gestureStart = current.current
+    }
+    // WebKit's `GestureEvent` is not in the DOM types. iOS leaves out the pointer's coordinates.
+    type Gesture = Event & {
+      clientX?: number | undefined
+      clientY?: number | undefined
+      scale: number
+    }
+    const onGestureChange = (event: Event) => {
+      event.preventDefault()
+      const gesture = event as Gesture
+      // Without the pointer, the zoom keeps the viewport's center in place.
+      zoomTo(
+        gestureStart * gesture.scale,
+        typeof gesture.clientX === 'number' &&
+          typeof gesture.clientY === 'number'
+          ? { x: gesture.clientX, y: gesture.clientY }
+          : undefined,
+      )
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.altKey || event.ctrlKey || event.metaKey) return
+      if (
+        event.target instanceof HTMLElement &&
+        (event.target.isContentEditable ||
+          event.target.closest('input, select, textarea'))
+      )
+        return
+
+      if (event.key === '+' || event.key === '=')
+        zoomTo(current.current * zoom.step)
+      else if (event.key === '-') zoomTo(current.current / zoom.step)
+      else if (event.key === '0') zoomTo(1)
+      else return
+      event.preventDefault()
+    }
+
+    window.addEventListener('wheel', onWheel, { passive: false })
+    window.addEventListener('gesturestart', onGestureStart)
+    window.addEventListener('gesturechange', onGestureChange)
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('wheel', onWheel)
+      window.removeEventListener('gesturestart', onGestureStart)
+      window.removeEventListener('gesturechange', onGestureChange)
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [])
+
+  // The canvas renders after load, so the browser finds no target for a link's fragment then. Each
+  // identifier is a slug, so the fragment needs no decoding.
+  useEffect(() => {
+    if (window.location.hash) reveal({ id: window.location.hash.slice(1) })
+  }, [])
+
+  // The content stays one element across zoom renders, so a zoom renders only the controls.
+  const canvas = useMemo(
+    () => <Content sections={all} unit={unit} />,
+    [all, unit],
+  )
+
+  const percent = Math.round(scale * 100)
+
+  return (
+    <main ref={main} {...styles.canvas()}>
+      <div {...styles.panels()}>
+        <div aria-label="Zoom" role="toolbar" {...styles.zoom()}>
+          <ZoomTip label="Zoom out">
+            <Button
+              aria-label="Zoom out"
+              disabled={scale <= zoom.min}
+              onClick={() => zoomTo(scale / zoom.step)}
+              shape="icon"
+              size="small"
+              variant="text"
+            >
+              <ZoomOut {...styles.zoomIcon()} />
+            </Button>
+          </ZoomTip>
+          <ZoomTip label="Reset to 100%">
+            <Button
+              aria-label={`Zoom ${percent}%. Reset to 100%`}
+              onClick={() => zoomTo(1)}
+              size="small"
+              variant="text"
+              {...styles.zoomLevel()}
+            >
+              {percent}%
+            </Button>
+          </ZoomTip>
+          <ZoomTip label="Zoom in">
+            <Button
+              aria-label="Zoom in"
+              disabled={scale >= zoom.max}
+              onClick={() => zoomTo(scale * zoom.step)}
+              shape="icon"
+              size="small"
+              variant="text"
+            >
+              <ZoomIn {...styles.zoomIcon()} />
+            </Button>
+          </ZoomTip>
+          <span aria-live="polite" role="status" {...styles.hidden()}>
+            {`Zoom ${percent}%`}
+          </span>
+        </div>
+        <Legend sections={all} />
+      </div>
+      {/* `zoom` scales the layout too, so the page's scroll size follows the zoom and scrolling pans. */}
+      <div {...styles.world({ style: { zoom: scale } })}>
+        <div aria-hidden ref={probe} {...styles.probe()} />
+        {canvas}
+      </div>
+    </main>
+  )
+}
+
+/** Renders the introduction, the groups, and their flows. */
+function Content(props: Content.Props): ReactNode {
+  return (
+    <>
+      <header {...styles.intro()}>
+        <h1 {...styles.title()}>Flows</h1>
+        <p {...styles.lede()}>
+          Every path through Tempo ID, from the entry point on the left to the
+          exit on the right. Each arrow names the request or event that leads to
+          the next step. Scroll to pan. To zoom, pinch, or scroll with Control
+          or Command held.
+        </p>
+      </header>
+      {props.sections.map((section) => (
+        <section {...styles.section()} key={section.title}>
+          <h2 {...styles.sectionTitle()} id={fragment.section(section)}>
+            {section.title}
+          </h2>
+          {section.flows.map((flow) => (
+            <article
+              {...styles.flow()}
+              id={fragment.flow(section, flow)}
+              key={flow.title}
+            >
+              <header {...styles.flowHeader()}>
+                <h3 {...styles.flowTitle()}>{flow.title}</h3>
+                <p {...styles.flowDescription()}>
+                  <Description text={flow.description} />
+                </p>
+              </header>
+              <Row flow={flow} unit={props.unit} />
+            </article>
+          ))}
+        </section>
+      ))}
+    </>
+  )
+}
+
+declare namespace Content {
+  type Props = {
+    /** In canvas order. */
+    sections: readonly Section[]
+    /** Returns the rect pixels per CSS pixel inside the zoom. */
+    unit: () => number
+  }
+}
+
+/** Estimated row heights before a render, in unzoomed pixels. */
+const estimate = { external: 128, screen: 480 }
+
+/**
+ * Renders a flow's row near the viewport, or a box of its last size, so a zoom lays out few
+ * screens.
+ */
+function Row(props: Row.Props): ReactNode {
+  const box = useRef<HTMLDivElement>(null)
+  const [near, setNear] = useState(false)
+  const [size, setSize] = useState(() => ({
+    height: props.flow.nodes.some((node) => node.screen !== undefined)
+      ? estimate.screen
+      : estimate.external,
+    width: props.flow.nodes.reduce(
+      (width, node, index) =>
+        width + (node.screen === undefined ? 224 : 384) + (index > 0 ? 192 : 0),
+      0,
+    ),
+  }))
+
+  useEffect(() => {
+    const element = box.current
+    if (!element) return
+
+    // The margin of one viewport on each side renders a row before it scrolls into view.
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries.at(-1)
+        if (!entry) return
+
+        // A row records its size before it leaves, so its box keeps the canvas's layout. The rect
+        // and the unit come from the same geometry, so the size is in CSS pixels in either one.
+        if (
+          !entry.isIntersecting &&
+          element.firstElementChild instanceof HTMLOListElement
+        ) {
+          const rect = element.getBoundingClientRect()
+          setSize({
+            height: rect.height / props.unit(),
+            width: rect.width / props.unit(),
+          })
+        }
+        setNear(entry.isIntersecting)
+      },
+      { rootMargin: '100%' },
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [props.unit])
+
+  return (
+    <div ref={box} {...styles.rowBox()}>
+      {near ? (
+        <ol {...styles.row()}>
+          {props.flow.nodes.map((node, index) => (
+            <li {...styles.step()} key={`${index}:${node.name}`}>
+              {index > 0 ? <Arrow label={node.edge} /> : null}
+              {node.screen ? (
+                <figure {...styles.artboard()}>
+                  <figcaption {...styles.frameLabel()}>
+                    {node.owner === 'app' ? `App · ${node.name}` : node.name}
+                  </figcaption>
+                  {node.owner === 'app' ? (
+                    <div {...vars({ set: 'thirdParty' })}>
+                      <div {...styles.frame()}>{node.screen}</div>
+                    </div>
+                  ) : (
+                    <div {...styles.frame()}>{node.screen}</div>
+                  )}
+                </figure>
+              ) : (
+                <External
+                  detail={node.detail}
+                  kind={(() => {
+                    if (index === 0) return 'Entry'
+                    if (index === props.flow.nodes.length - 1) return 'Exit'
+                    return 'External'
+                  })()}
+                  name={node.name}
+                />
+              )}
+            </li>
+          ))}
+        </ol>
+      ) : (
+        <div
+          aria-hidden
+          {...styles.placeholder({
+            style: { height: size.height, width: size.width },
+          })}
+        />
+      )}
+    </div>
+  )
+}
+
+declare namespace Row {
+  type Props = {
+    /** The flow that the row renders. */
+    flow: Flow
+    /** Returns the rect pixels per CSS pixel inside the zoom. */
+    unit: () => number
+  }
+}
+
+/** Fragment identifiers of the groups and flows, from their titles. */
+const fragment = {
+  /** Returns the identifier of `flow` under `section`, since flow names repeat across groups. */
+  flow(section: Section, flow: Flow) {
+    return `${fragment.section(section)}--${slug(flow.title)}`
+  },
+  /** Returns the identifier of `section`. */
+  section(section: Section) {
+    return slug(section.title)
+  },
+}
+
+/**
+ * Scrolls the group or flow `id` to the top left, and aligns it for 10 frames while rows render.
+ */
+function reveal(options: reveal.Options) {
+  const target = document.getElementById(options.id)
+  if (!target) return
+
+  // The clearance is in viewport pixels, since a scroll margin inside the zoom would shrink with it.
+  // `scrollIntoView` places the target in either `zoom` geometry, so the scroll reads no zoomed rect.
+  const top = window.matchMedia('(min-width: 64rem)').matches ? 24 : 112
+  let settled = 0
+  const align = () => {
+    target.scrollIntoView({ block: 'start' })
+    window.scrollTo({ left: 0, top: window.scrollY - top })
+    settled = target.getBoundingClientRect().top
+  }
+  align()
+
+  // Each check compares the target's rect with its own rect after the last alignment, which holds in
+  // either geometry.
+  let frames = 10
+  const settle = () => {
+    if (Math.abs(target.getBoundingClientRect().top - settled) > 1) align()
+    frames -= 1
+    if (frames > 0) requestAnimationFrame(settle)
+  }
+  requestAnimationFrame(settle)
+}
+
+declare namespace reveal {
+  type Options = {
+    /** The identifier of the group or flow. */
+    id: string
+  }
+}
+
+/** Returns `text` in lowercase, with each non-alphanumeric run as `-`. */
+function slug(text: string) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+/** Renders the collapsed contents list, with a link to each group and flow. */
+function Legend(props: Legend.Props): ReactNode {
+  return (
+    <nav aria-label="Flows" {...styles.legend()}>
+      <Accordion.Root>
+        <Accordion.Item value="contents" {...styles.legendItem()}>
+          <Accordion.Trigger {...styles.legendTrigger()}>
+            Contents
+          </Accordion.Trigger>
+          <Accordion.Panel>
+            <ol {...styles.legendList()}>
+              {props.sections.map((section) => (
+                <li key={section.title}>
+                  <Entry
+                    {...styles.legendSection()}
+                    id={fragment.section(section)}
+                  >
+                    {section.title}
+                  </Entry>
+                  <ol {...styles.legendFlows()}>
+                    {section.flows.map((flow) => (
+                      <li key={flow.title}>
+                        <Entry
+                          {...styles.legendFlow()}
+                          id={fragment.flow(section, flow)}
+                        >
+                          {flow.title}
+                        </Entry>
+                      </li>
+                    ))}
+                  </ol>
+                </li>
+              ))}
+            </ol>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion.Root>
+    </nav>
+  )
+}
+
+declare namespace Legend {
+  type Props = {
+    /** In canvas order. */
+    sections: readonly Section[]
+  }
+}
+
+/** Renders a link to the group or flow `id`, which {@link reveal} scrolls to. */
+function Entry(props: Entry.Props): ReactNode {
+  return (
+    <Link
+      className={props.className}
+      hash={props.id}
+      hashScrollIntoView={false}
+      onClick={(event) => {
+        // A modified click opens the link in another tab or window, so this page keeps its scroll.
+        if (
+          event.button !== 0 ||
+          event.altKey ||
+          event.ctrlKey ||
+          event.metaKey ||
+          event.shiftKey
+        )
+          return
+        reveal({ id: props.id })
+      }}
+      replace
+      resetScroll={false}
+      to="/_/flows"
+    >
+      {props.children}
+    </Link>
+  )
+}
+
+declare namespace Entry {
+  type Props = {
+    /** The link text. */
+    children: ReactNode
+    /** The link's class names. */
+    className?: string | undefined
+    /** The identifier of the group or flow. */
+    id: string
+  }
+}
+
+/** Renders a tooltip below a zoom control. */
+function ZoomTip(props: ZoomTip.Props): ReactNode {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger delay={300} render={props.children} />
+      <Tooltip.Popup side="bottom" sideOffset={8}>
+        {props.label}
+      </Tooltip.Popup>
+    </Tooltip.Root>
+  )
+}
+
+declare namespace ZoomTip {
+  type Props = {
+    /** The control, which receives the trigger's props. */
+    children: ReactElement
+    /** The tooltip text. */
+    label: string
+  }
+}
+
+/** Renders `text` with each backtick span as code. */
+function Description(props: Description.Props): ReactNode {
+  // Splitting on the backticks puts each code span at an odd index.
+  return props.text.split('`').map((part, index) =>
+    index % 2 ? (
+      <code {...styles.code()} key={index}>
+        {part}
+      </code>
+    ) : (
+      part
+    ),
+  )
+}
+
+declare namespace Description {
+  type Props = {
+    /** The description, with code spans in backticks. */
+    text: string
+  }
+}
+
+/** A labeled arrow between two nodes. */
+function Arrow(props: Arrow.Props): ReactNode {
+  return (
+    <span {...styles.arrow()} aria-label={props.label ?? 'Then'} role="img">
+      <span {...styles.edge()}>{props.label}</span>
+      <span {...styles.shaft()}>
+        <span {...styles.line()} />
+        <ChevronRight {...styles.head()} />
+      </span>
+    </span>
+  )
+}
+
+declare namespace Arrow {
+  type Props = {
+    /** The request or event. */
+    label?: string | undefined
+  }
+}
+
+/** A step outside Tempo ID's pages, such as a provider. */
+function External(props: External.Props): ReactNode {
+  return (
+    <div {...styles.external({ kind: props.kind })}>
+      <span {...styles.kind()}>{props.kind}</span>
+      <span {...styles.externalName()}>{props.name}</span>
+      {props.detail ? <code {...styles.detail()}>{props.detail}</code> : null}
+    </div>
+  )
+}
+
+declare namespace External {
+  type Props = {
+    /** A secondary line, such as the entry request. */
+    detail?: string | undefined
+    /** Where the step sits in its flow. */
+    kind: 'Entry' | 'Exit' | 'External'
+    /** The step's name. */
+    name: string
+  }
+}
+
+/** A sample app's own screen, in the style of a food-delivery app. */
+function AppScreen(props: AppScreen.Props): ReactNode {
+  return (
+    <div {...styles.app()}>
+      <header {...styles.appHeader()}>
+        <h4 {...styles.appTitle()}>{props.title}</h4>
+        {props.description ? (
+          <p {...styles.appDescription()}>{props.description}</p>
+        ) : null}
+      </header>
+      {props.children}
+    </div>
+  )
+}
+
+declare namespace AppScreen {
+  type Props = {
+    /** The screen's controls. */
+    children?: ReactNode | undefined
+    /** The line below the title. */
+    description?: string | undefined
+    /** The screen's heading. */
+    title: string
+  }
+}
+
+/** A pill button in the sample app's style. */
+function AppButton(props: AppButton.Props): ReactNode {
+  return (
+    // oxlint-disable-next-line tds/prefer-component -- The sample app draws its own controls.
+    <button {...styles.appButton({ tone: props.tone })} type="button">
+      {props.children}
+    </button>
+  )
+}
+
+declare namespace AppButton {
+  type Props = {
+    /** The button's label. */
+    children: ReactNode
+    /** The brand red, or a quiet gray. */
+    tone: 'brand' | 'quiet'
+  }
+}
+
+/** The sample app's labeled email field. */
+function AppEmailField(): ReactNode {
+  return (
+    <label {...styles.appField()}>
+      <span {...styles.appLabel()}>Email</span>
+      {/* oxlint-disable-next-line tds/prefer-component -- The sample app draws its own controls. */}
+      <input {...styles.appInput()} placeholder="Required" readOnly />
+    </label>
+  )
+}
+
+/** The sample app's sign-in: a passkey, or an email. */
+function AppSignIn(): ReactNode {
+  return (
+    <AppScreen title="Sign in or sign up">
+      <AppButton tone="quiet">Continue with passkey</AppButton>
+      <p {...styles.appDivider()}>or continue with email</p>
+      <AppEmailField />
+      <AppButton tone="brand">Continue</AppButton>
+    </AppScreen>
+  )
+}
+
+/** The sample app's email step for an unlinked passkey. */
+function AppEmail(): ReactNode {
+  return (
+    <AppScreen
+      description="Sign in with your email to link this passkey."
+      title="Add your email"
+    >
+      <AppEmailField />
+      <AppButton tone="brand">Continue</AppButton>
+    </AppScreen>
+  )
+}
+
+/** The sample app's code step. */
+function AppCode(): ReactNode {
+  return (
+    <AppScreen
+      description={`Enter the 6-digit code sent to ${email}.`}
+      title="Check your email"
+    >
+      <CodeInput aria-label="Code" length={6} readOnly />
+      <AppButton tone="brand">Verify</AppButton>
+    </AppScreen>
+  )
+}
+
+/** The sample app after the sign-in. */
+function AppSignedIn(): ReactNode {
+  return (
+    <AppScreen description={email} title="You're signed in">
+      <p {...styles.appAddress()}>{accounts[0].address}</p>
+      <AppButton tone="quiet">Sign out</AppButton>
+    </AppScreen>
+  )
+}
+
+/** A handler that does nothing. */
+function noop() {}
+
+/** A form handler that stops the submission. */
+function prevent(event: FormEvent<HTMLFormElement>) {
+  event.preventDefault()
+}
+
+/** The sample accounts: one that Privy owns, and one that a passkey owns. */
+const accounts = [
+  {
+    address: '0x1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9f3c',
+    balance: { amount: '1250.5', currency: 'USD' },
+    owner: 'privy',
+    realm: null,
+  },
+  {
+    address: '0x7c4d2e9a1b3f5c7d9e0a2b4c6d8e0f1a3b5c21ab',
+    balance: { amount: '42', currency: 'USD' },
+    owner: 'webAuthn',
+    realm: null,
+  },
+] as const satisfies readonly ChooseAccount.Account[]
+
+/** The sample email address. */
+const email = 'user@example.com'
+
+/** The sample refusal of an upstream service. */
+const unavailable = 'An upstream service is unavailable. Retry later.'
+
+/** The sample key: 100 USD a day for a week, in pathUSD. */
+function key(): Approval.Key {
+  return {
+    calls: [],
+    expiry: Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60,
+    limits: [
+      {
+        amount: '100',
+        currency: 'USD',
+        period: 24 * 60 * 60,
+        tokens: [{ amount: '100', symbol: 'pathUSD' }],
+      },
+    ],
+    unrecognized: [],
+  }
+}
+
+/** Sample `Approval` props for a key, before a decision. */
+function approval(): Approval.Props {
+  return {
+    app: 'Tempo Wallet',
+    approving: false,
+    denying: false,
+    destination: 'wallet.tempo.xyz',
+    email,
+    heading: 'h4',
+    keyAuthorization: key(),
+    onApprove: noop,
+    onDeny: noop,
+    verified: true,
+  }
+}
+
+/** The sample sign-in request, with its key. */
+function signInRequest(): NonNullable<SignIn.Props['request']> {
+  return { app: 'Tempo Wallet', key: key(), verified: true }
+}
+
+/** The sample sign-in request, without a key. */
+function appRequest(): NonNullable<SignIn.Props['request']> {
+  return { app: 'Tempo Wallet', key: null, verified: true }
+}
+
+/** The sample account that the account step chose. */
+function selectedAccount(): NonNullable<Approval.Props['account']> {
+  return { address: accounts[0].address, owner: accounts[0].owner }
+}
+
+/** The entry of a signed-out redirect with a key. */
+const keyedEntry = {
+  detail: 'GET /oauth2/authorize?…&key_authorization',
+  name: 'Web app',
+} as const satisfies Node
+
+/** Sample `Account` props for a signed-in user. */
+function account(): Account.Props {
+  return {
+    accounts: [accounts[0]],
+    email,
+    heading: 'h4',
+    onAddPasskey: noop,
+    onSignOut: noop,
+    signingOut: false,
+  }
+}
+
+/** Sample `Account` props on a configurable chain, whose only account is `accounts[index]`. */
+function configurable(index: 0 | 1): Account.Props {
+  return {
+    ...account(),
+    // An account that Tempo ID created is configurable from its creation, and a linked wallet.tempo
+    // passkey's account is not until its upgrade.
+    accounts: [{ ...accounts[index], configurable: index === 0 }],
+    onAddOwner: noop,
+    passkeys: true,
+  }
+}
+
+/** Sample `ChooseAccount` props, with nothing chosen. */
+function chooseAccount(): ChooseAccount.Props {
+  return { accounts, app: 'Tempo Wallet', heading: 'h4', onChoose: noop }
+}
+
+/** Sample `DeviceApproval` props, before a submission. */
+function deviceApproval(): DeviceApproval.Props {
+  return {
+    approving: false,
+    code: '',
+    denying: false,
+    email,
+    fetching: false,
+    heading: 'h4',
+    invalid: false,
+    onApprove: noop,
+    onDeny: noop,
+    onSubmitCode: prevent,
+  }
+}
+
+/** A sample `tempo-id login` request, with its key. */
+function deviceRequest(): DeviceApproval.Request {
+  return {
+    app: { name: 'Tempo CLI' },
+    created_at: Math.floor(Date.now() / 1000),
+    device: 'ada-macbook',
+    ip: '203.0.113.7',
+    key_authorization: key(),
+    location: 'San Francisco, US',
+    user_code: 'BDWP-HQPK',
+  }
+}
+
+/** The entry of `tempo-id login`, which requests a code and a key. */
+const loginEntry = {
+  detail: 'POST /device/code with key_authorization',
+  name: 'tempo-id login',
+} as const satisfies Node
+
+/** The exit of `tempo-id login`: the poll for the tokens and the signed key. */
+const loginExit = {
+  detail:
+    'Tokens and key_authorization, stored in ~/.tempo/id/credentials.json. A replaced session’s refresh token goes to POST /oauth2/revoke.',
+  edge: 'POST /oauth2/token: authorization_pending, then tokens',
+  name: 'tempo-id login',
+} as const satisfies Node
+
+/** Sample `WalletUpgrade` props, before the upgrade. */
+function walletUpgrade(): WalletUpgrade.Props {
+  return {
+    heading: 'h4',
+    onContinue: noop,
+    onSkip: noop,
+    upgrading: false,
+  }
+}
+
+/** Sample `SignIn` props, before a submission, with every method. */
+function signIn(): SignIn.Props {
+  return {
+    heading: 'h4',
+    invalid: false,
+    onChangeEmail: noop,
+    onPasskey: noop,
+    onResend: noop,
+    onStartOver: noop,
+    onSubmitCode: prevent,
+    onSubmitEmail: prevent,
+    resend: 'idle',
+    sending: false,
+    verifying: false,
+  }
+}
+
+/** The entry of an app's redirect to `/oauth2/authorize`. */
+const redirectEntry = {
+  detail: 'GET /oauth2/authorize?client_id&redirect_uri&code_challenge&state',
+  name: 'Web app',
+} as const satisfies Node
+
+/** The page-load requests that select a headless app's own sign-in. */
+const appSignInEdge = 'GET /v1/auth/session: no user'
+
+/** The exit of an app's redirect: the code redemption. */
+const tokenExit = {
+  detail: 'Access, ID, and refresh tokens',
+  edge: 'POST /oauth2/token with code_verifier',
+  name: 'Web app',
+} as const satisfies Node
+
+/**
+ * Every flow, by group. Update it with any flow it shows. It runs on mount, so sample times read
+ * the clock then.
+ */
+function sections(): readonly Section[] {
+  return [
+    {
+      flows: [
+        {
+          description:
+            'A visitor opens Tempo ID without a session and signs in with an emailed code. An accepted code shows green for 500 ms before the sign-in continues.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              edge: 'Page /login',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect: null',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Email code',
+        },
+        {
+          description:
+            'A passkey of the realm signs the user in with one prompt, from the button.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              detail: 'POST /v1/auth/passkey/options, as the page shows',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              detail: 'The options that the page requested',
+              edge: 'Sign in with a passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/passkey/verify',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Passkey',
+        },
+        {
+          description:
+            'A wallet.tempo passkey without an email verifies one with a code. The passkey signs again with the code, which links it to the user.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              detail: 'POST /v1/auth/passkey/options, as the page shows',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              detail: 'The options that the page requested',
+              edge: 'Sign in with a passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/passkey/verify: step email',
+              name: 'Sign in (link passkey)',
+              screen: <SignIn {...signIn()} linking />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email (link passkey)',
+              screen: <SignIn {...signIn()} email={email} linking />,
+            },
+            {
+              detail: 'POST /v1/auth/passkey/options with link and authorize',
+              edge: 'Code complete',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with link and assertion: 200',
+              name: 'Check your email (link accepted)',
+              screen: <SignIn {...signIn()} email={email} linking verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect: null',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Passkey: adds an email',
+        },
+        {
+          description:
+            'Start over on the email step drops the passkey’s link and a pending code request, so the passkey stays unlinked.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Sign in with a passkey, POST /v1/auth/passkey/verify: step email',
+              name: 'Sign in (link passkey)',
+              screen: <SignIn {...signIn()} linking />,
+            },
+            {
+              edge: 'Start over',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+          ],
+          title: 'Passkey: start over',
+        },
+        {
+          description:
+            'Realms without a passkey relying party at Tempo ID’s origin leave only the email field.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: '200, passkeys: false',
+              name: 'Sign in (email only)',
+              screen: <SignIn {...signIn()} onPasskey={undefined} />,
+            },
+          ],
+          title: 'Email only: no passkey',
+        },
+        {
+          description:
+            'Each sign-in request holds its controls, shows a spinner, and announces its progress until it settles. One sign-in runs at a time.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Continue, POST /v1/auth/code',
+              name: 'Sign in (sending)',
+              screen: <SignIn {...signIn()} sending />,
+            },
+            {
+              edge: 'Or: Sign in with a passkey',
+              name: 'Sign in (passkey pending)',
+              screen: <SignIn {...signIn()} passkeyPending />,
+            },
+            {
+              edge: 'Code complete, POST /v1/auth/code/verify',
+              name: 'Check your email (verifying)',
+              screen: <SignIn {...signIn()} email={email} verifying />,
+            },
+            {
+              edge: 'Or: Resend code, POST /v1/auth/code',
+              name: 'Check your email (resending)',
+              screen: <SignIn {...signIn()} email={email} resend="pending" />,
+            },
+          ],
+          title: 'Sign-in: in progress',
+        },
+      ],
+      title: 'Sign-in',
+    },
+    {
+      flows: [
+        {
+          description:
+            'The account page lists the user’s Tempo Accounts in the `default` realm, oldest first, each with its balance and a deposit link. A lone wallet shows its balance large, without a list.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              edge: 'GET /v1/account?chain, 200, one wallet',
+              name: 'Your account (one wallet)',
+              screen: <Account {...account()} />,
+            },
+            {
+              edge: 'Or: several wallets',
+              name: 'Your account (several wallets)',
+              screen: <Account {...account()} accounts={accounts} />,
+            },
+            {
+              edge: 'Or: a balance read fails',
+              name: 'Your account (balance unavailable)',
+              screen: (
+                <Account
+                  {...account()}
+                  accounts={[accounts[0], { ...accounts[1], balance: null }]}
+                />
+              ),
+            },
+            {
+              edge: 'Or: no wallet, POST /v1/account with chain creates the first one, 200 with its balance',
+              name: 'Your account (wallet created)',
+              screen: <Account {...account()} />,
+            },
+            {
+              edge: 'Or: the realm creates no wallets on the server, but holds passkeys',
+              name: 'Your account (no wallets)',
+              screen: <Account {...account()} accounts={[]} />,
+            },
+            {
+              edge: 'Or: the realm creates no wallets at all',
+              name: 'Your account (no wallet possible)',
+              screen: (
+                <Account
+                  {...account()}
+                  accounts={[]}
+                  onAddPasskey={undefined}
+                />
+              ),
+            },
+            {
+              edge: 'Or: the accounts cannot be read',
+              name: 'Your account (unavailable)',
+              screen: (
+                <Account
+                  {...account()}
+                  accountError="Your wallets failed to load. Reload the page to try again."
+                  accounts={null}
+                />
+              ),
+            },
+          ],
+          title: 'Account page',
+        },
+        {
+          description:
+            'On a test chain, such as testnet, each deposit icon funds its wallet from the chain’s faucet through `POST /i/account/fund`, one request at a time. Tempo mainnet has no faucet, so its deposit icon opens `/deposit`.',
+          nodes: [
+            { detail: 'GET /?chain=testnet', name: 'Browser' },
+            {
+              edge: 'GET /v1/account?chain=testnet, 200',
+              name: 'Your account (test chain)',
+              screen: (
+                <Account
+                  {...account()}
+                  accounts={[
+                    {
+                      ...accounts[0],
+                      balance: { amount: '0', currency: 'USD' },
+                    },
+                  ]}
+                  onFund={noop}
+                />
+              ),
+            },
+            {
+              edge: 'Deposit icon, POST /i/account/fund',
+              name: 'Your account (funding)',
+              screen: (
+                <Account
+                  {...account()}
+                  accounts={[
+                    {
+                      ...accounts[0],
+                      balance: { amount: '0', currency: 'USD' },
+                    },
+                  ]}
+                  funding={accounts[0].address}
+                  onFund={noop}
+                />
+              ),
+            },
+            {
+              edge: '200 with the transfers, GET /v1/account?chain=testnet',
+              name: 'Your account (funded)',
+              screen: (
+                <Account
+                  {...account()}
+                  accounts={[
+                    {
+                      ...accounts[0],
+                      balance: { amount: '5000000', currency: 'USD' },
+                    },
+                  ]}
+                  onFund={noop}
+                />
+              ),
+            },
+            {
+              edge: 'Or: the node fails, 503 upstream_unavailable',
+              name: 'Your account (faucet unavailable)',
+              screen: (
+                <Account
+                  {...account()}
+                  accounts={[
+                    {
+                      ...accounts[0],
+                      balance: { amount: '0', currency: 'USD' },
+                    },
+                  ]}
+                  error={unavailable}
+                  onFund={noop}
+                />
+              ),
+            },
+          ],
+          title: 'Account page: testnet faucet',
+        },
+        {
+          description:
+            'In one click, the account page adds a passkey of the `default` realm, which signs the user in and owns a new passkey wallet. The page offers it only when the realm holds passkeys and the user has no passkey wallet.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+            {
+              edge: 'Add passkey, POST /v1/account/passkey/options, navigator.credentials.create(), POST /v1/account/passkey, navigator.credentials.get()',
+              name: 'Your account (adding a passkey)',
+              screen: <Account {...account()} addingPasskey />,
+            },
+            {
+              edge: 'POST /v1/account/passkey/verify, 200, then the accounts load again, and a toast: Passkey added',
+              name: 'Your account (passkey added)',
+              screen: (
+                <Account
+                  {...account()}
+                  accounts={accounts}
+                  onAddPasskey={undefined}
+                  passkeyAdded
+                />
+              ),
+            },
+            {
+              edge: 'Or: the ceremony is canceled',
+              name: 'Your account (passkey canceled)',
+              screen: (
+                <Account
+                  {...account()}
+                  error="Adding a passkey was canceled. Try again."
+                />
+              ),
+            },
+            {
+              edge: 'Or: the session signed in more than 10 minutes before',
+              name: 'Your account (sign in again)',
+              screen: (
+                <Account
+                  {...account()}
+                  error="Sign in again: adding a passkey needs a sign-in within the last 10 minutes."
+                />
+              ),
+            },
+            {
+              edge: 'Or: the accounts failed to load, and the device already holds one of the user’s passkeys',
+              name: 'Your account (passkey held)',
+              screen: (
+                <Account
+                  {...account()}
+                  error="This device already holds one of your passkeys. Add a passkey on another device."
+                />
+              ),
+            },
+          ],
+          title: 'Account page: add a passkey',
+        },
+        {
+          description:
+            'On a chain that `CONFIGURABLE_ACCOUNTS` names, a cloud wallet’s configurable account adds a passkey as a second owner. The cloud wallet signs the configuration update, so the wallet keeps its address, and either owner then signs alone.',
+          nodes: [
+            { detail: 'GET /?chain=local', name: 'Browser opens Tempo ID' },
+            {
+              name: 'Your account (configurable chain)',
+              screen: <Account {...configurable(0)} />,
+            },
+            {
+              edge: 'Add passkey, POST /v1/account/passkey/options, navigator.credentials.create(), POST /v1/account/passkey, navigator.credentials.get()',
+              name: 'Your account (adding a passkey)',
+              screen: <Account {...configurable(0)} addingPasskey />,
+            },
+            {
+              edge: 'POST /v1/account/passkey/verify with account: the cloud wallet signs the update, and a toast: Passkey added',
+              name: 'Your account (passkey added)',
+              screen: (
+                <Account
+                  {...configurable(0)}
+                  accounts={[
+                    {
+                      ...accounts[0],
+                      configurable: true,
+                      owners: ['privy', 'webAuthn'],
+                    },
+                  ]}
+                  ownerAdded="passkey"
+                />
+              ),
+            },
+            {
+              edge: 'Or: the chain refuses the change, or the Tempo API’s sponsor fails',
+              name: 'Your account (change failed)',
+              screen: (
+                <Account
+                  {...configurable(0)}
+                  error="An upstream service is unavailable. Retry later."
+                />
+              ),
+            },
+          ],
+          title: 'Add a passkey to a cloud wallet',
+        },
+        {
+          description:
+            'On a chain that `CONFIGURABLE_ACCOUNTS` names, a linked wallet.tempo passkey’s wallet upgrades in place, with the passkey as its only owner. One click signs the prepared passkey step, and the wallet keeps its address.',
+          nodes: [
+            {
+              detail:
+                'GET /?chain=local, then POST /v1/account/upgrade, 200, the passkey step',
+              name: 'Browser opens Tempo ID',
+            },
+            {
+              name: 'Your account (upgrade)',
+              screen: <Account {...configurable(1)} onUpgrade={noop} />,
+            },
+            {
+              edge: 'Or: the user holds a cloud wallet too, and each wallet’s row offers its own change as an icon',
+              name: 'Your account (two wallets)',
+              screen: (
+                <Account
+                  {...configurable(1)}
+                  accounts={[
+                    { ...accounts[0], configurable: true },
+                    { ...accounts[1], configurable: false },
+                  ]}
+                  onUpgrade={noop}
+                />
+              ),
+            },
+            {
+              edge: 'Upgrade wallet, navigator.credentials.get(), POST /v1/account/upgrade with passkey.assertion',
+              name: 'Your account (upgrading)',
+              screen: (
+                <Account
+                  {...configurable(1)}
+                  onUpgrade={noop}
+                  upgrading={accounts[1].address}
+                />
+              ),
+            },
+            {
+              edge: '200, the account at version 1, and a toast: Wallet upgraded',
+              name: 'Your account (upgraded)',
+              screen: (
+                <Account
+                  {...configurable(1)}
+                  accounts={[{ ...accounts[1], configurable: true }]}
+                />
+              ),
+            },
+            {
+              edge: 'Or: the chain refuses the upgrade, or the Tempo API’s sponsor fails',
+              name: 'Your account (upgrade failed)',
+              screen: (
+                <Account
+                  {...configurable(1)}
+                  error="An upstream service is unavailable. Retry later."
+                  onUpgrade={noop}
+                />
+              ),
+            },
+          ],
+          title: 'Upgrade a passkey wallet',
+        },
+        {
+          description:
+            'When `CONFIGURABLE_ACCOUNTS` names the sign-in page’s `chain`, a wallet.tempo user receives no cloud wallet. Before the account page, Continue on the upgrade step links the passkey and signs its upgrade.',
+          nodes: [
+            {
+              detail:
+                'GET /?chain=local, page /login?chain=local, then POST /v1/auth/code/verify: 200',
+              name: 'Browser signs in by email',
+            },
+            {
+              edge: 'GET /i/account/upgrades?chain=local, then POST /v1/account/upgrade with credentialId, 200, the passkey step',
+              name: 'Upgrade your wallet',
+              screen: <WalletUpgrade {...walletUpgrade()} />,
+            },
+            {
+              edge: 'Continue, POST /v1/account/upgrade with passkey.assertion, which links the passkey',
+              name: 'Upgrade your wallet (upgrading)',
+              screen: <WalletUpgrade {...walletUpgrade()} upgrading />,
+            },
+            {
+              edge: 'Or: the passkey ceremony fails, or the upgrade is refused',
+              name: 'Upgrade your wallet (failed)',
+              screen: (
+                <WalletUpgrade
+                  {...walletUpgrade()}
+                  error="Your passkey did not sign the upgrade. Continue to try again."
+                />
+              ),
+            },
+            {
+              edge: 'redirect: null, GET /?chain=local',
+              name: 'Your account (upgraded)',
+              screen: (
+                <Account
+                  {...configurable(1)}
+                  accounts={[{ ...accounts[1], configurable: true }]}
+                />
+              ),
+            },
+          ],
+          title: 'Sign-in: upgrade a wallet.tempo passkey',
+        },
+        {
+          description:
+            'A wallet.tempo user who chooses Not now on the upgrade step holds no configurable wallet yet. The account page lists that passkey’s wallet from `GET /i/account/passkeys`, and one click links the passkey and signs its upgrade.',
+          nodes: [
+            {
+              detail: 'Not now, then GET /?chain=local',
+              name: 'Browser signs in',
+            },
+            {
+              edge: 'GET /i/account/passkeys, then POST /v1/account/upgrade with credentialId, 200, the passkey step',
+              name: 'Your account (wallet.tempo passkey)',
+              screen: (
+                <Account
+                  {...configurable(1)}
+                  accounts={[
+                    {
+                      ...accounts[1],
+                      credentialId: 'KEbWNCc7NgaYnUyrNeFGX9_3Y-8',
+                    },
+                  ]}
+                  onUpgrade={noop}
+                />
+              ),
+            },
+            {
+              edge: 'Upgrade wallet, POST /v1/account/upgrade with passkey.assertion, which links the passkey, and a toast: Wallet upgraded',
+              name: 'Your account (upgraded)',
+              screen: (
+                <Account
+                  {...configurable(1)}
+                  accounts={[{ ...accounts[1], configurable: true }]}
+                />
+              ),
+            },
+          ],
+          title: 'Account page: upgrade a wallet.tempo passkey',
+        },
+        {
+          description:
+            'The account page and the deposit page send a visitor without a session to sign-in, which then opens the account page. The deposit page leaves the address out of the sign-in query.',
+          nodes: [
+            { detail: 'GET / or GET /deposit?address', name: 'Browser' },
+            {
+              edge: 'GET /v1/account: session_required, page /login',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect: null, GET /',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Account page: signed out',
+        },
+        {
+          description:
+            'Deposit lists the networks and cash methods for one of the user’s wallets. Only Tempo is available, and it shows the wallet’s address as a QR code and as text.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              edge: '200, one wallet',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+            {
+              edge: 'Deposit, GET /deposit?address',
+              name: 'Deposit',
+              screen: <Deposit address={accounts[0].address} heading="h4" />,
+            },
+            {
+              edge: 'Tempo, GET /deposit?address&method=tempo',
+              name: 'Receive funds',
+              screen: (
+                <Deposit
+                  address={accounts[0].address}
+                  heading="h4"
+                  method="tempo"
+                />
+              ),
+            },
+            {
+              edge: 'Back, GET /deposit?address',
+              name: 'Deposit',
+              screen: <Deposit address={accounts[0].address} heading="h4" />,
+            },
+            {
+              edge: 'Back, GET /',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Deposit',
+        },
+        {
+          description: 'Done on Receive funds opens the account page at once.',
+          nodes: [
+            { detail: 'GET /deposit?address&method=tempo', name: 'Browser' },
+            {
+              edge: '200 deposit page',
+              name: 'Receive funds',
+              screen: (
+                <Deposit
+                  address={accounts[0].address}
+                  heading="h4"
+                  method="tempo"
+                />
+              ),
+            },
+            {
+              edge: 'Done, GET /',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Deposit: done',
+        },
+        {
+          description:
+            'An address that is not one of the user’s wallets in the `default` realm shows no address. A spent rate limit or a failed account read shows its own reason in the same place.',
+          nodes: [
+            {
+              detail: 'GET /deposit?address (not the user’s)',
+              name: 'Browser',
+            },
+            {
+              edge: '200, address: null',
+              name: 'Deposit (wallet not found)',
+              screen: (
+                <Deposit
+                  error="This wallet was not found. Go back to your account, then choose Deposit."
+                  heading="h4"
+                />
+              ),
+            },
+            {
+              edge: 'Or: the account rate limit is spent',
+              name: 'Deposit (rate limited)',
+              screen: (
+                <Deposit
+                  error="Too many requests. Try again in 1 minute."
+                  heading="h4"
+                />
+              ),
+            },
+            {
+              edge: 'Or: the accounts cannot be read',
+              name: 'Deposit (unavailable)',
+              screen: (
+                <Deposit
+                  error="Your wallets failed to load. Reload the page to try again."
+                  heading="h4"
+                />
+              ),
+            },
+          ],
+          title: 'Deposit: unknown wallet',
+        },
+        {
+          description:
+            'A page path that no route serves responds with status 404 and the not-found screen, which links to the account page. An API path, such as `/v1/…` or `/oauth2/…`, responds with `unknown_endpoint` instead.',
+          nodes: [
+            { detail: 'GET /nope', name: 'Browser' },
+            {
+              edge: '404',
+              name: 'Page not found',
+              screen: <NotFound heading="h4" />,
+            },
+            {
+              edge: 'Go to your account, GET /',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Unknown page: 404',
+        },
+      ],
+      title: 'Account and deposit',
+    },
+    {
+      flows: [
+        {
+          description:
+            'A web app redirects a signed-out user to the sign-in page, which names the app of the request that Better Auth signs. A page on Tempo ID’s site can first prefetch the sign-in page’s assets from `GET /v1/auth/assets`.',
+          nodes: [
+            redirectEntry,
+            {
+              edge: 'Page /login?…&sig, GET /login: request without key',
+              name: 'Sign in (app)',
+              screen: <SignIn {...signIn()} request={appRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'after 500 ms, redirect',
+              name: 'Web app callback',
+            },
+            tokenExit,
+          ],
+          title: 'Redirect: signed out',
+        },
+        {
+          description:
+            'A signed-out user’s request with a key shows the app and the key on the sign-in page. The first sign-in of the request grants the key, so the browser returns to the app without the approval page.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: 'Page /login?…&sig, GET /login: request',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, grants the key',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'after 500 ms, redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in grant',
+        },
+        {
+          description:
+            'On the sign-in page, the passkey’s challenge is the digest of the request’s key. One assertion signs the user in and signs the key, for an account that this passkey owns, or that Privy or secp256k1 owns.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: 'Page /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              detail:
+                'POST /v1/auth/passkey/options with oauth_query, as the page shows: the key’s digest',
+              edge: 'Sign in with a passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/auth/passkey/verify with oauth_query, grants the key',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in grant: passkey sign-in with key signature',
+        },
+        {
+          description:
+            'When the account reads are spent, the account step does not run, so a user with several accounts receives no grant. The approval page opens, and holds Approve until a reload after a minute.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: 'Page /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: ACCOUNT_LIMIT spent, no account step, several accounts: no grant',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /authorize?…&sig',
+              name: 'Authorize this app (unavailable)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'unavailable' }}
+                />
+              ),
+            },
+            {
+              edge: 'Reload after a minute',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in grant: account reads spent',
+        },
+        {
+          description:
+            'A held grant covers only the request that the sign-in spent. A request with another `scope`, or with a `challenge`, takes no held grant on the account step, so the approval page opens.',
+          nodes: [
+            {
+              detail: 'GET /choose-account?…&sig, another scope or a challenge',
+              name: 'Browser',
+            },
+            {
+              edge: '200 account step',
+              name: 'Choose a wallet',
+              screen: <ChooseAccount {...chooseAccount()} />,
+            },
+            {
+              edge: 'Choose, POST /v1/authorize/account: another scope, no held grant, redirect /authorize?…&sig',
+              name: 'Authorize this app (another scope)',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Or: a challenge, which takes no grant, redirect /authorize?…&sig',
+              name: 'Authorize this app (challenge)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{
+                    ...key(),
+                    challenge: 'Sign in to api.example.com\nNonce: 8f2a91',
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in grant: another request',
+        },
+        {
+          description:
+            'A user with several accounts in the app’s realms chooses one, and the choice takes the sign-in’s grant, which lasts 10 minutes. A passkey that owns the chosen account first signs the key on this step.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: 'Page /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, holds the grant',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /choose-account?…&sig',
+              name: 'Choose a wallet',
+              screen: <ChooseAccount {...chooseAccount()} />,
+            },
+            {
+              edge: 'Choose, POST /v1/authorize/account',
+              name: 'Choose a wallet (selecting)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  selecting={accounts[0].address}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'takes the held grant, redirect (a passkey account: passkey step, then POST again with the assertion)',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in grant: account step',
+        },
+        {
+          description:
+            'A sign-in that cannot grant the key keeps the redirect to the approval page, which shows the request again. Causes include another passkey that owns the account, a replayed request, a refused key, a spent rate limit, or an upstream failure.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: 'Page /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'Sign-in with oauth_query: the grant fails, redirect /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Authorize this app (approving)',
+              screen: <Approval {...approval()} approving />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'redirect, or the passkey step first',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in grant: falls back to approval',
+        },
+        {
+          description:
+            'The account step’s signed query expires 10 minutes after the sign-in, just before its held grant. A later choice is refused with `authorization_expired`, so the user starts again in the app.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: 'Page /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, holds the grant',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /choose-account?…&sig',
+              name: 'Choose a wallet',
+              screen: <ChooseAccount {...chooseAccount()} />,
+            },
+            {
+              edge: 'After 10 minutes, Choose, POST /v1/authorize/account: authorization_expired',
+              name: 'Choose a wallet (request expired)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  error="Expired authorization request: the request from the app is no longer valid. Return to the app, and start again."
+                />
+              ),
+            },
+            {
+              detail:
+                'GET /oauth2/authorize?…&key_authorization, a new request',
+              edge: 'Return to the app, and start again',
+              name: 'Web app',
+            },
+          ],
+          title: 'Sign-in grant: account step expired',
+        },
+        {
+          description:
+            'A request with a `challenge` signs a message that only the approval page shows. So the sign-in page names the app but shows no key, and the sign-in grants nothing.',
+          nodes: [
+            {
+              ...keyedEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization&challenge',
+            },
+            {
+              edge: 'Page /login?…&sig, GET /login: request without key',
+              name: 'Sign in (app)',
+              screen: <SignIn {...signIn()} request={appRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /authorize?…&sig',
+              name: 'Authorize this app (challenge)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{
+                    ...key(),
+                    challenge: 'Sign in to api.example.com\nNonce: 8f2a91',
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in grant: with a challenge',
+        },
+        {
+          description:
+            'A signed-in user returns to an app that skips consent at once. Tempo ID shows no screen.',
+          nodes: [
+            redirectEntry,
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: '302, no screen',
+              name: 'Web app callback',
+            },
+            tokenExit,
+          ],
+          title: 'Redirect: signed in',
+        },
+        {
+          description:
+            'A request with `prompt=login` asks a signed-in user to sign in again. The sign-in page shows the request, and its key, despite the session.',
+          nodes: [
+            {
+              ...keyedEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization&prompt=login',
+            },
+            {
+              edge: 'Page /login?…&prompt=login consent&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, grants the key',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'after 500 ms, redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Redirect: prompt=login',
+        },
+        {
+          description:
+            'A signed-in user approves a third-party app, which never skips consent, once for the scopes it requests. The request carries no key, so the page shows none.',
+          nodes: [
+            redirectEntry,
+            {
+              edge: 'Page /authorize?…&sig',
+              name: 'Authorize this app (no key)',
+              screen: <Approval {...approval()} keyAuthorization={undefined} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            tokenExit,
+          ],
+          title: 'Approval: no key',
+        },
+        {
+          description:
+            'A signed-in user’s request with a key opens the approval page, which holds Approve until the account read streams in. A Privy or secp256k1 owner signs the key on the server when the user approves.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig, GET /i/authorize/request',
+              name: 'Authorize this app (checking)',
+              screen: <Approval {...approval()} checking />,
+            },
+            {
+              edge: 'GET /v1/authorize/request streams in: the account and any refusal',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Authorize this app (approving)',
+              screen: <Approval {...approval()} approving />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: key',
+        },
+        {
+          description:
+            'A key on a chain other than mainnet shows its chain as a gray tag on the permissions card. The tag shows the name that `GET /v1/chains` lists, or else the chain ID.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization with chainId',
+            },
+            {
+              edge: 'Page /authorize?…&sig',
+              name: 'Authorize this app (another chain)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{
+                    ...key(),
+                    chain: { id: 31318, name: 't14' },
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: key on another chain',
+        },
+        {
+          description:
+            'A third-party app names its metadata document’s URL, or its origin, as `client_id`, and registers nothing. The page shows the host beside the name, marks no name as verified, and grants only keys that name expiry, limits, and scopes.',
+          nodes: [
+            {
+              detail:
+                'GET /oauth2/authorize?client_id=https://app.example.com/.well-known/oauth-client-metadata.json&key_authorization',
+              name: 'Third-party app',
+            },
+            {
+              edge: "GET client_id: the metadata document or the origin's manifest, page /authorize?…&sig",
+              name: 'Authorize this app (third-party)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  app="Example"
+                  destination="app.example.com"
+                  verified={false}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Third-party app callback',
+            },
+            {
+              detail: 'Tokens, account, and key_authorization',
+              edge: 'POST /oauth2/token with code_verifier',
+              name: 'Third-party app',
+            },
+          ],
+          title: 'Third-party app',
+        },
+        {
+          description:
+            'A third-party app’s key that leaves out its expiry, limits, or scopes returns to the app with `missing_permissions`, before sign-in.',
+          nodes: [
+            {
+              detail:
+                'GET /oauth2/authorize?client_id=https://app.example.com/.well-known/oauth-client-metadata.json&key_authorization (no limits)',
+              name: 'Third-party app',
+            },
+            {
+              detail: 'GET redirect_uri?error=invalid_authorization_details',
+              edge: 'missing_permissions',
+              name: 'Third-party app callback',
+            },
+          ],
+          title: 'Third-party app: missing permissions',
+        },
+        {
+          description:
+            'A passkey owns the account, so the approval returns the passkey step. The passkey signs the key’s digest, and the page approves again.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Authorize this app (approving)',
+              screen: <Approval {...approval()} approving />,
+            },
+            {
+              detail: 'Signs the key authorization, over the approving page',
+              edge: 'step passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent with passkey.assertion',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: passkey account',
+        },
+        {
+          description:
+            'When a wallet.tempo passkey’s wallet waits for its upgrade, Approve shows the upgrade step first. The approval follows the upgrade, so the browser returns to the app.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig, GET /v1/authorize/request: refusal upgrade, GET /i/account/passkeys for a passkey that has not linked, POST /v1/account/upgrade, the passkey step',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve',
+              name: 'Upgrade your wallet',
+              screen: <WalletUpgrade {...walletUpgrade()} />,
+            },
+            {
+              edge: 'Or: POST /v1/account/upgrade: reauthentication_required, then Sign in again, POST /v1/auth/logout, and the sign-in page',
+              name: 'Upgrade your wallet (sign in again)',
+              screen: <WalletUpgrade {...walletUpgrade()} onSignIn={noop} />,
+            },
+            {
+              detail:
+                'Signs the upgrade, then the key authorization, over the upgrading step',
+              edge: 'Continue, POST /v1/account/upgrade with passkey.assertion, then POST /v1/authorize/consent, step passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent with passkey.assertion',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: upgrade after Approve',
+        },
+        {
+          description:
+            'Not now on the upgrade step approves the request without the upgrade, and the passkey signs the key as its own account. The key stops working on that chain once the wallet upgrades, and the account page and the next approval offer the upgrade again.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig, GET /v1/authorize/request: refusal upgrade, then Approve',
+              name: 'Upgrade your wallet',
+              screen: <WalletUpgrade {...walletUpgrade()} />,
+            },
+            {
+              edge: 'Not now, POST /v1/authorize/consent with skip_upgrade',
+              name: 'Upgrade your wallet (skipping)',
+              screen: <WalletUpgrade {...walletUpgrade()} skipping />,
+            },
+            {
+              detail:
+                'Signs the key authorization as the passkey’s own account, over the skipping step',
+              edge: 'step passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent with skip_upgrade and passkey.assertion, which links a passkey that has not linked',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: skip the upgrade',
+        },
+        {
+          description:
+            'An app with the `tempo-id:sign` scope sends a challenge, and the approval page shows the message that the key signs.',
+          nodes: [
+            {
+              detail: 'GET /oauth2/authorize?…&key_authorization&challenge',
+              name: 'Native app',
+            },
+            {
+              edge: 'Page /authorize?…&sig',
+              name: 'Authorize this app (challenge)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  app="Tempo Mobile"
+                  destination="tempo"
+                  keyAuthorization={{
+                    ...key(),
+                    challenge: 'Sign in to api.example.com\nNonce: 8f2a91',
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'tempo:/callback?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Native app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+              name: 'Native app',
+            },
+          ],
+          title: 'Approval: challenge',
+        },
+        {
+          description:
+            'Beside its limits, the approval page lists the `open` and `topUp` calls on the channel reserve as funds held for services. Its info icon links to the Machine Payments Protocol.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig',
+              name: 'Authorize this app (MPP sessions)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{
+                    ...key(),
+                    calls: [{ call: 'open' }, { call: 'topUp' }],
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: MPP sessions',
+        },
+        {
+          description:
+            'The approval page lists a key’s calls that Tempo ID does not recognize, such as a function on another contract, with a warning. A headless request refuses them unless the app holds the `tempo-id:sign` scope.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig',
+              name: 'Authorize this app (unrecognized calls)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{
+                    ...key(),
+                    unrecognized: [
+                      {
+                        address: '0xdec0000000000000000000000000000000000000',
+                        selector: '0x12345678',
+                      },
+                    ],
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: unrecognized calls',
+        },
+        {
+          description:
+            'A user with more than one Tempo Account in the app’s realms chooses one, which continues to the approval page. Each row shows the account’s balance on the key’s chain, or Balance unavailable when the read fails.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /choose-account?…&sig',
+              name: 'Choose a wallet',
+              screen: <ChooseAccount {...chooseAccount()} />,
+            },
+            {
+              edge: 'Or: a balance read fails',
+              name: 'Choose a wallet (balance unavailable)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  accounts={[accounts[0], { ...accounts[1], balance: null }]}
+                />
+              ),
+            },
+            {
+              edge: 'Choose, POST /v1/authorize/account',
+              name: 'Choose a wallet (selecting)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  selecting={accounts[0].address}
+                />
+              ),
+            },
+            {
+              edge: 'redirect /authorize?…&sig, GET /v1/authorize/request: account',
+              name: 'Authorize this app (account)',
+              screen: <Approval {...approval()} account={selectedAccount()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Account step',
+        },
+        {
+          description:
+            'A user with several Tempo Accounts who returns in the same session skips the account step, and the approval page shows the selected account. Sign-out from Tempo ID ends the selection.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig, GET /v1/authorize/request: account',
+              name: 'Authorize this app (selected account)',
+              screen: <Approval {...approval()} account={selectedAccount()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Account step: selection kept',
+        },
+        {
+          description:
+            'An app in several realms, such as web-shared, lists accounts from each. Each row then names its realm, apart from the `default` realm.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+              name: 'Web app in two realms',
+            },
+            {
+              edge: 'Page /choose-account?…&sig',
+              name: 'Choose a wallet (two realms)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  accounts={[
+                    { ...accounts[0], realm: 'Tempo Cash' },
+                    accounts[1],
+                  ]}
+                />
+              ),
+            },
+            {
+              edge: 'Choose, POST /v1/authorize/account',
+              name: 'Choose a wallet (two realms, selecting)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  accounts={[
+                    { ...accounts[0], realm: 'Tempo Cash' },
+                    accounts[1],
+                  ]}
+                  selecting={accounts[0].address}
+                />
+              ),
+            },
+            {
+              edge: 'redirect /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Account step: several realms',
+        },
+        {
+          description:
+            'Denying returns the browser to the app with `error=access_denied`. The app receives no code.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Deny',
+              name: 'Authorize this app (denying)',
+              screen: <Approval {...approval()} denying />,
+            },
+            {
+              detail: 'GET redirect_uri?error=access_denied&state',
+              edge: 'POST /v1/authorize/consent, accept: false',
+              name: 'Web app callback',
+            },
+          ],
+          title: 'Approval: denied',
+        },
+        {
+          description:
+            'Approval cannot sign some keys, so the page holds Approve and states why. Deny still returns to the app.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              edge: 'Page /authorize?…&sig: no account, and no Privy app to create one',
+              name: 'Authorize this app (no account)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'no_account' }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: a passkey whose relying party is not Tempo ID’s, or POST /v1/authorize/consent: webauthn_required',
+              name: 'Authorize this app (passkey)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'passkey' }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: a wallet.tempo passkey’s wallet waits for its upgrade, and the page reads no upgrade for it, such as when GET /i/chains fails',
+              name: 'Authorize this app (upgrade first)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'upgrade' }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: the key names an account that the user does not hold',
+              name: 'Authorize this app (foreign account)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'foreign_account' }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: the accounts cannot be read',
+              name: 'Authorize this app (unavailable)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'unavailable' }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?error=access_denied&state',
+              edge: 'Deny, POST /v1/authorize/consent, accept: false',
+              name: 'Web app callback',
+            },
+          ],
+          title: 'Approval: key it cannot sign',
+        },
+        {
+          description:
+            'A key that breaks a rule returns to the app with the refusal, as `/oauth2/authorize` returns one before sign-in. The `error` names the rule, such as `invalid_authorization_details` for an expired key, or `unauthorized_client` for a challenge without the `tempo-id:sign` scope.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?…&key_authorization',
+            },
+            {
+              detail: 'GET redirect_uri?error&error_description',
+              edge: 'key refused',
+              name: 'Web app callback',
+            },
+          ],
+          title: 'Refused key',
+        },
+        {
+          description:
+            'A changed or expired query, or a request without a known app, shows an invalid request, on the approval page and on the account step.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig (changed)', name: 'Browser' },
+            {
+              edge: '200, request: null',
+              name: 'This sign-in request is invalid',
+              screen: <InvalidRequest heading="h4" />,
+            },
+            {
+              edge: 'Or: GET /choose-account?…&sig (changed), 200, request: null',
+              name: 'This sign-in request is invalid (account step)',
+              screen: <InvalidRequest heading="h4" />,
+            },
+          ],
+          title: 'Invalid request',
+        },
+        {
+          description:
+            '`/oauth2/authorize` shows the error page, not a redirect, for an unknown or disabled app, a failed metadata document, or an unregistered `redirect_uri`. The page maps `error` to fixed copy and never shows `error_description`.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /oauth2/authorize?client_id (unknown)',
+            },
+            {
+              edge: 'Page /error?error=invalid_client',
+              name: 'This app is not recognized',
+              screen: <InvalidRequest heading="h4" reason="client" />,
+            },
+            {
+              edge: 'Or: redirect_uri not registered, 302 /error?error=invalid_redirect',
+              name: 'This app’s return address is not registered',
+              screen: <InvalidRequest heading="h4" reason="redirect" />,
+            },
+            {
+              edge: 'Or: another error, such as unsupported_response_type',
+              name: 'This sign-in request is invalid (error page)',
+              screen: <InvalidRequest heading="h4" />,
+            },
+          ],
+          title: 'Unknown app or redirect URI',
+        },
+        {
+          description:
+            'A backend runs the redirect flow and redeems the code with its client secret, so tokens never reach the browser. In the test harness, no account in the `default` realm can sign the request’s key, so the approval page holds Approve.',
+          nodes: [
+            {
+              detail: 'GET /auth/start on the backend, with a key',
+              name: 'Backend playground',
+            },
+            {
+              edge: '302 /oauth2/authorize with state and code_challenge, page /login?…&sig',
+              name: 'Sign in (key)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  request={{ ...signInRequest(), app: 'Backend playground' }}
+                />
+              ),
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, no account to sign',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /authorize?…&sig',
+              name: 'Authorize this app (no account)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  app="Backend playground"
+                  destination="backend.example.com"
+                  keyAuthorization={{ ...key(), refusal: 'no_account' }}
+                />
+              ),
+            },
+            {
+              detail: 'GET /auth/callback?error=access_denied&state',
+              edge: 'Deny, POST /v1/authorize/consent, accept: false',
+              name: 'Backend callback',
+            },
+            {
+              detail: 'GET /auth/callback?code&state',
+              edge: '302 /auth/start?key=false, 302 /oauth2/authorize, 302, no screen',
+              name: 'Backend callback',
+            },
+            {
+              detail: 'Tokens stay on the server, without a key',
+              edge: 'POST /oauth2/token with client_secret',
+              name: 'Backend session',
+            },
+          ],
+          title: 'Backend app',
+        },
+      ],
+      title: 'App authorization',
+    },
+    {
+      flows: [
+        {
+          description:
+            "The app's own pages send the code, then verify it with the authorization request, which signs in, creates the first account, and returns the authorization. Tempo ID shows no screen.",
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              owner: 'app',
+              screen: <AppCode />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with authorize: user and authorization',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Email code',
+        },
+        {
+          description:
+            "A wallet.tempo passkey owns the user's account, so the code signs no key, and the sign-in returns the passkey step. The passkey then signs the key's digest on the app's page, with no approval page, when its relying party covers the page.",
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              owner: 'app',
+              screen: <AppCode />,
+            },
+            {
+              detail:
+                'POST /v1/auth/code/verify with authorize and passkey: step passkey',
+              edge: 'Code complete',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/authorize with expiry and passkey: { assertion }: authorization',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Email code: passkey account',
+        },
+        {
+          description:
+            'A signed-in user skips the code. The app requests the authorization at once.',
+          nodes: [
+            { detail: 'Session cookie set', name: "App's page" },
+            {
+              edge: 'GET /v1/auth/session, POST /v1/authorize',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Email code: signed in',
+        },
+        {
+          description:
+            "The app's page runs the passkey ceremony with its client ID, which selects the app's realms, and its authorization request. The challenge is the key's digest, so one assertion signs the user in and signs the key of the passkey's account, with no approval page.",
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              detail:
+                'The options of `Actions.passkey.prepare`, as the form showed: GET /v1/realms, then POST /v1/auth/passkey/options with client_id and authorize',
+              edge: 'Continue with passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/passkey/verify: user and authorization',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Passkey',
+        },
+        {
+          description:
+            "A wallet.tempo passkey without an email verifies one through the app's own code step. The passkey signs again with the code, which links it, and that assertion signs the key of its account.",
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              detail:
+                'The options of `Actions.passkey.prepare`, as the form showed: GET /v1/realms, then POST /v1/auth/passkey/options with client_id',
+              edge: 'Continue with passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/passkey/verify: step email',
+              name: 'Add your email',
+              owner: 'app',
+              screen: <AppEmail />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              owner: 'app',
+              screen: <AppCode />,
+            },
+            {
+              detail: 'POST /v1/auth/passkey/options with link',
+              edge: 'Code complete',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with link and assertion: user and authorization',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Passkey: adds an email',
+        },
+        {
+          description:
+            'In a sign-in with key signature, a passkey signs only the key of its own account. For another passkey’s account, the sign-in refuses the key with `webauthn_required`, and the app signs in through a redirect without a key.',
+          nodes: [
+            {
+              detail: 'POST /v1/auth/passkey/verify: webauthn_required',
+              name: "App's sign-in",
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'GET /oauth2/authorize without key_authorization, 302, no screen',
+              name: 'Web app callback',
+            },
+            {
+              edge: 'POST /oauth2/token with code_verifier',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Passkey: falls back to redirect',
+        },
+        {
+          description:
+            "On a chain whose accounts are configurable, a wallet.tempo passkey's account waits for its upgrade. The sign-in sets `skip_upgrade`, so its one assertion signs the key as the passkey's own account, and returns `upgradeAvailable`. The web playground then calls `Actions.account.upgrade` in the same click. Its prompt signs the upgrade, and Tempo ID first registers the key through a sponsored transaction that the access key signs, so the key keeps working.",
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              detail:
+                'The options of `Actions.passkey.prepare`, with skip_upgrade in authorize',
+              edge: 'Continue with passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              detail:
+                'POST /v1/account/upgrade with key_authorization: the passkey step, with step.key.digest, which the access key signs with no prompt',
+              edge: 'POST /v1/auth/passkey/verify: user and authorization with upgrade_available: true',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/account/upgrade with passkey.assertion and key.signature: the key registers, then the account upgrades',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Passkey: upgrade the wallet',
+        },
+      ],
+      title: 'Headless apps',
+    },
+    {
+      flows: [
+        {
+          description:
+            '`tempo-id login` requests a code with a new access key, and prints `verification_uri_complete`. After the user approves on the device page, the CLI’s next poll receives the tokens and the signed key, and stores them.',
+          nodes: [
+            loginEntry,
+            {
+              detail: 'GET /device?code',
+              edge: 'Shows verification_uri_complete',
+              name: 'Browser',
+            },
+            {
+              edge: 'Page /login?return_to=/device?code',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} device />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} device email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} device email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, /device?code',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'POST /v1/device/approve',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            loginExit,
+          ],
+          title: 'Device code: signed out',
+        },
+        {
+          description:
+            'A user who opens the bare `verification_uri` types the code that the terminal shows.',
+          nodes: [
+            loginEntry,
+            {
+              detail: 'GET /device',
+              edge: 'Shows user_code and verification_uri',
+              name: 'Browser',
+            },
+            {
+              edge: '200 device page',
+              name: 'Authorize a device (enter a code)',
+              screen: <DeviceApproval {...deviceApproval()} />,
+            },
+            {
+              edge: 'Continue, GET /device?code',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'POST /v1/device/approve',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            loginExit,
+          ],
+          title: 'Device code: typed',
+        },
+        {
+          description:
+            "Denying ends the request. The CLI's next poll is refused.",
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200 device page',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'POST /v1/device/deny',
+              name: 'Denied',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="denied"
+                />
+              ),
+            },
+            {
+              detail: 'Exits with not_signed_in',
+              edge: 'POST /oauth2/token: access_denied',
+              name: 'tempo-id login',
+            },
+          ],
+          title: 'Device code: denied',
+        },
+        {
+          description:
+            'A passkey owns the account, so the approval returns the passkey step. The passkey signs the key’s digest in this browser, and the page approves again.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200 device page',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve',
+              name: 'Authorize a device (approving)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  approving
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              detail: 'Signs the key authorization, over the approving page',
+              edge: 'step passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/device/approve with passkey.assertion',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            loginExit,
+          ],
+          title: 'Device code: passkey account',
+        },
+        {
+          description:
+            'When a wallet.tempo passkey’s wallet waits for its upgrade, the device page shows the upgrade step first. Continue upgrades the wallet and loads the request again, and Not now shows the request with its refusal.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'GET /v1/device/requests/:code: refusal upgrade, GET /i/account/passkeys for a passkey that has not linked, POST /v1/account/upgrade, the passkey step',
+              name: 'Upgrade your wallet',
+              screen: <WalletUpgrade {...walletUpgrade()} />,
+            },
+            {
+              edge: 'Continue, POST /v1/account/upgrade with passkey.assertion, then GET /v1/device/requests/:code again',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              detail: 'Signs the key authorization, over the approving page',
+              edge: 'Approve, POST /v1/device/approve, step passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/device/approve with passkey.assertion',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            loginExit,
+          ],
+          title: 'Device code: upgrade first',
+        },
+        {
+          description:
+            'Approval cannot sign some keys, so the page holds Approve and states why. Deny still ends the request.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'The key names an account that the user does not hold',
+              name: 'Authorize a device (foreign account)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    key_authorization: { ...key(), refusal: 'foreign_account' },
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: no account, and no Privy app to create one, or Not now on the upgrade step',
+              name: 'Authorize a device (no account)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    key_authorization: { ...key(), refusal: 'no_account' },
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: a passkey whose relying party is not Tempo ID’s, or POST /v1/device/approve: webauthn_required',
+              name: 'Authorize a device (passkey)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    key_authorization: { ...key(), refusal: 'passkey' },
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: the accounts cannot be read',
+              name: 'Authorize a device (unavailable)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    key_authorization: { ...key(), refusal: 'unavailable' },
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'POST /oauth2/token: access_denied',
+              edge: 'Deny, POST /v1/device/deny',
+              name: 'tempo-id login',
+            },
+          ],
+          title: 'Device code: key it cannot sign',
+        },
+        {
+          description:
+            'A CLI with the `tempo-id:sign` scope sends a challenge, and the device page shows the message that the key signs.',
+          nodes: [
+            {
+              detail: 'POST /device/code with key_authorization and challenge',
+              name: 'CLI',
+            },
+            {
+              edge: 'GET /device?code, 200 device page',
+              name: 'Authorize a device (challenge)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    challenge: 'Sign in to api.example.com\nNonce: 8f2a91',
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve, or the passkey step first',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            {
+              detail:
+                'Tokens, and key_authorization bound to the challenge’s hash',
+              edge: 'POST /oauth2/token: authorization_pending, then tokens',
+              name: 'CLI',
+            },
+          ],
+          title: 'Device code: challenge',
+        },
+        {
+          description:
+            'A code that is already approved or denied shows its outcome again, without the decision buttons.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200, status: approved',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+          ],
+          title: 'Device code: already decided',
+        },
+        {
+          description:
+            'A code that no one approves before `expires_in` ends the login. The CLI stores nothing, and the user runs `tempo-id login` again.',
+          nodes: [
+            loginEntry,
+            {
+              detail: 'Exits with not_signed_in',
+              edge: 'POST /oauth2/token: authorization_pending, then expired_token',
+              name: 'tempo-id login',
+            },
+          ],
+          title: 'tempo-id login: expired',
+        },
+        {
+          description:
+            'The CLI reads the stored session, refreshes its access token when it expires within 30 seconds, and reads the user.',
+          nodes: [
+            { detail: '~/.tempo/id/credentials.json', name: 'tempo-id whoami' },
+            {
+              detail: 'Email and Tempo Account',
+              edge: 'POST /oauth2/token with refresh_token within 30 s of expiry, GET /oauth2/userinfo',
+              name: 'tempo-id whoami',
+            },
+          ],
+          title: 'tempo-id whoami',
+        },
+        {
+          description:
+            'Each device request holds the code field or the decision buttons, and shows a spinner, until it settles.',
+          nodes: [
+            { detail: 'GET /device', name: 'Browser' },
+            {
+              edge: 'Continue, GET /device?code',
+              name: 'Authorize a device (fetching)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  code="BDWP-HQPK"
+                  fetching
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve',
+              name: 'Authorize a device (approving)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  approving
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'Or: Deny, POST /v1/device/deny',
+              name: 'Authorize a device (denying)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  denying
+                  request={deviceRequest()}
+                />
+              ),
+            },
+          ],
+          title: 'Device code: in progress',
+        },
+        {
+          description:
+            'A device app without a display name could be anyone’s, so the request omits `app`, and the page flags an unverified app.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200 device page, request without app',
+              name: 'Authorize a device (unverified app)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{ ...deviceRequest(), app: undefined }}
+                />
+              ),
+            },
+          ],
+          title: 'Device code: unverified app',
+        },
+        {
+          description:
+            'A code that matches no pending request, or one that another user holds, keeps the code form.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'unknown_code',
+              name: 'Authorize a device (unknown code)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  code="BDWP-HQPX"
+                  error="Invalid or expired code. Check the code in the terminal."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Device code: unknown code',
+        },
+        {
+          description:
+            'Each user’s code lookups share one rate limit, so the page refuses a lookup over it and keeps the code form.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'Lookup over the rate limit',
+              name: 'Authorize a device (rate limited)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  code="BDWP-HQPK"
+                  error="Too many requests. Try again in 1 minute."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Device code: rate limited',
+        },
+      ],
+      title: 'Device grant',
+    },
+    {
+      flows: [
+        {
+          description:
+            'Sign-out ends the session and revokes its refresh tokens, then opens the sign-in page.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+            {
+              edge: 'Sign out, POST /v1/auth/logout',
+              name: 'Your account (signing out)',
+              screen: <Account {...account()} signingOut />,
+            },
+            {
+              edge: '200, then /login',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+          ],
+          title: 'Sign-out',
+        },
+        {
+          description:
+            'An app signs the user out with its ID token. Tempo ID ends the session that the hint names, if this browser holds it, and redirects to the app.',
+          nodes: [
+            {
+              detail:
+                'GET /oauth2/end-session?id_token_hint&post_logout_redirect_uri&state',
+              name: 'Web app',
+            },
+            {
+              detail: 'GET post_logout_redirect_uri?state',
+              edge: '302, no screen',
+              name: 'Web app',
+            },
+          ],
+          title: 'RP-initiated logout',
+        },
+        {
+          description:
+            'A cross-site form POST carries no `SameSite=Lax` session cookie, so Tempo ID seals the parameters and continues as a GET, which carries the cookie.',
+          nodes: [
+            {
+              detail:
+                'POST /oauth2/end-session with id_token_hint, post_logout_redirect_uri, and state',
+              name: 'Web app',
+            },
+            {
+              detail: 'GET /oauth2/end-session?continuation',
+              edge: '303, no session cookie',
+              name: 'Browser',
+            },
+            {
+              detail: 'GET post_logout_redirect_uri?state',
+              edge: '302, no screen',
+              name: 'Web app',
+            },
+          ],
+          title: 'RP-initiated logout: form POST',
+        },
+        {
+          description:
+            "An app's own Sign out ends the Tempo ID session. The app forgets the sign-in even if the request fails, and shows the error.",
+          nodes: [
+            { detail: 'Web playground', name: "App's page" },
+            {
+              edge: 'GET /v1/auth/session, POST /v1/authorize',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+            {
+              edge: 'Sign out, POST /v1/auth/logout',
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+          ],
+          title: 'Headless sign-out',
+        },
+        {
+          description:
+            'The CLI revokes the stored refresh token at the deployment that issued it, and deletes the session even if the revocation fails.',
+          nodes: [
+            { detail: '~/.tempo/id/credentials.json', name: 'tempo-id logout' },
+            {
+              detail: 'Session deleted',
+              edge: 'POST /oauth2/revoke with the refresh token',
+              name: 'tempo-id logout',
+            },
+          ],
+          title: 'tempo-id logout',
+        },
+      ],
+      title: 'Sign-out',
+    },
+    {
+      flows: [
+        {
+          description:
+            'A refused send keeps the first step, with the refusal below the email field, which it marks invalid. The user can try again or pick another method.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'POST /v1/auth/code: 503',
+              name: 'Sign in (send failed)',
+              screen: <SignIn {...signIn()} error={unavailable} invalid />,
+            },
+          ],
+          title: 'Email code: send refused',
+        },
+        {
+          description:
+            'A canceled prompt or a refused passkey keeps the first step, with the error below the email field. The email field is not marked invalid, since no address was sent.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Canceled prompt, or POST /v1/auth/passkey/verify refused',
+              name: 'Sign in (passkey failed)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  error="Passkey sign-in was canceled. Try again, or continue with email."
+                />
+              ),
+            },
+          ],
+          title: 'Passkey: fails',
+        },
+        {
+          description:
+            'A refused code clears the field and marks it invalid, so the next code can be typed at once.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'POST /v1/auth/code/verify: 401',
+              name: 'Check your email (wrong code)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  email={email}
+                  error="Invalid or expired code. Request a new one."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Email code: wrong code',
+        },
+        {
+          description:
+            'With `SIGN_UP_DOMAINS`, a verified code for an address with no account, outside those domains, creates no account. An existing account at any domain still signs in.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'POST /v1/auth/code/verify: 403 sign_up_not_permitted',
+              name: 'Check your email (sign-up refused)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  email={email}
+                  error="Sign-up not permitted: new accounts need an address at tempo.xyz. Sign in with an existing account, or with an address at tempo.xyz."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Email code: sign-up refused',
+        },
+        {
+          description:
+            'A passkey that does not sign again, or whose assertion is refused, drops the link. The code field clears and takes focus, so the next code signs in with email only.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Canceled prompt, or POST /v1/auth/code/verify with link: webauthn_rejected',
+              name: 'Check your email (link failed)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  email={email}
+                  error="Your passkey did not confirm the sign-in. Enter the code again to sign in with email only."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Passkey: link fails',
+        },
+        {
+          description:
+            'A resent code shows Code sent on the disabled button for 5 seconds, then Resend code again. A hidden status announces the send, and the code field keeps its value.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Resend code, POST /v1/auth/code',
+              name: 'Check your email (resent)',
+              screen: <SignIn {...signIn()} email={email} resend="sent" />,
+            },
+          ],
+          title: 'Email code: resent',
+        },
+        {
+          description:
+            'A refused resend keeps the code step and its code, with the refusal below the code field. The code stays valid, so the field is not marked invalid.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Resend code, POST /v1/auth/code: 429',
+              name: 'Check your email (resend refused)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  email={email}
+                  error="Too many requests. Try again in 1 minute."
+                />
+              ),
+            },
+          ],
+          title: 'Email code: resend refused',
+        },
+        {
+          description:
+            'A failed selection keeps the account step, so the user can choose again. The page does not reload, so an ended session or an expired request shows its refusal in the same place.',
+          nodes: [
+            { detail: 'GET /choose-account?…&sig', name: 'Browser' },
+            {
+              edge: 'POST /v1/authorize/account: 503',
+              name: 'Choose a wallet (failed)',
+              screen: (
+                <ChooseAccount {...chooseAccount()} error={unavailable} />
+              ),
+            },
+            {
+              edge: 'Or: POST /v1/authorize/account: session_required',
+              name: 'Choose a wallet (session ended)',
+              screen: (
+                <ChooseAccount {...chooseAccount()} error="Sign in first." />
+              ),
+            },
+            {
+              edge: 'Or: POST /v1/authorize/account: authorization_expired',
+              name: 'Choose a wallet (request expired)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  error="Expired authorization request: the request from the app is no longer valid. Return to the app, and start again."
+                />
+              ),
+            },
+          ],
+          title: 'Account step: fails',
+        },
+        {
+          description:
+            'A failed decision keeps the approval page, with the refusal below the buttons.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: 'POST /v1/authorize/consent: 503',
+              name: 'Authorize this app (failed)',
+              screen: <Approval {...approval()} error={unavailable} />,
+            },
+          ],
+          title: 'Approval: fails',
+        },
+        {
+          description:
+            'A spent authorization rate limit refuses Approve, as it refuses the grant at sign-in. The approval page stays until the limit resets.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: 'Approve, POST /v1/authorize/consent: 429 rate_limited',
+              name: 'Authorize this app (rate limited)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  error="Too many requests. Try again in 1 minute."
+                />
+              ),
+            },
+          ],
+          title: 'Approval: rate limited',
+        },
+        {
+          description:
+            'A canceled prompt or a refused assertion keeps the approval page, and Approve starts a new passkey step.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: 'Canceled prompt, or POST /v1/authorize/consent with passkey.assertion: webauthn_rejected',
+              name: 'Authorize this app (passkey failed)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  error="The passkey request was canceled. Approve again, or deny the request."
+                />
+              ),
+            },
+          ],
+          title: 'Approval: passkey fails',
+        },
+        {
+          description:
+            'A session that ends before the decision reloads the page, and the loader sends the browser to sign-in with the signed query. A sign-in already spent this request, so the sign-in page shows only the app, and the next sign-in opens the approval page again.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: '200 approval page',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent: session_required, reload, 302 /login?…&sig, GET /login: spent request',
+              name: 'Sign in (app)',
+              screen: <SignIn {...signIn()} request={appRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: session expired',
+        },
+        {
+          description:
+            'A user who was signed in when the request arrived reached the approval page without a sign-in, so the request is unspent. The sign-in after the reload grants the key and returns to the app at once.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: '200 approval page',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent: session_required, reload, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, grants the key',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'after 500 ms, redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval: session expired, unspent',
+        },
+        {
+          description:
+            'A failed decision keeps the device page with the request, and the refusal below the buttons.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'POST /v1/device/approve: 503',
+              name: 'Authorize a device (failed)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  error={unavailable}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+          ],
+          title: 'Device code: decision fails',
+        },
+        {
+          description:
+            'A session that ends before the decision reloads the page, and sign-in returns to the same code. The request is bound to its user, so another user’s sign-in shows the unknown code.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200 device page',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve: session_required, reload, 302 /login?return_to=/device?code',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'Sign-in, /device?code',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+          ],
+          title: 'Device code: session expired',
+        },
+        {
+          description:
+            'A canceled prompt or a refused assertion keeps the device page, and Approve starts a new passkey step.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'Canceled prompt, or POST /v1/device/approve with passkey.assertion: webauthn_rejected',
+              name: 'Authorize a device (passkey failed)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  error="The passkey request was canceled. Approve again, or deny the request."
+                  request={deviceRequest()}
+                />
+              ),
+            },
+          ],
+          title: 'Device code: passkey fails',
+        },
+        {
+          description:
+            'A failed sign-out keeps the account page, with the refusal above the button.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              edge: 'POST /v1/auth/logout: 503',
+              name: 'Your account (sign-out failed)',
+              screen: <Account {...account()} error={unavailable} />,
+            },
+          ],
+          title: 'Sign-out: fails',
+        },
+      ],
+      title: 'Request failures',
+    },
+  ]
+}
+
+namespace styles {
+  export const app = style({ display: 'grid', gap: '12' })
+
+  export const appAddress = style({
+    color: 'gray.900',
+    margin: '0',
+    overflowWrap: 'anywhere',
+    typography: 'copy.13.mono',
+  })
+
+  export const appButton = variants({
+    base: {
+      alignItems: 'center',
+      border: 'none',
+      borderRadius: 'full',
+      cursor: 'pointer',
+      display: 'flex',
+      gap: '12',
+      height: '48',
+      justifyContent: 'center',
+      paddingInline: '24',
+      typography: 'button.16',
+      width: '100% !custom',
+    },
+    variants: {
+      tone: {
+        brand: { backgroundColor: 'red.700', color: 'white' },
+        quiet: { backgroundColor: 'gray.100', color: 'foreground' },
+      },
+    },
+  })
+
+  export const appDescription = style({
+    color: 'gray.900',
+    typography: 'copy.16',
+  })
+
+  // A rule on each side of the label, as the sample app's divider draws it.
+  export const appDivider = style({
+    alignItems: 'center',
+    color: 'gray.900',
+    display: 'flex',
+    gap: '16',
+    margin: '0',
+    typography: 'copy.14',
+    whiteSpace: 'nowrap',
+    '&::before, &::after': {
+      backgroundColor: 'gray.400',
+      content: '""',
+      flexGrow: 1,
+      height: '1',
+    },
+  })
+
+  export const appField = style({ display: 'grid', gap: '8' })
+
+  export const appHeader = style({
+    display: 'grid',
+    gap: '8',
+    marginBottom: '8',
+  })
+
+  export const appInput = style({
+    backgroundColor: 'gray.100',
+    border: 'none',
+    borderRadius: '6',
+    color: 'foreground',
+    height: '48',
+    paddingInline: '16',
+    typography: 'copy.16',
+    width: '100% !custom',
+  })
+
+  export const appLabel = style({ typography: 'label.16' })
+
+  export const appTitle = style({ typography: 'heading.32' })
+
+  export const arrow = style({
+    alignItems: 'center',
+    display: 'grid',
+    flexShrink: 0,
+    gap: '8',
+    justifyItems: 'center',
+    paddingInline: '12',
+    width: '192',
+  })
+
+  export const artboard = style({ display: 'grid', gap: '8', margin: '0' })
+
+  export const canvas = style({
+    backgroundColor: 'gray.100',
+    minHeight: '100dvh !custom',
+    // The canvas grows to its widest flow at the current zoom, so the page scrolls to pan.
+    minWidth: '100% !custom',
+    // Below 64rem, the fixed controls reach over the introduction, so the canvas starts below them.
+    // The space sits outside the zoom, so it holds at every scale.
+    paddingTop: '96',
+    width: 'max-content !custom',
+    '@media (min-width: 64rem)': { paddingTop: '0' },
+  })
+
+  export const code = style({ typography: 'copy.13.mono' })
+
+  export const detail = style({
+    color: 'gray.900',
+    overflowWrap: 'anywhere',
+    typography: 'copy.13.mono',
+  })
+
+  export const edge = style({
+    color: 'gray.900',
+    overflowWrap: 'anywhere',
+    textAlign: 'center',
+    typography: 'copy.13.mono',
+  })
+
+  export const external = variants({
+    base: {
+      backgroundColor: 'background.surface',
+      border: '1px dashed',
+      borderColor: 'gray.500',
+      borderRadius: '8',
+      display: 'grid',
+      flexShrink: 0,
+      gap: '4',
+      padding: '16',
+      width: '224',
+    },
+    variants: {
+      kind: {
+        Entry: { borderColor: 'blue.700', borderStyle: 'solid' },
+        Exit: { borderColor: 'green.700', borderStyle: 'solid' },
+        External: {},
+      },
+    },
+  })
+
+  export const externalName = style({ typography: 'label.14' })
+
+  export const flow = style({ display: 'grid', gap: '16' })
+
+  export const flowDescription = style({
+    color: 'gray.900',
+    typography: 'copy.14',
+  })
+
+  // The flow's text stays at the canvas's left edge while the row scrolls.
+  export const flowHeader = style({
+    display: 'grid',
+    gap: '4',
+    left: '16',
+    maxWidth: 'min(36rem, calc(100vw - 2rem)) !custom',
+    position: 'sticky',
+    '@media (min-width: 48rem)': { left: '48' },
+  })
+
+  export const flowTitle = style({ typography: 'heading.16' })
+
+  // Each frame draws the page's color, so its screen reads as it does in the app.
+  export const frame = style({
+    // oxlint-disable-next-line typescript/restrict-template-expressions -- zyzz reads each token reference at build time, so it stays a direct interpolation.
+    backgroundColor: `light-dark(${vars.color.background.surface}, ${vars.color.background.primary}) !custom`,
+    borderRadius: '8',
+    boxShadow: '6',
+    paddingBlock: '40',
+    paddingInline: '24',
+    width: '384',
+  })
+
+  export const frameLabel = style({ color: 'gray.900', typography: 'label.12' })
+
+  export const head = style({
+    color: 'gray.600',
+    flexShrink: 0,
+    height: '16',
+    width: '16',
+  })
+
+  export const hidden = style({
+    clipPath: 'inset(50%) !custom',
+    height: '1px !custom',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px !custom',
+  })
+
+  export const intro = style({
+    display: 'grid',
+    gap: '8',
+    left: '16',
+    maxWidth: 'min(36rem, calc(100vw - 2rem)) !custom',
+    position: 'sticky',
+    '@media (min-width: 48rem)': { left: '48' },
+  })
+
+  export const kind = style({
+    color: 'gray.900',
+    textTransform: 'uppercase',
+    typography: 'label.12',
+  })
+
+  export const legend = style({
+    backgroundColor: 'background.surface',
+    borderRadius: '12',
+    boxShadow: 'popover',
+    // The list ends above the developer toolbar at the bottom of the viewport.
+    maxHeight: 'calc(100dvh - 9.5rem) !custom',
+    overflowY: 'auto',
+    pointerEvents: 'auto',
+    width: 'min(18rem, calc(100vw - 2rem)) !custom',
+  })
+
+  export const legendFlow = style({
+    borderRadius: '6',
+    color: 'gray.900',
+    display: 'block',
+    paddingBlock: '4',
+    paddingInline: '8',
+    textDecoration: 'none',
+    typography: 'copy.13',
+    '&:hover': { backgroundColor: 'grayAlpha.100', color: 'foreground' },
+  })
+
+  export const legendFlows = style({
+    listStyle: 'none',
+    margin: '0',
+    padding: '0',
+  })
+
+  export const legendList = style({
+    display: 'grid',
+    gap: '12',
+    listStyle: 'none',
+    margin: '0',
+    paddingBlockEnd: '8',
+    paddingBlockStart: '0',
+    paddingInline: '8',
+  })
+
+  export const legendSection = style({
+    borderRadius: '6',
+    color: 'foreground',
+    display: 'block',
+    paddingBlock: '4',
+    paddingInline: '8',
+    textDecoration: 'none',
+    typography: 'label.14',
+    '&:hover': { backgroundColor: 'grayAlpha.100' },
+  })
+
+  export const legendItem = style({ borderBottom: 'none !custom' })
+
+  export const legendTrigger = style({
+    paddingInline: '1rem !custom',
+  })
+
+  export const lede = style({ color: 'gray.900', typography: 'copy.16' })
+
+  export const line = style({
+    backgroundColor: 'gray.600',
+    flexGrow: 1,
+    height: '1',
+  })
+
+  // The zoom controls and the contents stay at the top right, clear of the developer toolbar at the
+  // bottom. Clicks between them reach the canvas.
+  export const panels = style({
+    alignItems: 'flex-end',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8',
+    pointerEvents: 'none',
+    position: 'fixed',
+    right: '16',
+    top: '16',
+    zIndex: 'overlay',
+  })
+
+  export const placeholder = style({ flexShrink: 0 })
+
+  // A box of 100 CSS pixels inside the zoom, whose rect height measures the zoom's geometry.
+  export const probe = style({
+    height: '100px !custom',
+    pointerEvents: 'none',
+    position: 'absolute',
+    visibility: 'hidden',
+    width: '1px !custom',
+  })
+
+  export const row = style({
+    alignItems: 'center',
+    display: 'flex',
+    listStyle: 'none',
+    margin: '0',
+    padding: '0',
+  })
+
+  // The box spans its row, so the observer sees the row's full width at every scroll position.
+  export const rowBox = style({ width: 'max-content !custom' })
+
+  export const section = style({ display: 'grid', gap: '40' })
+
+  export const sectionTitle = style({
+    borderBottom: '1px solid',
+    borderBottomColor: 'grayAlpha.400',
+    paddingBottom: '8',
+    typography: 'heading.20',
+  })
+
+  export const shaft = style({
+    alignItems: 'center',
+    display: 'flex',
+    width: '100% !custom',
+  })
+
+  export const step = style({ alignItems: 'center', display: 'flex' })
+
+  export const title = style({ typography: 'heading.32' })
+
+  export const world = style({
+    display: 'grid',
+    gap: '64',
+    padding: '16',
+    '@media (min-width: 48rem)': { padding: '48' },
+  })
+
+  export const zoom = style({
+    alignItems: 'center',
+    backgroundColor: 'background.surface',
+    borderRadius: 'full',
+    boxShadow: 'popover',
+    display: 'flex',
+    gap: '2',
+    padding: '4',
+    pointerEvents: 'auto',
+  })
+
+  export const zoomIcon = style({
+    flexShrink: '0 !custom',
+    height: '18',
+    width: '18',
+  })
+
+  // A fixed width keeps the zoom buttons in place as the percentage changes.
+  export const zoomLevel = style({
+    fontVariantNumeric: 'tabular-nums',
+    minWidth: '56',
+  })
+}