@adea-ai/ui 0.102.0 → 0.103.0

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

package/dist/r/src/lib/theme-accents.ts

@@ -0,0 +1,44 @@
+/**
+ * The accents a theme carries, beside the six presets.
+ *
+ * `@adea-ai/themes` offers two kinds of accent. The presets (`ACCENTS`) are brand
+ * colours, the same six on every theme. Since 0.9 the catalogue also offers the
+ * accent-shaped colours a theme carries itself — its ANSI blue, magenta, cyan and
+ * green, paired across a light and a dark theme and kept only when they clear the
+ * catalogue's accent floors — through `themeAccentPresets`. Those read as part of
+ * the palette rather than as visitors on it, which is why they are offered here.
+ *
+ * Their ids are role-shaped (`ansi-blue`), not value-shaped: a stored theme accent
+ * survives switching themes and resolves to the *new* theme's blue. That has one
+ * consequence a consumer must handle, and this module is where it is handled once:
+ * a stored theme accent may name a slot the current pair does not offer, and then
+ * it resolves to nothing and the theme's own primary applies — the same fallback a
+ * stale preset id gets.
+ *
+ * This module holds only the id test, and reads only the schema entry: the
+ * appearance editor uses it, and the editor's packed renderer gate forbids the
+ * catalogue and normalization modules that *computing* a theme accent needs
+ * (`themeAccentPresets` measures through `normalize.js`). Resolution lives in
+ * `lib/themes.ts`, beside the catalogue it reads.
+ */
+import { ANSI_KEYS } from '@adea-ai/themes/schema'
+
+/** The prefix the catalogue gives every theme-derived accent id. */
+const THEME_ACCENT_PREFIX = 'ansi-'
+
+/**
+ * Whether an id names a theme-derived accent slot.
+ *
+ * Deliberately wider than what any one pair offers: the id is valid to *store*
+ * whenever it names a slot, because the next theme may offer it even if this one
+ * does not. Whether it resolves is `resolveAccentPreset`'s question.
+ */
+export function isThemeAccentId(id: string): boolean {
+  // Computed per call rather than held in a module-level set: a top-level
+  // `new Set(...)` is a statement a bundler cannot prove pure, and it would keep
+  // this module in every bundle that touches the root entry.
+  return (
+    id.startsWith(THEME_ACCENT_PREFIX) &&
+    (ANSI_KEYS as readonly string[]).includes(id.slice(THEME_ACCENT_PREFIX.length))
+  )
+}

package/dist/r/src/lib/themes.ts

@@ -35,9 +35,11 @@
 
 import {
   ACCENTS,
+  accentForeground,
   accentRoles,
   chartSeries,
   getAccent,
+  getTheme,
   hasTheme,
   shadcnDestructiveProjection,
   statusForeground,
@@ -47,10 +49,16 @@ import {
   syntaxRoles,
   themes as catalogue,
   themesByAppearance,
+  themeAccentPresets,
   validateCatalogue,
+  type AccentPreset,
+  type AdeaTheme,
   type AdeaThemeRecord,
   type ContrastFinding,
 } from '@adea-ai/themes'
+import { isThemeAccentId } from './theme-accents'
+
+export { isThemeAccentId } from './theme-accents'
 
 export type ThemeAppearance = 'light' | 'dark'
 
@@ -320,6 +328,100 @@ export function themeFamilies(): { family: string; label: string; themes: ThemeV
 /** The accent presets, in the order a picker should show them. */
 export const accents = ACCENTS
 
+/**
+ * The canonical catalogue records, in catalogue order.
+ *
+ * {@link builtinThemes} is this system's projection of the catalogue onto the
+ * shadcn vocabulary, which is what a document is painted with. A *preview* of a
+ * theme — the miniatures `AppearanceEditor` and `ThemeMiniature` draw — reads the
+ * catalogue's own roles instead (`surfaceActive`, `borderMuted`, `textSubtle`…),
+ * several of which the projection folds together. These are those records, so a
+ * consumer hands the editor exactly what it takes rather than reconstructing it
+ * from the projection.
+ */
+export const themeRecords: readonly AdeaThemeRecord[] = catalogue
+
+export function themeRecordById(id: string): AdeaThemeRecord | undefined {
+  return getTheme(id)
+}
+
+/** A light/dark theme pair by id, with the defaults standing in for an unknown id. */
+function recordPair(lightThemeId: string, darkThemeId: string) {
+  const light = getTheme(lightThemeId) ?? getTheme(defaultLightThemeId)!
+  const dark = getTheme(darkThemeId) ?? getTheme(defaultDarkThemeId)!
+  return { light, dark }
+}
+
+/**
+ * The accents the selected light/dark pair carries — offered beside the presets.
+ *
+ * Computed per pair rather than per theme because a theme accent is a *pair* of
+ * values, like a preset: a slot is offered only when both themes can offer it.
+ */
+export function themeAccentsFor(
+  lightThemeId: string,
+  darkThemeId: string
+): readonly AccentPreset[] {
+  const { light, dark } = recordPair(lightThemeId, darkThemeId)
+  return themeAccentPresets(light, dark)
+}
+
+/**
+ * An accent id resolved against a theme pair: a preset, a theme accent the pair
+ * offers, or `undefined` for `theme`, an unknown id, or a slot this pair cannot
+ * offer — each of which means "use the theme's own primary".
+ *
+ * Theme accent ids are role-shaped (`ansi-blue`), so a stored one survives a theme
+ * switch and resolves to the new theme's blue; when the new pair cannot offer the
+ * slot it resolves to nothing, the same fallback a stale preset id gets.
+ */
+export function resolveAccentPreset(
+  accentId: string,
+  light: AdeaTheme,
+  dark: AdeaTheme
+): AccentPreset | undefined {
+  if (accentId === 'theme') return undefined
+  const preset = getAccent(accentId)
+  if (preset) return preset
+  if (!isThemeAccentId(accentId)) return undefined
+  return themeAccentPresets(light, dark).find((option) => option.id === accentId)
+}
+
+/**
+ * A theme with an accent laid over it, in the catalogue's own shape.
+ *
+ * The accent replaces `accent` and its measured label, which is all an accent
+ * changes about a theme; `undefined` returns the theme untouched. This is the
+ * overlay a host needs for `AppearanceEditor`'s `lightTheme`/`darkTheme`.
+ */
+export function withAccent<T extends AdeaTheme>(theme: T, accent: AccentPreset | undefined): T {
+  if (!accent) return theme
+  const value = theme.appearance === 'dark' ? accent.dark : accent.light
+  return {
+    ...theme,
+    colors: { ...theme.colors, accent: value, accentForeground: accentForeground(value) },
+  }
+}
+
+/**
+ * The two preview themes an appearance selection resolves to, accent applied.
+ *
+ * The adapter between a stored selection and `AppearanceEditor`: it takes ids —
+ * what a preference holds — and returns the canonical records the editor's
+ * `lightTheme` and `darkTheme` props take, so a host does not map roles by hand.
+ * Unknown ids fall back to the defaults and an accent the pair cannot offer falls
+ * back to the theme's own, exactly as `ThemeProvider` resolves them.
+ */
+export function appearancePreviewThemes(selection: {
+  lightThemeId: string
+  darkThemeId: string
+  accent: string
+}): { lightTheme: AdeaThemeRecord; darkTheme: AdeaThemeRecord } {
+  const { light, dark } = recordPair(selection.lightThemeId, selection.darkThemeId)
+  const accent = resolveAccentPreset(selection.accent, light, dark)
+  return { lightTheme: withAccent(light, accent), darkTheme: withAccent(dark, accent) }
+}
+
 /**
  * The properties an accent selection overrides, as CSS custom properties.
  *
@@ -339,16 +441,25 @@ export const accents = ACCENTS
  * provider and the CSS generator call `accentRoles` out of `@adea-ai/themes`, and
  * `tests/appearance-axes.test.ts` asserts the two agree value for value.
  *
- * Returns `undefined` for `theme` — the variant's own primary — and for an id the
- * catalogue does not have, so a stale stored preference falls back to the theme
- * rather than blanking the primary.
+ * A theme accent (`ansi-blue`) has no block: its value depends on the theme pair,
+ * so it is resolved against `pair` — the selection's light and dark theme ids —
+ * and only ever applied here. Without a pair it resolves against the defaults.
+ *
+ * Returns `undefined` for `theme` — the variant's own primary — for an id the
+ * catalogue does not have, and for a theme accent the pair does not offer, so a
+ * stale stored preference falls back to the theme rather than blanking the primary.
  */
 export function accentVariables(
   accentId: string,
-  appearance: ThemeAppearance
+  appearance: ThemeAppearance,
+  pair: { lightThemeId: string; darkThemeId: string } = {
+    lightThemeId: defaultLightThemeId,
+    darkThemeId: defaultDarkThemeId,
+  }
 ): Record<string, string> | undefined {
   if (accentId === 'theme') return undefined
-  const preset = getAccent(accentId)
+  const { light, dark } = recordPair(pair.lightThemeId, pair.darkThemeId)
+  const preset = resolveAccentPreset(accentId, light, dark)
   if (!preset) return undefined
 
   const roles = accentRoles(preset, appearance)

package/dist/r/theming.json

@@ -4,6 +4,7 @@
   "title": "Theming",
   "description": "",
   "dependencies": [
+    "@adea-ai/themes@^0.9.5",
     "lucide-solid@^1.48.0"
   ],
   "registryDependencies": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.102.0",
+  "version": "0.103.0",
   "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",
@@ -119,7 +119,7 @@
     "check:packed-paste-model": "node scripts/check-packed-paste-model.mjs"
   },
   "dependencies": {
-    "@adea-ai/themes": "^0.8.0",
+    "@adea-ai/themes": "^0.9.5",
     "@corvu/calendar": "^0.1.2",
     "@corvu/drawer": "^0.2.4",
     "@corvu/otp-field": "^0.1.4",