@burdenoff/microfe-bigconsole 2026.624.2 → 2026.625.1

package/dist/bigconsole/pages/SettingsPage.js

@@ -1,8 +1,9 @@
 import { memo as e, useCallback as t, useEffect as n, useState as r } from "react";
 import { RotateCcw as i, Save as a, Settings as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { AuroraBackground as s, EmphasisPanel as c, GradientText as l, PagePurpose as u } from "@burdenoff/fe-libs/ui";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/pages/SettingsPage.tsx
-var l = "bigconsole-settings", u = {
+var p = "bigconsole-settings", m = {
 	defaultRefreshInterval: 0,
 	defaultGridColumns: 12,
 	defaultWidgetHeight: 4,
@@ -12,37 +13,37 @@ var l = "bigconsole-settings", u = {
 	compactMode: !1,
 	animationsEnabled: !0
 };
-function d() {
+function h() {
 	try {
-		let e = localStorage.getItem(l);
+		let e = localStorage.getItem(p);
 		if (e) return {
-			...u,
+			...m,
 			...JSON.parse(e)
 		};
 	} catch {}
-	return { ...u };
+	return { ...m };
 }
-function f(e) {
-	localStorage.setItem(l, JSON.stringify(e));
+function g(e) {
+	localStorage.setItem(p, JSON.stringify(e));
 }
-var p = e(function() {
-	let [e, l] = r(d), [p, m] = r(!1);
+var _ = e(function() {
+	let [e, p] = r(h), [_, v] = r(!1);
 	n(() => {
-		if (p) {
-			let e = setTimeout(() => m(!1), 2e3);
+		if (_) {
+			let e = setTimeout(() => v(!1), 2e3);
 			return () => clearTimeout(e);
 		}
-	}, [p]);
-	let h = t((e, t) => {
-		l((n) => ({
+	}, [_]);
+	let y = t((e, t) => {
+		p((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), g = t(() => {
-		f(e), m(!0);
-	}, [e]), _ = t(() => {
-		l({ ...u }), f(u), m(!0);
-	}, []), v = {
+	}, []), b = t(() => {
+		g(e), v(!0);
+	}, [e]), x = t(() => {
+		p({ ...m }), g(m), v(!0);
+	}, []), S = {
 		width: "100%",
 		padding: "8px 12px",
 		borderRadius: "var(--radius-button)",
@@ -51,113 +52,125 @@ var p = e(function() {
 		color: "var(--color-text-primary)",
 		fontSize: "var(--font-size-body-sm)",
 		outline: "none"
-	}, y = {
+	}, C = {
 		display: "block",
 		fontSize: "var(--font-size-body-sm)",
 		fontWeight: "var(--font-weight-medium)",
 		color: "var(--color-text-primary)",
 		marginBottom: 4
-	}, b = {
+	}, w = {
 		fontSize: 11,
 		color: "var(--color-text-muted)",
 		marginTop: 4
-	}, x = {
+	}, T = {
 		backgroundColor: "var(--color-bg-surface)",
-		border: "1px solid var(--color-border)",
+		border: "1px solid var(--color-border-seam)",
 		borderRadius: "var(--radius-card)",
 		padding: "var(--space-cardPadding)",
-		marginBottom: "var(--space-sectionGap)"
+		marginBottom: "var(--space-sectionGap)",
+		boxShadow: "var(--shadow-pop)"
 	};
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ d("div", {
 		style: {
 			minHeight: "100vh",
 			backgroundColor: "var(--color-bg-canvas)"
 		},
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ f("div", {
 			style: {
 				padding: "var(--space-pagePadding)",
 				maxWidth: 720,
 				margin: "0 auto"
 			},
 			children: [
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ f("div", {
+					className: "relative overflow-hidden rounded-card border border-border-seam bg-gloss-card p-6",
 					style: {
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
-						marginBottom: "var(--space-sectionGap)"
+						marginBottom: "var(--space-sectionGap)",
+						flexWrap: "wrap",
+						gap: "var(--space-formGap)"
 					},
-					children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: "var(--space-iconGap)"
-						},
-						children: [/* @__PURE__ */ s(o, {
-							size: 24,
-							style: { color: "var(--color-text-primary)" }
-						}), /* @__PURE__ */ s("h1", {
-							style: {
-								fontSize: "var(--font-size-heading-h4)",
-								fontWeight: "var(--font-weight-bold)",
-								color: "var(--color-text-primary)"
-							},
-							children: "Settings"
-						})]
-					}), /* @__PURE__ */ s("p", {
-						style: {
-							fontSize: "var(--font-size-body-md)",
-							color: "var(--color-text-secondary)",
-							marginTop: 4
-						},
-						children: "Configure BigConsole preferences"
-					})] }), /* @__PURE__ */ c("div", {
-						style: {
-							display: "flex",
-							gap: 8
-						},
-						children: [/* @__PURE__ */ c("button", {
-							onClick: _,
+					children: [
+						/* @__PURE__ */ d(s, { intensity: "subtle" }),
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
-								gap: 6,
-								padding: "8px 12px",
-								borderRadius: "var(--radius-button)",
-								border: "1px solid var(--color-border)",
-								backgroundColor: "transparent",
+								gap: "var(--space-iconGap)"
+							},
+							children: [/* @__PURE__ */ d(o, {
+								size: 24,
+								style: { color: "var(--color-text-primary)" }
+							}), /* @__PURE__ */ d("h1", {
+								style: {
+									fontSize: "var(--font-size-heading-h4)",
+									fontWeight: "var(--font-weight-bold)",
+									color: "var(--color-text-primary)"
+								},
+								children: /* @__PURE__ */ d(l, { children: "Settings" })
+							})]
+						}), /* @__PURE__ */ d("p", {
+							style: {
+								fontSize: "var(--font-size-body-md)",
 								color: "var(--color-text-secondary)",
-								fontSize: "var(--font-size-body-sm)",
-								cursor: "pointer"
+								marginTop: 4
 							},
-							children: [/* @__PURE__ */ s(i, { size: 14 }), " Reset"]
-						}), /* @__PURE__ */ c("button", {
-							onClick: g,
+							children: "Configure BigConsole preferences"
+						})] }),
+						/* @__PURE__ */ f("div", {
 							style: {
 								display: "flex",
-								alignItems: "center",
-								gap: 6,
-								padding: "8px 16px",
-								borderRadius: "var(--radius-button)",
-								backgroundColor: p ? "#22c55e" : "var(--color-action-primary-bg)",
-								color: "var(--color-action-primary-text)",
-								fontWeight: "var(--font-weight-medium)",
-								fontSize: "var(--font-size-body-sm)",
-								border: "none",
-								cursor: "pointer",
-								transition: "background-color 200ms"
+								gap: 8
 							},
-							children: [
-								/* @__PURE__ */ s(a, { size: 14 }),
-								" ",
-								p ? "Saved" : "Save"
-							]
-						})]
-					})]
+							children: [/* @__PURE__ */ f("button", {
+								onClick: x,
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 6,
+									padding: "8px 12px",
+									borderRadius: "var(--radius-button)",
+									border: "1px solid var(--color-border)",
+									backgroundColor: "transparent",
+									color: "var(--color-text-secondary)",
+									fontSize: "var(--font-size-body-sm)",
+									cursor: "pointer"
+								},
+								children: [/* @__PURE__ */ d(i, { size: 14 }), " Reset"]
+							}), /* @__PURE__ */ f("button", {
+								onClick: b,
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 6,
+									padding: "8px 16px",
+									borderRadius: "var(--radius-button)",
+									backgroundColor: _ ? "var(--color-status-success-bg)" : "var(--color-action-primary-bg)",
+									color: "var(--color-action-primary-text)",
+									fontWeight: "var(--font-weight-medium)",
+									fontSize: "var(--font-size-body-sm)",
+									border: "none",
+									cursor: "pointer",
+									transition: "background-color 200ms"
+								},
+								children: [
+									/* @__PURE__ */ d(a, { size: 14 }),
+									" ",
+									_ ? "Saved" : "Save"
+								]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ d(u, {
+					className: "mb-[var(--space-sectionGap)]",
+					children: "Settings control the defaults BigConsole applies everywhere — how new dashboards are laid out, how aggressively widget data is cached, and how the UI is displayed. Tune these once to match how your team works; they apply across every dashboard you build."
 				}),
-				/* @__PURE__ */ c("div", {
-					style: x,
-					children: [/* @__PURE__ */ s("h2", {
+				/* @__PURE__ */ f(c, {
+					className: "mb-[var(--space-sectionGap)] p-[var(--space-cardPadding)]",
+					children: [/* @__PURE__ */ d("h2", {
 						style: {
 							fontSize: "var(--font-size-body-md)",
 							fontWeight: "var(--font-weight-semibold)",
@@ -165,101 +178,101 @@ var p = e(function() {
 							marginBottom: 16
 						},
 						children: "Dashboard Defaults"
-					}), /* @__PURE__ */ c("div", {
+					}), /* @__PURE__ */ f("div", {
 						style: {
 							display: "grid",
 							gap: 16
 						},
 						children: [
-							/* @__PURE__ */ c("div", { children: [
-								/* @__PURE__ */ s("label", {
+							/* @__PURE__ */ f("div", { children: [
+								/* @__PURE__ */ d("label", {
 									htmlFor: "grid-cols",
-									style: y,
+									style: C,
 									children: "Grid Columns"
 								}),
-								/* @__PURE__ */ s("input", {
+								/* @__PURE__ */ d("input", {
 									id: "grid-cols",
 									type: "number",
 									min: 4,
 									max: 24,
 									value: e.defaultGridColumns,
-									onChange: (e) => h("defaultGridColumns", parseInt(e.target.value) || 12),
-									style: v
+									onChange: (e) => y("defaultGridColumns", parseInt(e.target.value) || 12),
+									style: S
 								}),
-								/* @__PURE__ */ s("p", {
-									style: b,
+								/* @__PURE__ */ d("p", {
+									style: w,
 									children: "Number of columns in the dashboard grid (4-24)"
 								})
 							] }),
-							/* @__PURE__ */ c("div", { children: [
-								/* @__PURE__ */ s("label", {
+							/* @__PURE__ */ f("div", { children: [
+								/* @__PURE__ */ d("label", {
 									htmlFor: "widget-height",
-									style: y,
+									style: C,
 									children: "Default Widget Height"
 								}),
-								/* @__PURE__ */ s("input", {
+								/* @__PURE__ */ d("input", {
 									id: "widget-height",
 									type: "number",
 									min: 2,
 									max: 12,
 									value: e.defaultWidgetHeight,
-									onChange: (e) => h("defaultWidgetHeight", parseInt(e.target.value) || 4),
-									style: v
+									onChange: (e) => y("defaultWidgetHeight", parseInt(e.target.value) || 4),
+									style: S
 								}),
-								/* @__PURE__ */ s("p", {
-									style: b,
+								/* @__PURE__ */ d("p", {
+									style: w,
 									children: "Default height units for new widgets (2-12)"
 								})
 							] }),
-							/* @__PURE__ */ c("div", { children: [
-								/* @__PURE__ */ s("label", {
+							/* @__PURE__ */ f("div", { children: [
+								/* @__PURE__ */ d("label", {
 									htmlFor: "refresh-interval",
-									style: y,
+									style: C,
 									children: "Auto-Refresh Interval (seconds)"
 								}),
-								/* @__PURE__ */ c("select", {
+								/* @__PURE__ */ f("select", {
 									id: "refresh-interval",
 									value: e.defaultRefreshInterval,
-									onChange: (e) => h("defaultRefreshInterval", parseInt(e.target.value)),
-									style: v,
+									onChange: (e) => y("defaultRefreshInterval", parseInt(e.target.value)),
+									style: S,
 									children: [
-										/* @__PURE__ */ s("option", {
+										/* @__PURE__ */ d("option", {
 											value: 0,
 											children: "Disabled"
 										}),
-										/* @__PURE__ */ s("option", {
+										/* @__PURE__ */ d("option", {
 											value: 10,
 											children: "10 seconds"
 										}),
-										/* @__PURE__ */ s("option", {
+										/* @__PURE__ */ d("option", {
 											value: 30,
 											children: "30 seconds"
 										}),
-										/* @__PURE__ */ s("option", {
+										/* @__PURE__ */ d("option", {
 											value: 60,
 											children: "1 minute"
 										}),
-										/* @__PURE__ */ s("option", {
+										/* @__PURE__ */ d("option", {
 											value: 300,
 											children: "5 minutes"
 										}),
-										/* @__PURE__ */ s("option", {
+										/* @__PURE__ */ d("option", {
 											value: 600,
 											children: "10 minutes"
 										})
 									]
 								}),
-								/* @__PURE__ */ s("p", {
-									style: b,
+								/* @__PURE__ */ d("p", {
+									style: w,
 									children: "How often widgets refresh their data automatically"
 								})
 							] })
 						]
 					})]
 				}),
-				/* @__PURE__ */ c("div", {
-					style: x,
-					children: [/* @__PURE__ */ s("h2", {
+				/* @__PURE__ */ f("div", {
+					style: T,
+					children: [/* @__PURE__ */ d("h2", {
 						style: {
 							fontSize: "var(--font-size-body-md)",
 							fontWeight: "var(--font-weight-semibold)",
@@ -267,25 +280,25 @@ var p = e(function() {
 							marginBottom: 16
 						},
 						children: "Cache"
-					}), /* @__PURE__ */ c("div", {
+					}), /* @__PURE__ */ f("div", {
 						style: {
 							display: "grid",
 							gap: 16
 						},
-						children: [/* @__PURE__ */ c("div", {
+						children: [/* @__PURE__ */ f("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								justifyContent: "space-between"
 							},
-							children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-								style: y,
+							children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+								style: C,
 								children: "Enable Cache"
-							}), /* @__PURE__ */ s("p", {
-								style: b,
+							}), /* @__PURE__ */ d("p", {
+								style: w,
 								children: "Cache widget data to reduce API calls"
-							})] }), /* @__PURE__ */ s("button", {
-								onClick: () => h("cacheEnabled", !e.cacheEnabled),
+							})] }), /* @__PURE__ */ d("button", {
+								onClick: () => y("cacheEnabled", !e.cacheEnabled),
 								role: "switch",
 								"aria-checked": e.cacheEnabled,
 								"aria-label": "Enable cache",
@@ -299,7 +312,7 @@ var p = e(function() {
 									position: "relative",
 									transition: "background-color 200ms"
 								},
-								children: /* @__PURE__ */ s("div", { style: {
+								children: /* @__PURE__ */ d("div", { style: {
 									width: 18,
 									height: 18,
 									borderRadius: "50%",
@@ -310,31 +323,31 @@ var p = e(function() {
 									transition: "left 200ms"
 								} })
 							})]
-						}), e.cacheEnabled && /* @__PURE__ */ c("div", { children: [
-							/* @__PURE__ */ s("label", {
+						}), e.cacheEnabled && /* @__PURE__ */ f("div", { children: [
+							/* @__PURE__ */ d("label", {
 								htmlFor: "cache-ttl",
-								style: y,
+								style: C,
 								children: "Cache TTL (seconds)"
 							}),
-							/* @__PURE__ */ s("input", {
+							/* @__PURE__ */ d("input", {
 								id: "cache-ttl",
 								type: "number",
 								min: 30,
 								max: 3600,
 								value: e.cacheTTLSeconds,
-								onChange: (e) => h("cacheTTLSeconds", parseInt(e.target.value) || 300),
-								style: v
+								onChange: (e) => y("cacheTTLSeconds", parseInt(e.target.value) || 300),
+								style: S
 							}),
-							/* @__PURE__ */ s("p", {
-								style: b,
+							/* @__PURE__ */ d("p", {
+								style: w,
 								children: "How long cached data is considered fresh (30-3600)"
 							})
 						] })]
 					})]
 				}),
-				/* @__PURE__ */ c("div", {
-					style: x,
-					children: [/* @__PURE__ */ s("h2", {
+				/* @__PURE__ */ f("div", {
+					style: T,
+					children: [/* @__PURE__ */ d("h2", {
 						style: {
 							fontSize: "var(--font-size-body-md)",
 							fontWeight: "var(--font-weight-semibold)",
@@ -342,26 +355,26 @@ var p = e(function() {
 							marginBottom: 16
 						},
 						children: "Display"
-					}), /* @__PURE__ */ c("div", {
+					}), /* @__PURE__ */ f("div", {
 						style: {
 							display: "grid",
 							gap: 16
 						},
 						children: [
-							/* @__PURE__ */ c("div", {
+							/* @__PURE__ */ f("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									justifyContent: "space-between"
 								},
-								children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-									style: y,
+								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+									style: C,
 									children: "Show Widget Borders"
-								}), /* @__PURE__ */ s("p", {
-									style: b,
+								}), /* @__PURE__ */ d("p", {
+									style: w,
 									children: "Display borders around widgets in dashboards"
-								})] }), /* @__PURE__ */ s("button", {
-									onClick: () => h("showWidgetBorders", !e.showWidgetBorders),
+								})] }), /* @__PURE__ */ d("button", {
+									onClick: () => y("showWidgetBorders", !e.showWidgetBorders),
 									role: "switch",
 									"aria-checked": e.showWidgetBorders,
 									"aria-label": "Show widget borders",
@@ -375,7 +388,7 @@ var p = e(function() {
 										position: "relative",
 										transition: "background-color 200ms"
 									},
-									children: /* @__PURE__ */ s("div", { style: {
+									children: /* @__PURE__ */ d("div", { style: {
 										width: 18,
 										height: 18,
 										borderRadius: "50%",
@@ -387,20 +400,20 @@ var p = e(function() {
 									} })
 								})]
 							}),
-							/* @__PURE__ */ c("div", {
+							/* @__PURE__ */ f("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									justifyContent: "space-between"
 								},
-								children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-									style: y,
+								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+									style: C,
 									children: "Compact Mode"
-								}), /* @__PURE__ */ s("p", {
-									style: b,
+								}), /* @__PURE__ */ d("p", {
+									style: w,
 									children: "Reduce padding and spacing for more content"
-								})] }), /* @__PURE__ */ s("button", {
-									onClick: () => h("compactMode", !e.compactMode),
+								})] }), /* @__PURE__ */ d("button", {
+									onClick: () => y("compactMode", !e.compactMode),
 									role: "switch",
 									"aria-checked": e.compactMode,
 									"aria-label": "Compact mode",
@@ -414,7 +427,7 @@ var p = e(function() {
 										position: "relative",
 										transition: "background-color 200ms"
 									},
-									children: /* @__PURE__ */ s("div", { style: {
+									children: /* @__PURE__ */ d("div", { style: {
 										width: 18,
 										height: 18,
 										borderRadius: "50%",
@@ -426,20 +439,20 @@ var p = e(function() {
 									} })
 								})]
 							}),
-							/* @__PURE__ */ c("div", {
+							/* @__PURE__ */ f("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									justifyContent: "space-between"
 								},
-								children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-									style: y,
+								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+									style: C,
 									children: "Animations"
-								}), /* @__PURE__ */ s("p", {
-									style: b,
+								}), /* @__PURE__ */ d("p", {
+									style: w,
 									children: "Enable transition animations and effects"
-								})] }), /* @__PURE__ */ s("button", {
-									onClick: () => h("animationsEnabled", !e.animationsEnabled),
+								})] }), /* @__PURE__ */ d("button", {
+									onClick: () => y("animationsEnabled", !e.animationsEnabled),
 									role: "switch",
 									"aria-checked": e.animationsEnabled,
 									"aria-label": "Animations",
@@ -453,7 +466,7 @@ var p = e(function() {
 										position: "relative",
 										transition: "background-color 200ms"
 									},
-									children: /* @__PURE__ */ s("div", { style: {
+									children: /* @__PURE__ */ d("div", { style: {
 										width: 18,
 										height: 18,
 										borderRadius: "50%",
@@ -473,6 +486,6 @@ var p = e(function() {
 	});
 });
 //#endregion
-export { p as SettingsPage, p as default };
+export { _ as SettingsPage, _ as default };
 
 //# sourceMappingURL=SettingsPage.js.map