@master/internal-site 0.0.0-stage → 0.1.1

package/src/astro/module-id.ts

@@ -0,0 +1,4 @@
+/** A Vite module id without its query or hash. */
+export function cleanId(id: string) {
+  return id.replace(/[?#].*$/, '')
+}

package/src/astro/propagated-assets.ts

@@ -0,0 +1,29 @@
+/**
+ * Astro scopes stylesheets of modules imported with `?astroPropagatedAssets` to
+ * the render that uses them, as it does for content collection entries. Every
+ * page of the `[...path]` route would otherwise receive the CSS of all content.
+ * Keep this private Astro contract here: import modules only through `getMod()`.
+ */
+export interface PropagatedModule<T> {
+  getMod(): Promise<T>
+  collectedLinks: string[]
+  /** Built CSS text, or dev-time `{ id, content }` records. */
+  collectedStyles: (string | { id: string, content: string })[]
+}
+
+export interface PageAssets {
+  links: string[]
+  styles: string[]
+}
+
+export const propagatedAssetsQuery = '?astroPropagatedAssets'
+
+export function mergeAssets(...modules: PropagatedModule<unknown>[]): PageAssets {
+  const links = new Set<string>()
+  const styles = new Set<string>()
+  for (const module of modules) {
+    module.collectedLinks.forEach((link) => links.add(link))
+    module.collectedStyles.forEach((style) => styles.add(typeof style === 'string' ? style : style.content))
+  }
+  return { links: [...links], styles: [...styles] }
+}

package/src/astro/route-paths.ts

@@ -0,0 +1,78 @@
+import type { PageParams } from '../docs-shell/types/Props'
+
+export type Section = string
+export interface RouteOptions {
+  contentRoot?: string
+  defaultLocale?: string
+  locales?: readonly string[]
+  sectionLocales?: Record<string, readonly string[]>
+  availableLocales?: Record<string, readonly string[]>
+}
+export type RouteParams = Record<string, string | string[]>
+export interface RouteProps {
+  file: string
+  locale: PageParams['locale']
+  params: RouteParams
+}
+export interface ParamsModule {
+  generateStaticParams(): RouteParams[] | Promise<RouteParams[]>
+}
+type Segment = { kind: 'static', value: string } | { kind: 'param' | 'rest', name: string }
+
+export function directoriesOf(file: string, contentRoot = '/content/') {
+  return file.slice(contentRoot.length).split('/').slice(0, -1)
+}
+
+function segmentsOf(file: string, contentRoot = '/content/'): Segment[] {
+  if (directoriesOf(file, contentRoot).at(-1) === 'index') throw new Error(`${file}: \`index\` is not a valid route segment`)
+  return directoriesOf(file, contentRoot)
+    .filter(directory => !/^\(.+\)$/.test(directory))
+    .map(directory => {
+      const rest = directory.match(/^\[\.\.\.(\w+)\]$/)
+      if (rest) return { kind: 'rest', name: rest[1] }
+      const param = directory.match(/^\[(\w+)\]$/)
+      if (param) return { kind: 'param', name: param[1] }
+      return { kind: 'static', value: directory }
+    })
+}
+
+export function sectionOf(file: string, contentRoot = '/content/'): Section {
+  const first = segmentsOf(file, contentRoot)[0]
+  return first?.kind === 'static' ? first.value as Section : 'home'
+}
+
+export function localesOf(section: Section, options: RouteOptions = {}): readonly string[] {
+  return options.sectionLocales?.[section] ?? options.locales ?? ['en']
+}
+
+export function localizePathname(pathname: string, locale: string, defaultLocale = 'en') {
+  return locale === defaultLocale ? pathname : `/${locale}${pathname === '/' ? '' : pathname}`
+}
+
+function pathnameOf(segments: Segment[], params: RouteParams) {
+  return '/' + segments.map(segment => {
+    if (segment.kind === 'static') return segment.value
+    const value = params[segment.name]
+    if (value === undefined) throw new Error(`Missing route parameter ${segment.name}`)
+    return Array.isArray(value) ? value.join('/') : value
+  }).join('/')
+}
+
+/** Enumerate filenames and lightweight params providers without evaluating page modules. */
+export async function createStaticPaths(files: string[], providers: Record<string, () => Promise<ParamsModule>>, options: RouteOptions = {}) {
+  const paths: { params: { path: string | undefined }, props: RouteProps }[] = []
+  for (const file of [...files].sort()) {
+    const segments = segmentsOf(file, options.contentRoot)
+    const dynamic = segments.some(segment => segment.kind !== 'static')
+    const providerFile = file.replace(/page\.astro$/, 'params.ts')
+    if (dynamic && !providers[providerFile]) throw new Error(`${file}: dynamic routes require a sibling params.ts`)
+    const paramSets = dynamic ? await (await providers[providerFile]()).generateStaticParams() : [{}]
+    for (const params of paramSets) {
+      for (const locale of options.availableLocales?.[file] ?? localesOf(sectionOf(file, options.contentRoot), options)) {
+        const pathname = localizePathname(pathnameOf(segments, params), locale, options.defaultLocale)
+        paths.push({ params: { path: pathname.slice(1) || undefined }, props: { file, locale: locale as RouteProps['locale'], params } })
+      }
+    }
+  }
+  return paths
+}

package/src/astro/routes.template.ts

@@ -0,0 +1,110 @@
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
+import { mergeAssets, type PageAssets, type PropagatedModule } from '@master/internal-site/astro/propagated-assets'
+import { createStaticPaths, directoriesOf, localesOf, sectionOf, type ParamsModule, type RouteProps, type Section } from '@master/internal-site/astro/route-paths'
+import type { Metadata } from '@master/internal-site/types/Metadata'
+import type { Props } from '@master/internal-site/types/Props'
+
+export { localizePathname, sectionOf } from '@master/internal-site/astro/route-paths'
+export type { RouteProps, Section } from '@master/internal-site/astro/route-paths'
+
+/**
+ * Content routes follow `content/<url>/page.astro`. A page component receives {@link Props}
+ * and may export `metadata` or `generateMetadata` from its frontmatter. Dynamic routes
+ * enumerate params through a lightweight sibling `params.ts`. `layout.astro` modules wrap
+ * nested pages through their default slot; `(group)` directories add no URL segment.
+ */
+interface PageModule {
+  default?: AstroComponentFactory
+  metadata?: Partial<Metadata>
+  generateMetadata?: (props: Pick<Props, 'params'>) => Promise<Partial<Metadata>> | Partial<Metadata>
+  /** `false` for pages that render no document surfaces, code or prose, such as indexes. */
+  documentStyles?: boolean
+}
+
+interface LayoutModule {
+  default: AstroComponentFactory
+}
+
+interface SectionModule {
+  default: AstroComponentFactory
+  bodyClass?: string
+  bare?: boolean
+}
+
+type Propagated<T> = () => Promise<PropagatedModule<T>>
+
+const contentRoot = '__CONTENT_PREFIX__/'
+const routeOptions = __ROUTE_OPTIONS__
+// Literal globs: see astro/propagated-assets for why modules load through this query.
+const pageModules: Record<string, Propagated<PageModule>> = { ...import.meta.glob<PropagatedModule<PageModule>>('__CONTENT_PREFIX__/**/page.astro', { query: '?astroPropagatedAssets', import: 'default' }), ...__GENERATED_PAGES__ }
+const paramsModules = import.meta.glob<ParamsModule>('__CONTENT_PREFIX__/**/params.ts')
+const layoutModules = import.meta.glob<PropagatedModule<LayoutModule>>('__CONTENT_PREFIX__/**/layout.astro', { query: '?astroPropagatedAssets', import: 'default' })
+const sectionModules = __SECTION_IMPORTS__
+const siteStyles = __SITE_IMPORT__
+const interfaceStyles = __INTERFACE_IMPORT__
+const documentStyles = __DOCUMENTS_IMPORT__
+const sectionShells: Record<Section, string> = __SECTION_SHELLS__
+
+async function loadPropagated<T>(modules: Record<string, Propagated<T>>, file: string) {
+  const load = modules[file]
+  if (!load) throw new Error(`Unknown module ${file}`)
+  const propagated = await load()
+  return { propagated, module: await propagated.getMod() }
+}
+
+/** Every content page × locale, as Astro `getStaticPaths()` entries. */
+export async function getStaticPaths() {
+  return createStaticPaths(Object.keys(pageModules), paramsModules, routeOptions)
+}
+
+export interface LoadedRoute {
+  metadata: Partial<Metadata>
+  /** Components from the outermost (the section shell) to the page; each wraps the next in its default slot. */
+  layers: AstroComponentFactory[]
+  props: Props
+  assets: PageAssets
+  bodyClass?: string
+  bare?: boolean
+  locales: readonly string[]
+}
+
+export async function loadRoute({ file, locale, params }: RouteProps): Promise<LoadedRoute> {
+  const page = await loadPropagated(pageModules, file)
+  const module = page.module
+  if (!module.default) throw new Error(`${file} must export a page component`)
+  const props: Props = { params: { ...params, locale } }
+  const metadata = (module.generateMetadata ? await module.generateMetadata(props) : module.metadata) ?? {}
+  const layers = [module.default]
+  const propagated: PropagatedModule<unknown>[] = [page.propagated]
+  const directories = directoriesOf(file, contentRoot)
+  for (let depth = directories.length; depth > 0; depth--) {
+    const layoutFile = `${contentRoot}${directories.slice(0, depth).join('/')}/layout.astro`
+    if (!layoutModules[layoutFile]) continue
+    const layout = await loadPropagated(layoutModules, layoutFile)
+    layers.unshift(layout.module.default)
+    propagated.unshift(layout.propagated)
+  }
+  const route = await withSection(sectionOf(file, contentRoot), metadata, layers, props, propagated, module.documentStyles)
+  route.locales = routeOptions.availableLocales[file] ?? route.locales
+  return route
+}
+
+/** Wrap a page in its section shell, e.g. for routes outside `content/` such as 404. */
+export async function withSection(sectionName: Section, metadata: Partial<Metadata>, layers: AstroComponentFactory[], props: Props, propagated: PropagatedModule<unknown>[] = [], documents = true): Promise<LoadedRoute> {
+  const section = await loadPropagated(sectionModules, `/sections/${sectionShells[sectionName]}.astro`)
+  // Links within one asset boundary are unordered, so the foundation, the shell interface and
+  // document styles each form their own boundary, in that order. Bare sections
+  // share the configured foundation but omit the interface and document chrome.
+  const site = [await siteStyles['/styles/site.ts']()]
+  if (!section.module.bare) site.push(await interfaceStyles['/styles/interface.ts']())
+  const document = section.module.bare || !documents ? [] : [await documentStyles['/styles/documents.ts']()]
+  return {
+    metadata,
+    layers: [section.module.default, ...layers],
+    props,
+    assets: mergeAssets(...site, ...document, section.propagated, ...propagated),
+    bodyClass: section.module.bodyClass,
+    bare: section.module.bare,
+    locales: localesOf(sectionName, routeOptions)
+  }
+}

package/src/astro/server-styles.ts

@@ -0,0 +1,26 @@
+import { isCSSRequest, type Plugin } from 'vite'
+import { cleanId } from './module-id'
+
+const empty = '\0site-server-style'
+
+/**
+ * Pages link the stylesheets of every module they render on the server. Hydrated
+ * modules repeat those imports in the browser bundle, where Astro would attach
+ * them to every page of the route, so the client build omits site stylesheets.
+ * Development keeps them for Vite's CSS hot updates.
+ */
+export default function serverStyles(roots: string[]): Plugin {
+  return {
+    name: 'master-css-site:server-styles',
+    enforce: 'pre',
+    apply: 'build',
+    applyToEnvironment: (environment) => environment.config.consumer === 'client',
+    resolveId(source, importer) {
+      if (!importer || importer.startsWith('\0') || !roots.some(root => cleanId(importer).startsWith(root.replace(/\/$/, '') + '/')) || isCSSRequest(cleanId(importer))) return
+      if (isCSSRequest(source) && !/[?&](?:inline|raw|url)\b/.test(source)) return empty
+    },
+    load(id) {
+      if (id === empty) return 'export default undefined'
+    }
+  }
+}

package/src/astro/site-context.ts

@@ -0,0 +1,27 @@
+import config from 'virtual:master-site/config'
+import { createSite, type Site, type SiteContextValue } from '../docs-shell/site'
+
+export function localeOfPathname(pathname: string): string {
+  const segment = pathname.split('/')[1]
+  return config.i18n.locales.includes(segment) ? segment : config.i18n.defaultLocale
+}
+
+export function canonicalPathname(pathname: string) {
+  const normalized = decodeURI(pathname).replace(/\.html$/, '').replace(/\/index$/, '/').replace(/(.)\/$/, '$1')
+  const locale = localeOfPathname(normalized)
+  if (locale !== config.i18n.defaultLocale) return normalized
+  const prefix = `/${config.i18n.defaultLocale}`
+  return normalized === prefix ? '/' : normalized.startsWith(prefix + '/') ? normalized.slice(prefix.length) : normalized || '/'
+}
+
+/** Fresh context per render: different sites/locales never share mutable page state. */
+export function siteContextOf(url: URL): SiteContextValue {
+  const pathname = canonicalPathname(url.pathname)
+  const locale = localeOfPathname(pathname)
+  const { translations, ...i18n } = config.i18n
+  return { locale, pathname, translations: translations[locale] ?? {}, i18n }
+}
+
+export function siteOf(astro: { url: URL }): Site {
+  return createSite(siteContextOf(astro.url))
+}

package/src/astro/source-url.ts

@@ -0,0 +1,22 @@
+import { pathToFileURL } from 'node:url'
+import type { Plugin } from 'vite'
+import { cleanId } from './module-id'
+
+const sourcePattern = /\.(?:[cm]?[jt]sx?|mdx|astro|svelte)$/
+
+/**
+ * Server chunks only run on the machine that builds the static site. Keep each
+ * module's source `import.meta.url` so site code and bundled dependencies resolve
+ * repository files, data files and native bindings relative to their sources.
+ */
+export default function sourceURL(): Plugin {
+  return {
+    name: 'master-css-site:source-url',
+    applyToEnvironment: (environment) => environment.config.consumer === 'server',
+    transform(code, id) {
+      const file = cleanId(id)
+      if (id.startsWith('\0') || !file.startsWith('/') || !sourcePattern.test(file) || !code.includes('import.meta.url')) return
+      return { code: code.replaceAll('import.meta.url', JSON.stringify(pathToFileURL(file).href)), map: null }
+    }
+  }
+}

package/src/astro/svelte-renderer.ts

@@ -0,0 +1,45 @@
+import { createRawSnippet } from 'svelte'
+import { render } from 'svelte/server'
+import svelteRenderer from '@astrojs/svelte/server.js'
+import type { AstroComponentMetadata, NamedSSRLoadedRendererValue, SSRResult } from 'astro'
+import { siteContextKey } from '../docs-shell/site'
+import { siteContextOf } from './site-context'
+
+type RenderContext = { result: SSRResult }
+
+const ids = new WeakMap<SSRResult, number>()
+
+function escapeSlotName(name: string) {
+  return name.replace(/[&"<>]/g, (character) => `&#${character.charCodeAt(0)};`)
+}
+
+/**
+ * `@astrojs/svelte` rendering with the page's site context, so every Svelte root can call
+ * `getSite()`. Astro slots arrive as snippets: the default slot as `children`, named slots by name.
+ */
+async function renderToStaticMarkup(this: RenderContext, Component: any, props: Record<string, any>, slotted: Record<string, string>, metadata?: AstroComponentMetadata) {
+  const tagName = metadata?.hydrate ? 'astro-slot' : 'astro-static-slot'
+  const snippets: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(slotted)) {
+    const name = key === 'default' ? '' : ` name="${escapeSlotName(key)}"`
+    snippets[key === 'default' ? 'children' : key] = createRawSnippet(() => ({ render: () => `<${tagName}${name}>${value}</${tagName}>` }))
+  }
+  const index = ids.get(this.result) ?? 0
+  ids.set(this.result, index + 1)
+  const result = await render(Component, {
+    props: { ...props, ...snippets },
+    context: new Map([[siteContextKey, siteContextOf(new URL(this.result.request.url))]]),
+    idPrefix: `s${index}`
+  })
+  // Svelte renders nullish class values as empty attributes.
+  return { html: result.body.replace(/\s+class=""/g, '') }
+}
+
+const renderer: NamedSSRLoadedRendererValue = {
+  name: '@master/internal-site:svelte',
+  check: svelteRenderer.check,
+  renderToStaticMarkup,
+  supportsAstroStaticSlot: true
+}
+
+export default renderer

package/src/astro/svg-markup.ts

@@ -0,0 +1,23 @@
+import { readFile } from 'node:fs/promises'
+import { optimize, type Config } from 'svgo'
+import type { Plugin } from 'vite'
+import svgoConfig from '../docs-shell/common/svgo.config.js'
+import { cleanId } from './module-id'
+
+/**
+ * `.svg?raw` imports give Svelte components inline SVG markup. Optimize it like Astro's SVG
+ * components, with the same configuration, so both render the same markup and file-prefixed ids.
+ */
+export default function svgMarkup(): Plugin {
+  return {
+    name: 'master-css-site:svg-markup',
+    enforce: 'pre',
+    async load(id) {
+      if (!/\.svg\?raw$/.test(id)) return
+      const file = cleanId(id)
+      this.addWatchFile(file)
+      const { data } = optimize(await readFile(file, 'utf8'), { ...(svgoConfig as Config), path: file })
+      return `export default ${JSON.stringify(data)}`
+    }
+  }
+}

package/src/benchmarks/BenchmarkBarRows.astro

@@ -0,0 +1,34 @@
+---
+import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/benchmarks.css'
+import { siteOf } from '@master/internal-site/astro/site-context'
+import { uniqueId } from '@master/internal-site/utils/unique-id'
+import type { BenchmarkBarsProps } from '@master/internal-site/benchmarks/types.ts'
+import { clampPercent, formatMetricValue } from '@master/internal-site/benchmarks/utils.ts'
+
+type Props = BenchmarkBarsProps
+
+/** Rows of one measurement: every bar is named by its row, so bars stay ink. */
+const { items, max, unit, valueFormatter } = Astro.props
+const { t } = siteOf(Astro)
+const labelPrefix = uniqueId(Astro, 'benchmark-bars')
+const resolvedMax = max ?? Math.max(0, ...items.map((item) => item.max ?? item.value))
+---
+
+{items.map((item, index) => {
+  const labelId = `${labelPrefix}-label-${index}`
+  const valueId = `${labelPrefix}-value-${index}`
+  const itemMax = item.max ?? resolvedMax
+  const valueLabel = item.valueLabel ?? (valueFormatter ? valueFormatter(item.value) : formatMetricValue(item.value, unit))
+  return <div class="ui-chart-row">
+    <span>
+      {item.icon && <img src={item.icon.src} alt="" width={item.icon.width} height={item.icon.height} class={item.icon.class} />}
+      <span id={labelId}>{t(item.label)}{item.labelNote && <span class="ml-xs font-xs fg-text-muted">{item.labelNote}</span>}</span>
+      {item.detail && <small>{t(item.detail)}</small>}
+    </span>
+    <div class="ui-bar" role="meter" aria-labelledby={`${labelId} ${valueId}`} aria-valuemin={0} aria-valuemax={itemMax} aria-valuenow={item.value}>
+      <i data-tone={item.color === 'neutral' ? 'muted' : undefined} style={{ width: `${clampPercent(item.value, itemMax)}%` }} />
+    </div>
+    <output id={valueId}>{valueLabel}</output>
+  </div>
+})}

package/src/benchmarks/BenchmarkBars.astro

@@ -0,0 +1,14 @@
+---
+import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/benchmarks.css'
+import BenchmarkBarRows from '@master/internal-site/benchmarks/BenchmarkBarRows.astro'
+import type { BenchmarkBarsProps } from '@master/internal-site/benchmarks/types.ts'
+
+interface Props extends BenchmarkBarsProps {
+  class?: string
+}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div class={className ? `ui-chart ${className}` : 'ui-chart'}><BenchmarkBarRows {...props} /></div>

package/src/benchmarks/BenchmarkChart.astro

@@ -0,0 +1,53 @@
+---
+import ExpandContent from '@master/internal-site/components/ExpandContent.svelte'
+import BenchmarkBars from '@master/internal-site/benchmarks/BenchmarkBars.astro'
+import BenchmarkMetricTable from '@master/internal-site/benchmarks/BenchmarkMetricTable.astro'
+import BenchmarkStackedBars from '@master/internal-site/benchmarks/BenchmarkStackedBars.astro'
+import type { BenchmarkChartModel } from '@master/internal-site/benchmarks/types.ts'
+
+interface Props {
+  chart: BenchmarkChartModel
+}
+
+/** Renders an authored chart model; `utils/benchmark-content` exports the same model as Markdown. */
+const { chart } = Astro.props
+---
+
+{chart.kind === 'bars' && <BenchmarkBars items={chart.items} max={chart.max} unit={chart.unit} valueFormatter={chart.valueFormatter} />}
+{chart.kind === 'stacked-bars' && <BenchmarkStackedBars items={chart.items} max={chart.max} unit={chart.unit} valueFormatter={chart.valueFormatter} />}
+{chart.kind === 'metric-table' && <BenchmarkMetricTable label={chart.label} metrics={chart.metrics} />}
+{chart.kind === 'chart-groups' && (
+  <div class="grid gap-lg">
+    {chart.groups.map((group) => (
+      <div class="grid gap-sm">
+        <div class="flex items-baseline justify-between gap-md">
+          <h4 class="m(0) font-sm (font-weight:var(--ui-weight-medium)) fg-text-strong">{group.title}</h4>
+          <span class="font-xs fg-text-muted">{group.detail}</span>
+        </div>
+        <BenchmarkBars items={group.items} unit={group.unit} />
+      </div>
+    ))}
+  </div>
+)}
+{chart.kind === 'data-table' && (
+  <ExpandContent client:idle={{ timeout: 500 }}>
+    {/* Preserve keyboard access to wide result tables. */}
+    <div class="ui-table" data-numeric-from={chart.numericFrom} role="region" aria-label={chart.label} tabindex="0">
+      <table>
+        <thead>
+          <tr>
+            {chart.headers.map((header) => <th>{header}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {chart.rows.map(([rowHeader, ...cells]) => (
+            <tr>
+              <th>{rowHeader}</th>
+              {cells.map((cell) => <td>{cell}</td>)}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </ExpandContent>
+)}

package/src/benchmarks/BenchmarkChartGroup.astro

@@ -0,0 +1,24 @@
+---
+import '@master/internal-site/styles/system/data.css'
+import { siteOf } from '@master/internal-site/astro/site-context'
+import BenchmarkBarRows from '@master/internal-site/benchmarks/BenchmarkBarRows.astro'
+import type { BenchmarkBarItem } from '@master/internal-site/benchmarks/types.ts'
+
+interface Props {
+  title: string
+  detail?: string
+  items: BenchmarkBarItem[]
+  unit?: string
+}
+
+/** One metric in one chart frame: its name, statistic and unit stay with the bars. */
+const { title, detail = 'Median', items, unit = 'ms' } = Astro.props
+const { t } = siteOf(Astro)
+---
+
+<div class="ui-chart">
+  <div class="ui-chart-head">
+    <div><b>{t(title)}</b><small>{t(detail)} · {unit}</small></div>
+  </div>
+  <BenchmarkBarRows items={items} unit={unit} />
+</div>

package/src/benchmarks/BenchmarkDataTable.astro

@@ -0,0 +1,24 @@
+---
+import '@master/internal-site/styles/system/data.css'
+import '@master/internal-site/styles/benchmarks.css'
+import { siteOf } from '@master/internal-site/astro/site-context'
+import BenchmarkScrollRegion from '@master/internal-site/benchmarks/BenchmarkScrollRegion.svelte'
+
+interface Props {
+  title: string
+}
+
+/** Native disclosure preserves the full server-rendered table; keyboard scrolling is isolated. */
+const { title } = Astro.props
+const { t } = siteOf(Astro)
+---
+
+<details class="ui-disclosure" data-variant="rule">
+  <summary>
+    {t(title)}
+    <span class="ui-disclosure-meta">{t('Complete measurements')}</span>
+  </summary>
+  <div class="ui-disclosure-body">
+    <BenchmarkScrollRegion title={title} client:idle={{ timeout: 500 }}><slot /></BenchmarkScrollRegion>
+  </div>
+</details>

package/src/benchmarks/BenchmarkDelta.astro

@@ -0,0 +1,23 @@
+---
+import '@master/internal-site/styles/system/specimens.css'
+import { siteOf } from '@master/internal-site/astro/site-context'
+import RenderNode from '@master/internal-site/components/RenderNode.astro'
+import type { BenchmarkTone } from '@master/internal-site/benchmarks/types.ts'
+import { benchmarkStatusTones } from '@master/internal-site/benchmarks/utils.ts'
+
+interface Props {
+  value?: unknown
+  label?: unknown
+  tone?: BenchmarkTone
+  class?: string
+}
+
+/** A change between two measurements; its status tone always comes with words. */
+const { value, label, tone = 'neutral', class: className } = Astro.props
+const { t } = siteOf(Astro)
+---
+
+<span class={className ? `ui-badge ${className}` : 'ui-badge'} data-tone={benchmarkStatusTones[tone]}>
+  <strong>{Astro.slots.has('default') ? <slot /> : <RenderNode node={value} />}</strong>
+  {label && <span>{typeof label === 'string' ? t(label) : <RenderNode node={label} />}</span>}
+</span>

package/src/benchmarks/BenchmarkFigure.astro

@@ -0,0 +1,30 @@
+---
+import '@master/internal-site/styles/system/data.css'
+import { siteOf } from '@master/internal-site/astro/site-context'
+import RenderNode from '@master/internal-site/components/RenderNode.astro'
+
+interface Props {
+  title?: unknown
+  description?: unknown
+  caption?: unknown
+  class?: string
+}
+
+/** A titled chart, its sample context and its caption as one figure. */
+const { title, description, caption, class: className } = Astro.props
+const { t } = siteOf(Astro)
+const text = (node: unknown) => typeof node === 'string' ? t(node) : node
+---
+
+<figure class={className ? `ui-tray ${className}` : 'ui-tray'}>
+  {(title || description) && (
+    <div class="ui-tray-head">
+      <div>
+        {title && <p class="ui-tray-title"><RenderNode node={text(title)} /></p>}
+        {description && <p class="ui-tray-description"><RenderNode node={text(description)} /></p>}
+      </div>
+    </div>
+  )}
+  <slot />
+  {caption && <figcaption class="ui-tray-caption"><RenderNode node={text(caption)} /></figcaption>}
+</figure>

package/src/benchmarks/BenchmarkMetricTable.astro

@@ -0,0 +1,38 @@
+---
+import '@master/internal-site/styles/system/data.css'
+import { siteOf } from '@master/internal-site/astro/site-context'
+import BenchmarkStatus from '@master/internal-site/benchmarks/BenchmarkStatus.astro'
+import type { BenchmarkMetric } from '@master/internal-site/benchmarks/types.ts'
+
+interface Props {
+  metrics: BenchmarkMetric[]
+  /** Names the scrollable region; several metric tables share a page, so each needs its own name. */
+  label?: string
+}
+
+const { metrics, label = 'Benchmark metrics' } = Astro.props
+const { t } = siteOf(Astro)
+const hasDetails = metrics.some((metric) => metric.detail)
+---
+
+{/* Preserve keyboard access to wide metric tables. */}
+<div class="ui-table" role="region" aria-label={label} tabindex="0">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">{t('Metric')}</th>
+        <th scope="col">{t('Value')}</th>
+        {hasDetails && <th scope="col">{t('Detail')}</th>}
+      </tr>
+    </thead>
+    <tbody>
+      {metrics.map((metric) => (
+        <tr>
+          <th scope="row">{t(metric.label)}</th>
+          <td class="benchmark-value">{metric.value} <BenchmarkStatus tone={metric.tone} /></td>
+          {hasDetails && <td>{metric.detail && t(metric.detail)}</td>}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>

package/src/benchmarks/BenchmarkMetrics.astro

@@ -0,0 +1,23 @@
+---
+import '@master/internal-site/styles/system/data.css'
+import { siteOf } from '@master/internal-site/astro/site-context'
+import BenchmarkStatus from '@master/internal-site/benchmarks/BenchmarkStatus.astro'
+import type { BenchmarkMetric } from '@master/internal-site/benchmarks/types.ts'
+
+interface Props {
+  metrics: BenchmarkMetric[]
+}
+
+const { metrics } = Astro.props
+const { t } = siteOf(Astro)
+---
+
+<div class="ui-metrics">
+  {metrics.map((metric) => (
+    <div class="ui-metric">
+      <small>{t(metric.label)}</small>
+      <b>{metric.value}</b>
+      {(metric.detail || (metric.tone && metric.tone !== 'neutral')) && <p><BenchmarkStatus tone={metric.tone} /> {metric.detail && t(metric.detail)}</p>}
+    </div>
+  ))}
+</div>