firebase-os 1.1.4 → 1.1.6

package/dist/firebase-os.es.js

@@ -129,9 +129,11 @@ function qe({ children: t, scopeSelector: n }) {
 		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 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) => {
+		e.style.setProperty("--bg-color", t.background), e.style.setProperty("--bg-secondary-color", t.backgroundSecondary || t.background), 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 i = (e, t) => !e || e.length === 0 ? t || "transparent" : e.length === 1 ? e[0] : `linear-gradient(135deg, ${e.map((t, n) => `${t} ${Math.round(n / (e.length - 1) * 100)}%`).join(", ")})`, o = a === "dark" ? "linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%)" : "linear-gradient(135deg, #5b21b6 0%, #a78bfa 100%)";
+		e.style.setProperty("--button-bg", i(t.buttonGradient, o)), e.style.setProperty("--button-fg", t.buttonText || "#ffffff"), e.style.setProperty("--button-hover-bg", i(t.buttonHoverGradient || t.buttonGradient, o)), e.style.setProperty("--text-gradient", i(t.textGradient, `linear-gradient(135deg, ${t.foreground} 0%, ${t.accent} 100%)`)), e.style.setProperty("--glow-color", t.glowColor || "rgba(124, 58, 237, 0.3)"), e.style.setProperty("--notification-icon-color", t.notificationIconColor || t.accent);
+		let c = t.secondaryButton?.bg || (a === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.03)"), l = t.secondaryButton?.border || (a === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.06)"), u = t.secondaryButton?.text || t.foreground;
+		e.style.setProperty("--btn-sec-bg", c), e.style.setProperty("--btn-sec-border", l), e.style.setProperty("--btn-sec-text", u), 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",
@@ -144,8 +146,8 @@ function qe({ children: t, scopeSelector: n }) {
 			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");
 		})(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);
+		let d = document.querySelector("link[rel*='icon']");
+		d || (d = document.createElement("link"), d.rel = "icon", document.head.appendChild(d)), s.faviconUrl && (d.href = s.faviconUrl);
 	}, [
 		a,
 		r,
@@ -78857,9 +78859,14 @@ function OVn() {
 									},
 									transition: { delay: t * .05 },
 									className: "glass-panel border border-[var(--panel-border)] rounded-2xl flex flex-col overflow-hidden hover:border-accent/40 transition-all duration-300",
-									children: [/* @__PURE__ */ V("button", {
+									children: [/* @__PURE__ */ V("div", {
+										role: "button",
+										tabIndex: 0,
+										onKeyDown: (t) => {
+											(t.key === "Enter" || t.key === " ") && d(e.id);
+										},
 										onClick: () => d(e.id),
-										className: "w-full flex items-center justify-between p-4 md:px-6 hover:bg-foreground/[0.02] transition-colors text-left",
+										className: "w-full flex items-center justify-between p-4 md:px-6 hover:bg-foreground/[0.02] transition-colors text-left cursor-pointer",
 										children: [/* @__PURE__ */ V("div", {
 											className: "flex items-center gap-4 flex-1 min-w-0",
 											children: [/* @__PURE__ */ B("div", {
@@ -78999,9 +79006,14 @@ function OVn() {
 												},
 												transition: { delay: t * .05 },
 												className: "glass-panel border border-[var(--panel-border)] rounded-2xl flex flex-col overflow-hidden opacity-50 grayscale hover:opacity-100 hover:grayscale-0 hover:border-accent/40 transition-all duration-300",
-												children: [/* @__PURE__ */ V("button", {
+												children: [/* @__PURE__ */ V("div", {
+													role: "button",
+													tabIndex: 0,
+													onKeyDown: (t) => {
+														(t.key === "Enter" || t.key === " ") && d(e.id);
+													},
 													onClick: () => d(e.id),
-													className: "w-full flex items-center justify-between p-4 md:px-6 hover:bg-foreground/[0.02] transition-colors text-left",
+													className: "w-full flex items-center justify-between p-4 md:px-6 hover:bg-foreground/[0.02] transition-colors text-left cursor-pointer",
 													children: [/* @__PURE__ */ V("div", {
 														className: "flex items-center gap-4 flex-1 min-w-0",
 														children: [/* @__PURE__ */ B("div", {
@@ -89363,62 +89375,62 @@ function vUn({ config: e }) {
 //#endregion
 //#region src/pages/DynamicPage.tsx
 function yUn() {
-	let e = Se(), { user: t } = $e(), [n, r] = x(null), [i, a] = x(!0);
+	let e = Se(), { user: t } = $e(), n = Ze(), [r, i] = x(null), [a, o] = x(!0);
 	m(() => {
 		(async () => {
-			a(!0);
+			o(!0);
 			try {
-				let [t, n] = await Promise.all([ee(C(W, "sys_pages")), ee(C(W, "sys_tabs"))]), i = null, a = null, o = (t, n) => {
+				let [t, n] = await Promise.all([ee(C(W, "sys_pages")), ee(C(W, "sys_tabs"))]), r = null, a = null, o = (t, n) => {
 					t.forEach((t) => {
-						let r = t.data(), o = r.route;
+						let i = t.data(), o = i.route;
 						o && !o.startsWith("/") && (o = "/" + o);
 						let s = "/" + t.id === e.pathname;
-						(o === e.pathname || s) && (i = {
-							...r,
+						(o === e.pathname || s) && (r = {
+							...i,
 							isPrivate: n,
-							isAdmin: r.pageType === "admin",
-							isShared: r.pageType === "shared"
+							isAdmin: i.pageType === "admin",
+							isShared: i.pageType === "shared"
 						}, a = t.id);
 					});
 				};
-				if (o(t, !1), i || o(n, !0), i || (e.pathname === "/contact" ? (i = {
+				if (o(t, !1), r || o(n, !0), r || (e.pathname === "/contact" ? (r = {
 					route: "/contact",
 					template: "popup_form",
 					form: "contact"
-				}, a = "contact") : e.pathname === "/support" && (i = {
+				}, a = "contact") : e.pathname === "/support" && (r = {
 					route: "/support",
 					template: "popup_form",
 					form: "support"
-				}, a = "support")), i) {
-					if ((a === "contact" || a === "support") && !i.form && (i.form = a), i.pageId = a, i.form) {
-						let e = await E(T(W, "sys_forms", i.form));
-						if (e.exists()) i.formConfigOverride = {
+				}, a = "support")), r) {
+					if ((a === "contact" || a === "support") && !r.form && (r.form = a), r.pageId = a, r.form) {
+						let e = await E(T(W, "sys_forms", r.form));
+						if (e.exists()) r.formConfigOverride = {
 							...e.data(),
 							id: e.id
 						};
-						else if (i.form === "contact") {
+						else if (r.form === "contact") {
 							let { contactFormConfig: e } = await import("./contactForm.config-DLeI_ZEj.js");
-							i.formConfigOverride = e;
-						} else if (i.form === "support") {
+							r.formConfigOverride = e;
+						} else if (r.form === "support") {
 							let { supportFormConfig: e } = await import("./supportForm.config-74T-eSSH.js");
-							i.formConfigOverride = e;
+							r.formConfigOverride = e;
 						}
 					}
-					let e = i.pageName || i.tabName || i.title;
-					e && (document.title = e), r(i);
-				} else r("not-found");
+					let e = r.pageName || r.tabName || r.title;
+					e && (document.title = e), i(r);
+				} else i("not-found");
 			} catch {
-				r("not-found");
+				i("not-found");
 			} finally {
-				a(!1);
+				o(!1);
 			}
 		})();
 	}, [e.pathname]);
-	let [o, s] = x(!1);
+	let [s, c] = x(!1);
 	if (m(() => {
 		let e;
-		return i ? e = setTimeout(() => s(!0), 150) : s(!1), () => clearTimeout(e);
-	}, [i]), i) return o ? t ? /* @__PURE__ */ V("main", {
+		return a ? e = setTimeout(() => c(!0), 150) : c(!1), () => clearTimeout(e);
+	}, [a]), a) return s ? t ? /* @__PURE__ */ V("main", {
 		className: "flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col",
 		children: [/* @__PURE__ */ V("div", {
 			className: "mb-6",
@@ -89434,7 +89446,7 @@ function yUn() {
 		className: "flex-1 flex items-center justify-center min-h-[60vh] z-10",
 		children: /* @__PURE__ */ B(K, { className: "w-6 h-6 animate-spin text-accent" })
 	}) : null;
-	if (n === "not-found") return /* @__PURE__ */ B("main", {
+	if (r === "not-found") return /* @__PURE__ */ B("main", {
 		className: "flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 min-h-screen",
 		children: /* @__PURE__ */ V("div", {
 			className: "flex flex-col items-center justify-center flex-1 text-center",
@@ -89481,53 +89493,53 @@ function yUn() {
 			]
 		})
 	});
-	if ((n.pageId === "support" || n.isPrivate) && !t) return /* @__PURE__ */ B(be, {
+	if ((r.pageId === "support" || r.isPrivate) && !t) return /* @__PURE__ */ B(be, {
 		to: "/login",
 		state: { from: e }
 	});
-	let c = n.pageName?.toLowerCase().replace(/\s+/g, "_") || n.pageId || "custom_page", l = `pub_${c}`;
-	if (n.template === "none") return n.isAdmin ? /* @__PURE__ */ B(_Un, { config: n }) : n.isShared ? /* @__PURE__ */ B(vUn, { config: n }) : n.isPrivate ? /* @__PURE__ */ B(gUn, { config: n }) : /* @__PURE__ */ B(hUn, { config: n });
-	if (n.template === "board") {
-		let e = n.isAdmin ? `admin_${n.pageId || c}` : n.isShared ? `mem_${n.pageId || c}` : n.isPrivate ? `user_${n.pageId || c}` : l;
-		return /* @__PURE__ */ B(JVn, {
-			title: n.tabTitle || n.tabName || n.title || n.pageName || "Board",
-			subtitle: n.route,
+	let l = r.pageName?.toLowerCase().replace(/\s+/g, "_") || r.pageId || "custom_page", u = `pub_${l}`;
+	if (r.template === "none") return r.isAdmin ? /* @__PURE__ */ B(_Un, { config: r }) : r.isShared ? /* @__PURE__ */ B(vUn, { config: r }) : r.isPrivate ? /* @__PURE__ */ B(gUn, { config: r }) : /* @__PURE__ */ B(hUn, { config: r });
+	if (r.template === "board") {
+		let e = r.isAdmin ? `admin_${r.pageId || l}` : r.isShared ? `mem_${r.pageId || l}` : r.isPrivate ? `user_${r.pageId || l}` : u;
+		return /* @__PURE__ */ B(n.components?.TemplateBoard || JVn, {
+			title: r.tabTitle || r.tabName || r.title || r.pageName || "Board",
+			subtitle: r.route,
 			tasksCollection: `${e}_tasks`,
 			categoriesCollection: `${e}_categories`,
-			config: n
+			config: r
 		});
 	}
-	if (n.template === "table") {
-		let e = n.isAdmin ? `admin_${n.pageId || c}` : n.isShared ? `mem_${n.pageId || c}` : n.isPrivate ? `user_${n.pageId || c}` : l;
-		return /* @__PURE__ */ B($Hn, {
-			title: n.tabTitle || n.tabName || n.title || n.pageName || "Table",
-			subtitle: n.route,
+	if (r.template === "table") {
+		let e = r.isAdmin ? `admin_${r.pageId || l}` : r.isShared ? `mem_${r.pageId || l}` : r.isPrivate ? `user_${r.pageId || l}` : u;
+		return /* @__PURE__ */ B(n.components?.TemplateTable || $Hn, {
+			title: r.tabTitle || r.tabName || r.title || r.pageName || "Table",
+			subtitle: r.route,
 			tableCollection: `${e}_table`,
-			config: n
+			config: r
 		});
 	}
-	if (n.template === "calendar") {
-		let e = n.isAdmin ? `admin_${n.pageId || c}` : n.isShared ? `mem_${n.pageId || c}` : n.isPrivate ? `user_${n.pageId || c}` : l;
-		return /* @__PURE__ */ B(tUn, {
-			title: n.tabTitle || n.tabName || n.title || n.pageName || "Calendar",
-			subtitle: n.route,
+	if (r.template === "calendar") {
+		let e = r.isAdmin ? `admin_${r.pageId || l}` : r.isShared ? `mem_${r.pageId || l}` : r.isPrivate ? `user_${r.pageId || l}` : u;
+		return /* @__PURE__ */ B(n.components?.TemplateCalendar || tUn, {
+			title: r.tabTitle || r.tabName || r.title || r.pageName || "Calendar",
+			subtitle: r.route,
 			eventsCollection: `${e}_events`,
-			defaultTimeFormat: n.defaultTimeFormat || n.defaulttimeformat || "12h",
-			config: n
+			defaultTimeFormat: r.defaultTimeFormat || r.defaulttimeformat || "12h",
+			config: r
 		});
 	}
-	return n.template === "inline_form" ? /* @__PURE__ */ B("div", {
+	return r.template === "inline_form" ? /* @__PURE__ */ B("div", {
 		className: "flex-1 flex flex-col items-center justify-start mt-8 relative z-10 w-full min-h-[60vh]",
 		children: /* @__PURE__ */ B(Es, {
 			isInline: !0,
-			formId: n.form,
-			formConfig: n.formConfigOverride
+			formId: r.form,
+			formConfig: r.formConfigOverride
 		})
 	}) : /* @__PURE__ */ B("div", {
 		className: "flex-1 flex flex-col items-center justify-center relative z-10 w-full min-h-[60vh]",
 		children: /* @__PURE__ */ B(Es, {
-			formId: n.form,
-			formConfig: n.formConfigOverride,
+			formId: r.form,
+			formConfig: r.formConfigOverride,
 			onClose: () => window.history.back()
 		})
 	});
@@ -89609,10 +89621,10 @@ function wUn() {
 	let e = [];
 	for (let { key: t, label: n } of SUn) {
 		let r = CUn(t);
-		(!r || r.trim() === "") && e.push(n);
+		!r || r.trim() === "" ? (console.log("Missing key:", t, r), e.push(n)) : console.log("Found key:", t, r);
 	}
 	let t = CUn("VITE_ADMIN_EMAILS"), n = !t || t.trim() === "";
-	return {
+	return console.log("Setup complete?", e.length === 0, e), {
 		allSet: e.length === 0,
 		missing: e,
 		missingAdminEmails: n
@@ -90265,6 +90277,7 @@ function PUn() {
 	});
 }
 function FUn() {
+	let e = Ze().components?.Home || fce;
 	return /* @__PURE__ */ B(eee, { children: /* @__PURE__ */ V("div", {
 		className: "min-h-screen relative flex flex-col overflow-x-hidden",
 		children: [
@@ -90272,7 +90285,7 @@ function FUn() {
 			/* @__PURE__ */ V(xe, { children: [
 				/* @__PURE__ */ B(U, {
 					path: "/",
-					element: /* @__PURE__ */ B(Q9, { children: /* @__PURE__ */ B(fce, {}) })
+					element: /* @__PURE__ */ B(Q9, { children: /* @__PURE__ */ B(e, {}) })
 				}),
 				/* @__PURE__ */ B(U, {
 					path: "/register",
@@ -90364,7 +90377,10 @@ function FUn() {
 				}),
 				/* @__PURE__ */ B(U, {
 					path: "/setup",
-					element: /* @__PURE__ */ B(jUn, {})
+					element: /* @__PURE__ */ B(be, {
+						to: "/",
+						replace: !0
+					})
 				}),
 				/* @__PURE__ */ B(U, {
 					path: "*",
@@ -90397,30 +90413,19 @@ function RUn(e) {
 			firebaseConfig: e.firebaseConfig,
 			adminEmails: e.adminEmails,
 			basename: e.basename,
-			onAuthChange: e.onAuthChange
+			onAuthChange: e.onAuthChange,
+			themeConfig: e.themeConfig,
+			components: e.components
 		},
-		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,
-					background: "var(--bg-gradient)",
-					color: "var(--fg-color)"
-				},
-				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, {})]
-			})
-		})
+		children: /* @__PURE__ */ B(qe, { children: /* @__PURE__ */ B("div", {
+			className: "firebase-os flex-1 flex flex-col min-h-screen",
+			style: {
+				background: "var(--bg-gradient)",
+				color: "var(--fg-color)"
+			},
+			children: /* @__PURE__ */ B(IUn, {})
+		}) })
 	});
 }
 //#endregion
-export { RUn as FirebaseOS, $e as useAuth, Ze as useConfig, Je as useTheme };
+export { Es as ContactPopup, RUn as FirebaseOS, Ie as auth, W as db, Ns as defaultHomeConfig, Le as storage, $e as useAuth, Ze as useConfig, Je as useTheme };

package/dist/index.d.ts

@@ -4,3 +4,6 @@ export { useAuth } from './lib/AuthContext';
 export { useTheme } from './lib/ThemeContext';
 export { useConfig } from './lib/ConfigContext';
 export type { FirebaseOSConfig } from './lib/ConfigContext';
+export { db, auth, storage } from './lib/firebase';
+export { ContactPopup } from './components/ContactPopup';
+export { defaultHomeConfig } from './configs/pages/home.config';

package/dist/lib/ConfigContext.d.ts

@@ -11,6 +11,18 @@ export interface FirebaseOSConfig {
     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>;
+    };
 }
 export declare function ConfigProvider({ config, children }: {
     config: FirebaseOSConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firebase-os",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A complete Firebase-powered admin OS — one React component.",
   "type": "module",
   "main": "dist/firebase-os.cjs.js",
@@ -21,7 +21,8 @@
   },
   "files": [
     "dist",
-    "scripts"
+    "scripts",
+    "src"
   ],
   "scripts": {
     "dev": "vite",

package/scripts/postinstall.js

@@ -81,22 +81,54 @@ createRoot(document.getElementById('root')!).render(
   }
 }
 
-// ── 3. Reveal the CSS by copying it to the consumer's src directory ──────────
-const sourceCssPath = path.join(__dirname, '..', 'dist', 'firebase-os.css');
-const targetCssPath = path.join(srcDir, 'firebase-os.css');
+// ── 3. Hybrid Architecture: Create local overrides directory ─────────────
+const fbosDir = path.join(srcDir, 'firebase-os');
+if (!fs.existsSync(fbosDir)) fs.mkdirSync(fbosDir, { recursive: true });
+
+// Copy raw index.css to give user full control over Tailwind and variables
+const sourceCssPath = path.join(__dirname, '..', 'src', 'index.css');
 if (fs.existsSync(sourceCssPath)) {
-  fs.copyFileSync(sourceCssPath, targetCssPath);
-  console.log('  ✓ Copied firebase-os.css to your src directory');
+  fs.copyFileSync(sourceCssPath, path.join(fbosDir, 'theme.css'));
+  console.log('  ✓ Copied theme.css to your src/firebase-os directory');
+}
+
+// Copy configurations
+const configsDir = path.join(fbosDir, 'configs');
+if (!fs.existsSync(configsDir)) fs.mkdirSync(configsDir, { recursive: true });
+
+const copyConfig = (srcPath, destName) => {
+  const fullSrc = path.join(__dirname, '..', 'src', 'configs', srcPath);
+  if (fs.existsSync(fullSrc)) {
+    fs.copyFileSync(fullSrc, path.join(configsDir, destName));
+  }
+};
+copyConfig('theme.config.ts', 'theme.config.ts');
+copyConfig('pages/home.config.ts', 'home.config.ts');
+copyConfig('forms/contactForm.config.ts', 'contactForm.config.ts');
+copyConfig('forms/supportForm.config.ts', 'supportForm.config.ts');
+console.log('  ✓ Copied configuration files to your src/firebase-os/configs directory');
+
+// Read and rewrite Home.tsx
+const sourceHomePath = path.join(__dirname, '..', 'src', 'pages', 'Home.tsx');
+if (fs.existsSync(sourceHomePath)) {
+  let homeContent = fs.readFileSync(sourceHomePath, 'utf8');
+  homeContent = homeContent.replace(/from '\.\.\/components\/ContactPopup'/g, "from 'firebase-os'");
+  homeContent = homeContent.replace(/from '\.\.\/lib\/firebase'/g, "from 'firebase-os'");
+  homeContent = homeContent.replace(/from '\.\.\/configs\/pages\/home\.config'/g, "from './configs/home.config'");
+  fs.writeFileSync(path.join(fbosDir, 'Home.tsx'), homeContent);
+  console.log('  ✓ Created local Home.tsx template override');
 }
 
-// ── 4. Write App.tsx with FirebaseOS already wired up ───────────────────────
+// ── 4. Write App.tsx with Hybrid Overrides Wired Up ───────────────────────
 const appPath = path.join(srcDir, 'App.tsx');
 const appContent = `import { FirebaseOS } from 'firebase-os';
-import './firebase-os.css';
+import './firebase-os/theme.css';
+
+// Local Hybrid Overrides
+import { Home } from './firebase-os/Home';
+import { themeConfig } from './firebase-os/configs/theme.config';
 
 // 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 || '',
@@ -116,21 +148,57 @@ export default function App() {
     <FirebaseOS
       firebaseConfig={firebaseConfig}
       adminEmails={adminEmails}
+      themeConfig={themeConfig}
+      components={{
+        Home: Home
+      }}
     />
   );
 }
 `;
 
-// Only write if the file doesn't already import FirebaseOS
 const existingApp = fs.existsSync(appPath) ? fs.readFileSync(appPath, 'utf8') : '';
 if (!existingApp.includes('firebase-os')) {
   fs.writeFileSync(appPath, appContent);
-  console.log('  ✓ Wrote App.tsx with <FirebaseOS /> ready to go');
+  console.log('  ✓ Wrote App.tsx with <FirebaseOS /> hybrid architecture ready to go');
 } else {
   console.log('  ℹ App.tsx already uses firebase-os — skipped');
 }
 
-// ── 4. Create .env file with placeholders ──────────────────────────────────
+// ── 5. Setup Tailwind V4 in host app ───────────────────────────────────────
+// We'll update the user's package.json to include tailwindcss dependencies
+const pkgPath = path.join(consumerRoot, 'package.json');
+if (fs.existsSync(pkgPath)) {
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  let pkgModified = false;
+  pkg.devDependencies = pkg.devDependencies || {};
+  
+  if (!pkg.devDependencies['tailwindcss']) {
+    pkg.devDependencies['tailwindcss'] = '^4.0.0';
+    pkgModified = true;
+  }
+  if (!pkg.devDependencies['@tailwindcss/vite']) {
+    pkg.devDependencies['@tailwindcss/vite'] = '^4.0.0';
+    pkgModified = true;
+  }
+  if (pkgModified) {
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    console.log('  ✓ Added tailwindcss and @tailwindcss/vite to your package.json');
+  }
+}
+
+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(),');
+    fs.writeFileSync(viteConfigPath, viteConfig);
+    console.log('  ✓ Patched vite.config.ts to enable Tailwind CSS v4');
+  }
+}
+
+// ── 6. Create .env file with placeholders ──────────────────────────────────
 const envPath = path.join(consumerRoot, '.env');
 if (!fs.existsSync(envPath)) {
   const envContent = `# 🔥 Firebase OS Configuration
@@ -145,10 +213,13 @@ 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
+VITE_ADMIN_EMAILS=admin@example.com
 `;
   fs.writeFileSync(envPath, envContent);
-  console.log('  ✓ Created .env file with configuration placeholders');
+  console.log('  ✓ Created .env template');
 }
 
-console.log('\n[firebase-os] Setup complete! Run `npm run dev` to start.\n');
+console.log('\n[firebase-os] 🎉 Hybrid Setup complete! You now have full control over styling and configs.\n');
+console.log('🚨 IMPORTANT NEXT STEPS:');
+console.log('1. Run `npm install` again to install the required Tailwind CSS dependencies.');
+console.log('2. Run `npm run dev` to start your app.\n');