@burdenoff/microfe-bigconsole 2026.1008.11 → 2026.1008.12

package/dist/bigconsole/pages/SettingsPage.js

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