@adea-ai/ui 0.61.1 → 0.63.0

package/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/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'