@adea-ai/ui 0.62.0 → 0.63.1

package/dist/index.js

@@ -82,8 +82,10 @@ import { AccountMenu } from "./components/composites/account-menu/account-menu.j
 import { ListGroup, ListRow } from "./components/composites/list-row/list-row.js";
 import { SettingsField, SettingsPage, SettingsRow, SettingsSection } from "./components/composites/settings/settings.js";
 import { PropertyList, PropertyRow, PropertyTerm, PropertyValue, Stat, StatGroup } from "./components/composites/stat/stat.js";
+import { PalettePreview, ThemeMiniature, ThemeMiniatureSplit } from "./components/composites/appearance-editor/theme-preview.js";
+import { AppearanceEditor, AppearancePopover } from "./components/composites/appearance-editor/appearance-editor.js";
 import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "./lib/version-notes.js";
 import { UpdateDialog } from "./components/composites/update-dialog/update-dialog.js";
 import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
 import { keyedRows } from "./lib/keyed-rows.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearancePanel, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EntityIcon, Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavSection, SidebarNavTitle, Skeleton, Slider, Spinner, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, UpdateDialog, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, cn, colorTokens, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, fontOptions, formatBytes, formatReleaseDate, initialsFrom, inlineScriptLiteral, itemVariants, keyedRows, monogram, motionTokens, parseDiff, plainTextFromMarkdown, radiusTokens, resolvedDensity, sheetVariants, sidebarNavItemClass, sidebarNavItemStateClass, statusDotVariants, surfaceInteractive, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, typographyTokens, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, zIndexTokens };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EntityIcon, Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavSection, SidebarNavTitle, Skeleton, Slider, Spinner, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, UpdateDialog, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, cn, colorTokens, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, fontOptions, formatBytes, formatReleaseDate, initialsFrom, inlineScriptLiteral, itemVariants, keyedRows, monogram, motionTokens, parseDiff, plainTextFromMarkdown, radiusTokens, resolvedDensity, sheetVariants, sidebarNavItemClass, sidebarNavItemStateClass, statusDotVariants, surfaceInteractive, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, typographyTokens, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, zIndexTokens };

package/dist/r/appearance-editor.json

@@ -0,0 +1,51 @@
+{
+  "name": "appearance-editor",
+  "type": "registry:ui",
+  "title": "Appearance Editor",
+  "description": "",
+  "dependencies": [
+    "@adea-ai/themes@^0.5.0",
+    "@kobalte/core@^0.13.14",
+    "lucide-solid@^1.48.0"
+  ],
+  "registryDependencies": [
+    "@adea-ai/ui/button",
+    "@adea-ai/ui/input",
+    "@adea-ai/ui/popover",
+    "@adea-ai/ui/select",
+    "@adea-ai/ui/switch",
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/composites/appearance-editor/appearance-choices.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/appearance-editor/appearance-choices.tsx"
+    },
+    {
+      "path": "src/components/composites/appearance-editor/appearance-editor.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/appearance-editor/appearance-editor.tsx"
+    },
+    {
+      "path": "src/components/composites/appearance-editor/appearance-rows.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/appearance-editor/appearance-rows.tsx"
+    },
+    {
+      "path": "src/components/composites/appearance-editor/appearance-types.ts",
+      "type": "registry:ui",
+      "target": "components/composites/appearance-editor/appearance-types.ts"
+    },
+    {
+      "path": "src/components/composites/appearance-editor/index.ts",
+      "type": "registry:ui",
+      "target": "components/composites/appearance-editor/index.ts"
+    },
+    {
+      "path": "src/components/composites/appearance-editor/theme-preview.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/appearance-editor/theme-preview.tsx"
+    }
+  ]
+}

package/dist/r/registry.json

@@ -1599,6 +1599,57 @@
         }
       ]
     },
+    {
+      "name": "appearance-editor",
+      "type": "registry:ui",
+      "title": "Appearance Editor",
+      "description": "",
+      "dependencies": [
+        "@adea-ai/themes@^0.5.0",
+        "@kobalte/core@^0.13.14",
+        "lucide-solid@^1.48.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/button",
+        "@adea-ai/ui/input",
+        "@adea-ai/ui/popover",
+        "@adea-ai/ui/select",
+        "@adea-ai/ui/switch",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/appearance-editor/appearance-choices.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/appearance-editor/appearance-choices.tsx"
+        },
+        {
+          "path": "src/components/composites/appearance-editor/appearance-editor.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/appearance-editor/appearance-editor.tsx"
+        },
+        {
+          "path": "src/components/composites/appearance-editor/appearance-rows.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/appearance-editor/appearance-rows.tsx"
+        },
+        {
+          "path": "src/components/composites/appearance-editor/appearance-types.ts",
+          "type": "registry:ui",
+          "target": "components/composites/appearance-editor/appearance-types.ts"
+        },
+        {
+          "path": "src/components/composites/appearance-editor/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/appearance-editor/index.ts"
+        },
+        {
+          "path": "src/components/composites/appearance-editor/theme-preview.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/appearance-editor/theme-preview.tsx"
+        }
+      ]
+    },
     {
       "name": "list-row",
       "type": "registry:ui",

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

@@ -0,0 +1,173 @@
+/*
+ * 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.
+ */
+// Pinned mode-card, accent-swatch, and glass-chip composition. Kobalte replaces
+// the app port's manual roving focus; it does not replace the donor hierarchy.
+import { RadioGroup as Radio } from '@kobalte/core/radio-group'
+import { For, Show } from 'solid-js'
+import type { AppearanceEditorProps } from './appearance-types'
+import { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'
+
+const MODES = [
+  { value: 'system', label: 'System' },
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+] as const
+const SURFACES = [
+  { value: 'theme', label: 'Theme default' },
+  { value: 'frosted', label: 'Frosted' },
+  { value: 'opaque', label: 'Opaque' },
+] as const
+
+export function ModeChoices(props: AppearanceEditorProps) {
+  return (
+    <Radio
+      value={props.draft.mode}
+      disabled={props.saving}
+      orientation="horizontal"
+      aria-label="Appearance mode"
+      onChange={(mode) => {
+        const option = MODES.find((candidate) => candidate.value === mode)
+        if (option) props.onChange({ mode: option.value })
+      }}
+      class="grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3"
+    >
+      <For each={MODES}>
+        {(option) => (
+          <Radio.Item
+            value={option.value}
+            data-mode={option.value}
+            class="min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50"
+          >
+            <Radio.ItemInput />
+            <Radio.ItemLabel class="flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
+              <span class="block h-20 w-full">
+                <Show
+                  when={option.value === 'system'}
+                  fallback={
+                    <ThemeMiniature
+                      theme={option.value === 'light' ? props.lightTheme : props.darkTheme}
+                    />
+                  }
+                >
+                  <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />
+                </Show>
+              </span>
+              <span>{option.label}</span>
+            </Radio.ItemLabel>
+          </Radio.Item>
+        )}
+      </For>
+    </Radio>
+  )
+}
+
+export function AccentChoices(props: AppearanceEditorProps) {
+  const custom = () =>
+    props.draft.accent !== 'theme' &&
+    !props.accentOptions.some((option) => option.id === props.draft.accent)
+  const accentSelection = () => (custom() ? 'custom' : props.draft.accent)
+  return (
+    <Radio
+      value={accentSelection()}
+      disabled={props.saving}
+      orientation="horizontal"
+      aria-label="Accent"
+      class="flex flex-wrap items-center gap-2"
+      onChange={(accent) =>
+        props.onChange({
+          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
+        })
+      }
+    >
+      <Radio.Item value="theme">
+        <Radio.ItemInput />
+        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+          Theme default
+        </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':
+                    (props.draft.mode === 'system'
+                      ? props.resolvedAppearance
+                      : props.draft.mode) === 'light'
+                      ? option.light
+                      : option.dark,
+                }}
+              />
+              <span class="sr-only">{option.label}</span>
+            </Radio.ItemLabel>
+          </Radio.Item>
+        )}
+      </For>
+      <Radio.Item value="custom">
+        <Radio.ItemInput />
+        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+          Custom
+        </Radio.ItemLabel>
+      </Radio.Item>
+    </Radio>
+  )
+}
+
+export function GlassChoices(props: AppearanceEditorProps) {
+  return (
+    <Radio
+      value={props.draft.surface}
+      disabled={props.saving}
+      orientation="horizontal"
+      aria-label="Glass"
+      class="flex flex-wrap gap-1"
+      onChange={(surface) => {
+        const option = SURFACES.find((candidate) => candidate.value === surface)
+        if (option) props.onChange({ surface: option.value })
+      }}
+    >
+      <For each={SURFACES}>
+        {(option) => (
+          <Radio.Item
+            value={option.value}
+            disabled={option.value === 'frosted' && !props.surfaceCapability.frosted}
+            class="rounded-md focus-within:ring-3 focus-within:ring-ring/50"
+          >
+            <Radio.ItemInput />
+            <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
+              {option.label}
+            </Radio.ItemLabel>
+          </Radio.Item>
+        )}
+      </For>
+    </Radio>
+  )
+}

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

@@ -0,0 +1,239 @@
+/*
+ * 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.
+ */
+/*
+ * Composition substantially translated from Zeron settings/appearance.rs and
+ * settings/widgets.rs, pinned at 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59,
+ * preserving Adea's existing appearance-surface.tsx port: System/Light/Dark
+ * miniatures, compact independent theme rows, accent swatches and helper copy,
+ * glass chips, and theme library affordance. Kobalte replaces the port's manual
+ * radio keyboard model. The controlled draft and explicit action ports replace
+ * GPUI globals and app-specific storage/native authority. Save/Cancel/Reset and
+ * custom accent/reduced-transparency are accepted Adea divergences (#425).
+ */
+import { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from 'lucide-solid'
+import { Show, createUniqueId } from 'solid-js'
+import { cn } from '../../../lib/utils'
+import { Button } from '../../ui/button/button'
+import { Input } from '../../ui/input/input'
+
+import { Switch } from '../../ui/switch/switch'
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+} from '../../ui/popover/popover'
+import type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'
+import { ModeChoices, AccentChoices, GlassChoices } from './appearance-choices'
+import { SettingsRow, ThemeRow } from './appearance-rows'
+
+/**
+ * A live editor whose persistence and preview authority belong to its host.
+ * 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.
+ */
+export function AppearanceEditor(props: AppearanceEditorProps) {
+  const errorId = createUniqueId()
+  const saveReasonId = createUniqueId()
+  const custom = () =>
+    props.draft.accent !== 'theme' &&
+    !props.accentOptions.some((option) => option.id === props.draft.accent)
+  const accentDescription = () => {
+    if (props.draft.accent === 'theme') return "Theme default · Uses the palette's intended color."
+    const name = props.accentOptions.find((option) => option.id === props.draft.accent)?.label
+    return `${name ?? 'Custom'} · Controls, glyphs, selections, code, and activity.`
+  }
+  const glassDescription = () =>
+    props.draft.surface === 'opaque'
+      ? 'Solid surfaces for every theme.'
+      : props.draft.surface === 'frosted'
+        ? 'Theme-colored glass where supported.'
+        : (props.surfaceCapability.themeDefaultDescription ?? "Uses this theme's default surface.")
+  return (
+    <div data-appearance-editor class={cn('min-w-0', props.class)}>
+      <Show when={props.recoveryNotice}>
+        <p role="status" class="px-4 py-2 text-sm text-muted-foreground">
+          {props.recoveryNotice}
+        </p>
+      </Show>
+      <ModeChoices {...props} />
+      <div class="divide-y divide-border rounded-lg border">
+        <ThemeRow
+          appearance="light"
+          selectedId={props.draft.lightThemeId}
+          preview={props.lightTheme}
+          themes={props.themes}
+          disabled={props.saving}
+          onSelect={(lightThemeId) => props.onChange({ lightThemeId })}
+        />
+        <ThemeRow
+          appearance="dark"
+          selectedId={props.draft.darkThemeId}
+          preview={props.darkTheme}
+          themes={props.themes}
+          disabled={props.saving}
+          onSelect={(darkThemeId) => props.onChange({ darkThemeId })}
+        />
+        <SettingsRow
+          stacked
+          title="Accent"
+          icon={<SlidersHorizontal />}
+          description={accentDescription()}
+        >
+          <AccentChoices {...props} />
+        </SettingsRow>
+        <Show when={custom()}>
+          <div class="px-4 py-3">
+            <label class="mb-2 block text-xs font-medium" for={`${errorId}-input`}>
+              Custom accent
+            </label>
+            <Input
+              id={`${errorId}-input`}
+              value={props.draft.accent}
+              disabled={props.saving}
+              aria-invalid={!!props.customAccentError}
+              aria-describedby={props.customAccentError ? errorId : undefined}
+              onInput={(event) => props.onChange({ accent: event.currentTarget.value })}
+            />
+            <Show when={props.customAccentError}>
+              <p id={errorId} role="alert" class="mt-1 text-xs text-destructive">
+                {props.customAccentError}
+              </p>
+            </Show>
+          </div>
+        </Show>
+        <SettingsRow title="Glass" icon={<PanelsTopLeft />} description={glassDescription()}>
+          <GlassChoices {...props} />
+        </SettingsRow>
+        <Show when={!props.surfaceCapability.frosted && props.surfaceCapability.reason}>
+          <p role="status" class="px-4 py-2 text-xs text-muted-foreground">
+            {props.surfaceCapability.reason}
+          </p>
+        </Show>
+        <SettingsRow
+          title="Reduce transparency"
+          icon={<EyeOff />}
+          description="Prefer solid surfaces, including during live preview."
+        >
+          <Switch
+            checked={props.draft.reduceTransparency}
+            disabled={props.saving}
+            onChange={(reduceTransparency: boolean) => props.onChange({ reduceTransparency })}
+            aria-label="Reduce transparency"
+          />
+        </SettingsRow>
+        <SettingsRow
+          title="Theme library"
+          icon={<Palette />}
+          description={
+            props.onManageThemes
+              ? 'Manage themes through the application.'
+              : 'Theme import is unavailable.'
+          }
+        >
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            disabled={!props.onManageThemes || props.saving}
+            onClick={() => props.onManageThemes?.()}
+          >
+            Manage themes
+          </Button>
+        </SettingsRow>
+      </div>
+      <Show when={props.saveDisabledReason}>
+        <p id={saveReasonId} role="status" class="px-4 pt-3 text-xs text-muted-foreground">
+          {props.saveDisabledReason}
+        </p>
+      </Show>
+      <div class="flex flex-wrap items-center gap-2 px-4 py-4">
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          disabled={props.saving}
+          onClick={() => props.onReset()}
+        >
+          Reset
+        </Button>
+        <div class="ml-auto flex gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            disabled={props.saving}
+            onClick={() => props.onCancel()}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            disabled={props.saving || !!props.customAccentError || !!props.saveDisabledReason}
+            aria-busy={props.saving}
+            aria-describedby={props.saveDisabledReason ? saveReasonId : undefined}
+            onClick={() => props.onSave()}
+          >
+            {props.saving ? 'Saving…' : 'Save'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** Modal anchoring/dismissal and nested-listbox behavior come from Kobalte.
+ * Its measured available height also bounds scrolling, keeping footer actions
+ * reachable when a narrow popup begins below its trigger. */
+export function AppearancePopover(props: AppearancePopoverProps) {
+  return (
+    <Popover
+      open={props.open}
+      modal
+      onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}
+    >
+      <PopoverTrigger
+        as={Button}
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Appearance settings"
+      >
+        <Palette />
+      </PopoverTrigger>
+      <PopoverContent 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} />
+      </PopoverContent>
+    </Popover>
+  )
+}