@adea-ai/ui 0.104.3 → 0.106.0

package/src/components/composites/appearance-editor/appearance-choices.tsx

@@ -26,6 +26,7 @@
 import { RadioGroup as Radio } from '@kobalte/core/radio-group'
 import { For, Show } from 'solid-js'
 import { isThemeAccentId } from '#lib/theme-accents'
+import { AccentSwatchGroups } from './accent-swatch-groups'
 import type { AppearanceEditorProps } from './appearance-types'
 import { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'
 
@@ -39,7 +40,6 @@ const SURFACES = [
   { value: 'frosted', label: 'Frosted' },
   { value: 'opaque', label: 'Opaque' },
 ] as const
-
 export function ModeChoices(props: AppearanceEditorProps) {
   return (
     <Radio
@@ -113,89 +113,32 @@ export function AccentChoices(props: AppearanceEditorProps) {
       disabled={props.saving}
       orientation="horizontal"
       aria-label="Accent"
-      // One chip (custom) beside a capped swatch grid: a chip-per-state column
-      // beside a full-width swatch line overflowed the settings sidebar's
-      // control column, so the pair stays a narrow chip plus a wrapped grid.
-      class="flex items-center gap-3"
+      class="flex flex-col items-start gap-3"
       onChange={(accent) =>
         props.onChange({
           accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
         })
       }
     >
-      <div class="grid grid-cols-4 gap-2">
-        {/* The theme's own accent is the first swatch. Picking it is the same
-            act the old dedicated "Theme default" chip performed, without a
-            second control for the state the row starts in. */}
-        <Radio.Item
-          value="theme"
-          class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
-        >
+      <AccentSwatchGroups
+        accentOptions={props.accentOptions}
+        themeAccentOptions={themeAccents()}
+        resolvedAppearance={resolvedAppearance()}
+        themeDefaultColor={
+          resolvedAppearance() === 'light'
+            ? props.lightTheme.colors.accent
+            : props.darkTheme.colors.accent
+        }
+      />
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-medium text-muted-foreground">Custom</span>
+        <Radio.Item value="custom">
           <Radio.ItemInput />
-          <Radio.ItemLabel class="block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-            <span
-              class="block size-full rounded-full"
-              aria-hidden="true"
-              style={{
-                'background-color':
-                  resolvedAppearance() === 'light'
-                    ? props.lightTheme.colors.accent
-                    : props.darkTheme.colors.accent,
-              }}
-            />
-            <span class="sr-only">Theme default</span>
+          <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+            Custom
           </Radio.ItemLabel>
         </Radio.Item>
-        <For each={props.accentOptions}>
-          {(option) => (
-            <Radio.Item
-              value={option.id}
-              class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
-            >
-              <Radio.ItemInput />
-              <Radio.ItemLabel class="block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-                <span
-                  class="block size-full rounded-full"
-                  aria-hidden="true"
-                  style={{
-                    'background-color':
-                      resolvedAppearance() === 'light' ? option.light : option.dark,
-                  }}
-                />
-                <span class="sr-only">{option.label}</span>
-              </Radio.ItemLabel>
-            </Radio.Item>
-          )}
-        </For>
-        <For each={themeAccents()}>
-          {(option) => (
-            <Radio.Item
-              value={option.id}
-              data-theme-accent={option.id}
-              class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
-            >
-              <Radio.ItemInput />
-              <Radio.ItemLabel class="block size-7 cursor-pointer rounded-full border border-dashed p-0.5 data-[checked]:border-solid data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-                <span
-                  class="block size-full rounded-full"
-                  aria-hidden="true"
-                  style={{
-                    'background-color':
-                      resolvedAppearance() === 'light' ? option.light : option.dark,
-                  }}
-                />
-                <span class="sr-only">{`Theme ${option.label.toLowerCase()}`}</span>
-              </Radio.ItemLabel>
-            </Radio.Item>
-          )}
-        </For>
       </div>
-      <Radio.Item value="custom">
-        <Radio.ItemInput />
-        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-          Custom
-        </Radio.ItemLabel>
-      </Radio.Item>
     </Radio>
   )
 }

package/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -32,10 +32,12 @@
  * custom accent/reduced-transparency are accepted Adea divergences (#425).
  */
 import { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from 'lucide-solid'
-import { Show, createUniqueId } from 'solid-js'
+import { Show, createSignal, createUniqueId } from 'solid-js'
 import { cn } from '#lib/utils'
 import { Button } from '../../ui/button/button'
 import { Input } from '../../ui/input/input'
+import { AppearanceFontSettingsGroup } from './font-settings-group'
+import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '#lib/appearance-font-settings'
 
 import { Switch } from '../../ui/switch/switch'
 import {
@@ -54,8 +56,8 @@ import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
  * No ThemeProvider is required, and no catalogue, renderer engine or storage is
  * imported. Hosts normalize unknown IDs and custom colors, report recovery,
  * snapshot on open, preview on changes, commit on Save, and restore on dismissal.
- * Both theme rows remain mounted when mode changes. Typeface/density axes are
- * deliberately absent from Adea #425's accepted surface.
+ * Both theme rows remain mounted when mode changes. Density remains outside the
+ * accepted appearance surface; typeface settings are shared and host-persisted.
  */
 export function AppearanceEditor(props: AppearanceEditorProps) {
   const errorId = createUniqueId()
@@ -140,6 +142,12 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
             </Show>
           </div>
         </Show>
+        <AppearanceFontSettingsGroup
+          settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}
+          menuPortalMount={props.menuPortalMount}
+          disabled={props.saving}
+          onChange={(fonts) => props.onChange({ fonts })}
+        />
         <SettingsRow title="Glass" icon={<PanelsTopLeft />} description={glassDescription()}>
           <GlassChoices {...props} />
         </SettingsRow>
@@ -188,7 +196,7 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
       {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
           editor scrolls with its host panel, and actions parked at the bottom
           of a long form were unreachable without scrolling past every row. */}
-      <div class="sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3">
+      <div class="global-appearance-editor-actions sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3">
         <Button
           type="button"
           size="sm"
@@ -228,6 +236,8 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
  * Its measured available height also bounds scrolling, keeping footer actions
  * reachable when a narrow popup begins below its trigger. */
 export function AppearancePopover(props: AppearancePopoverProps) {
+  const [menuPortalMount, setMenuPortalMount] = createSignal<HTMLElement>()
+
   return (
     <Popover
       open={props.open}
@@ -243,12 +253,15 @@ export function AppearancePopover(props: AppearancePopoverProps) {
       >
         <Palette />
       </PopoverTrigger>
-      <PopoverContent class="w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto">
+      <PopoverContent
+        ref={setMenuPortalMount}
+        class="w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto"
+      >
         <PopoverTitle>Appearance</PopoverTitle>
         <PopoverDescription>
           Changes preview immediately. Save keeps them; Cancel restores the previous appearance.
         </PopoverDescription>
-        <AppearanceEditor {...props} />
+        <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} />
       </PopoverContent>
     </Popover>
   )

package/src/components/composites/appearance-editor/appearance-types.ts

@@ -1,4 +1,5 @@
 import type { AccentPreset, AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'
+import type { AppearanceEditorFontSettings } from '#lib/appearance-font-settings'
 
 export type AppearanceDraft = Readonly<{
   mode: 'system' | 'light' | 'dark'
@@ -13,6 +14,12 @@ export type AppearanceDraft = Readonly<{
   terminalThemeId?: string
   /** Theme default, a canonical preset id, or the host's custom accent draft. */
   accent: string
+  /**
+   * The UI, content and code typeface axes. Optional for compatibility with
+   * hosts upgrading from the earlier appearance contract; omitted means the
+   * shared System defaults.
+   */
+  fonts?: AppearanceEditorFontSettings
   surface: 'theme' | 'frosted' | 'opaque'
   reduceTransparency: boolean
 }>
@@ -45,6 +52,8 @@ export type AppearanceEditorProps = {
   surfaceCapability: { frosted: boolean; reason?: string; themeDefaultDescription?: string }
   /** Undefined means theme import is unavailable, never a working-looking action. */
   onManageThemes?: () => void
+  /** Mount nested font menus inside the containing overlay when one exists. */
+  menuPortalMount?: HTMLElement
   class?: string
 }
 

package/src/components/composites/appearance-editor/font-settings-group.tsx

@@ -0,0 +1,350 @@
+import { BookOpen, ChevronDown, Code2, PanelsTopLeft } from 'lucide-solid'
+import { For, createMemo, createSignal, createUniqueId } from 'solid-js'
+import { fontOptions } from '#lib/font-catalog'
+import { Button } from '../../ui/button/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-menu/dropdown-menu'
+import { InputControl } from '../../ui/input/input-control'
+import { SettingsRow } from './appearance-rows'
+import {
+  APPEARANCE_EDITOR_FONT_SIZE_MAX,
+  APPEARANCE_EDITOR_FONT_SIZE_MIN,
+  normalizeAppearanceEditorFontSettings,
+  normalizeAppearanceEditorFontSize,
+  type AppearanceEditorFontAxis,
+  type AppearanceEditorFontFamilyId,
+  type AppearanceEditorFontSettings,
+} from '#lib/appearance-font-settings'
+
+export type AppearanceFontSettingsGroupProps = {
+  settings: AppearanceEditorFontSettings
+  menuPortalMount?: HTMLElement
+  onChange: (settings: AppearanceEditorFontSettings) => void
+  disabled?: boolean
+}
+
+const FONT_ROWS = [
+  {
+    axis: 'ui',
+    label: 'UI',
+    description: 'Controls and interface labels.',
+    icon: PanelsTopLeft,
+  },
+  {
+    axis: 'content',
+    label: 'Content',
+    description: 'Reading and long-form text.',
+    icon: BookOpen,
+  },
+  {
+    axis: 'code',
+    label: 'Code',
+    description: 'Code, terminals, and file paths.',
+    icon: Code2,
+  },
+] as const satisfies readonly {
+  axis: AppearanceEditorFontAxis
+  label: string
+  description: string
+  icon: typeof PanelsTopLeft
+}[]
+
+const catalogFontOptions = fontOptions.filter((option) => option.id !== 'system')
+const MENU_FOCUS_TARGET_SELECTOR =
+  'a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type'
+
+function isMenuTabStop(element: HTMLElement) {
+  return (
+    (element.tabIndex >= 0 ||
+      (element.matches('details > summary:first-of-type') && !element.hasAttribute('tabindex'))) &&
+    !element.matches(':disabled') &&
+    element.getAttribute('aria-disabled') !== 'true' &&
+    element.closest('[hidden], [inert], [aria-hidden="true"]') === null &&
+    element.getClientRects().length > 0
+  )
+}
+
+function FontFamilyMenu(props: {
+  label: string
+  family: AppearanceEditorFontFamilyId
+  menuPortalMount?: HTMLElement
+  disabled?: boolean
+  onSelect: (family: AppearanceEditorFontFamilyId) => void
+}) {
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  const [restoreTriggerFocus, setRestoreTriggerFocus] = createSignal(false)
+  const [triggerElement, setTriggerElement] = createSignal<HTMLButtonElement>()
+  let focusTargetAfterTab: HTMLElement | undefined
+
+  const moveFocusOnTab = (event: KeyboardEvent) => {
+    if (event.key !== 'Tab' || event.isComposing) return
+
+    const trigger = triggerElement()
+    const owner = props.menuPortalMount
+    const parentDialog = owner?.closest<HTMLElement>('[role="dialog"]')
+    const focusScope = parentDialog ?? owner?.ownerDocument.body
+    if (!trigger || !parentDialog || !focusScope) return
+
+    const focusStops = Array.from(focusScope.querySelectorAll<HTMLElement>('*')).filter(
+      (element) =>
+        isMenuTabStop(element) &&
+        element.closest('[role="menu"], [hidden], [inert], [aria-hidden="true"]') === null
+    )
+    const orderedFocusStops = [
+      ...focusStops
+        .filter((element) => element.tabIndex > 0)
+        .toSorted((a, b) => a.tabIndex - b.tabIndex),
+      ...focusStops.filter((element) => element.tabIndex <= 0),
+    ]
+    const triggerIndex = orderedFocusStops.indexOf(trigger)
+    if (triggerIndex < 0) return
+    const direction = event.shiftKey ? -1 : 1
+    const adjacent =
+      orderedFocusStops[triggerIndex + direction] ??
+      (direction > 0 ? orderedFocusStops[0] : orderedFocusStops.at(-1))
+
+    event.stopPropagation()
+    setRestoreTriggerFocus(false)
+    if (adjacent) {
+      event.preventDefault()
+      focusTargetAfterTab = adjacent
+      setMenuOpen(false)
+      adjacent.focus({ preventScroll: true })
+    } else {
+      focusTargetAfterTab = undefined
+      setMenuOpen(false)
+    }
+  }
+  const selectedLabel = () =>
+    fontOptions.find((option) => option.id === props.family)?.label ??
+    fontOptions.find((option) => option.id === 'system')?.label ??
+    'System'
+
+  return (
+    <DropdownMenu
+      modal={false}
+      open={menuOpen()}
+      onOpenChange={(open) => {
+        setMenuOpen(open)
+        if (open) setRestoreTriggerFocus(false)
+      }}
+    >
+      <DropdownMenuTrigger
+        ref={setTriggerElement}
+        as={Button}
+        variant="outline"
+        size="sm"
+        aria-label={`${props.label} font family`}
+        disabled={props.disabled}
+        class="w-40 max-w-full justify-between"
+      >
+        <span class="truncate">{selectedLabel()}</span>
+        <ChevronDown aria-hidden="true" class="ms-2 size-4 shrink-0 text-muted-foreground" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        hideArrow
+        portalMount={props.menuPortalMount}
+        class="min-w-48"
+        onFocusOutside={(event) => {
+          // WebKit may briefly focus the owning Popover root while the menu's
+          // focus scope starts. Keep the menu open for that transient target;
+          // genuine focus moves to another control still dismiss it.
+          if (
+            !event.defaultPrevented &&
+            props.menuPortalMount &&
+            event.detail.originalEvent.target === props.menuPortalMount
+          ) {
+            setRestoreTriggerFocus(true)
+            event.preventDefault()
+          } else if (
+            event.detail.originalEvent.target instanceof HTMLElement &&
+            props.menuPortalMount?.contains(event.detail.originalEvent.target)
+          ) {
+            setRestoreTriggerFocus(false)
+          }
+        }}
+        onInteractOutside={(event) => {
+          if (event.detail.originalEvent.type !== 'pointerdown') return
+          const owner = props.menuPortalMount
+          const target = event.detail.originalEvent.target
+          if (!(target instanceof Element) || !owner?.contains(target)) return
+
+          const focusTarget = target.closest<HTMLElement>(MENU_FOCUS_TARGET_SELECTOR)
+          setRestoreTriggerFocus(!focusTarget || !isMenuTabStop(focusTarget))
+        }}
+        onKeyDown={moveFocusOnTab}
+        onEscapeKeyDown={() => setRestoreTriggerFocus(true)}
+        onCloseAutoFocus={(event) => {
+          if (menuOpen()) {
+            event.preventDefault()
+            return
+          }
+          if (focusTargetAfterTab) {
+            const focusTarget = focusTargetAfterTab
+            focusTargetAfterTab = undefined
+            event.preventDefault()
+            queueMicrotask(() => {
+              if (!menuOpen() && focusTarget.isConnected) {
+                focusTarget.focus({ preventScroll: true })
+              }
+            })
+            return
+          }
+          if (!restoreTriggerFocus()) return
+
+          event.preventDefault()
+          setRestoreTriggerFocus(false)
+          const trigger = triggerElement()
+          if (
+            trigger?.isConnected &&
+            !trigger.disabled &&
+            trigger.closest('[hidden], [inert], [aria-hidden="true"]') === null &&
+            trigger.getClientRects().length > 0
+          ) {
+            trigger.focus({ preventScroll: true })
+          }
+        }}
+      >
+        <DropdownMenuRadioGroup
+          value={props.family}
+          aria-label={`${props.label} system font`}
+          onChange={(family) => {
+            if (family === 'system') props.onSelect('system')
+          }}
+        >
+          <DropdownMenuRadioItem value="system" closeOnSelect>
+            System
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup
+          value={props.family}
+          aria-label={`${props.label} available fonts`}
+          onChange={(family) => {
+            const option = fontOptions.find((candidate) => candidate.id === family)
+            if (option && option.id !== 'system') props.onSelect(option.id)
+          }}
+        >
+          <For each={catalogFontOptions}>
+            {(option) => (
+              <DropdownMenuRadioItem value={option.id} closeOnSelect>
+                {option.label}
+              </DropdownMenuRadioItem>
+            )}
+          </For>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+/** Controlled font controls shared by AppearanceEditor and host-owned settings. */
+export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupProps) {
+  const [sizeDrafts, setSizeDrafts] = createSignal<
+    Partial<Record<AppearanceEditorFontAxis, string>>
+  >({})
+  const sizeHintPrefix = createUniqueId()
+  const settings = createMemo(() => normalizeAppearanceEditorFontSettings(props.settings).settings)
+
+  const updateAxis = (
+    axis: AppearanceEditorFontAxis,
+    patch: { family?: AppearanceEditorFontFamilyId; size?: number }
+  ) => {
+    const current = settings()
+    props.onChange({
+      ...current,
+      [axis]: {
+        ...current[axis],
+        ...patch,
+      },
+    })
+  }
+
+  const commitSize = (axis: AppearanceEditorFontAxis) => {
+    const input = sizeDrafts()[axis]
+    if (input === undefined) return
+    const size = normalizeAppearanceEditorFontSize(input, settings()[axis].size)
+    setSizeDrafts((current) => {
+      const next = { ...current }
+      delete next[axis]
+      return next
+    })
+    if (size !== settings()[axis].size) updateAxis(axis, { size })
+  }
+
+  return (
+    <div class="global-appearance-font-settings">
+      <For each={FONT_ROWS}>
+        {(row) => {
+          const Icon = row.icon
+          const value = () => settings()[row.axis]
+          const inputValue = () => sizeDrafts()[row.axis] ?? String(value().size)
+          const sizeHintId = `${sizeHintPrefix}-${row.axis}-font-size-help`
+          const sizeIsInvalid = () => {
+            const draft = sizeDrafts()[row.axis]
+            if (draft === undefined || draft.trim() === '') return false
+            const parsed = Number(draft)
+            return (
+              !Number.isFinite(parsed) ||
+              !Number.isInteger(parsed) ||
+              parsed < APPEARANCE_EDITOR_FONT_SIZE_MIN ||
+              parsed > APPEARANCE_EDITOR_FONT_SIZE_MAX
+            )
+          }
+          return (
+            <SettingsRow title={row.label} icon={<Icon />} description={row.description}>
+              <div class="flex min-w-0 max-w-full flex-wrap items-center gap-2">
+                <FontFamilyMenu
+                  label={row.label}
+                  family={value().family}
+                  menuPortalMount={props.menuPortalMount}
+                  disabled={props.disabled}
+                  onSelect={(family) => updateAxis(row.axis, { family })}
+                />
+                <div class="flex shrink-0 items-center gap-1">
+                  <InputControl
+                    type="number"
+                    min={APPEARANCE_EDITOR_FONT_SIZE_MIN}
+                    max={APPEARANCE_EDITOR_FONT_SIZE_MAX}
+                    step={1}
+                    value={inputValue()}
+                    disabled={props.disabled}
+                    aria-label={`${row.label} font size in pixels`}
+                    aria-describedby={sizeHintId}
+                    aria-invalid={sizeIsInvalid()}
+                    class="w-16"
+                    onInput={(event) =>
+                      setSizeDrafts((current) => ({
+                        ...current,
+                        [row.axis]: event.currentTarget.value,
+                      }))
+                    }
+                    onBlur={() => commitSize(row.axis)}
+                    onKeyDown={(event) => {
+                      if (event.key !== 'Enter') return
+                      event.preventDefault()
+                      commitSize(row.axis)
+                    }}
+                  />
+                  <span aria-hidden="true" class="text-xs text-muted-foreground">
+                    px
+                  </span>
+                </div>
+                <span id={sizeHintId} class="sr-only">
+                  Enter a whole number from {APPEARANCE_EDITOR_FONT_SIZE_MIN} to{' '}
+                  {APPEARANCE_EDITOR_FONT_SIZE_MAX} pixels.
+                </span>
+              </div>
+            </SettingsRow>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

package/src/components/composites/appearance-editor/index.ts

@@ -1,4 +1,23 @@
 export { AppearanceEditor, AppearancePopover } from './appearance-editor'
+export {
+  AppearanceFontSettingsGroup,
+  type AppearanceFontSettingsGroupProps,
+} from './font-settings-group'
+export {
+  APPEARANCE_EDITOR_FONT_AXES,
+  APPEARANCE_EDITOR_FONT_SIZE_MAX,
+  APPEARANCE_EDITOR_FONT_SIZE_MIN,
+  DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS,
+  applyAppearanceFontSettings,
+  fontSettingsBootstrapScript,
+  normalizeAppearanceEditorFontSettings,
+  normalizeAppearanceEditorFontSize,
+  type AppearanceEditorFontAxis,
+  type AppearanceEditorFontFamilyId,
+  type AppearanceEditorFontSetting,
+  type AppearanceEditorFontSettings,
+  type NormalizedAppearanceEditorFontSettings,
+} from '#lib/appearance-font-settings'
 export type {
   AppearanceDraft,
   AppearanceEditorProps,

package/src/components/composites/update-dialog/update-dialog.tsx

@@ -857,7 +857,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
                   stop, named by the heading above it, or a keyboard user cannot
                   scroll it (`scrollable-region-focusable`). */}
               <div
-                class="max-h-52 overflow-y-auto rounded-xl border border-border bg-background/45 p-4 font-mono text-xs leading-5 whitespace-pre-wrap text-muted-foreground"
+                class="max-h-52 overflow-y-auto rounded-xl border border-border bg-background/45 p-4 font-code text-code leading-5 whitespace-pre-wrap text-muted-foreground"
                 role="region"
                 aria-labelledby="update-release-notes"
                 tabindex="0"
@@ -886,7 +886,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
                   stop, named by the heading above it, or a keyboard user cannot
                   scroll it (`scrollable-region-focusable`). */}
               <div
-                class="max-h-72 overflow-y-auto rounded-xl border border-border bg-background/45 p-4 font-mono text-xs leading-5 whitespace-pre-wrap text-muted-foreground"
+                class="max-h-72 overflow-y-auto rounded-xl border border-border bg-background/45 p-4 font-code text-code leading-5 whitespace-pre-wrap text-muted-foreground"
                 role="region"
                 aria-labelledby="update-changelog"
                 tabindex="0"

package/src/components/conversation/message-row.tsx

@@ -141,10 +141,14 @@ export function MessageRow(props: MessageRowProps) {
               that repeats every speaker's name in every bubble is one nobody reads. */}
           <span class="visually-hidden">{local.senderName}</span>
 
-          <div data-slot="message-body" class="text-sm">
+          <div data-slot="message-body" class="font-content text-content">
             <Show
               when={!local.deleted}
-              fallback={<p class="text-muted-foreground italic">Message deleted</p>}
+              fallback={
+                <p class="font-content text-content text-muted-foreground italic">
+                  Message deleted
+                </p>
+              }
             >
               {local.children}
             </Show>
@@ -376,7 +380,7 @@ function Prose(props: { text: string }) {
   const parts = () => props.text.split(/(`[^`\n]+`)/g).filter(Boolean)
 
   return (
-    <p class="whitespace-pre-wrap">
+    <p class="font-content text-content whitespace-pre-wrap">
       <For each={parts()}>
         {(part) => (
           <Show

package/src/components/conversation/paste-token-editor.tsx

@@ -668,7 +668,7 @@ export function PasteTokenEditor(props: PasteTokenEditorProps) {
               data-slot="paste-token-preview"
               class="bg-scrim text-scrim-foreground z-(--z-tooltip) w-fit max-w-64 rounded-md px-2 py-1 text-xs origin-(--kb-tooltip-content-transform-origin) text-balance data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-expanded:duration-150 data-closed:duration-100"
             >
-              <pre class="m-0 max-h-48 max-w-64 overflow-y-auto whitespace-pre-wrap break-words font-mono">
+              <pre class="m-0 max-h-48 max-w-64 overflow-y-auto whitespace-pre-wrap break-words font-code text-code">
                 {summary().text}
               </pre>
               <Show when={summary().hiddenLines > 0}>