@adea-ai/ui 0.97.1 → 0.97.3

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

@@ -93,20 +93,31 @@ export function AccentChoices(props: AppearanceEditorProps) {
       disabled={props.saving}
       orientation="horizontal"
       aria-label="Accent"
-      class="flex flex-wrap items-center gap-2"
+      // Two chips in a column beside a 3x2 swatch grid: one line of six
+      // swatches plus chips overflows the settings sidebar's control column,
+      // and the column keeps both rows of the pair balanced (2 x 28px + gap).
+      class="flex items-center gap-3"
       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 whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-          Theme default
-        </Radio.ItemLabel>
-      </Radio.Item>
-      <div class="flex max-w-full flex-wrap gap-2">
+      <div class="flex flex-col gap-2">
+        <Radio.Item value="theme">
+          <Radio.ItemInput />
+          <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+            Theme default
+          </Radio.ItemLabel>
+        </Radio.Item>
+        <Radio.Item value="custom">
+          <Radio.ItemInput />
+          <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+            Custom
+          </Radio.ItemLabel>
+        </Radio.Item>
+      </div>
+      <div class="grid grid-cols-3 gap-2">
         <For each={props.accentOptions}>
           {(option) => (
             <Radio.Item
@@ -133,12 +144,6 @@ export function AccentChoices(props: AppearanceEditorProps) {
           )}
         </For>
       </div>
-      <Radio.Item value="custom">
-        <Radio.ItemInput />
-        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-          Custom
-        </Radio.ItemLabel>
-      </Radio.Item>
     </Radio>
   )
 }

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

@@ -47,7 +47,7 @@ import {
 } from '../../ui/popover/popover'
 import type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'
 import { ModeChoices, AccentChoices, GlassChoices } from './appearance-choices'
-import { SettingsRow, ThemeRow } from './appearance-rows'
+import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
 
 /**
  * A live editor whose persistence and preview authority belong to its host.
@@ -99,6 +99,18 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           disabled={props.saving}
           onSelect={(darkThemeId) => props.onChange({ darkThemeId })}
         />
+        {/* The row exists only when the host carries a terminal preference:
+            the draft field is the show/hide switch, so the editor can never
+            render a terminal row that writes nothing. */}
+        <Show when={props.draft.terminalThemeId !== undefined}>
+          <TerminalRow
+            selectedId={props.draft.terminalThemeId ?? 'theme'}
+            preview={props.resolvedAppearance === 'dark' ? props.darkTheme : props.lightTheme}
+            themes={props.themes}
+            disabled={props.saving}
+            onSelect={(terminalThemeId) => props.onChange({ terminalThemeId })}
+          />
+        </Show>
         <SettingsRow title="Accent" icon={<SlidersHorizontal />} description={accentDescription()}>
           <AccentChoices {...props} />
         </SettingsRow>

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

@@ -23,9 +23,12 @@
  */
 // Retains the compact divided row and palette-preview selector from the pinned
 // Zeron/Adea composition; Kobalte owns option navigation and nested dismissal.
+// One shared menu serves the light, dark, and terminal rows: each option is a
+// compact theme preview with its name and one-line description beside it, and
+// the menu sizes to that content instead of clipping it at the trigger width.
 import type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'
 import { For, Show, createMemo, createSignal, onCleanup, type JSX } from 'solid-js'
-import { ChevronDown, Palette } from 'lucide-solid'
+import { ChevronDown, Palette, SquareTerminal } from 'lucide-solid'
 import { cn } from '#lib/utils'
 import { Button } from '../../ui/button/button'
 import {
@@ -35,7 +38,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '../../ui/dropdown-menu/dropdown-menu'
-import { PalettePreview } from './theme-preview'
+import { PalettePreview, ThemeMenuPreview } from './theme-preview'
 
 const POINTER_FOCUS_TARGET_SELECTOR =
   'a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type'
@@ -87,18 +90,30 @@ export function SettingsRow(props: {
   )
 }
 
+/** One selectable palette in a theme menu. */
+export type ThemeOption = {
+  id: string
+  name: string
+  description?: string
+  preview: AdeaTheme
+}
+
 /**
- * A compact persistent theme choice. Kobalte handles menu navigation and
- * dismissal; this row moves Tab to the adjacent browser-reported stop because
+ * The shared theme picker. Kobalte handles menu navigation and dismissal;
+ * this component moves Tab to the adjacent browser-reported stop because
  * menus consume Tab by default. Enumerating elements and checking their native
  * tabIndex keeps details summaries in the order while preserving explicit
- * tabindex overrides.
+ * tabindex overrides. The menu width follows its content (bounded by the
+ * popper's available width) so a long theme name and its description render
+ * fully instead of truncating at the trigger's width.
  */
-export function ThemeRow(props: {
-  appearance: 'light' | 'dark'
+function ThemeSelectMenu(props: {
+  /** Row title; also the trigger's accessible name and the group's label. */
+  label: string
   selectedId: string
-  preview: AdeaTheme
-  themes: readonly AdeaThemeRecord[]
+  /** Palette shown on the trigger; hosts pass the accent-applied preview. */
+  triggerPreview: AdeaTheme
+  options: readonly ThemeOption[]
   disabled?: boolean
   onSelect: (id: string) => void
 }) {
@@ -112,15 +127,11 @@ export function ThemeRow(props: {
   onCleanup(() => {
     focusLifecycleVersion += 1
   })
-  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)
+      props.options.find((option) => option.id === props.selectedId) ??
+      props.options.find((option) => option.id === props.triggerPreview.id)
   )
-  const label = () => (props.appearance === 'light' ? 'Light theme' : 'Dark theme')
   const closeMenu = () => {
     if (menuOpen()) focusLifecycleVersion += 1
     setMenuOpen(false)
@@ -166,160 +177,259 @@ export function ThemeRow(props: {
     }
   }
   return (
-    <SettingsRow title={label()} icon={<Palette />}>
-      <div ref={setPortalMount}>
-        <DropdownMenu
-          modal={false}
-          open={menuOpen()}
-          onOpenChange={(open) => {
-            if (open !== menuOpen()) focusLifecycleVersion += 1
-            setMenuOpen(open)
-            if (open) {
-              focusTargetAfterTab = undefined
-              setFocusOutsideTarget(undefined)
-              setRestoreTriggerFocus(false)
-            }
-          }}
+    <div ref={setPortalMount}>
+      <DropdownMenu
+        modal={false}
+        open={menuOpen()}
+        onOpenChange={(open) => {
+          if (open !== menuOpen()) focusLifecycleVersion += 1
+          setMenuOpen(open)
+          if (open) {
+            focusTargetAfterTab = undefined
+            setFocusOutsideTarget(undefined)
+            setRestoreTriggerFocus(false)
+          }
+        }}
+      >
+        <DropdownMenuTrigger
+          ref={setTriggerElement}
+          as={Button}
+          variant="outline"
+          size="sm"
+          aria-label={props.label}
+          disabled={props.disabled || props.options.length === 0}
+          class="w-full justify-between sm:w-52"
         >
-          <DropdownMenuTrigger
-            ref={setTriggerElement}
-            as={Button}
-            variant="outline"
-            size="sm"
-            aria-label={label()}
-            disabled={props.disabled || options().length === 0}
-            class="w-full justify-between sm:w-52"
-          >
-            <span class="flex min-w-0 flex-1 items-center gap-2">
-              <PalettePreview theme={props.preview} />
-              <span class="min-w-0 flex-1 truncate">{selected()?.name ?? props.preview.name}</span>
+          <span class="flex min-w-0 flex-1 items-center gap-2">
+            <PalettePreview theme={props.triggerPreview} />
+            <span class="min-w-0 flex-1 truncate">
+              {selected()?.name ?? props.triggerPreview.name}
             </span>
-            <ChevronDown aria-hidden="true" class="shrink-0 text-muted-foreground" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            portalMount={portalMount()}
-            class="max-h-(--kb-popper-content-available-height) w-(--kb-popper-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto"
-            onInteractOutside={(event) => {
-              if (event.detail.originalEvent.type !== 'pointerdown') return
-              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
-              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
-              const target = event.detail.originalEvent.target
-              if (!(target instanceof Element) || !focusScope?.contains(target)) return
-
-              const focusTarget = target.closest<HTMLElement>(POINTER_FOCUS_TARGET_SELECTOR)
-              if (focusTarget && isTabStop(focusTarget)) {
-                setRestoreTriggerFocus(false)
-                setFocusOutsideTarget(focusTarget)
-              } else {
-                setRestoreTriggerFocus(true)
-              }
-            }}
-            onFocusOutside={(event) => {
-              // The containing dialog or document body can briefly reclaim
-              // focus when the menu opens. Keep that handoff from dismissing
-              // it; focus moving to another descendant still closes the menu.
-              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
-              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
-              const target = event.detail.originalEvent.target
-              if (target === focusScope) {
-                event.preventDefault()
-              } else if (target instanceof HTMLElement && focusScope?.contains(target)) {
-                setRestoreTriggerFocus(false)
-                setFocusOutsideTarget(target)
-              }
-            }}
-            onEscapeKeyDown={() => setRestoreTriggerFocus(true)}
-            onCloseAutoFocus={(event) => {
-              // A prior menu instance can finish its focus cleanup after this
-              // row has already reopened. Do not let that cleanup steal focus.
-              if (menuOpen()) {
-                event.preventDefault()
-                return
-              }
+          </span>
+          <ChevronDown aria-hidden="true" class="shrink-0 text-muted-foreground" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          portalMount={portalMount()}
+          // Sized to content (at least the trigger width, never wider than the
+          // popper allows) so long theme names render in full with padding for
+          // the selection indicator instead of truncating at the anchor width.
+          class="max-h-(--kb-popper-content-available-height) w-max min-w-(--kb-popper-anchor-width) max-w-(--kb-popper-content-available-width) overflow-x-hidden overflow-y-auto"
+          onInteractOutside={(event) => {
+            if (event.detail.originalEvent.type !== 'pointerdown') return
+            const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+            const target = event.detail.originalEvent.target
+            if (!(target instanceof Element) || !focusScope?.contains(target)) return
 
-              const lifecycleVersion = focusLifecycleVersion
-              const shouldRestore = restoreTriggerFocus()
-              const focusTarget = focusTargetAfterTab ?? focusOutsideTarget()
-              focusTargetAfterTab = undefined
-              setFocusOutsideTarget(undefined)
+            const focusTarget = target.closest<HTMLElement>(POINTER_FOCUS_TARGET_SELECTOR)
+            if (focusTarget && isTabStop(focusTarget)) {
+              setRestoreTriggerFocus(false)
+              setFocusOutsideTarget(focusTarget)
+            } else {
+              setRestoreTriggerFocus(true)
+            }
+          }}
+          onFocusOutside={(event) => {
+            // The containing dialog or document body can briefly reclaim
+            // focus when the menu opens. Keep that handoff from dismissing
+            // it; focus moving to another descendant still closes the menu.
+            const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+            const target = event.detail.originalEvent.target
+            if (target === focusScope) {
+              event.preventDefault()
+            } else if (target instanceof HTMLElement && focusScope?.contains(target)) {
               setRestoreTriggerFocus(false)
-              if (shouldRestore) {
-                // The saved focus may be the containing dialog rather than
-                // the trigger when WebKit opens this menu from a pointer click.
-                event.preventDefault()
-                triggerElement()?.focus({ preventScroll: true })
-                return
-              }
+              setFocusOutsideTarget(target)
+            }
+          }}
+          onEscapeKeyDown={() => setRestoreTriggerFocus(true)}
+          onCloseAutoFocus={(event) => {
+            // A prior menu instance can finish its focus cleanup after this
+            // row has already reopened. Do not let that cleanup steal focus.
+            if (menuOpen()) {
+              event.preventDefault()
+              return
+            }
 
-              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
-              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
-              if (focusTarget?.isConnected && focusScope?.contains(focusTarget)) {
-                // Preserve the intended in-scope destination across
-                // Kobalte's deferred stale-focus restore.
-                event.preventDefault()
-                queueMicrotask(() => {
-                  if (lifecycleVersion !== focusLifecycleVersion || menuOpen()) return
+            const lifecycleVersion = focusLifecycleVersion
+            const shouldRestore = restoreTriggerFocus()
+            const focusTarget = focusTargetAfterTab ?? focusOutsideTarget()
+            focusTargetAfterTab = undefined
+            setFocusOutsideTarget(undefined)
+            setRestoreTriggerFocus(false)
+            if (shouldRestore) {
+              // The saved focus may be the containing dialog rather than
+              // the trigger when WebKit opens this menu from a pointer click.
+              event.preventDefault()
+              triggerElement()?.focus({ preventScroll: true })
+              return
+            }
+
+            const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+            const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+            if (focusTarget?.isConnected && focusScope?.contains(focusTarget)) {
+              // Preserve the intended in-scope destination across
+              // Kobalte's deferred stale-focus restore.
+              event.preventDefault()
+              queueMicrotask(() => {
+                if (lifecycleVersion !== focusLifecycleVersion || menuOpen()) return
 
-                  const activeElement = document.activeElement
-                  const isMenuFocus =
-                    activeElement instanceof HTMLElement &&
-                    activeElement.closest('[role="menu"]') !== null
-                  const isTriggerFocus = activeElement === triggerElement()
-                  if (
-                    activeElement !== focusTarget &&
-                    (activeElement === document.body ||
-                      activeElement === focusScope ||
-                      isMenuFocus ||
-                      isTriggerFocus)
-                  ) {
-                    focusTarget.focus({ preventScroll: true })
-                  }
-                })
-                return
-              }
+                const activeElement = document.activeElement
+                const isMenuFocus =
+                  activeElement instanceof HTMLElement &&
+                  activeElement.closest('[role="menu"]') !== null
+                const isTriggerFocus = activeElement === triggerElement()
+                if (
+                  activeElement !== focusTarget &&
+                  (activeElement === document.body ||
+                    activeElement === focusScope ||
+                    isMenuFocus ||
+                    isTriggerFocus)
+                ) {
+                  focusTarget.focus({ preventScroll: true })
+                }
+              })
+              return
+            }
 
-              const activeElement = document.activeElement
-              if (
-                focusScope &&
-                activeElement instanceof HTMLElement &&
-                activeElement !== focusScope &&
-                focusScope.contains(activeElement) &&
-                activeElement.closest('[role="menu"]') === null
-              ) {
-                // Preserve a real focus target in this scope instead of
-                // restoring the stale element captured when the menu mounted. A
-                // focused menu item is about to unmount, so Kobalte must restore
-                // focus to the trigger instead.
-                event.preventDefault()
-              }
+            const activeElement = document.activeElement
+            if (
+              focusScope &&
+              activeElement instanceof HTMLElement &&
+              activeElement !== focusScope &&
+              focusScope.contains(activeElement) &&
+              activeElement.closest('[role="menu"]') === null
+            ) {
+              // Preserve a real focus target in this scope instead of
+              // restoring the stale element captured when the menu mounted. A
+              // focused menu item is about to unmount, so Kobalte must restore
+              // focus to the trigger instead.
+              event.preventDefault()
+            }
+          }}
+        >
+          <DropdownMenuRadioGroup
+            value={selected()?.id ?? ''}
+            aria-label={`${props.label} options`}
+            on:keydown={moveFocusOnTab}
+            onChange={(id) => {
+              if (!props.disabled && typeof id === 'string') props.onSelect(id)
             }}
           >
-            <DropdownMenuRadioGroup
-              value={selected()?.id ?? ''}
-              aria-label={`${label()} options`}
-              on:keydown={moveFocusOnTab}
-              onChange={(id) => {
-                if (!props.disabled && typeof id === 'string') props.onSelect(id)
-              }}
-            >
-              <For each={options()}>
-                {(theme) => (
-                  <DropdownMenuRadioItem
-                    value={theme.id}
-                    textValue={theme.name}
-                    closeOnSelect={true}
-                    disabled={props.disabled}
-                    onSelect={() => setRestoreTriggerFocus(true)}
-                  >
-                    <PalettePreview theme={theme} />
-                    <span class="min-w-0 flex-1 truncate">{theme.name}</span>
-                  </DropdownMenuRadioItem>
-                )}
-              </For>
-            </DropdownMenuRadioGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+            <For each={props.options}>
+              {(option) => (
+                <DropdownMenuRadioItem
+                  value={option.id}
+                  textValue={option.name}
+                  closeOnSelect={true}
+                  disabled={props.disabled}
+                  onSelect={() => setRestoreTriggerFocus(true)}
+                >
+                  <ThemeMenuPreview theme={option.preview} />
+                  <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+                    <span class="truncate">{option.name}</span>
+                    {/* Visual affordance only: the accessible name stays the
+                        theme name, which is what keyboard and test callers
+                        match on. */}
+                    <Show when={option.description}>
+                      <span
+                        aria-hidden="true"
+                        class="line-clamp-2 max-w-44 text-2xs text-muted-foreground"
+                      >
+                        {option.description}
+                      </span>
+                    </Show>
+                  </span>
+                </DropdownMenuRadioItem>
+              )}
+            </For>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+/**
+ * A compact persistent theme choice for one appearance.
+ */
+export function ThemeRow(props: {
+  appearance: 'light' | 'dark'
+  selectedId: string
+  preview: AdeaTheme
+  themes: readonly AdeaThemeRecord[]
+  disabled?: boolean
+  onSelect: (id: string) => void
+}) {
+  const label = () => (props.appearance === 'light' ? 'Light theme' : 'Dark theme')
+  const options = createMemo<ThemeOption[]>(() =>
+    props.themes
+      .filter((theme) => theme.appearance === props.appearance)
+      .map((theme) => ({
+        id: theme.id,
+        name: theme.name,
+        description: theme.description,
+        preview: theme,
+      }))
+  )
+  return (
+    <SettingsRow title={label()} icon={<Palette />}>
+      <ThemeSelectMenu
+        label={label()}
+        selectedId={props.selectedId}
+        triggerPreview={props.preview}
+        options={options()}
+        disabled={props.disabled}
+        onSelect={props.onSelect}
+      />
+    </SettingsRow>
+  )
+}
+
+/**
+ * A terminal palette choice independent of the light/dark rows. The first
+ * option (`'theme'`) follows the interface theme, painted with the resolved
+ * preview; every catalogue record follows, both appearances, because the
+ * terminal paints one fixed ANSI palette rather than an appearance axis.
+ */
+export function TerminalRow(props: {
+  selectedId: string
+  /** Resolved interface theme: the `theme` option's palette and the fallback. */
+  preview: AdeaTheme
+  themes: readonly AdeaThemeRecord[]
+  disabled?: boolean
+  onSelect: (id: string) => void
+}) {
+  const options = createMemo<ThemeOption[]>(() => [
+    {
+      id: 'theme',
+      name: 'UI theme',
+      description: 'Uses the interface theme.',
+      preview: props.preview,
+    },
+    ...props.themes.map((theme) => ({
+      id: theme.id,
+      name: theme.name,
+      description: theme.description,
+      preview: theme,
+    })),
+  ])
+  const selectedOption = () => options().find((option) => option.id === props.selectedId)
+  const description = () =>
+    selectedOption() && selectedOption()?.id !== 'theme'
+      ? `The terminal follows ${selectedOption()?.name}.`
+      : 'The terminal follows the interface theme.'
+  return (
+    <SettingsRow title="Terminal" icon={<SquareTerminal />} description={description()}>
+      <ThemeSelectMenu
+        label="Terminal"
+        selectedId={props.selectedId}
+        triggerPreview={selectedOption()?.preview ?? props.preview}
+        options={options()}
+        disabled={props.disabled}
+        onSelect={props.onSelect}
+      />
     </SettingsRow>
   )
 }

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

@@ -4,6 +4,13 @@ export type AppearanceDraft = Readonly<{
   mode: 'system' | 'light' | 'dark'
   lightThemeId: string
   darkThemeId: string
+  /**
+   * The terminal palette: `'theme'` follows the interface theme, a theme id
+   * pins that theme's terminal colours. Optional so a host without a terminal
+   * preference renders no terminal row — the row's presence is this field's
+   * presence, not a second prop that could disagree with the draft.
+   */
+  terminalThemeId?: string
   /** Theme default, a canonical preset id, or the host's custom accent draft. */
   accent: string
   surface: 'theme' | 'frosted' | 'opaque'

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

@@ -105,6 +105,64 @@ export function ThemeMiniatureSplit(props: { light: AdeaTheme; dark: AdeaTheme;
   )
 }
 
+/**
+ * The dropdown-item preview: the ThemePreview composition (rail + panel +
+ * text bars + action row) at menu scale, so a menu item carries the theme's
+ * actual chrome rather than the three-band trigger swatch. `aria-hidden` —
+ * the item's accessible name stays the theme name.
+ */
+export function ThemeMenuPreview(props: { theme: AdeaTheme; class?: string }) {
+  const colors = () => props.theme.colors
+  return (
+    <span
+      data-theme-menu-preview
+      aria-hidden="true"
+      class={cn(
+        'flex h-16 w-28 shrink-0 overflow-hidden rounded-md border border-(--appearance-preview-border)',
+        props.class
+      )}
+      style={{
+        'background-color': colors().surface,
+        '--appearance-preview-border': colors().border,
+      }}
+    >
+      <span
+        class="flex w-5 shrink-0 flex-col items-center gap-1.5 border-e border-(--appearance-preview-border) pt-2"
+        style={{ 'background-color': colors().surfaceElevated }}
+      >
+        <span class="size-1.5 rounded-[3px]" style={{ 'background-color': colors().accent }} />
+        <span
+          class="size-1.5 rounded-[3px]"
+          style={{ 'background-color': colors().surfaceActive }}
+        />
+        <span
+          class="size-1.5 rounded-[3px]"
+          style={{ 'background-color': colors().surfaceActive }}
+        />
+      </span>
+      <span
+        class="m-1 flex min-w-0 flex-1 flex-col gap-1 rounded-md border border-(--appearance-preview-border) p-1.5"
+        style={{
+          'background-color': colors().background,
+          '--appearance-preview-border': colors().border,
+        }}
+      >
+        <span class="h-1.5 w-8 rounded-full" style={{ 'background-color': colors().text }} />
+        <span class="h-1 w-full rounded-full" style={{ 'background-color': colors().textMuted }} />
+        <span class="h-1 w-3/4 rounded-full" style={{ 'background-color': colors().textMuted }} />
+        <span class="mt-auto flex items-center gap-1">
+          <span class="h-2.5 w-7 rounded-[3px]" style={{ 'background-color': colors().accent }} />
+          <span class="h-2.5 w-4 rounded-[3px]" style={{ 'background-color': colors().error }} />
+          <span
+            class="h-2.5 w-4 rounded-[3px]"
+            style={{ 'background-color': colors().surfaceActive }}
+          />
+        </span>
+      </span>
+    </span>
+  )
+}
+
 export function PalettePreview(props: { theme: AdeaTheme; class?: string }) {
   const bands = () => [
     props.theme.colors.surface,