Initial public release

packages/ui/src/contexts/FireworksContext.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FireworksAnimation } from '@/components/ui/FireworksAnimation';
+import { useFireworks } from '@/hooks/useFireworks';
+
+interface FireworksContextValue {
+  triggerFireworks: () => void;
+  dismissFireworks: () => void;
+}
+
+const FireworksContext = React.createContext<FireworksContextValue | undefined>(undefined);
+
+export const FireworksProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { isActive, burstKey, triggerFireworks, dismissFireworks } = useFireworks();
+
+  const value = React.useMemo<FireworksContextValue>(
+    () => ({ triggerFireworks, dismissFireworks }),
+    [triggerFireworks, dismissFireworks]
+  );
+
+  return (
+    <FireworksContext.Provider value={value}>
+      {children}
+      <FireworksAnimation isActive={isActive} burstKey={burstKey} />
+    </FireworksContext.Provider>
+  );
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFireworksCelebration = (): FireworksContextValue => {
+  const context = React.useContext(FireworksContext);
+  if (!context) {
+    throw new Error('useFireworksCelebration must be used within FireworksProvider');
+  }
+  return context;
+};

packages/ui/src/contexts/RuntimeAPIProvider.tsx

@@ -0,0 +1,7 @@
+import React, { type JSX, type ReactNode } from 'react';
+import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
+import type { RuntimeAPIs } from '@/lib/api/types';
+
+export function RuntimeAPIProvider({ apis, children }: { apis: RuntimeAPIs; children: ReactNode }): JSX.Element {
+  return <RuntimeAPIContext.Provider value={apis}>{children}</RuntimeAPIContext.Provider>;
+}

packages/ui/src/contexts/ThemeSystemContext.tsx

@@ -0,0 +1,424 @@
+import React, {
+  useEffect,
+  useMemo,
+  useCallback,
+  useState,
+} from 'react';
+import type { Theme, ThemeMode } from '@/types/theme';
+import type { DesktopSettings } from '@/lib/desktop';
+import { isDesktopRuntime } from '@/lib/desktop';
+import { CSSVariableGenerator } from '@/lib/theme/cssGenerator';
+import { updateDesktopSettings } from '@/lib/persistence';
+import {
+  themes,
+  getThemeById,
+  flexokiLightTheme,
+  flexokiDarkTheme,
+} from '@/lib/theme/themes';
+import { ThemeSystemContext, type ThemeContextValue } from './theme-system-context';
+
+type ThemePreferences = {
+  themeMode: ThemeMode;
+  lightThemeId: string;
+  darkThemeId: string;
+};
+
+const DEFAULT_LIGHT_ID = flexokiLightTheme.metadata.id;
+const DEFAULT_DARK_ID = flexokiDarkTheme.metadata.id;
+
+const getSystemPreference = (): boolean => {
+  if (typeof window === 'undefined') {
+    return true;
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const fallbackThemeForVariant = (variant: 'light' | 'dark'): Theme =>
+  variant === 'dark' ? flexokiDarkTheme : flexokiLightTheme;
+
+const findFallbackThemeId = (variant: 'light' | 'dark'): string => {
+  const fallback = themes.find((candidate) => candidate.metadata.variant === variant);
+  return (fallback ?? fallbackThemeForVariant(variant)).metadata.id;
+};
+
+const ensureThemeById = (themeId: string, variant: 'light' | 'dark'): Theme => {
+  const theme = getThemeById(themeId);
+  if (theme && theme.metadata.variant === variant) {
+    return theme;
+  }
+  const fallback = themes.find((candidate) => candidate.metadata.variant === variant);
+  return fallback ?? fallbackThemeForVariant(variant);
+};
+
+const validateThemeId = (themeId: string | null, variant: 'light' | 'dark'): string => {
+  if (!themeId) {
+    return variant === 'light' ? DEFAULT_LIGHT_ID : DEFAULT_DARK_ID;
+  }
+  const theme = getThemeById(themeId);
+  if (theme && theme.metadata.variant === variant) {
+    return theme.metadata.id;
+  }
+  return findFallbackThemeId(variant);
+};
+
+const buildInitialPreferences = (defaultThemeId?: string): ThemePreferences => {
+  let lightThemeId = DEFAULT_LIGHT_ID;
+  let darkThemeId = DEFAULT_DARK_ID;
+  let themeMode: ThemeMode = 'system';
+
+  if (typeof window !== 'undefined') {
+    const storedMode = localStorage.getItem('themeMode');
+    const storedLightId = localStorage.getItem('lightThemeId');
+    const storedDarkId = localStorage.getItem('darkThemeId');
+    const legacyUseSystem = localStorage.getItem('useSystemTheme');
+    const legacyThemeId = localStorage.getItem('selectedThemeId');
+    const legacyVariant = localStorage.getItem('selectedThemeVariant');
+
+    if (storedMode === 'light' || storedMode === 'dark' || storedMode === 'system') {
+      themeMode = storedMode;
+    } else if (legacyUseSystem !== null) {
+      const useSystem = legacyUseSystem === 'true';
+      if (useSystem) {
+        themeMode = 'system';
+      } else if (legacyThemeId) {
+        const legacyTheme = getThemeById(legacyThemeId);
+        if (legacyTheme) {
+          themeMode = legacyTheme.metadata.variant === 'dark' ? 'dark' : 'light';
+          if (legacyTheme.metadata.variant === 'dark') {
+            darkThemeId = legacyTheme.metadata.id;
+          } else {
+            lightThemeId = legacyTheme.metadata.id;
+          }
+        }
+      }
+    } else if (legacyVariant === 'light' || legacyVariant === 'dark') {
+      themeMode = legacyVariant;
+    }
+
+    lightThemeId = validateThemeId(storedLightId, 'light');
+    darkThemeId = validateThemeId(storedDarkId, 'dark');
+  }
+
+  if (defaultThemeId) {
+    const defaultTheme = getThemeById(defaultThemeId);
+    if (defaultTheme) {
+      if (defaultTheme.metadata.variant === 'light') {
+        lightThemeId = defaultTheme.metadata.id;
+      } else {
+        darkThemeId = defaultTheme.metadata.id;
+      }
+    }
+  }
+
+  return {
+    themeMode,
+    lightThemeId,
+    darkThemeId,
+  };
+};
+
+interface ThemeSystemProviderProps {
+  children: React.ReactNode;
+  defaultThemeId?: string;
+}
+
+export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemProviderProps) {
+  const cssGenerator = useMemo(() => new CSSVariableGenerator(), []);
+  const [preferences, setPreferences] = useState<ThemePreferences>(() => buildInitialPreferences(defaultThemeId));
+  const [systemPrefersDark, setSystemPrefersDark] = useState<boolean>(() => getSystemPreference());
+
+  const currentTheme = useMemo(() => {
+    if (preferences.themeMode === 'light') {
+      return ensureThemeById(preferences.lightThemeId, 'light');
+    }
+    if (preferences.themeMode === 'dark') {
+      return ensureThemeById(preferences.darkThemeId, 'dark');
+    }
+    return systemPrefersDark
+      ? ensureThemeById(preferences.darkThemeId, 'dark')
+      : ensureThemeById(preferences.lightThemeId, 'light');
+  }, [preferences, systemPrefersDark]);
+
+  const availableThemes = themes;
+
+  const updateBrowserChrome = useCallback((theme: Theme) => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const chromeColor = theme.colors.surface.background;
+
+    if (isDesktopRuntime()) {
+      document.body.style.backgroundColor = 'transparent';
+    } else {
+      document.body.style.backgroundColor = chromeColor;
+    }
+
+    let metaThemeColor = document.querySelector('meta[name="theme-color"]') as HTMLMetaElement;
+    if (!metaThemeColor) {
+      metaThemeColor = document.createElement('meta');
+      metaThemeColor.setAttribute('name', 'theme-color');
+      document.head.appendChild(metaThemeColor);
+    }
+    metaThemeColor.setAttribute('content', chromeColor);
+
+    const mediaQuery =
+      theme.metadata.variant === 'dark'
+        ? '(prefers-color-scheme: dark)'
+        : '(prefers-color-scheme: light)';
+    let metaThemeColorMedia = document.querySelector(
+      `meta[name="theme-color"][media="${mediaQuery}"]`,
+    ) as HTMLMetaElement;
+    if (!metaThemeColorMedia) {
+      metaThemeColorMedia = document.createElement('meta');
+      metaThemeColorMedia.setAttribute('name', 'theme-color');
+      metaThemeColorMedia.setAttribute('media', mediaQuery);
+      document.head.appendChild(metaThemeColorMedia);
+    }
+    metaThemeColorMedia.setAttribute('content', chromeColor);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    cssGenerator.apply(currentTheme);
+    updateBrowserChrome(currentTheme);
+
+    const root = document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(currentTheme.metadata.variant);
+  }, [cssGenerator, currentTheme, updateBrowserChrome]);
+
+  useEffect(() => {
+    if (preferences.themeMode !== 'system' || typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setSystemPrefersDark(event.matches);
+    };
+
+    setSystemPrefersDark(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [preferences.themeMode]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    localStorage.setItem('themeMode', preferences.themeMode);
+    localStorage.setItem('lightThemeId', preferences.lightThemeId);
+    localStorage.setItem('darkThemeId', preferences.darkThemeId);
+    localStorage.setItem('useSystemTheme', String(preferences.themeMode === 'system'));
+    localStorage.setItem('selectedThemeId', currentTheme.metadata.id);
+    localStorage.setItem(
+      'selectedThemeVariant',
+      currentTheme.metadata.variant === 'light' ? 'light' : 'dark',
+    );
+  }, [preferences, currentTheme]);
+
+  useEffect(() => {
+    void updateDesktopSettings({
+      themeId: currentTheme.metadata.id,
+      themeVariant: currentTheme.metadata.variant === 'light' ? 'light' : 'dark',
+      useSystemTheme: preferences.themeMode === 'system',
+      lightThemeId: preferences.lightThemeId,
+      darkThemeId: preferences.darkThemeId,
+    });
+  }, [currentTheme.metadata.id, currentTheme.metadata.variant, preferences.themeMode, preferences.lightThemeId, preferences.darkThemeId]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const handleSettingsSynced = (event: Event) => {
+      const detail = (event as CustomEvent<DesktopSettings>).detail;
+      if (!detail) {
+        return;
+      }
+
+      setPreferences((prev) => {
+        let nextMode = prev.themeMode;
+        if (detail.useSystemTheme === true) {
+          nextMode = 'system';
+        } else if (detail.useSystemTheme === false) {
+          if (detail.themeVariant === 'dark' || detail.themeVariant === 'light') {
+            nextMode = detail.themeVariant;
+          }
+        }
+
+        let nextLight = prev.lightThemeId;
+        if (typeof detail.lightThemeId === 'string' && detail.lightThemeId.length > 0) {
+          nextLight = validateThemeId(detail.lightThemeId, 'light');
+        }
+
+        let nextDark = prev.darkThemeId;
+        if (typeof detail.darkThemeId === 'string' && detail.darkThemeId.length > 0) {
+          nextDark = validateThemeId(detail.darkThemeId, 'dark');
+        }
+
+        const same =
+          nextMode === prev.themeMode &&
+          nextLight === prev.lightThemeId &&
+          nextDark === prev.darkThemeId;
+
+        if (same) {
+          return prev;
+        }
+
+        return {
+          themeMode: nextMode,
+          lightThemeId: nextLight,
+          darkThemeId: nextDark,
+        };
+      });
+    };
+
+    window.addEventListener('openchamber:settings-synced', handleSettingsSynced);
+    return () => window.removeEventListener('openchamber:settings-synced', handleSettingsSynced);
+  }, []);
+
+  const setTheme = useCallback(
+    (themeId: string) => {
+      const theme = availableThemes.find((candidate) => candidate.metadata.id === themeId);
+      if (!theme) {
+        return;
+      }
+
+      setPreferences((prev) => {
+        if (theme.metadata.variant === 'dark') {
+          if (prev.darkThemeId === theme.metadata.id && prev.themeMode === 'dark') {
+            return prev;
+          }
+          return {
+            ...prev,
+            darkThemeId: theme.metadata.id,
+            themeMode: 'dark',
+          };
+        }
+
+        if (prev.lightThemeId === theme.metadata.id && prev.themeMode === 'light') {
+          return prev;
+        }
+
+        return {
+          ...prev,
+          lightThemeId: theme.metadata.id,
+          themeMode: 'light',
+        };
+      });
+    },
+    [availableThemes],
+  );
+
+  const setThemeModeHandler = useCallback((mode: ThemeMode) => {
+    setPreferences((prev) => {
+      if (prev.themeMode === mode) {
+        return prev;
+      }
+      return {
+        ...prev,
+        themeMode: mode,
+      };
+    });
+  }, []);
+
+  const setSystemPreferenceHandler = useCallback(
+    (use: boolean) => {
+      if (use) {
+        setPreferences((prev) => {
+          if (prev.themeMode === 'system') {
+            return prev;
+          }
+          return {
+            ...prev,
+            themeMode: 'system',
+          };
+        });
+        return;
+      }
+
+      const fallbackMode: ThemeMode =
+        currentTheme.metadata.variant === 'dark' ? 'dark' : 'light';
+      setPreferences((prev) => {
+        if (prev.themeMode === fallbackMode) {
+          return prev;
+        }
+        return {
+          ...prev,
+          themeMode: fallbackMode,
+        };
+      });
+    },
+    [currentTheme.metadata.variant],
+  );
+
+  const setLightThemePreference = useCallback(
+    (themeId: string) => {
+      const theme = availableThemes.find(
+        (candidate) =>
+          candidate.metadata.id === themeId && candidate.metadata.variant === 'light',
+      );
+      if (!theme) {
+        return;
+      }
+
+      setPreferences((prev) => {
+        if (prev.lightThemeId === theme.metadata.id) {
+          return prev;
+        }
+        return {
+          ...prev,
+          lightThemeId: theme.metadata.id,
+        };
+      });
+    },
+    [availableThemes],
+  );
+
+  const setDarkThemePreference = useCallback(
+    (themeId: string) => {
+      const theme = availableThemes.find(
+        (candidate) =>
+          candidate.metadata.id === themeId && candidate.metadata.variant === 'dark',
+      );
+      if (!theme) {
+        return;
+      }
+
+      setPreferences((prev) => {
+        if (prev.darkThemeId === theme.metadata.id) {
+          return prev;
+        }
+        return {
+          ...prev,
+          darkThemeId: theme.metadata.id,
+        };
+      });
+    },
+    [availableThemes],
+  );
+
+  const value: ThemeContextValue = {
+    currentTheme,
+    availableThemes,
+    setTheme,
+    isSystemPreference: preferences.themeMode === 'system',
+    setSystemPreference: setSystemPreferenceHandler,
+    themeMode: preferences.themeMode,
+    setThemeMode: setThemeModeHandler,
+    lightThemeId: preferences.lightThemeId,
+    darkThemeId: preferences.darkThemeId,
+    setLightThemePreference,
+    setDarkThemePreference,
+  };
+
+  return (
+    <ThemeSystemContext.Provider value={value}>
+      {children}
+    </ThemeSystemContext.Provider>
+  );
+}

packages/ui/src/contexts/runtimeAPIContext.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { RuntimeAPIs } from '@/lib/api/types';
+
+export const RuntimeAPIContext = React.createContext<RuntimeAPIs | null>(null);

packages/ui/src/contexts/runtimeAPIRegistry.ts

@@ -0,0 +1,9 @@
+import type { RuntimeAPIs } from '@/lib/api/types';
+
+let registeredRuntimeAPIs: RuntimeAPIs | null = null;
+
+export const registerRuntimeAPIs = (apis: RuntimeAPIs | null): void => {
+  registeredRuntimeAPIs = apis;
+};
+
+export const getRegisteredRuntimeAPIs = (): RuntimeAPIs | null => registeredRuntimeAPIs;

packages/ui/src/contexts/theme-system-context.ts

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+
+import type { Theme, ThemeMode } from '@/types/theme';
+
+export interface ThemeContextValue {
+  currentTheme: Theme;
+  availableThemes: Theme[];
+  setTheme: (themeId: string) => void;
+  isSystemPreference: boolean;
+  setSystemPreference: (use: boolean) => void;
+  themeMode: ThemeMode;
+  setThemeMode: (mode: ThemeMode) => void;
+  lightThemeId: string;
+  darkThemeId: string;
+  setLightThemePreference: (themeId: string) => void;
+  setDarkThemePreference: (themeId: string) => void;
+}
+
+export const ThemeSystemContext = createContext<ThemeContextValue | undefined>(undefined);

packages/ui/src/contexts/useThemeSystem.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { ThemeSystemContext } from './theme-system-context';
+
+export function useThemeSystem() {
+  const context = useContext(ThemeSystemContext);
+  if (!context) {
+    throw new Error('useThemeSystem must be used within a ThemeSystemProvider');
+  }
+  return context;
+}
+
+export function useOptionalThemeSystem() {
+  return useContext(ThemeSystemContext);
+}