@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/pages/SettingsPage.js

@@ -0,0 +1,478 @@
+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";
+//#region src/bigconsole/pages/SettingsPage.tsx
+var l = "bigconsole-settings", u = {
+	defaultRefreshInterval: 0,
+	defaultGridColumns: 12,
+	defaultWidgetHeight: 4,
+	cacheEnabled: !0,
+	cacheTTLSeconds: 300,
+	showWidgetBorders: !0,
+	compactMode: !1,
+	animationsEnabled: !0
+};
+function d() {
+	try {
+		let e = localStorage.getItem(l);
+		if (e) return {
+			...u,
+			...JSON.parse(e)
+		};
+	} catch {}
+	return { ...u };
+}
+function f(e) {
+	localStorage.setItem(l, JSON.stringify(e));
+}
+var p = e(function() {
+	let [e, l] = r(d), [p, m] = r(!1);
+	n(() => {
+		if (p) {
+			let e = setTimeout(() => m(!1), 2e3);
+			return () => clearTimeout(e);
+		}
+	}, [p]);
+	let h = t((e, t) => {
+		l((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, []), g = t(() => {
+		f(e), m(!0);
+	}, [e]), _ = t(() => {
+		l({ ...u }), f(u), m(!0);
+	}, []), v = {
+		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"
+	}, y = {
+		display: "block",
+		fontSize: "var(--font-size-body-sm)",
+		fontWeight: "var(--font-weight-medium)",
+		color: "var(--color-text-primary)",
+		marginBottom: 4
+	}, b = {
+		fontSize: 11,
+		color: "var(--color-text-muted)",
+		marginTop: 4
+	}, x = {
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border)",
+		borderRadius: "var(--radius-card)",
+		padding: "var(--space-cardPadding)",
+		marginBottom: "var(--space-sectionGap)"
+	};
+	return /* @__PURE__ */ s("div", {
+		style: {
+			minHeight: "100vh",
+			backgroundColor: "var(--color-bg-canvas)"
+		},
+		children: /* @__PURE__ */ c("div", {
+			style: {
+				padding: "var(--space-pagePadding)",
+				maxWidth: 720,
+				margin: "0 auto"
+			},
+			children: [
+				/* @__PURE__ */ c("div", {
+					style: {
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						marginBottom: "var(--space-sectionGap)"
+					},
+					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: _,
+							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__ */ s(i, { size: 14 }), " Reset"]
+						}), /* @__PURE__ */ c("button", {
+							onClick: g,
+							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"
+							},
+							children: [
+								/* @__PURE__ */ s(a, { size: 14 }),
+								" ",
+								p ? "Saved" : "Save"
+							]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ c("div", {
+					style: x,
+					children: [/* @__PURE__ */ s("h2", {
+						style: {
+							fontSize: "var(--font-size-body-md)",
+							fontWeight: "var(--font-weight-semibold)",
+							color: "var(--color-text-primary)",
+							marginBottom: 16
+						},
+						children: "Dashboard Defaults"
+					}), /* @__PURE__ */ c("div", {
+						style: {
+							display: "grid",
+							gap: 16
+						},
+						children: [
+							/* @__PURE__ */ c("div", { children: [
+								/* @__PURE__ */ s("label", {
+									htmlFor: "grid-cols",
+									style: y,
+									children: "Grid Columns"
+								}),
+								/* @__PURE__ */ s("input", {
+									id: "grid-cols",
+									type: "number",
+									min: 4,
+									max: 24,
+									value: e.defaultGridColumns,
+									onChange: (e) => h("defaultGridColumns", parseInt(e.target.value) || 12),
+									style: v
+								}),
+								/* @__PURE__ */ s("p", {
+									style: b,
+									children: "Number of columns in the dashboard grid (4-24)"
+								})
+							] }),
+							/* @__PURE__ */ c("div", { children: [
+								/* @__PURE__ */ s("label", {
+									htmlFor: "widget-height",
+									style: y,
+									children: "Default Widget Height"
+								}),
+								/* @__PURE__ */ s("input", {
+									id: "widget-height",
+									type: "number",
+									min: 2,
+									max: 12,
+									value: e.defaultWidgetHeight,
+									onChange: (e) => h("defaultWidgetHeight", parseInt(e.target.value) || 4),
+									style: v
+								}),
+								/* @__PURE__ */ s("p", {
+									style: b,
+									children: "Default height units for new widgets (2-12)"
+								})
+							] }),
+							/* @__PURE__ */ c("div", { children: [
+								/* @__PURE__ */ s("label", {
+									htmlFor: "refresh-interval",
+									style: y,
+									children: "Auto-Refresh Interval (seconds)"
+								}),
+								/* @__PURE__ */ c("select", {
+									id: "refresh-interval",
+									value: e.defaultRefreshInterval,
+									onChange: (e) => h("defaultRefreshInterval", parseInt(e.target.value)),
+									style: v,
+									children: [
+										/* @__PURE__ */ s("option", {
+											value: 0,
+											children: "Disabled"
+										}),
+										/* @__PURE__ */ s("option", {
+											value: 10,
+											children: "10 seconds"
+										}),
+										/* @__PURE__ */ s("option", {
+											value: 30,
+											children: "30 seconds"
+										}),
+										/* @__PURE__ */ s("option", {
+											value: 60,
+											children: "1 minute"
+										}),
+										/* @__PURE__ */ s("option", {
+											value: 300,
+											children: "5 minutes"
+										}),
+										/* @__PURE__ */ s("option", {
+											value: 600,
+											children: "10 minutes"
+										})
+									]
+								}),
+								/* @__PURE__ */ s("p", {
+									style: b,
+									children: "How often widgets refresh their data automatically"
+								})
+							] })
+						]
+					})]
+				}),
+				/* @__PURE__ */ c("div", {
+					style: x,
+					children: [/* @__PURE__ */ s("h2", {
+						style: {
+							fontSize: "var(--font-size-body-md)",
+							fontWeight: "var(--font-weight-semibold)",
+							color: "var(--color-text-primary)",
+							marginBottom: 16
+						},
+						children: "Cache"
+					}), /* @__PURE__ */ c("div", {
+						style: {
+							display: "grid",
+							gap: 16
+						},
+						children: [/* @__PURE__ */ c("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "space-between"
+							},
+							children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
+								style: y,
+								children: "Enable Cache"
+							}), /* @__PURE__ */ s("p", {
+								style: b,
+								children: "Cache widget data to reduce API calls"
+							})] }), /* @__PURE__ */ s("button", {
+								onClick: () => h("cacheEnabled", !e.cacheEnabled),
+								role: "switch",
+								"aria-checked": e.cacheEnabled,
+								"aria-label": "Enable cache",
+								style: {
+									width: 44,
+									height: 24,
+									borderRadius: 12,
+									backgroundColor: e.cacheEnabled ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
+									border: "none",
+									cursor: "pointer",
+									position: "relative",
+									transition: "background-color 200ms"
+								},
+								children: /* @__PURE__ */ s("div", { style: {
+									width: 18,
+									height: 18,
+									borderRadius: "50%",
+									backgroundColor: "white",
+									position: "absolute",
+									top: 3,
+									left: e.cacheEnabled ? 23 : 3,
+									transition: "left 200ms"
+								} })
+							})]
+						}), e.cacheEnabled && /* @__PURE__ */ c("div", { children: [
+							/* @__PURE__ */ s("label", {
+								htmlFor: "cache-ttl",
+								style: y,
+								children: "Cache TTL (seconds)"
+							}),
+							/* @__PURE__ */ s("input", {
+								id: "cache-ttl",
+								type: "number",
+								min: 30,
+								max: 3600,
+								value: e.cacheTTLSeconds,
+								onChange: (e) => h("cacheTTLSeconds", parseInt(e.target.value) || 300),
+								style: v
+							}),
+							/* @__PURE__ */ s("p", {
+								style: b,
+								children: "How long cached data is considered fresh (30-3600)"
+							})
+						] })]
+					})]
+				}),
+				/* @__PURE__ */ c("div", {
+					style: x,
+					children: [/* @__PURE__ */ s("h2", {
+						style: {
+							fontSize: "var(--font-size-body-md)",
+							fontWeight: "var(--font-weight-semibold)",
+							color: "var(--color-text-primary)",
+							marginBottom: 16
+						},
+						children: "Display"
+					}), /* @__PURE__ */ c("div", {
+						style: {
+							display: "grid",
+							gap: 16
+						},
+						children: [
+							/* @__PURE__ */ c("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "space-between"
+								},
+								children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
+									style: y,
+									children: "Show Widget Borders"
+								}), /* @__PURE__ */ s("p", {
+									style: b,
+									children: "Display borders around widgets in dashboards"
+								})] }), /* @__PURE__ */ s("button", {
+									onClick: () => h("showWidgetBorders", !e.showWidgetBorders),
+									role: "switch",
+									"aria-checked": e.showWidgetBorders,
+									"aria-label": "Show widget borders",
+									style: {
+										width: 44,
+										height: 24,
+										borderRadius: 12,
+										backgroundColor: e.showWidgetBorders ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
+										border: "none",
+										cursor: "pointer",
+										position: "relative",
+										transition: "background-color 200ms"
+									},
+									children: /* @__PURE__ */ s("div", { style: {
+										width: 18,
+										height: 18,
+										borderRadius: "50%",
+										backgroundColor: "white",
+										position: "absolute",
+										top: 3,
+										left: e.showWidgetBorders ? 23 : 3,
+										transition: "left 200ms"
+									} })
+								})]
+							}),
+							/* @__PURE__ */ c("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "space-between"
+								},
+								children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
+									style: y,
+									children: "Compact Mode"
+								}), /* @__PURE__ */ s("p", {
+									style: b,
+									children: "Reduce padding and spacing for more content"
+								})] }), /* @__PURE__ */ s("button", {
+									onClick: () => h("compactMode", !e.compactMode),
+									role: "switch",
+									"aria-checked": e.compactMode,
+									"aria-label": "Compact mode",
+									style: {
+										width: 44,
+										height: 24,
+										borderRadius: 12,
+										backgroundColor: e.compactMode ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
+										border: "none",
+										cursor: "pointer",
+										position: "relative",
+										transition: "background-color 200ms"
+									},
+									children: /* @__PURE__ */ s("div", { style: {
+										width: 18,
+										height: 18,
+										borderRadius: "50%",
+										backgroundColor: "white",
+										position: "absolute",
+										top: 3,
+										left: e.compactMode ? 23 : 3,
+										transition: "left 200ms"
+									} })
+								})]
+							}),
+							/* @__PURE__ */ c("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "space-between"
+								},
+								children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
+									style: y,
+									children: "Animations"
+								}), /* @__PURE__ */ s("p", {
+									style: b,
+									children: "Enable transition animations and effects"
+								})] }), /* @__PURE__ */ s("button", {
+									onClick: () => h("animationsEnabled", !e.animationsEnabled),
+									role: "switch",
+									"aria-checked": e.animationsEnabled,
+									"aria-label": "Animations",
+									style: {
+										width: 44,
+										height: 24,
+										borderRadius: 12,
+										backgroundColor: e.animationsEnabled ? "var(--color-action-primary-bg)" : "var(--color-bg-sunken)",
+										border: "none",
+										cursor: "pointer",
+										position: "relative",
+										transition: "background-color 200ms"
+									},
+									children: /* @__PURE__ */ s("div", { style: {
+										width: 18,
+										height: 18,
+										borderRadius: "50%",
+										backgroundColor: "white",
+										position: "absolute",
+										top: 3,
+										left: e.animationsEnabled ? 23 : 3,
+										transition: "left 200ms"
+									} })
+								})]
+							})
+						]
+					})]
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { p as SettingsPage, p as default };
+
+//# sourceMappingURL=SettingsPage.js.map

package/dist/bigconsole/pages/SettingsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPage.js","names":[],"sources":["../../../src/bigconsole/pages/SettingsPage.tsx"],"sourcesContent":["/**\n * SettingsPage\n *\n * BigConsole workspace settings and preferences.\n * Settings are persisted to localStorage until a backend settings API is available.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect } from 'react';\nimport { Settings, Save, RotateCcw } from 'lucide-react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface BigConsoleSettings {\n  defaultRefreshInterval: number;\n  defaultGridColumns: number;\n  defaultWidgetHeight: number;\n  cacheEnabled: boolean;\n  cacheTTLSeconds: number;\n  showWidgetBorders: boolean;\n  compactMode: boolean;\n  animationsEnabled: boolean;\n}\n\nconst STORAGE_KEY = 'bigconsole-settings';\n\nconst DEFAULT_SETTINGS: BigConsoleSettings = {\n  defaultRefreshInterval: 0,\n  defaultGridColumns: 12,\n  defaultWidgetHeight: 4,\n  cacheEnabled: true,\n  cacheTTLSeconds: 300,\n  showWidgetBorders: true,\n  compactMode: false,\n  animationsEnabled: true,\n};\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\nfunction loadSettings(): BigConsoleSettings {\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY);\n    if (stored) {\n      return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) };\n    }\n  } catch {\n    // Fall through to defaults\n  }\n  return { ...DEFAULT_SETTINGS };\n}\n\nfunction saveSettings(settings: BigConsoleSettings): void {\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const SettingsPage: FC = memo(function SettingsPage() {\n  const [settings, setSettings] = useState<BigConsoleSettings>(loadSettings);\n  const [saved, setSaved] = useState(false);\n\n  useEffect(() => {\n    if (saved) {\n      const timer = setTimeout(() => setSaved(false), 2000);\n      return () => clearTimeout(timer);\n    }\n  }, [saved]);\n\n  const handleChange = useCallback(<K extends keyof BigConsoleSettings>(key: K, value: BigConsoleSettings[K]) => {\n    setSettings((prev) => ({ ...prev, [key]: value }));\n  }, []);\n\n  const handleSave = useCallback(() => {\n    saveSettings(settings);\n    setSaved(true);\n  }, [settings]);\n\n  const handleReset = useCallback(() => {\n    setSettings({ ...DEFAULT_SETTINGS });\n    saveSettings(DEFAULT_SETTINGS);\n    setSaved(true);\n  }, []);\n\n  const inputStyle: React.CSSProperties = {\n    width: '100%',\n    padding: '8px 12px',\n    borderRadius: 'var(--radius-button)',\n    border: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-canvas)',\n    color: 'var(--color-text-primary)',\n    fontSize: 'var(--font-size-body-sm)',\n    outline: 'none',\n  };\n\n  const labelStyle: React.CSSProperties = {\n    display: 'block',\n    fontSize: 'var(--font-size-body-sm)',\n    fontWeight: 'var(--font-weight-medium)',\n    color: 'var(--color-text-primary)',\n    marginBottom: 4,\n  };\n\n  const descStyle: React.CSSProperties = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginTop: 4,\n  };\n\n  const sectionStyle: React.CSSProperties = {\n    backgroundColor: 'var(--color-bg-surface)',\n    border: '1px solid var(--color-border)',\n    borderRadius: 'var(--radius-card)',\n    padding: 'var(--space-cardPadding)',\n    marginBottom: 'var(--space-sectionGap)',\n  };\n\n  return (\n    <div style={{ minHeight: '100vh', backgroundColor: 'var(--color-bg-canvas)' }}>\n      <div style={{ padding: 'var(--space-pagePadding)', maxWidth: 720, margin: '0 auto' }}>\n        {/* Header */}\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            marginBottom: 'var(--space-sectionGap)',\n          }}\n        >\n          <div>\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n              <Settings size={24} style={{ color: 'var(--color-text-primary)' }} />\n              <h1\n                style={{\n                  fontSize: 'var(--font-size-heading-h4)',\n                  fontWeight: 'var(--font-weight-bold)',\n                  color: 'var(--color-text-primary)',\n                }}\n              >\n                Settings\n              </h1>\n            </div>\n            <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-secondary)', marginTop: 4 }}>\n              Configure BigConsole preferences\n            </p>\n          </div>\n          <div style={{ display: 'flex', gap: 8 }}>\n            <button\n              onClick={handleReset}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 6,\n                padding: '8px 12px',\n                borderRadius: 'var(--radius-button)',\n                border: '1px solid var(--color-border)',\n                backgroundColor: 'transparent',\n                color: 'var(--color-text-secondary)',\n                fontSize: 'var(--font-size-body-sm)',\n                cursor: 'pointer',\n              }}\n            >\n              <RotateCcw size={14} /> Reset\n            </button>\n            <button\n              onClick={handleSave}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 6,\n                padding: '8px 16px',\n                borderRadius: 'var(--radius-button)',\n                backgroundColor: saved ? '#22c55e' : 'var(--color-action-primary-bg)',\n                color: 'var(--color-action-primary-text)',\n                fontWeight: 'var(--font-weight-medium)',\n                fontSize: 'var(--font-size-body-sm)',\n                border: 'none',\n                cursor: 'pointer',\n                transition: 'background-color 200ms',\n              }}\n            >\n              <Save size={14} /> {saved ? 'Saved' : 'Save'}\n            </button>\n          </div>\n        </div>\n\n        {/* Dashboard Defaults */}\n        <div style={sectionStyle}>\n          <h2\n            style={{\n              fontSize: 'var(--font-size-body-md)',\n              fontWeight: 'var(--font-weight-semibold)',\n              color: 'var(--color-text-primary)',\n              marginBottom: 16,\n            }}\n          >\n            Dashboard Defaults\n          </h2>\n          <div style={{ display: 'grid', gap: 16 }}>\n            <div>\n              <label htmlFor=\"grid-cols\" style={labelStyle}>\n                Grid Columns\n              </label>\n              <input\n                id=\"grid-cols\"\n                type=\"number\"\n                min={4}\n                max={24}\n                value={settings.defaultGridColumns}\n                onChange={(e) => handleChange('defaultGridColumns', parseInt(e.target.value) || 12)}\n                style={inputStyle}\n              />\n              <p style={descStyle}>Number of columns in the dashboard grid (4-24)</p>\n            </div>\n            <div>\n              <label htmlFor=\"widget-height\" style={labelStyle}>\n                Default Widget Height\n              </label>\n              <input\n                id=\"widget-height\"\n                type=\"number\"\n                min={2}\n                max={12}\n                value={settings.defaultWidgetHeight}\n                onChange={(e) => handleChange('defaultWidgetHeight', parseInt(e.target.value) || 4)}\n                style={inputStyle}\n              />\n              <p style={descStyle}>Default height units for new widgets (2-12)</p>\n            </div>\n            <div>\n              <label htmlFor=\"refresh-interval\" style={labelStyle}>\n                Auto-Refresh Interval (seconds)\n              </label>\n              <select\n                id=\"refresh-interval\"\n                value={settings.defaultRefreshInterval}\n                onChange={(e) => handleChange('defaultRefreshInterval', parseInt(e.target.value))}\n                style={inputStyle}\n              >\n                <option value={0}>Disabled</option>\n                <option value={10}>10 seconds</option>\n                <option value={30}>30 seconds</option>\n                <option value={60}>1 minute</option>\n                <option value={300}>5 minutes</option>\n                <option value={600}>10 minutes</option>\n              </select>\n              <p style={descStyle}>How often widgets refresh their data automatically</p>\n            </div>\n          </div>\n        </div>\n\n        {/* Cache Settings */}\n        <div style={sectionStyle}>\n          <h2\n            style={{\n              fontSize: 'var(--font-size-body-md)',\n              fontWeight: 'var(--font-weight-semibold)',\n              color: 'var(--color-text-primary)',\n              marginBottom: 16,\n            }}\n          >\n            Cache\n          </h2>\n          <div style={{ display: 'grid', gap: 16 }}>\n            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n              <div>\n                <label style={labelStyle}>Enable Cache</label>\n                <p style={descStyle}>Cache widget data to reduce API calls</p>\n              </div>\n              <button\n                onClick={() => handleChange('cacheEnabled', !settings.cacheEnabled)}\n                role=\"switch\"\n                aria-checked={settings.cacheEnabled}\n                aria-label=\"Enable cache\"\n                style={{\n                  width: 44,\n                  height: 24,\n                  borderRadius: 12,\n                  backgroundColor: settings.cacheEnabled ? 'var(--color-action-primary-bg)' : 'var(--color-bg-sunken)',\n                  border: 'none',\n                  cursor: 'pointer',\n                  position: 'relative',\n                  transition: 'background-color 200ms',\n                }}\n              >\n                <div\n                  style={{\n                    width: 18,\n                    height: 18,\n                    borderRadius: '50%',\n                    backgroundColor: 'white',\n                    position: 'absolute',\n                    top: 3,\n                    left: settings.cacheEnabled ? 23 : 3,\n                    transition: 'left 200ms',\n                  }}\n                />\n              </button>\n            </div>\n            {settings.cacheEnabled && (\n              <div>\n                <label htmlFor=\"cache-ttl\" style={labelStyle}>\n                  Cache TTL (seconds)\n                </label>\n                <input\n                  id=\"cache-ttl\"\n                  type=\"number\"\n                  min={30}\n                  max={3600}\n                  value={settings.cacheTTLSeconds}\n                  onChange={(e) => handleChange('cacheTTLSeconds', parseInt(e.target.value) || 300)}\n                  style={inputStyle}\n                />\n                <p style={descStyle}>How long cached data is considered fresh (30-3600)</p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Display Settings */}\n        <div style={sectionStyle}>\n          <h2\n            style={{\n              fontSize: 'var(--font-size-body-md)',\n              fontWeight: 'var(--font-weight-semibold)',\n              color: 'var(--color-text-primary)',\n              marginBottom: 16,\n            }}\n          >\n            Display\n          </h2>\n          <div style={{ display: 'grid', gap: 16 }}>\n            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n              <div>\n                <label style={labelStyle}>Show Widget Borders</label>\n                <p style={descStyle}>Display borders around widgets in dashboards</p>\n              </div>\n              <button\n                onClick={() => handleChange('showWidgetBorders', !settings.showWidgetBorders)}\n                role=\"switch\"\n                aria-checked={settings.showWidgetBorders}\n                aria-label=\"Show widget borders\"\n                style={{\n                  width: 44,\n                  height: 24,\n                  borderRadius: 12,\n                  backgroundColor: settings.showWidgetBorders\n                    ? 'var(--color-action-primary-bg)'\n                    : 'var(--color-bg-sunken)',\n                  border: 'none',\n                  cursor: 'pointer',\n                  position: 'relative',\n                  transition: 'background-color 200ms',\n                }}\n              >\n                <div\n                  style={{\n                    width: 18,\n                    height: 18,\n                    borderRadius: '50%',\n                    backgroundColor: 'white',\n                    position: 'absolute',\n                    top: 3,\n                    left: settings.showWidgetBorders ? 23 : 3,\n                    transition: 'left 200ms',\n                  }}\n                />\n              </button>\n            </div>\n            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n              <div>\n                <label style={labelStyle}>Compact Mode</label>\n                <p style={descStyle}>Reduce padding and spacing for more content</p>\n              </div>\n              <button\n                onClick={() => handleChange('compactMode', !settings.compactMode)}\n                role=\"switch\"\n                aria-checked={settings.compactMode}\n                aria-label=\"Compact mode\"\n                style={{\n                  width: 44,\n                  height: 24,\n                  borderRadius: 12,\n                  backgroundColor: settings.compactMode ? 'var(--color-action-primary-bg)' : 'var(--color-bg-sunken)',\n                  border: 'none',\n                  cursor: 'pointer',\n                  position: 'relative',\n                  transition: 'background-color 200ms',\n                }}\n              >\n                <div\n                  style={{\n                    width: 18,\n                    height: 18,\n                    borderRadius: '50%',\n                    backgroundColor: 'white',\n                    position: 'absolute',\n                    top: 3,\n                    left: settings.compactMode ? 23 : 3,\n                    transition: 'left 200ms',\n                  }}\n                />\n              </button>\n            </div>\n            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n              <div>\n                <label style={labelStyle}>Animations</label>\n                <p style={descStyle}>Enable transition animations and effects</p>\n              </div>\n              <button\n                onClick={() => handleChange('animationsEnabled', !settings.animationsEnabled)}\n                role=\"switch\"\n                aria-checked={settings.animationsEnabled}\n                aria-label=\"Animations\"\n                style={{\n                  width: 44,\n                  height: 24,\n                  borderRadius: 12,\n                  backgroundColor: settings.animationsEnabled\n                    ? 'var(--color-action-primary-bg)'\n                    : 'var(--color-bg-sunken)',\n                  border: 'none',\n                  cursor: 'pointer',\n                  position: 'relative',\n                  transition: 'background-color 200ms',\n                }}\n              >\n                <div\n                  style={{\n                    width: 18,\n                    height: 18,\n                    borderRadius: '50%',\n                    backgroundColor: 'white',\n                    position: 'absolute',\n                    top: 3,\n                    left: settings.animationsEnabled ? 23 : 3,\n                    transition: 'left 200ms',\n                  }}\n                />\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default SettingsPage;\n"],"mappings":"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"}

package/dist/bigconsole/pages/WidgetDemoPage.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+export declare const WidgetDemoPage: FC;
+export default WidgetDemoPage;
+//# sourceMappingURL=WidgetDemoPage.d.ts.map

package/dist/bigconsole/pages/WidgetDemoPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetDemoPage.d.ts","sourceRoot":"","sources":["../../../src/bigconsole/pages/WidgetDemoPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAsDnD,eAAO,MAAM,cAAc,EAAE,EAmL5B,CAAC;AAEF,eAAe,cAAc,CAAC"}