@tooee/themes 0.1.11 → 0.1.12

package/src/theme.tsx

@@ -1,716 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  type ReactNode,
-} from "react"
-import { RGBA, SyntaxStyle } from "@opentui/core"
-import { writeGlobalConfig } from "@tooee/config"
-import { readFileSync, readdirSync, existsSync } from "fs"
-import { join, basename, dirname } from "path"
-
-// ---------------------------------------------------------------------------
-// Theme JSON format (OpenCode-compatible)
-// ---------------------------------------------------------------------------
-
-type HexColor = `#${string}`
-type RefName = string
-type Variant = { dark: HexColor | RefName; light: HexColor | RefName }
-type ColorValue = HexColor | RefName | Variant
-
-export interface ThemeJSON {
-  $schema?: string
-  defs?: Record<string, HexColor | RefName>
-  theme: Record<string, ColorValue>
-}
-
-// ---------------------------------------------------------------------------
-// Resolved theme — all colors resolved to hex strings
-// ---------------------------------------------------------------------------
-
-export interface ResolvedTheme {
-  // UI
-  primary: string
-  secondary: string
-  accent: string
-  error: string
-  warning: string
-  success: string
-  info: string
-  text: string
-  textMuted: string
-  background: string
-  backgroundPanel: string
-  backgroundElement: string
-  border: string
-  borderActive: string
-  borderSubtle: string
-  // Diff
-  diffAdded: string
-  diffRemoved: string
-  diffContext: string
-  diffHunkHeader: string
-  diffHighlightAdded: string
-  diffHighlightRemoved: string
-  diffAddedBg: string
-  diffRemovedBg: string
-  diffContextBg: string
-  diffLineNumber: string
-  diffAddedLineNumberBg: string
-  diffRemovedLineNumberBg: string
-  // Markdown
-  markdownText: string
-  markdownHeading: string
-  markdownLink: string
-  markdownLinkText: string
-  markdownCode: string
-  markdownBlockQuote: string
-  markdownEmph: string
-  markdownStrong: string
-  markdownHorizontalRule: string
-  markdownListItem: string
-  markdownListEnumeration: string
-  markdownImage: string
-  markdownImageText: string
-  markdownCodeBlock: string
-  // Cursor/Selection
-  cursorLine: string
-  selection: string
-  // Syntax
-  syntaxComment: string
-  syntaxKeyword: string
-  syntaxFunction: string
-  syntaxVariable: string
-  syntaxString: string
-  syntaxNumber: string
-  syntaxType: string
-  syntaxOperator: string
-  syntaxPunctuation: string
-}
-
-// All keys of ResolvedTheme for iteration
-const RESOLVED_KEYS: (keyof ResolvedTheme)[] = [
-  "primary",
-  "secondary",
-  "accent",
-  "error",
-  "warning",
-  "success",
-  "info",
-  "text",
-  "textMuted",
-  "background",
-  "backgroundPanel",
-  "backgroundElement",
-  "border",
-  "borderActive",
-  "borderSubtle",
-  "cursorLine",
-  "selection",
-  "diffAdded",
-  "diffRemoved",
-  "diffContext",
-  "diffHunkHeader",
-  "diffHighlightAdded",
-  "diffHighlightRemoved",
-  "diffAddedBg",
-  "diffRemovedBg",
-  "diffContextBg",
-  "diffLineNumber",
-  "diffAddedLineNumberBg",
-  "diffRemovedLineNumberBg",
-  "markdownText",
-  "markdownHeading",
-  "markdownLink",
-  "markdownLinkText",
-  "markdownCode",
-  "markdownBlockQuote",
-  "markdownEmph",
-  "markdownStrong",
-  "markdownHorizontalRule",
-  "markdownListItem",
-  "markdownListEnumeration",
-  "markdownImage",
-  "markdownImageText",
-  "markdownCodeBlock",
-  "syntaxComment",
-  "syntaxKeyword",
-  "syntaxFunction",
-  "syntaxVariable",
-  "syntaxString",
-  "syntaxNumber",
-  "syntaxType",
-  "syntaxOperator",
-  "syntaxPunctuation",
-]
-
-// Fallbacks used when a theme key is missing
-const FALLBACKS: Record<string, string> = {
-  primary: "#808080",
-  secondary: "#808080",
-  accent: "#808080",
-  error: "#808080",
-  warning: "#808080",
-  success: "#808080",
-  info: "#808080",
-  text: "#d4d4d4",
-  textMuted: "#808080",
-  background: "#1e1e1e",
-  backgroundPanel: "#1e1e1e",
-  backgroundElement: "#1e1e1e",
-  cursorLine: "#1e1e1e",
-  selection: "#1e1e1e",
-  border: "#808080",
-  borderActive: "#808080",
-  borderSubtle: "#808080",
-  diffAdded: "#4fd6be",
-  diffRemoved: "#c53b53",
-  diffContext: "#808080",
-  diffHunkHeader: "#808080",
-  diffHighlightAdded: "#4fd6be",
-  diffHighlightRemoved: "#c53b53",
-  diffAddedBg: "#1e3a1e",
-  diffRemovedBg: "#3a1e1e",
-  diffContextBg: "#1e1e1e",
-  diffLineNumber: "#808080",
-  diffAddedLineNumberBg: "#1e3a1e",
-  diffRemovedLineNumberBg: "#3a1e1e",
-  markdownText: "#d4d4d4",
-  markdownHeading: "#808080",
-  markdownLink: "#808080",
-  markdownLinkText: "#808080",
-  markdownCode: "#808080",
-  markdownBlockQuote: "#808080",
-  markdownEmph: "#808080",
-  markdownStrong: "#808080",
-  markdownHorizontalRule: "#808080",
-  markdownListItem: "#808080",
-  markdownListEnumeration: "#808080",
-  markdownImage: "#808080",
-  markdownImageText: "#808080",
-  markdownCodeBlock: "#d4d4d4",
-  syntaxComment: "#808080",
-  syntaxKeyword: "#808080",
-  syntaxFunction: "#808080",
-  syntaxVariable: "#808080",
-  syntaxString: "#808080",
-  syntaxNumber: "#808080",
-  syntaxType: "#808080",
-  syntaxOperator: "#808080",
-  syntaxPunctuation: "#808080",
-}
-
-// ---------------------------------------------------------------------------
-// Resolution
-// ---------------------------------------------------------------------------
-
-export function resolveTheme(json: ThemeJSON, mode: "dark" | "light"): ResolvedTheme {
-  const defs = json.defs ?? {}
-
-  function resolveColor(c: ColorValue): string {
-    if (typeof c === "string") {
-      if (c === "transparent" || c === "none") return "#00000000"
-      if (c.startsWith("#")) return c
-      if (defs[c] != null) return resolveColor(defs[c] as ColorValue)
-      if (json.theme[c] !== undefined) return resolveColor(json.theme[c] as ColorValue)
-      return "#808080"
-    }
-    return resolveColor(c[mode])
-  }
-
-  const result = {} as Record<string, string>
-  for (const key of RESOLVED_KEYS) {
-    const val = json.theme[key]
-    result[key] = val !== undefined ? resolveColor(val) : (FALLBACKS[key] ?? "#808080")
-  }
-  // Dynamic fallbacks that reference other resolved keys
-  if (json.theme["cursorLine"] === undefined) result.cursorLine = result.backgroundElement
-  if (json.theme["selection"] === undefined) result.selection = result.backgroundPanel
-  return result as unknown as ResolvedTheme
-}
-
-// ---------------------------------------------------------------------------
-// SyntaxStyle builder
-// ---------------------------------------------------------------------------
-
-function getSyntaxRules(resolved: ResolvedTheme) {
-  return [
-    { scope: ["default"], style: { foreground: RGBA.fromHex(resolved.text) } },
-    { scope: ["prompt"], style: { foreground: RGBA.fromHex(resolved.accent) } },
-    {
-      scope: ["comment", "comment.documentation"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxComment), italic: true },
-    },
-    { scope: ["string", "symbol"], style: { foreground: RGBA.fromHex(resolved.syntaxString) } },
-    { scope: ["number", "boolean"], style: { foreground: RGBA.fromHex(resolved.syntaxNumber) } },
-    { scope: ["character.special"], style: { foreground: RGBA.fromHex(resolved.syntaxString) } },
-    {
-      scope: ["keyword.return", "keyword.conditional", "keyword.repeat", "keyword.coroutine"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxKeyword), italic: true },
-    },
-    {
-      scope: ["keyword.type"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxType), bold: true, italic: true },
-    },
-    {
-      scope: ["keyword.function", "function.method"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxFunction) },
-    },
-    {
-      scope: ["keyword"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxKeyword), italic: true },
-    },
-    { scope: ["keyword.import"], style: { foreground: RGBA.fromHex(resolved.syntaxKeyword) } },
-    {
-      scope: ["operator", "keyword.operator", "punctuation.delimiter"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxOperator) },
-    },
-    {
-      scope: ["keyword.conditional.ternary"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxOperator) },
-    },
-    {
-      scope: ["variable", "variable.parameter", "function.method.call", "function.call"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxVariable) },
-    },
-    {
-      scope: ["variable.member", "function", "constructor"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxFunction) },
-    },
-    { scope: ["type", "module"], style: { foreground: RGBA.fromHex(resolved.syntaxType) } },
-    { scope: ["constant"], style: { foreground: RGBA.fromHex(resolved.syntaxNumber) } },
-    { scope: ["property"], style: { foreground: RGBA.fromHex(resolved.syntaxVariable) } },
-    { scope: ["class"], style: { foreground: RGBA.fromHex(resolved.syntaxType) } },
-    { scope: ["parameter"], style: { foreground: RGBA.fromHex(resolved.syntaxVariable) } },
-    {
-      scope: ["punctuation", "punctuation.bracket"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxPunctuation) },
-    },
-    {
-      scope: [
-        "variable.builtin",
-        "type.builtin",
-        "function.builtin",
-        "module.builtin",
-        "constant.builtin",
-      ],
-      style: { foreground: RGBA.fromHex(resolved.error) },
-    },
-    { scope: ["variable.super"], style: { foreground: RGBA.fromHex(resolved.error) } },
-    {
-      scope: ["string.escape", "string.regexp"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxKeyword) },
-    },
-    {
-      scope: ["keyword.directive"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxKeyword), italic: true },
-    },
-    {
-      scope: ["punctuation.special"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxOperator) },
-    },
-    {
-      scope: ["keyword.modifier"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxKeyword), italic: true },
-    },
-    {
-      scope: ["keyword.exception"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxKeyword), italic: true },
-    },
-    // Markdown
-    {
-      scope: [
-        "markup.heading",
-        "markup.heading.1",
-        "markup.heading.2",
-        "markup.heading.3",
-        "markup.heading.4",
-        "markup.heading.5",
-        "markup.heading.6",
-      ],
-      style: { foreground: RGBA.fromHex(resolved.markdownHeading), bold: true },
-    },
-    {
-      scope: ["markup.bold", "markup.strong"],
-      style: { foreground: RGBA.fromHex(resolved.markdownStrong), bold: true },
-    },
-    {
-      scope: ["markup.italic"],
-      style: { foreground: RGBA.fromHex(resolved.markdownEmph), italic: true },
-    },
-    { scope: ["markup.list"], style: { foreground: RGBA.fromHex(resolved.markdownListItem) } },
-    {
-      scope: ["markup.quote"],
-      style: { foreground: RGBA.fromHex(resolved.markdownBlockQuote), italic: true },
-    },
-    {
-      scope: ["markup.raw", "markup.raw.block"],
-      style: { foreground: RGBA.fromHex(resolved.markdownCode) },
-    },
-    {
-      scope: ["markup.raw.inline"],
-      style: {
-        foreground: RGBA.fromHex(resolved.markdownCode),
-        background: RGBA.fromHex(resolved.background),
-      },
-    },
-    {
-      scope: ["markup.link"],
-      style: { foreground: RGBA.fromHex(resolved.markdownLink), underline: true },
-    },
-    {
-      scope: ["markup.link.label"],
-      style: { foreground: RGBA.fromHex(resolved.markdownLinkText), underline: true },
-    },
-    {
-      scope: ["markup.link.url"],
-      style: { foreground: RGBA.fromHex(resolved.markdownLink), underline: true },
-    },
-    { scope: ["label"], style: { foreground: RGBA.fromHex(resolved.markdownLinkText) } },
-    { scope: ["spell", "nospell"], style: { foreground: RGBA.fromHex(resolved.text) } },
-    { scope: ["conceal"], style: { foreground: RGBA.fromHex(resolved.textMuted) } },
-    {
-      scope: ["string.special", "string.special.url"],
-      style: { foreground: RGBA.fromHex(resolved.markdownLink), underline: true },
-    },
-    { scope: ["character"], style: { foreground: RGBA.fromHex(resolved.syntaxString) } },
-    { scope: ["float"], style: { foreground: RGBA.fromHex(resolved.syntaxNumber) } },
-    {
-      scope: ["comment.error"],
-      style: { foreground: RGBA.fromHex(resolved.error), italic: true, bold: true },
-    },
-    {
-      scope: ["comment.warning"],
-      style: { foreground: RGBA.fromHex(resolved.warning), italic: true, bold: true },
-    },
-    {
-      scope: ["comment.todo", "comment.note"],
-      style: { foreground: RGBA.fromHex(resolved.info), italic: true, bold: true },
-    },
-    { scope: ["namespace"], style: { foreground: RGBA.fromHex(resolved.syntaxType) } },
-    { scope: ["field"], style: { foreground: RGBA.fromHex(resolved.syntaxVariable) } },
-    {
-      scope: ["type.definition"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxType), bold: true },
-    },
-    { scope: ["keyword.export"], style: { foreground: RGBA.fromHex(resolved.syntaxKeyword) } },
-    { scope: ["attribute", "annotation"], style: { foreground: RGBA.fromHex(resolved.warning) } },
-    { scope: ["tag"], style: { foreground: RGBA.fromHex(resolved.error) } },
-    { scope: ["tag.attribute"], style: { foreground: RGBA.fromHex(resolved.syntaxKeyword) } },
-    { scope: ["tag.delimiter"], style: { foreground: RGBA.fromHex(resolved.syntaxOperator) } },
-    { scope: ["markup.strikethrough"], style: { foreground: RGBA.fromHex(resolved.textMuted) } },
-    {
-      scope: ["markup.underline"],
-      style: { foreground: RGBA.fromHex(resolved.text), underline: true },
-    },
-    { scope: ["markup.list.checked"], style: { foreground: RGBA.fromHex(resolved.success) } },
-    { scope: ["markup.list.unchecked"], style: { foreground: RGBA.fromHex(resolved.textMuted) } },
-    {
-      scope: ["diff.plus"],
-      style: {
-        foreground: RGBA.fromHex(resolved.diffAdded),
-        background: RGBA.fromHex(resolved.diffAddedBg),
-      },
-    },
-    {
-      scope: ["diff.minus"],
-      style: {
-        foreground: RGBA.fromHex(resolved.diffRemoved),
-        background: RGBA.fromHex(resolved.diffRemovedBg),
-      },
-    },
-    {
-      scope: ["diff.delta"],
-      style: {
-        foreground: RGBA.fromHex(resolved.diffContext),
-        background: RGBA.fromHex(resolved.diffContextBg),
-      },
-    },
-    { scope: ["error"], style: { foreground: RGBA.fromHex(resolved.error), bold: true } },
-    { scope: ["warning"], style: { foreground: RGBA.fromHex(resolved.warning), bold: true } },
-    { scope: ["info"], style: { foreground: RGBA.fromHex(resolved.info) } },
-    { scope: ["debug"], style: { foreground: RGBA.fromHex(resolved.textMuted) } },
-  ]
-}
-
-export function buildSyntaxStyle(resolved: ResolvedTheme): SyntaxStyle {
-  return SyntaxStyle.fromTheme(getSyntaxRules(resolved))
-}
-
-// ---------------------------------------------------------------------------
-// Theme loading
-// ---------------------------------------------------------------------------
-
-/** Cache of loaded theme JSONs by name */
-const themeJsonCache = new Map<string, ThemeJSON>()
-
-function loadJsonThemesFromDir(dir: string, target: Map<string, ThemeJSON>) {
-  try {
-    if (!existsSync(dir)) return
-    for (const file of readdirSync(dir)) {
-      if (!file.endsWith(".json")) continue
-      const name = basename(file, ".json")
-      try {
-        const content = readFileSync(join(dir, file), "utf-8")
-        target.set(name, JSON.parse(content) as ThemeJSON)
-      } catch {
-        // skip invalid files
-      }
-    }
-  } catch {
-    // dir not readable
-  }
-}
-
-/** Load all bundled themes from packages/themes/themes/ */
-function loadBundledThemes(): Map<string, ThemeJSON> {
-  if (themeJsonCache.size > 0) return themeJsonCache
-
-  // Bundled themes
-  const bundledDir = join(dirname(new URL(import.meta.url).pathname), "..", "themes")
-  loadJsonThemesFromDir(bundledDir, themeJsonCache)
-
-  // XDG config: ~/.config/tooee/themes/
-  const xdgConfig = process.env.XDG_CONFIG_HOME ?? join(process.env.HOME ?? "", ".config")
-  loadJsonThemesFromDir(join(xdgConfig, "tooee", "themes"), themeJsonCache)
-
-  // Project-local: search upward for .tooee/themes/
-  let dir = process.cwd()
-  const seen = new Set<string>()
-  while (dir && !seen.has(dir)) {
-    seen.add(dir)
-    loadJsonThemesFromDir(join(dir, ".tooee", "themes"), themeJsonCache)
-    const parent = dirname(dir)
-    if (parent === dir) break
-    dir = parent
-  }
-
-  return themeJsonCache
-}
-
-export function loadThemes(): Map<string, ThemeJSON> {
-  return loadBundledThemes()
-}
-
-export function getThemeNames(): string[] {
-  return Array.from(loadThemes().keys()).sort()
-}
-
-export interface Theme {
-  name: string
-  mode: "dark" | "light"
-  colors: ResolvedTheme
-  syntax: SyntaxStyle
-}
-
-// ---------------------------------------------------------------------------
-// Default theme
-// ---------------------------------------------------------------------------
-
-const DEFAULT_THEME_NAME = "tokyonight"
-const DEFAULT_MODE: "dark" | "light" = "dark"
-
-function buildTheme(name: string, mode: "dark" | "light"): Theme {
-  const themes = loadThemes()
-  const json = themes.get(name)
-  if (!json) {
-    // Fall back to tokyonight, then first available, then hardcoded
-    const fallbackJson = themes.get(DEFAULT_THEME_NAME) ?? themes.values().next().value
-    if (fallbackJson) {
-      const resolved = resolveTheme(fallbackJson, mode)
-      return { name, mode, colors: resolved, syntax: buildSyntaxStyle(resolved) }
-    }
-    // Absolute fallback — hardcoded Tokyo Night colors
-    return hardcodedDefaultTheme
-  }
-  const resolved = resolveTheme(json, mode)
-  return { name, mode, colors: resolved, syntax: buildSyntaxStyle(resolved) }
-}
-
-const hardcodedDefaultTheme: Theme = (() => {
-  const colors: ResolvedTheme = {
-    primary: "#7aa2f7",
-    secondary: "#bb9af7",
-    accent: "#7dcfff",
-    error: "#f7768e",
-    warning: "#e0af68",
-    success: "#9ece6a",
-    info: "#7aa2f7",
-    text: "#c0caf5",
-    textMuted: "#565f89",
-    background: "#1a1b26",
-    backgroundPanel: "#1e2030",
-    backgroundElement: "#222436",
-    cursorLine: "#222436",
-    selection: "#1e2030",
-    border: "#565f89",
-    borderActive: "#737aa2",
-    borderSubtle: "#414868",
-    diffAdded: "#4fd6be",
-    diffRemoved: "#c53b53",
-    diffContext: "#828bb8",
-    diffHunkHeader: "#828bb8",
-    diffHighlightAdded: "#b8db87",
-    diffHighlightRemoved: "#e26a75",
-    diffAddedBg: "#20303b",
-    diffRemovedBg: "#37222c",
-    diffContextBg: "#1e2030",
-    diffLineNumber: "#222436",
-    diffAddedLineNumberBg: "#1b2b34",
-    diffRemovedLineNumberBg: "#2d1f26",
-    markdownText: "#c0caf5",
-    markdownHeading: "#bb9af7",
-    markdownLink: "#7aa2f7",
-    markdownLinkText: "#7dcfff",
-    markdownCode: "#9ece6a",
-    markdownBlockQuote: "#e0af68",
-    markdownEmph: "#e0af68",
-    markdownStrong: "#ff966c",
-    markdownHorizontalRule: "#565f89",
-    markdownListItem: "#7aa2f7",
-    markdownListEnumeration: "#7dcfff",
-    markdownImage: "#7aa2f7",
-    markdownImageText: "#7dcfff",
-    markdownCodeBlock: "#c0caf5",
-    syntaxComment: "#565f89",
-    syntaxKeyword: "#bb9af7",
-    syntaxFunction: "#7aa2f7",
-    syntaxVariable: "#c0caf5",
-    syntaxString: "#9ece6a",
-    syntaxNumber: "#ff9e64",
-    syntaxType: "#2ac3de",
-    syntaxOperator: "#89ddff",
-    syntaxPunctuation: "#a9b1d6",
-  }
-  return { name: DEFAULT_THEME_NAME, mode: DEFAULT_MODE, colors, syntax: buildSyntaxStyle(colors) }
-})()
-
-export const defaultTheme: Theme = hardcodedDefaultTheme
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-interface ThemeContextValue {
-  theme: ResolvedTheme
-  syntax: SyntaxStyle
-  name: string
-  mode: "dark" | "light"
-}
-
-const ThemeContext = createContext<ThemeContextValue>({
-  theme: defaultTheme.colors,
-  syntax: defaultTheme.syntax,
-  name: defaultTheme.name,
-  mode: defaultTheme.mode,
-})
-
-export interface ThemeProviderProps {
-  /** Theme name (e.g. "tokyonight", "catppuccin", "dracula") */
-  name?: string
-  /** Color mode */
-  mode?: "dark" | "light"
-  /** Full Theme object (overrides name/mode if provided) */
-  theme?: Theme
-  children: ReactNode
-}
-
-export function ThemeProvider({ name, mode, theme: themeProp, children }: ThemeProviderProps) {
-  const resolved = themeProp
-    ? {
-        theme: themeProp.colors,
-        syntax: themeProp.syntax,
-        name: themeProp.name,
-        mode: themeProp.mode,
-      }
-    : (() => {
-        const t = buildTheme(name ?? DEFAULT_THEME_NAME, mode ?? DEFAULT_MODE)
-        return { theme: t.colors, syntax: t.syntax, name: t.name, mode: t.mode }
-      })()
-
-  return <ThemeContext.Provider value={resolved}>{children}</ThemeContext.Provider>
-}
-
-export function useTheme(): ThemeContextValue {
-  return useContext(ThemeContext)
-}
-
-// ---------------------------------------------------------------------------
-// ThemeSwitcherProvider + useThemeSwitcher
-// ---------------------------------------------------------------------------
-
-interface ThemeSwitcherContextValue extends ThemeContextValue {
-  nextTheme: () => void
-  prevTheme: () => void
-  setTheme: (name: string, opts?: { persist?: boolean }) => void
-  allThemes: string[]
-}
-
-const ThemeSwitcherContext = createContext<ThemeSwitcherContextValue | null>(null)
-
-export interface ThemeSwitcherProviderProps {
-  initialTheme?: string
-  initialMode?: "dark" | "light"
-  children: ReactNode
-}
-
-export function ThemeSwitcherProvider({
-  initialTheme,
-  initialMode,
-  children,
-}: ThemeSwitcherProviderProps) {
-  const allThemes = getThemeNames()
-  const [themeName, setThemeName] = useState(initialTheme ?? DEFAULT_THEME_NAME)
-  const [mode, _setMode] = useState<"dark" | "light">(initialMode ?? DEFAULT_MODE)
-
-  const theme = buildTheme(themeName, mode)
-
-  const nextTheme = useCallback(() => {
-    const idx = allThemes.indexOf(themeName)
-    const next = allThemes[(idx + 1) % allThemes.length]
-    setThemeName(next)
-    writeGlobalConfig({ theme: { name: next, mode } })
-  }, [allThemes, mode, themeName])
-
-  const prevTheme = useCallback(() => {
-    const idx = allThemes.indexOf(themeName)
-    const prev = allThemes[(idx - 1 + allThemes.length) % allThemes.length]
-    setThemeName(prev)
-    writeGlobalConfig({ theme: { name: prev, mode } })
-  }, [allThemes, mode, themeName])
-
-  const setThemeByName = useCallback((name: string, opts?: { persist?: boolean }) => {
-    setThemeName(name)
-    if (opts?.persist) {
-      writeGlobalConfig({ theme: { name, mode } })
-    }
-  }, [mode])
-
-  const value: ThemeSwitcherContextValue = {
-    theme: theme.colors,
-    syntax: theme.syntax,
-    name: theme.name,
-    mode,
-    nextTheme,
-    prevTheme,
-    setTheme: setThemeByName,
-    allThemes,
-  }
-
-  return (
-    <ThemeSwitcherContext.Provider value={value}>
-      <ThemeContext.Provider
-        value={{ theme: theme.colors, syntax: theme.syntax, name: theme.name, mode }}
-      >
-        {children}
-      </ThemeContext.Provider>
-    </ThemeSwitcherContext.Provider>
-  )
-}
-
-export function useThemeSwitcher(): ThemeSwitcherContextValue {
-  const ctx = useContext(ThemeSwitcherContext)
-  if (!ctx) throw new Error("useThemeSwitcher must be used within ThemeSwitcherProvider")
-  return ctx
-}