@adea-ai/ui 0.101.1 → 0.103.0

package/registry.json

@@ -152,6 +152,8 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/badge",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1903,7 +1905,7 @@
       "title": "Appearance Editor",
       "description": "",
       "dependencies": [
-        "@adea-ai/themes@^0.8.0",
+        "@adea-ai/themes@^0.9.5",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.48.0"
       ],
@@ -2349,6 +2351,7 @@
       "title": "Theming",
       "description": "",
       "dependencies": [
+        "@adea-ai/themes@^0.9.5",
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [
@@ -2456,7 +2459,7 @@
       "title": "Class-name and token helpers",
       "description": "The private helpers the components import: the class-name merge, the variant recipes, the token manifest and the theme bridge. Installed automatically as a peer of any component that needs it.",
       "dependencies": [
-        "@adea-ai/themes@^0.8.0",
+        "@adea-ai/themes@^0.9.5",
         "class-variance-authority@^0.7.1",
         "cn@^0.4.0"
       ],
@@ -2492,6 +2495,11 @@
           "type": "registry:lib",
           "target": "lib/overlay.ts"
         },
+        {
+          "path": "src/lib/theme-accents.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-accents.ts"
+        },
         {
           "path": "src/lib/themes.ts",
           "type": "registry:lib",

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

@@ -25,6 +25,7 @@
 // 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 { isThemeAccentId } from '#lib/theme-accents'
 import type { AppearanceEditorProps } from './appearance-types'
 import { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'
 
@@ -82,16 +83,30 @@ export function ModeChoices(props: AppearanceEditorProps) {
   )
 }
 
+/**
+ * Whether the draft accent is the host's custom colour: not the theme default,
+ * not a preset, and not a theme accent id. A theme accent id counts as known even
+ * when the current pair cannot offer it — it is a stored role, not a colour the
+ * user typed, and showing it in the custom field would invite editing `ansi-blue`.
+ */
+export function isCustomAccent(props: AppearanceEditorProps): boolean {
+  const accent = props.draft.accent
+  return (
+    accent !== 'theme' &&
+    !props.accentOptions.some((option) => option.id === accent) &&
+    !isThemeAccentId(accent)
+  )
+}
+
 export function AccentChoices(props: AppearanceEditorProps) {
   // The resolved appearance decides which side of a preset pair — and which
   // theme accent — the swatches paint, so the row previews each choice as the
   // user will see it.
   const resolvedAppearance = () =>
     props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode
-  const custom = () =>
-    props.draft.accent !== 'theme' &&
-    !props.accentOptions.some((option) => option.id === props.draft.accent)
-  const accentSelection = () => (custom() ? 'custom' : props.draft.accent)
+  // The accents the previewed theme pair carries, offered after the presets.
+  const themeAccents = () => props.themeAccentOptions ?? []
+  const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)
   return (
     <Radio
       value={accentSelection()}
@@ -152,6 +167,28 @@ export function AccentChoices(props: AppearanceEditorProps) {
             </Radio.Item>
           )}
         </For>
+        <For each={themeAccents()}>
+          {(option) => (
+            <Radio.Item
+              value={option.id}
+              data-theme-accent={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 border-dashed p-0.5 data-[checked]:border-solid 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':
+                      resolvedAppearance() === 'light' ? option.light : option.dark,
+                  }}
+                />
+                <span class="sr-only">{`Theme ${option.label.toLowerCase()}`}</span>
+              </Radio.ItemLabel>
+            </Radio.Item>
+          )}
+        </For>
       </div>
       <Radio.Item value="custom">
         <Radio.ItemInput />

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

@@ -46,7 +46,7 @@ import {
   PopoverTrigger,
 } from '../../ui/popover/popover'
 import type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'
-import { ModeChoices, AccentChoices, GlassChoices } from './appearance-choices'
+import { ModeChoices, AccentChoices, GlassChoices, isCustomAccent } from './appearance-choices'
 import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
 
 /**
@@ -60,13 +60,19 @@ import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
 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 custom = () => isCustomAccent(props)
   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 preset = props.accentOptions.find((option) => option.id === props.draft.accent)
+    if (preset) return `${preset.label} · Controls, glyphs, selections, code, and activity.`
+    if (custom()) return 'Custom · Controls, glyphs, selections, code, and activity.'
+    const offered = props.themeAccentOptions?.find((option) => option.id === props.draft.accent)
+    // A stored theme accent survives a theme switch by id; when the new pair
+    // cannot offer that slot the host falls back to the theme's own primary,
+    // and the description says so rather than naming a colour not on screen.
+    return offered
+      ? `Theme ${offered.label.toLowerCase()} · The theme's own color, on controls and activity.`
+      : "Theme default · This theme does not carry that accent, so it uses the palette's intended color."
   }
   const glassDescription = () =>
     props.draft.surface === 'opaque'

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

@@ -25,6 +25,14 @@ export type AppearanceEditorProps = {
   resolvedAppearance: 'light' | 'dark'
   themes: readonly AdeaThemeRecord[]
   accentOptions: readonly AccentPreset[]
+  /**
+   * The accents the previewed light/dark pair carries itself, offered after
+   * `accentOptions` — `themeAccentsFor(lightThemeId, darkThemeId)` from
+   * `@adea-ai/ui`. Supplied by the host because computing them measures through
+   * the catalogue's normalization, which the editor does not load. Omitted, the
+   * row offers the presets only.
+   */
+  themeAccentOptions?: readonly AccentPreset[]
   onChange: (patch: Partial<AppearanceDraft>) => void
   onSave: () => void
   onCancel: () => void

package/src/components/composites/update-dialog/update-dialog.tsx

@@ -7,7 +7,7 @@ import {
   Show,
   splitProps,
 } from 'solid-js'
-import type { Accessor } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
 import {
   Check,
   CircleStop,
@@ -148,6 +148,13 @@ export type UpdateAdapter = Readonly<{
   isDesktopRuntime(): boolean
 }>
 
+type ChannelControlActions = Readonly<{
+  /** Disabled while the app is checking, downloading, installing, or saving a channel. */
+  disabled: Accessor<boolean>
+  /** Persist a channel change, then check that channel without retaining a stale offer. */
+  recheck(beforeCheck?: () => Promise<void>): Promise<void>
+}>
+
 export type UpdateDialogProps = {
   adapter: UpdateAdapter
   /** The application's name, used in the title and the copy. */
@@ -160,6 +167,12 @@ export type UpdateDialogProps = {
   fallbackVersion?: string
   /** Copy for the adapter's non-desktop case. */
   desktopOnlyMessage?: string
+  /**
+   * Optional host-owned release-channel control, rendered in the version status
+   * card. The host owns its accessible label and calls `recheck` after a selection;
+   * the optional callback persists that selection before the dialog checks it.
+   */
+  channelControl?: (actions: ChannelControlActions) => JSX.Element
   /** A controlled open state. Omit for the trigger to manage its own. */
   open?: boolean
   /**
@@ -220,6 +233,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
     'changelog',
     'fallbackVersion',
     'desktopOnlyMessage',
+    'channelControl',
     'open',
     'defaultOpen',
     'onOpenChange',
@@ -248,6 +262,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
   const [cancelPending, setCancelPending] = createSignal(false)
   let lifecycleEpoch = 0
   let activeOpenEpoch: number | undefined
+  let channelCheckUnconfirmed = false
   let disposed = false
 
   onCleanup(() => {
@@ -263,12 +278,15 @@ export function UpdateDialog(props: UpdateDialogProps) {
       const previous = state()
       const hasActionableSnapshot = (candidate: UpdateState | null) =>
         candidate?.phase === 'available' || isBusy(candidate)
+      const ignoresUnconfirmedChannelSnapshot =
+        channelCheckUnconfirmed && hasActionableSnapshot(status)
       const preservesSnapshot =
         previous?.phase === 'available'
           ? status.phase === 'available' || isBusy(status)
           : isBusy(previous) && isBusy(status)
       if (
         isCurrent() &&
+        !ignoresUnconfirmedChannelSnapshot &&
         !(checkFailed() && hasActionableSnapshot(previous) && !preservesSnapshot)
       ) {
         setState(status)
@@ -291,10 +309,10 @@ export function UpdateDialog(props: UpdateDialogProps) {
     setError(message)
   }
 
-  const applyCheckResult = (next: UpdateState) => {
+  const applyCheckResult = (next: UpdateState, preserveOnFailure = true) => {
     if (next.phase === 'failed') {
       const current = state()
-      if (!current) setState(next)
+      if (!current || !preserveOnFailure) setState(next)
       failCheck(next.error, 'Could not check for updates')
       return
     }
@@ -303,7 +321,10 @@ export function UpdateDialog(props: UpdateDialogProps) {
     setError('')
   }
 
-  const check = async () => {
+  const check = async (
+    beforeCheck?: () => Promise<void>,
+    clearStaleOffer = beforeCheck !== undefined
+  ) => {
     if (!desktop()) {
       setError(local.desktopOnlyMessage ?? `Update checks are available from the desktop app.`)
       return
@@ -316,16 +337,43 @@ export function UpdateDialog(props: UpdateDialogProps) {
       lifecycleEpoch === epoch &&
       open()
     if (!isCurrent()) return
+    if (clearStaleOffer && working()) return
+    if (clearStaleOffer) channelCheckUnconfirmed = true
+    const discardStaleOffer = clearStaleOffer || channelCheckUnconfirmed
     setBusy(true)
     setError('')
     setCheckFailed(false)
+    if (discardStaleOffer) {
+      const current = state()
+      if (current) setState({ phase: 'checking', currentVersion: current.currentVersion })
+    }
+    let channelSaved = beforeCheck === undefined
     try {
+      await beforeCheck?.()
+      channelSaved = true
+      if (!isCurrent()) return
       const checked = await local.adapter.check()
-      if (isCurrent()) applyCheckResult(checked)
+      if (isCurrent()) {
+        applyCheckResult(checked, !discardStaleOffer)
+        if (discardStaleOffer && checked.phase !== 'failed') channelCheckUnconfirmed = false
+      }
     } catch (caught) {
       if (isCurrent()) {
-        failCheck(caught, 'Could not check for updates')
-        await loadStatus(isCurrent)
+        if (discardStaleOffer) {
+          const fallback = channelSaved
+            ? 'Could not check for updates'
+            : 'Could not save the update channel'
+          const message = errorMessage(caught, fallback)
+          setState({
+            phase: 'failed',
+            currentVersion: state()?.currentVersion ?? '',
+            error: message,
+          })
+          failCheck(message, fallback)
+        } else {
+          failCheck(caught, 'Could not check for updates')
+          await loadStatus(isCurrent)
+        }
       }
     } finally {
       if (isCurrent()) setBusy(false)
@@ -366,11 +414,31 @@ export function UpdateDialog(props: UpdateDialogProps) {
       try {
         const current = await local.adapter.getStatus()
         if (!isCurrent()) return
-        setState(current)
+        const discardStaleOffer = channelCheckUnconfirmed
+        setState(
+          discardStaleOffer
+            ? { phase: 'checking', currentVersion: current.currentVersion }
+            : current
+        )
         const checked = await local.adapter.check()
-        if (isCurrent()) applyCheckResult(checked)
+        if (isCurrent()) {
+          applyCheckResult(checked, !discardStaleOffer)
+          if (discardStaleOffer && checked.phase !== 'failed') channelCheckUnconfirmed = false
+        }
       } catch (caught) {
-        if (isCurrent()) failCheck(caught, 'Could not check for updates')
+        if (isCurrent()) {
+          if (channelCheckUnconfirmed) {
+            const message = errorMessage(caught, 'Could not check for updates')
+            setState({
+              phase: 'failed',
+              currentVersion: state()?.currentVersion ?? '',
+              error: message,
+            })
+            failCheck(message, 'Could not check for updates')
+          } else {
+            failCheck(caught, 'Could not check for updates')
+          }
+        }
       } finally {
         if (isCurrent()) setBusy(false)
       }
@@ -497,6 +565,8 @@ export function UpdateDialog(props: UpdateDialogProps) {
     return value ? plainTextFromMarkdown(value) : ''
   }
   const working = () => busy() || cancelPending() || isBusy(state())
+  const channelControlDisabled = () => !desktop() || working()
+  const recheckChannel = (beforeCheck?: () => Promise<void>) => check(beforeCheck, true)
   const isCurrent = () => state()?.phase === 'current' && !error() && !checkFailed() && !working()
 
   const triggerLabel = () => {
@@ -644,6 +714,16 @@ export function UpdateDialog(props: UpdateDialogProps) {
                 </Show>
               </div>
             </div>
+            <Show when={local.channelControl}>
+              {(channelControl) => (
+                <div class="mt-4 border-t border-border pt-4">
+                  {channelControl()({
+                    disabled: channelControlDisabled,
+                    recheck: recheckChannel,
+                  })}
+                </div>
+              )}
+            </Show>
           </section>
 
           <Show

package/src/components/theme/appearance-panel.tsx

@@ -24,7 +24,8 @@ import { Heading } from '../ui/typography'
  *   2. **Themes** — one for each appearance. Both are shown at once, because the
  *      choice is per-appearance and hiding the other half makes it feel like one
  *      setting that keeps changing.
- *   3. **Accent** — adea's presets, layered on whichever theme is active.
+ *   3. **Accent** — adea's presets, then the accents the selected theme pair
+ *      carries itself, layered on whichever theme is active.
  *   4. **Font** — the interface face.
  *
  * The panel reads and writes the provider's preference and keeps no state of its
@@ -37,7 +38,7 @@ const DARK_THEMES = themesForAppearance('dark')
 
 export function AppearancePanel(props: AppearancePanelProps) {
   const [local, rest] = splitProps(props, ['class'])
-  const { selection, setSelection, resolvedAppearance } = useTheme()
+  const { selection, setSelection, resolvedAppearance, themeAccents } = useTheme()
 
   return (
     <div data-slot="appearance-panel" class={cn('flex flex-col gap-8', local.class)} {...rest}>
@@ -95,38 +96,38 @@ export function AppearancePanel(props: AppearancePanelProps) {
           </Heading>
           <p class="max-w-prose text-sm text-muted-foreground">
             Colours the interactive roles — the primary button, the focus ring, a selected row — on
-            top of the theme above. Every preset is measured against the surface it lands on, so
-            none of them can make a label unreadable.
+            top of the theme above — one of the presets, or a colour the theme carries itself. Every
+            option is measured against the surface it lands on, so none of them can make a label
+            unreadable.
           </p>
         </header>
         <div role="radiogroup" aria-label="Accent" class="flex flex-wrap gap-2">
           <For each={accentPresets}>
             {(preset) => (
-              <Button
-                as="button"
-                type="button"
-                variant="outline"
-                size="sm"
-                role="radio"
-                aria-checked={selection().accent === preset.id}
-                aria-label={preset.label}
-                class={cn({
-                  'border-ring ring-3 ring-primary-subtle': selection().accent === preset.id,
-                })}
-                onClick={() => setSelection({ accent: preset.id })}
-              >
-                <span
-                  aria-hidden="true"
-                  class="size-3 rounded-full border border-border"
-                  style={{
-                    'background-color':
-                      preset.id === 'theme'
-                        ? 'var(--primary)'
-                        : `var(--accent-${preset.id}, ${preset.dark})`,
-                  }}
-                />
-                {preset.label}
-              </Button>
+              <AccentOption
+                id={preset.id}
+                label={preset.label}
+                checked={selection().accent === preset.id}
+                swatch={
+                  preset.id === 'theme'
+                    ? 'var(--primary)'
+                    : `var(--accent-${preset.id}, ${preset.dark})`
+                }
+                onSelect={() => setSelection({ accent: preset.id })}
+              />
+            )}
+          </For>
+          {/* The theme's own accents follow the presets. Their values are the
+              theme pair's, so the swatch shows the side that is active now. */}
+          <For each={themeAccents()}>
+            {(accent) => (
+              <AccentOption
+                id={accent.id}
+                label={`Theme ${accent.label.toLowerCase()}`}
+                checked={selection().accent === accent.id}
+                swatch={resolvedAppearance() === 'dark' ? accent.dark : accent.light}
+                onSelect={() => setSelection({ accent: accent.id })}
+              />
             )}
           </For>
         </div>
@@ -163,6 +164,36 @@ export function AppearancePanel(props: AppearancePanelProps) {
   )
 }
 
+function AccentOption(props: {
+  id: string
+  label: string
+  checked: boolean
+  swatch: string
+  onSelect: () => void
+}) {
+  return (
+    <Button
+      as="button"
+      type="button"
+      variant="outline"
+      size="sm"
+      role="radio"
+      data-accent-option={props.id}
+      aria-checked={props.checked}
+      aria-label={props.label}
+      class={cn({ 'border-ring ring-3 ring-primary-subtle': props.checked })}
+      onClick={() => props.onSelect()}
+    >
+      <span
+        aria-hidden="true"
+        class="size-3 rounded-full border border-border"
+        style={{ 'background-color': props.swatch }}
+      />
+      {props.label}
+    </Button>
+  )
+}
+
 function ThemeSection(props: {
   title: string
   description: string

package/src/components/theme/theme-provider.tsx

@@ -9,11 +9,14 @@ import {
   useContext,
 } from 'solid-js'
 import { accentPresets, fontOptions } from '#lib/tokens'
+import type { AccentPreset } from '@adea-ai/themes'
 import {
   accentVariables,
   builtinThemes,
   defaultDarkThemeId,
   defaultLightThemeId,
+  isThemeAccentId,
+  themeAccentsFor,
   themeById,
   themeCssVariables,
   type ThemeAppearance,
@@ -33,7 +36,8 @@ import {
  *   - **appearance** — light, dark, or follow the system.
  *   - **a theme per appearance** — so a user can run Catppuccin Mocha by night and
  *     Solarized Light by day without re-choosing when the system flips.
- *   - **an accent** — adea's six presets, which re-colour the interactive roles on
+ *   - **an accent** — adea's six presets, or one of the accents the selected theme
+ *     pair carries itself (`ansi-blue`…), which re-colour the interactive roles on
  *     top of whichever theme is active.
  *   - **a font** — the interface face.
  *
@@ -57,7 +61,11 @@ export type ThemeSelection = {
   lightThemeId: string
   /** The variant to use when the resolved appearance is dark. */
   darkThemeId: string
-  /** An `accentPresets` id, or `theme` for the variant's own primary. */
+  /**
+   * An `accentPresets` id, a theme accent id from `themeAccents()` (`ansi-blue`…),
+   * or `theme` for the variant's own primary. A theme accent the current pair does
+   * not offer falls back to the variant's own primary.
+   */
   accent: string
   /** A `fontOptions` id, or `space-grotesk` for the default. */
   font: string
@@ -111,6 +119,11 @@ export type ThemeContextValue = {
   setSelection: (patch: Partial<ThemeSelection>) => void
   /** The catalogue, so a picker does not import it separately. */
   themes: readonly ThemeVariant[]
+  /**
+   * The accents the selected light/dark pair carries, offered beside the presets.
+   * Follows the selection: a different theme pair may offer different slots.
+   */
+  themeAccents: () => readonly AccentPreset[]
 }
 
 const ThemeContext = createContext<ThemeContextValue>()
@@ -157,9 +170,15 @@ function readSelection(storageKey: string): ThemeSelection {
         themeById(parsed.darkThemeId ?? '')?.appearance === 'dark'
           ? (parsed.darkThemeId as string)
           : defaultDarkThemeId,
-      accent: accentPresets.some((preset) => preset.id === parsed.accent)
-        ? (parsed.accent as string)
-        : defaultThemeSelection.accent,
+      // A theme accent is kept whenever it names a slot, even one the stored pair
+      // cannot offer: the id is role-shaped so it survives a theme switch, and an
+      // unoffered slot already resolves to the theme's own primary when applied.
+      accent:
+        typeof parsed.accent === 'string' &&
+        (accentPresets.some((preset) => preset.id === parsed.accent) ||
+          isThemeAccentId(parsed.accent))
+          ? parsed.accent
+          : defaultThemeSelection.accent,
       font: fontOptions.some((option) => option.id === parsed.font)
         ? (parsed.font as string)
         : defaultThemeSelection.font,
@@ -246,7 +265,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
     // them meant the attribute was set, the rules were present, and nothing
     // changed on screen.
     const properties = { ...themeCssVariables(active) }
-    const accent = accentVariables(selection().accent, resolvedAppearance())
+    const accent = accentVariables(selection().accent, resolvedAppearance(), selection())
     if (accent) Object.assign(properties, accent)
 
     for (const [name, value] of Object.entries(properties)) {
@@ -258,7 +277,7 @@ export function ThemeProvider(props: ThemeProviderProps) {
     root.dataset['appearance'] = resolvedAppearance()
     root.style.colorScheme = resolvedAppearance()
 
-    if (selection().accent === 'theme') root.removeAttribute('data-accent')
+    if (!accent) root.removeAttribute('data-accent')
     else root.dataset['accent'] = selection().accent
 
     if (selection().font === 'space-grotesk') root.removeAttribute('data-font')
@@ -272,11 +291,16 @@ export function ThemeProvider(props: ThemeProviderProps) {
     else root.dataset['density'] = resolvedDensity(selection())
   })
 
+  const themeAccents = createMemo(() =>
+    themeAccentsFor(selection().lightThemeId, selection().darkThemeId)
+  )
+
   const value: ThemeContextValue = {
     selection,
     resolvedAppearance,
     variant,
     themes: builtinThemes,
+    themeAccents,
     setSelection(patch) {
       const next = { ...selection(), ...patch }
       setSelectionState(next)