@adea-ai/ui 0.130.3 → 0.131.0

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

@@ -24,8 +24,11 @@
 // 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 { Monitor, Moon, Sun } from 'lucide-solid'
 import { For, Show } from 'solid-js'
 import { isThemeAccentId } from '#lib/theme-accents'
+import { Button } from '../../ui/button/button'
+import { Input } from '../../ui/input/input'
 import { AccentSwatchGroups } from './accent-swatch-groups'
 import type { AppearanceEditorProps } from './appearance-types'
 import { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'
@@ -40,6 +43,8 @@ const SURFACES = [
   { value: 'frosted', label: 'Frosted' },
   { value: 'opaque', label: 'Opaque' },
 ] as const
+const MODE_ICONS = { system: Monitor, light: Sun, dark: Moon } as const
+
 export function ModeChoices(props: AppearanceEditorProps) {
   return (
     <Radio
@@ -54,30 +59,40 @@ export function ModeChoices(props: AppearanceEditorProps) {
       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} />
+        {(option) => {
+          const Icon = MODE_ICONS[option.value]
+          return (
+            <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>
+                {/* The glyph names the axis beside the miniature, so the cards read
+                  like ThemeModeToggle without losing the previews. */}
+                <Show when={props.showModeIcons} fallback={<span>{option.label}</span>}>
+                  <span class="flex items-center justify-center gap-1.5">
+                    <Icon aria-hidden="true" class="size-3.5" />
+                    {option.label}
+                  </span>
                 </Show>
-              </span>
-              <span>{option.label}</span>
-            </Radio.ItemLabel>
-          </Radio.Item>
-        )}
+              </Radio.ItemLabel>
+            </Radio.Item>
+          )
+        }}
       </For>
     </Radio>
   )
@@ -106,75 +121,138 @@ export function AccentChoices(props: AppearanceEditorProps) {
     props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode
   const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)
   const showThemeDefault = () => props.showThemeDefaultAccent ?? true
+  const entryStyle = () => props.accentEntryStyle ?? 'swatches'
+  const themeDefaultColor = () =>
+    resolvedAppearance() === 'light'
+      ? props.lightTheme.colors.accent
+      : props.darkTheme.colors.accent
   // The named-chip style feeds the same resolved preset list to both entries:
   // "Theme default" leads only when the host has not folded it into a preset.
   const labelEntries = () => {
     const presets = props.accentOptions.filter((option) => option.id !== 'theme')
     return showThemeDefault() ? [{ id: 'theme', label: 'Theme default' }, ...presets] : presets
   }
+  // The `row` style's Custom entry is a button that opens the native colour
+  // selector, so the draft only changes once a colour is chosen there. The
+  // input stays in the tree for the selector to anchor to and for the value a
+  // saved hex restores.
+  let colorPicker: HTMLInputElement | undefined
+  const openCustomColor = () => {
+    if (!colorPicker || props.saving) return
+    if (typeof colorPicker.showPicker === 'function') colorPicker.showPicker()
+    else colorPicker.click()
+  }
   return (
-    <Radio
-      value={accentSelection()}
-      disabled={props.saving}
-      orientation="horizontal"
-      aria-label="Accent"
-      class="flex flex-col items-start gap-3"
-      onChange={(accent) =>
-        props.onChange({
-          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
-        })
-      }
-    >
-      <Show
-        when={(props.accentEntryStyle ?? 'swatches') === 'labels'}
-        fallback={
-          <>
-            <AccentSwatchGroups
-              accentOptions={props.accentOptions}
-              resolvedAppearance={resolvedAppearance()}
-              showThemeDefault={showThemeDefault()}
-              themeDefaultColor={
-                resolvedAppearance() === 'light'
-                  ? props.lightTheme.colors.accent
-                  : props.darkTheme.colors.accent
-              }
-            />
-            <div class="flex flex-col gap-1">
-              <Show when={props.showCustomAccentCaption ?? true}>
-                <span class="text-xs font-medium text-muted-foreground">Custom</span>
-              </Show>
-              <Radio.Item value="custom">
+    <Show
+      when={entryStyle() === 'row'}
+      fallback={
+        <Radio
+          value={accentSelection()}
+          disabled={props.saving}
+          orientation="horizontal"
+          aria-label="Accent"
+          class="flex flex-col items-start gap-3"
+          onChange={(accent) =>
+            props.onChange({
+              accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
+            })
+          }
+        >
+          <Show
+            when={entryStyle() === 'labels'}
+            fallback={
+              <>
+                <AccentSwatchGroups
+                  accentOptions={props.accentOptions}
+                  resolvedAppearance={resolvedAppearance()}
+                  showThemeDefault={showThemeDefault()}
+                  themeDefaultColor={themeDefaultColor()}
+                />
+                <div class="flex flex-col gap-1">
+                  <Show when={props.showCustomAccentCaption ?? true}>
+                    <span class="text-xs font-medium text-muted-foreground">Custom</span>
+                  </Show>
+                  <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>
+              </>
+            }
+          >
+            {/* The named-chip style: one grid, every choice a labelled control,
+                including the custom colour — nothing to caption from above. */}
+            <div class="grid grid-cols-2 gap-2 sm:grid-cols-3" data-accent-grid>
+              <For each={labelEntries()}>
+                {(option) => (
+                  <Radio.Item value={option.id} class="min-w-0" data-accent-option={option.id}>
+                    <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">
+                      {option.label}
+                    </Radio.ItemLabel>
+                  </Radio.Item>
+                )}
+              </For>
+              <Radio.Item value="custom" class="min-w-0">
                 <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>
-          </>
-        }
-      >
-        {/* The named-chip style: one grid, every choice a labelled control,
-            including the custom colour — nothing to caption from above. */}
-        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3" data-accent-grid>
-          <For each={labelEntries()}>
-            {(option) => (
-              <Radio.Item value={option.id} class="min-w-0" data-accent-option={option.id}>
-                <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">
-                  {option.label}
-                </Radio.ItemLabel>
-              </Radio.Item>
-            )}
-          </For>
-          <Radio.Item value="custom" class="min-w-0">
-            <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>
-      </Show>
-    </Radio>
+          </Show>
+        </Radio>
+      }
+    >
+      <div class="flex w-full min-w-0 items-center gap-2" data-accent-choices>
+        <Radio
+          value={accentSelection()}
+          disabled={props.saving}
+          orientation="horizontal"
+          aria-label="Accent"
+          class="min-w-0 flex-1"
+          onChange={(accent) => props.onChange({ accent })}
+        >
+          <AccentSwatchGroups
+            accentOptions={props.accentOptions}
+            resolvedAppearance={resolvedAppearance()}
+            showThemeDefault={showThemeDefault()}
+            themeDefaultColor={themeDefaultColor()}
+            layout="row"
+          />
+        </Radio>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={props.saving}
+          aria-pressed={isCustomAccent(props)}
+          onClick={openCustomColor}
+        >
+          Custom
+        </Button>
+        <Input
+          ref={(element) => {
+            colorPicker = element
+          }}
+          type="color"
+          // `w-px` beats the Input's own `w-full`: an absolutely positioned
+          // full-width input sized the sheet's scroll width.
+          class="sr-only w-px"
+          tabIndex={-1}
+          aria-label="Custom accent color"
+          value={
+            /^#[0-9a-f]{6}$/i.test(props.draft.accent)
+              ? props.draft.accent
+              : (props.customAccentValue ?? '#000000')
+          }
+          disabled={props.saving}
+          onChange={(event) => props.onChange({ accent: event.currentTarget.value })}
+        />
+      </div>
+    </Show>
   )
 }
 
@@ -199,7 +277,7 @@ export function GlassChoices(props: AppearanceEditorProps) {
             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">
+            <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 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
               {option.label}
             </Radio.ItemLabel>
           </Radio.Item>

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

@@ -278,12 +278,17 @@ export function AppearancePopover(props: AppearancePopoverProps) {
     <Sheet open={props.open} onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}>
       {/* The trigger is an icon-only action, so it explains itself through the
           shared ActionButton's tooltip (keyboard focus included) rather than a
-          bare aria-label. */}
+          bare aria-label. `toolbar` also holds the pressed rung while Kobalte
+          marks the trigger `data-expanded`, and repeats the glyph in the
+          tooltip like the other toolbar actions. */}
       <SheetTrigger
         as={ActionButton}
-        variant="ghost"
+        variant={props.triggerVariant === 'toolbar' ? 'toolbar' : 'ghost'}
         size="icon-sm"
         tooltip="Open appearance settings"
+        tooltipIcon={
+          props.triggerVariant === 'toolbar' ? <Palette aria-hidden="true" /> : undefined
+        }
         aria-label="Appearance settings"
       >
         <Palette />

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

@@ -67,10 +67,16 @@ export type AppearanceEditorProps = {
   fontSettingsPlacement?: 'inline' | 'end'
   /**
    * How the accent row renders its choices. `swatches` — the default — paints
-   * each choice as a colour circle. `labels` renders every choice as a named
-   * chip, for hosts whose accent contract is textual rather than chromatic.
+   * each choice as a colour circle in a wrapping grid, with Custom as one more
+   * chip. `labels` renders every choice as a named chip, for hosts whose accent
+   * contract is textual rather than chromatic. `row` draws the circles in ONE
+   * equally spaced line, which holds at a narrow panel width where the grid
+   * would wrap, and turns Custom into a button that opens the native colour
+   * selector: choosing a colour there is the only thing that changes the draft,
+   * so dismissing the selector leaves the accent as it was. The caption flag
+   * has no effect on `row`, which has nothing to caption.
    */
-  accentEntryStyle?: 'swatches' | 'labels'
+  accentEntryStyle?: 'swatches' | 'labels' | 'row'
   /**
    * Whether the accent row leads with a "Theme default" swatch. Default on.
    * Hosts whose default accent already is one of the catalogue presets pass
@@ -83,10 +89,23 @@ export type AppearanceEditorProps = {
    * caption reads as a second "Custom" label on the control.
    */
   showCustomAccentCaption?: boolean
+  /**
+   * Whether each mode card names its axis with a sun, moon or monitor glyph
+   * beside the label, as `ThemeModeToggle` does. Default off.
+   */
+  showModeIcons?: boolean
 }
 
 export type AppearancePopoverProps = AppearanceEditorProps & {
   open: boolean
   onOpen: () => void
   onDismiss: () => void
+  /**
+   * The trigger's treatment. `ghost` — the default — is a quiet icon action.
+   * `toolbar` is the variant for a control that opens a surface: it holds the
+   * pressed rung while the sheet is open, so the one control that owns the
+   * visible sheet never reads like its idle neighbours, and its tooltip repeats
+   * the palette glyph the other toolbar actions carry.
+   */
+  triggerVariant?: 'ghost' | 'toolbar'
 }

package/src/lib/accent-presets.ts

@@ -8,6 +8,14 @@ import { ACCENTS } from '@adea-ai/themes'
  * `accents`, so every existing import keeps working.
  */
 
+/**
+ * A preset by id (`blue`), or `undefined` for `theme`, a theme-carried accent or an
+ * unknown id. The catalogue's own lookup, re-exported rather than copied so a host's
+ * stored-preference reader resolves an id exactly as the catalogue does without
+ * importing `lib/themes`.
+ */
+export { getAccent } from '@adea-ai/themes'
+
 /**
  * The accent axis.
  *

package/src/lib/theme-projection.ts

@@ -0,0 +1,52 @@
+/**
+ * What a host needs to turn a canonical theme record into the values it stores.
+ *
+ * Adea imports user themes: a file is validated, repaired toward the readable floor,
+ * and projected onto the hex values the host persists. That projection is the
+ * catalogue's own (`shadcnVariables`, the xterm adapter, the editor roles), so it is
+ * re-exported here and the host depends on this package alone for it — the pin
+ * between this package and `@adea-ai/themes` cannot drift from the host's.
+ *
+ * Its own module, with no catalogue data and no definition of its own beyond the two
+ * default records, so that:
+ *
+ * - a host's start-up path never reaches it (it is for an importer loaded on demand);
+ * - `lib/themes.ts`, which holds the 34-theme table, is not the place a host has to
+ *   import from to get a record-shaped helper.
+ */
+import adeaDark from '@adea-ai/themes/themes/adea-dark'
+import adeaLight from '@adea-ai/themes/themes/adea-light'
+import {
+  themeAccentPresets,
+  type AccentPreset,
+  type AdeaTheme,
+  type AdeaThemeRecord,
+} from '@adea-ai/themes'
+
+export { editorRolesHex, syntaxRolesHex } from '@adea-ai/themes'
+export { oklchToHex, parseColor as parseOklchColor } from '@adea-ai/themes/oklch'
+export { shadcnDestructiveProjection, shadcnVariables } from '@adea-ai/themes/adapters/shadcn'
+export { toXtermTheme } from '@adea-ai/themes/adapters/xterm'
+
+/**
+ * The default theme of an appearance as a canonical record: the roles an imported
+ * theme falls back to for anything its file does not carry.
+ *
+ * `defaultVariantFor` is the same theme as a runtime variant; a record keeps the
+ * catalogue's own roles (`surfaceActive`, `textSubtle`, the ANSI ramp) that a variant
+ * folds together.
+ */
+export function defaultThemeRecord(appearance: 'light' | 'dark'): AdeaThemeRecord {
+  return appearance === 'dark' ? adeaDark : adeaLight
+}
+
+/**
+ * The accents a light/dark pair of records carries itself, beside the presets.
+ *
+ * For a host whose pair is not in the catalogue — an imported theme — where
+ * `themeAccentsFor` (which looks the pair up by id) cannot answer. A slot is offered
+ * only when both themes clear the catalogue's accent floors.
+ */
+export function themeAccentsForRecords(light: AdeaTheme, dark: AdeaTheme): readonly AccentPreset[] {
+  return themeAccentPresets(light, dark)
+}

package/src/lib/theme-records.ts

@@ -30,6 +30,9 @@ import type {
   ThemeVariant,
 } from './themes'
 
+/** The catalogue's canonical theme shapes, for a host that holds records and no catalogue. */
+export type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'
+
 /**
  * The shadcn-vocabulary roles of one catalogue entry.
  *