main
import { PALETTES, type PaletteMode, resetPalette, setPalette, setTheme, usePalette, useTheme } from '@app/lib'
import { type ReactNode, useMemo } from 'react'
import { ThemeContext, type ThemeContextValue } from './theme-context'
/**
* Publishes the palette store to the tree. The store itself lives in
* `shared/lib/palettes` (plain module + `useSyncExternalStore`), so themed
* surfaces outside React — the injected `<style>` and the boot sequence — read
* the same state without a provider in scope.
*/
export function ThemeProvider({ children }: { children: ReactNode }) {
const palette = usePalette()
const mode = useTheme()
const value = useMemo<ThemeContextValue>(
() => ({
palette: palette.palette,
paletteId: palette.id,
mode,
variant: palette.variant,
encoded: palette.encoded,
palettes: PALETTES,
setPalette,
resetPalette,
setMode: (next: PaletteMode) => setTheme(next),
}),
[palette, mode],
)
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
}