@adea-ai/ui 0.104.3 → 0.106.0

package/src/components/ui/kbd/index.ts

@@ -1 +1,10 @@
-export { Kbd, KbdGroup } from './kbd'
+export {
+  Kbd,
+  KbdChord,
+  KbdGroup,
+  kbdChordKeys,
+  kbdGroupVariants,
+  kbdVariants,
+  type KbdChordProps,
+  type KbdSize,
+} from './kbd'

package/src/components/ui/kbd/kbd.tsx

@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { For, splitProps } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
 import { cn } from '#lib/utils'
 
 /**
@@ -9,32 +10,94 @@ import { cn } from '#lib/utils'
  * `<kbd>` so the semantics survive copy-paste, and the mono face is what makes
  * a shortcut visually distinct from the sentence around it.
  *
+ * `size="compact"` exists for the dense rows a default cap would outweigh — a
+ * rail search row, a sidebar shortcut hint. It drops a height rung, and it
+ * lightens the fill and weight with it because at that size a solid muted cap
+ * reads heavier than the row text it sits in. The default rendering is every
+ * cap that is not inside such a row, and it is untouched by the rung.
+ *
  * `KbdGroup` exists because a shortcut is a sequence: typing `⌘` then `K`
  * needs a gap between them that is a layout concern, not punctuation.
  */
-export function Kbd(props: ComponentProps<'kbd'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export const kbdVariants = cva(
+  'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-code text-code font-medium select-none',
+  {
+    variants: {
+      size: {
+        default: '',
+        compact: 'h-4 min-w-4 bg-muted/40 px-0.5 font-normal leading-none',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+)
+
+export type KbdSize = NonNullable<VariantProps<typeof kbdVariants>['size']>
+
+export function Kbd(props: ComponentProps<'kbd'> & { size?: KbdSize }) {
+  const [local, rest] = splitProps(props, ['size', 'class'])
 
   return (
-    <kbd
-      data-slot="kbd"
-      class={cn(
-        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',
-        local.class
-      )}
-      {...rest}
-    />
+    <kbd data-slot="kbd" class={cn(kbdVariants({ size: local.size }), local.class)} {...rest} />
   )
 }
 
-export function KbdGroup(props: ComponentProps<'span'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export const kbdGroupVariants = cva('inline-flex items-center gap-1', {
+  variants: {
+    size: {
+      default: '',
+      /** The gap is what separates caps, so it tightens with them. */
+      compact: 'gap-0.5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})
+
+export function KbdGroup(props: ComponentProps<'span'> & { size?: KbdSize }) {
+  const [local, rest] = splitProps(props, ['size', 'class'])
 
   return (
     <span
       data-slot="kbd-group"
-      class={cn('inline-flex items-center gap-1', local.class)}
+      class={cn(kbdGroupVariants({ size: local.size }), local.class)}
       {...rest}
     />
   )
 }
+
+/**
+ * Split a written chord into one entry per key cap. Every character is a key:
+ * `⌘K` renders as `⌘` + `K`, and a longer chord like `⇧⌘P` stays three caps
+ * wide, which matches how the system draws chords in menus.
+ */
+export function kbdChordKeys(keys: string): string[] {
+  return [...keys]
+}
+
+export type KbdChordProps = Omit<ComponentProps<'span'>, 'children'> & {
+  /** The chord as it is drawn, e.g. `"⌘K"` or `"⇧⌘P"`. One cap per character. */
+  keys: string
+  size?: KbdSize
+}
+
+/**
+ * KbdChord.
+ *
+ * A written chord drawn as caps, one per character. Decoration only: the
+ * composition renders `aria-hidden`, so the accessible name and the parseable
+ * `aria-keyshortcuts` stay on the control the chord belongs to. That is why
+ * there is no children — the chord says what was drawn, nothing more.
+ */
+export function KbdChord(props: KbdChordProps) {
+  const [local, rest] = splitProps(props, ['keys', 'size', 'class'])
+
+  return (
+    <KbdGroup {...rest} size={local.size} class={local.class} aria-hidden="true">
+      <For each={kbdChordKeys(local.keys)}>{(key) => <Kbd size={local.size}>{key}</Kbd>}</For>
+    </KbdGroup>
+  )
+}

package/src/components/ui/menubar/menubar.tsx

@@ -123,7 +123,7 @@ export function MenubarItem(
       {local.shortcut ? (
         <span
           aria-hidden="true"
-          class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest"
+          class="text-muted-foreground ms-auto font-code text-code tracking-widest"
         >
           {local.shortcut}
         </span>

package/src/components/ui/typography/typography.tsx

@@ -119,11 +119,9 @@ export function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>)
 /**
  * Text.
  *
- * Everything that is not a heading. `text-sm` is the interface default, not 16px,
- * and it carries three weights by role: 400 for body copy, 500 for a label or
- * control text, 600 for emphasis. Below it, `caption` (12px) is metadata and
- * `micro` (11px, 500) is the floor — keyboard keys and the status bar. `code` is
- * the mono face at 12px, for anything a user compares character by character.
+ * Everything that is not a heading. Body and strong copy use the content font
+ * axis; labels, captions and microcopy inherit the UI face. Code uses its own
+ * family and size axis for anything a user compares character by character.
  *
  * `tone` is a separate axis from `variant` because "secondary" is a colour
  * decision, not a size: a muted caption and a muted body line are both common.
@@ -136,17 +134,17 @@ export const textVariants = cva('', {
   variants: {
     variant: {
       /** 14px / 400. Body copy and descriptions. */
-      body: 'text-sm',
+      body: 'font-content text-content',
       /** 14px / 500. Labels, control text, list-row titles. */
       label: 'text-sm font-medium',
       /** 14px / 600. Emphasis inside body copy. */
-      strong: 'text-sm font-semibold',
+      strong: 'font-content text-content font-semibold',
       /** 12px / 400. Metadata, secondary rows, units. */
       caption: 'text-xs',
       /** 11px / 500. The floor: keyboard keys, the status bar. */
       micro: 'text-2xs font-medium',
       /** 12px mono. Ids, paths, hashes, inline code. */
-      code: 'font-mono text-xs',
+      code: 'font-code text-code',
     },
     tone: {
       inherit: '',

package/src/lib/appearance-font-settings.ts

@@ -0,0 +1,233 @@
+import { fontOptions, type FontOption } from '#lib/font-catalog'
+import { safeScriptStringLiteral } from '#lib/safe-script'
+
+export const APPEARANCE_EDITOR_FONT_AXES = ['ui', 'content', 'code'] as const
+
+export type AppearanceEditorFontAxis = (typeof APPEARANCE_EDITOR_FONT_AXES)[number]
+export type AppearanceEditorFontFamilyId = FontOption['id']
+
+export type AppearanceEditorFontSetting = Readonly<{
+  /** A stable id from the shared font catalogue, never a CSS family string. */
+  family: AppearanceEditorFontFamilyId
+  /** A pixel size, normalized to the supported range. */
+  size: number
+}>
+
+/** The host-owned choices edited by the shared appearance composition. */
+export type AppearanceEditorFontSettings = Readonly<
+  Record<AppearanceEditorFontAxis, AppearanceEditorFontSetting>
+>
+
+export const APPEARANCE_EDITOR_FONT_SIZE_MIN = 10
+export const APPEARANCE_EDITOR_FONT_SIZE_MAX = 32
+
+/** New preferences use the platform face in each text role. */
+export const DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS: AppearanceEditorFontSettings = Object.freeze({
+  ui: Object.freeze({ family: 'system', size: 14 }),
+  content: Object.freeze({ family: 'system', size: 14 }),
+  code: Object.freeze({ family: 'system', size: 12 }),
+})
+
+export type NormalizedAppearanceEditorFontSettings = Readonly<{
+  settings: AppearanceEditorFontSettings
+  /** Axes whose persisted family or size was unavailable or outside its limits. */
+  recoveredAxes: readonly AppearanceEditorFontAxis[]
+}>
+
+const fontFamilyIds: ReadonlySet<string> = new Set(fontOptions.map((option) => option.id))
+const fontOptionsById = Object.freeze(
+  Object.fromEntries(fontOptions.map((option) => [option.id, option])) as Record<
+    AppearanceEditorFontFamilyId,
+    FontOption
+  >
+)
+const fontProjectionById = Object.freeze(
+  Object.fromEntries(
+    fontOptions.map((option) => [
+      option.id,
+      {
+        familyVariables: option.familyVariables,
+        uiTracking: option.uiTracking,
+        uiWordSpacing: option.uiWordSpacing,
+      },
+    ])
+  ) as Record<
+    AppearanceEditorFontFamilyId,
+    Pick<FontOption, 'familyVariables' | 'uiTracking' | 'uiWordSpacing'>
+  >
+)
+const fontAxisProjection = Object.freeze({
+  ui: Object.freeze({
+    familyAttribute: 'data-ui-font',
+    familyProperty: '--font-ui',
+    sizeProperty: '--font-ui-size',
+    scaleProperty: '--font-ui-scale',
+    defaultSize: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS.ui.size,
+  }),
+  content: Object.freeze({
+    familyAttribute: 'data-content-font',
+    familyProperty: '--font-content',
+    sizeProperty: '--font-content-size',
+    scaleProperty: '--font-content-scale',
+    defaultSize: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS.content.size,
+  }),
+  code: Object.freeze({
+    familyAttribute: 'data-code-font',
+    familyProperty: '--font-code',
+    sizeProperty: '--font-code-size',
+    scaleProperty: '--font-code-scale',
+    defaultSize: DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS.code.size,
+  }),
+})
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function hasOwn(value: Record<string, unknown>, key: string): boolean {
+  return Object.prototype.hasOwnProperty.call(value, key)
+}
+
+function normalizeFamily(value: unknown): AppearanceEditorFontFamilyId | undefined {
+  return typeof value === 'string' && fontFamilyIds.has(value)
+    ? (value as AppearanceEditorFontFamilyId)
+    : undefined
+}
+
+function clampFontSize(value: number): number {
+  return Math.min(
+    APPEARANCE_EDITOR_FONT_SIZE_MAX,
+    Math.max(APPEARANCE_EDITOR_FONT_SIZE_MIN, Math.round(value))
+  )
+}
+
+/** Normalize a single number-input value; invalid edits return the current size. */
+export function normalizeAppearanceEditorFontSize(value: unknown, fallback: number): number {
+  const parsed =
+    typeof value === 'number'
+      ? value
+      : typeof value === 'string' && value.trim() !== ''
+        ? Number(value)
+        : Number.NaN
+  return Number.isFinite(parsed) ? clampFontSize(parsed) : clampFontSize(fallback)
+}
+
+/**
+ * Recover persisted font choices against the shared font catalogue.
+ *
+ * `legacyUiFamily` lets a host migrate its previous single font field into the
+ * UI axis. Content and code remain on the new System defaults during that
+ * migration. Missing settings are ordinary defaults; an unknown saved id or an
+ * invalid size is reported through `recoveredAxes` for the host's notice.
+ */
+export function normalizeAppearanceEditorFontSettings(
+  value: unknown,
+  legacyUiFamily?: unknown
+): NormalizedAppearanceEditorFontSettings {
+  const source = isRecord(value) ? value : undefined
+  const malformedRoot = value !== undefined && value !== null && source === undefined
+  const recovered = new Set<AppearanceEditorFontAxis>()
+  const settings = {} as Record<AppearanceEditorFontAxis, AppearanceEditorFontSetting>
+
+  for (const axis of APPEARANCE_EDITOR_FONT_AXES) {
+    const axisPresent = source ? hasOwn(source, axis) : false
+    const axisValue = source?.[axis]
+    const axisSource = isRecord(axisValue) ? axisValue : undefined
+    const fallback = DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS[axis]
+
+    if (malformedRoot || (axisPresent && axisSource === undefined)) recovered.add(axis)
+
+    const hasFamily = axisSource ? hasOwn(axisSource, 'family') : false
+    const familyInput = hasFamily
+      ? axisSource?.['family']
+      : axis === 'ui' && legacyUiFamily !== undefined
+        ? legacyUiFamily
+        : undefined
+    const family = normalizeFamily(familyInput) ?? fallback.family
+    if (
+      (hasFamily || (axis === 'ui' && legacyUiFamily !== undefined)) &&
+      !normalizeFamily(familyInput)
+    ) {
+      recovered.add(axis)
+    }
+
+    const hasSize = axisSource ? hasOwn(axisSource, 'size') : false
+    const sizeInput = axisSource?.['size']
+    const size = hasSize
+      ? normalizeAppearanceEditorFontSize(sizeInput, fallback.size)
+      : fallback.size
+    if (
+      hasSize &&
+      (typeof sizeInput !== 'number' || !Number.isFinite(sizeInput) || sizeInput !== size)
+    ) {
+      recovered.add(axis)
+    }
+
+    settings[axis] = Object.freeze({ family, size })
+  }
+
+  return Object.freeze({
+    settings: Object.freeze(settings),
+    recoveredAxes: Object.freeze(APPEARANCE_EDITOR_FONT_AXES.filter((axis) => recovered.has(axis))),
+  })
+}
+
+/**
+ * Project normalized font preferences onto a document root.
+ *
+ * This is shared by `ThemeProvider` and hosts that own their own appearance
+ * persistence, so UI/content/code use the same catalogue ids, theme tokens,
+ * sizes, and projected CSS variables. The marker activates the optional role
+ * stylesheet and survives CSS import reordering.
+ */
+export function applyAppearanceFontSettings(
+  root: HTMLElement,
+  value: unknown
+): NormalizedAppearanceEditorFontSettings {
+  const normalized = normalizeAppearanceEditorFontSettings(value)
+  const { settings } = normalized
+
+  root.removeAttribute('data-font')
+  root.setAttribute('data-font-settings', '')
+  for (const axis of APPEARANCE_EDITOR_FONT_AXES) {
+    const projection = fontAxisProjection[axis]
+    const setting = settings[axis]
+    const option = fontOptionsById[setting.family]
+    if (setting.family === 'system') root.removeAttribute(projection.familyAttribute)
+    else root.setAttribute(projection.familyAttribute, setting.family)
+    root.style.setProperty(projection.familyProperty, `var(${option.familyVariables[axis]})`)
+    root.style.setProperty(projection.sizeProperty, String(setting.size) + 'px')
+    root.style.setProperty(projection.scaleProperty, String(setting.size / projection.defaultSize))
+    if (axis === 'ui') {
+      root.style.setProperty('--ui-tracking', option.uiTracking)
+      root.style.setProperty('--ui-word-spacing', option.uiWordSpacing)
+    }
+  }
+
+  return normalized
+}
+
+/**
+ * Generate a safe inline prepaint script for a host-owned appearance record.
+ *
+ * The stored object is read from `localStorage[storageKey].fonts`. A legacy
+ * top-level `font` family migrates into UI only; content/code use the shared
+ * defaults. The script applies the same catalogue whitelist, limits, attributes,
+ * and CSS properties as `applyAppearanceFontSettings` before styles paint. When
+ * `persistedVersion` is supplied, only a record with that exact top-level version
+ * is used; absent or mismatched records receive the System defaults.
+ */
+export function fontSettingsBootstrapScript(storageKey: string, persistedVersion?: number): string {
+  if (persistedVersion !== undefined && !Number.isSafeInteger(persistedVersion)) {
+    throw new RangeError('persistedVersion must be a safe integer')
+  }
+  const axisConfig = JSON.stringify(fontAxisProjection)
+  const fontProjection = JSON.stringify(fontProjectionById)
+  const fontIds = `[${fontOptions.map((option) => safeScriptStringLiteral(option.id)).join(',')}]`
+  const persistedVersionGuard =
+    persistedVersion === undefined
+      ? ''
+      : `&&parsed.version===Number(${safeScriptStringLiteral(String(persistedVersion))})`
+
+  return `(function(){var r=document.documentElement;var axes=JSON.parse(${safeScriptStringLiteral(axisConfig)});var projection=JSON.parse(${safeScriptStringLiteral(fontProjection)});var ids=${fontIds};var has=function(v,k){return Object.prototype.hasOwnProperty.call(v,k)};var record=function(v){return typeof v==='object'&&v!==null&&!Array.isArray(v)};var p={};try{var raw=localStorage.getItem(${safeScriptStringLiteral(storageKey)});var parsed=raw?JSON.parse(raw):{};if(record(parsed)${persistedVersionGuard})p=parsed;}catch(e){}var saved=record(p.fonts)?p.fonts:{};var valid=function(v,d){return ids.indexOf(v)!==-1?v:d};var size=function(v,d){var n=typeof v==='number'?v:typeof v==='string'&&v.trim()!==''?Number(v):NaN;return Number.isFinite(n)?Math.min(${APPEARANCE_EDITOR_FONT_SIZE_MAX},Math.max(${APPEARANCE_EDITOR_FONT_SIZE_MIN},Math.round(n))):d};r.setAttribute('data-font-settings','');for(var axis in axes){if(!has(axes,axis))continue;var spec=axes[axis];var candidate=saved[axis];var value=record(candidate)?candidate:{};var legacyUi=axis==='ui'&&!has(value,'family');var family=legacyUi?valid(p.font,'system'):valid(value.family,'system');var font=projection[family];if(family==='system')r.removeAttribute(spec.familyAttribute);else r.setAttribute(spec.familyAttribute,family);r.style.setProperty(spec.familyProperty,'var('+font.familyVariables[axis]+')');var px=size(value.size,spec.defaultSize);r.style.setProperty(spec.sizeProperty,px+'px');r.style.setProperty(spec.scaleProperty,String(px/spec.defaultSize));if(axis==='ui'){r.style.setProperty('--ui-tracking',font.uiTracking);r.style.setProperty('--ui-word-spacing',font.uiWordSpacing);}}r.removeAttribute('data-font');})();`
+}

package/src/lib/font-catalog.ts

@@ -0,0 +1,80 @@
+/**
+ * Stable font-family choices shared by the appearance editor and its host APIs.
+ *
+ * This stays independent of the theme-token manifest so consumers that need
+ * only font settings do not retain the palette catalogue.
+ */
+// Explicit catalogue choices resolve to the same named face in every role.
+// System Code is the exception: it resolves to the platform monospace stack.
+const FONT_OPTIONS = [
+  {
+    id: 'space-grotesk',
+    label: 'Space Grotesk',
+    description: 'The self-hosted Space Grotesk family.',
+    familyVariables: {
+      ui: '--font-family-space-grotesk',
+      content: '--font-family-space-grotesk',
+      code: '--font-family-space-grotesk',
+    },
+    uiTracking: 'normal',
+    uiWordSpacing: 'normal',
+    stack: 'both',
+  },
+  {
+    id: 'system',
+    label: 'System',
+    description: "The platform's own interface family and system monospace counterpart.",
+    familyVariables: {
+      ui: '--font-family-system',
+      content: '--font-family-system',
+      code: '--font-family-system-mono',
+    },
+    uiTracking: 'normal',
+    uiWordSpacing: 'normal',
+    stack: 'both',
+  },
+  {
+    id: 'geist',
+    label: 'Geist',
+    description: 'The face cortana already ships. Neutral and wide.',
+    familyVariables: {
+      ui: '--font-family-geist',
+      content: '--font-family-geist',
+      code: '--font-family-geist',
+    },
+    uiTracking: 'normal',
+    uiWordSpacing: 'normal',
+    stack: 'both',
+  },
+  {
+    id: 'geist-mono',
+    label: 'Geist Mono',
+    description: 'Monospace throughout, for someone who wants a uniform texture.',
+    familyVariables: {
+      ui: '--font-family-geist-mono',
+      content: '--font-family-geist-mono',
+      code: '--font-family-geist-mono',
+    },
+    uiTracking: '-0.03em',
+    uiWordSpacing: '-1.5px',
+    stack: 'both',
+  },
+  {
+    id: 'jetbrains-mono',
+    label: 'JetBrains Mono',
+    description: 'Monospace throughout, with coding ligatures off.',
+    familyVariables: {
+      ui: '--font-family-jetbrains-mono',
+      content: '--font-family-jetbrains-mono',
+      code: '--font-family-jetbrains-mono',
+    },
+    uiTracking: '-0.04em',
+    uiWordSpacing: '-2.5px',
+    stack: 'both',
+  },
+] as const
+
+/** Stable catalogue record type; saved values never contain CSS family strings. */
+export type FontOption = (typeof FONT_OPTIONS)[number]
+
+export const fontOptions: readonly FontOption[] = Object.freeze(FONT_OPTIONS)

package/src/lib/safe-script.ts

@@ -0,0 +1,7 @@
+/** Escape a string literal for an inline script's JavaScript source. */
+export function safeScriptStringLiteral(value: string): string {
+  return JSON.stringify(value).replace(
+    /[<>\u2028\u2029]/g,
+    (character) => `\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`
+  )
+}

package/src/lib/tokens.ts

@@ -18,6 +18,8 @@
  */
 
 import { ACCENTS } from '@adea-ai/themes'
+export { fontOptions } from './font-catalog'
+export type { FontOption } from './font-catalog'
 
 export type TokenKind =
   | 'color'
@@ -388,20 +390,35 @@ export const radiusTokens: TokenDefinition[] = [
 ]
 
 export const typographyTokens: TokenDefinition[] = [
+  {
+    name: 'font-ui',
+    kind: 'font-family',
+    description: 'The selected family for interface controls, labels and headings.',
+  },
+  {
+    name: 'font-content',
+    kind: 'font-family',
+    description: 'The selected family for prose, transcripts and long-form reading.',
+  },
+  {
+    name: 'font-code',
+    kind: 'font-family',
+    description: 'The selected family for code, terminals, keyboard keys, ids and paths.',
+  },
   {
     name: 'font-sans',
     kind: 'font-family',
-    description: 'The selected interface face. Space Grotesk unless the font axis says otherwise.',
+    description: 'Compatibility alias for the selected UI family.',
   },
   {
     name: 'font-mono',
     kind: 'font-family',
-    description: 'The selected monospace face. Code, terminals, ids, paths.',
+    description: 'Compatibility alias for the selected code family.',
   },
   {
     name: 'font-family-space-grotesk',
     kind: 'font-family',
-    description: 'The interface default, and the face the visual language was drawn against.',
+    description: 'The self-hosted Space Grotesk family.',
   },
   {
     name: 'font-family-jetbrains-mono',
@@ -428,6 +445,36 @@ export const typographyTokens: TokenDefinition[] = [
     kind: 'font-family',
     description: "The platform's own monospace face.",
   },
+  {
+    name: 'font-ui-size',
+    kind: 'dimension',
+    description: 'Runtime-projected interface size in pixels; scales the shared UI text ladder.',
+  },
+  {
+    name: 'font-content-size',
+    kind: 'dimension',
+    description: 'Runtime-projected prose and transcript size in pixels.',
+  },
+  {
+    name: 'font-code-size',
+    kind: 'dimension',
+    description: 'Runtime-projected code, terminal and keyboard-key size in pixels.',
+  },
+  {
+    name: 'font-ui-scale',
+    kind: 'number',
+    description: 'The UI size ratio applied to the interface text ladder.',
+  },
+  {
+    name: 'font-content-scale',
+    kind: 'number',
+    description: 'The content size ratio applied to rem-relative prose text.',
+  },
+  {
+    name: 'font-code-scale',
+    kind: 'number',
+    description: 'The code size ratio applied to rem-relative code text.',
+  },
   {
     name: 'ui-tracking',
     kind: 'text',
@@ -443,13 +490,13 @@ export const typographyTokens: TokenDefinition[] = [
   {
     name: 'text-2xs',
     kind: 'text',
-    description: '11px — the smallest label the system permits: kbd keys, status bar.',
+    description: 'The smallest UI-scaled label: status bar and compact metadata.',
   },
-  { name: 'text-xs', kind: 'text', description: '12px — metadata, badges, secondary rows.' },
+  { name: 'text-xs', kind: 'text', description: 'UI-scaled metadata, badges and secondary rows.' },
   {
     name: 'text-sm',
     kind: 'text',
-    description: '14px — the interface default. Body copy, labels, controls.',
+    description: 'The UI-scaled interface default for labels and controls.',
   },
   { name: 'text-base', kind: 'text', description: '16px — card titles and dialog titles.' },
   { name: 'text-lg', kind: 'text', description: '18px — a section heading inside a page.' },
@@ -458,7 +505,17 @@ export const typographyTokens: TokenDefinition[] = [
   {
     name: 'text-3xl',
     kind: 'text',
-    description: '30px — the largest size in the system. Reserved for an empty-state headline.',
+    description: 'The largest UI-scaled rung. Reserved for an empty-state headline.',
+  },
+  {
+    name: 'text-content',
+    kind: 'text',
+    description: 'The selected content size with the prose line-height.',
+  },
+  {
+    name: 'text-code',
+    kind: 'text',
+    description: 'The selected code size with the code line-height.',
   },
 ]
 
@@ -661,58 +718,6 @@ export const accentPresets: readonly AccentPreset[] = Object.freeze([
   ...ACCENTS,
 ])
 
-/**
- * The font axis.
- *
- * The family is a selection, like the accent: `data-font` sits on the same element
- * and each option swaps the interface face. `space-grotesk` is the default because
- * it is the face the visual language was drawn against, and `system` is a
- * first-class option rather than a fallback — an application that wants the
- * platform's own face should be able to say so without losing the rest of the
- * system.
- */
-export type FontOption = {
-  /** The `data-font` value. `space-grotesk` is the default and needs no attribute. */
-  id: string
-  label: string
-  description: string
-  /** Which of the two stacks this option sets. */
-  stack: 'sans' | 'mono' | 'both'
-}
-
-export const fontOptions: readonly FontOption[] = Object.freeze([
-  {
-    id: 'space-grotesk',
-    label: 'Space Grotesk',
-    description: 'The default, and the face the visual language was drawn against.',
-    stack: 'both',
-  },
-  {
-    id: 'system',
-    label: 'System',
-    description: "The platform's own face. What a terminal or editor usually wants.",
-    stack: 'both',
-  },
-  {
-    id: 'geist',
-    label: 'Geist',
-    description: 'The face cortana already ships. Neutral and wide.',
-    stack: 'both',
-  },
-  {
-    id: 'geist-mono',
-    label: 'Geist Mono',
-    description: 'Monospace throughout, for someone who wants a uniform texture.',
-    stack: 'both',
-  },
-  {
-    id: 'jetbrains-mono',
-    label: 'JetBrains Mono',
-    description: 'Monospace throughout, with coding ligatures off.',
-    stack: 'both',
-  },
-])
-
 /** Every token, in gallery order. */
 export const designTokens = {
   color: colorTokens,