firebase-os 1.1.0 → 1.1.3

package/dist/firebase-os.es.js

@@ -97,41 +97,41 @@ function Ge(e, t) {
 	return n;
 }
 var Ke = c(void 0);
-function qe({ children: t }) {
-	let [n, r] = x(() => localStorage.getItem("theme-mode") || e.defaultTheme), [i, a] = x("dark"), [o, s] = x(() => {
+function qe({ children: t, scopeSelector: n }) {
+	let [r, i] = x(() => localStorage.getItem("theme-mode") || e.defaultTheme), [a, o] = x("dark"), [s, c] = x(() => {
 		try {
 			let e = localStorage.getItem("theme_config_cache");
 			if (e) return JSON.parse(e);
 		} catch {}
 		return e;
-	}), [c, l] = x(() => !!localStorage.getItem("theme_config_cache"));
+	}), [l, u] = x(() => !!localStorage.getItem("theme_config_cache"));
 	return m(() => {
 		if (!W) {
-			s(e), l(!0);
+			c(e), u(!0);
 			return;
 		}
 		let t = O(T(W, "sys_configs", "theme"), (t) => {
 			if (t.exists()) {
 				let n = t.data();
 				delete n.fontStyles, delete n.fontCustomization;
-				let i = Ge(e, n);
-				s(i), localStorage.setItem("theme_config_cache", JSON.stringify(i));
+				let r = Ge(e, n);
+				c(r), localStorage.setItem("theme_config_cache", JSON.stringify(r));
 				let a = localStorage.getItem("last-seen-default-theme");
-				i.defaultTheme && i.defaultTheme !== a && (localStorage.setItem("last-seen-default-theme", i.defaultTheme), r(i.defaultTheme));
-			} else s(e), localStorage.setItem("theme_config_cache", JSON.stringify(e));
-			l(!0);
+				r.defaultTheme && r.defaultTheme !== a && (localStorage.setItem("last-seen-default-theme", r.defaultTheme), i(r.defaultTheme));
+			} else c(e), localStorage.setItem("theme_config_cache", JSON.stringify(e));
+			u(!0);
 		});
 		return () => t();
 	}, []), m(() => {
 		let e = (e) => {
-			n === "system" && a(e.matches ? "light" : "dark");
+			r === "system" && o(e.matches ? "light" : "dark");
 		}, t = window.matchMedia("(prefers-color-scheme: light)");
-		return n === "system" ? (a(t.matches ? "light" : "dark"), t.addEventListener("change", e)) : a(n), () => t.removeEventListener("change", e);
-	}, [n]), m(() => {
-		let e = document.querySelector(".firebase-os") || document.documentElement, t = i === "dark" ? o.colors.dark : o.colors.light;
+		return r === "system" ? (o(t.matches ? "light" : "dark"), t.addEventListener("change", e)) : o(r), () => t.removeEventListener("change", e);
+	}, [r]), m(() => {
+		let e = (n ? document.querySelector(n) : document.documentElement) || document.documentElement, t = a === "dark" ? s.colors.dark : s.colors.light;
 		e.style.setProperty("--bg-color", t.background), t.backgroundSecondary && e.style.setProperty("--bg-secondary-color", t.backgroundSecondary), e.style.setProperty("--fg-color", t.foreground), e.style.setProperty("--accent-color", t.accent), e.style.setProperty("--panel-bg", t.panelBg), e.style.setProperty("--panel-border", t.panelBorder);
-		let r = (e) => !e || e.length === 0 ? "transparent" : e.length === 1 ? e[0] : `linear-gradient(135deg, ${e.map((t, n) => `${t} ${Math.round(n / (e.length - 1) * 100)}%`).join(", ")})`;
-		e.style.setProperty("--button-bg", r(t.buttonGradient)), e.style.setProperty("--button-fg", t.buttonText || "#ffffff"), e.style.setProperty("--button-hover-bg", r(t.buttonHoverGradient || t.buttonGradient)), e.style.setProperty("--text-gradient", r(t.textGradient)), e.style.setProperty("--glow-color", t.glowColor || "rgba(124, 58, 237, 0.3)"), e.style.setProperty("--notification-icon-color", t.notificationIconColor || t.accent), e.style.setProperty("--btn-sec-bg", t.secondaryButton?.bg || "rgba(255, 255, 255, 0.05)"), e.style.setProperty("--btn-sec-border", t.secondaryButton?.border || "transparent"), e.style.setProperty("--btn-sec-text", t.secondaryButton?.text || t.foreground), e.style.setProperty("--selection-bg", t.selectionBg || "color-mix(in srgb, var(--accent-color) 40%, transparent)"), e.style.setProperty("--selection-text", t.selectionText || "#ffffff"), e.setAttribute("data-theme", i), localStorage.setItem("theme-mode", n), o.cornerRounding === "custom" && o.cornerRadii ? (e.style.setProperty("--btn-radius", `${parseFloat(String(o.cornerRadii.buttonRadius)) || 0}rem`), e.style.setProperty("--card-radius", `${parseFloat(String(o.cornerRadii.cardRadius)) || 0}rem`), e.style.setProperty("--input-radius", `${parseFloat(String(o.cornerRadii.inputRadius)) || 0}rem`), e.style.setProperty("--modal-radius", `${parseFloat(String(o.cornerRadii.modalRadius)) || 0}rem`)) : (e.style.setProperty("--btn-radius", "0.75rem"), e.style.setProperty("--card-radius", "1.5rem"), e.style.setProperty("--input-radius", "0.75rem"), e.style.setProperty("--modal-radius", "1.5rem")), ((t) => {
+		let i = (e) => !e || e.length === 0 ? "transparent" : e.length === 1 ? e[0] : `linear-gradient(135deg, ${e.map((t, n) => `${t} ${Math.round(n / (e.length - 1) * 100)}%`).join(", ")})`;
+		e.style.setProperty("--button-bg", i(t.buttonGradient)), e.style.setProperty("--button-fg", t.buttonText || "#ffffff"), e.style.setProperty("--button-hover-bg", i(t.buttonHoverGradient || t.buttonGradient)), e.style.setProperty("--text-gradient", i(t.textGradient)), e.style.setProperty("--glow-color", t.glowColor || "rgba(124, 58, 237, 0.3)"), e.style.setProperty("--notification-icon-color", t.notificationIconColor || t.accent), e.style.setProperty("--btn-sec-bg", t.secondaryButton?.bg || "rgba(255, 255, 255, 0.05)"), e.style.setProperty("--btn-sec-border", t.secondaryButton?.border || "transparent"), e.style.setProperty("--btn-sec-text", t.secondaryButton?.text || t.foreground), e.style.setProperty("--selection-bg", t.selectionBg || "color-mix(in srgb, var(--accent-color) 40%, transparent)"), e.style.setProperty("--selection-text", t.selectionText || "#ffffff"), e.setAttribute("data-theme", a), localStorage.setItem("theme-mode", r), s.cornerRounding === "custom" && s.cornerRadii ? (e.style.setProperty("--btn-radius", `${parseFloat(String(s.cornerRadii.buttonRadius)) || 0}rem`), e.style.setProperty("--card-radius", `${parseFloat(String(s.cornerRadii.cardRadius)) || 0}rem`), e.style.setProperty("--input-radius", `${parseFloat(String(s.cornerRadii.inputRadius)) || 0}rem`), e.style.setProperty("--modal-radius", `${parseFloat(String(s.cornerRadii.modalRadius)) || 0}rem`)) : (e.style.setProperty("--btn-radius", "0.75rem"), e.style.setProperty("--card-radius", "1.5rem"), e.style.setProperty("--input-radius", "0.75rem"), e.style.setProperty("--modal-radius", "1.5rem")), ((t) => {
 			let n = {
 				Inter: "\"Inter\", sans-serif",
 				Outfit: "\"Outfit\", sans-serif",
@@ -143,26 +143,26 @@ function qe({ children: t }) {
 			e.style.setProperty("--font-family", n[t] || n.Inter);
 			let r = document.getElementById("dynamic-google-font");
 			t === "System UI" ? r && r.remove() : (r || (r = document.createElement("link"), r.id = "dynamic-google-font", r.rel = "stylesheet", document.head.appendChild(r)), r.href = `https://fonts.googleapis.com/css2?family=${t.replace(/ /g, "+")}:wght@400;500;600;700;800;900&display=swap`), e.style.fontSize = "16px", e.style.setProperty("--weight-h1", "800"), e.style.setProperty("--weight-h2", "700"), e.style.setProperty("--weight-h3", "700"), e.style.setProperty("--leading-normal", "1.5");
-		})(o.fontFamily || "Inter");
-		let a = document.querySelector("link[rel*='icon']");
-		a || (a = document.createElement("link"), a.rel = "icon", document.head.appendChild(a)), o.faviconUrl && (a.href = o.faviconUrl);
+		})(s.fontFamily || "Inter");
+		let o = document.querySelector("link[rel*='icon']");
+		o || (o = document.createElement("link"), o.rel = "icon", document.head.appendChild(o)), s.faviconUrl && (o.href = s.faviconUrl);
 	}, [
-		i,
-		n,
-		o
+		a,
+		r,
+		s
 	]), /* @__PURE__ */ B(Ke.Provider, {
 		value: {
-			theme: i,
-			setTheme: (e) => r(e),
+			theme: a,
+			setTheme: (e) => i(e),
 			toggleTheme: () => {
-				r((e) => e === "light" ? "dark" : "light");
+				i((e) => e === "light" ? "dark" : "light");
 			},
-			isSystem: n === "system",
-			setIsSystem: (e) => r(e ? "system" : i),
-			config: o,
-			activeConfig: o
+			isSystem: r === "system",
+			setIsSystem: (e) => i(e ? "system" : a),
+			config: s,
+			activeConfig: s
 		},
-		children: c ? t : null
+		children: l ? t : null
 	});
 }
 var Je = () => {
@@ -89561,21 +89561,31 @@ var bUn = "rules_version = '2';\nservice cloud.firestore {\n  match /databases/{
 	}
 ];
 function CUn(e) {
+	let t;
 	try {
-		let t = {
-			BASE_URL: "/",
-			DEV: !1,
-			MODE: "production",
-			PROD: !0,
-			SSR: !1,
-			VITE_ADMIN_EMAILS: void 0,
-			VITE_FIREBASE_API_KEY: void 0,
-			VITE_FIREBASE_APP_ID: void 0,
-			VITE_FIREBASE_AUTH_DOMAIN: void 0,
-			VITE_FIREBASE_MESSAGING_SENDER_ID: void 0,
-			VITE_FIREBASE_PROJECT_ID: void 0,
-			VITE_FIREBASE_STORAGE_BUCKET: void 0
-		}?.[e];
+		switch (e) {
+			case "VITE_FIREBASE_API_KEY":
+				t = void 0;
+				break;
+			case "VITE_FIREBASE_AUTH_DOMAIN":
+				t = void 0;
+				break;
+			case "VITE_FIREBASE_PROJECT_ID":
+				t = void 0;
+				break;
+			case "VITE_FIREBASE_STORAGE_BUCKET":
+				t = void 0;
+				break;
+			case "VITE_FIREBASE_MESSAGING_SENDER_ID":
+				t = void 0;
+				break;
+			case "VITE_FIREBASE_APP_ID":
+				t = void 0;
+				break;
+			case "VITE_ADMIN_EMAILS":
+				t = void 0;
+				break;
+		}
 		if (t && typeof t == "string" && t.trim() !== "") return t;
 	} catch {}
 	try {
@@ -90369,7 +90379,8 @@ function IUn() {
 	return /* @__PURE__ */ B(ye, { children: /* @__PURE__ */ B(LUn, {}) });
 }
 function LUn() {
-	return TUn() ? /* @__PURE__ */ B(FUn, {}) : /* @__PURE__ */ V("div", {
+	let e = Ze();
+	return e.firebaseConfig && e.firebaseConfig.apiKey && e.firebaseConfig.apiKey.trim() !== "" && e.firebaseConfig.projectId && e.firebaseConfig.projectId.trim() !== "" || TUn() ? /* @__PURE__ */ B(FUn, {}) : /* @__PURE__ */ V("div", {
 		className: "min-h-screen relative flex flex-col overflow-x-hidden",
 		children: [
 			/* @__PURE__ */ B(Ms, { standalone: !0 }),
@@ -90388,22 +90399,25 @@ function RUn(e) {
 			basename: e.basename,
 			onAuthChange: e.onAuthChange
 		},
-		children: /* @__PURE__ */ B(qe, { children: /* @__PURE__ */ V("div", {
-			className: "firebase-os",
-			style: {
-				position: "fixed",
-				inset: 0,
-				width: "100vw",
-				height: "100vh",
-				zIndex: 9999,
-				overflowY: "auto",
-				overflowX: "hidden",
-				textAlign: "left",
-				margin: 0,
-				padding: 0
-			},
-			children: [/* @__PURE__ */ B("style", { children: "\n            .firebase-os h1, .firebase-os h2, .firebase-os h3, .firebase-os h4, .firebase-os h5, .firebase-os h6 {\n              font-family: var(--font-family, 'Inter', system-ui, sans-serif) !important;\n            }\n            .firebase-os code, .firebase-os pre {\n              font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !important;\n              background: transparent;\n              border: none;\n            }\n          " }), /* @__PURE__ */ B(IUn, {})]
-		}) })
+		children: /* @__PURE__ */ B(qe, {
+			scopeSelector: ".firebase-os",
+			children: /* @__PURE__ */ V("div", {
+				className: "firebase-os",
+				style: {
+					position: "fixed",
+					inset: 0,
+					width: "100vw",
+					height: "100vh",
+					zIndex: 9999,
+					overflowY: "auto",
+					overflowX: "hidden",
+					textAlign: "left",
+					margin: 0,
+					padding: 0
+				},
+				children: [/* @__PURE__ */ B("style", { children: "\n            /* Defensive Typography Reset: Specificity 0,0,0 */\n            /* This ensures we provide base styles without overriding ANY utility classes */\n            :where(.firebase-os) :where(h1, h2, h3, h4, h5, h6, p, span, li, label, a, td, th) {\n              color: var(--fg-color);\n              font-family: var(--font-family, 'Inter', system-ui, sans-serif);\n            }\n            :where(.firebase-os) :where(h1, h2, h3, h4, h5, h6, p) {\n              margin: 0;\n            }\n            :where(.firebase-os) :where(code, pre) {\n              font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !important;\n              background: transparent;\n              border: none;\n            }\n          " }), /* @__PURE__ */ B(IUn, {})]
+			})
+		})
 	});
 }
 //#endregion

package/dist/lib/ThemeContext.d.ts

@@ -10,8 +10,9 @@ interface ThemeContextType {
     config: typeof themeConfig;
     activeConfig: any;
 }
-export declare function ThemeProvider({ children }: {
+export declare function ThemeProvider({ children, scopeSelector }: {
     children: React.ReactNode;
+    scopeSelector?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare const useTheme: () => ThemeContextType;
 export {};

package/package.json

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

package/scripts/postinstall.js

@@ -86,8 +86,30 @@ const appPath = path.join(srcDir, 'App.tsx');
 const appContent = `import { FirebaseOS } from 'firebase-os';
 import 'firebase-os/styles.css';
 
+// Vite injects these from your .env file at dev/build time.
+// The library can't read them directly since it's pre-built,
+// so we pass them as props.
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY || '',
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || '',
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID || '',
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET || '',
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID || '',
+  appId: import.meta.env.VITE_FIREBASE_APP_ID || '',
+};
+
+const adminEmails = (import.meta.env.VITE_ADMIN_EMAILS || '')
+  .split(',')
+  .map((e: string) => e.trim())
+  .filter(Boolean);
+
 export default function App() {
-  return <FirebaseOS />;
+  return (
+    <FirebaseOS
+      firebaseConfig={firebaseConfig}
+      adminEmails={adminEmails}
+    />
+  );
 }
 `;
 
@@ -100,4 +122,25 @@ if (!existingApp.includes('firebase-os')) {
   console.log('  ℹ App.tsx already uses firebase-os — skipped');
 }
 
+// ── 4. Create .env file with 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=your_email@example.com
+`;
+  fs.writeFileSync(envPath, envContent);
+  console.log('  ✓ Created .env file with configuration placeholders');
+}
+
 console.log('\n[firebase-os] Setup complete! Run `npm run dev` to start.\n');