@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/utilities/i18n-adapter/icu.ts

@@ -0,0 +1,207 @@
+// A small ICU MessageFormat subset, written for this library: plain
+// arguments, number and date arguments, plural (with `=n` exact cases and
+// `#`) and select. Anything it cannot parse makes `formatMessage` fall back
+// to simple `{name}` substitution; it never throws.
+
+export type MessageParams = Record<string, unknown>
+
+type Part =
+  | { k: 'text'; v: string }
+  | { k: 'hash' }
+  | { k: 'arg'; name: string; fmt?: 'number' | 'date' | 'time'; style?: string }
+  | { k: 'choice'; name: string; mode: 'plural' | 'select' | 'selectordinal'; cases: Map<string, Part[]> }
+
+class Cursor {
+  i = 0
+  constructor(readonly src: string) {}
+  get done() {
+    return this.i >= this.src.length
+  }
+  peek() {
+    return this.src[this.i]
+  }
+  skipSpace() {
+    while (!this.done && /\s/.test(this.src[this.i]!)) this.i++
+  }
+  word(): string {
+    this.skipSpace()
+    const start = this.i
+    while (!this.done && !/[\s,{}]/.test(this.src[this.i]!)) this.i++
+    if (start === this.i) throw new SyntaxError(`identifier expected at ${start}`)
+    return this.src.slice(start, this.i)
+  }
+  expect(ch: string) {
+    this.skipSpace()
+    if (this.src[this.i] !== ch) throw new SyntaxError(`"${ch}" expected at ${this.i}`)
+    this.i++
+  }
+}
+
+function parseSequence(c: Cursor, inChoice: boolean): Part[] {
+  const out: Part[] = []
+  let text = ''
+  const flush = () => {
+    if (text) out.push({ k: 'text', v: text })
+    text = ''
+  }
+  while (!c.done) {
+    const ch = c.peek()!
+    if (ch === '}') {
+      if (!inChoice) throw new SyntaxError(`unbalanced "}" at ${c.i}`)
+      break
+    }
+    if (ch === '{') {
+      flush()
+      out.push(parseArgument(c))
+      continue
+    }
+    if (ch === '#' && inChoice) {
+      flush()
+      out.push({ k: 'hash' })
+      c.i++
+      continue
+    }
+    if (ch === "'") {
+      // '' is a literal quote; '{…}' quotes syntax characters.
+      const next = c.src[c.i + 1]
+      if (next === "'") {
+        text += "'"
+        c.i += 2
+        continue
+      }
+      if (next === '{' || next === '}' || next === '#') {
+        const end = c.src.indexOf("'", c.i + 1)
+        if (end > 0) {
+          text += c.src.slice(c.i + 1, end)
+          c.i = end + 1
+          continue
+        }
+      }
+    }
+    text += ch
+    c.i++
+  }
+  flush()
+  return out
+}
+
+function parseArgument(c: Cursor): Part {
+  c.expect('{')
+  const name = c.word()
+  c.skipSpace()
+  if (c.peek() === '}') {
+    c.i++
+    return { k: 'arg', name }
+  }
+  c.expect(',')
+  const kind = c.word()
+  c.skipSpace()
+  if (kind === 'number' || kind === 'date' || kind === 'time') {
+    let style: string | undefined
+    if (c.peek() === ',') {
+      c.i++
+      style = c.word()
+    }
+    c.expect('}')
+    return { k: 'arg', name, fmt: kind, style }
+  }
+  if (kind !== 'plural' && kind !== 'select' && kind !== 'selectordinal') throw new SyntaxError(`unknown argument type "${kind}"`)
+  c.expect(',')
+  const cases = new Map<string, Part[]>()
+  for (;;) {
+    c.skipSpace()
+    if (c.peek() === '}') {
+      c.i++
+      break
+    }
+    if (c.done) throw new SyntaxError('unterminated choice')
+    const key = c.word()
+    if (key.startsWith('offset:')) continue
+    c.expect('{')
+    cases.set(key, parseSequence(c, true))
+    c.expect('}')
+  }
+  if (!cases.has('other')) throw new SyntaxError(`"${name}" needs an "other" case`)
+  return { k: 'choice', name, mode: kind, cases }
+}
+
+const cache = new Map<string, Part[]>()
+
+export function parseMessage(message: string): Part[] {
+  let ast = cache.get(message)
+  if (!ast) {
+    const c = new Cursor(message)
+    ast = parseSequence(c, false)
+    if (!c.done) throw new SyntaxError(`unexpected "${c.peek()}" at ${c.i}`)
+    cache.set(message, ast)
+  }
+  return ast
+}
+
+function asDate(value: unknown): Date | null {
+  const d = value instanceof Date ? value : typeof value === 'string' || typeof value === 'number' ? new Date(value) : null
+  return d && !Number.isNaN(d.getTime()) ? d : null
+}
+
+function render(parts: Part[], params: MessageParams, locale: string, hashValue: number | null): string {
+  let out = ''
+  for (const p of parts) {
+    switch (p.k) {
+      case 'text':
+        out += p.v
+        break
+      case 'hash':
+        out += hashValue === null ? '#' : new Intl.NumberFormat(locale).format(hashValue)
+        break
+      case 'arg': {
+        const v = params[p.name]
+        if (v === undefined) {
+          out += `{${p.name}}`
+        } else if (p.fmt === 'number' && typeof v === 'number') {
+          const opts: Intl.NumberFormatOptions = p.style === 'percent' ? { style: 'percent' } : p.style === 'integer' ? { maximumFractionDigits: 0 } : {}
+          out += new Intl.NumberFormat(locale, opts).format(v)
+        } else if ((p.fmt === 'date' || p.fmt === 'time') && asDate(v)) {
+          const style = (['short', 'medium', 'long', 'full'].includes(p.style ?? '') ? p.style : 'medium') as 'short' | 'medium' | 'long' | 'full'
+          const opts: Intl.DateTimeFormatOptions = p.fmt === 'date' ? { dateStyle: style } : { timeStyle: style }
+          out += new Intl.DateTimeFormat(locale, opts).format(asDate(v)!)
+        } else {
+          out += String(v)
+        }
+        break
+      }
+      case 'choice': {
+        const v = params[p.name]
+        let branch: Part[] | undefined
+        let hash: number | null = hashValue
+        if (p.mode === 'select') {
+          branch = p.cases.get(String(v))
+        } else {
+          const n = Number(v)
+          hash = n
+          branch = p.cases.get(`=${n}`)
+          if (!branch && Number.isFinite(n)) {
+            const rules = new Intl.PluralRules(locale, { type: p.mode === 'selectordinal' ? 'ordinal' : 'cardinal' })
+            branch = p.cases.get(rules.select(n))
+          }
+        }
+        out += render(branch ?? p.cases.get('other')!, params, locale, hash)
+        break
+      }
+    }
+  }
+  return out
+}
+
+/** Plain `{name}` substitution, the fallback for unparsable messages. */
+export function substitute(message: string, params: MessageParams = {}): string {
+  return message.replace(/\{\s*([\w.-]+)\s*\}/g, (whole, key: string) => (params[key] === undefined ? whole : String(params[key])))
+}
+
+/** Formats an ICU message; never throws. */
+export function formatMessage(message: string, params: MessageParams = {}, locale = 'en'): string {
+  try {
+    return render(parseMessage(message), params, locale, null)
+  } catch {
+    return substitute(message, params)
+  }
+}

package/src/utilities/legacy-alias-map/LEGACY-ALIASES.md

@@ -0,0 +1,65 @@
+# Legacy aliases → tokens (decision record)
+
+Spec: `docs/clean-room/specs/wave-4/legacy-alias-map.md`. Decision: **the
+library ships no aliases.** No app imported the older motion aliases or the
+mobile-OS colour constants, so nothing needs to stay compatible. Code being
+ported picks the replacement below. Old export names are listed only in the
+spec inventory; this page names concepts. `legacy-alias-map.test.ts` checks
+that none of these concepts is exported from `src/index.ts`.
+
+## Durations
+
+| Older concept | Use instead |
+|---|---|
+| an "instant" duration alias | no transition at all |
+| a "fast" alias | `duration.ms.quick`, `--ty-dur-quick` |
+| a "normal" alias | `duration.ms.base`, `--ty-dur-base` |
+| a "slow" alias | `base` (the design direction has no longer step) |
+| a "very slow" alias | removed; a long period such as the skeleton pulse is a constant of that component |
+| a separate reduced-motion duration set | MotionFoundation: the tokens collapse to zero under reduced motion |
+
+## Easing
+
+| Older concept | Use instead |
+|---|---|
+| default, in-out or platform-named curves | `ease.css.enter`, `--ty-ease` |
+| deceleration ("out") | `enter` |
+| acceleration ("in") | `exit`, `--ty-ease-out` |
+
+## Presets
+
+| Older concept | Use instead |
+|---|---|
+| spring presets and their reduced copies | removed; `base` duration with `enter` easing |
+| press or tap presets that scale | `motionPresets.press` (opacity only) |
+| card hover lift and card press | removed; hover changes a border token only |
+| slide up / slide right | `slideFromBottom` / `slideFromEnd` |
+| slide down | `fadeIn` |
+| fade with scale, fade only | `fadeIn` |
+| notification banner entrance | owned by Toast |
+| list item entrance, stagger container | `fadeIn`; cascades only through CascadeGrid with `decorativeMotion` |
+| reduced-motion wrapper for animation props | `resolveTransition` |
+| helper that strips motion when reduced | each preset's `reduced` variant (`getPreset`) |
+
+## Gesture constants
+
+| Older concept | Use instead |
+|---|---|
+| swipe threshold and drag limits in pixels | SwipeRow `fullSwipeFraction` and `revealFraction` (fractions of the row width) |
+| page-indicator dot variant | PageDots: active dot `--ty-accent`, inactive `--ty-line-strong`, shape change in `quick` |
+
+## Mobile-OS system colours
+
+Not carried over. Map by meaning:
+
+| Meaning | Token |
+|---|---|
+| interactive blue | `--ty-accent` (the only interactive colour) |
+| green | success semantic colour (`--ty-success`) |
+| red | error semantic colour (`--ty-danger`) |
+| orange, yellow | pending semantic colour (`--ty-warning`) |
+| gray ramp | `--ty-ink-3`, `--ty-line`, `--ty-line-strong`, `--ty-surface-sunken` by role |
+| purple, pink, teal, indigo, mint, cyan, brown | `--ty-categorical-*`, only in maps, charts, legends and graph nodes |
+
+The only addition arising from wave 4 is MotionFoundation's `decorativeMotion`
+flag (default false), read by CascadeGrid.

package/src/utilities/legacy-alias-map/legacy-alias-map.test.ts

@@ -0,0 +1,57 @@
+// Decision record check (spec: wave-4/legacy-alias-map.md): no legacy alias
+// concept is exported, motion exposes only the §2.7 steps plus the
+// decorativeMotion flag, and SwipeRow has no pixel-valued properties.
+import { readFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import * as library from '../../index'
+import { duration, ease } from '../motion-foundation/motion'
+
+const here = dirname(fileURLToPath(import.meta.url))
+
+/** Concepts, not names: duration aliases, spring and stagger presets, platform colour sets, lift presets. */
+const LEGACY_CONCEPTS: RegExp[] = [
+  /spring/i,
+  /stagger/i,
+  /^durations(Reduced)?$/i,
+  /^easings$/i,
+  /reduced(Durations|Presets|Variants)/i,
+  /^ios/i,
+  /systemColou?rs?$/i,
+  /^card(Hover|Press|Lift)/i,
+  /^(createMotionProps|getVariants)$/i,
+  /^pageControl/i,
+  /^swipe(Threshold|Constants?|Limits?)$/i,
+  /notificationBanner/i,
+  /^(slideUp|slideDown|slideRight|fadeScale|buttonPress)$/i,
+]
+
+describe('LegacyAliasMap', () => {
+  it('exports none of the old alias concepts', () => {
+    const offenders = Object.keys(library).filter((name) => LEGACY_CONCEPTS.some((re) => re.test(name)))
+    expect(offenders).toEqual([])
+  })
+
+  it('motion exposes exactly the §2.7 tokens plus decorativeMotion', () => {
+    expect(Object.keys(duration.ms)).toEqual(['instant', 'quick', 'base'])
+    expect(Object.keys(ease.points)).toEqual(['enter', 'exit'])
+    expect('DECORATIVE_MOTION_DEFAULT' in library ? (library as Record<string, unknown>).DECORATIVE_MOTION_DEFAULT : false).toBe(false)
+  })
+
+  it('SwipeRow has no property expressed in pixels', () => {
+    const source = readFileSync(join(here, '../../components/swipe-row/SwipeRow.tsx'), 'utf8')
+    const props = /export interface SwipeRowProps \{([\s\S]*?)\n\}/.exec(source)![1]!
+    expect(props).not.toMatch(/\b\w*(Px|Pixels?|threshold)\??:/i)
+    expect(props).toMatch(/fullSwipeFraction\?: number/)
+    expect(props).toMatch(/revealFraction\?: number/)
+  })
+
+  it('the decision record names concepts, not old export names', () => {
+    const doc = readFileSync(join(here, 'LEGACY-ALIASES.md'), 'utf8')
+    expect(doc).toMatch(/ships no aliases/)
+    // No camelCase export-like identifiers other than the new API's.
+    const identifiers = [...doc.matchAll(/`([a-z]+[A-Z]\w*)`/g)].map((m) => m[1])
+    expect(identifiers.every((id) => ['fullSwipeFraction', 'revealFraction', 'resolveTransition', 'decorativeMotion', 'slideFromBottom', 'slideFromEnd', 'fadeIn', 'getPreset', 'motionPresets'].some((ok) => id!.startsWith(ok)))).toBe(true)
+  })
+})

package/src/utilities/motion-foundation/motion.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react'
+import { values } from '@datatechsolutions/tympan-tokens/values'
+import { describe, expect, it } from 'vitest'
+import { setMedia } from '../../../test/media'
+import * as motion from './motion'
+
+describe('MotionFoundation', () => {
+  it('collapses a transition to zero under reduced motion', () => {
+    setMedia({ reducedMotion: true })
+    const t = motion.resolveTransition({ durationMs: 240, ease: motion.ease.points.enter, delayMs: 30 })
+    expect(t.durationMs).toBe(0)
+    expect(t.delayMs).toBe(0)
+    setMedia({ reducedMotion: false })
+    expect(motion.resolveTransition({ durationMs: 240, ease: motion.ease.points.enter }).durationMs).toBe(240)
+  })
+
+  it('answers false without a window-level media query API', () => {
+    const saved = window.matchMedia
+    // Simulate a server-like environment for the query.
+    Object.defineProperty(window, 'matchMedia', { configurable: true, writable: true, value: undefined })
+    expect(motion.prefersReducedMotion()).toBe(false)
+    Object.defineProperty(window, 'matchMedia', { configurable: true, writable: true, value: saved })
+  })
+
+  it('keeps every JS token equal to its CSS counterpart', () => {
+    const base = values.base
+    expect(`${motion.duration.ms.instant}ms`).toBe(base['--ty-dur-instant'])
+    expect(`${motion.duration.ms.quick}ms`).toBe(base['--ty-dur-quick'])
+    expect(`${motion.duration.ms.base}ms`).toBe(base['--ty-dur-base'])
+    const norm = (s: string) => s.replace(/\s+/g, '')
+    expect(norm(motion.ease.css.enter)).toBe(norm(base['--ty-ease']))
+    expect(norm(motion.ease.css.exit)).toBe(norm(base['--ty-ease-out']))
+    expect(motion.duration.s.base).toBe(0.24)
+  })
+
+  it('has reduced preset variants without translate or scale', () => {
+    for (const entry of Object.values(motion.motionPresets)) {
+      const text = JSON.stringify(entry.reduced)
+      expect(text).not.toMatch(/translate|scale/)
+      expect(entry.reduced.transition.durationMs).toBe(0)
+    }
+    expect(JSON.stringify(motion.motionPresets)).not.toMatch(/scale|spring/)
+  })
+
+  it('exposes exactly the §2.7 steps plus the decorativeMotion flag', () => {
+    expect(Object.keys(motion.duration.ms)).toEqual(['instant', 'quick', 'base'])
+    expect(Object.keys(motion.ease.points)).toEqual(['enter', 'exit'])
+    expect(motion.DECORATIVE_MOTION_DEFAULT).toBe(false)
+    expect(Object.keys(motion).some((k) => /spring|stagger/i.test(k))).toBe(false)
+  })
+
+  it('reads the decorativeMotion switch from context', () => {
+    function Probe() {
+      return <output>{String(motion.useDecorativeMotion())}</output>
+    }
+    const { rerender } = render(<Probe />)
+    expect(screen.getByRole('status')).toHaveTextContent('false')
+    rerender(
+      <motion.DecorativeMotion enabled>
+        <Probe />
+      </motion.DecorativeMotion>,
+    )
+    expect(screen.getByRole('status')).toHaveTextContent('true')
+  })
+})
+
+describe('motion presets in right-to-left pages', () => {
+  it('slideFromEnd enters from the inline end in both directions', async () => {
+    const { getPreset } = await import('./motion')
+    const ltr = getPreset('slideFromEnd', false, 'ltr')
+    const rtl = getPreset('slideFromEnd', false, 'rtl')
+    expect(ltr.from.translate).toBe('var(--ty-motion-end-offset, 16px) 0')
+    expect(rtl.from.translate).toBe('calc(-1 * var(--ty-motion-end-offset, 16px)) 0')
+    expect(getPreset('slideFromBottom', false, 'rtl').from.translate).toBe('0 16px')
+  })
+})

package/src/utilities/motion-foundation/motion.tsx

@@ -0,0 +1,119 @@
+// MotionFoundation (spec: wave-2/motion-foundation.md; design direction §2.7).
+// The token values mirror the --ty-dur-* and --ty-ease* custom properties of
+// @datatechsolutions/tympan-tokens; a test keeps both in step. There are deliberately no spring
+// and no stagger tokens.
+import { createContext, useContext, type ReactNode } from 'react'
+import { prefersReducedMotion as queryReducedMotion } from '../../internal/media'
+
+type Bezier = readonly [number, number, number, number]
+
+const MS = { instant: 90, quick: 150, base: 240 } as const
+const CURVES: { enter: Bezier; exit: Bezier } = { enter: [0.2, 0, 0, 1], exit: [0.4, 0, 1, 1] }
+
+export type DurationStep = keyof typeof MS
+export type EaseStep = keyof typeof CURVES
+
+const bezierCss = (b: Bezier) => `cubic-bezier(${b.join(', ')})`
+
+/** Durations of §2.7 in milliseconds, seconds and as the CSS custom property. */
+export const duration = {
+  ms: MS,
+  s: { instant: MS.instant / 1000, quick: MS.quick / 1000, base: MS.base / 1000 },
+  cssVar: { instant: 'var(--ty-dur-instant)', quick: 'var(--ty-dur-quick)', base: 'var(--ty-dur-base)' },
+} as const
+
+/** Easing curves of §2.7 as control points, CSS strings and custom properties. */
+export const ease = {
+  points: CURVES,
+  css: { enter: bezierCss(CURVES.enter), exit: bezierCss(CURVES.exit) },
+  cssVar: { enter: 'var(--ty-ease)', exit: 'var(--ty-ease-out)' },
+} as const
+
+/** Transition description understood by the presets and `resolveTransition`. */
+export interface MotionTransition {
+  durationMs: number
+  ease: Bezier
+  delayMs?: number
+}
+
+/** A preset: start and end styles limited to opacity and translate. */
+export interface MotionPreset {
+  from: { opacity?: number; translate?: string }
+  to: { opacity?: number; translate?: string }
+  transition: MotionTransition
+}
+
+/** Safe on the server (returns false). */
+export function prefersReducedMotion(): boolean {
+  try {
+    return queryReducedMotion()
+  } catch {
+    return false
+  }
+}
+
+/** Collapses a transition to zero duration (and no delay) under reduced motion. */
+export function resolveTransition<T extends MotionTransition>(transition: T, reduced: boolean = prefersReducedMotion()): T {
+  return reduced ? { ...transition, durationMs: 0, delayMs: 0 } : transition
+}
+
+function preset(from: MotionPreset['from'], step: DurationStep, curve: EaseStep = 'enter'): MotionPreset {
+  return { from, to: { opacity: 1, translate: from.translate ? '0 0' : undefined }, transition: { durationMs: MS[step], ease: CURVES[curve] } }
+}
+
+const opacityOnly = (p: MotionPreset): MotionPreset => ({
+  from: { opacity: p.from.opacity ?? 1 },
+  to: { opacity: p.to.opacity ?? 1 },
+  transition: { ...p.transition, durationMs: 0 },
+})
+
+const fadeIn = preset({ opacity: 0 }, 'quick')
+const slideFromBottom = preset({ opacity: 0, translate: '0 16px' }, 'base')
+const slideFromEnd = preset({ opacity: 0, translate: 'var(--ty-motion-end-offset, 16px) 0' }, 'base')
+const press: MotionPreset = { from: { opacity: 1 }, to: { opacity: 0.85 }, transition: { durationMs: MS.instant, ease: CURVES.enter } }
+
+/** Named presets; each `reduced` twin is opacity-only and instant. */
+export const motionPresets = {
+  fadeIn: { normal: fadeIn, reduced: opacityOnly(fadeIn) },
+  slideFromBottom: { normal: slideFromBottom, reduced: opacityOnly(slideFromBottom) },
+  slideFromEnd: { normal: slideFromEnd, reduced: opacityOnly(slideFromEnd) },
+  press: { normal: press, reduced: { ...press, transition: { ...press.transition, durationMs: 0 } } },
+} as const
+
+export type MotionPresetName = keyof typeof motionPresets
+
+/** The same preset seen from a right-to-left page: offsets along the inline axis change sign. */
+function mirrorInline(p: MotionPreset): MotionPreset {
+  const flip = (t?: string) => {
+    if (!t) return t
+    const [inline, ...rest] = t.trim().split(/\s+(?![^(]*\))/)
+    return inline === '0' ? t : [`calc(-1 * ${inline})`, ...rest].join(' ')
+  }
+  return { ...p, from: { ...p.from, translate: flip(p.from.translate) }, to: { ...p.to, translate: flip(p.to.translate) } }
+}
+
+/**
+ * Picks the preset variant for the current (or given) reduced-motion state and
+ * reading direction: `slideFromEnd` slides in from the inline end in both
+ * left-to-right and right-to-left pages.
+ */
+export function getPreset(name: MotionPresetName, reduced: boolean = prefersReducedMotion(), direction: 'ltr' | 'rtl' = 'ltr'): MotionPreset {
+  const entry = motionPresets[name]
+  const chosen = reduced ? entry.reduced : entry.normal
+  return direction === 'rtl' ? mirrorInline(chosen) : chosen
+}
+
+/* The decorativeMotion switch (wave 4): off unless a host opts in. */
+const DecorativeMotionContext = createContext(false)
+
+/** Library default of the `decorativeMotion` flag. */
+export const DECORATIVE_MOTION_DEFAULT = false
+
+/** Opts a subtree in (or out) of decorative motion such as CascadeGrid. */
+export function DecorativeMotion({ enabled, children }: { enabled: boolean; children: ReactNode }) {
+  return <DecorativeMotionContext.Provider value={enabled}>{children}</DecorativeMotionContext.Provider>
+}
+
+export function useDecorativeMotion(): boolean {
+  return useContext(DecorativeMotionContext)
+}

package/src/utilities/router-adapter/Routing.test.tsx

@@ -0,0 +1,68 @@
+import { render, renderHook, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { forwardRef, type ReactNode } from 'react'
+import { Link as AriaLink } from 'react-aria-components'
+import { describe, expect, it, vi } from 'vitest'
+import { PlainAnchor, RoutingProvider, useCurrentPath, useRouteAnchor, useRouting, useVisitKey, type AnchorProps, type RouteHost } from './Routing'
+
+function makeHost(patch: Partial<RouteHost> = {}): RouteHost {
+  const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>((p, ref) => <a ref={ref} data-router="yes" {...p} />)
+  return { path: '/projects', go: vi.fn(), step: vi.fn(), warm: vi.fn(), Anchor, ...patch }
+}
+
+const within = (host: RouteHost) =>
+  function W({ children }: { children: ReactNode }) {
+    return <RoutingProvider host={host}>{children}</RoutingProvider>
+  }
+
+describe('Routing', () => {
+  it('open goes through the host', () => {
+    const host = makeHost()
+    const { result } = renderHook(() => useRouting(), { wrapper: within(host) })
+    result.current.open('/x')
+    expect(host.go).toHaveBeenCalledWith('/x', undefined)
+    result.current.swap('/y')
+    expect(host.go).toHaveBeenLastCalledWith('/y', { swap: true })
+    result.current.goBack()
+    result.current.goOn()
+    expect(host.step).toHaveBeenNthCalledWith(1, -1)
+    expect(host.step).toHaveBeenNthCalledWith(2, 1)
+    result.current.reload()
+    expect(host.go).toHaveBeenLastCalledWith('/projects', { swap: true })
+    result.current.warm('/z')
+    expect(host.warm).toHaveBeenCalledWith('/z')
+  })
+
+  it('falls back to the browser path and a plain anchor', () => {
+    const { result } = renderHook(() => ({ path: useCurrentPath(), Anchor: useRouteAnchor() }))
+    expect(result.current.path).toBe(window.location.pathname)
+    expect(result.current.Anchor).toBe(PlainAnchor)
+    const A = result.current.Anchor
+    render(<A href="/a">A</A>)
+    expect(screen.getByRole('link', { name: 'A' })).toHaveAttribute('href', '/a')
+  })
+
+  it('uses the path as visit key when the host has none', () => {
+    const { result } = renderHook(() => useVisitKey(), { wrapper: within(makeHost()) })
+    expect(result.current).toBe('/projects')
+    const keyed = renderHook(() => useVisitKey(), { wrapper: within(makeHost({ visit: 'k7' })) })
+    expect(keyed.result.current).toBe('k7')
+  })
+
+  it('routes React Aria links through the host', async () => {
+    const host = makeHost()
+    render(
+      <RoutingProvider host={host}>
+        <AriaLink href="/sources">Sources</AriaLink>
+      </RoutingProvider>,
+    )
+    await userEvent.click(screen.getByRole('link', { name: 'Sources' }))
+    expect(host.go).toHaveBeenCalledWith('/sources', undefined)
+  })
+
+  it('exposes the host anchor component', () => {
+    const host = makeHost()
+    const { result } = renderHook(() => useRouteAnchor(), { wrapper: within(host) })
+    expect(result.current).toBe(host.Anchor)
+  })
+})