@open-mercato/ui 0.6.8-develop.6912.1.36161dc9ac → 0.6.8-develop.6914.1.6c7a5dcb6b

package/dist/theme/ThemeProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, useContext } from "react";
 import { createLogger } from "@open-mercato/shared/lib/logger";
@@ -35,14 +35,12 @@ function applyTheme(resolvedTheme) {
 function ThemeProvider({ children }) {
   const [theme, setThemeState] = React.useState("system");
   const [resolvedTheme, setResolvedTheme] = React.useState("light");
-  const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
     const stored = getStoredTheme();
     setThemeState(stored);
     const resolved = stored === "system" ? getSystemTheme() : stored;
     setResolvedTheme(resolved);
     applyTheme(resolved);
-    setMounted(true);
   }, []);
   React.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -74,9 +72,6 @@ function ThemeProvider({ children }) {
     () => ({ theme, resolvedTheme, setTheme }),
     [theme, resolvedTheme, setTheme]
   );
-  if (!mounted) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {

package/dist/theme/ThemeProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/theme/ThemeProvider.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { createContext, useContext } from 'react'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\nimport { THEME_STORAGE_KEY } from './theme-init-script'\n\nconst logger = createLogger('ui').child({ component: 'ThemeProvider' })\n\nexport type Theme = 'light' | 'dark' | 'system'\n\ntype ThemeContextValue = {\n  theme: Theme\n  resolvedTheme: 'light' | 'dark'\n  setTheme: (theme: Theme) => void\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\nfunction getSystemTheme(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(): Theme {\n  if (typeof window === 'undefined') return 'system'\n  try {\n    const stored = localStorage.getItem(THEME_STORAGE_KEY)\n    if (stored === 'light' || stored === 'dark' || stored === 'system') {\n      return stored\n    }\n  } catch (error) {\n    // localStorage may be unavailable in private browsing, iframes, or restricted contexts\n    // Theme will default to system preference - this is expected graceful degradation\n    if (process.env.NODE_ENV === 'development') {\n      logger.warn('localStorage read failed', { err: error })\n    }\n  }\n  return 'system'\n}\n\nfunction applyTheme(resolvedTheme: 'light' | 'dark') {\n  const root = document.documentElement\n  if (resolvedTheme === 'dark') {\n    root.classList.add('dark')\n  } else {\n    root.classList.remove('dark')\n  }\n}\n\nexport function ThemeProvider({ children }: { children: React.ReactNode }) {\n  const [theme, setThemeState] = React.useState<Theme>('system')\n  const [resolvedTheme, setResolvedTheme] = React.useState<'light' | 'dark'>('light')\n  const [mounted, setMounted] = React.useState(false)\n\n  // Initialize theme from localStorage on mount\n  React.useEffect(() => {\n    const stored = getStoredTheme()\n    setThemeState(stored)\n    const resolved = stored === 'system' ? getSystemTheme() : stored\n    setResolvedTheme(resolved)\n    applyTheme(resolved)\n    setMounted(true)\n  }, [])\n\n  // Listen for system theme changes\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const handleChange = () => {\n      if (theme === 'system') {\n        const newResolved = getSystemTheme()\n        setResolvedTheme(newResolved)\n        applyTheme(newResolved)\n      }\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [theme])\n\n  const setTheme = React.useCallback((newTheme: Theme) => {\n    setThemeState(newTheme)\n    try {\n      localStorage.setItem(THEME_STORAGE_KEY, newTheme)\n    } catch (error) {\n      // localStorage may be unavailable - theme still works for this session, just won't persist\n      if (process.env.NODE_ENV === 'development') {\n        logger.warn('localStorage write failed', { err: error })\n      }\n    }\n    const resolved = newTheme === 'system' ? getSystemTheme() : newTheme\n    setResolvedTheme(resolved)\n    applyTheme(resolved)\n  }, [])\n\n  const value = React.useMemo(\n    () => ({ theme, resolvedTheme, setTheme }),\n    [theme, resolvedTheme, setTheme]\n  )\n\n  // Prevent flash of wrong theme during hydration\n  if (!mounted) {\n    return <>{children}</>\n  }\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext)\n  if (context === undefined) {\n    // Return safe defaults when not in provider (e.g., server render)\n    return {\n      theme: 'system',\n      resolvedTheme: 'light',\n      setTheme: () => {},\n    }\n  }\n  return context\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { createContext, useContext } from 'react'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\nimport { THEME_STORAGE_KEY } from './theme-init-script'\n\nconst logger = createLogger('ui').child({ component: 'ThemeProvider' })\n\nexport type Theme = 'light' | 'dark' | 'system'\n\ntype ThemeContextValue = {\n  theme: Theme\n  resolvedTheme: 'light' | 'dark'\n  setTheme: (theme: Theme) => void\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\nfunction getSystemTheme(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(): Theme {\n  if (typeof window === 'undefined') return 'system'\n  try {\n    const stored = localStorage.getItem(THEME_STORAGE_KEY)\n    if (stored === 'light' || stored === 'dark' || stored === 'system') {\n      return stored\n    }\n  } catch (error) {\n    // localStorage may be unavailable in private browsing, iframes, or restricted contexts\n    // Theme will default to system preference - this is expected graceful degradation\n    if (process.env.NODE_ENV === 'development') {\n      logger.warn('localStorage read failed', { err: error })\n    }\n  }\n  return 'system'\n}\n\nfunction applyTheme(resolvedTheme: 'light' | 'dark') {\n  const root = document.documentElement\n  if (resolvedTheme === 'dark') {\n    root.classList.add('dark')\n  } else {\n    root.classList.remove('dark')\n  }\n}\n\nexport function ThemeProvider({ children }: { children: React.ReactNode }) {\n  const [theme, setThemeState] = React.useState<Theme>('system')\n  const [resolvedTheme, setResolvedTheme] = React.useState<'light' | 'dark'>('light')\n\n  // Initialize theme from localStorage on mount\n  React.useEffect(() => {\n    const stored = getStoredTheme()\n    setThemeState(stored)\n    const resolved = stored === 'system' ? getSystemTheme() : stored\n    setResolvedTheme(resolved)\n    applyTheme(resolved)\n  }, [])\n\n  // Listen for system theme changes\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const handleChange = () => {\n      if (theme === 'system') {\n        const newResolved = getSystemTheme()\n        setResolvedTheme(newResolved)\n        applyTheme(newResolved)\n      }\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [theme])\n\n  const setTheme = React.useCallback((newTheme: Theme) => {\n    setThemeState(newTheme)\n    try {\n      localStorage.setItem(THEME_STORAGE_KEY, newTheme)\n    } catch (error) {\n      // localStorage may be unavailable - theme still works for this session, just won't persist\n      if (process.env.NODE_ENV === 'development') {\n        logger.warn('localStorage write failed', { err: error })\n      }\n    }\n    const resolved = newTheme === 'system' ? getSystemTheme() : newTheme\n    setResolvedTheme(resolved)\n    applyTheme(resolved)\n  }, [])\n\n  const value = React.useMemo(\n    () => ({ theme, resolvedTheme, setTheme }),\n    [theme, resolvedTheme, setTheme]\n  )\n\n  // The element type rendered here must not depend on `mounted`. Swapping a\n  // Fragment for the Provider once the first effect runs makes React unmount and\n  // remount everything below this point, discarding the whole page's component\n  // state. Flash of the wrong theme is prevented before first paint by\n  // THEME_INIT_SCRIPT in the root layout, not by this branch.\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext)\n  if (context === undefined) {\n    // Return safe defaults when not in provider (e.g., server render)\n    return {\n      theme: 'system',\n      resolvedTheme: 'light',\n      setTheme: () => {},\n    }\n  }\n  return context\n}\n"],
+  "mappings": ";AAyGS;AAvGT,YAAY,WAAW;AACvB,SAAS,eAAe,kBAAkB;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAElC,MAAM,SAAS,aAAa,IAAI,EAAE,MAAM,EAAE,WAAW,gBAAgB,CAAC;AAUtE,MAAM,eAAe,cAA6C,MAAS;AAE3E,SAAS,iBAAmC;AAC1C,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS;AAC9E;AAEA,SAAS,iBAAwB;AAC/B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,MAAI;AACF,UAAM,SAAS,aAAa,QAAQ,iBAAiB;AACrD,QAAI,WAAW,WAAW,WAAW,UAAU,WAAW,UAAU;AAClE,aAAO;AAAA,IACT;AAAA,EACF,SAAS,OAAO;AAGd,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,aAAO,KAAK,4BAA4B,EAAE,KAAK,MAAM,CAAC;AAAA,IACxD;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,WAAW,eAAiC;AACnD,QAAM,OAAO,SAAS;AACtB,MAAI,kBAAkB,QAAQ;AAC5B,SAAK,UAAU,IAAI,MAAM;AAAA,EAC3B,OAAO;AACL,SAAK,UAAU,OAAO,MAAM;AAAA,EAC9B;AACF;AAEO,SAAS,cAAc,EAAE,SAAS,GAAkC;AACzE,QAAM,CAAC,OAAO,aAAa,IAAI,MAAM,SAAgB,QAAQ;AAC7D,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAA2B,OAAO;AAGlF,QAAM,UAAU,MAAM;AACpB,UAAM,SAAS,eAAe;AAC9B,kBAAc,MAAM;AACpB,UAAM,WAAW,WAAW,WAAW,eAAe,IAAI;AAC1D,qBAAiB,QAAQ;AACzB,eAAW,QAAQ;AAAA,EACrB,GAAG,CAAC,CAAC;AAGL,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,WAAW,YAAa;AAEnC,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,eAAe,MAAM;AACzB,UAAI,UAAU,UAAU;AACtB,cAAM,cAAc,eAAe;AACnC,yBAAiB,WAAW;AAC5B,mBAAW,WAAW;AAAA,MACxB;AAAA,IACF;AAEA,eAAW,iBAAiB,UAAU,YAAY;AAClD,WAAO,MAAM,WAAW,oBAAoB,UAAU,YAAY;AAAA,EACpE,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,WAAW,MAAM,YAAY,CAAC,aAAoB;AACtD,kBAAc,QAAQ;AACtB,QAAI;AACF,mBAAa,QAAQ,mBAAmB,QAAQ;AAAA,IAClD,SAAS,OAAO;AAEd,UAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,eAAO,KAAK,6BAA6B,EAAE,KAAK,MAAM,CAAC;AAAA,MACzD;AAAA,IACF;AACA,UAAM,WAAW,aAAa,WAAW,eAAe,IAAI;AAC5D,qBAAiB,QAAQ;AACzB,eAAW,QAAQ;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO,EAAE,OAAO,eAAe,SAAS;AAAA,IACxC,CAAC,OAAO,eAAe,QAAQ;AAAA,EACjC;AAOA,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAe,UAAS;AACxD;AAEO,SAAS,WAA8B;AAC5C,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,YAAY,QAAW;AAEzB,WAAO;AAAA,MACL,OAAO;AAAA,MACP,eAAe;AAAA,MACf,UAAU,MAAM;AAAA,MAAC;AAAA,IACnB;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.8-develop.6912.1.36161dc9ac",
+  "version": "0.6.8-develop.6914.1.6c7a5dcb6b",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.8-develop.6912.1.36161dc9ac",
+    "@open-mercato/shared": "0.6.8-develop.6914.1.6c7a5dcb6b",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.6.8-develop.6912.1.36161dc9ac",
+    "@open-mercato/shared": "0.6.8-develop.6914.1.6c7a5dcb6b",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.1",

package/src/theme/ThemeProvider.tsx

@@ -51,7 +51,6 @@ function applyTheme(resolvedTheme: 'light' | 'dark') {
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [theme, setThemeState] = React.useState<Theme>('system')
   const [resolvedTheme, setResolvedTheme] = React.useState<'light' | 'dark'>('light')
-  const [mounted, setMounted] = React.useState(false)
 
   // Initialize theme from localStorage on mount
   React.useEffect(() => {
@@ -60,7 +59,6 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     const resolved = stored === 'system' ? getSystemTheme() : stored
     setResolvedTheme(resolved)
     applyTheme(resolved)
-    setMounted(true)
   }, [])
 
   // Listen for system theme changes
@@ -100,11 +98,11 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     [theme, resolvedTheme, setTheme]
   )
 
-  // Prevent flash of wrong theme during hydration
-  if (!mounted) {
-    return <>{children}</>
-  }
-
+  // The element type rendered here must not depend on `mounted`. Swapping a
+  // Fragment for the Provider once the first effect runs makes React unmount and
+  // remount everything below this point, discarding the whole page's component
+  // state. Flash of the wrong theme is prevented before first paint by
+  // THEME_INIT_SCRIPT in the root layout, not by this branch.
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }
 

package/src/theme/__tests__/ThemeProvider.test.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { act, render, screen } from '@testing-library/react'
+import { ThemeProvider, useTheme } from '../ThemeProvider'
+import { THEME_STORAGE_KEY } from '../theme-init-script'
+
+function mockSystemTheme(prefersDark: boolean) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: (query: string) => ({
+      matches: query.includes('prefers-color-scheme: dark') ? prefersDark : false,
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }),
+  })
+}
+
+let mountCount = 0
+
+function MountCounter() {
+  React.useEffect(() => {
+    mountCount += 1
+  }, [])
+  return <div data-testid="child" />
+}
+
+function ThemeReadout() {
+  const { theme, resolvedTheme, setTheme } = useTheme()
+  return (
+    <div>
+      <span data-testid="theme">{theme}</span>
+      <span data-testid="resolved">{resolvedTheme}</span>
+      <button type="button" onClick={() => setTheme('dark')}>
+        go dark
+      </button>
+    </div>
+  )
+}
+
+describe('ThemeProvider', () => {
+  beforeEach(() => {
+    mountCount = 0
+    document.documentElement.classList.remove('dark')
+    window.localStorage.clear()
+    mockSystemTheme(false)
+  })
+
+  it('does not remount its subtree when the theme initializes', () => {
+    render(
+      <ThemeProvider>
+        <MountCounter />
+      </ThemeProvider>,
+    )
+
+    expect(screen.getByTestId('child')).toBeTruthy()
+    // A `mounted` gate that swapped a Fragment for the context Provider used to
+    // tear this subtree down and rebuild it, losing every child's state.
+    expect(mountCount).toBe(1)
+  })
+
+  it('keeps children mounted across a theme change', () => {
+    window.localStorage.setItem(THEME_STORAGE_KEY, 'light')
+    render(
+      <ThemeProvider>
+        <MountCounter />
+        <ThemeReadout />
+      </ThemeProvider>,
+    )
+
+    act(() => {
+      screen.getByRole('button', { name: 'go dark' }).click()
+    })
+
+    expect(screen.getByTestId('theme').textContent).toBe('dark')
+    expect(mountCount).toBe(1)
+  })
+
+  it('exposes the stored theme to consumers after initialization', () => {
+    window.localStorage.setItem(THEME_STORAGE_KEY, 'dark')
+
+    render(
+      <ThemeProvider>
+        <ThemeReadout />
+      </ThemeProvider>,
+    )
+
+    expect(screen.getByTestId('theme').textContent).toBe('dark')
+    expect(screen.getByTestId('resolved').textContent).toBe('dark')
+    expect(document.documentElement.classList.contains('dark')).toBe(true)
+  })
+
+  it('resolves the system preference when nothing is stored', () => {
+    mockSystemTheme(true)
+
+    render(
+      <ThemeProvider>
+        <ThemeReadout />
+      </ThemeProvider>,
+    )
+
+    expect(screen.getByTestId('theme').textContent).toBe('system')
+    expect(screen.getByTestId('resolved').textContent).toBe('dark')
+  })
+})