@brimveyn/aimux 1.7.0 → 1.7.2

package/src/ui/theme-store.ts

@@ -1,39 +1,108 @@
 import { useStore } from 'zustand'
 import { createStore } from 'zustand/vanilla'
 
-import { type Theme, type ThemeColorMap, type ThemeId, THEMES } from './themes'
+import {
+  accent,
+  type AimuxPalette,
+  type AimuxTheme,
+  border,
+  diffAddBg,
+  diffDeleteBg,
+  elevated,
+  extendPalette,
+  faint,
+  hover,
+  muted,
+  selected,
+  type ThemeId,
+  THEMES,
+} from './themes'
+
+export interface ThemeTokens {
+  /** `accent` with `primary` fallback. */
+  accent: string
+  /** Subtle border between panels. */
+  border: string
+  /** Background tint for inserted diff lines. */
+  diffAddBg: string
+  /** Background tint for removed diff lines. */
+  diffDeleteBg: string
+  /** Surface a notch above the base background — sidebars, headers. */
+  elevated: string
+  /** Fainter still — line numbers, placeholders, disabled. */
+  faint: string
+  /** Hover/highlight surface (line highlight, list hover). */
+  hover: string
+  /** Half-way between background and ink — labels, captions, paths. */
+  muted: string
+  palette: AimuxPalette
+  /** Selected/active row surface. */
+  selected: string
+}
+
+function computeTokens(palette: AimuxPalette): ThemeTokens {
+  return {
+    accent: accent(palette),
+    border: border(palette),
+    diffAddBg: diffAddBg(palette),
+    diffDeleteBg: diffDeleteBg(palette),
+    elevated: elevated(palette),
+    faint: faint(palette),
+    hover: hover(palette),
+    muted: muted(palette),
+    palette,
+    selected: selected(palette),
+  }
+}
+
+// Memoize by palette reference so `useStore` selectors return stable objects.
+let cachedPalette: AimuxPalette | null = null
+let cachedTokens: ThemeTokens | null = null
+
+function deriveTokens(palette: AimuxPalette): ThemeTokens {
+  if (cachedPalette === palette && cachedTokens) return cachedTokens
+  cachedPalette = palette
+  cachedTokens = computeTokens(palette)
+  return cachedTokens
+}
 
 interface ThemeStore {
-  theme: Theme
+  theme: AimuxTheme
   transparent: boolean
 }
 
-const DEFAULT = THEMES['aimux']
+const DEFAULT = THEMES['aimux-dark']
 if (!DEFAULT) throw new Error('default theme missing')
 
 const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT, transparent: false }))
 
-/**
- * Subscribe to the active theme. Pass a selector to subscribe to a narrower
- * slice (`useTheme(t => t.colors['editor.foreground'])`) or call with no
- * arguments to get the whole theme.
- */
-export function useTheme(): Theme
-export function useTheme<T>(selector: (theme: Theme) => T): T
-export function useTheme<T>(selector?: (theme: Theme) => T): T | Theme {
-  return useStore(themeStore, (s) => (selector ? selector(s.theme) : s.theme))
+/** Subscribe to the active palette plus precomputed derived shades. */
+export function useTokens(): ThemeTokens {
+  return useStore(themeStore, (s) => deriveTokens(s.theme.palette))
+}
+
+/** Synchronous tokens for non-React callers. */
+export function getCurrentTokens(): ThemeTokens {
+  return deriveTokens(themeStore.getState().theme.palette)
 }
 
 /** Synchronous snapshot for non-React callers (reducers, side effects). */
-export function getCurrentTheme(): Theme {
+export function getCurrentTheme(): AimuxTheme {
   return themeStore.getState().theme
 }
 
-/** Swap the active theme. Triggers re-renders on every `useTheme` subscriber. */
-export function applyTheme(id: ThemeId): void {
+/** Swap the active theme by id, optionally merging palette overrides. */
+export function applyTheme(id: ThemeId, paletteOverrides?: Partial<AimuxPalette>): void {
   const entry = THEMES[id]
   if (!entry) return
-  themeStore.setState({ theme: entry })
+  const palette = extendPalette(entry.palette, paletteOverrides)
+  const merged: AimuxTheme = {
+    ...entry,
+    bg: palette.neutral,
+    fg: palette.ink,
+    palette,
+  }
+  themeStore.setState({ theme: merged })
 }
 
 /** Subscribe to the transparent-mode flag. */
@@ -50,11 +119,31 @@ export function setTransparent(value: boolean): void {
   themeStore.setState({ transparent: value })
 }
 
+export type SurfaceToken = 'base' | 'elevated' | 'hover' | 'selected' | 'border'
+
+function resolveSurface(palette: AimuxPalette, token: SurfaceToken): string {
+  switch (token) {
+    case 'base':
+      return palette.neutral
+    case 'elevated':
+      return elevated(palette)
+    case 'hover':
+      return hover(palette)
+    case 'selected':
+      return selected(palette)
+    case 'border':
+      return border(palette)
+  }
+}
+
 /**
- * Resolve a background color through the transparent-mode flag. Returns
- * `undefined` when transparent mode is on, letting the terminal emulator's
- * own background show through.
+ * Resolve a surface color through the transparent-mode flag. Returns
+ * `undefined` for the base surface when transparent mode is on, letting the
+ * terminal emulator's own background show through.
  */
-export function useBg(key: keyof ThemeColorMap): string | undefined {
-  return useStore(themeStore, (s) => (s.transparent ? undefined : s.theme.colors[key]))
+export function useBg(token: SurfaceToken): string | undefined {
+  return useStore(themeStore, (s) => {
+    if (s.transparent && token === 'base') return undefined
+    return resolveSurface(s.theme.palette, token)
+  })
 }

package/src/ui/theme.ts

@@ -1,13 +1,16 @@
 // Back-compat shim: the theme singleton has been replaced with a Zustand store.
-// React components should import `useTheme` from `./theme-store`; non-React
-// callers use `getCurrentTheme()`. `applyTheme` moved to the store module.
+// React components use `useTokens` for derived shades; non-React callers use
+// `getCurrentTheme()` / `getCurrentTokens()`.
 
 export {
   applyTheme,
   getCurrentTheme,
+  getCurrentTokens,
   getTransparent,
   setTransparent,
+  type SurfaceToken,
+  type ThemeTokens,
   useBg,
-  useTheme,
+  useTokens,
   useTransparent,
 } from './theme-store'

package/src/ui/themes.ts

@@ -1,25 +1,30 @@
-// Thin runtime re-export. Theme data, types, normalization, and registration
-// all live in `@brimveyn/aimux-config` so the dependency-free config package is
-// the single source of truth. The mutable theme singleton + `applyTheme` stay
-// in `./theme.ts` since they're UI-layer concerns.
+// Thin runtime re-export. Theme data, types, palette utilities, and the
+// palette-to-Shiki generator all live in `@brimveyn/aimux-config`.
 
 export type {
-  AimuxColorKey,
-  NamedTheme,
-  NamedThemeDefinition,
+  AimuxPalette,
+  AimuxTheme,
+  AimuxThemeConfig,
   Theme,
-  ThemeColorMap,
   ThemeId,
-  ThemeSettings,
-  ThemeTokenRule,
+  ThemeMode,
 } from '@brimveyn/aimux-config'
 
 export {
-  AIMUX_COLOR_KEYS,
+  accent,
+  border,
+  diffAddBg,
+  diffDeleteBg,
+  elevated,
+  extendPalette,
+  faint,
+  hover,
   isKnownThemeId,
   migrateThemeId,
-  normalizeTheme,
-  registerUserThemes,
+  mix,
+  muted,
+  paletteToShikiTheme,
+  selected,
   THEME_IDS,
   THEMES,
 } from '@brimveyn/aimux-config'