@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

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

@@ -1 +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 { AuroraBackground, GradientText, PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\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-seam)',\n    borderRadius: 'var(--radius-card)',\n    padding: 'var(--space-cardPadding)',\n    marginBottom: 'var(--space-sectionGap)',\n    boxShadow: 'var(--shadow-pop)',\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          className=\"relative overflow-hidden rounded-card border border-border-seam bg-gloss-card p-6\"\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            marginBottom: 'var(--space-sectionGap)',\n            flexWrap: 'wrap',\n            gap: 'var(--space-formGap)',\n          }}\n        >\n          <AuroraBackground intensity=\"subtle\" />\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                <GradientText>Settings</GradientText>\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 ? 'var(--color-status-success-bg)' : '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 locally' : 'Save locally'}\n            </button>\n          </div>\n        </div>\n\n        <PagePurpose className=\"mb-[var(--space-sectionGap)]\">\n          Settings control the defaults BigConsole applies everywhere — how new dashboards are laid out, how\n          aggressively widget data is cached, and how the UI is displayed. Tune these once to match how your team works;\n          they apply across every dashboard you build. These preferences are saved locally in this browser until the\n          backend settings API is available.\n        </PagePurpose>\n\n        {/* Dashboard Defaults — primary emphasis zone */}\n        <EmphasisPanel className=\"mb-[var(--space-sectionGap)] p-[var(--space-cardPadding)]\">\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        </EmphasisPanel>\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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"}
+{"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 { AuroraBackground, GradientText, PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\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 { t } = useI18n();\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-seam)',\n    borderRadius: 'var(--radius-card)',\n    padding: 'var(--space-cardPadding)',\n    marginBottom: 'var(--space-sectionGap)',\n    boxShadow: 'var(--shadow-pop)',\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          className=\"relative overflow-hidden rounded-card border border-border-seam bg-gloss-card p-6\"\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            marginBottom: 'var(--space-sectionGap)',\n            flexWrap: 'wrap',\n            gap: 'var(--space-formGap)',\n          }}\n        >\n          <AuroraBackground intensity=\"subtle\" />\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                <GradientText>{t('bigconsole.settings.header.title', 'Settings')}</GradientText>\n              </h1>\n            </div>\n            <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-secondary)', marginTop: 4 }}>\n              {t('bigconsole.settings.header.subtitle', '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} /> {t('bigconsole.settings.actions.reset', '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 ? 'var(--color-status-success-bg)' : '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} />{' '}\n              {saved\n                ? t('bigconsole.settings.actions.savedLocally', 'Saved locally')\n                : t('bigconsole.settings.actions.saveLocally', 'Save locally')}\n            </button>\n          </div>\n        </div>\n\n        <PagePurpose className=\"mb-[var(--space-sectionGap)]\">\n          {t(\n            'bigconsole.settings.purpose',\n            '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.'\n          )}\n        </PagePurpose>\n\n        {/* Dashboard Defaults — primary emphasis zone */}\n        <EmphasisPanel className=\"mb-[var(--space-sectionGap)] p-[var(--space-cardPadding)]\">\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            {t('bigconsole.settings.dashboardDefaults.title', 'Dashboard Defaults')}\n          </h2>\n          <div style={{ display: 'grid', gap: 16 }}>\n            <div>\n              <label htmlFor=\"grid-cols\" style={labelStyle}>\n                {t('bigconsole.settings.dashboardDefaults.gridColumns.label', '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}>\n                {t(\n                  'bigconsole.settings.dashboardDefaults.gridColumns.help',\n                  'Number of columns in the dashboard grid (4-24)'\n                )}\n              </p>\n            </div>\n            <div>\n              <label htmlFor=\"widget-height\" style={labelStyle}>\n                {t('bigconsole.settings.dashboardDefaults.widgetHeight.label', '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}>\n                {t(\n                  'bigconsole.settings.dashboardDefaults.widgetHeight.help',\n                  'Default height units for new widgets (2-12)'\n                )}\n              </p>\n            </div>\n            <div>\n              <label htmlFor=\"refresh-interval\" style={labelStyle}>\n                {t('bigconsole.settings.dashboardDefaults.refreshInterval.label', '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}>\n                  {t('bigconsole.settings.dashboardDefaults.refreshInterval.disabled', 'Disabled')}\n                </option>\n                <option value={10}>\n                  {t('bigconsole.settings.dashboardDefaults.refreshInterval.seconds10', '10 seconds')}\n                </option>\n                <option value={30}>\n                  {t('bigconsole.settings.dashboardDefaults.refreshInterval.seconds30', '30 seconds')}\n                </option>\n                <option value={60}>\n                  {t('bigconsole.settings.dashboardDefaults.refreshInterval.minute1', '1 minute')}\n                </option>\n                <option value={300}>\n                  {t('bigconsole.settings.dashboardDefaults.refreshInterval.minutes5', '5 minutes')}\n                </option>\n                <option value={600}>\n                  {t('bigconsole.settings.dashboardDefaults.refreshInterval.minutes10', '10 minutes')}\n                </option>\n              </select>\n              <p style={descStyle}>\n                {t(\n                  'bigconsole.settings.dashboardDefaults.refreshInterval.help',\n                  'How often widgets refresh their data automatically'\n                )}\n              </p>\n            </div>\n          </div>\n        </EmphasisPanel>\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            {t('bigconsole.settings.cache.title', '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}>{t('bigconsole.settings.cache.enable.label', 'Enable Cache')}</label>\n                <p style={descStyle}>\n                  {t('bigconsole.settings.cache.enable.help', 'Cache widget data to reduce API calls')}\n                </p>\n              </div>\n              <button\n                onClick={() => handleChange('cacheEnabled', !settings.cacheEnabled)}\n                role=\"switch\"\n                aria-checked={settings.cacheEnabled}\n                aria-label={t('bigconsole.settings.cache.enable.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                  {t('bigconsole.settings.cache.ttl.label', '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}>\n                  {t('bigconsole.settings.cache.ttl.help', 'How long cached data is considered fresh (30-3600)')}\n                </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            {t('bigconsole.settings.display.title', '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}>\n                  {t('bigconsole.settings.display.widgetBorders.label', 'Show Widget Borders')}\n                </label>\n                <p style={descStyle}>\n                  {t('bigconsole.settings.display.widgetBorders.help', 'Display borders around widgets in dashboards')}\n                </p>\n              </div>\n              <button\n                onClick={() => handleChange('showWidgetBorders', !settings.showWidgetBorders)}\n                role=\"switch\"\n                aria-checked={settings.showWidgetBorders}\n                aria-label={t('bigconsole.settings.display.widgetBorders.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}>{t('bigconsole.settings.display.compactMode.label', 'Compact Mode')}</label>\n                <p style={descStyle}>\n                  {t('bigconsole.settings.display.compactMode.help', 'Reduce padding and spacing for more content')}\n                </p>\n              </div>\n              <button\n                onClick={() => handleChange('compactMode', !settings.compactMode)}\n                role=\"switch\"\n                aria-checked={settings.compactMode}\n                aria-label={t('bigconsole.settings.display.compactMode.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}>{t('bigconsole.settings.display.animations.label', 'Animations')}</label>\n                <p style={descStyle}>\n                  {t('bigconsole.settings.display.animations.help', 'Enable transition animations and effects')}\n                </p>\n              </div>\n              <button\n                onClick={() => handleChange('animationsEnabled', !settings.animationsEnabled)}\n                role=\"switch\"\n                aria-checked={settings.animationsEnabled}\n                aria-label={t('bigconsole.settings.display.animations.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":";;;;;;AA2BA,IAAM,IAAc,uBAEd,IAAuC;CAC3C,wBAAwB;CACxB,oBAAoB;CACpB,qBAAqB;CACrB,cAAc;CACd,iBAAiB;CACjB,mBAAmB;CACnB,aAAa;CACb,mBAAmB;CACpB;AAMD,SAAS,IAAmC;AAC1C,KAAI;EACF,IAAM,IAAS,aAAa,QAAQ,EAAY;AAChD,MAAI,EACF,QAAO;GAAE,GAAG;GAAkB,GAAG,KAAK,MAAM,EAAO;GAAE;SAEjD;AAGR,QAAO,EAAE,GAAG,GAAkB;;AAGhC,SAAS,EAAa,GAAoC;AACxD,cAAa,QAAQ,GAAa,KAAK,UAAU,EAAS,CAAC;;AAO7D,IAAa,IAAmB,EAAK,WAAwB;CAC3D,IAAM,EAAE,SAAM,GAAS,EACjB,CAAC,GAAU,KAAe,EAA6B,EAAa,EACpE,CAAC,GAAO,KAAY,EAAS,GAAM;AAEzC,SAAgB;AACd,MAAI,GAAO;GACT,IAAM,IAAQ,iBAAiB,EAAS,GAAM,EAAE,IAAK;AACrD,gBAAa,aAAa,EAAM;;IAEjC,CAAC,EAAM,CAAC;CAEX,IAAM,IAAe,GAAiD,GAAQ,MAAiC;AAC7G,KAAa,OAAU;GAAE,GAAG;IAAO,IAAM;GAAO,EAAE;IACjD,EAAE,CAAC,EAEA,IAAa,QAAkB;AAEnC,EADA,EAAa,EAAS,EACtB,EAAS,GAAK;IACb,CAAC,EAAS,CAAC,EAER,IAAc,QAAkB;AAGpC,EAFA,EAAY,EAAE,GAAG,GAAkB,CAAC,EACpC,EAAa,EAAiB,EAC9B,EAAS,GAAK;IACb,EAAE,CAAC,EAEA,IAAkC;EACtC,OAAO;EACP,SAAS;EACT,cAAc;EACd,QAAQ;EACR,iBAAiB;EACjB,OAAO;EACP,UAAU;EACV,SAAS;EACV,EAEK,IAAkC;EACtC,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;EACP,cAAc;EACf,EAEK,IAAiC;EACrC,UAAU;EACV,OAAO;EACP,WAAW;EACZ,EAEK,IAAoC;EACxC,iBAAiB;EACjB,QAAQ;EACR,cAAc;EACd,SAAS;EACT,cAAc;EACd,WAAW;EACZ;AAED,QACE,kBAAC,OAAD;EAAK,OAAO;GAAE,WAAW;GAAS,iBAAiB;GAA0B;YAC3E,kBAAC,OAAD;GAAK,OAAO;IAAE,SAAS;IAA4B,UAAU;IAAK,QAAQ;IAAU;aAApF;IAEE,kBAAC,OAAD;KACE,WAAU;KACV,OAAO;MACL,SAAS;MACT,gBAAgB;MAChB,YAAY;MACZ,cAAc;MACd,UAAU;MACV,KAAK;MACN;eATH;MAWE,kBAAC,GAAD,EAAkB,WAAU,UAAW,CAAA;MACvC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,OAAO;QAAE,SAAS;QAAQ,YAAY;QAAU,KAAK;QAAwB;iBAAlF,CACE,kBAAC,GAAD;QAAU,MAAM;QAAI,OAAO,EAAE,OAAO,6BAA6B;QAAI,CAAA,EACrE,kBAAC,MAAD;QACE,OAAO;SACL,UAAU;SACV,YAAY;SACZ,OAAO;SACR;kBAED,kBAAC,GAAD,EAAA,UAAe,EAAE,oCAAoC,WAAW,EAAgB,CAAA;QAC7E,CAAA,CACD;UACN,kBAAC,KAAD;OAAG,OAAO;QAAE,UAAU;QAA4B,OAAO;QAA+B,WAAW;QAAG;iBACnG,EAAE,uCAAuC,mCAAmC;OAC3E,CAAA,CACA,EAAA,CAAA;MACN,kBAAC,OAAD;OAAK,OAAO;QAAE,SAAS;QAAQ,KAAK;QAAG;iBAAvC,CACE,kBAAC,UAAD;QACE,SAAS;QACT,OAAO;SACL,SAAS;SACT,YAAY;SACZ,KAAK;SACL,SAAS;SACT,cAAc;SACd,QAAQ;SACR,iBAAiB;SACjB,OAAO;SACP,UAAU;SACV,QAAQ;SACT;kBAbH;SAeE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;;SAAE,EAAE,qCAAqC,QAAQ;SACjE;WACT,kBAAC,UAAD;QACE,SAAS;QACT,OAAO;SACL,SAAS;SACT,YAAY;SACZ,KAAK;SACL,SAAS;SACT,cAAc;SACd,iBAAiB,IAAQ,mCAAmC;SAC5D,OAAO;SACP,YAAY;SACZ,UAAU;SACV,QAAQ;SACR,QAAQ;SACR,YAAY;SACb;kBAfH;SAiBE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;SAAC;SAClB,IACG,EAAE,4CAA4C,gBAAgB,GAC9D,EAAE,2CAA2C,eAAe;SACzD;UACL;;MACF;;IAEN,kBAAC,GAAD;KAAa,WAAU;eACpB,EACC,+BACA,kWACD;KACW,CAAA;IAGd,kBAAC,GAAD;KAAe,WAAU;eAAzB,CACE,kBAAC,MAAD;MACE,OAAO;OACL,UAAU;OACV,YAAY;OACZ,OAAO;OACP,cAAc;OACf;gBAEA,EAAE,+CAA+C,qBAAqB;MACpE,CAAA,EACL,kBAAC,OAAD;MAAK,OAAO;OAAE,SAAS;OAAQ,KAAK;OAAI;gBAAxC;OACE,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,SAAD;SAAO,SAAQ;SAAY,OAAO;mBAC/B,EAAE,2DAA2D,eAAe;SACvE,CAAA;QACR,kBAAC,SAAD;SACE,IAAG;SACH,MAAK;SACL,KAAK;SACL,KAAK;SACL,OAAO,EAAS;SAChB,WAAW,MAAM,EAAa,sBAAsB,SAAS,EAAE,OAAO,MAAM,IAAI,GAAG;SACnF,OAAO;SACP,CAAA;QACF,kBAAC,KAAD;SAAG,OAAO;mBACP,EACC,0DACA,iDACD;SACC,CAAA;QACA,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,SAAD;SAAO,SAAQ;SAAgB,OAAO;mBACnC,EAAE,4DAA4D,wBAAwB;SACjF,CAAA;QACR,kBAAC,SAAD;SACE,IAAG;SACH,MAAK;SACL,KAAK;SACL,KAAK;SACL,OAAO,EAAS;SAChB,WAAW,MAAM,EAAa,uBAAuB,SAAS,EAAE,OAAO,MAAM,IAAI,EAAE;SACnF,OAAO;SACP,CAAA;QACF,kBAAC,KAAD;SAAG,OAAO;mBACP,EACC,2DACA,8CACD;SACC,CAAA;QACA,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,SAAD;SAAO,SAAQ;SAAmB,OAAO;mBACtC,EAAE,+DAA+D,kCAAkC;SAC9F,CAAA;QACR,kBAAC,UAAD;SACE,IAAG;SACH,OAAO,EAAS;SAChB,WAAW,MAAM,EAAa,0BAA0B,SAAS,EAAE,OAAO,MAAM,CAAC;SACjF,OAAO;mBAJT;UAME,kBAAC,UAAD;WAAQ,OAAO;qBACZ,EAAE,kEAAkE,WAAW;WACzE,CAAA;UACT,kBAAC,UAAD;WAAQ,OAAO;qBACZ,EAAE,mEAAmE,aAAa;WAC5E,CAAA;UACT,kBAAC,UAAD;WAAQ,OAAO;qBACZ,EAAE,mEAAmE,aAAa;WAC5E,CAAA;UACT,kBAAC,UAAD;WAAQ,OAAO;qBACZ,EAAE,iEAAiE,WAAW;WACxE,CAAA;UACT,kBAAC,UAAD;WAAQ,OAAO;qBACZ,EAAE,kEAAkE,YAAY;WAC1E,CAAA;UACT,kBAAC,UAAD;WAAQ,OAAO;qBACZ,EAAE,mEAAmE,aAAa;WAC5E,CAAA;UACF;;QACT,kBAAC,KAAD;SAAG,OAAO;mBACP,EACC,8DACA,qDACD;SACC,CAAA;QACA,EAAA,CAAA;OACF;QACQ;;IAGhB,kBAAC,OAAD;KAAK,OAAO;eAAZ,CACE,kBAAC,MAAD;MACE,OAAO;OACL,UAAU;OACV,YAAY;OACZ,OAAO;OACP,cAAc;OACf;gBAEA,EAAE,mCAAmC,QAAQ;MAC3C,CAAA,EACL,kBAAC,OAAD;MAAK,OAAO;OAAE,SAAS;OAAQ,KAAK;OAAI;gBAAxC,CACE,kBAAC,OAAD;OAAK,OAAO;QAAE,SAAS;QAAQ,YAAY;QAAU,gBAAgB;QAAiB;iBAAtF,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;QAAO,OAAO;kBAAa,EAAE,0CAA0C,eAAe;QAAS,CAAA,EAC/F,kBAAC,KAAD;QAAG,OAAO;kBACP,EAAE,yCAAyC,wCAAwC;QAClF,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,UAAD;QACE,eAAe,EAAa,gBAAgB,CAAC,EAAS,aAAa;QACnE,MAAK;QACL,gBAAc,EAAS;QACvB,cAAY,EAAE,0CAA0C,eAAe;QACvE,OAAO;SACL,OAAO;SACP,QAAQ;SACR,cAAc;SACd,iBAAiB,EAAS,eAAe,mCAAmC;SAC5E,QAAQ;SACR,QAAQ;SACR,UAAU;SACV,YAAY;SACb;kBAED,kBAAC,OAAD,EACE,OAAO;SACL,OAAO;SACP,QAAQ;SACR,cAAc;SACd,iBAAiB;SACjB,UAAU;SACV,KAAK;SACL,MAAM,EAAS,eAAe,KAAK;SACnC,YAAY;SACb,EACD,CAAA;QACK,CAAA,CACL;UACL,EAAS,gBACR,kBAAC,OAAD,EAAA,UAAA;OACE,kBAAC,SAAD;QAAO,SAAQ;QAAY,OAAO;kBAC/B,EAAE,uCAAuC,sBAAsB;QAC1D,CAAA;OACR,kBAAC,SAAD;QACE,IAAG;QACH,MAAK;QACL,KAAK;QACL,KAAK;QACL,OAAO,EAAS;QAChB,WAAW,MAAM,EAAa,mBAAmB,SAAS,EAAE,OAAO,MAAM,IAAI,IAAI;QACjF,OAAO;QACP,CAAA;OACF,kBAAC,KAAD;QAAG,OAAO;kBACP,EAAE,sCAAsC,qDAAqD;QAC5F,CAAA;OACA,EAAA,CAAA,CAEJ;QACF;;IAGN,kBAAC,OAAD;KAAK,OAAO;eAAZ,CACE,kBAAC,MAAD;MACE,OAAO;OACL,UAAU;OACV,YAAY;OACZ,OAAO;OACP,cAAc;OACf;gBAEA,EAAE,qCAAqC,UAAU;MAC/C,CAAA,EACL,kBAAC,OAAD;MAAK,OAAO;OAAE,SAAS;OAAQ,KAAK;OAAI;gBAAxC;OACE,kBAAC,OAAD;QAAK,OAAO;SAAE,SAAS;SAAQ,YAAY;SAAU,gBAAgB;SAAiB;kBAAtF,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;SAAO,OAAO;mBACX,EAAE,mDAAmD,sBAAsB;SACtE,CAAA,EACR,kBAAC,KAAD;SAAG,OAAO;mBACP,EAAE,kDAAkD,+CAA+C;SAClG,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,UAAD;SACE,eAAe,EAAa,qBAAqB,CAAC,EAAS,kBAAkB;SAC7E,MAAK;SACL,gBAAc,EAAS;SACvB,cAAY,EAAE,mDAAmD,sBAAsB;SACvF,OAAO;UACL,OAAO;UACP,QAAQ;UACR,cAAc;UACd,iBAAiB,EAAS,oBACtB,mCACA;UACJ,QAAQ;UACR,QAAQ;UACR,UAAU;UACV,YAAY;UACb;mBAED,kBAAC,OAAD,EACE,OAAO;UACL,OAAO;UACP,QAAQ;UACR,cAAc;UACd,iBAAiB;UACjB,UAAU;UACV,KAAK;UACL,MAAM,EAAS,oBAAoB,KAAK;UACxC,YAAY;UACb,EACD,CAAA;SACK,CAAA,CACL;;OACN,kBAAC,OAAD;QAAK,OAAO;SAAE,SAAS;SAAQ,YAAY;SAAU,gBAAgB;SAAiB;kBAAtF,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;SAAO,OAAO;mBAAa,EAAE,iDAAiD,eAAe;SAAS,CAAA,EACtG,kBAAC,KAAD;SAAG,OAAO;mBACP,EAAE,gDAAgD,8CAA8C;SAC/F,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,UAAD;SACE,eAAe,EAAa,eAAe,CAAC,EAAS,YAAY;SACjE,MAAK;SACL,gBAAc,EAAS;SACvB,cAAY,EAAE,iDAAiD,eAAe;SAC9E,OAAO;UACL,OAAO;UACP,QAAQ;UACR,cAAc;UACd,iBAAiB,EAAS,cAAc,mCAAmC;UAC3E,QAAQ;UACR,QAAQ;UACR,UAAU;UACV,YAAY;UACb;mBAED,kBAAC,OAAD,EACE,OAAO;UACL,OAAO;UACP,QAAQ;UACR,cAAc;UACd,iBAAiB;UACjB,UAAU;UACV,KAAK;UACL,MAAM,EAAS,cAAc,KAAK;UAClC,YAAY;UACb,EACD,CAAA;SACK,CAAA,CACL;;OACN,kBAAC,OAAD;QAAK,OAAO;SAAE,SAAS;SAAQ,YAAY;SAAU,gBAAgB;SAAiB;kBAAtF,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;SAAO,OAAO;mBAAa,EAAE,gDAAgD,aAAa;SAAS,CAAA,EACnG,kBAAC,KAAD;SAAG,OAAO;mBACP,EAAE,+CAA+C,2CAA2C;SAC3F,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,UAAD;SACE,eAAe,EAAa,qBAAqB,CAAC,EAAS,kBAAkB;SAC7E,MAAK;SACL,gBAAc,EAAS;SACvB,cAAY,EAAE,gDAAgD,aAAa;SAC3E,OAAO;UACL,OAAO;UACP,QAAQ;UACR,cAAc;UACd,iBAAiB,EAAS,oBACtB,mCACA;UACJ,QAAQ;UACR,QAAQ;UACR,UAAU;UACV,YAAY;UACb;mBAED,kBAAC,OAAD,EACE,OAAO;UACL,OAAO;UACP,QAAQ;UACR,cAAc;UACd,iBAAiB;UACjB,UAAU;UACV,KAAK;UACL,MAAM,EAAS,oBAAoB,KAAK;UACxC,YAAY;UACb,EACD,CAAA;SACK,CAAA,CACL;;OACF;QACF;;IACF;;EACF,CAAA;EAER"}