@brimveyn/aimux 1.9.5 → 1.9.6

package/src/ui/theme-store.ts

@@ -1,114 +1,74 @@
-import { useStore } from 'zustand'
-import { createStore } from 'zustand/vanilla'
-
 import {
-  accent,
-  type AimuxPalette,
-  type AimuxTheme,
-  computeSurfaces,
-  diffAddBg,
-  diffDeleteBg,
-  extendPalette,
+  migrateThemeId,
+  type ResolvedTuiTheme,
+  resolveTuiTheme,
   type ThemeId,
   type ThemeMode,
-  THEMES,
-} from './themes'
+  TUI_THEMES,
+} from '@brimveyn/aimux-config'
+import { useStore } from 'zustand'
+import { createStore } from 'zustand/vanilla'
 
-export interface ThemeTokens {
-  /** `accent` with `primary` fallback. */
-  accent: string
-  /** App-level background surface (derived from palette.neutral seed via OKLCH). */
-  bg: 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
-}
+const DEFAULT_ID: ThemeId = 'aimux'
 
-function computeTokens(palette: AimuxPalette, mode: ThemeMode): ThemeTokens {
-  const surfaces = computeSurfaces(palette, mode)
-  return {
-    accent: accent(palette),
-    bg: surfaces.bg,
-    border: surfaces.border,
-    diffAddBg: diffAddBg(palette),
-    diffDeleteBg: diffDeleteBg(palette),
-    elevated: surfaces.elevated,
-    faint: surfaces.faint,
-    hover: surfaces.hover,
-    muted: surfaces.muted,
-    palette,
-    selected: surfaces.selected,
-  }
+interface ThemeStore {
+  id: ThemeId
+  mode: ThemeMode
+  transparent: boolean
 }
 
-// Memoize by (palette, mode) so `useStore` selectors return stable objects.
-let cachedPalette: AimuxPalette | null = null
+const themeStore = createStore<ThemeStore>(() => ({
+  id: DEFAULT_ID,
+  mode: 'dark',
+  transparent: false,
+}))
+
+let cachedId: ThemeId | null = null
 let cachedMode: ThemeMode | null = null
-let cachedTokens: ThemeTokens | null = null
+let cachedResolved: ResolvedTuiTheme | null = null
 
-function deriveTokens(palette: AimuxPalette, mode: ThemeMode): ThemeTokens {
-  if (cachedPalette === palette && cachedMode === mode && cachedTokens) return cachedTokens
-  cachedPalette = palette
+function derive(id: ThemeId, mode: ThemeMode): ResolvedTuiTheme {
+  if (cachedResolved && cachedId === id && cachedMode === mode) return cachedResolved
+  cachedId = id
   cachedMode = mode
-  cachedTokens = computeTokens(palette, mode)
-  return cachedTokens
+  const json = TUI_THEMES[id] ?? TUI_THEMES.aimux
+  if (!json) throw new Error(`No theme JSON for ${id}`)
+  cachedResolved = resolveTuiTheme(json, mode)
+  return cachedResolved
 }
 
-interface ThemeStore {
-  theme: AimuxTheme
-  transparent: boolean
+/** Subscribe to the resolved TUI theme for the active id+mode. */
+export function useTheme(): ResolvedTuiTheme {
+  return useStore(themeStore, (s) => derive(s.id, s.mode))
 }
 
-const DEFAULT = THEMES['aimux-dark']
-if (!DEFAULT) throw new Error('default theme missing')
-
-const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT, transparent: false }))
+/** Synchronous snapshot of the resolved theme for non-React callers. */
+export function getCurrentTheme(): ResolvedTuiTheme {
+  const s = themeStore.getState()
+  return derive(s.id, s.mode)
+}
 
-/** Subscribe to the active palette plus precomputed derived shades. */
-export function useTokens(): ThemeTokens {
-  return useStore(themeStore, (s) => deriveTokens(s.theme.palette, s.theme.mode))
+export function getCurrentThemeId(): ThemeId {
+  return themeStore.getState().id
 }
 
-/** Synchronous tokens for non-React callers. */
-export function getCurrentTokens(): ThemeTokens {
-  const s = themeStore.getState()
-  return deriveTokens(s.theme.palette, s.theme.mode)
+export function getCurrentMode(): ThemeMode {
+  return themeStore.getState().mode
 }
 
-/** Synchronous snapshot for non-React callers (reducers, side effects). */
-export function getCurrentTheme(): AimuxTheme {
-  return themeStore.getState().theme
+/** Swap the active theme by id. Falls back via migrateThemeId for legacy ids. */
+export function applyTheme(id: string): void {
+  const next = migrateThemeId(id)
+  if (themeStore.getState().id === next) return
+  themeStore.setState({ id: next })
 }
 
-/** 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
-  const palette = extendPalette(entry.palette, paletteOverrides)
-  const merged: AimuxTheme = {
-    ...entry,
-    bg: palette.neutral,
-    fg: palette.ink,
-    palette,
-  }
-  themeStore.setState({ theme: merged })
+/** Toggle between dark and light. Plumbed but not yet wired to UI controls. */
+export function setMode(mode: ThemeMode): void {
+  if (themeStore.getState().mode === mode) return
+  themeStore.setState({ mode })
 }
 
-/** Subscribe to the transparent-mode flag. */
 export function useTransparent(): boolean {
   return useStore(themeStore, (s) => s.transparent)
 }
@@ -121,33 +81,3 @@ export function setTransparent(value: boolean): void {
   if (themeStore.getState().transparent === value) return
   themeStore.setState({ transparent: value })
 }
-
-export type SurfaceToken = 'base' | 'elevated' | 'hover' | 'selected' | 'border'
-
-function resolveSurface(palette: AimuxPalette, mode: ThemeMode, token: SurfaceToken): string {
-  const surfaces = computeSurfaces(palette, mode)
-  switch (token) {
-    case 'base':
-      return surfaces.bg
-    case 'elevated':
-      return surfaces.elevated
-    case 'hover':
-      return surfaces.hover
-    case 'selected':
-      return surfaces.selected
-    case 'border':
-      return surfaces.border
-  }
-}
-
-/**
- * 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(token: SurfaceToken): string | undefined {
-  return useStore(themeStore, (s) => {
-    if (s.transparent && token === 'base') return undefined
-    return resolveSurface(s.theme.palette, s.theme.mode, token)
-  })
-}

package/src/ui/theme.ts

@@ -1,16 +1,16 @@
-// Back-compat shim: the theme singleton has been replaced with a Zustand store.
-// React components use `useTokens` for derived shades; non-React callers use
-// `getCurrentTheme()` / `getCurrentTokens()`.
+// Back-compat shim: the theme singleton lives in `theme-store.ts`. React
+// components use `useTheme` for the resolved TUI token map; non-React callers
+// use `getCurrentTheme()`.
 
+export type { ResolvedTuiTheme, TuiColorToken } from './themes'
 export {
   applyTheme,
+  getCurrentMode,
   getCurrentTheme,
-  getCurrentTokens,
+  getCurrentThemeId,
   getTransparent,
+  setMode,
   setTransparent,
-  type SurfaceToken,
-  type ThemeTokens,
-  useBg,
-  useTokens,
+  useTheme,
   useTransparent,
 } from './theme-store'

package/src/ui/themes.ts

@@ -1,31 +1,20 @@
-// Thin runtime re-export. Theme data, types, palette utilities, and the
-// palette-to-Shiki generator all live in `@brimveyn/aimux-config`.
+// Thin runtime re-export of the TUI theme namespace.
 
 export type {
-  AimuxPalette,
-  AimuxTheme,
-  AimuxThemeConfig,
-  Theme,
+  ResolvedTuiTheme,
+  RGBA,
   ThemeId,
   ThemeMode,
+  TuiColorToken,
+  TuiColorValue,
+  TuiThemeJson,
 } from '@brimveyn/aimux-config'
 
 export {
-  accent,
-  border,
-  computeSurfaces,
-  diffAddBg,
-  diffDeleteBg,
-  elevated,
-  extendPalette,
-  faint,
-  hover,
   isKnownThemeId,
   migrateThemeId,
-  mix,
-  muted,
-  paletteToShikiTheme,
-  selected,
+  resolveTuiTheme,
   THEME_IDS,
-  THEMES,
+  TUI_COLOR_TOKENS,
+  TUI_THEMES,
 } from '@brimveyn/aimux-config'