@adea-ai/ui 0.105.0 → 0.106.0

package/dist/r/src/styles/globals.css

@@ -5,10 +5,13 @@
  * @shadcn/lint discover, so it must stay the file that imports Tailwind.
  *
  *   @import '@adea-ai/ui/globals.css';
+ *   @import '@adea-ai/ui/appearance-font-settings.css'; <- optional role preferences
  *   @import '@adea-ai/ui/fonts.css';   <- optional, self-hosted typefaces
  *
  * A consumer that already imports Tailwind itself should import `theme.css`
- * and `base.css` directly instead, and must not import this file.
+ * and `base.css` directly instead, and must not import this file. The font role
+ * stylesheet stays opt-in so applications that use only the base theme keep
+ * the existing CSS footprint.
  *
  * Tokens live in `theme.css` only. This file must never duplicate them.
  */

package/dist/r/src/styles/theme.css

@@ -525,6 +525,14 @@
   --font-family-geist-mono: 'Geist Mono Variable', 'Geist Mono', monospace;
   --font-family-system: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
   --font-family-system-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  /* Lightweight role defaults keep conversation and code components useful for
+     consumers that have not opted into independent Appearance font settings. */
+  --font-content: var(--font-sans);
+  --font-code: var(--font-mono);
+  --text-content: var(--text-sm);
+  --text-content--line-height: var(--text-sm--line-height);
+  --text-code: 0.75rem;
+  --text-code--line-height: 1.5;
 
   /* Width compensation for the mono UI fonts. `normal` on the proportional face,
      tightened by the `[data-font]` blocks above when the UI font is monospace. */
@@ -776,6 +784,8 @@
 
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
+  --font-content: var(--font-content);
+  --font-code: var(--font-code);
   --font-family-space-grotesk: var(--font-family-space-grotesk);
   --font-family-jetbrains-mono: var(--font-family-jetbrains-mono);
   --font-family-geist: var(--font-family-geist);
@@ -799,6 +809,10 @@
   --text-2xl--line-height: var(--text-2xl--line-height);
   --text-3xl: var(--text-3xl);
   --text-3xl--line-height: var(--text-3xl--line-height);
+  --text-content: var(--text-content);
+  --text-content--line-height: var(--text-content--line-height);
+  --text-code: var(--text-code);
+  --text-code--line-height: var(--text-code--line-height);
 
   --radius-sm: var(--radius-sm);
   --radius-md: var(--radius-md);

package/dist/r/theme.json

@@ -27,6 +27,11 @@
       "type": "registry:style",
       "target": "styles/base.css"
     },
+    {
+      "path": "src/styles/appearance-font-settings.css",
+      "type": "registry:style",
+      "target": "styles/appearance-font-settings.css"
+    },
     {
       "path": "src/styles/fonts.css",
       "type": "registry:style",

package/dist/r/theming.json

@@ -5,9 +5,11 @@
   "description": "",
   "dependencies": [
     "@adea-ai/themes@^0.9.6",
+    "@kobalte/core@^0.13.14",
     "lucide-solid@^1.51.0"
   ],
   "registryDependencies": [
+    "@adea-ai/ui/appearance-editor",
     "@adea-ai/ui/button",
     "@adea-ai/ui/radio-group",
     "@adea-ai/ui/toggle-group",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.105.0",
+  "version": "0.106.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",
@@ -67,6 +67,7 @@
     "./globals.css": "./src/styles/globals.css",
     "./theme.css": "./src/styles/theme.css",
     "./base.css": "./src/styles/base.css",
+    "./appearance-font-settings.css": "./src/styles/appearance-font-settings.css",
     "./fonts.css": "./src/styles/fonts.css",
     "./registry.json": "./registry.json",
     "./package.json": "./package.json",

package/registry.json

@@ -1920,9 +1920,15 @@
         "@adea-ai/ui/input",
         "@adea-ai/ui/popover",
         "@adea-ai/ui/switch",
+        "@adea-ai/ui/theme",
         "lib"
       ],
       "files": [
+        {
+          "path": "src/components/composites/appearance-editor/accent-swatch-groups.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/appearance-editor/accent-swatch-groups.tsx"
+        },
         {
           "path": "src/components/composites/appearance-editor/appearance-choices.tsx",
           "type": "registry:ui",
@@ -1943,6 +1949,11 @@
           "type": "registry:ui",
           "target": "components/composites/appearance-editor/appearance-types.ts"
         },
+        {
+          "path": "src/components/composites/appearance-editor/font-settings-group.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/appearance-editor/font-settings-group.tsx"
+        },
         {
           "path": "src/components/composites/appearance-editor/index.ts",
           "type": "registry:ui",
@@ -2358,9 +2369,11 @@
       "description": "",
       "dependencies": [
         "@adea-ai/themes@^0.9.6",
+        "@kobalte/core@^0.13.14",
         "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/appearance-editor",
         "@adea-ai/ui/button",
         "@adea-ai/ui/radio-group",
         "@adea-ai/ui/toggle-group",
@@ -2452,6 +2465,11 @@
           "type": "registry:style",
           "target": "styles/base.css"
         },
+        {
+          "path": "src/styles/appearance-font-settings.css",
+          "type": "registry:style",
+          "target": "styles/appearance-font-settings.css"
+        },
         {
           "path": "src/styles/fonts.css",
           "type": "registry:style",
@@ -2471,6 +2489,11 @@
       ],
       "registryDependencies": [],
       "files": [
+        {
+          "path": "src/lib/appearance-font-settings.ts",
+          "type": "registry:lib",
+          "target": "lib/appearance-font-settings.ts"
+        },
         {
           "path": "src/lib/clipboard.ts",
           "type": "registry:lib",
@@ -2486,6 +2509,11 @@
           "type": "registry:lib",
           "target": "lib/download.ts"
         },
+        {
+          "path": "src/lib/font-catalog.ts",
+          "type": "registry:lib",
+          "target": "lib/font-catalog.ts"
+        },
         {
           "path": "src/lib/form-field.ts",
           "type": "registry:lib",
@@ -2501,6 +2529,11 @@
           "type": "registry:lib",
           "target": "lib/overlay.ts"
         },
+        {
+          "path": "src/lib/safe-script.ts",
+          "type": "registry:lib",
+          "target": "lib/safe-script.ts"
+        },
         {
           "path": "src/lib/theme-accents.ts",
           "type": "registry:lib",

package/src/components/composites/action-button/action-button.tsx

@@ -161,6 +161,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
         }
       >
         <Tooltip
+          placement={local.tooltipSide ?? 'bottom'}
           open={tooltipOpen()}
           onOpenChange={(open) => {
             if (open && tooltipSuppression()) return
@@ -174,7 +175,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
           >
             {contents()}
           </TooltipTrigger>
-          <TooltipContent side={local.tooltipSide ?? 'bottom'}>{local.tooltip}</TooltipContent>
+          <TooltipContent>{local.tooltip}</TooltipContent>
         </Tooltip>
       </Show>
       <Show when={busy()}>

package/src/components/composites/appearance-editor/accent-swatch-groups.tsx

@@ -0,0 +1,147 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2026 Wing
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { RadioGroup as Radio } from '@kobalte/core/radio-group'
+import { For, Show } from 'solid-js'
+import { cn } from '#lib/utils'
+
+export const PRIMARY_ACCENT_IDS = ['blue', 'green', 'amber', 'cyan', 'pink'] as const
+const primaryAccentIds: ReadonlySet<string> = new Set(PRIMARY_ACCENT_IDS)
+
+type AccentOption = Readonly<{
+  id: string
+  label: string
+  light?: string
+  dark?: string
+}>
+
+type AccentSwatchGroupsProps = {
+  accentOptions: readonly AccentOption[]
+  themeAccentOptions: readonly AccentOption[]
+  resolvedAppearance: 'light' | 'dark'
+  themeDefaultColor: string
+}
+
+export function AccentSwatchGroups(props: AccentSwatchGroupsProps) {
+  const primaryAccents = () =>
+    PRIMARY_ACCENT_IDS.flatMap((id) => {
+      const option = props.accentOptions.find((candidate) => candidate.id === id)
+      return option ? [option] : []
+    })
+  const additionalAccents = () =>
+    props.accentOptions.filter(
+      (option) => option.id !== 'theme' && !primaryAccentIds.has(option.id)
+    )
+
+  return (
+    <>
+      <div class="grid grid-cols-3 gap-2" data-primary-accent-grid>
+        <AccentSwatch
+          id="theme"
+          label="Theme default"
+          color={props.themeDefaultColor}
+          group="primary"
+        />
+        <For each={primaryAccents()}>
+          {(option) => (
+            <AccentSwatch
+              id={option.id}
+              label={option.label}
+              color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
+              group="primary"
+            />
+          )}
+        </For>
+      </div>
+      <Show when={additionalAccents().length > 0}>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-muted-foreground">Additional colors</span>
+          <div class="flex flex-wrap gap-2">
+            <For each={additionalAccents()}>
+              {(option) => (
+                <AccentSwatch
+                  id={option.id}
+                  label={option.label}
+                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
+                  group="additional"
+                />
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+      <Show when={props.themeAccentOptions.length > 0}>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-muted-foreground">Theme accents</span>
+          <div class="grid grid-cols-3 gap-2">
+            <For each={props.themeAccentOptions}>
+              {(option) => (
+                <AccentSwatch
+                  id={option.id}
+                  label={'Theme ' + option.label.toLowerCase()}
+                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
+                  group="theme"
+                  dashed
+                />
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </>
+  )
+}
+
+function AccentSwatch(props: {
+  id: string
+  label: string
+  color: string
+  group: 'primary' | 'additional' | 'theme'
+  dashed?: boolean
+}) {
+  return (
+    <Radio.Item
+      value={props.id}
+      data-accent-option={props.id}
+      data-primary-accent={props.group === 'primary' ? props.id : undefined}
+      data-additional-accent={props.group === 'additional' ? props.id : undefined}
+      data-theme-accent={props.group === 'theme' ? props.id : undefined}
+      class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
+    >
+      <Radio.ItemInput />
+      <Radio.ItemLabel
+        class={cn(
+          'block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',
+          { 'border-dashed data-[checked]:border-solid': props.dashed }
+        )}
+      >
+        <span
+          class="block size-full rounded-full"
+          aria-hidden="true"
+          style={{ 'background-color': props.color }}
+        />
+        <span class="sr-only">{props.label}</span>
+      </Radio.ItemLabel>
+    </Radio.Item>
+  )
+}

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
 }