@brimveyn/aimux 1.9.3 → 1.9.6

package/src/ui/components/primitives/surface.tsx

@@ -1,21 +1,24 @@
 import type { ReactNode } from 'react'
 
-import { type SurfaceToken, useBg } from '../../theme'
+import type { TuiColorToken } from '../../themes'
+
+import { useTheme } from '../../theme'
 
 type SurfaceTone = 'muted' | 'elevated' | 'selected' | 'input' | 'inputActive'
 
-function toneToToken(tone: SurfaceTone): SurfaceToken {
+function toneToToken(tone: SurfaceTone): TuiColorToken {
   switch (tone) {
     case 'elevated':
-      return 'elevated'
+      return 'backgroundElement'
     case 'selected':
-    case 'inputActive':
-      return 'selected'
+      return 'backgroundElement'
     case 'input':
-      return 'base'
+      return 'backgroundElement'
+    case 'inputActive':
+      return 'backgroundElement'
     case 'muted':
     default:
-      return 'elevated'
+      return 'backgroundPanel'
   }
 }
 
@@ -44,10 +47,10 @@ export function Surface({
   tone = 'muted',
   width,
 }: SurfaceProps) {
-  const bg = useBg(toneToToken(tone))
+  const t = useTheme()
   return (
     <box
-      backgroundColor={bg}
+      backgroundColor={t[toneToToken(tone)]}
       flexDirection={flexDirection}
       gap={gap}
       padding={padding}

package/src/ui/filter-themes.ts

@@ -1,15 +1,16 @@
-import { THEME_IDS, type ThemeId, THEMES } from './themes'
+import { THEME_IDS, type ThemeId } from './themes'
+
+export function themeDisplayName(id: ThemeId): string {
+  return id
+    .split(/[-_]/)
+    .map((p) => (p.length > 0 ? (p[0] ?? '').toUpperCase() + p.slice(1) : p))
+    .join(' ')
+}
 
 export function filterThemeIds(filter: string | null): ThemeId[] {
   if (!filter) return THEME_IDS
   const needle = filter.toLowerCase()
   return THEME_IDS.filter((id) => {
-    const entry = THEMES[id]
-    if (!entry) return false
-    return (
-      id.toLowerCase().includes(needle) ||
-      entry.displayName.toLowerCase().includes(needle) ||
-      entry.name.toLowerCase().includes(needle)
-    )
+    return id.toLowerCase().includes(needle) || themeDisplayName(id).toLowerCase().includes(needle)
   })
 }

package/src/ui/root.tsx

@@ -30,7 +30,7 @@ import { ThemePickerModal } from './components/modals/themes/theme-picker-modal'
 import { ContextMenuBox } from './components/overlays/context-menu/context-menu-box'
 import { ContextMenuOverlay } from './components/overlays/context-menu/context-menu-overlay'
 import { PendingChordOverlay } from './components/overlays/pending-chord-overlay'
-import { useBg, useTokens } from './theme'
+import { useTheme } from './theme'
 
 function getCreateSessionFields(modal: ModalState) {
   if (modal.type !== 'create-session') {
@@ -250,7 +250,8 @@ export function RootView({
   terminalRows,
   themeId,
 }: RootViewProps) {
-  const editorBg = useBg('base')
+  const t = useTheme()
+  const editorBg = t.background
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const layoutTrees = useAppStore((s) => s.layoutTrees)
@@ -415,8 +416,8 @@ function GitPaneInPaneMode({
     side: 'left' | 'right'
   }) => void
 }) {
-  const bg = useBg('elevated')
-  const tokens = useTokens()
+  const tokens = useTheme()
+  const bg = tokens.backgroundPanel
   const gitPane = useAppStore((s) => s.gitPane)
   const width = getGitPaneWidthFromRatio(ratio)
   const contentWidth = Math.max(1, width - 1)

package/src/ui/shiki.ts

@@ -1,3 +1,4 @@
+import { tuiThemeToShiki } from '@brimveyn/aimux-config'
 import {
   type BundledLanguage,
   createHighlighter,
@@ -5,13 +6,14 @@ import {
   type ThemeRegistrationRaw,
 } from 'shiki'
 
-import { getCurrentTheme } from './theme-store'
-import { paletteToShikiTheme } from './themes'
+import { getCurrentMode, getCurrentTheme, getCurrentThemeId } from './theme-store'
 
 function buildActiveTheme(): { id: string; raw: ThemeRegistrationRaw } {
-  const theme = getCurrentTheme()
-  const id = `${theme.name}-${theme.mode}`
-  return { id, raw: paletteToShikiTheme({ mode: theme.mode, name: id, palette: theme.palette }) }
+  const id = `${getCurrentThemeId()}-${getCurrentMode()}`
+  return {
+    id,
+    raw: tuiThemeToShiki({ mode: getCurrentMode(), name: id, theme: getCurrentTheme() }),
+  }
 }
 
 let highlighterPromise: Promise<Highlighter> | null = null
@@ -39,11 +41,6 @@ export async function ensureShikiLang(h: Highlighter, lang: string): Promise<boo
   }
 }
 
-/**
- * Make sure the active aimux theme (light or dark, with any palette overrides)
- * is loaded into the highlighter. Returns the registered theme name so the
- * caller can pass it to `codeToTokens`.
- */
 export async function ensureActiveShikiTheme(h: Highlighter): Promise<string> {
   const { id, raw } = buildActiveTheme()
   if (id === activeThemeId) return id
@@ -51,7 +48,7 @@ export async function ensureActiveShikiTheme(h: Highlighter): Promise<string> {
     await h.loadTheme(raw)
     activeThemeId = id
   } catch {
-    // Reloading the theme is best-effort; on failure we keep using the prior id.
+    // best-effort
   }
   return activeThemeId ?? id
 }

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'