@mrmeg/expo-ui 0.2.0 → 0.4.0

package/dist/constants/fonts.js

@@ -1,7 +1,13 @@
+import { Platform } from "react-native";
 // Web font stack fallback
 const WEB_FONT_STACK = "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
-const isReactNativeRuntime = typeof navigator !== "undefined" && navigator.product === "ReactNative";
-const isWebRuntime = typeof document !== "undefined" && !isReactNativeRuntime;
+// IMPORTANT: do NOT key these on `typeof document` / `typeof navigator`.
+// On a web bundle, Node SSR sees `undefined` for both and the client sees them,
+// producing different snapshot values at module load -> hydration mismatch on
+// every <StyledText>. `Platform.OS` (from react-native-web) returns "web" in
+// both environments, so the value is stable.
+const isWebRuntime = Platform.OS === "web";
+const isReactNativeRuntime = Platform.OS !== "web";
 const serifFamilies = isWebRuntime
     ? { regular: "Georgia, 'Times New Roman', serif", bold: "Georgia, 'Times New Roman', serif" }
     : { regular: "Georgia", bold: "Georgia" };

package/dist/state/themeStore.d.ts

@@ -11,3 +11,4 @@ export declare function resolveThemePreference(userTheme: ThemePreference, syste
 export declare const useThemeStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ThemeStore>>;
 export declare function syncSystemTheme(): void;
 export declare function startSystemThemeListener(): () => void;
+export declare function syncThemeFromEnvironment(): () => void;

package/dist/state/themeStore.js

@@ -13,7 +13,9 @@ function getSystemTheme() {
 }
 export const useThemeStore = create((set) => ({
     userTheme: "system",
-    systemTheme: getSystemTheme(),
+    // Always start with "light" so SSR and the first client render agree.
+    // Real values are populated by `syncThemeFromEnvironment()` after mount.
+    systemTheme: "light",
     setTheme: (theme) => {
         set({
             userTheme: theme,
@@ -89,6 +91,18 @@ export function startSystemThemeListener() {
     };
     return stopSystemThemeListener;
 }
-// Load saved theme on store creation
-useThemeStore.getState().loadTheme();
-startSystemThemeListener();
+// Single entry point for host apps to populate the store from the
+// environment (persisted preference + OS color scheme listener). Safe to
+// call multiple times — `startSystemThemeListener` is idempotent — and
+// returns the unsubscribe so it can be used directly inside `useEffect`.
+export function syncThemeFromEnvironment() {
+    useThemeStore.getState().loadTheme();
+    return startSystemThemeListener();
+}
+// Native has no SSR mismatch concern, so keep the historical auto-init
+// behavior there. On web the host app must call `syncThemeFromEnvironment()`
+// from a top-level `useEffect` to avoid hydration mismatches.
+if (Platform.OS !== "web") {
+    useThemeStore.getState().loadTheme();
+    startSystemThemeListener();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [