claude-code/components/design-system/ThemeProvider.tsx

import { c as _c } from "react/compiler-runtime";
import { feature } from 'bun:bundle';
import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
import useStdin from '../../ink/hooks/use-stdin.js';
import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js';
import { getSystemThemeName, type SystemTheme } from '../../utils/systemTheme.js';
import type { ThemeName, ThemeSetting } from '../../utils/theme.js';
type ThemeContextValue = {
  /** The saved user preference. May be 'auto'. */
  themeSetting: ThemeSetting;
  setThemeSetting: (setting: ThemeSetting) => void;
  setPreviewTheme: (setting: ThemeSetting) => void;
  savePreview: () => void;
  cancelPreview: () => void;
  /** The resolved theme to render with. Never 'auto'. */
  currentTheme: ThemeName;
};

// Non-'auto' default so useTheme() works without a provider (tests, tooling).
const DEFAULT_THEME: ThemeName = 'dark';
const ThemeContext = createContext<ThemeContextValue>({
  themeSetting: DEFAULT_THEME,
  setThemeSetting: () => {},
  setPreviewTheme: () => {},
  savePreview: () => {},
  cancelPreview: () => {},
  currentTheme: DEFAULT_THEME
});
type Props = {
  children: React.ReactNode;
  initialState?: ThemeSetting;
  onThemeSave?: (setting: ThemeSetting) => void;
};
function defaultInitialTheme(): ThemeSetting {
  return getGlobalConfig().theme;
}
function defaultSaveTheme(setting: ThemeSetting): void {
  saveGlobalConfig(current => ({
    ...current,
    theme: setting
  }));
}
export function ThemeProvider({
  children,
  initialState,
  onThemeSave = defaultSaveTheme
}: Props) {
  const [themeSetting, setThemeSetting] = useState(initialState ?? defaultInitialTheme);
  const [previewTheme, setPreviewTheme] = useState<ThemeSetting | null>(null);

  // Track terminal theme for 'auto' resolution. Seeds from $COLORFGBG (or
  // 'dark' if unset); the OSC 11 watcher corrects it on first poll.
  const [systemTheme, setSystemTheme] = useState<SystemTheme>(() => (initialState ?? themeSetting) === 'auto' ? getSystemThemeName() : 'dark');

  // The setting currently in effect (preview wins while picker is open)
  const activeSetting = previewTheme ?? themeSetting;
  const {
    internal_querier
  } = useStdin();

  // Watch for live terminal theme changes while 'auto' is active.
  // Positive feature() pattern so the watcher import is dead-code-eliminated
  // in external builds.
  useEffect(() => {
    if (feature('AUTO_THEME')) {
      if (activeSetting !== 'auto' || !internal_querier) return;
      let cleanup: (() => void) | undefined;
      let cancelled = false;
      void import('../../utils/systemThemeWatcher.js').then(({
        watchSystemTheme
      }) => {
        if (cancelled) return;
        cleanup = watchSystemTheme(internal_querier, setSystemTheme);
      });
      return () => {
        cancelled = true;
        cleanup?.();
      };
    }
  }, [activeSetting, internal_querier]);
  const currentTheme: ThemeName = activeSetting === 'auto' ? systemTheme : activeSetting;
  const value = useMemo<ThemeContextValue>(() => ({
    themeSetting,
    setThemeSetting: (newSetting: ThemeSetting) => {
      setThemeSetting(newSetting);
      setPreviewTheme(null);
      // Switching to 'auto' restarts the watcher (activeSetting dep), whose
      // first poll fires immediately. Seed from the cache so the OSC
      // round-trip doesn't flash the wrong palette.
      if (newSetting === 'auto') {
        setSystemTheme(getSystemThemeName());
      }
      onThemeSave?.(newSetting);
    },
    setPreviewTheme: (newSetting_0: ThemeSetting) => {
      setPreviewTheme(newSetting_0);
      if (newSetting_0 === 'auto') {
        setSystemTheme(getSystemThemeName());
      }
    },
    savePreview: () => {
      if (previewTheme !== null) {
        setThemeSetting(previewTheme);
        setPreviewTheme(null);
        onThemeSave?.(previewTheme);
      }
    },
    cancelPreview: () => {
      if (previewTheme !== null) {
        setPreviewTheme(null);
      }
    },
    currentTheme
  }), [themeSetting, previewTheme, currentTheme, onThemeSave]);
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

/**
 * Returns the resolved theme for rendering (never 'auto') and a setter that
 * accepts any ThemeSetting (including 'auto').
 */
export function useTheme() {
  const $ = _c(3);
  const {
    currentTheme,
    setThemeSetting
  } = useContext(ThemeContext);
  let t0;
  if ($[0] !== currentTheme || $[1] !== setThemeSetting) {
    t0 = [currentTheme, setThemeSetting];
    $[0] = currentTheme;
    $[1] = setThemeSetting;
    $[2] = t0;
  } else {
    t0 = $[2];
  }
  return t0;
}

/**
 * Returns the raw theme setting as stored in config. Use this in UI that
 * needs to show 'auto' as a distinct choice (e.g., ThemePicker).
 */
export function useThemeSetting() {
  return useContext(ThemeContext).themeSetting;
}
export function usePreviewTheme() {
  const $ = _c(4);
  const {
    setPreviewTheme,
    savePreview,
    cancelPreview
  } = useContext(ThemeContext);
  let t0;
  if ($[0] !== cancelPreview || $[1] !== savePreview || $[2] !== setPreviewTheme) {
    t0 = {
      setPreviewTheme,
      savePreview,
      cancelPreview
    };
    $[0] = cancelPreview;
    $[1] = savePreview;
    $[2] = setPreviewTheme;
    $[3] = t0;
  } else {
    t0 = $[3];
  }
  return t0;
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJmZWF0dXJlIiwiUmVhY3QiLCJjcmVhdGVDb250ZXh0IiwidXNlQ29udGV4dCIsInVzZUVmZmVjdCIsInVzZU1lbW8iLCJ1c2VTdGF0ZSIsInVzZVN0ZGluIiwiZ2V0R2xvYmFsQ29uZmlnIiwic2F2ZUdsb2JhbENvbmZpZyIsImdldFN5c3RlbVRoZW1lTmFtZSIsIlN5c3RlbVRoZW1lIiwiVGhlbWVOYW1lIiwiVGhlbWVTZXR0aW5nIiwiVGhlbWVDb250ZXh0VmFsdWUiLCJ0aGVtZVNldHRpbmciLCJzZXRUaGVtZVNldHRpbmciLCJzZXR0aW5nIiwic2V0UHJldmlld1RoZW1lIiwic2F2ZVByZXZpZXciLCJjYW5jZWxQcmV2aWV3IiwiY3VycmVudFRoZW1lIiwiREVGQVVMVF9USEVNRSIsIlRoZW1lQ29udGV4dCIsIlByb3BzIiwiY2hpbGRyZW4iLCJSZWFjdE5vZGUiLCJpbml0aWFsU3RhdGUiLCJvblRoZW1lU2F2ZSIsImRlZmF1bHRJbml0aWFsVGhlbWUiLCJ0aGVtZSIsImRlZmF1bHRTYXZlVGhlbWUiLCJjdXJyZW50IiwiVGhlbWVQcm92aWRlciIsInByZXZpZXdUaGVtZSIsInN5c3RlbVRoZW1lIiwic2V0U3lzdGVtVGhlbWUiLCJhY3RpdmVTZXR0aW5nIiwiaW50ZXJuYWxfcXVlcmllciIsImNsZWFudXAiLCJjYW5jZWxsZWQiLCJ0aGVuIiwid2F0Y2hTeXN0ZW1UaGVtZSIsInZhbHVlIiwibmV3U2V0dGluZyIsInVzZVRoZW1lIiwiJCIsIl9jIiwidDAiLCJ1c2VUaGVtZVNldHRpbmciLCJ1c2VQcmV2aWV3VGhlbWUiXSwic291cmNlcyI6WyJUaGVtZVByb3ZpZGVyLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBmZWF0dXJlIH0gZnJvbSAnYnVuOmJ1bmRsZSdcbmltcG9ydCBSZWFjdCwge1xuICBjcmVhdGVDb250ZXh0LFxuICB1c2VDb250ZXh0LFxuICB1c2VFZmZlY3QsXG4gIHVzZU1lbW8sXG4gIHVzZVN0YXRlLFxufSBmcm9tICdyZWFjdCdcbmltcG9ydCB1c2VTdGRpbiBmcm9tICcuLi8uLi9pbmsvaG9va3MvdXNlLXN0ZGluLmpzJ1xuaW1wb3J0IHsgZ2V0R2xvYmFsQ29uZmlnLCBzYXZlR2xvYmFsQ29uZmlnIH0gZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLmpzJ1xuaW1wb3J0IHtcbiAgZ2V0U3lzdGVtVGhlbWVOYW1lLFxuICB0eXBlIFN5c3RlbVRoZW1lLFxufSBmcm9tICcuLi8uLi91dGlscy9zeXN0ZW1UaGVtZS5qcydcbmltcG9ydCB0eXBlIHsgVGhlbWVOYW1lLCBUaGVtZVNldHRpbmcgfSBmcm9tICcuLi8uLi91dGlscy90aGVtZS5qcydcblxudHlwZSBUaGVtZUNvbnRleHRWYWx1ZSA9IHtcbiAgLyoqIFRoZSBzYXZlZCB1c2VyIHByZWZlcmVuY2UuIE1heSBiZSAnYXV0bycuICovXG4gIHRoZW1lU2V0dGluZzogVGhlbWVTZXR0aW5nXG4gIHNldFRoZW1lU2V0dGluZzogKHNldHRpbmc6IFRoZW1lU2V0dGluZykgPT4gdm9pZFxuICBzZXRQcmV2aWV3VGhlbWU6IChzZXR0aW5nOiBUaGVtZVNldHRpbmcpID0+IHZvaWRcbiAgc2F2ZVByZXZpZXc6ICgpID0+IHZvaWRcbiAgY2FuY2VsUHJldmlldzogKCkgPT4gdm9pZFxuICAvKiogVGhlIHJlc29sdmVkIHRoZW1lIHRvIHJlbmRlciB3aXRoLiBOZXZlciAnYXV0bycuICovXG4gIGN1cnJlbnRUaGVtZTogVGhlbWVOYW1lXG59XG5cbi8vIE5vbi0nYXV0bycgZGVmYXVsdCBzbyB1c2VUaGVtZSgpIHdvcmtzIHdpdGhvdXQgYSBwcm92aWRlciAodGVzdHMsIHRvb2xpbmcpLlxuY29uc3QgREVGQVVMVF9USEVNRTogVGhlbWVOYW1lID0gJ2RhcmsnXG5cbmNvbnN0IFRoZW1lQ29udGV4dCA9IGNyZWF0ZUNvbnRleHQ8VGhlbWVDb250ZXh0VmFsdWU+KHtcbiAgdGhlbWVTZXR0aW5nOiBERUZBVUxUX1RIRU1FLFxuICBzZXRUaGVtZVNldHRpbmc6ICgpID0+IHt9LFxuICBzZXRQcmV2aWV3VGhlbWU6ICgpID0+IHt9LFxuICBzYXZlUHJldmlldzogKCkgPT4ge30sXG4gIGNhbmNlbFByZXZpZXc6ICgpID0+IHt9LFxuICBjdXJyZW50VGhlbWU6IERFRkFVTFRfVEhFTUUsXG59KVxuXG50eXBlIFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlXG4gIGluaXRpYWxTdGF0ZT86IFRoZW1lU2V0dGluZ1xuICBvblRoZW1lU2F2ZT86IChzZXR0aW5nOiBUaGVtZVNldHRpbmcpID0+IHZvaWRcbn1cblxuZnVuY3Rpb24gZGVmYXVsdEluaXRpYWxUaGVtZSgpOiBUaGVtZVNldHRpbmcge1xuICByZXR1cm4gZ2V0R2xvYmFsQ29uZmlnKCkudGhlbWVcbn1cblxuZnVuY3Rpb24gZGVmYXVsdFNhdmVUaGVtZShzZXR0aW5nOiBUaGVtZVNldHRpbmcpOiB2b2lkIHtcbiAgc2F2ZUdsb2JhbENvbmZpZyhjdXJyZW50ID0+ICh7IC4uLmN1cnJlbnQsIHRoZW1lOiBzZXR0aW5nIH0pKVxufVxuXG5leHBvcnQgZnVuY3Rpb24gVGhlbWVQcm92aWRlcih7XG4gIGNoaWxkcmVuLFxuICBpbml0aWFsU3RhdGUsXG4gIG9uVGhlbWVTYXZlID0gZGVmYXVsdFNhdmVUaGVtZSxcbn06IFByb3BzKSB7XG4gIGNvbnN0IFt0aGVtZVNldHRpbmcsIHNldFRoZW1lU2V0dGluZ10gPSB1c2VTdGF0ZShcbiAgICBpbml0aWFsU3RhdGUgPz8gZGVmYXVsdEluaXRpYWxUaGVtZSxcbiAgKVxuICBjb25zdCBbcHJldmlld1RoZW1lLCBzZXRQcmV2aWV3VGhlbWVdID0gdXNlU3RhdGU8VGhlbWVTZXR0aW5nIHwgbnVsbD4obnVsbClcblxuICAvLyBUcmFjayB0ZXJtaW5hbCB0aGVtZSBmb3IgJ2F1dG8nIHJlc29sdXRpb24uIFNlZWRzIGZyb20gJENPTE9SRkdCRyAob3JcbiAgLy8gJ2RhcmsnIGlmIHVuc2V0KTsgdGhlIE9TQyAxMSB3YXRjaGVyIGNvcnJlY3RzIGl0IG9uIGZpcnN0IHBvbGwuXG4gIGNvbnN0IFtzeXN0ZW1UaGVtZSwgc2V0U3lzdGVtVGhlbWVdID0gdXNlU3RhdGU8U3lzdGVtVGhlbWU+KCgpID0+XG4gICAgKGluaXRpYWxTdGF0ZSA/PyB0aGVtZVNldHRpbmcpID09PSAnYXV0bycgPyBnZXRTeXN0ZW1UaGVtZU5hbWUoKSA6ICdkYXJrJyxcbiAgKVxuXG4gIC8vIFRoZSBzZXR0aW5nIGN1cnJlbnRseSBpbiBlZmZlY3QgKHByZXZpZXcgd2lucyB3aGlsZSBwaWNrZXIgaXMgb3BlbilcbiAgY29uc3QgYWN0aXZlU2V0dGluZyA9IHByZXZpZXdUaGVtZSA/PyB0aGVtZVNldHRpbmdcblxuICBjb25zdCB7IGludGVybmFsX3F1ZXJpZXIgfSA