@adea-ai/ui 0.105.0 → 0.106.0

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}>

package/src/components/layout/side-rail/side-rail.tsx

@@ -301,7 +301,7 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
         <Show when={local.shortcut && local.trailing === undefined}>
           <span
             aria-hidden="true"
-            class="text-sidebar-muted-foreground shrink-0 font-mono text-2xs leading-none opacity-0 transition-opacity group-hover/rail-item:opacity-100 group-focus-visible/rail-item:opacity-100 group-data-[collapsed=true]/rail:hidden"
+            class="text-sidebar-muted-foreground shrink-0 font-code text-code leading-none opacity-0 transition-opacity group-hover/rail-item:opacity-100 group-focus-visible/rail-item:opacity-100 group-data-[collapsed=true]/rail:hidden"
           >
             {local.shortcut}
           </span>
@@ -337,7 +337,7 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
               </span>
               {local.label}
               <Show when={local.shortcut}>
-                <span class="text-muted-foreground shrink-0 font-mono text-2xs leading-none">
+                <span class="text-muted-foreground shrink-0 font-code text-code leading-none">
                   {local.shortcut}
                 </span>
               </Show>
@@ -399,7 +399,7 @@ export function SideRailButton(
         <Show when={local.shortcut}>
           <span
             aria-hidden="true"
-            class="text-sidebar-muted-foreground shrink-0 font-mono text-2xs leading-none opacity-0 transition-opacity group-hover/rail-item:opacity-100 group-focus-visible/rail-item:opacity-100 group-data-[collapsed=true]/rail:hidden"
+            class="text-sidebar-muted-foreground shrink-0 font-code text-code leading-none opacity-0 transition-opacity group-hover/rail-item:opacity-100 group-focus-visible/rail-item:opacity-100 group-data-[collapsed=true]/rail:hidden"
           >
             {local.shortcut}
           </span>

package/src/components/layout/top-bar/top-bar.tsx

@@ -166,7 +166,7 @@ export function TopBarSearch(props: TopBarSearchProps) {
       <Show when={local.shortcut}>
         <kbd
           aria-hidden="true"
-          class="bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex"
+          class="bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-code text-code sm:flex"
         >
           {local.shortcut}
         </kbd>

package/src/components/theme/appearance-panel.tsx

@@ -1,9 +1,12 @@
 import type { ComponentProps } from 'solid-js'
-import { For, Show, splitProps } from 'solid-js'
-import { accentPresets, fontOptions } from '#lib/tokens'
+import { Show, splitProps } from 'solid-js'
+import { RadioGroup as Radio } from '@kobalte/core/radio-group'
+import { accentPresets } from '#lib/tokens'
 import { themesForAppearance } from '#lib/themes'
+import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '#lib/appearance-font-settings'
 import { cn } from '#lib/utils'
-import { Button } from '../ui/button/button'
+import { AccentSwatchGroups } from '../composites/appearance-editor/accent-swatch-groups'
+import { AppearanceFontSettingsGroup } from '../composites/appearance-editor/font-settings-group'
 import { RadioGroup, RadioGroupItem } from '../ui/radio-group/radio-group'
 import { ThemePicker } from './theme-picker'
 import { useTheme } from './theme-provider'
@@ -26,7 +29,7 @@ import { Heading } from '../ui/typography'
  *      setting that keeps changing.
  *   3. **Accent** — adea's presets, then the accents the selected theme pair
  *      carries itself, layered on whichever theme is active.
- *   4. **Font** — the interface face.
+ *   4. **Fonts** — separate families and sizes for interface, content and code.
  *
  * The panel reads and writes the provider's preference and keeps no state of its
  * own, so it cannot disagree with what is applied.
@@ -39,6 +42,11 @@ const DARK_THEMES = themesForAppearance('dark')
 export function AppearancePanel(props: AppearancePanelProps) {
   const [local, rest] = splitProps(props, ['class'])
   const { selection, setSelection, resolvedAppearance, themeAccents } = useTheme()
+  const selectedAccent = () =>
+    accentPresets.some((option) => option.id === selection().accent) ||
+    themeAccents().some((option) => option.id === selection().accent)
+      ? selection().accent
+      : 'theme'
 
   return (
     <div data-slot="appearance-panel" class={cn('flex flex-col gap-8', local.class)} {...rest}>
@@ -101,99 +109,42 @@ export function AppearancePanel(props: AppearancePanelProps) {
             unreadable.
           </p>
         </header>
-        <div role="radiogroup" aria-label="Accent" class="flex flex-wrap gap-2">
-          <For each={accentPresets}>
-            {(preset) => (
-              <AccentOption
-                id={preset.id}
-                label={preset.label}
-                checked={selection().accent === preset.id}
-                swatch={
-                  preset.id === 'theme'
-                    ? 'var(--primary)'
-                    : `var(--accent-${preset.id}, ${preset.dark})`
-                }
-                onSelect={() => setSelection({ accent: preset.id })}
-              />
-            )}
-          </For>
-          {/* The theme's own accents follow the presets. Their values are the
-              theme pair's, so the swatch shows the side that is active now. */}
-          <For each={themeAccents()}>
-            {(accent) => (
-              <AccentOption
-                id={accent.id}
-                label={`Theme ${accent.label.toLowerCase()}`}
-                checked={selection().accent === accent.id}
-                swatch={resolvedAppearance() === 'dark' ? accent.dark : accent.light}
-                onSelect={() => setSelection({ accent: accent.id })}
-              />
-            )}
-          </For>
-        </div>
+        <Radio
+          value={selectedAccent()}
+          onChange={(accent) => setSelection({ accent })}
+          orientation="horizontal"
+          aria-label="Accent"
+          class="flex flex-col items-start gap-3"
+        >
+          <AccentSwatchGroups
+            accentOptions={accentPresets}
+            themeAccentOptions={themeAccents()}
+            resolvedAppearance={resolvedAppearance()}
+            themeDefaultColor="var(--primary)"
+          />
+        </Radio>
       </section>
 
-      {/* --- 4. Font -------------------------------------------------------- */}
+      {/* --- 4. Fonts ------------------------------------------------------- */}
       <section class="flex flex-col gap-3">
         <header class="flex flex-col gap-0.5">
           <Heading as="h2" size="card">
-            Typeface
+            Fonts
           </Heading>
           <p class="max-w-prose text-sm text-muted-foreground">
-            The interface face. Every option is self-hosted, so nothing is fetched at runtime and
-            the choice survives going offline.
+            Choose separate families and sizes for the interface, reading, and code. Font families
+            come from the shared catalogue and are self-hosted.
           </p>
         </header>
-        <RadioGroup
-          value={selection().font}
-          onChange={(value) => setSelection({ font: value as string })}
-          aria-label="Typeface"
-        >
-          <For each={fontOptions}>
-            {(option) => (
-              <RadioGroupItem
-                value={option.id}
-                label={option.label}
-                description={option.description}
-              />
-            )}
-          </For>
-        </RadioGroup>
+        <AppearanceFontSettingsGroup
+          settings={selection().fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}
+          onChange={(fonts) => setSelection({ fonts })}
+        />
       </section>
     </div>
   )
 }
 
-function AccentOption(props: {
-  id: string
-  label: string
-  checked: boolean
-  swatch: string
-  onSelect: () => void
-}) {
-  return (
-    <Button
-      as="button"
-      type="button"
-      variant="outline"
-      size="sm"
-      role="radio"
-      data-accent-option={props.id}
-      aria-checked={props.checked}
-      aria-label={props.label}
-      class={cn({ 'border-ring ring-3 ring-primary-subtle': props.checked })}
-      onClick={() => props.onSelect()}
-    >
-      <span
-        aria-hidden="true"
-        class="size-3 rounded-full border border-border"
-        style={{ 'background-color': props.swatch }}
-      />
-      {props.label}
-    </Button>
-  )
-}
-
 function ThemeSection(props: {
   title: string
   description: string