@adea-ai/ui 0.62.0 → 0.63.1

package/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>
+  )
+}

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

@@ -0,0 +1,122 @@
+/*
+ * 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.
+ */
+// Retains the compact divided row and palette-preview selector from the pinned
+// Zeron/Adea composition; Kobalte owns option navigation and nested dismissal.
+import type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'
+import { Show, createMemo, createSignal, type JSX } from 'solid-js'
+import { Palette } from 'lucide-solid'
+import { cn } from '#lib/utils'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select/select'
+import { PalettePreview } from './theme-preview'
+
+export function SettingsRow(props: {
+  title: string
+  icon: JSX.Element
+  description?: JSX.Element
+  stacked?: boolean
+  children: JSX.Element
+}) {
+  return (
+    <section
+      class={cn('flex flex-col gap-3 px-4 py-4', { 'sm:flex-row sm:items-center': !props.stacked })}
+    >
+      <div class="flex min-w-0 flex-1 items-center gap-3">
+        <span
+          class="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-foreground/5 text-muted-foreground [&_svg]:size-4"
+          aria-hidden="true"
+        >
+          {props.icon}
+        </span>
+        <div class="min-w-0">
+          <h3 class="text-sm font-medium">{props.title}</h3>
+          <Show when={props.description}>
+            <div class="mt-0.5 text-xs text-muted-foreground">{props.description}</div>
+          </Show>
+        </div>
+      </div>
+      <div class="min-w-0 shrink-0">{props.children}</div>
+    </section>
+  )
+}
+
+export function ThemeRow(props: {
+  appearance: 'light' | 'dark'
+  selectedId: string
+  preview: AdeaTheme
+  themes: readonly AdeaThemeRecord[]
+  disabled?: boolean
+  onSelect: (id: string) => void
+}) {
+  const [portalMount, setPortalMount] = createSignal<HTMLDivElement>()
+  const options = createMemo(() =>
+    props.themes.filter((theme) => theme.appearance === props.appearance)
+  )
+  const selected = createMemo(
+    () =>
+      options().find((theme) => theme.id === props.selectedId) ??
+      options().find((theme) => theme.id === props.preview.id)
+  )
+  const label = () => (props.appearance === 'light' ? 'Light theme' : 'Dark theme')
+  return (
+    <SettingsRow title={label()} icon={<Palette />}>
+      <div ref={setPortalMount}>
+        <Select
+          modal={false}
+          options={options()}
+          value={selected()}
+          optionValue="id"
+          optionTextValue="name"
+          disabled={props.disabled || options().length === 0}
+          onChange={(theme) => {
+            if (theme) props.onSelect(theme.id)
+          }}
+          itemComponent={(item) => (
+            <SelectItem item={item.item}>
+              <PalettePreview theme={item.item.rawValue} />
+              {item.item.rawValue.name}
+            </SelectItem>
+          )}
+        >
+          <SelectTrigger size="sm" aria-label={label()} class="w-full sm:w-52">
+            <SelectValue>
+              {() => (
+                <>
+                  <PalettePreview theme={props.preview} />
+                  <span>{selected()?.name ?? props.preview.name}</span>
+                </>
+              )}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent portalMount={portalMount()} />
+        </Select>
+      </div>
+    </SettingsRow>
+  )
+}

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

@@ -0,0 +1,40 @@
+import type { AccentPreset, AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'
+
+export type AppearanceDraft = Readonly<{
+  mode: 'system' | 'light' | 'dark'
+  lightThemeId: string
+  darkThemeId: string
+  /** Theme default, a canonical preset id, or the host's custom accent draft. */
+  accent: string
+  surface: 'theme' | 'frosted' | 'opaque'
+  reduceTransparency: boolean
+}>
+
+export type AppearanceEditorProps = {
+  draft: AppearanceDraft
+  /** Resolved preview themes, including the host's validated accent overlay. */
+  lightTheme: AdeaTheme
+  darkTheme: AdeaTheme
+  resolvedAppearance: 'light' | 'dark'
+  themes: readonly AdeaThemeRecord[]
+  accentOptions: readonly AccentPreset[]
+  onChange: (patch: Partial<AppearanceDraft>) => void
+  onSave: () => void
+  onCancel: () => void
+  onReset: () => void
+  customAccentError?: string
+  customAccentValue?: string
+  saveDisabledReason?: string
+  saving?: boolean
+  recoveryNotice?: string
+  surfaceCapability: { frosted: boolean; reason?: string; themeDefaultDescription?: string }
+  /** Undefined means theme import is unavailable, never a working-looking action. */
+  onManageThemes?: () => void
+  class?: string
+}
+
+export type AppearancePopoverProps = AppearanceEditorProps & {
+  open: boolean
+  onOpen: () => void
+  onDismiss: () => void
+}

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

@@ -0,0 +1,12 @@
+export { AppearanceEditor, AppearancePopover } from './appearance-editor'
+export type {
+  AppearanceDraft,
+  AppearanceEditorProps,
+  AppearancePopoverProps,
+} from './appearance-types'
+export {
+  ThemeMiniature,
+  ThemeMiniatureSplit,
+  PalettePreview,
+  type ThemeMiniatureProps,
+} from './theme-preview'

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

@@ -0,0 +1,128 @@
+/*
+ * 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.
+ */
+/*
+ * Substantially translated from Zeron crates/ui/src/settings/appearance.rs
+ * `bar`, `miniature`, `miniature_split`, and `palette_preview`, revision
+ * 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59, via Adea's existing
+ * packages/ui/src/components/theme-preview.tsx adaptation.
+ * Retains the sidebar/pane decomposition, exact bar fractions and opacity,
+ * split outer corners, and three-band palette strip. GPUI and Adea's local
+ * ThemeVariant are replaced by Solid and the canonical AdeaTheme schema.
+ * Dynamic inline colors are theme data; no palette is authored here.
+ */
+import type { AdeaTheme } from '@adea-ai/themes'
+import { For } from 'solid-js'
+import { cn } from '#lib/utils'
+
+export type ThemeMiniatureProps = {
+  theme: AdeaTheme
+  corners?: 'all' | 'left' | 'right'
+  class?: string
+}
+
+function Bar(props: { fraction: number; opacity: number; color: string }) {
+  return (
+    <span
+      class="h-[5px] rounded-[3px]"
+      style={{
+        width: `${Math.round(props.fraction * 100)}%`,
+        'background-color': props.color,
+        opacity: props.opacity,
+      }}
+    />
+  )
+}
+
+export function ThemeMiniature(props: ThemeMiniatureProps) {
+  return (
+    <span
+      data-theme-miniature
+      aria-hidden="true"
+      class={cn(
+        'flex size-full overflow-hidden',
+        {
+          'rounded-md': !props.corners || props.corners === 'all',
+          'rounded-l-md': props.corners === 'left',
+          'rounded-r-md': props.corners === 'right',
+        },
+        props.class
+      )}
+      style={{ 'background-color': props.theme.colors.surface }}
+    >
+      <span class="flex h-full w-11 shrink-0 flex-col gap-[7px] overflow-hidden px-2 pt-3.5">
+        <Bar fraction={0.7} opacity={0.34} color={props.theme.colors.foreground} />
+        <Bar fraction={1} opacity={0.22} color={props.theme.colors.foreground} />
+        <Bar fraction={0.85} opacity={0.22} color={props.theme.colors.foreground} />
+        <Bar fraction={1} opacity={0.22} color={props.theme.colors.foreground} />
+      </span>
+      <span
+        class="my-2 mr-2 flex min-w-0 flex-1 flex-col gap-[7px] overflow-hidden rounded-md border border-(--appearance-preview-border) p-2.5"
+        style={{
+          'background-color': props.theme.colors.background,
+          '--appearance-preview-border': props.theme.colors.border,
+        }}
+      >
+        <Bar fraction={0.62} opacity={0.34} color={props.theme.colors.foreground} />
+        <Bar fraction={0.88} opacity={0.22} color={props.theme.colors.foreground} />
+        <Bar fraction={0.76} opacity={0.22} color={props.theme.colors.foreground} />
+        <Bar fraction={0.52} opacity={0.22} color={props.theme.colors.foreground} />
+      </span>
+    </span>
+  )
+}
+
+export function ThemeMiniatureSplit(props: { light: AdeaTheme; dark: AdeaTheme; class?: string }) {
+  return (
+    <span class={cn('flex size-full', props.class)} aria-hidden="true">
+      <span class="h-full w-1/2 overflow-hidden">
+        <ThemeMiniature theme={props.light} corners="left" />
+      </span>
+      <span class="h-full w-1/2 overflow-hidden">
+        <ThemeMiniature theme={props.dark} corners="right" />
+      </span>
+    </span>
+  )
+}
+
+export function PalettePreview(props: { theme: AdeaTheme; class?: string }) {
+  const bands = () => [
+    props.theme.colors.surface,
+    props.theme.colors.background,
+    props.theme.colors.accent,
+  ]
+  return (
+    <span
+      class={cn(
+        'flex h-[18px] w-[30px] shrink-0 overflow-hidden rounded-[5px] border border-(--appearance-preview-border)',
+        props.class
+      )}
+      aria-hidden="true"
+      style={{ '--appearance-preview-border': props.theme.colors.border }}
+    >
+      <For each={bands()}>
+        {(band) => <span class="h-full w-1/3" style={{ 'background-color': band }} />}
+      </For>
+    </span>
+  )
+}

package/src/components/ui/select/select.tsx

@@ -129,11 +129,16 @@ export function SelectValue(props: SelectValueProps) {
  * which is what makes a Select able to render a typed option rather than a
  * string; `children` here is for content above the list, such as a filter hint.
  */
-export function SelectContent(props: ComponentProps<typeof KobalteSelect.Content>) {
-  const [local, rest] = splitProps(props, ['class', 'children'])
+export type SelectContentProps = ComponentProps<typeof KobalteSelect.Content> & {
+  /** Keep a nested menu inside its enclosing modal's accessible subtree. */
+  portalMount?: HTMLElement
+}
+
+export function SelectContent(props: SelectContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'portalMount'])
 
   return (
-    <KobalteSelect.Portal>
+    <KobalteSelect.Portal mount={local.portalMount}>
       <KobalteSelect.Content
         class={cn(
           'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',

package/src/index.ts

@@ -96,6 +96,7 @@ export * from './components/composites/account-menu'
 export * from './components/composites/list-row'
 export * from './components/composites/settings'
 export * from './components/composites/stat'
+export * from './components/composites/appearance-editor'
 export * from './components/composites/update-dialog'
 export * from './components/composites/workspace-mark'