firebase-os 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firebase-os",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "A complete Firebase-powered admin OS — one React component.",
   "type": "module",
   "main": "dist/firebase-os.cjs.js",

package/scripts/postinstall.js

@@ -60,14 +60,20 @@ for (const file of cssFiles) {
   }
 }
 
-// ── 2. Patch main.tsx — remove the import './index.css' line ────────────────
+// ── 2. Rewrite main.tsx — import library + theme CSS at the entry point ─────
 const mainPath = path.join(srcDir, 'main.tsx');
 if (fs.existsSync(mainPath)) {
   const mainContent = fs.readFileSync(mainPath, 'utf8');
-  // Only write if it still has the problematic Vite imports
-  if (mainContent.includes("import './index.css'") || mainContent.includes('import "./index.css"')) {
+  // Rewrite if it has the default Vite CSS import OR if it doesn't have our library CSS
+  if (mainContent.includes("import './index.css'") || mainContent.includes('import "./index.css"') || !mainContent.includes('firebase-os')) {
     const clean = `import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+
+// Firebase OS — compiled library styles (Tailwind utilities, components, layouts)
+import 'firebase-os/styles.css'
+// Firebase OS — local theme overrides (CSS variables, data-theme, custom styles)
+import './firebase-os/theme.css'
+
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
@@ -77,7 +83,7 @@ createRoot(document.getElementById('root')!).render(
 )
 `;
     fs.writeFileSync(mainPath, clean);
-    console.log('  ✓ Patched main.tsx (removed Vite CSS import)');
+    console.log('  ✓ Patched main.tsx with Firebase OS styles');
   }
 }
 
@@ -120,9 +126,9 @@ if (fs.existsSync(sourceHomePath)) {
 }
 
 // ── 4. Write App.tsx with Hybrid Overrides Wired Up ───────────────────────
+// Note: CSS imports are in main.tsx (entry point) for correct load ordering.
 const appPath = path.join(srcDir, 'App.tsx');
 const appContent = `import { FirebaseOS } from 'firebase-os';
-import './firebase-os/theme.css';
 
 // Local Hybrid Overrides
 import { Home } from './firebase-os/Home';
@@ -191,32 +197,46 @@ const viteConfigPath = path.join(consumerRoot, 'vite.config.ts');
 if (fs.existsSync(viteConfigPath)) {
   let viteConfig = fs.readFileSync(viteConfigPath, 'utf8');
   if (!viteConfig.includes('@tailwindcss/vite')) {
-    viteConfig = "import tailwindcss from '@tailwindcss/vite';\n" + viteConfig;
-    viteConfig = viteConfig.replace('plugins: [', 'plugins: [\n    tailwindcss(),');
+    // Build the patched file with real newlines (not escaped \n literals)
+    const importLine = "import tailwindcss from '@tailwindcss/vite';";
+    viteConfig = importLine + '\n' + viteConfig;
+    viteConfig = viteConfig.replace(
+      'plugins: [',
+      'plugins: [\n    tailwindcss(),'
+    );
     fs.writeFileSync(viteConfigPath, viteConfig);
     console.log('  ✓ Patched vite.config.ts to enable Tailwind CSS v4');
   }
 }
 
-// ── 6. Create .env file with placeholders ──────────────────────────────────
+// ── 6. Create .env file with empty placeholders ────────────────────────────
 const envPath = path.join(consumerRoot, '.env');
 if (!fs.existsSync(envPath)) {
   const envContent = `# 🔥 Firebase OS Configuration
-# Paste your Firebase Web App configuration here.
-# You can find these in your Firebase Console -> Project Settings -> General -> Your Apps
-
-VITE_FIREBASE_API_KEY=your_api_key_here
-VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
-VITE_FIREBASE_PROJECT_ID=your_project_id
-VITE_FIREBASE_STORAGE_BUCKET=your_project_id.firebasestorage.app
-VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
-VITE_FIREBASE_APP_ID=your_app_id
-
-# Comma-separated list of admin emails
-VITE_ADMIN_EMAILS=admin@example.com
+# Fill in each value below with your Firebase Web App credentials.
+# Find them in Firebase Console -> Project Settings -> General -> Your Apps
+# Leave values empty until you are ready — the app will show a Setup page.
+# After filling them in, restart the dev server (npm run dev).
+
+# Your Firebase API Key (e.g. AIzaSyD...)
+VITE_FIREBASE_API_KEY=
+# Your Firebase Auth Domain (e.g. myproject.firebaseapp.com)
+VITE_FIREBASE_AUTH_DOMAIN=
+# Your Firebase Project ID (e.g. myproject)
+VITE_FIREBASE_PROJECT_ID=
+# Your Firebase Storage Bucket (e.g. myproject.firebasestorage.app)
+VITE_FIREBASE_STORAGE_BUCKET=
+# Your Firebase Messaging Sender ID (e.g. 123456789012)
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+# Your Firebase App ID (e.g. 1:123456789012:web:abcdef123456)
+VITE_FIREBASE_APP_ID=
+
+# Comma-separated list of admin email addresses (these users get admin role on first registration)
+# Example: you@email.com,colleague@email.com
+VITE_ADMIN_EMAILS=
 `;
   fs.writeFileSync(envPath, envContent);
-  console.log('  ✓ Created .env template');
+  console.log('  ✓ Created .env template (fill in your Firebase credentials)');
 }
 
 console.log('\n[firebase-os] 🎉 Hybrid Setup complete! You now have full control over styling and configs.\n');

package/src/FirebaseOS.tsx

@@ -53,8 +53,14 @@ export interface FirebaseOSProps {
 export function FirebaseOS(props: FirebaseOSProps) {
   // If the consumer passed firebaseConfig as props, initialize Firebase
   // before any child component tries to use auth/db/storage.
-  if (props.firebaseConfig) {
-    initializeFirebase(props.firebaseConfig);
+  // Guard: only initialize when real credentials are present (not empty strings).
+  const fc = props.firebaseConfig;
+  const hasRealConfig = fc &&
+    fc.apiKey && fc.apiKey.trim() !== '' &&
+    fc.projectId && fc.projectId.trim() !== '';
+
+  if (hasRealConfig) {
+    initializeFirebase(fc);
   }
 
   const config: FirebaseOSConfig = {

package/src/pages/Setup.tsx

@@ -60,21 +60,22 @@ function getEnvVal(key: string): string {
 // Environment key status
 export function getEnvStatus() {
   const missing: string[] = [];
+  const empty: string[] = [];
   for (const { key, label } of REQUIRED_KEYS) {
     const v = getEnvVal(key);
-    if (!v || v.trim() === '') {
-      console.log('Missing key:', key, v);
+    if (!v) {
       missing.push(label);
-    } else {
-      console.log('Found key:', key, v);
+    } else if (v.trim() === '') {
+      empty.push(label);
     }
   }
   
   const adminEmails = getEnvVal('VITE_ADMIN_EMAILS');
   const missingAdminEmails = !adminEmails || adminEmails.trim() === '';
   
-  console.log('Setup complete?', missing.length === 0, missing);
-  return { allSet: missing.length === 0, missing, missingAdminEmails };
+  // Combine missing + empty for the overall check
+  const allMissing = [...missing, ...empty];
+  return { allSet: allMissing.length === 0, missing: allMissing, empty, missingAdminEmails };
 }
 
 export function isSetupComplete(): boolean {
@@ -171,7 +172,7 @@ export function Setup({ standalone }: SetupProps) {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
   });
 
-  const [verifyResult, setVerifyResult] = useState<{ missing: string[]; missingAdminEmails?: boolean } | null>(null);
+  const [verifyResult, setVerifyResult] = useState<{ missing: string[]; empty?: string[]; missingAdminEmails?: boolean } | null>(null);
   const [isVerifying, setIsVerifying] = useState(false);
 
   // Only manage the data-theme attribute and favicon when standalone (no ThemeContext)
@@ -199,7 +200,7 @@ export function Setup({ standalone }: SetupProps) {
     setVerifyResult(null);
     setTimeout(() => {
       const status = getEnvStatus();
-      setVerifyResult({ missing: status.missing, missingAdminEmails: status.missingAdminEmails });
+      setVerifyResult({ missing: status.missing, empty: status.empty, missingAdminEmails: status.missingAdminEmails });
       if (status.allSet) {
         setTimeout(() => { window.location.href = '/'; }, 1800);
       }
@@ -232,8 +233,8 @@ export function Setup({ standalone }: SetupProps) {
           className="glass-panel border border-[var(--panel-border)] rounded-3xl p-6 md:p-10 shadow-2xl relative overflow-hidden bg-background flex flex-col"
         >
           {/* Panel header with support buttons */}
-          <div className="flex flex-col gap-4 mb-8 pb-6 border-b border-[var(--panel-border)]/50 relative z-10">
-            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+          <div className="mb-8 pb-6 border-b border-[var(--panel-border)]/50 relative z-10">
+            <div className="flex items-start justify-between gap-4">
               <div>
                 <h2 className="text-xl font-extrabold text-foreground tracking-tight">Firebase Configuration</h2>
                 <p className="text-[14px] font-medium text-foreground/50 mt-2 leading-relaxed">
@@ -285,7 +286,12 @@ export function Setup({ standalone }: SetupProps) {
                   <div className="w-8 h-8 rounded-full bg-red-500/10 border border-red-500/20 flex items-center justify-center shrink-0">
                     <AlertCircle className="w-4 h-4 text-red-500" />
                   </div>
-                  <span className="font-bold text-foreground/70">Missing values — update <code className="text-accent text-[12px]">.env</code> and restart dev server</span>
+                  <span className="font-bold text-foreground/70">
+                    {verifyResult.empty && verifyResult.empty.length > 0
+                      ? <>These values are <span className="text-red-500">empty</span> — fill them in your <code className="text-accent text-[12px]">.env</code> file and restart the dev server</>
+                      : <>Missing values — update <code className="text-accent text-[12px]">.env</code> and restart dev server</>
+                    }
+                  </span>
                 </div>
                 <div className="flex flex-wrap gap-1.5 ml-10">
                   {verifyResult.missing.map(m => (