@exponential-at/ui 0.0.0-stage → 0.1.0

package/conformance/compare.ts

@@ -0,0 +1,201 @@
+// The COMPARATOR of the conformance harness: two frame dumps (a reference —
+// the committed web baseline — and a candidate: a fresh web dump, the gpui
+// dump…) node by node, matched by id.
+//
+// Tolerances (fixtures/conformance-cases.json `tolerance`): x, y, w, h within
+// ±`px`; a node with text lines on either side may differ in height by up to
+// `textLines` × its line height (one more or fewer wrapped line). Lines that
+// differ are ALWAYS reported (`wrap`), tolerated when within `textLines`.
+// Every node outside tolerance is a divergence:
+//   size      its own w/h differ
+//   position  only x/y differ
+//   wrap      its line count differs by more than `textLines`
+// and an ORIGIN when nothing below explains it (a size divergence with no
+// size-diverging descendant; a position divergence whose parent is in
+// tolerance) — the list to fix; the rest are its cascade. Nodes only one side
+// placed are reported apart (`onlyRef` / `onlyCand`): the dumps' coverage
+// differs there (e.g. a control the core expands into parts the DOM renders
+// without `data-xui-id`), nothing was compared.
+//
+// The Rust gate (apps/desktop/crates/exponential-ui-gpui/tests/conformance.rs)
+// implements the same rules.
+
+import type { CaseDump, Dump, DumpNode } from "./dump"
+
+export interface Tolerance {
+  px: number
+  textLines: number
+}
+
+export type DivergenceKind = `size` | `position` | `wrap`
+
+export interface NodeDiff {
+  id: string
+  component: string
+  kinds: DivergenceKind[]
+  origin: boolean
+  ref: Pick<DumpNode, `x` | `y` | `w` | `h` | `lines` | `lh`>
+  cand: Pick<DumpNode, `x` | `y` | `w` | `h` | `lines` | `lh`>
+  d: { x: number; y: number; w: number; h: number }
+  text?: string
+}
+
+export interface CaseReport {
+  key: string
+  matched: number
+  within: number
+  size: number
+  position: number
+  /** Wrap divergences (beyond `textLines`). */
+  wrap: number
+  /** Line-count differences within tolerance (reported, not divergences). */
+  wrapTolerated: number
+  origins: number
+  maxDelta: number
+  onlyRef: string[]
+  onlyCand: string[]
+  height: { ref: number; cand: number }
+  diffs: NodeDiff[]
+  /** Tolerated line-count changes (`id: ref → cand lines`). */
+  rewraps: string[]
+}
+
+export interface Report {
+  ref: string
+  cand: string
+  tolerance: Tolerance
+  cases: CaseReport[]
+  missingCases: string[]
+}
+
+const box = (n: DumpNode) => ({ x: n.x, y: n.y, w: n.w, h: n.h, ...(n.lines !== undefined ? { lines: n.lines, lh: n.lh } : {}) })
+const r2 = (v: number) => Math.round(v * 100) / 100
+
+export function compareCase(key: string, ref: CaseDump, cand: CaseDump, tol: Tolerance): CaseReport {
+  const refById = new Map<string, DumpNode>()
+  for (const n of ref.nodes) if (!refById.has(n.id)) refById.set(n.id, n)
+  const candById = new Map<string, DumpNode>()
+  for (const n of cand.nodes) if (!candById.has(n.id)) candById.set(n.id, n)
+  const report: CaseReport = { key, matched: 0, within: 0, size: 0, position: 0, wrap: 0, wrapTolerated: 0, origins: 0, maxDelta: 0, onlyRef: [], onlyCand: [], height: { ref: ref.height, cand: cand.height }, diffs: [], rewraps: [] }
+  const diffById = new Map<string, NodeDiff>()
+  for (const [id, a] of refById) {
+    const b = candById.get(id)
+    if (!b) {
+      report.onlyRef.push(id)
+      continue
+    }
+    report.matched++
+    const d = { x: r2(b.x - a.x), y: r2(b.y - a.y), w: r2(b.w - a.w), h: r2(b.h - a.h) }
+    const lines = a.lines !== undefined || b.lines !== undefined
+    const lh = Math.max(a.lh ?? 0, b.lh ?? 0)
+    const hTol = lines ? Math.max(tol.px, tol.textLines * lh) : tol.px
+    const kinds: DivergenceKind[] = []
+    if (Math.abs(d.w) > tol.px || Math.abs(d.h) > hTol) kinds.push(`size`)
+    else if (Math.abs(d.x) > tol.px || Math.abs(d.y) > tol.px) kinds.push(`position`)
+    if (a.lines !== undefined && b.lines !== undefined && a.lines !== b.lines) {
+      if (Math.abs(a.lines - b.lines) > tol.textLines) kinds.push(`wrap`)
+      else {
+        report.wrapTolerated++
+        report.rewraps.push(`${id}: ${a.lines} → ${b.lines} lines`)
+      }
+    }
+    report.maxDelta = Math.max(report.maxDelta, Math.abs(d.x), Math.abs(d.y), Math.abs(d.w), Math.abs(d.h))
+    if (!kinds.length) {
+      report.within++
+      continue
+    }
+    const diff: NodeDiff = { id, component: a.component, kinds, origin: false, ref: box(a), cand: box(b), d }
+    if (a.text ?? b.text) diff.text = a.text ?? b.text
+    diffById.set(id, diff)
+    report.diffs.push(diff)
+  }
+  for (const id of candById.keys()) if (!refById.has(id)) report.onlyCand.push(id)
+  // Origins: a size divergence no diverging descendant explains; a position
+  // divergence whose parent is in tolerance.
+  const sizeBelow = new Set<string>()
+  for (const diff of report.diffs) {
+    if (!diff.kinds.includes(`size`) && !diff.kinds.includes(`wrap`)) continue
+    let p = refById.get(diff.id)?.parent
+    while (p) {
+      sizeBelow.add(p)
+      p = refById.get(p)?.parent
+    }
+  }
+  for (const diff of report.diffs) {
+    const parent = refById.get(diff.id)?.parent
+    if (diff.kinds.includes(`size`) || diff.kinds.includes(`wrap`)) diff.origin = !sizeBelow.has(diff.id)
+    else diff.origin = !parent || !diffById.has(parent)
+    if (diff.kinds.includes(`size`)) report.size++
+    if (diff.kinds.includes(`position`)) report.position++
+    if (diff.kinds.includes(`wrap`)) report.wrap++
+    if (diff.origin) report.origins++
+  }
+  return report
+}
+
+export function compareDumps(ref: Dump, cand: Dump, tol: Tolerance, keys?: string[]): Report {
+  const cases: CaseReport[] = []
+  const missingCases: string[] = []
+  for (const key of keys ?? Object.keys(ref.cases)) {
+    const a = ref.cases[key]
+    const b = cand.cases[key]
+    if (!a || !b) {
+      missingCases.push(key)
+      continue
+    }
+    cases.push(compareCase(key, a, b, tol))
+  }
+  return { ref: ref.renderer, cand: cand.renderer, tolerance: tol, cases, missingCases }
+}
+
+/** Divergences of a case (matched nodes outside tolerance). */
+export const divergences = (c: CaseReport) => c.diffs.length
+
+const pad = (s: string | number, n: number, right = false) => (right ? String(s).padStart(n) : String(s).padEnd(n))
+
+/** The summary table: one row per case. */
+export function formatTable(report: Report): string {
+  const head = [pad(`case`, 44), pad(`matched`, 7, true), pad(`ok`, 5, true), pad(`size`, 5, true), pad(`pos`, 5, true), pad(`wrap`, 5, true), pad(`±1ln`, 5, true), pad(`origin`, 6, true), pad(`only ref`, 8, true), pad(`only cand`, 9, true), pad(`max Δ`, 8, true), pad(`height ref/cand`, 17, true)].join(` `)
+  const rows = report.cases.map((c) =>
+    [pad(c.key, 44), pad(c.matched, 7, true), pad(c.within, 5, true), pad(c.size, 5, true), pad(c.position, 5, true), pad(c.wrap, 5, true), pad(c.wrapTolerated, 5, true), pad(c.origins, 6, true), pad(c.onlyRef.length, 8, true), pad(c.onlyCand.length, 9, true), pad(c.maxDelta.toFixed(1), 8, true), pad(`${Math.round(c.height.ref)}/${Math.round(c.height.cand)}`, 17, true)].join(` `)
+  )
+  const t = report.cases.reduce((s, c) => ({ matched: s.matched + c.matched, within: s.within + c.within, size: s.size + c.size, position: s.position + c.position, wrap: s.wrap + c.wrap, tol: s.tol + c.wrapTolerated, origins: s.origins + c.origins, onlyRef: s.onlyRef + c.onlyRef.length, onlyCand: s.onlyCand + c.onlyCand.length }), { matched: 0, within: 0, size: 0, position: 0, wrap: 0, tol: 0, origins: 0, onlyRef: 0, onlyCand: 0 })
+  const total = [pad(`TOTAL (${report.cases.length} cases)`, 44), pad(t.matched, 7, true), pad(t.within, 5, true), pad(t.size, 5, true), pad(t.position, 5, true), pad(t.wrap, 5, true), pad(t.tol, 5, true), pad(t.origins, 6, true), pad(t.onlyRef, 8, true), pad(t.onlyCand, 9, true), pad(``, 8), pad(``, 17)].join(` `)
+  const lines = [`${report.ref} (ref) vs ${report.cand} (cand) — ±${report.tolerance.px}px, wrapped text ±${report.tolerance.textLines} line`, head, `-`.repeat(head.length), ...rows, `-`.repeat(head.length), total]
+  if (report.missingCases.length) lines.push(`missing cases: ${report.missingCases.join(`, `)}`)
+  return lines.join(`\n`)
+}
+
+const fmtBox = (b: NodeDiff[`ref`]) => `${b.x},${b.y} ${b.w}×${b.h}${b.lines !== undefined ? ` ${b.lines}ln@${b.lh}` : ``}`
+
+/** One case's divergences: origins first (the list to fix), then a count of
+ *  the cascade, the tolerated rewraps and the unmatched ids. */
+export function formatCase(c: CaseReport, limit = 60): string {
+  const out = [`## ${c.key}`]
+  const origins = c.diffs.filter((d) => d.origin)
+  for (const d of origins.slice(0, limit)) out.push(`  ${d.kinds.join(`+`).padEnd(13)} ${d.id} (${d.component}) ref ${fmtBox(d.ref)} → cand ${fmtBox(d.cand)}  Δ ${d.d.x},${d.d.y} ${d.d.w}×${d.d.h}${d.text ? `  "${d.text.slice(0, 40)}"` : ``}`)
+  if (origins.length > limit) out.push(`  … ${origins.length - limit} more origins`)
+  const cascade = c.diffs.length - origins.length
+  if (cascade) out.push(`  + ${cascade} cascaded (moved/resized by the origins above)`)
+  if (c.rewraps.length) out.push(`  rewrapped within tolerance: ${c.rewraps.slice(0, 12).join(`; `)}${c.rewraps.length > 12 ? ` … +${c.rewraps.length - 12}` : ``}`)
+  if (c.onlyRef.length) out.push(`  only in ref (${c.onlyRef.length}): ${c.onlyRef.slice(0, 12).join(`, `)}${c.onlyRef.length > 12 ? ` …` : ``}`)
+  if (c.onlyCand.length) out.push(`  only in cand (${c.onlyCand.length}): ${c.onlyCand.slice(0, 12).join(`, `)}${c.onlyCand.length > 12 ? ` …` : ``}`)
+  return out.join(`\n`)
+}
+
+/** Divergences grouped ACROSS cases: the same node diverging the same way
+ *  in many cases is one finding (`id kinds → case count, Δ range`). */
+export function groupFindings(report: Report): { id: string; component: string; kinds: string; cases: number; dw: [number, number]; dh: [number, number]; text?: string; example: string }[] {
+  const groups = new Map<string, { id: string; component: string; kinds: string; cases: number; dw: [number, number]; dh: [number, number]; text?: string; example: string }>()
+  for (const c of report.cases)
+    for (const d of c.diffs) {
+      if (!d.origin) continue
+      const k = `${d.id}|${d.kinds.join(`+`)}`
+      const g = groups.get(k) ?? { id: d.id, component: d.component, kinds: d.kinds.join(`+`), cases: 0, dw: [Infinity, -Infinity] as [number, number], dh: [Infinity, -Infinity] as [number, number], text: d.text, example: `${c.key}: ref ${fmtBox(d.ref)} → cand ${fmtBox(d.cand)}` }
+      g.cases++
+      g.dw = [Math.min(g.dw[0], d.d.w), Math.max(g.dw[1], d.d.w)]
+      g.dh = [Math.min(g.dh[0], d.d.h), Math.max(g.dh[1], d.d.h)]
+      groups.set(k, g)
+    }
+  return [...groups.values()].sort((a, b) => b.cases - a.cases || a.id.localeCompare(b.id))
+}

package/conformance/dom.ts

@@ -0,0 +1,96 @@
+// The WEB producer of a frame dump (conformance/dump.ts), run inside the
+// page: every `[data-xui-id]` element of the surface's MAIN tree (overlay and
+// toast layers excluded, `display: none` excluded) with its border box
+// relative to the root node's (getBoundingClientRect, the browser's real
+// fonts), minus collapsed 0×0 subtrees (dump.ts dropCollapsed). `text` = the text nodes the element owns (not a nested node's);
+// `lines` (text components only) = the distinct line boxes of that text
+// (Range client rects grouped by their vertical centre), `lh` = the computed
+// line height.
+//
+// Round 2 (docs/round-2-contract.md §8): frames are LAYOUT boxes — the dump
+// neutralises `transform`/`translate`/`rotate`/`scale` and animations on
+// every node while it measures (they are paint-only by contract: a selected
+// tab icon scaled 1.15 keeps its 20 px box), and skips what the contract does
+// not place: nodes inside an inactive carousel page (`[data-xui-inactive]`).
+
+import { dropCollapsed, roundNode, type CaseDump, type DumpNode } from "./dump"
+
+/** The line boxes of a run of text nodes: client rects grouped by centre. */
+function lineCount(texts: Text[]): number {
+  const centres: number[] = []
+  const range = document.createRange()
+  for (const t of texts) {
+    range.selectNodeContents(t)
+    for (const r of Array.from(range.getClientRects())) {
+      if (r.width === 0 && r.height === 0) continue
+      const c = r.top + r.height / 2
+      if (!centres.some((x) => Math.abs(x - c) < r.height / 2)) centres.push(c)
+    }
+  }
+  return centres.length
+}
+
+/** The text nodes `el` owns (skipping nested placed nodes). */
+function ownTexts(el: HTMLElement): Text[] {
+  const out: Text[] = []
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    const t = n as Text
+    if (!t.data.trim()) continue
+    if (t.parentElement?.closest(`[data-xui-id]`) !== el) continue
+    out.push(t)
+  }
+  return out
+}
+
+/** The rule that turns paint-only transforms and animations off while the
+ *  dump measures. */
+export const LAYOUT_ONLY_CSS = `[data-xui-id]{transform:none!important;translate:none!important;rotate:none!important;scale:none!important;animation:none!important;transition:none!important}`
+
+export function domDump(surface: Element, textComponents: readonly string[]): CaseDump {
+  const style = document.createElement(`style`)
+  style.textContent = LAYOUT_ONLY_CSS
+  document.head.appendChild(style)
+  try {
+    return measure(surface, textComponents)
+  } finally {
+    style.remove()
+  }
+}
+
+function measure(surface: Element, textComponents: readonly string[]): CaseDump {
+  const rootEl = surface.querySelector<HTMLElement>(`[data-xui-id]`)
+  if (!rootEl) return { width: 0, height: 0, nodes: [] }
+  const o = rootEl.getBoundingClientRect()
+  const nodes: DumpNode[] = []
+  const seen = new Set<string>()
+  for (const el of Array.from(surface.querySelectorAll<HTMLElement>(`[data-xui-id]`))) {
+    if (el.closest(`[data-xui-layer]`)) continue
+    if (el.closest(`[data-xui-inactive]`)) continue
+    if (el.getClientRects().length === 0) continue
+    const id = el.dataset.xuiId!
+    if (seen.has(id)) continue
+    seen.add(id)
+    const r = el.getBoundingClientRect()
+    const node: DumpNode = { id, component: el.dataset.xuiC ?? ``, x: r.left - o.left, y: r.top - o.top, w: r.width, h: r.height }
+    if (el.dataset.xuiPart) node.part = el.dataset.xuiPart
+    const parent = el.parentElement?.closest<HTMLElement>(`[data-xui-id]`)
+    if (parent) node.parent = parent.dataset.xuiId
+    const texts = ownTexts(el)
+    if (texts.length) {
+      node.text = texts
+        .map((t) => t.data)
+        .join(``)
+        .replace(/\s+/g, ` `)
+        .trim()
+        .slice(0, 80)
+      if (textComponents.includes(node.component)) {
+        node.lines = lineCount(texts)
+        const lh = parseFloat(getComputedStyle(el).lineHeight)
+        if (Number.isFinite(lh)) node.lh = lh
+      }
+    }
+    nodes.push(roundNode(node))
+  }
+  return { width: Math.round(o.width * 100) / 100, height: Math.round(o.height * 100) / 100, nodes: dropCollapsed(nodes) }
+}

package/conformance/dump.ts

@@ -0,0 +1,163 @@
+// The FRAME DUMP format of the renderer conformance harness: every placed
+// node of one case (fixture × theme × mode × width × direction) as
+// {id, component, part, parent, x, y, w, h, text?, lines?, lh?}, positions
+// relative to the surface's root node, in CSS px. Produced by the React
+// renderer in headless Chromium (conformance/dom.ts, real fonts) and by the
+// gpui painter headless (apps/desktop/crates/exponential-ui-gpui/examples/
+// conformance_dump.rs, gpui's cosmic-text system with the same font files);
+// conformance/compare.ts diffs two of them. The case matrix and the fixtures
+// live in fixtures/conformance-cases.json, the font set in conformance/fonts.json.
+
+export const DUMP_FORMAT = `xui-frame-dump/1`
+
+export interface DumpNode {
+  id: string
+  component: string
+  part?: string
+  /** The nearest placed ancestor's id. */
+  parent?: string
+  x: number
+  y: number
+  w: number
+  h: number
+  /** The text the node lays out itself (leaves; ≤ 80 chars, informational). */
+  text?: string
+  /** Laid-out text lines (text components only: `textComponents`). */
+  lines?: number
+  /** The text's line height (px). */
+  lh?: number
+}
+
+export interface CaseDump {
+  width: number
+  height: number
+  nodes: DumpNode[]
+}
+
+export interface Dump {
+  format: string
+  /** `react-chromium` | `gpui-cosmic-headless` | … */
+  renderer: string
+  /** The font files the dump was laid out with. */
+  fonts: string
+  cases: Record<string, CaseDump>
+}
+
+export interface ConformanceManifest {
+  format: number
+  fonts: string
+  fixtures: Record<string, { tree?: string; data?: string; geometry?: string }>
+  themes: string[]
+  modes: string[]
+  widths: number[]
+  directions: (`ltr` | `rtl`)[]
+  locale: string
+  textComponents: string[]
+  tolerance: { px: number; textLines: number }
+}
+
+export interface FontFace {
+  file: string
+  weight: number
+  style: `normal` | `italic`
+}
+
+export interface FontManifest {
+  default: string
+  families: Record<string, { faces?: FontFace[]; substitute?: string }>
+  lastResort?: { families: string[] }
+}
+
+export interface ConformanceCase {
+  key: string
+  fixture: string
+  theme: string
+  mode: `light` | `dark`
+  width: number
+  direction: `ltr` | `rtl`
+}
+
+export const MANIFEST_PATH = `packages/exponential-ui/fixtures/conformance-cases.json`
+export const BASELINE_PATH = `packages/exponential-ui/fixtures/conformance-baseline.json`
+export const KNOWN_PATH = `packages/exponential-ui/fixtures/conformance-known.json`
+
+/** `<fixture>/<theme>/<mode>/<width>/<direction>` (the Rust side builds the same). */
+export const caseKey = (c: Omit<ConformanceCase, `key`>) => `${c.fixture}/${c.theme}/${c.mode}/${c.width}/${c.direction}`
+
+export function parseCaseKey(key: string): ConformanceCase {
+  const [fixture, theme, mode, width, direction] = key.split(`/`)
+  return { key, fixture, theme, mode: mode as `light` | `dark`, width: Number(width), direction: direction as `ltr` | `rtl` }
+}
+
+/** Every case of the matrix, in the manifest's order (the Rust order too). */
+export function allCases(m: ConformanceManifest): ConformanceCase[] {
+  const out: ConformanceCase[] = []
+  for (const fixture of Object.keys(m.fixtures))
+    for (const theme of m.themes)
+      for (const mode of m.modes)
+        for (const width of m.widths)
+          for (const direction of m.directions) {
+            const c = { fixture, theme, mode: mode as `light` | `dark`, width, direction }
+            out.push({ key: caseKey(c), ...c })
+          }
+  return out
+}
+
+/** The case's nested tree (root `direction` = the case's) and data model;
+ *  `read` loads a repo-relative JSON file (fetch in the page, fs in Bun). */
+export async function caseInput(m: ConformanceManifest, c: ConformanceCase, read: (path: string) => Promise<unknown>): Promise<{ tree: Record<string, unknown>; data: Record<string, unknown> }> {
+  const spec = m.fixtures[c.fixture]
+  if (!spec) throw new Error(`unknown conformance fixture ${c.fixture}`)
+  let tree: Record<string, unknown>
+  let data: Record<string, unknown> = {}
+  if (spec.geometry) {
+    const g = (await read(spec.geometry)) as { surface: Record<string, unknown>; data?: Record<string, unknown> }
+    tree = structuredClone(g.surface)
+    data = structuredClone(g.data ?? {})
+  } else {
+    tree = structuredClone((await read(spec.tree!)) as Record<string, unknown>)
+    if (spec.data) {
+      const { $comment: _c, ...rest } = (await read(spec.data)) as Record<string, unknown>
+      data = rest
+    }
+  }
+  tree.style = { ...((tree.style as Record<string, unknown> | undefined) ?? {}), direction: c.direction }
+  return { tree, data }
+}
+
+/** The @font-face rules of the font set (`url(path)` → `src`). Substitutes
+ *  are declared under the substituted name with the substitute's files. */
+export function fontFaceCss(fonts: FontManifest, url: (file: string) => string): string {
+  const rules: string[] = []
+  for (const [family, spec] of Object.entries(fonts.families)) {
+    const faces = spec.faces ?? (spec.substitute ? fonts.families[spec.substitute]?.faces : undefined) ?? []
+    for (const f of faces) rules.push(`@font-face { font-family: "${family}"; src: url("${url(f.file)}") format("truetype"); font-weight: ${f.weight}; font-style: ${f.style}; font-display: block; }`)
+  }
+  return rules.join(`\n`)
+}
+
+/** Every font file the set names (for the server's allowlist). */
+export const fontFiles = (fonts: FontManifest) => Object.values(fonts.families).flatMap((f) => (f.faces ?? []).map((x) => x.file))
+
+/** The one placement rule both producers apply: a node whose box is 0×0
+ *  together with every descendant's is NOT placed (the web drops
+ *  `display: none` outright, the core gives such subtrees 0×0 frames). */
+export function dropCollapsed(nodes: DumpNode[]): DumpNode[] {
+  const parentOf = new Map(nodes.map((n) => [n.id, n.parent]))
+  const visible = new Set<string>()
+  for (const n of nodes) {
+    if (n.w <= 0 && n.h <= 0) continue
+    // The node and every ancestor are placed (any order of `nodes`).
+    for (let id: string | undefined = n.id; id && !visible.has(id); id = parentOf.get(id)) visible.add(id)
+  }
+  return nodes.filter((n) => visible.has(n.id))
+}
+
+const r2 = (v: number) => Math.round(v * 100) / 100
+
+/** Round a dump's numbers to 1/100 px (both producers do). */
+export function roundNode(n: DumpNode): DumpNode {
+  const out: DumpNode = { ...n, x: r2(n.x), y: r2(n.y), w: r2(n.w), h: r2(n.h) }
+  if (n.lh !== undefined) out.lh = r2(n.lh)
+  return out
+}

package/conformance/fonts.json

@@ -0,0 +1,154 @@
+{
+  "$comment": "The conformance FONT SET: every theme font family name → the font files BOTH renderers lay text out with (the web as @font-face rules named after the family, served from these files; gpui as the ONLY fonts in a cosmic-text system without system fonts). Paths are repo-relative and committed. A family without committed files names a `substitute` (its metrics are the substitute's, on both sides — the comparison stays apples to apples, it no longer tests that family). CSS generic names the themes use as a family (`ui-monospace`) are mapped too. `default` = the face the desktop gets for `.SystemUIFont` and every unmapped family. Round 2: Nunito and Fira Code (the playful theme's families, SIL OFL 1.1, licences beside the files in conformance/fonts/) are real faces now; Nunito's statics are instances of Google Fonts' variable Nunito[wght].ttf (fonttools varLib.instancer --update-name-table), Fira Code's are the v6.2 release's. Not shipped in the npm package.",
+  "default": "Inter",
+  "families": {
+    "Inter": {
+      "faces": [
+        {
+          "file": "apps/desktop/assets/fonts/Inter-Light.ttf",
+          "weight": 300,
+          "style": "normal"
+        },
+        {
+          "file": "apps/desktop/assets/fonts/Inter-Regular.ttf",
+          "weight": 400,
+          "style": "normal"
+        },
+        {
+          "file": "apps/desktop/assets/fonts/Inter-Italic.ttf",
+          "weight": 400,
+          "style": "italic"
+        },
+        {
+          "file": "apps/desktop/assets/fonts/Inter-Medium.ttf",
+          "weight": 500,
+          "style": "normal"
+        },
+        {
+          "file": "apps/desktop/assets/fonts/Inter-SemiBold.ttf",
+          "weight": 600,
+          "style": "normal"
+        },
+        {
+          "file": "apps/desktop/assets/fonts/Inter-Bold.ttf",
+          "weight": 700,
+          "style": "normal"
+        }
+      ]
+    },
+    "Geist": {
+      "faces": [
+        {
+          "file": "apps/marketing/scripts/assets/Geist-Regular.ttf",
+          "weight": 400,
+          "style": "normal"
+        },
+        {
+          "file": "apps/marketing/scripts/assets/Geist-SemiBold.ttf",
+          "weight": 600,
+          "style": "normal"
+        },
+        {
+          "file": "apps/marketing/scripts/assets/Geist-Bold.ttf",
+          "weight": 700,
+          "style": "normal"
+        }
+      ]
+    },
+    "JetBrains Mono": {
+      "faces": [
+        {
+          "file": "apps/desktop/assets/fonts/JetBrainsMono-Regular.ttf",
+          "weight": 400,
+          "style": "normal"
+        },
+        {
+          "file": "apps/desktop/assets/fonts/JetBrainsMono-Italic.ttf",
+          "weight": 400,
+          "style": "italic"
+        },
+        {
+          "file": "apps/desktop/assets/fonts/JetBrainsMono-Bold.ttf",
+          "weight": 700,
+          "style": "normal"
+        }
+      ]
+    },
+    "Geist Mono": {
+      "substitute": "JetBrains Mono"
+    },
+    "ui-monospace": {
+      "substitute": "JetBrains Mono"
+    },
+    "Nunito": {
+      "faces": [
+        {
+          "file": "packages/exponential-ui/conformance/fonts/Nunito-Light.ttf",
+          "weight": 300,
+          "style": "normal"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/Nunito-Regular.ttf",
+          "weight": 400,
+          "style": "normal"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/Nunito-Italic.ttf",
+          "weight": 400,
+          "style": "italic"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/Nunito-Medium.ttf",
+          "weight": 500,
+          "style": "normal"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/Nunito-SemiBold.ttf",
+          "weight": 600,
+          "style": "normal"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/Nunito-Bold.ttf",
+          "weight": 700,
+          "style": "normal"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/Nunito-ExtraBold.ttf",
+          "weight": 800,
+          "style": "normal"
+        }
+      ]
+    },
+    "Fira Code": {
+      "faces": [
+        {
+          "file": "packages/exponential-ui/conformance/fonts/FiraCode-Regular.ttf",
+          "weight": 400,
+          "style": "normal"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/FiraCode-Medium.ttf",
+          "weight": 500,
+          "style": "normal"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/FiraCode-SemiBold.ttf",
+          "weight": 600,
+          "style": "normal"
+        },
+        {
+          "file": "packages/exponential-ui/conformance/fonts/FiraCode-Bold.ttf",
+          "weight": 700,
+          "style": "normal"
+        }
+      ]
+    }
+  },
+  "lastResort": {
+    "$comment": "gpui's TextSystem panics when a probed family AND its fixed fallback stack (IBM Plex Sans, Lilex, Helvetica, Segoe UI, Ubuntu, Adwaita Sans, Cantarell, Noto Sans, DejaVu Sans, Arial) all fail to resolve; the painter probes `SF Mono`, `Menlo`… for generic mono names. The desktop dump therefore also loads the FIRST of these system families fontconfig finds (never used for a mapped family; cosmic-text may use it for glyphs the set lacks, as Chromium falls back to system fonts).",
+    "families": [
+      "DejaVu Sans",
+      "Noto Sans"
+    ]
+  }
+}