@adea-ai/ui 0.62.0 → 0.63.1

package/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.62.0",
+  "version": "0.63.1",
   "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",
@@ -78,7 +78,8 @@
     "check:tree-shaking": "bun scripts/check-tree-shaking.ts",
     "theme:build": "bun scripts/build-default-theme.ts",
     "theme:check": "bun scripts/build-default-theme.ts --check",
-    "check:packed-consumer": "bun scripts/check-packed-consumer.ts"
+    "check:packed-consumer": "bun scripts/check-packed-consumer.ts",
+    "check:packed-appearance": "bun scripts/check-packed-appearance.ts"
   },
   "dependencies": {
     "@adea-ai/themes": "^0.5.0",

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