@burdenoff/microfe-bigconsole 2026.1004.3 → 2026.1004.5

package/dist/bigconsole/pages/SettingsPage.js

@@ -1,69 +1,49 @@
-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 { 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";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { DEFAULT_SETTINGS as e, loadBigConsoleSettings as t, saveBigConsoleSettings as n } from "../hooks/useBigConsoleSettings.js";
+import { memo as r, useCallback as i, useEffect as a, useState as o } from "react";
+import { RotateCcw as s, Save as c, Settings as l } from "lucide-react";
+import { AuroraBackground as u, EmphasisPanel as d, GradientText as f, PagePurpose as p } from "@burdenoff/fe-libs/ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useI18n as g } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/pages/SettingsPage.tsx
-var m = "bigconsole-settings", h = {
-	defaultRefreshInterval: 0,
-	defaultGridColumns: 12,
-	defaultWidgetHeight: 4,
-	cacheEnabled: !0,
-	cacheTTLSeconds: 300,
-	showWidgetBorders: !0,
-	compactMode: !1,
-	animationsEnabled: !0
-};
-function g() {
-	try {
-		let e = localStorage.getItem(m);
-		if (e) return {
-			...h,
-			...JSON.parse(e)
-		};
-	} catch {}
-	return { ...h };
-}
-function _(e) {
-	localStorage.setItem(m, JSON.stringify(e));
-}
-var v = e(function() {
-	let { t: e } = p(), [m, v] = r(g), [y, b] = r(!1);
-	n(() => {
+var _ = r(function() {
+	let { t: r } = g(), [_, v] = o(t), [y, b] = o(!1), [x, S] = o(!1);
+	a(() => {
 		if (y) {
 			let e = setTimeout(() => b(!1), 2e3);
 			return () => clearTimeout(e);
 		}
 	}, [y]);
-	let x = t((e, t) => {
+	let C = i((e, t) => {
 		v((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), S = t(() => {
-		_(m), b(!0);
-	}, [m]), C = t(() => {
-		v({ ...h }), _(h), b(!0);
-	}, []), w = {
+	}, []), w = i(() => {
+		let e = n(_);
+		b(e), S(!e);
+	}, [_]), T = i(() => {
+		v({ ...e });
+		let t = n(e);
+		b(t), S(!t);
+	}, []), E = {
 		width: "100%",
 		padding: "8px 12px",
 		borderRadius: "var(--radius-button)",
 		border: "1px solid var(--color-border)",
 		backgroundColor: "var(--color-bg-canvas)",
 		color: "var(--color-text-primary)",
-		fontSize: "var(--font-size-body-sm)",
-		outline: "none"
-	}, T = {
+		fontSize: "var(--font-size-body-sm)"
+	}, D = {
 		display: "block",
 		fontSize: "var(--font-size-body-sm)",
 		fontWeight: "var(--font-weight-medium)",
 		color: "var(--color-text-primary)",
 		marginBottom: 4
-	}, E = {
-		fontSize: 11,
+	}, O = {
+		fontSize: "var(--font-size-body-sm)",
 		color: "var(--color-text-muted)",
 		marginTop: 4
-	}, D = {
+	}, k = {
 		backgroundColor: "var(--color-bg-surface)",
 		border: "1px solid var(--color-border-seam)",
 		borderRadius: "var(--radius-card)",
@@ -71,19 +51,19 @@ var v = e(function() {
 		marginBottom: "var(--space-sectionGap)",
 		boxShadow: "var(--shadow-pop)"
 	};
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ m("div", {
 		style: {
 			minHeight: "100vh",
 			backgroundColor: "var(--color-bg-canvas)"
 		},
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ h("div", {
 			style: {
 				padding: "var(--space-pagePadding)",
-				maxWidth: 720,
+				maxWidth: 1440,
 				margin: "0 auto"
 			},
 			children: [
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ h("div", {
 					className: "relative overflow-hidden rounded-card border border-border-seam bg-gloss-card p-6",
 					style: {
 						display: "flex",
@@ -94,39 +74,39 @@ var v = e(function() {
 						gap: "var(--space-formGap)"
 					},
 					children: [
-						/* @__PURE__ */ d(s, { intensity: "subtle" }),
-						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ f("div", {
+						/* @__PURE__ */ m(u, { intensity: "subtle" }),
+						/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: "var(--space-iconGap)"
 							},
-							children: [/* @__PURE__ */ d(o, {
+							children: [/* @__PURE__ */ m(l, {
 								size: 24,
 								style: { color: "var(--color-text-primary)" }
-							}), /* @__PURE__ */ d("h1", {
+							}), /* @__PURE__ */ m("h1", {
 								style: {
 									fontSize: "var(--font-size-heading-h4)",
 									fontWeight: "var(--font-weight-bold)",
 									color: "var(--color-text-primary)"
 								},
-								children: /* @__PURE__ */ d(l, { children: e("bigconsole.settings.header.title", "Settings") })
+								children: /* @__PURE__ */ m(f, { children: r("bigconsole.settings.header.title", "Settings") })
 							})]
-						}), /* @__PURE__ */ d("p", {
+						}), /* @__PURE__ */ m("p", {
 							style: {
 								fontSize: "var(--font-size-body-md)",
 								color: "var(--color-text-secondary)",
 								marginTop: 4
 							},
-							children: e("bigconsole.settings.header.subtitle", "Configure BigConsole preferences")
+							children: r("bigconsole.settings.header.subtitle", "Configure BigConsole preferences")
 						})] }),
-						/* @__PURE__ */ f("div", {
+						/* @__PURE__ */ h("div", {
 							style: {
 								display: "flex",
 								gap: 8
 							},
-							children: [/* @__PURE__ */ f("button", {
-								onClick: C,
+							children: [/* @__PURE__ */ h("button", {
+								onClick: T,
 								style: {
 									display: "flex",
 									alignItems: "center",
@@ -140,12 +120,12 @@ var v = e(function() {
 									cursor: "pointer"
 								},
 								children: [
-									/* @__PURE__ */ d(i, { size: 14 }),
+									/* @__PURE__ */ m(s, { size: 14 }),
 									" ",
-									e("bigconsole.settings.actions.reset", "Reset")
+									r("bigconsole.settings.actions.reset", "Reset")
 								]
-							}), /* @__PURE__ */ f("button", {
-								onClick: S,
+							}), /* @__PURE__ */ h("button", {
+								onClick: w,
 								style: {
 									display: "flex",
 									alignItems: "center",
@@ -161,324 +141,324 @@ var v = e(function() {
 									transition: "background-color 200ms"
 								},
 								children: [
-									/* @__PURE__ */ d(a, { size: 14 }),
+									/* @__PURE__ */ m(c, { size: 14 }),
 									" ",
-									y ? e("bigconsole.settings.actions.savedLocally", "Saved locally") : e("bigconsole.settings.actions.saveLocally", "Save locally")
+									y ? r("bigconsole.settings.actions.savedLocally", "Saved locally") : r("bigconsole.settings.actions.saveLocally", "Save locally")
 								]
 							})]
 						})
 					]
 				}),
-				/* @__PURE__ */ d(u, {
+				x && /* @__PURE__ */ m("p", {
+					role: "alert",
+					className: "mb-form-gap text-status-error-text",
+					children: r("bigconsole.settings.actions.saveError", "Your browser could not save these preferences. Try again.")
+				}),
+				/* @__PURE__ */ m(p, {
 					className: "mb-[var(--space-sectionGap)]",
-					children: e("bigconsole.settings.purpose", "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. These preferences are saved locally in this browser until the backend settings API is available.")
+					children: r("bigconsole.settings.localDefaultsPurpose", "These browser-local defaults apply when you add dashboard pages, widgets and data sinks. Display preferences update existing widgets in this browser. They do not change existing page layouts, widget refresh schedules or data sink cache settings, and are not shared with your team.")
 				}),
-				/* @__PURE__ */ f(c, {
+				/* @__PURE__ */ h(d, {
 					className: "mb-[var(--space-sectionGap)] p-[var(--space-cardPadding)]",
-					children: [/* @__PURE__ */ d("h2", {
+					children: [/* @__PURE__ */ m("h2", {
 						style: {
 							fontSize: "var(--font-size-body-md)",
 							fontWeight: "var(--font-weight-semibold)",
 							color: "var(--color-text-primary)",
 							marginBottom: 16
 						},
-						children: e("bigconsole.settings.dashboardDefaults.title", "Dashboard Defaults")
-					}), /* @__PURE__ */ f("div", {
-						style: {
-							display: "grid",
-							gap: 16
-						},
+						children: r("bigconsole.settings.dashboardDefaults.title", "Dashboard Defaults")
+					}), /* @__PURE__ */ h("div", {
+						className: "grid gap-form-gap md:grid-cols-3",
 						children: [
-							/* @__PURE__ */ f("div", { children: [
-								/* @__PURE__ */ d("label", {
+							/* @__PURE__ */ h("div", { children: [
+								/* @__PURE__ */ m("label", {
 									htmlFor: "grid-cols",
-									style: T,
-									children: e("bigconsole.settings.dashboardDefaults.gridColumns.label", "Grid Columns")
+									style: D,
+									children: r("bigconsole.settings.dashboardDefaults.gridColumns.label", "Grid Columns")
 								}),
-								/* @__PURE__ */ d("input", {
+								/* @__PURE__ */ m("input", {
 									id: "grid-cols",
 									type: "number",
 									min: 4,
 									max: 24,
-									value: m.defaultGridColumns,
-									onChange: (e) => x("defaultGridColumns", parseInt(e.target.value) || 12),
-									style: w
+									value: _.defaultGridColumns,
+									onChange: (e) => C("defaultGridColumns", Math.min(24, Math.max(4, Number(e.target.value) || 12))),
+									style: E
 								}),
-								/* @__PURE__ */ d("p", {
-									style: E,
-									children: e("bigconsole.settings.dashboardDefaults.gridColumns.help", "Number of columns in the dashboard grid (4-24)")
+								/* @__PURE__ */ m("p", {
+									style: O,
+									children: r("bigconsole.settings.dashboardDefaults.gridColumns.help", "Number of columns in the dashboard grid (4-24)")
 								})
 							] }),
-							/* @__PURE__ */ f("div", { children: [
-								/* @__PURE__ */ d("label", {
+							/* @__PURE__ */ h("div", { children: [
+								/* @__PURE__ */ m("label", {
 									htmlFor: "widget-height",
-									style: T,
-									children: e("bigconsole.settings.dashboardDefaults.widgetHeight.label", "Default Widget Height")
+									style: D,
+									children: r("bigconsole.settings.dashboardDefaults.widgetHeight.label", "Default Widget Height")
 								}),
-								/* @__PURE__ */ d("input", {
+								/* @__PURE__ */ m("input", {
 									id: "widget-height",
 									type: "number",
 									min: 2,
 									max: 12,
-									value: m.defaultWidgetHeight,
-									onChange: (e) => x("defaultWidgetHeight", parseInt(e.target.value) || 4),
-									style: w
+									value: _.defaultWidgetHeight,
+									onChange: (e) => C("defaultWidgetHeight", Math.min(12, Math.max(1, Number(e.target.value) || 4))),
+									style: E
 								}),
-								/* @__PURE__ */ d("p", {
-									style: E,
-									children: e("bigconsole.settings.dashboardDefaults.widgetHeight.help", "Default height units for new widgets (2-12)")
+								/* @__PURE__ */ m("p", {
+									style: O,
+									children: r("bigconsole.settings.dashboardDefaults.widgetHeight.help", "Default height units for new widgets (2-12)")
 								})
 							] }),
-							/* @__PURE__ */ f("div", { children: [
-								/* @__PURE__ */ d("label", {
+							/* @__PURE__ */ h("div", { children: [
+								/* @__PURE__ */ m("label", {
 									htmlFor: "refresh-interval",
-									style: T,
-									children: e("bigconsole.settings.dashboardDefaults.refreshInterval.label", "Auto-Refresh Interval (seconds)")
+									style: D,
+									children: r("bigconsole.settings.dashboardDefaults.refreshInterval.label", "Auto-Refresh Interval (seconds)")
 								}),
-								/* @__PURE__ */ f("select", {
+								/* @__PURE__ */ h("select", {
 									id: "refresh-interval",
-									value: m.defaultRefreshInterval,
-									onChange: (e) => x("defaultRefreshInterval", parseInt(e.target.value)),
-									style: w,
+									value: _.defaultRefreshInterval,
+									onChange: (e) => C("defaultRefreshInterval", parseInt(e.target.value)),
+									style: E,
 									children: [
-										/* @__PURE__ */ d("option", {
+										/* @__PURE__ */ m("option", {
 											value: 0,
-											children: e("bigconsole.settings.dashboardDefaults.refreshInterval.disabled", "Disabled")
+											children: r("bigconsole.settings.dashboardDefaults.refreshInterval.disabled", "Disabled")
 										}),
-										/* @__PURE__ */ d("option", {
+										/* @__PURE__ */ m("option", {
 											value: 10,
-											children: e("bigconsole.settings.dashboardDefaults.refreshInterval.seconds10", "10 seconds")
+											children: r("bigconsole.settings.dashboardDefaults.refreshInterval.seconds10", "10 seconds")
 										}),
-										/* @__PURE__ */ d("option", {
+										/* @__PURE__ */ m("option", {
 											value: 30,
-											children: e("bigconsole.settings.dashboardDefaults.refreshInterval.seconds30", "30 seconds")
+											children: r("bigconsole.settings.dashboardDefaults.refreshInterval.seconds30", "30 seconds")
 										}),
-										/* @__PURE__ */ d("option", {
+										/* @__PURE__ */ m("option", {
 											value: 60,
-											children: e("bigconsole.settings.dashboardDefaults.refreshInterval.minute1", "1 minute")
+											children: r("bigconsole.settings.dashboardDefaults.refreshInterval.minute1", "1 minute")
 										}),
-										/* @__PURE__ */ d("option", {
+										/* @__PURE__ */ m("option", {
 											value: 300,
-											children: e("bigconsole.settings.dashboardDefaults.refreshInterval.minutes5", "5 minutes")
+											children: r("bigconsole.settings.dashboardDefaults.refreshInterval.minutes5", "5 minutes")
 										}),
-										/* @__PURE__ */ d("option", {
+										/* @__PURE__ */ m("option", {
 											value: 600,
-											children: e("bigconsole.settings.dashboardDefaults.refreshInterval.minutes10", "10 minutes")
+											children: r("bigconsole.settings.dashboardDefaults.refreshInterval.minutes10", "10 minutes")
 										})
 									]
 								}),
-								/* @__PURE__ */ d("p", {
-									style: E,
-									children: e("bigconsole.settings.dashboardDefaults.refreshInterval.help", "How often widgets refresh their data automatically")
+								/* @__PURE__ */ m("p", {
+									style: O,
+									children: r("bigconsole.settings.dashboardDefaults.refreshInterval.help", "How often widgets refresh their data automatically")
 								})
 							] })
 						]
 					})]
 				}),
-				/* @__PURE__ */ f("div", {
-					style: D,
-					children: [/* @__PURE__ */ d("h2", {
+				/* @__PURE__ */ h("div", {
+					style: k,
+					children: [/* @__PURE__ */ m("h2", {
 						style: {
 							fontSize: "var(--font-size-body-md)",
 							fontWeight: "var(--font-weight-semibold)",
 							color: "var(--color-text-primary)",
 							marginBottom: 16
 						},
-						children: e("bigconsole.settings.cache.title", "Cache")
-					}), /* @__PURE__ */ f("div", {
-						style: {
-							display: "grid",
-							gap: 16
-						},
-						children: [/* @__PURE__ */ f("div", {
+						children: r("bigconsole.settings.cache.title", "Cache")
+					}), /* @__PURE__ */ h("div", {
+						className: "grid gap-form-gap md:grid-cols-2",
+						children: [/* @__PURE__ */ h("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								justifyContent: "space-between"
 							},
-							children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
-								style: T,
-								children: e("bigconsole.settings.cache.enable.label", "Enable Cache")
-							}), /* @__PURE__ */ d("p", {
-								style: E,
-								children: e("bigconsole.settings.cache.enable.help", "Cache widget data to reduce API calls")
-							})] }), /* @__PURE__ */ d("button", {
-								onClick: () => x("cacheEnabled", !m.cacheEnabled),
+							children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+								style: D,
+								children: r("bigconsole.settings.cache.enable.label", "Enable Cache")
+							}), /* @__PURE__ */ m("p", {
+								style: O,
+								children: r("bigconsole.settings.cache.newSinkHelp", "Enable caching by default for new data sinks")
+							})] }), /* @__PURE__ */ m("button", {
+								onClick: () => C("cacheEnabled", !_.cacheEnabled),
 								role: "switch",
-								"aria-checked": m.cacheEnabled,
-								"aria-label": e("bigconsole.settings.cache.enable.label", "Enable Cache"),
+								"aria-checked": _.cacheEnabled,
+								"aria-label": r("bigconsole.settings.cache.enable.label", "Enable Cache"),
 								style: {
 									width: 44,
+									flexShrink: 0,
 									height: 24,
 									borderRadius: 12,
-									backgroundColor: m.cacheEnabled ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
+									backgroundColor: _.cacheEnabled ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
 									border: "none",
 									cursor: "pointer",
 									position: "relative",
 									transition: "background-color 200ms"
 								},
-								children: /* @__PURE__ */ d("div", { style: {
+								children: /* @__PURE__ */ m("div", { style: {
 									width: 18,
 									height: 18,
 									borderRadius: "50%",
-									backgroundColor: "white",
+									backgroundColor: "var(--color-action-primary-text)",
 									position: "absolute",
 									top: 3,
-									left: m.cacheEnabled ? 23 : 3,
+									left: _.cacheEnabled ? 23 : 3,
 									transition: "left 200ms"
 								} })
 							})]
-						}), m.cacheEnabled && /* @__PURE__ */ f("div", { children: [
-							/* @__PURE__ */ d("label", {
+						}), _.cacheEnabled && /* @__PURE__ */ h("div", { children: [
+							/* @__PURE__ */ m("label", {
 								htmlFor: "cache-ttl",
-								style: T,
-								children: e("bigconsole.settings.cache.ttl.label", "Cache TTL (seconds)")
+								style: D,
+								children: r("bigconsole.settings.cache.ttl.label", "Cache TTL (seconds)")
 							}),
-							/* @__PURE__ */ d("input", {
+							/* @__PURE__ */ m("input", {
 								id: "cache-ttl",
 								type: "number",
 								min: 30,
 								max: 3600,
-								value: m.cacheTTLSeconds,
-								onChange: (e) => x("cacheTTLSeconds", parseInt(e.target.value) || 300),
-								style: w
+								value: _.cacheTTLSeconds,
+								onChange: (e) => C("cacheTTLSeconds", Math.min(86400, Math.max(0, Number(e.target.value)))),
+								style: E
 							}),
-							/* @__PURE__ */ d("p", {
-								style: E,
-								children: e("bigconsole.settings.cache.ttl.help", "How long cached data is considered fresh (30-3600)")
+							/* @__PURE__ */ m("p", {
+								style: O,
+								children: r("bigconsole.settings.cache.ttl.help", "How long cached data is considered fresh (30-3600)")
 							})
 						] })]
 					})]
 				}),
-				/* @__PURE__ */ f("div", {
-					style: D,
-					children: [/* @__PURE__ */ d("h2", {
+				/* @__PURE__ */ h("div", {
+					style: k,
+					children: [/* @__PURE__ */ m("h2", {
 						style: {
 							fontSize: "var(--font-size-body-md)",
 							fontWeight: "var(--font-weight-semibold)",
 							color: "var(--color-text-primary)",
 							marginBottom: 16
 						},
-						children: e("bigconsole.settings.display.title", "Display")
-					}), /* @__PURE__ */ f("div", {
-						style: {
-							display: "grid",
-							gap: 16
-						},
+						children: r("bigconsole.settings.display.title", "Display")
+					}), /* @__PURE__ */ h("div", {
+						className: "grid gap-form-gap md:grid-cols-3",
 						children: [
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ h("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									justifyContent: "space-between"
 								},
-								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
-									style: T,
-									children: e("bigconsole.settings.display.widgetBorders.label", "Show Widget Borders")
-								}), /* @__PURE__ */ d("p", {
-									style: E,
-									children: e("bigconsole.settings.display.widgetBorders.help", "Display borders around widgets in dashboards")
-								})] }), /* @__PURE__ */ d("button", {
-									onClick: () => x("showWidgetBorders", !m.showWidgetBorders),
+								children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+									style: D,
+									children: r("bigconsole.settings.display.widgetBorders.label", "Show Widget Borders")
+								}), /* @__PURE__ */ m("p", {
+									style: O,
+									children: r("bigconsole.settings.display.widgetBorders.help", "Display borders around widgets in dashboards")
+								})] }), /* @__PURE__ */ m("button", {
+									onClick: () => C("showWidgetBorders", !_.showWidgetBorders),
 									role: "switch",
-									"aria-checked": m.showWidgetBorders,
-									"aria-label": e("bigconsole.settings.display.widgetBorders.label", "Show Widget Borders"),
+									"aria-checked": _.showWidgetBorders,
+									"aria-label": r("bigconsole.settings.display.widgetBorders.label", "Show Widget Borders"),
 									style: {
 										width: 44,
+										flexShrink: 0,
 										height: 24,
 										borderRadius: 12,
-										backgroundColor: m.showWidgetBorders ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
+										backgroundColor: _.showWidgetBorders ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
 										border: "none",
 										cursor: "pointer",
 										position: "relative",
 										transition: "background-color 200ms"
 									},
-									children: /* @__PURE__ */ d("div", { style: {
+									children: /* @__PURE__ */ m("div", { style: {
 										width: 18,
 										height: 18,
 										borderRadius: "50%",
-										backgroundColor: "white",
+										backgroundColor: "var(--color-action-primary-text)",
 										position: "absolute",
 										top: 3,
-										left: m.showWidgetBorders ? 23 : 3,
+										left: _.showWidgetBorders ? 23 : 3,
 										transition: "left 200ms"
 									} })
 								})]
 							}),
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ h("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									justifyContent: "space-between"
 								},
-								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
-									style: T,
-									children: e("bigconsole.settings.display.compactMode.label", "Compact Mode")
-								}), /* @__PURE__ */ d("p", {
-									style: E,
-									children: e("bigconsole.settings.display.compactMode.help", "Reduce padding and spacing for more content")
-								})] }), /* @__PURE__ */ d("button", {
-									onClick: () => x("compactMode", !m.compactMode),
+								children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+									style: D,
+									children: r("bigconsole.settings.display.compactMode.label", "Compact Mode")
+								}), /* @__PURE__ */ m("p", {
+									style: O,
+									children: r("bigconsole.settings.display.compactMode.help", "Reduce padding and spacing for more content")
+								})] }), /* @__PURE__ */ m("button", {
+									onClick: () => C("compactMode", !_.compactMode),
 									role: "switch",
-									"aria-checked": m.compactMode,
-									"aria-label": e("bigconsole.settings.display.compactMode.label", "Compact Mode"),
+									"aria-checked": _.compactMode,
+									"aria-label": r("bigconsole.settings.display.compactMode.label", "Compact Mode"),
 									style: {
 										width: 44,
+										flexShrink: 0,
 										height: 24,
 										borderRadius: 12,
-										backgroundColor: m.compactMode ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
+										backgroundColor: _.compactMode ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
 										border: "none",
 										cursor: "pointer",
 										position: "relative",
 										transition: "background-color 200ms"
 									},
-									children: /* @__PURE__ */ d("div", { style: {
+									children: /* @__PURE__ */ m("div", { style: {
 										width: 18,
 										height: 18,
 										borderRadius: "50%",
-										backgroundColor: "white",
+										backgroundColor: "var(--color-action-primary-text)",
 										position: "absolute",
 										top: 3,
-										left: m.compactMode ? 23 : 3,
+										left: _.compactMode ? 23 : 3,
 										transition: "left 200ms"
 									} })
 								})]
 							}),
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ h("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									justifyContent: "space-between"
 								},
-								children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
-									style: T,
-									children: e("bigconsole.settings.display.animations.label", "Animations")
-								}), /* @__PURE__ */ d("p", {
-									style: E,
-									children: e("bigconsole.settings.display.animations.help", "Enable transition animations and effects")
-								})] }), /* @__PURE__ */ d("button", {
-									onClick: () => x("animationsEnabled", !m.animationsEnabled),
+								children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+									style: D,
+									children: r("bigconsole.settings.display.animations.label", "Animations")
+								}), /* @__PURE__ */ m("p", {
+									style: O,
+									children: r("bigconsole.settings.display.animations.help", "Enable transition animations and effects")
+								})] }), /* @__PURE__ */ m("button", {
+									onClick: () => C("animationsEnabled", !_.animationsEnabled),
 									role: "switch",
-									"aria-checked": m.animationsEnabled,
-									"aria-label": e("bigconsole.settings.display.animations.label", "Animations"),
+									"aria-checked": _.animationsEnabled,
+									"aria-label": r("bigconsole.settings.display.animations.label", "Animations"),
 									style: {
 										width: 44,
+										flexShrink: 0,
 										height: 24,
 										borderRadius: 12,
-										backgroundColor: m.animationsEnabled ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
+										backgroundColor: _.animationsEnabled ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
 										border: "none",
 										cursor: "pointer",
 										position: "relative",
 										transition: "background-color 200ms"
 									},
-									children: /* @__PURE__ */ d("div", { style: {
+									children: /* @__PURE__ */ m("div", { style: {
 										width: 18,
 										height: 18,
 										borderRadius: "50%",
-										backgroundColor: "white",
+										backgroundColor: "var(--color-action-primary-text)",
 										position: "absolute",
 										top: 3,
-										left: m.animationsEnabled ? 23 : 3,
+										left: _.animationsEnabled ? 23 : 3,
 										transition: "left 200ms"
 									} })
 								})]
@@ -491,6 +471,6 @@ var v = e(function() {
 	});
 });
 //#endregion
-export { v as SettingsPage, v as default };
+export { _ as SettingsPage, _ as default };
 
 //# sourceMappingURL=SettingsPage.js.map