feat(apollo-vertex): add resolvedTheme and disableTransitionOnChange to ThemeProvider

Upstream improvements from vertical-medical-mrs shell-theme-provider:
- resolvedTheme in context so consumers can read the actual light/dark value
- disableTransitionOnChange prop to prevent CSS transition flash on theme switch
- defaultTheme prop to allow overriding the default "system" fallback
- Memoized context value to prevent unnecessary re-renders

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

apps/apollo-vertex/registry/shell/shell-theme-provider.tsx

@@ -1,5 +1,12 @@
 import type { ReactNode } from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { THEME_STORAGE_KEY } from "./shell-constants";
 
 export type ThemeConfig = {
@@ -10,19 +17,21 @@ export type Theme = "light" | "dark" | "system";
 
 interface ThemeProviderProps {
   children: ReactNode;
+  defaultTheme?: Theme;
   themeConfig?: ThemeConfig;
   storageKey?: string;
+  disableTransitionOnChange?: boolean;
 }
 
 interface ThemeProviderState {
   theme: Theme;
+  resolvedTheme: "light" | "dark";
   setTheme: (theme: Theme) => void;
 }
 
-const ThemeProviderContext = createContext<ThemeProviderState>({
-  theme: "system",
-  setTheme: () => null,
-});
+const ThemeProviderContext = createContext<ThemeProviderState | undefined>(
+  undefined,
+);
 
 const cssVarMap: Record<string, string> = {
   background: "--background",
@@ -74,10 +83,26 @@ function getEffectiveTheme(theme: Theme): "light" | "dark" {
   return theme;
 }
 
-function applyThemeClass(theme: Theme) {
+function applyThemeClass(theme: Theme, disableTransitions?: boolean) {
   const root = window.document.documentElement;
+  const resolved = getEffectiveTheme(theme);
+
+  let styleEl: HTMLStyleElement | null = null;
+  if (disableTransitions) {
+    styleEl = document.createElement("style");
+    styleEl.textContent =
+      "*, *::before, *::after { transition: none !important }";
+    document.head.append(styleEl);
+  }
+
   root.classList.remove("light", "dark");
-  root.classList.add(getEffectiveTheme(theme));
+  root.classList.add(resolved);
+
+  if (styleEl) {
+    // Force reflow, then re-enable transitions
+    void root.offsetHeight;
+    styleEl.remove();
+  }
 }
 
 function applyThemeConfig(config: ThemeConfig, theme: Theme) {
@@ -108,35 +133,48 @@ function clearThemeConfig() {
 
 export function ThemeProvider({
   children,
+  defaultTheme = "system",
   themeConfig,
   storageKey = THEME_STORAGE_KEY,
+  disableTransitionOnChange,
 }: ThemeProviderProps) {
   const [theme, setThemeState] = useState<Theme>(() => {
-    if (typeof window === "undefined") return "system";
+    if (typeof window === "undefined") return defaultTheme;
     const stored = localStorage.getItem(storageKey);
-    return isValidTheme(stored) ? stored : "system";
+    return isValidTheme(stored) ? stored : defaultTheme;
   });
 
-  const setTheme = (newTheme: Theme) => {
-    localStorage.setItem(storageKey, newTheme);
-    setThemeState(newTheme);
-  };
+  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">(() =>
+    typeof window === "undefined" ? "light" : getEffectiveTheme(theme),
+  );
+
+  const setTheme = useCallback(
+    (newTheme: Theme) => {
+      localStorage.setItem(storageKey, newTheme);
+      setThemeState(newTheme);
+    },
+    [storageKey],
+  );
 
   // Apply light/dark class to document root
   useEffect(() => {
-    applyThemeClass(theme);
-  }, [theme]);
+    applyThemeClass(theme, disableTransitionOnChange);
+    setResolvedTheme(getEffectiveTheme(theme));
+  }, [theme, disableTransitionOnChange]);
 
   // Listen for system theme changes when in system mode
   useEffect(() => {
     if (theme !== "system") return;
 
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => applyThemeClass(theme);
+    const handleChange = () => {
+      applyThemeClass(theme, disableTransitionOnChange);
+      setResolvedTheme(getEffectiveTheme(theme));
+    };
 
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [theme]);
+  }, [theme, disableTransitionOnChange]);
 
   // Cross-tab sync: update React state when theme changes in another tab
   useEffect(() => {
@@ -158,8 +196,13 @@ export function ThemeProvider({
     return () => clearThemeConfig();
   }, [themeConfig, theme]);
 
+  const value = useMemo(
+    () => ({ theme, resolvedTheme, setTheme }),
+    [theme, resolvedTheme, setTheme],
+  );
+
   return (
-    <ThemeProviderContext.Provider value={{ theme, setTheme }}>
+    <ThemeProviderContext.Provider value={value}>
       {children}
     </ThemeProviderContext.Provider>
   );