firebase-os 1.1.4 → 1.1.6

package/src/index.ts

@@ -0,0 +1,22 @@
+// ── Firebase OS — Library Entry Point ─────────────────────────────────────
+// This file is the ONLY public API surface of the library.
+// Everything else (pages, templates, components) is internal.
+
+// The main component — this IS the library
+export { FirebaseOS } from './FirebaseOS';
+export type { FirebaseOSProps } from './FirebaseOS';
+
+// Optional hooks for advanced users who want to build around it
+export { useAuth } from './lib/AuthContext';
+export { useTheme } from './lib/ThemeContext';
+
+// Config context for library consumers who need deep integration
+export { useConfig } from './lib/ConfigContext';
+export type { FirebaseOSConfig } from './lib/ConfigContext';
+
+// ── Hybrid Architecture Exports ───────────────────────────────────────────
+// These are exported so consumers can copy and modify templates/pages
+// while still relying on the internal UI components and Firebase connections.
+export { db, auth, storage } from './lib/firebase';
+export { ContactPopup } from './components/ContactPopup';
+export { defaultHomeConfig } from './configs/pages/home.config';

package/src/lib/AuthContext.test.tsx

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import { AuthProvider, useAuth } from '../lib/AuthContext';
+import { onAuthStateChanged } from 'firebase/auth';
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn(),
+  signInWithEmailAndPassword: vi.fn(),
+  GoogleAuthProvider: vi.fn(),
+  signInWithPopup: vi.fn(),
+  signOut: vi.fn(),
+}));
+
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  query: vi.fn(),
+  where: vi.fn(),
+  getDocs: vi.fn(() => Promise.resolve({ empty: true, docs: [] })),
+  doc: vi.fn(),
+  writeBatch: vi.fn(() => ({
+    set: vi.fn(),
+    commit: vi.fn(() => Promise.resolve())
+  })),
+  serverTimestamp: vi.fn(),
+  setDoc: vi.fn(),
+  onSnapshot: vi.fn((...args: any[]) => {
+    const cb = args.find(arg => typeof arg === "function");
+    if (typeof cb === 'function') cb({ exists: () => true, data: () => ({ role: 'super_admin' }) });
+    else if (args.length > 2 && typeof args[2] === 'function') args[1]({ exists: () => true, data: () => ({ role: 'super_admin' }) });
+    else if (args.length > 1 && typeof args[1] === 'function') args[1]({ exists: () => true, data: () => ({ role: 'super_admin' }) });
+    return () => {};
+  }),
+}));
+
+const TestComponent = () => {
+  const { user, loading } = useAuth();
+  if (loading) return <div>Loading...</div>;
+  if (!user) return <div>Not logged in</div>;
+  return <div>Logged in as {user.email}</div>;
+};
+
+describe('AuthContext integration with Firebase', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('initially displays loading state', () => {
+    (onAuthStateChanged as any).mockImplementation(() => () => {});
+    render(
+      <AuthProvider>
+        <TestComponent />
+      </AuthProvider>
+    );
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('updates state when onAuthStateChanged triggers', async () => {
+    let callback: any;
+    (onAuthStateChanged as any).mockImplementation((_auth: any, cb: any) => {
+      callback = cb;
+      return () => {};
+    });
+
+    render(
+      <AuthProvider>
+        <TestComponent />
+      </AuthProvider>
+    );
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+    // Trigger auth state change
+    await act(async () => {
+      await callback({ 
+        email: 'test@company.com', 
+        emailVerified: true, 
+        uid: '123',
+        getIdToken: vi.fn(() => Promise.resolve('mock-token'))
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Logged in as test@company.com')).toBeInTheDocument();
+    });
+  });
+});

package/src/lib/AuthContext.tsx

@@ -0,0 +1,191 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { auth, db } from './firebase';
+import { onAuthStateChanged, signOut as firebaseSignOut, updateProfile, sendEmailVerification } from 'firebase/auth';
+import type { User } from 'firebase/auth';
+import { doc, setDoc, onSnapshot, updateDoc } from 'firebase/firestore';
+import { useConfig } from './ConfigContext';
+interface AuthContextType {
+  user: User | null;
+  userRole: string | null;
+  loading: boolean;
+  signOut: () => Promise<void>;
+  registerUser: (email: string, password: string, firstName: string, lastName: string) => Promise<void>;
+  userInactive: boolean;
+  roleResolved: boolean;
+  refreshUser: () => Promise<void>;
+  activeOrg?: any;
+  activeWorkspace?: any;
+  checkOrg?: any;
+  workspaceAccess?: any;
+  userWorkspaces?: any;
+  switchWorkspace?: any;
+  createWorkspace?: any;
+  createOrg?: any;
+}
+
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  userRole: null,
+  loading: true,
+  signOut: async () => {},
+  registerUser: async () => {},
+  refreshUser: async () => {},
+  userInactive: false,
+  roleResolved: false,
+  activeOrg: null,
+  activeWorkspace: null,
+  checkOrg: async () => {},
+  workspaceAccess: {},
+  userWorkspaces: [],
+  switchWorkspace: async () => {},
+  createWorkspace: async () => {},
+  createOrg: async () => {},
+});
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const osConfig = useConfig();
+  const [user, setUser] = useState<User | null>(null);
+  const [userRole, setUserRole] = useState<string | null>(null);
+  const [userInactive, setUserInactive] = useState<boolean>(false);
+  const [loading, setLoading] = useState(true);
+  const [roleResolved, setRoleResolved] = useState(false);
+
+  const initialRoleRef = React.useRef<string | null>(null);
+  const currentUidRef = React.useRef<string | null>(null);
+
+  useEffect(() => {
+    let profileUnsub: (() => void) | undefined;
+
+    if (!auth) {
+      setLoading(false);
+      setRoleResolved(true);
+      return;
+    }
+
+    const unsub = onAuthStateChanged(auth, async (u) => {
+      // If the user hasn't changed, don't re-run the entire resolution logic
+      if (u?.uid === currentUidRef.current && roleResolved) {
+        setUser(u); // Update user object just in case (token etc)
+        return;
+      }
+      
+      currentUidRef.current = u?.uid || null;
+
+      if (u) {
+        console.log("[AuthContext] 1. onAuthStateChanged fired for user:", u.uid);
+        setUser(u);
+        
+        try {
+          const userRef = doc(db, 'user_profiles', u.uid);
+          await setDoc(userRef, {
+            uid: u.uid,
+            email: u.email,
+            displayName: u.displayName || '',
+            lastLoginAt: new Date().toISOString()
+          }, { merge: true });
+          
+          console.log("[AuthContext] 2. Successfully synced user data into user_profiles.");
+
+          if (profileUnsub) profileUnsub();
+          profileUnsub = onSnapshot(userRef, (snap) => {
+             if (snap.exists()) {
+                const data = snap.data();
+                let currentRole = data.role || 'user';
+                
+                // Auto-assignment of admin role if email is in the admin list
+                // Library mode: use props. Standalone mode: use env var.
+                let adminEmailsRaw = '';
+                try { const env = import.meta.env; adminEmailsRaw = (env as any)?.['VITE_ADMIN_EMAILS'] || ''; } catch {}
+                const adminEmailsList = osConfig.adminEmails || (adminEmailsRaw ? adminEmailsRaw.split(',').map((e: string) => e.trim().toLowerCase()).filter(Boolean) : []);
+                if (adminEmailsList.length > 0 && !data.role) {
+                    const adminEmails = adminEmailsList.map((e: string) => e.toLowerCase());
+                    const isConfiguredAdmin = adminEmails.some((adminEmail: string) => u.email?.toLowerCase() === adminEmail);
+
+                    if (isConfiguredAdmin) {
+                        console.log(`[AuthContext] Auto-assigning admin role to ${u.email}...`);
+                        currentRole = 'admin'; // Sync update locally to prevent redirect flicker
+                        updateDoc(userRef, { role: 'admin' }).catch(err => {
+                          console.error("[AuthContext] Error auto-setting admin role:", err);
+                        });
+                    }
+                }
+
+                if (initialRoleRef.current === null) {
+                  initialRoleRef.current = currentRole;
+                }
+
+                setUserRole(currentRole);
+                setUserInactive(data.inactive === true);
+             }
+             setRoleResolved(true);
+             setLoading(false);
+          });
+
+        } catch (error) {
+          console.error("[AuthContext] ERROR in auth resolution:", error);
+          setRoleResolved(true);
+          setLoading(false);
+        }
+      } else {
+        console.log("[AuthContext] No user currently signed in.");
+        setUser(null);
+        setUserRole(null);
+        setUserInactive(false);
+        setRoleResolved(true);
+        setLoading(false);
+        initialRoleRef.current = null;
+        if (profileUnsub) profileUnsub();
+      }
+    });
+    return () => {
+       unsub();
+       if (profileUnsub) profileUnsub();
+    };
+  }, []);
+
+  const registerUser = async (email: string, password: string, firstName: string, lastName: string) => {
+    const { createUserWithEmailAndPassword } = await import('firebase/auth');
+    const { user: newUser } = await createUserWithEmailAndPassword(auth, email, password);
+    const fullName = `${firstName} ${lastName}`.trim();
+    await updateProfile(newUser, { displayName: fullName });
+    
+    // Explicitly seed the user profile upon registration
+    try {
+      // Force sync the Auth token with Firestore to prevent 'Insufficient Permissions' race condition
+      await newUser.getIdToken(true);
+      
+      const userRef = doc(db, 'user_profiles', newUser.uid);
+      await setDoc(userRef, {
+        uid: newUser.uid,
+        email: newUser.email,
+        displayName: fullName,
+        createdAt: new Date().toISOString()
+      }, { merge: true });
+    } catch (e) {
+      console.warn("Could not write public profile on registration.", e);
+    }
+
+    await sendEmailVerification(newUser);
+  };
+
+  const signOut = async () => {
+    await firebaseSignOut(auth);
+    setUser(null);
+  };
+
+  const refreshUser = async () => {
+    if (auth.currentUser) {
+      await auth.currentUser.reload();
+      setUser(Object.assign(Object.create(Object.getPrototypeOf(auth.currentUser)), auth.currentUser));
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, userRole, loading, signOut, registerUser, refreshUser, userInactive, roleResolved }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useAuth = () => useContext(AuthContext);

package/src/lib/ConfigContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext } from 'react';
+
+// ── Library configuration context ──────────────────────────────────────────
+// This allows <FirebaseOS /> to pass props (firebaseConfig, adminEmails, etc.)
+// down to internal components without modifying their signatures.
+// When running as a standalone app (npm run dev), this context is empty
+// and components fall back to import.meta.env as before.
+
+export interface FirebaseOSConfig {
+  firebaseConfig?: {
+    apiKey: string;
+    authDomain: string;
+    projectId: string;
+    storageBucket: string;
+    messagingSenderId: string;
+    appId: string;
+  };
+  adminEmails?: string[];
+  basename?: string;
+  onAuthChange?: (user: any) => void;
+  themeConfig?: any;
+  components?: {
+    Home?: React.ComponentType<any>;
+    TemplateBoard?: React.ComponentType<any>;
+    TemplateTable?: React.ComponentType<any>;
+    TemplateCalendar?: React.ComponentType<any>;
+    TemplatePopupForm?: React.ComponentType<any>;
+    TemplateInlineForm?: React.ComponentType<any>;
+    TemplatePages?: React.ComponentType<any>;
+    TemplateStorage?: React.ComponentType<any>;
+    TemplateNone?: React.ComponentType<any>;
+  };
+}
+
+const ConfigContext = createContext<FirebaseOSConfig>({});
+
+export function ConfigProvider({ config, children }: { config: FirebaseOSConfig; children: React.ReactNode }) {
+  return (
+    <ConfigContext.Provider value={config}>
+      {children}
+    </ConfigContext.Provider>
+  );
+}
+
+export const useConfig = () => useContext(ConfigContext);

package/src/lib/ThemeContext.tsx

@@ -0,0 +1,233 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { themeConfig } from '../configs/theme.config';
+import { doc, onSnapshot } from 'firebase/firestore';
+import { db } from './firebase';
+
+function deepMerge(target: any, source: any): any {
+  if (typeof source !== 'object' || source === null) return source;
+  const merged = { ...target };
+  for (const key of Object.keys(source)) {
+    if (source[key] instanceof Object && key in target && target[key] instanceof Object && !Array.isArray(source[key])) {
+      merged[key] = deepMerge(target[key], source[key]);
+    } else {
+      merged[key] = source[key];
+    }
+  }
+  return merged;
+}
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+  isSystem: boolean;
+  setIsSystem: (is: boolean) => void;
+  config: typeof themeConfig;
+  activeConfig: any;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children, scopeSelector }: { children: React.ReactNode, scopeSelector?: string }) {
+  const [themeMode, setThemeMode] = useState<'light' | 'dark' | 'system'>(() => {
+    const saved = localStorage.getItem('theme-mode') as 'light' | 'dark' | 'system' | null;
+    return saved || themeConfig.defaultTheme;
+  });
+
+  const [currentTheme, setCurrentTheme] = useState<Theme>('dark');
+  const [activeConfig, setActiveConfig] = useState(() => {
+    try {
+      const cached = localStorage.getItem('theme_config_cache');
+      if (cached) return JSON.parse(cached);
+    } catch (e) {}
+    return themeConfig;
+  });
+  const [isReady, setIsReady] = useState(() => !!localStorage.getItem('theme_config_cache'));
+
+  useEffect(() => {
+    if (!db) {
+       setActiveConfig(themeConfig);
+       setIsReady(true);
+       return;
+    }
+    const unsub = onSnapshot(doc(db, 'sys_configs', 'theme'), (snap) => {
+      if (snap.exists()) {
+         const data = snap.data();
+         delete data.fontStyles;
+         delete data.fontCustomization;
+         const merged = deepMerge(themeConfig, data);
+         setActiveConfig(merged);
+         localStorage.setItem('theme_config_cache', JSON.stringify(merged));
+
+         const lastSeenDefaultTheme = localStorage.getItem('last-seen-default-theme');
+         if (merged.defaultTheme && merged.defaultTheme !== lastSeenDefaultTheme) {
+             localStorage.setItem('last-seen-default-theme', merged.defaultTheme);
+             setThemeMode(merged.defaultTheme);
+         }
+      } else {
+         setActiveConfig(themeConfig);
+         localStorage.setItem('theme_config_cache', JSON.stringify(themeConfig));
+      }
+      setIsReady(true);
+    });
+    return () => unsub();
+  }, []);
+
+  useEffect(() => {
+    const handleSystemTheme = (e: MediaQueryListEvent | MediaQueryList) => {
+      if (themeMode === 'system') {
+        setCurrentTheme(e.matches ? 'light' : 'dark');
+      }
+    };
+
+    const query = window.matchMedia('(prefers-color-scheme: light)');
+    
+    if (themeMode === 'system') {
+      setCurrentTheme(query.matches ? 'light' : 'dark');
+      query.addEventListener('change', handleSystemTheme);
+    } else {
+      setCurrentTheme(themeMode);
+    }
+
+    return () => query.removeEventListener('change', handleSystemTheme);
+  }, [themeMode]);
+
+  useEffect(() => {
+    // In library mode, scope to the .firebase-os container (via scopeSelector).
+    // In standalone dev mode, fall back to documentElement.
+    const root = (scopeSelector ? document.querySelector(scopeSelector) : document.documentElement) as HTMLElement || document.documentElement;
+    const colors = currentTheme === 'dark' ? activeConfig.colors.dark : activeConfig.colors.light;
+    
+    // Core Colors
+    root.style.setProperty('--bg-color', colors.background);
+    root.style.setProperty('--bg-secondary-color', colors.backgroundSecondary || colors.background);
+    root.style.setProperty('--fg-color', colors.foreground);
+    root.style.setProperty('--accent-color', colors.accent);
+    
+    // Panels & Glass
+    root.style.setProperty('--panel-bg', colors.panelBg);
+    root.style.setProperty('--panel-border', colors.panelBorder);
+    
+    // Gradients
+    const buildGradient = (arr: string[] | undefined, fallback?: string) => {
+      if (!arr || arr.length === 0) return fallback || 'transparent';
+      if (arr.length === 1) return arr[0];
+      const stops = arr.map((c, i) => `${c} ${Math.round((i / (arr.length - 1)) * 100)}%`).join(', ');
+      return `linear-gradient(135deg, ${stops})`;
+    };
+
+    const defaultBtnGrad = currentTheme === 'dark' 
+      ? 'linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%)'
+      : 'linear-gradient(135deg, #5b21b6 0%, #a78bfa 100%)';
+
+    root.style.setProperty('--button-bg', buildGradient(colors.buttonGradient, defaultBtnGrad));
+    root.style.setProperty('--button-fg', colors.buttonText || '#ffffff');
+    root.style.setProperty('--button-hover-bg', buildGradient(colors.buttonHoverGradient || colors.buttonGradient, defaultBtnGrad));
+    root.style.setProperty('--text-gradient', buildGradient(colors.textGradient, `linear-gradient(135deg, ${colors.foreground} 0%, ${colors.accent} 100%)`));
+    root.style.setProperty('--glow-color', colors.glowColor || 'rgba(124, 58, 237, 0.3)');
+    root.style.setProperty('--notification-icon-color', colors.notificationIconColor || colors.accent);
+    
+    // Secondary Buttons
+    const secBg = colors.secondaryButton?.bg || (currentTheme === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.03)');
+    const secBorder = colors.secondaryButton?.border || (currentTheme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.06)');
+    const secText = colors.secondaryButton?.text || colors.foreground;
+    
+    root.style.setProperty('--btn-sec-bg', secBg);
+    root.style.setProperty('--btn-sec-border', secBorder);
+    root.style.setProperty('--btn-sec-text', secText);
+
+    // Text Selection
+    root.style.setProperty('--selection-bg', colors.selectionBg || 'color-mix(in srgb, var(--accent-color) 40%, transparent)');
+    root.style.setProperty('--selection-text', colors.selectionText || '#ffffff');
+
+    root.setAttribute('data-theme', currentTheme);
+    localStorage.setItem('theme-mode', themeMode);
+
+    // Dynamic Corner Radii
+    if (activeConfig.cornerRounding === 'custom' && activeConfig.cornerRadii) {
+      root.style.setProperty('--btn-radius', `${parseFloat(String(activeConfig.cornerRadii.buttonRadius)) || 0}rem`);
+      root.style.setProperty('--card-radius', `${parseFloat(String(activeConfig.cornerRadii.cardRadius)) || 0}rem`);
+      root.style.setProperty('--input-radius', `${parseFloat(String(activeConfig.cornerRadii.inputRadius)) || 0}rem`);
+      root.style.setProperty('--modal-radius', `${parseFloat(String(activeConfig.cornerRadii.modalRadius)) || 0}rem`);
+    } else {
+      root.style.setProperty('--btn-radius', `0.75rem`);
+      root.style.setProperty('--card-radius', `1.5rem`);
+      root.style.setProperty('--input-radius', `0.75rem`);
+      root.style.setProperty('--modal-radius', `1.5rem`);
+    }
+
+    // Dynamic Font Customization
+    const applyFonts = (familyName: string) => {
+      const gFonts: Record<string, string> = {
+         'Inter': '"Inter", sans-serif',
+         'Outfit': '"Outfit", sans-serif',
+         'Roboto': '"Roboto", sans-serif',
+         'Space Grotesk': '"Space Grotesk", sans-serif',
+         'Plus Jakarta Sans': '"Plus Jakarta Sans", sans-serif',
+         'System UI': 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+      };
+
+      root.style.setProperty('--font-family', gFonts[familyName] || gFonts['Inter']);
+
+      let fontLink = document.getElementById('dynamic-google-font') as HTMLLinkElement;
+      if (familyName !== 'System UI') {
+         if (!fontLink) {
+            fontLink = document.createElement('link');
+            fontLink.id = 'dynamic-google-font';
+            fontLink.rel = 'stylesheet';
+            document.head.appendChild(fontLink);
+         }
+         fontLink.href = `https://fonts.googleapis.com/css2?family=${familyName.replace(/ /g, '+')}:wght@400;500;600;700;800;900&display=swap`;
+      } else if (fontLink) {
+         fontLink.remove();
+      }
+
+      root.style.fontSize = `16px`;
+      root.style.setProperty('--weight-h1', '800');
+      root.style.setProperty('--weight-h2', '700');
+      root.style.setProperty('--weight-h3', '700');
+      root.style.setProperty('--leading-normal', '1.5');
+    };
+
+    applyFonts(activeConfig.fontFamily || 'Inter');
+
+    // Favicon Link Update
+    let favicon = document.querySelector("link[rel*='icon']") as HTMLLinkElement;
+    if (!favicon) {
+      favicon = document.createElement('link');
+      favicon.rel = 'icon';
+      document.head.appendChild(favicon);
+    }
+    if (activeConfig.faviconUrl) {
+      favicon.href = activeConfig.faviconUrl;
+    }
+  }, [currentTheme, themeMode, activeConfig]);
+
+  const toggleTheme = () => {
+    setThemeMode(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  const setTheme = (t: Theme) => setThemeMode(t);
+
+  return (
+    <ThemeContext.Provider value={{ 
+      theme: currentTheme, 
+      setTheme, 
+      toggleTheme, 
+      isSystem: themeMode === 'system',
+      setIsSystem: (is: boolean) => setThemeMode(is ? 'system' : currentTheme),
+      config: activeConfig,
+      activeConfig
+    }}>
+      {isReady ? children : null}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) throw new Error('useTheme must be used within ThemeProvider');
+  return context;
+};

package/src/lib/firebase.ts

@@ -0,0 +1,91 @@
+import { initializeApp, getApp, getApps } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+import { getStorage } from "firebase/storage";
+
+let app: any = null;
+let auth: any = null;
+let db: any = null;
+let storage: any = null;
+
+// ── Public API for library mode ──────────────────────────────────────────
+// Called by <FirebaseOS firebaseConfig={...} /> to initialize Firebase
+// from props instead of environment variables.
+export function initializeFirebase(config: Record<string, string>) {
+  if (getApps().length) {
+    app = getApp();
+  } else {
+    app = initializeApp(config);
+  }
+  auth = getAuth(app);
+  db = getFirestore(app);
+  storage = getStorage(app);
+}
+
+// ── Read env safely ──────────────────────────────────────────────────────
+// Use a dynamic key lookup so Vite does NOT bake env values at build time.
+// This is critical for library mode — we must NOT leak the developer's keys
+// into the published bundle.
+function readEnv(key: string): string {
+  try {
+    const env = import.meta.env;
+    return (env as any)?.[key] || '';
+  } catch {
+    return '';
+  }
+}
+
+// ── Standalone mode (npm run dev) ────────────────────────────────────────
+// Auto-init from VITE_ env variables if available.
+// This keeps the original app working exactly as before.
+const envKeys = [
+  'VITE_FIREBASE_API_KEY',
+  'VITE_FIREBASE_AUTH_DOMAIN',
+  'VITE_FIREBASE_PROJECT_ID',
+  'VITE_FIREBASE_STORAGE_BUCKET',
+  'VITE_FIREBASE_MESSAGING_SENDER_ID',
+  'VITE_FIREBASE_APP_ID',
+] as const;
+
+const keyMap: Record<string, string> = {
+  VITE_FIREBASE_API_KEY: 'apiKey',
+  VITE_FIREBASE_AUTH_DOMAIN: 'authDomain',
+  VITE_FIREBASE_PROJECT_ID: 'projectId',
+  VITE_FIREBASE_STORAGE_BUCKET: 'storageBucket',
+  VITE_FIREBASE_MESSAGING_SENDER_ID: 'messagingSenderId',
+  VITE_FIREBASE_APP_ID: 'appId',
+};
+
+function getConfigFromEnv(): Record<string, string> | null {
+  const config: Record<string, string> = {};
+  for (const envKey of envKeys) {
+    const val = readEnv(envKey);
+    if (!val) return null; // Missing key — not all set
+    config[keyMap[envKey]] = val;
+  }
+  return config;
+}
+
+function getConfigFromLocalStorage(): Record<string, string> | null {
+  try {
+    const saved = localStorage.getItem('firebase_config');
+    if (saved) {
+      const config = JSON.parse(saved);
+      if (config.apiKey) return config;
+    }
+  } catch (e) {}
+  return null;
+}
+
+// Try env first, then localStorage
+const envConfig = getConfigFromEnv();
+if (envConfig && !getApps().length) {
+  initializeFirebase(envConfig);
+} else {
+  const lsConfig = getConfigFromLocalStorage();
+  if (lsConfig && !getApps().length) {
+    initializeFirebase(lsConfig);
+  }
+}
+
+export { auth, db, storage };