@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

package/dist/bigconsole/pages/SettingsPage.js

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