your-ai-workflow-firebase-os 1.2.2 → 1.2.4

package/dist/your-ai-workflow-firebase-os.es.js

@@ -78814,9 +78814,9 @@ function OVn() {
 				className: "flex justify-start",
 				children: /* @__PURE__ */ B(p9, {})
 			}), /* @__PURE__ */ V("div", {
-				className: "w-full flex-1 glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]",
+				className: "w-full flex-1 flex flex-col glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]",
 				children: [/* @__PURE__ */ B("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent/5 blur-[100px] rounded-full pointer-events-none" }), /* @__PURE__ */ B("div", {
-					className: "relative z-10 h-full flex flex-col",
+					className: "relative z-10 flex-1 flex flex-col",
 					children: n ? /* @__PURE__ */ B("div", {
 						className: "flex-1 flex items-center justify-center min-h-[500px]",
 						children: /* @__PURE__ */ B("div", { className: "w-8 h-8 md:w-10 md:h-10 border-4 border-accent/20 border-t-accent rounded-full animate-spin" })
@@ -79194,9 +79194,9 @@ function kVn() {
 				className: "flex justify-start",
 				children: /* @__PURE__ */ B(p9, {})
 			}), /* @__PURE__ */ V("div", {
-				className: "w-full flex-1 glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]",
+				className: "w-full flex-1 flex flex-col glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]",
 				children: [/* @__PURE__ */ B("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent/5 blur-[100px] rounded-full pointer-events-none" }), /* @__PURE__ */ B("div", {
-					className: "relative z-10 h-full flex flex-col",
+					className: "relative z-10 flex-1 flex flex-col",
 					children: n ? /* @__PURE__ */ B("div", {
 						className: "flex-1 flex items-center justify-center min-h-[500px]",
 						children: /* @__PURE__ */ B("div", { className: "w-8 h-8 md:w-10 md:h-10 border-4 border-accent/20 border-t-accent rounded-full animate-spin" })
@@ -79813,9 +79813,9 @@ function AVn() {
 				onDragLeave: fe,
 				onDrop: pe,
 				children: [/* @__PURE__ */ B(p9, {}), /* @__PURE__ */ V("div", {
-					className: "flex flex-col md:flex-row glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl min-h-[600px] bg-background",
+					className: "flex flex-row glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl min-h-[600px] bg-background",
 					children: [/* @__PURE__ */ V("div", {
-						className: "md:w-[280px] border-b md:border-b-0 md:border-r border-[var(--panel-border)] bg-foreground/[0.01] p-4 flex flex-col shrink-0 overflow-y-auto hide-scrollbar",
+						className: "w-[280px] border-r border-[var(--panel-border)] bg-foreground/[0.01] p-4 flex flex-col shrink-0 overflow-y-auto hide-scrollbar",
 						children: [/* @__PURE__ */ B("div", {
 							className: "text-[11px] font-extrabold text-foreground/40 uppercase tracking-widest pl-4 mb-4 mt-2",
 							children: "Locations"
@@ -80153,7 +80153,7 @@ function AVn() {
 							}),
 							/* @__PURE__ */ B(ds, {
 								onClick: () => ue.current?.click(),
-								className: "px-8 py-3 rounded-full font-bold shadow-md bg-accent text-white hover:bg-accent/90 transition-colors",
+								className: "px-8 py-3 rounded-full font-bold shadow-md btn-primary transition-colors",
 								children: "Browse Files"
 							})
 						]
@@ -80246,7 +80246,7 @@ function AVn() {
 										download: !0,
 										target: "_blank",
 										rel: "noreferrer",
-										className: "p-2.5 bg-accent text-white hover:bg-accent/90 transition-colors rounded-xl shadow-lg ml-1",
+										className: "p-2.5 btn-primary transition-colors rounded-xl shadow-lg ml-1",
 										title: "Download",
 										children: /* @__PURE__ */ B(mt, { className: "w-4 h-4" })
 									})
@@ -85445,42 +85445,35 @@ W && ee(C(W, "sys_forms")).then((e) => {
 	}), t.length > 0 && Object.assign(iUn, { form: t });
 }).catch(() => {});
 var aUn = ({ value: e, onChange: t, onBlur: n, onFocus: r, className: a, isNumber: o, handleBlurOrEnter: s, placeholder: c, disabled: l }) => {
-	let [u, d] = i.useState(e), [f, p] = i.useState(!1), [h, g] = i.useState(0), _ = i.useRef(null), v = i.useRef(null);
+	let [u, d] = i.useState(e), [f, p] = i.useState(!1), h = i.useRef(null);
 	i.useEffect(() => {
 		d(e);
-	}, [e]), i.useLayoutEffect(() => {
-		v.current && g(v.current.getBoundingClientRect().width);
-	}, [u, c]), m(() => {
-		!f && _.current && (_.current.scrollLeft = 0);
+	}, [e]), m(() => {
+		!f && h.current && (h.current.scrollLeft = 0);
 	}, [u, f]);
-	let y = typeof a == "string" ? a.match(/(?:max-w-\[[^\]]+\]|sm:max-w-\[[^\]]+\]|md:max-w-\[[^\]]+\])\s*/g) : null, b = y ? y.join(" ") : "max-w-[200px] sm:max-w-[300px]", x = typeof a == "string" ? a.replace(/(?:max-w-\[[^\]]+\]|sm:max-w-\[[^\]]+\]|md:max-w-\[[^\]]+\]|text-ellipsis)\s*/g, "") : "", S = x.trim();
+	let g = typeof a == "string" ? a.match(/(?:max-w-\[[^\]]+\]|sm:max-w-\[[^\]]+\]|md:max-w-\[[^\]]+\])\s*/g) : null, _ = g ? g.join(" ") : "max-w-[200px] sm:max-w-[300px]", v = typeof a == "string" ? a.replace(/(?:max-w-\[[^\]]+\]|sm:max-w-\[[^\]]+\]|md:max-w-\[[^\]]+\]|text-ellipsis)\s*/g, "") : "", y = v.trim();
 	return /* @__PURE__ */ B("div", {
-		className: `relative inline-flex flex-col group/autoresize ${b}`,
+		className: `relative inline-grid group/autoresize ${_}`,
 		children: /* @__PURE__ */ V("div", {
-			className: "flex-1 overflow-x-auto overflow-y-hidden pb-[1px] styled-scrollbars-mini flex items-center",
+			className: "col-start-1 row-start-1 overflow-x-auto overflow-y-hidden pb-[1px] styled-scrollbars-mini inline-grid items-center",
 			children: [/* @__PURE__ */ B("span", {
-				ref: v,
-				className: `${x} absolute opacity-0 pointer-events-none whitespace-pre border-none p-0 inline-block`,
-				style: {
-					width: "max-content",
-					minWidth: "max-content"
-				},
+				className: `${v} invisible whitespace-pre col-start-1 row-start-1 border-none p-0 inline-block px-[2px]`,
 				"aria-hidden": "true",
 				children: u || c || (o ? "0" : " ")
 			}), /* @__PURE__ */ B("input", {
 				disabled: l,
-				ref: _,
+				ref: h,
 				type: o ? "number" : "text",
 				value: u,
 				placeholder: c,
 				spellCheck: !1,
-				className: `${S} transition-all duration-200 ${l ? "cursor-not-allowed opacity-50 select-none" : ""} ${f ? "relative z-50 bg-background shadow-md" : ""}`,
+				className: `${y} col-start-1 row-start-1 w-full min-w-[20px] transition-all duration-200 ${l ? "cursor-not-allowed opacity-50 select-none" : ""} ${f ? "relative z-50 bg-background shadow-md" : ""}`,
 				onDoubleClick: (e) => {
 					l || e.currentTarget.select();
 				},
 				onPaste: () => {
 					setTimeout(() => {
-						_.current && (_.current.scrollLeft = 0);
+						h.current && (h.current.scrollLeft = 0);
 					}, 10);
 				},
 				onChange: (e) => {
@@ -85500,11 +85493,6 @@ var aUn = ({ value: e, onChange: t, onBlur: n, onFocus: r, className: a, isNumbe
 				},
 				onFocus: (e) => {
 					l || (p(!0), r && r(e));
-				},
-				style: {
-					width: h > 0 ? `${h + 6}px` : "auto",
-					minWidth: "20px",
-					maxWidth: f ? "none" : void 0
 				}
 			})]
 		})
@@ -85857,7 +85845,8 @@ var aUn = ({ value: e, onChange: t, onBlur: n, onFocus: r, className: a, isNumbe
 								required: !0,
 								placeholder: "Enter your name"
 							};
-						} else if (typeof e[0] == "string") {
+						} else if (typeof e[0] == "string") if (e[0].startsWith("#") || e[0].startsWith("rgba") || e[0].startsWith("rgb") || e[0].startsWith("color-mix")) n = e[e.length - 1];
+						else {
 							let t = [
 								"Marketing",
 								"Support",
@@ -85866,7 +85855,8 @@ var aUn = ({ value: e, onChange: t, onBlur: n, onFocus: r, className: a, isNumbe
 								"Maintenance"
 							];
 							n = t[Math.min(e.length, t.length) - 1] || `Option ${e.length + 1}`;
-						} else n = e.length > 0 ? JSON.parse(JSON.stringify(e[e.length - 1])) : "", n && typeof n == "object" && (n.name &&= `${n.name}_${e.length}`, n.label &&= `${n.label} ${e.length}`);
+						}
+						else n = e.length > 0 ? JSON.parse(JSON.stringify(e[e.length - 1])) : "", n && typeof n == "object" && (n.name &&= `${n.name}_${e.length}`, n.label &&= `${n.label} ${e.length}`);
 						e.push(n), a(e);
 					},
 					className: "mt-2 mb-1 w-fit flex items-center gap-1.5 px-3 py-1 bg-accent/10 hover:bg-accent/20 text-accent font-extrabold text-[11px] uppercase tracking-wider rounded-md transition-colors border border-accent/20",
@@ -86041,54 +86031,55 @@ var aUn = ({ value: e, onChange: t, onBlur: n, onFocus: r, className: a, isNumbe
 	}));
 };
 function oUn() {
-	let { activeConfig: e } = Je(), [t, n] = x(null), [r, i] = x(!1), [a, o] = x(!1);
+	let { activeConfig: e } = Je(), [t, n] = x(null), [r, a] = x(!1), [o, s] = x(!1), c = i.useRef(null);
 	m(() => {
-		t || n(JSON.parse(JSON.stringify(e)));
+		if (!t && e) {
+			let t = JSON.parse(JSON.stringify(e));
+			n(t), c.current = JSON.stringify(t);
+		}
 	}, [e]);
-	let [s, c] = x(!1), [l, u] = x(!1);
+	let [l, u] = x(!1), [d, f] = x(!1);
 	m(() => {
-		if (!t || !e) return;
-		if (JSON.stringify(t) === JSON.stringify(e)) {
-			i(!1);
-			return;
-		}
+		if (!t) return;
+		let e = JSON.stringify(t);
+		if (e === c.current) return;
 		let n = setTimeout(async () => {
-			i(!0);
+			a(!0);
 			try {
-				await j(T(W, "sys_configs", "theme"), t);
+				await j(T(W, "sys_configs", "theme"), t), c.current = e;
 			} catch (e) {
 				console.error("Auto-save failed", e);
 			}
-			i(!1);
+			a(!1);
 		}, 300);
 		return () => clearTimeout(n);
-	}, [t, e]);
-	let d = async () => {
-		o(!0);
+	}, [t]);
+	let p = async () => {
+		s(!0);
 		try {
-			let e = await import("./theme.config-BbEzcEDR.js");
-			await j(T(W, "sys_configs", "theme"), e.themeConfig), n(JSON.parse(JSON.stringify(e.themeConfig)));
+			let e = await import("./theme.config-BbEzcEDR.js"), t = JSON.parse(JSON.stringify(e.themeConfig));
+			await j(T(W, "sys_configs", "theme"), e.themeConfig), c.current = JSON.stringify(t), n(t);
 		} catch {}
 		setTimeout(() => {
-			o(!1), u(!1);
+			s(!1), f(!1);
 		}, 1e3);
-	}, f = (e) => {
+	}, h = (e) => {
 		if (!e) return "167, 139, 250";
 		let t = 0, n = 0, r = 0;
 		return e.length === 4 ? (t = parseInt(e[1] + e[1], 16), n = parseInt(e[2] + e[2], 16), r = parseInt(e[3] + e[3], 16)) : e.length === 7 && (t = parseInt(e.substring(1, 3), 16), n = parseInt(e.substring(3, 5), 16), r = parseInt(e.substring(5, 7), 16)), `${t}, ${n}, ${r}`;
-	}, p = (e) => {
+	}, g = (e) => {
 		if (!t) return;
 		let r = JSON.parse(JSON.stringify(t));
 		if (r.colors && r.colors.dark) {
-			let t = f(e.dark.accent);
+			let t = h(e.dark.accent);
 			r.colors.dark.accent = e.dark.accent, r.colors.dark.buttonGradient = e.dark.gradient, r.colors.dark.buttonHoverGradient = e.dark.gradient, r.colors.dark.buttonText = e.dark.buttonText, r.colors.dark.notificationIconColor = e.dark.accent, r.colors.dark.textGradient = e.dark.text, r.colors.dark.foreground = e.dark.text[0], r.colors.dark.background = e.dark.background, r.colors.dark.backgroundSecondary = e.dark.backgroundSecondary, r.colors.dark.panelBg = `rgba(${t}, 0.05)`, r.colors.dark.panelBorder = `rgba(${t}, 0.15)`, r.colors.dark.glowColor = `rgba(${t}, 0.40)`, r.colors.dark.selectionBg = `rgba(${t}, 0.40)`, r.colors.dark.secondaryButton && (r.colors.dark.secondaryButton.text = e.dark.text[0]);
 		}
 		if (r.colors && r.colors.light) {
-			let t = f(e.light.accent);
+			let t = h(e.light.accent);
 			r.colors.light.accent = e.light.accent, r.colors.light.buttonGradient = e.light.gradient, r.colors.light.buttonHoverGradient = e.light.gradient, r.colors.light.buttonText = e.light.buttonText, r.colors.light.notificationIconColor = e.light.accent, r.colors.light.textGradient = e.light.text, r.colors.light.foreground = e.light.text[0], r.colors.light.background = e.light.background, r.colors.light.backgroundSecondary = e.light.backgroundSecondary, r.colors.light.panelBg = "rgba(255, 255, 255, 0.70)", r.colors.light.panelBorder = `rgba(${t}, 0.08)`, r.colors.light.glowColor = `rgba(${t}, 0.30)`, r.colors.light.selectionBg = `rgba(${t}, 0.30)`, r.colors.light.secondaryButton && (r.colors.light.secondaryButton.text = e.light.text[0]);
 		}
 		n(r);
-	}, h = () => {
+	}, _ = () => {
 		if (t) {
 			let e = t, n = e.colors?.dark || {}, r = e.colors?.light || {};
 			e.fontCustomization;
@@ -86193,23 +86184,15 @@ export const themeConfig = {
     modalRadius: ${i.modalRadius || 2.5},       // Global popups and main internal boxes
   }
 };`;
-			navigator.clipboard.writeText(a), c(!0), setTimeout(() => c(!1), 2e3);
+			navigator.clipboard.writeText(a), u(!0), setTimeout(() => u(!1), 2e3);
 		}
 	};
 	return m(() => {
 		let e = (e) => {
-			(e.ctrlKey || e.metaKey) && e.key === "a" && document.activeElement === document.body && e.preventDefault(), (e.ctrlKey || e.metaKey) && e.key === "c" && !window.getSelection()?.toString() && t && h();
+			(e.ctrlKey || e.metaKey) && e.key === "a" && document.activeElement === document.body && e.preventDefault(), (e.ctrlKey || e.metaKey) && e.key === "c" && !window.getSelection()?.toString() && t && _();
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [t]), m(() => {
-		if (!t?.colors) return;
-		let e = (document.documentElement.getAttribute("data-theme") || "dark") === "dark" ? t.colors.dark : t.colors.light, n = document.documentElement;
-		n.style.setProperty("--bg-color", e.background), e.backgroundSecondary && n.style.setProperty("--bg-secondary-color", e.backgroundSecondary), n.style.setProperty("--fg-color", e.foreground), n.style.setProperty("--accent-color", e.accent), n.style.setProperty("--accent-deep", e.accentDeep), n.style.setProperty("--panel-bg", e.panelBg), n.style.setProperty("--panel-border", e.panelBorder), n.style.setProperty("--button-bg", `linear-gradient(135deg, ${e.buttonGradient[0]} 0%, ${e.buttonGradient[1]} 100%)`), n.style.setProperty("--button-hover-bg", `linear-gradient(135deg, ${e.buttonHoverGradient?.[0] || e.buttonGradient[0]} 0%, ${e.buttonHoverGradient?.[1] || e.buttonGradient[1]} 100%)`), n.style.setProperty("--text-gradient", `linear-gradient(135deg, ${e.textGradient[0]} 0%, ${e.textGradient[1]} 50%, ${e.textGradient[2]} 100%)`), n.style.setProperty("--glow-color", e.glowColor || "rgba(124, 58, 237, 0.3)"), n.style.setProperty("--button-fg", e.buttonText || "#ffffff"), e.notificationIconColor && n.style.setProperty("--notification-icon-color", e.notificationIconColor);
-	}, [t]), m(() => () => {
-		if (!e?.colors) return;
-		let t = (document.documentElement.getAttribute("data-theme") || "dark") === "dark" ? e.colors.dark : e.colors.light, n = document.documentElement;
-		n.style.setProperty("--bg-color", t.background), t.backgroundSecondary && n.style.setProperty("--bg-secondary-color", t.backgroundSecondary), n.style.setProperty("--fg-color", t.foreground), n.style.setProperty("--accent-color", t.accent), n.style.setProperty("--accent-deep", t.accentDeep), n.style.setProperty("--panel-bg", t.panelBg), n.style.setProperty("--panel-border", t.panelBorder), n.style.setProperty("--button-bg", `linear-gradient(135deg, ${t.buttonGradient[0]} 0%, ${t.buttonGradient[1]} 100%)`), n.style.setProperty("--button-hover-bg", `linear-gradient(135deg, ${t.buttonHoverGradient?.[0] || t.buttonGradient[0]} 0%, ${t.buttonHoverGradient?.[1] || t.buttonGradient[1]} 100%)`), n.style.setProperty("--text-gradient", `linear-gradient(135deg, ${t.textGradient[0]} 0%, ${t.textGradient[1]} 50%, ${t.textGradient[2]} 100%)`), n.style.setProperty("--glow-color", t.glowColor || "rgba(124, 58, 237, 0.3)"), n.style.setProperty("--button-fg", t.buttonText || "#ffffff"), t.notificationIconColor && n.style.setProperty("--notification-icon-color", t.notificationIconColor);
-	}, [e]), /* @__PURE__ */ V("main", {
+	}, [t]), /* @__PURE__ */ V("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__ */ B(Y.div, {
 			initial: {
@@ -86244,21 +86227,21 @@ export const themeConfig = {
 						className: "flex items-center gap-2 shrink-0",
 						children: [/* @__PURE__ */ B(ds, {
 							variant: "secondary",
-							onClick: d,
+							onClick: p,
 							className: "w-10 h-10 p-0 border-transparent bg-transparent hover:bg-red-500/10 rounded-xl flex items-center justify-center shrink-0 transition-colors group",
 							title: "Reset to Defaults",
-							children: a ? /* @__PURE__ */ B(K, { className: "w-4 h-4 text-red-500 animate-spin" }) : /* @__PURE__ */ B(kt, { className: "w-4 h-4 text-foreground/60 group-hover:text-red-500 transition-colors" })
+							children: o ? /* @__PURE__ */ B(K, { className: "w-4 h-4 text-red-500 animate-spin" }) : /* @__PURE__ */ B(kt, { className: "w-4 h-4 text-foreground/60 group-hover:text-red-500 transition-colors" })
 						}), /* @__PURE__ */ B(ds, {
 							variant: "secondary",
-							onClick: h,
+							onClick: _,
 							className: "w-10 h-10 p-0 border-transparent bg-transparent hover:bg-foreground/5 rounded-xl flex items-center justify-center shrink-0 transition-colors",
 							title: "Copy Config (Ctrl+C)",
-							children: s ? /* @__PURE__ */ B(st, { className: "w-4 h-4 text-emerald-500" }) : /* @__PURE__ */ B(ft, { className: "w-4 h-4 text-foreground/60 hover:text-foreground transition-colors" })
+							children: l ? /* @__PURE__ */ B(st, { className: "w-4 h-4 text-emerald-500" }) : /* @__PURE__ */ B(ft, { className: "w-4 h-4 text-foreground/60 hover:text-foreground transition-colors" })
 						})]
 					})]
 				}), /* @__PURE__ */ V("div", {
 					className: "flex flex-col gap-6 w-full relative z-10 items-start",
-					children: [a && /* @__PURE__ */ B("div", {
+					children: [o && /* @__PURE__ */ B("div", {
 						className: "absolute inset-0 bg-background/60 backdrop-blur-[2px] z-50 flex items-center justify-center rounded-3xl pointer-events-none transition-all duration-300",
 						children: /* @__PURE__ */ B(K, { className: "w-8 h-8 animate-spin text-accent" })
 					}), /* @__PURE__ */ V("div", {
@@ -86276,7 +86259,7 @@ export const themeConfig = {
 								}), rUn.map((e) => {
 									let n = t?.colors?.dark?.accent === e.dark.accent && t?.colors?.dark?.buttonGradient?.[0] === e.dark.gradient[0], r = e.name === "Black & White";
 									return /* @__PURE__ */ B("button", {
-										onClick: () => p(e),
+										onClick: () => g(e),
 										className: `w-9 h-9 rounded-full shrink-0 outline-none transition-all shadow-sm relative group overflow-visible ${n ? "ring-[3px] ring-foreground ring-offset-2 ring-offset-[var(--background)] scale-110 z-10" : "opacity-80 hover:opacity-100 hover:ring-2 hover:ring-foreground/30 hover:ring-offset-2 hover:ring-offset-[var(--background)] hover:scale-105"}`,
 										title: e.name,
 										children: /* @__PURE__ */ B("div", {

package/package.json

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

package/src/pages/Requests.tsx

@@ -121,10 +121,10 @@ export function Requests() {
           <DashboardNav />
         </div>
 
-        <div className="w-full flex-1 glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]">
+        <div className="w-full flex-1 flex flex-col glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]">
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent/5 blur-[100px] rounded-full pointer-events-none" />
 
-          <div className="relative z-10 h-full flex flex-col">
+          <div className="relative z-10 flex-1 flex flex-col">
             {loading ? (
               <div className="flex-1 flex items-center justify-center min-h-[500px]">
                 <div className="w-8 h-8 md:w-10 md:h-10 border-4 border-accent/20 border-t-accent rounded-full animate-spin" />

package/src/pages/StorageAdmin.tsx

@@ -389,10 +389,10 @@ export function StorageAdmin() {
       >
         <DashboardNav />
 
-        <div className="flex flex-col md:flex-row glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl min-h-[600px] bg-background">
+        <div className="flex flex-row glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl min-h-[600px] bg-background">
 
           {/* Sidebar Navigation */}
-          <div className="md:w-[280px] border-b md:border-b-0 md:border-r border-[var(--panel-border)] bg-foreground/[0.01] p-4 flex flex-col shrink-0 overflow-y-auto hide-scrollbar">
+          <div className="w-[280px] border-r border-[var(--panel-border)] bg-foreground/[0.01] p-4 flex flex-col shrink-0 overflow-y-auto hide-scrollbar">
             <div className="text-[11px] font-extrabold text-foreground/40 uppercase tracking-widest pl-4 mb-4 mt-2">Locations</div>
             <div className="flex flex-col gap-2">
               {visibleFolders.map(folder => (
@@ -603,7 +603,7 @@ export function StorageAdmin() {
                   <p className="text-[15px] font-bold text-foreground mb-1">Drag and drop file here</p>
                   <p className="text-[13px] text-foreground/50 font-medium mb-8">or click to browse local files</p>
                   <input type="file" ref={fileInputRef} onChange={handleSelectFile} className="hidden" />
-                  <Button onClick={() => fileInputRef.current?.click()} className="px-8 py-3 rounded-full font-bold shadow-md bg-accent text-white hover:bg-accent/90 transition-colors">Browse Files</Button>
+                  <Button onClick={() => fileInputRef.current?.click()} className="px-8 py-3 rounded-full font-bold shadow-md btn-primary transition-colors">Browse Files</Button>
                 </div>
               ) : (
                 <form onSubmit={handleSaveUpload} className="p-6 flex flex-col gap-6 relative z-10 rounded-b-[2rem]">
@@ -673,7 +673,7 @@ export function StorageAdmin() {
                         </button>
                       </>
                     )}
-                    <a href={previewFile.downloadURL} download target="_blank" rel="noreferrer" className="p-2.5 bg-accent text-white hover:bg-accent/90 transition-colors rounded-xl shadow-lg ml-1" title="Download">
+                    <a href={previewFile.downloadURL} download target="_blank" rel="noreferrer" className="p-2.5 btn-primary transition-colors rounded-xl shadow-lg ml-1" title="Download">
                       <Download className="w-4 h-4" />
                     </a>
                   </div>

package/src/pages/Submissions.tsx

@@ -119,10 +119,10 @@ export function Submissions() {
           <DashboardNav />
         </div>
 
-        <div className="w-full flex-1 glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]">
+        <div className="w-full flex-1 flex flex-col glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]">
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent/5 blur-[100px] rounded-full pointer-events-none" />
 
-          <div className="relative z-10 h-full flex flex-col">
+          <div className="relative z-10 flex-1 flex flex-col">
             {loading ? (
               <div className="flex-1 flex items-center justify-center min-h-[500px]">
                 <div className="w-8 h-8 md:w-10 md:h-10 border-4 border-accent/20 border-t-accent rounded-full animate-spin" />

package/src/pages/ThemeAdmin.tsx

@@ -85,19 +85,10 @@ if (db) {
 export const AutoResizeInput = ({ value, onChange, onBlur, onFocus, className, isNumber, handleBlurOrEnter, placeholder, disabled }: any) => {
   const [localVal, setLocalVal] = React.useState(value);
   const [isFocused, setIsFocused] = React.useState(false);
-  const [inputWidth, setInputWidth] = React.useState(0);
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const spanRef = React.useRef<HTMLSpanElement>(null);
   
   React.useEffect(() => { setLocalVal(value); }, [value]);
 
-  React.useLayoutEffect(() => {
-     if (spanRef.current) {
-        // Perfect hugging width.
-        setInputWidth(spanRef.current.getBoundingClientRect().width);
-     }
-  }, [localVal, placeholder]);
-
   // If text or link is pasted into quotes, make sure to always scroll to the left
   useEffect(() => {
      if (!isFocused && inputRef.current) {
@@ -112,12 +103,10 @@ export const AutoResizeInput = ({ value, onChange, onBlur, onFocus, className, i
   const inputCleanClass = spanClass.trim();
 
   return (
-    <div className={`relative inline-flex flex-col group/autoresize ${wrapperClasses}`}>
-      <div className="flex-1 overflow-x-auto overflow-y-hidden pb-[1px] styled-scrollbars-mini flex items-center">
+    <div className={`relative inline-grid group/autoresize ${wrapperClasses}`}>
+      <div className="col-start-1 row-start-1 overflow-x-auto overflow-y-hidden pb-[1px] styled-scrollbars-mini inline-grid items-center">
         <span 
-           ref={spanRef} 
-           className={`${spanClass} absolute opacity-0 pointer-events-none whitespace-pre border-none p-0 inline-block`}
-           style={{ width: 'max-content', minWidth: 'max-content' }}
+           className={`${spanClass} invisible whitespace-pre col-start-1 row-start-1 border-none p-0 inline-block px-[2px]`}
            aria-hidden="true"
         >
            {localVal || placeholder || (isNumber ? '0' : ' ')}
@@ -129,7 +118,7 @@ export const AutoResizeInput = ({ value, onChange, onBlur, onFocus, className, i
           value={localVal}
           placeholder={placeholder}
           spellCheck={false}
-          className={`${inputCleanClass} transition-all duration-200 ${disabled ? 'cursor-not-allowed opacity-50 select-none' : ''} ${isFocused ? 'relative z-50 bg-background shadow-md' : ''}`}
+          className={`${inputCleanClass} col-start-1 row-start-1 w-full min-w-[20px] transition-all duration-200 ${disabled ? 'cursor-not-allowed opacity-50 select-none' : ''} ${isFocused ? 'relative z-50 bg-background shadow-md' : ''}`}
           onDoubleClick={(e) => { if (!disabled) e.currentTarget.select(); }}
           onPaste={() => {
              setTimeout(() => {
@@ -162,11 +151,6 @@ export const AutoResizeInput = ({ value, onChange, onBlur, onFocus, className, i
              setIsFocused(true);
              if (onFocus) onFocus(e);
           }}
-          style={{ 
-             width: inputWidth > 0 ? `${inputWidth + 6}px` : 'auto', 
-             minWidth: '20px',
-             maxWidth: isFocused ? 'none' : undefined
-          }}
         />
       </div>
     </div>
@@ -442,8 +426,12 @@ export const JsonNode = ({ objectKey, displayKey, value, onChange, depth = 0, is
                         }
                     }
                 } else if (typeof arr[0] === 'string') {
-                    const genericServices = ['Marketing', 'Support', 'Analysis', 'Strategy', 'Maintenance'];
-                    clone = genericServices[Math.min(arr.length, genericServices.length) - 1] || `Option ${arr.length + 1}`;
+                    if (arr[0].startsWith('#') || arr[0].startsWith('rgba') || arr[0].startsWith('rgb') || arr[0].startsWith('color-mix')) {
+                        clone = arr[arr.length - 1]; // Duplicate last color
+                    } else {
+                        const genericServices = ['Marketing', 'Support', 'Analysis', 'Strategy', 'Maintenance'];
+                        clone = genericServices[Math.min(arr.length, genericServices.length) - 1] || `Option ${arr.length + 1}`;
+                    }
                 } else {
                    clone = arr.length > 0 ? JSON.parse(JSON.stringify(arr[arr.length - 1])) : '';
                    if (clone && typeof clone === 'object') {
@@ -600,43 +588,51 @@ export function ThemeAdmin() {
   const [localConfig, setLocalConfig] = useState<any>(null);
   const [isSaving, setIsSaving] = useState(false);
   const [isResetting, setIsResetting] = useState(false);
+  // Tracks the JSON of the last config we saved — prevents re-saving
+  // when Firestore echoes the snapshot back (which would cause an infinite loop).
+  const lastSavedRef = React.useRef<string | null>(null);
 
   useEffect(() => {
-    // Clone live config locally to edit
-    if (!localConfig) {
-      setLocalConfig(JSON.parse(JSON.stringify(activeConfig)));
+    // Clone live config locally on first load only
+    if (!localConfig && activeConfig) {
+      const cloned = JSON.parse(JSON.stringify(activeConfig));
+      setLocalConfig(cloned);
+      lastSavedRef.current = JSON.stringify(cloned);
     }
   }, [activeConfig]);
 
   const [copiedStatus, setCopiedStatus] = useState<boolean>(false);
   const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
 
-  // Auto-Save background processor (debounced 1s)
+  // Auto-Save: only fires when localConfig actually changes compared to
+  // what we last saved. Does NOT depend on activeConfig to avoid the
+  // Firestore snapshot echo loop.
   useEffect(() => {
-     if (!localConfig || !activeConfig) return;
-     if (JSON.stringify(localConfig) === JSON.stringify(activeConfig)) {
-        setIsSaving(false);
-        return;
-     }
+     if (!localConfig) return;
+     const serialized = JSON.stringify(localConfig);
+     if (serialized === lastSavedRef.current) return;
 
      const timer = setTimeout(async () => {
         setIsSaving(true);
         try {
           await setDoc(doc(db, 'sys_configs', 'theme'), localConfig);
+          lastSavedRef.current = serialized;
         } catch (err: any) {
           console.error("Auto-save failed", err);
         }
         setIsSaving(false);
      }, 300);
      return () => clearTimeout(timer);
-  }, [localConfig, activeConfig]);
+  }, [localConfig]);
 
   const resetToDefault = async () => {
     setIsResetting(true);
     try {
        const module = await import('../configs/theme.config');
+       const cloned = JSON.parse(JSON.stringify(module.themeConfig));
        await setDoc(doc(db, 'sys_configs', 'theme'), module.themeConfig);
-       setLocalConfig(JSON.parse(JSON.stringify(module.themeConfig)));
+       lastSavedRef.current = JSON.stringify(cloned);
+       setLocalConfig(cloned);
     } catch (e) {}
     setTimeout(() => {
        setIsResetting(false);
@@ -831,59 +827,6 @@ export const themeConfig = {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [localConfig]);
 
-  // Live real-time Preview engine mapping values to Document root
-  useEffect(() => {
-     if (!localConfig?.colors) return;
-     const docTheme = document.documentElement.getAttribute('data-theme') || 'dark';
-     const isDark = docTheme === 'dark';
-     const activeColors = isDark ? localConfig.colors.dark : localConfig.colors.light;
-     
-     const root = document.documentElement;
-     root.style.setProperty('--bg-color', activeColors.background);
-     if (activeColors.backgroundSecondary) root.style.setProperty('--bg-secondary-color', activeColors.backgroundSecondary);
-     root.style.setProperty('--fg-color', activeColors.foreground);
-     root.style.setProperty('--accent-color', activeColors.accent);
-     root.style.setProperty('--accent-deep', activeColors.accentDeep);
-     root.style.setProperty('--panel-bg', activeColors.panelBg);
-     root.style.setProperty('--panel-border', activeColors.panelBorder);
-     root.style.setProperty('--button-bg', `linear-gradient(135deg, ${activeColors.buttonGradient[0]} 0%, ${activeColors.buttonGradient[1]} 100%)`);
-     root.style.setProperty('--button-hover-bg', `linear-gradient(135deg, ${activeColors.buttonHoverGradient?.[0] || activeColors.buttonGradient[0]} 0%, ${activeColors.buttonHoverGradient?.[1] || activeColors.buttonGradient[1]} 100%)`);
-     root.style.setProperty('--text-gradient', `linear-gradient(135deg, ${activeColors.textGradient[0]} 0%, ${activeColors.textGradient[1]} 50%, ${activeColors.textGradient[2]} 100%)`);
-     root.style.setProperty('--glow-color', activeColors.glowColor || 'rgba(124, 58, 237, 0.3)');
-     root.style.setProperty('--button-fg', activeColors.buttonText || '#ffffff');
-     if (activeColors.notificationIconColor) {
-        root.style.setProperty('--notification-icon-color', activeColors.notificationIconColor);
-     }
-     
-  }, [localConfig]);
-
-  // Cleanup effect on unmount matching the DB config
-  useEffect(() => {
-     return () => {
-         // Reset styles by firing a custom event for ThemeContext to reload, or manually re-inject
-         if (!activeConfig?.colors) return;
-         const docTheme = document.documentElement.getAttribute('data-theme') || 'dark';
-         const isDark = docTheme === 'dark';
-         const c = isDark ? activeConfig.colors.dark : activeConfig.colors.light;
-         const root = document.documentElement;
-         root.style.setProperty('--bg-color', c.background);
-         if (c.backgroundSecondary) root.style.setProperty('--bg-secondary-color', c.backgroundSecondary);
-         root.style.setProperty('--fg-color', c.foreground);
-         root.style.setProperty('--accent-color', c.accent);
-         root.style.setProperty('--accent-deep', c.accentDeep);
-         root.style.setProperty('--panel-bg', c.panelBg);
-         root.style.setProperty('--panel-border', c.panelBorder);
-         root.style.setProperty('--button-bg', `linear-gradient(135deg, ${c.buttonGradient[0]} 0%, ${c.buttonGradient[1]} 100%)`);
-         root.style.setProperty('--button-hover-bg', `linear-gradient(135deg, ${c.buttonHoverGradient?.[0] || c.buttonGradient[0]} 0%, ${c.buttonHoverGradient?.[1] || c.buttonGradient[1]} 100%)`);
-         root.style.setProperty('--text-gradient', `linear-gradient(135deg, ${c.textGradient[0]} 0%, ${c.textGradient[1]} 50%, ${c.textGradient[2]} 100%)`);
-         root.style.setProperty('--glow-color', c.glowColor || 'rgba(124, 58, 237, 0.3)');
-         root.style.setProperty('--button-fg', c.buttonText || '#ffffff');
-         if (c.notificationIconColor) {
-            root.style.setProperty('--notification-icon-color', c.notificationIconColor);
-         }
-     };
-  }, [activeConfig]);
-
   return (
     <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">
       <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-6 flex items-center justify-between">