@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

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":"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"}

package/dist/bigconsole/pages/WidgetDemoPage.js

@@ -1,107 +1,144 @@
 import e from "../components/widgets/WidgetWrapper.js";
 import "../components/widgets/index.js";
 import { useMemo as t, useState as n } from "react";
-import { IllustratedEmptyState as r, PagePurpose as i } from "@burdenoff/fe-libs/ui";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { IllustratedEmptyState as i, PagePurpose as a } from "@burdenoff/fe-libs/ui";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/pages/WidgetDemoPage.tsx
-var s = [
+var c = [
 	{
 		type: "metric_card",
 		title: "Metric Card",
-		description: "Single metric with trend and sparkline"
+		titleKey: "bigconsole.widgetDemo.type.metricCard.title",
+		description: "Single metric with trend and sparkline",
+		descriptionKey: "bigconsole.widgetDemo.type.metricCard.description"
 	},
 	{
 		type: "kpi_card_comparison",
 		title: "KPI Card Comparison",
-		description: "Multiple KPIs with comparisons"
+		titleKey: "bigconsole.widgetDemo.type.kpiCardComparison.title",
+		description: "Multiple KPIs with comparisons",
+		descriptionKey: "bigconsole.widgetDemo.type.kpiCardComparison.description"
 	},
 	{
 		type: "chart",
 		title: "Chart (Line/Bar/Area)",
-		description: "Time-series data visualization"
+		titleKey: "bigconsole.widgetDemo.type.chart.title",
+		description: "Time-series data visualization",
+		descriptionKey: "bigconsole.widgetDemo.type.chart.description"
 	},
 	{
 		type: "funnel_chart",
 		title: "Funnel Chart",
-		description: "Conversion funnel with stages"
+		titleKey: "bigconsole.widgetDemo.type.funnelChart.title",
+		description: "Conversion funnel with stages",
+		descriptionKey: "bigconsole.widgetDemo.type.funnelChart.description"
 	},
 	{
 		type: "table",
 		title: "Table",
-		description: "Data table with sort/filter/pagination"
+		titleKey: "bigconsole.widgetDemo.type.table.title",
+		description: "Data table with sort/filter/pagination",
+		descriptionKey: "bigconsole.widgetDemo.type.table.description"
 	},
 	{
 		type: "pivot_table",
 		title: "Pivot Table",
-		description: "Multi-dimensional data analysis"
+		titleKey: "bigconsole.widgetDemo.type.pivotTable.title",
+		description: "Multi-dimensional data analysis",
+		descriptionKey: "bigconsole.widgetDemo.type.pivotTable.description"
 	},
 	{
 		type: "gauge",
 		title: "Gauge",
-		description: "Circular/linear gauge with thresholds"
+		titleKey: "bigconsole.widgetDemo.type.gauge.title",
+		description: "Circular/linear gauge with thresholds",
+		descriptionKey: "bigconsole.widgetDemo.type.gauge.description"
 	},
 	{
 		type: "progress",
 		title: "Progress",
-		description: "Progress bar with milestones"
+		titleKey: "bigconsole.widgetDemo.type.progress.title",
+		description: "Progress bar with milestones",
+		descriptionKey: "bigconsole.widgetDemo.type.progress.description"
 	},
 	{
 		type: "list",
 		title: "List",
-		description: "Scrollable list with items"
+		titleKey: "bigconsole.widgetDemo.type.list.title",
+		description: "Scrollable list with items",
+		descriptionKey: "bigconsole.widgetDemo.type.list.description"
 	},
 	{
 		type: "form",
 		title: "Form (Adaptive Card)",
-		description: "Interactive form with inputs"
+		titleKey: "bigconsole.widgetDemo.type.form.title",
+		description: "Interactive form with inputs",
+		descriptionKey: "bigconsole.widgetDemo.type.form.description"
 	},
 	{
 		type: "text",
 		title: "Text (Markdown)",
-		description: "Rich text with markdown support"
+		titleKey: "bigconsole.widgetDemo.type.text.title",
+		description: "Rich text with markdown support",
+		descriptionKey: "bigconsole.widgetDemo.type.text.description"
 	},
 	{
 		type: "iframe",
 		title: "iFrame",
-		description: "Embedded external content"
+		titleKey: "bigconsole.widgetDemo.type.iframe.title",
+		description: "Embedded external content",
+		descriptionKey: "bigconsole.widgetDemo.type.iframe.description"
 	},
 	{
 		type: "map",
 		title: "Map",
-		description: "Geographic data with markers"
+		titleKey: "bigconsole.widgetDemo.type.map.title",
+		description: "Geographic data with markers",
+		descriptionKey: "bigconsole.widgetDemo.type.map.description"
 	},
 	{
 		type: "heatmap",
 		title: "Heatmap",
-		description: "Grid visualization with color intensity"
+		titleKey: "bigconsole.widgetDemo.type.heatmap.title",
+		description: "Grid visualization with color intensity",
+		descriptionKey: "bigconsole.widgetDemo.type.heatmap.description"
 	},
 	{
 		type: "calendar",
 		title: "Calendar",
-		description: "Event calendar view"
+		titleKey: "bigconsole.widgetDemo.type.calendar.title",
+		description: "Event calendar view",
+		descriptionKey: "bigconsole.widgetDemo.type.calendar.description"
 	},
 	{
 		type: "kanban",
 		title: "Kanban",
-		description: "Task board with columns"
+		titleKey: "bigconsole.widgetDemo.type.kanban.title",
+		description: "Task board with columns",
+		descriptionKey: "bigconsole.widgetDemo.type.kanban.description"
 	},
 	{
 		type: "timeline",
 		title: "Timeline (Gantt)",
-		description: "Project timeline with tasks"
+		titleKey: "bigconsole.widgetDemo.type.timeline.title",
+		description: "Project timeline with tasks",
+		descriptionKey: "bigconsole.widgetDemo.type.timeline.description"
 	},
 	{
 		type: "custom",
 		title: "Custom",
-		description: "User-defined widget rendering"
+		titleKey: "bigconsole.widgetDemo.type.custom.title",
+		description: "User-defined widget rendering",
+		descriptionKey: "bigconsole.widgetDemo.type.custom.description"
 	}
-], c = () => {
-	let [c, l] = n(""), [u, d] = n("grid"), f = t(() => (c ? s.filter((e) => e.type.includes(c.toLowerCase()) || e.title.toLowerCase().includes(c.toLowerCase())) : s).map((e, t) => ({
+], l = () => {
+	let { t: l } = r(), [u, d] = n(""), [f, p] = n("grid"), m = t(() => (u ? c.filter((e) => e.type.includes(u.toLowerCase()) || e.title.toLowerCase().includes(u.toLowerCase())) : c).map((e, t) => ({
 		id: `demo-${e.type}`,
 		pageId: "demo-page",
 		dashboardId: "demo-dashboard",
 		type: e.type,
-		title: e.title,
+		title: l(e.titleKey, e.title),
 		config: {},
 		position: {
 			x: t % 3 * 4,
@@ -115,131 +152,132 @@ var s = [
 		positionHeight: 4,
 		refreshInterval: void 0,
 		lastRefreshedAt: void 0,
-		metadata: { description: e.description },
+		metadata: { description: l(e.descriptionKey, e.description) },
 		context: {},
 		translations: [],
 		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 		updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-	})), [c]);
-	return /* @__PURE__ */ o("div", {
+	})), [u, l]);
+	return /* @__PURE__ */ s("div", {
 		className: "h-full flex flex-col bg-bg-canvas",
 		children: [
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				className: "flex-shrink-0 border-b border-border-default bg-bg-surface px-6 py-4",
-				children: /* @__PURE__ */ o("div", {
+				children: /* @__PURE__ */ s("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h1", {
+					children: [/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("h1", {
 						className: "text-xl font-semibold text-text-primary",
-						children: "Widget Demo"
-					}), /* @__PURE__ */ a("p", {
+						children: l("bigconsole.widgetDemo.header.title", "Widget Demo")
+					}), /* @__PURE__ */ o("p", {
 						className: "text-sm text-text-secondary mt-1",
-						children: "All 18 widget types - connect a DataSink for real data"
-					})] }), /* @__PURE__ */ o("div", {
+						children: l("bigconsole.widgetDemo.header.subtitle", "All 18 widget types - connect a DataSink for real data")
+					})] }), /* @__PURE__ */ s("div", {
 						className: "flex items-center gap-4",
-						children: [/* @__PURE__ */ o("div", {
+						children: [/* @__PURE__ */ s("div", {
 							className: "relative",
-							children: [/* @__PURE__ */ a("input", {
+							children: [/* @__PURE__ */ o("input", {
 								type: "text",
-								placeholder: "Filter widgets...",
-								value: c,
-								onChange: (e) => l(e.target.value),
+								placeholder: l("bigconsole.widgetDemo.filter.placeholder", "Filter widgets..."),
+								value: u,
+								onChange: (e) => d(e.target.value),
 								className: "\n                  w-64 px-3 py-2 pl-[3.25rem]\n                  text-sm\n                  bg-bg-sunken\n                  border border-border-default\n                  rounded-lg\n                  text-text-primary\n                  placeholder:text-text-tertiary\n                  focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                "
-							}), /* @__PURE__ */ a("svg", {
+							}), /* @__PURE__ */ o("svg", {
 								className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary",
 								fill: "none",
 								stroke: "currentColor",
 								viewBox: "0 0 24 24",
-								children: /* @__PURE__ */ a("path", {
+								children: /* @__PURE__ */ o("path", {
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
 									strokeWidth: 2,
 									d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
 								})
 							})]
-						}), /* @__PURE__ */ o("div", {
+						}), /* @__PURE__ */ s("div", {
 							className: "flex items-center bg-bg-sunken rounded-lg p-1",
-							children: [/* @__PURE__ */ a("button", {
+							children: [/* @__PURE__ */ o("button", {
 								type: "button",
-								onClick: () => d("grid"),
+								onClick: () => p("grid"),
 								className: `
                   px-3 py-1.5 text-sm font-medium rounded
                   transition-colors
-                  ${u === "grid" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}
+                  ${f === "grid" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}
                 `,
-								children: "Grid"
-							}), /* @__PURE__ */ a("button", {
+								children: l("bigconsole.widgetDemo.viewToggle.grid", "Grid")
+							}), /* @__PURE__ */ o("button", {
 								type: "button",
-								onClick: () => d("list"),
+								onClick: () => p("list"),
 								className: `
                   px-3 py-1.5 text-sm font-medium rounded
                   transition-colors
-                  ${u === "list" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}
+                  ${f === "list" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}
                 `,
-								children: "List"
+								children: l("bigconsole.widgetDemo.viewToggle.list", "List")
 							})]
 						})]
 					})]
 				})
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", {
 				className: "flex-1 overflow-auto p-6",
 				children: [
-					/* @__PURE__ */ a(i, {
+					/* @__PURE__ */ o(a, {
 						className: "mb-[var(--space-sectionGap)]",
-						children: "This gallery previews every widget type BigConsole can render on a dashboard — metrics, charts, tables, maps, kanban boards and more. Use it to see what each widget looks like and pick the right one before wiring it to a real DataSink in the dashboard builder."
+						children: l("bigconsole.widgetDemo.pagePurpose", "This gallery previews every widget type BigConsole can render on a dashboard — metrics, charts, tables, maps, kanban boards and more. Use it to see what each widget looks like and pick the right one before wiring it to a real DataSink in the dashboard builder.")
 					}),
-					/* @__PURE__ */ a("div", {
-						className: u === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" : "flex flex-col gap-4",
-						children: f.map((t) => {
-							let n = s.find((e) => e.type === t.type);
-							return /* @__PURE__ */ a("div", {
-								className: u === "grid" ? "h-80" : "h-64",
-								children: /* @__PURE__ */ o("div", {
+					/* @__PURE__ */ o("div", {
+						className: f === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" : "flex flex-col gap-4",
+						children: m.map((t) => {
+							let n = c.find((e) => e.type === t.type);
+							return /* @__PURE__ */ o("div", {
+								className: f === "grid" ? "h-80" : "h-64",
+								children: /* @__PURE__ */ s("div", {
 									className: "h-full flex flex-col",
-									children: [/* @__PURE__ */ o("div", {
+									children: [/* @__PURE__ */ s("div", {
 										className: "flex-shrink-0 mb-2",
-										children: [/* @__PURE__ */ o("span", {
+										children: [/* @__PURE__ */ s("span", {
 											className: "text-xs text-text-tertiary",
-											children: ["Type: ", /* @__PURE__ */ a("code", {
-												className: "font-mono text-action-primary-text",
-												children: t.type
-											})]
-										}), n && /* @__PURE__ */ o("span", {
+											children: [
+												l("bigconsole.widgetDemo.widgetCard.typeLabel", "Type:"),
+												" ",
+												/* @__PURE__ */ o("code", {
+													className: "font-mono text-action-primary-text",
+													children: t.type
+												})
+											]
+										}), n && /* @__PURE__ */ s("span", {
 											className: "text-xs text-text-tertiary ml-2",
-											children: ["- ", n.description]
+											children: ["- ", l(n.descriptionKey, n.description)]
 										})]
-									}), /* @__PURE__ */ a("div", {
+									}), /* @__PURE__ */ o("div", {
 										className: "flex-1 min-h-0",
-										children: /* @__PURE__ */ a(e, { widget: t })
+										children: /* @__PURE__ */ o(e, { widget: t })
 									})]
 								})
 							}, t.id);
 						})
 					}),
-					f.length === 0 && /* @__PURE__ */ a(r, {
+					m.length === 0 && /* @__PURE__ */ o(i, {
 						illustration: "empty-search",
-						title: "No widgets match your filter",
-						description: "Try a different search term to preview a widget type."
+						title: l("bigconsole.widgetDemo.emptyState.title", "No widgets match your filter"),
+						description: l("bigconsole.widgetDemo.emptyState.description", "Try a different search term to preview a widget type.")
 					})
 				]
 			}),
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				className: "flex-shrink-0 border-t border-border-default bg-bg-surface px-6 py-3",
-				children: /* @__PURE__ */ o("div", {
+				children: /* @__PURE__ */ s("div", {
 					className: "flex items-center justify-between text-sm text-text-secondary",
-					children: [/* @__PURE__ */ o("span", { children: [
-						"Showing ",
-						f.length,
-						" of ",
-						s.length,
-						" widget types"
-					] }), /* @__PURE__ */ a("span", { children: "Widgets show empty state until connected to DataSink + Parser" })]
+					children: [/* @__PURE__ */ o("span", { children: l("bigconsole.widgetDemo.footer.showing", "Showing {{shown}} of {{total}} widget types", {
+						shown: m.length,
+						total: c.length
+					}) }), /* @__PURE__ */ o("span", { children: l("bigconsole.widgetDemo.footer.hint", "Widgets show empty state until connected to DataSink + Parser") })]
 				})
 			})
 		]
 	});
 };
 //#endregion
-export { c as WidgetDemoPage, c as default };
+export { l as WidgetDemoPage, l as default };
 
 //# sourceMappingURL=WidgetDemoPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WidgetDemoPage.js","names":[],"sources":["../../../src/bigconsole/pages/WidgetDemoPage.tsx"],"sourcesContent":["/**\n * WidgetDemoPage\n *\n * Demonstrates all 18 widget types.\n * Widgets show empty states when no real data is available.\n * Connect a DataSink + Parser pipeline for real data processing.\n */\n\nimport { type FC, useState, useMemo } from 'react';\nimport { IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport type { Widget } from '../types';\nimport { WidgetWrapper } from '../components/widgets';\n\n// Widget type string literals\ntype WidgetType =\n  | 'metric_card'\n  | 'kpi_card_comparison'\n  | 'chart'\n  | 'funnel_chart'\n  | 'table'\n  | 'pivot_table'\n  | 'gauge'\n  | 'progress'\n  | 'list'\n  | 'form'\n  | 'text'\n  | 'iframe'\n  | 'map'\n  | 'heatmap'\n  | 'calendar'\n  | 'kanban'\n  | 'timeline'\n  | 'custom';\n\n// ============================================================================\n// Widget Types for Demo\n// ============================================================================\n\nconst WIDGET_TYPES: { type: WidgetType; title: string; description: string }[] = [\n  { type: 'metric_card', title: 'Metric Card', description: 'Single metric with trend and sparkline' },\n  { type: 'kpi_card_comparison', title: 'KPI Card Comparison', description: 'Multiple KPIs with comparisons' },\n  { type: 'chart', title: 'Chart (Line/Bar/Area)', description: 'Time-series data visualization' },\n  { type: 'funnel_chart', title: 'Funnel Chart', description: 'Conversion funnel with stages' },\n  { type: 'table', title: 'Table', description: 'Data table with sort/filter/pagination' },\n  { type: 'pivot_table', title: 'Pivot Table', description: 'Multi-dimensional data analysis' },\n  { type: 'gauge', title: 'Gauge', description: 'Circular/linear gauge with thresholds' },\n  { type: 'progress', title: 'Progress', description: 'Progress bar with milestones' },\n  { type: 'list', title: 'List', description: 'Scrollable list with items' },\n  { type: 'form', title: 'Form (Adaptive Card)', description: 'Interactive form with inputs' },\n  { type: 'text', title: 'Text (Markdown)', description: 'Rich text with markdown support' },\n  { type: 'iframe', title: 'iFrame', description: 'Embedded external content' },\n  { type: 'map', title: 'Map', description: 'Geographic data with markers' },\n  { type: 'heatmap', title: 'Heatmap', description: 'Grid visualization with color intensity' },\n  { type: 'calendar', title: 'Calendar', description: 'Event calendar view' },\n  { type: 'kanban', title: 'Kanban', description: 'Task board with columns' },\n  { type: 'timeline', title: 'Timeline (Gantt)', description: 'Project timeline with tasks' },\n  { type: 'custom', title: 'Custom', description: 'User-defined widget rendering' },\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const WidgetDemoPage: FC = () => {\n  const [filter, setFilter] = useState('');\n  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');\n\n  // Generate demo widgets from all types\n  const demoWidgets = useMemo(() => {\n    const filtered = filter\n      ? WIDGET_TYPES.filter(\n          (w) => w.type.includes(filter.toLowerCase()) || w.title.toLowerCase().includes(filter.toLowerCase())\n        )\n      : WIDGET_TYPES;\n\n    return filtered.map((widgetDef, index): Widget => ({\n      id: `demo-${widgetDef.type}`,\n      pageId: 'demo-page',\n      dashboardId: 'demo-dashboard',\n      type: widgetDef.type,\n      title: widgetDef.title,\n      // No data source - widgets show empty state until connected to DataSink\n      config: {},\n      position: {\n        x: (index % 3) * 4,\n        y: Math.floor(index / 3) * 4,\n        width: 4,\n        height: 4,\n      },\n      positionX: (index % 3) * 4,\n      positionY: Math.floor(index / 3) * 4,\n      positionWidth: 4,\n      positionHeight: 4,\n      refreshInterval: undefined,\n      lastRefreshedAt: undefined,\n      metadata: { description: widgetDef.description },\n      context: {},\n      translations: [],\n      createdAt: new Date().toISOString(),\n      updatedAt: new Date().toISOString(),\n    }));\n  }, [filter]);\n\n  return (\n    <div className=\"h-full flex flex-col bg-bg-canvas\">\n      {/* Header */}\n      <div className=\"flex-shrink-0 border-b border-border-default bg-bg-surface px-6 py-4\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <h1 className=\"text-xl font-semibold text-text-primary\">Widget Demo</h1>\n            <p className=\"text-sm text-text-secondary mt-1\">All 18 widget types - connect a DataSink for real data</p>\n          </div>\n          <div className=\"flex items-center gap-4\">\n            {/* Search Filter */}\n            <div className=\"relative\">\n              <input\n                type=\"text\"\n                placeholder=\"Filter widgets...\"\n                value={filter}\n                onChange={(e) => setFilter(e.target.value)}\n                className=\"\n                  w-64 px-3 py-2 pl-[3.25rem]\n                  text-sm\n                  bg-bg-sunken\n                  border border-border-default\n                  rounded-lg\n                  text-text-primary\n                  placeholder:text-text-tertiary\n                  focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                \"\n              />\n              <svg\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n                />\n              </svg>\n            </div>\n\n            {/* View Toggle */}\n            <div className=\"flex items-center bg-bg-sunken rounded-lg p-1\">\n              <button\n                type=\"button\"\n                onClick={() => setViewMode('grid')}\n                className={`\n                  px-3 py-1.5 text-sm font-medium rounded\n                  transition-colors\n                  ${\n                    viewMode === 'grid'\n                      ? 'bg-bg-surface text-text-primary shadow-sm'\n                      : 'text-text-secondary hover:text-text-primary'\n                  }\n                `}\n              >\n                Grid\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setViewMode('list')}\n                className={`\n                  px-3 py-1.5 text-sm font-medium rounded\n                  transition-colors\n                  ${\n                    viewMode === 'list'\n                      ? 'bg-bg-surface text-text-primary shadow-sm'\n                      : 'text-text-secondary hover:text-text-primary'\n                  }\n                `}\n              >\n                List\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Widget Grid */}\n      <div className=\"flex-1 overflow-auto p-6\">\n        <PagePurpose className=\"mb-[var(--space-sectionGap)]\">\n          This gallery previews every widget type BigConsole can render on a dashboard — metrics, charts, tables, maps,\n          kanban boards and more. Use it to see what each widget looks like and pick the right one before wiring it to a\n          real DataSink in the dashboard builder.\n        </PagePurpose>\n\n        <div\n          className={\n            viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6' : 'flex flex-col gap-4'\n          }\n        >\n          {demoWidgets.map((widget) => {\n            const widgetDef = WIDGET_TYPES.find((w) => w.type === widget.type);\n            return (\n              <div key={widget.id} className={viewMode === 'grid' ? 'h-80' : 'h-64'}>\n                <div className=\"h-full flex flex-col\">\n                  {/* Widget Description */}\n                  <div className=\"flex-shrink-0 mb-2\">\n                    <span className=\"text-xs text-text-tertiary\">\n                      Type: <code className=\"font-mono text-action-primary-text\">{widget.type}</code>\n                    </span>\n                    {widgetDef && <span className=\"text-xs text-text-tertiary ml-2\">- {widgetDef.description}</span>}\n                  </div>\n                  {/* Widget */}\n                  <div className=\"flex-1 min-h-0\">\n                    <WidgetWrapper widget={widget} />\n                  </div>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Empty State */}\n        {demoWidgets.length === 0 && (\n          <IllustratedEmptyState\n            illustration=\"empty-search\"\n            title=\"No widgets match your filter\"\n            description=\"Try a different search term to preview a widget type.\"\n          />\n        )}\n      </div>\n\n      {/* Footer Stats */}\n      <div className=\"flex-shrink-0 border-t border-border-default bg-bg-surface px-6 py-3\">\n        <div className=\"flex items-center justify-between text-sm text-text-secondary\">\n          <span>\n            Showing {demoWidgets.length} of {WIDGET_TYPES.length} widget types\n          </span>\n          <span>Widgets show empty state until connected to DataSink + Parser</span>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default WidgetDemoPage;\n"],"mappings":"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"}
+{"version":3,"file":"WidgetDemoPage.js","names":[],"sources":["../../../src/bigconsole/pages/WidgetDemoPage.tsx"],"sourcesContent":["/**\n * WidgetDemoPage\n *\n * Demonstrates all 18 widget types.\n * Widgets show empty states when no real data is available.\n * Connect a DataSink + Parser pipeline for real data processing.\n */\n\nimport { type FC, useState, useMemo } from 'react';\nimport { IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { Widget } from '../types';\nimport { WidgetWrapper } from '../components/widgets';\n\n// Widget type string literals\ntype WidgetType =\n  | 'metric_card'\n  | 'kpi_card_comparison'\n  | 'chart'\n  | 'funnel_chart'\n  | 'table'\n  | 'pivot_table'\n  | 'gauge'\n  | 'progress'\n  | 'list'\n  | 'form'\n  | 'text'\n  | 'iframe'\n  | 'map'\n  | 'heatmap'\n  | 'calendar'\n  | 'kanban'\n  | 'timeline'\n  | 'custom';\n\n// ============================================================================\n// Widget Types for Demo\n// ============================================================================\n\nconst WIDGET_TYPES: {\n  type: WidgetType;\n  title: string;\n  titleKey: string;\n  description: string;\n  descriptionKey: string;\n}[] = [\n  {\n    type: 'metric_card',\n    title: 'Metric Card',\n    titleKey: 'bigconsole.widgetDemo.type.metricCard.title',\n    description: 'Single metric with trend and sparkline',\n    descriptionKey: 'bigconsole.widgetDemo.type.metricCard.description',\n  },\n  {\n    type: 'kpi_card_comparison',\n    title: 'KPI Card Comparison',\n    titleKey: 'bigconsole.widgetDemo.type.kpiCardComparison.title',\n    description: 'Multiple KPIs with comparisons',\n    descriptionKey: 'bigconsole.widgetDemo.type.kpiCardComparison.description',\n  },\n  {\n    type: 'chart',\n    title: 'Chart (Line/Bar/Area)',\n    titleKey: 'bigconsole.widgetDemo.type.chart.title',\n    description: 'Time-series data visualization',\n    descriptionKey: 'bigconsole.widgetDemo.type.chart.description',\n  },\n  {\n    type: 'funnel_chart',\n    title: 'Funnel Chart',\n    titleKey: 'bigconsole.widgetDemo.type.funnelChart.title',\n    description: 'Conversion funnel with stages',\n    descriptionKey: 'bigconsole.widgetDemo.type.funnelChart.description',\n  },\n  {\n    type: 'table',\n    title: 'Table',\n    titleKey: 'bigconsole.widgetDemo.type.table.title',\n    description: 'Data table with sort/filter/pagination',\n    descriptionKey: 'bigconsole.widgetDemo.type.table.description',\n  },\n  {\n    type: 'pivot_table',\n    title: 'Pivot Table',\n    titleKey: 'bigconsole.widgetDemo.type.pivotTable.title',\n    description: 'Multi-dimensional data analysis',\n    descriptionKey: 'bigconsole.widgetDemo.type.pivotTable.description',\n  },\n  {\n    type: 'gauge',\n    title: 'Gauge',\n    titleKey: 'bigconsole.widgetDemo.type.gauge.title',\n    description: 'Circular/linear gauge with thresholds',\n    descriptionKey: 'bigconsole.widgetDemo.type.gauge.description',\n  },\n  {\n    type: 'progress',\n    title: 'Progress',\n    titleKey: 'bigconsole.widgetDemo.type.progress.title',\n    description: 'Progress bar with milestones',\n    descriptionKey: 'bigconsole.widgetDemo.type.progress.description',\n  },\n  {\n    type: 'list',\n    title: 'List',\n    titleKey: 'bigconsole.widgetDemo.type.list.title',\n    description: 'Scrollable list with items',\n    descriptionKey: 'bigconsole.widgetDemo.type.list.description',\n  },\n  {\n    type: 'form',\n    title: 'Form (Adaptive Card)',\n    titleKey: 'bigconsole.widgetDemo.type.form.title',\n    description: 'Interactive form with inputs',\n    descriptionKey: 'bigconsole.widgetDemo.type.form.description',\n  },\n  {\n    type: 'text',\n    title: 'Text (Markdown)',\n    titleKey: 'bigconsole.widgetDemo.type.text.title',\n    description: 'Rich text with markdown support',\n    descriptionKey: 'bigconsole.widgetDemo.type.text.description',\n  },\n  {\n    type: 'iframe',\n    title: 'iFrame',\n    titleKey: 'bigconsole.widgetDemo.type.iframe.title',\n    description: 'Embedded external content',\n    descriptionKey: 'bigconsole.widgetDemo.type.iframe.description',\n  },\n  {\n    type: 'map',\n    title: 'Map',\n    titleKey: 'bigconsole.widgetDemo.type.map.title',\n    description: 'Geographic data with markers',\n    descriptionKey: 'bigconsole.widgetDemo.type.map.description',\n  },\n  {\n    type: 'heatmap',\n    title: 'Heatmap',\n    titleKey: 'bigconsole.widgetDemo.type.heatmap.title',\n    description: 'Grid visualization with color intensity',\n    descriptionKey: 'bigconsole.widgetDemo.type.heatmap.description',\n  },\n  {\n    type: 'calendar',\n    title: 'Calendar',\n    titleKey: 'bigconsole.widgetDemo.type.calendar.title',\n    description: 'Event calendar view',\n    descriptionKey: 'bigconsole.widgetDemo.type.calendar.description',\n  },\n  {\n    type: 'kanban',\n    title: 'Kanban',\n    titleKey: 'bigconsole.widgetDemo.type.kanban.title',\n    description: 'Task board with columns',\n    descriptionKey: 'bigconsole.widgetDemo.type.kanban.description',\n  },\n  {\n    type: 'timeline',\n    title: 'Timeline (Gantt)',\n    titleKey: 'bigconsole.widgetDemo.type.timeline.title',\n    description: 'Project timeline with tasks',\n    descriptionKey: 'bigconsole.widgetDemo.type.timeline.description',\n  },\n  {\n    type: 'custom',\n    title: 'Custom',\n    titleKey: 'bigconsole.widgetDemo.type.custom.title',\n    description: 'User-defined widget rendering',\n    descriptionKey: 'bigconsole.widgetDemo.type.custom.description',\n  },\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const WidgetDemoPage: FC = () => {\n  const { t } = useI18n();\n  const [filter, setFilter] = useState('');\n  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');\n\n  // Generate demo widgets from all types\n  const demoWidgets = useMemo(() => {\n    const filtered = filter\n      ? WIDGET_TYPES.filter(\n          (w) => w.type.includes(filter.toLowerCase()) || w.title.toLowerCase().includes(filter.toLowerCase())\n        )\n      : WIDGET_TYPES;\n\n    return filtered.map((widgetDef, index): Widget => ({\n      id: `demo-${widgetDef.type}`,\n      pageId: 'demo-page',\n      dashboardId: 'demo-dashboard',\n      type: widgetDef.type,\n      title: t(widgetDef.titleKey, widgetDef.title),\n      // No data source - widgets show empty state until connected to DataSink\n      config: {},\n      position: {\n        x: (index % 3) * 4,\n        y: Math.floor(index / 3) * 4,\n        width: 4,\n        height: 4,\n      },\n      positionX: (index % 3) * 4,\n      positionY: Math.floor(index / 3) * 4,\n      positionWidth: 4,\n      positionHeight: 4,\n      refreshInterval: undefined,\n      lastRefreshedAt: undefined,\n      metadata: { description: t(widgetDef.descriptionKey, widgetDef.description) },\n      context: {},\n      translations: [],\n      createdAt: new Date().toISOString(),\n      updatedAt: new Date().toISOString(),\n    }));\n  }, [filter, t]);\n\n  return (\n    <div className=\"h-full flex flex-col bg-bg-canvas\">\n      {/* Header */}\n      <div className=\"flex-shrink-0 border-b border-border-default bg-bg-surface px-6 py-4\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <h1 className=\"text-xl font-semibold text-text-primary\">\n              {t('bigconsole.widgetDemo.header.title', 'Widget Demo')}\n            </h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {t('bigconsole.widgetDemo.header.subtitle', 'All 18 widget types - connect a DataSink for real data')}\n            </p>\n          </div>\n          <div className=\"flex items-center gap-4\">\n            {/* Search Filter */}\n            <div className=\"relative\">\n              <input\n                type=\"text\"\n                placeholder={t('bigconsole.widgetDemo.filter.placeholder', 'Filter widgets...')}\n                value={filter}\n                onChange={(e) => setFilter(e.target.value)}\n                className=\"\n                  w-64 px-3 py-2 pl-[3.25rem]\n                  text-sm\n                  bg-bg-sunken\n                  border border-border-default\n                  rounded-lg\n                  text-text-primary\n                  placeholder:text-text-tertiary\n                  focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                \"\n              />\n              <svg\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n                />\n              </svg>\n            </div>\n\n            {/* View Toggle */}\n            <div className=\"flex items-center bg-bg-sunken rounded-lg p-1\">\n              <button\n                type=\"button\"\n                onClick={() => setViewMode('grid')}\n                className={`\n                  px-3 py-1.5 text-sm font-medium rounded\n                  transition-colors\n                  ${\n                    viewMode === 'grid'\n                      ? 'bg-bg-surface text-text-primary shadow-sm'\n                      : 'text-text-secondary hover:text-text-primary'\n                  }\n                `}\n              >\n                {t('bigconsole.widgetDemo.viewToggle.grid', 'Grid')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setViewMode('list')}\n                className={`\n                  px-3 py-1.5 text-sm font-medium rounded\n                  transition-colors\n                  ${\n                    viewMode === 'list'\n                      ? 'bg-bg-surface text-text-primary shadow-sm'\n                      : 'text-text-secondary hover:text-text-primary'\n                  }\n                `}\n              >\n                {t('bigconsole.widgetDemo.viewToggle.list', 'List')}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Widget Grid */}\n      <div className=\"flex-1 overflow-auto p-6\">\n        <PagePurpose className=\"mb-[var(--space-sectionGap)]\">\n          {t(\n            'bigconsole.widgetDemo.pagePurpose',\n            'This gallery previews every widget type BigConsole can render on a dashboard — metrics, charts, tables, maps, kanban boards and more. Use it to see what each widget looks like and pick the right one before wiring it to a real DataSink in the dashboard builder.'\n          )}\n        </PagePurpose>\n\n        <div\n          className={\n            viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6' : 'flex flex-col gap-4'\n          }\n        >\n          {demoWidgets.map((widget) => {\n            const widgetDef = WIDGET_TYPES.find((w) => w.type === widget.type);\n            return (\n              <div key={widget.id} className={viewMode === 'grid' ? 'h-80' : 'h-64'}>\n                <div className=\"h-full flex flex-col\">\n                  {/* Widget Description */}\n                  <div className=\"flex-shrink-0 mb-2\">\n                    <span className=\"text-xs text-text-tertiary\">\n                      {t('bigconsole.widgetDemo.widgetCard.typeLabel', 'Type:')}{' '}\n                      <code className=\"font-mono text-action-primary-text\">{widget.type}</code>\n                    </span>\n                    {widgetDef && (\n                      <span className=\"text-xs text-text-tertiary ml-2\">\n                        - {t(widgetDef.descriptionKey, widgetDef.description)}\n                      </span>\n                    )}\n                  </div>\n                  {/* Widget */}\n                  <div className=\"flex-1 min-h-0\">\n                    <WidgetWrapper widget={widget} />\n                  </div>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Empty State */}\n        {demoWidgets.length === 0 && (\n          <IllustratedEmptyState\n            illustration=\"empty-search\"\n            title={t('bigconsole.widgetDemo.emptyState.title', 'No widgets match your filter')}\n            description={t(\n              'bigconsole.widgetDemo.emptyState.description',\n              'Try a different search term to preview a widget type.'\n            )}\n          />\n        )}\n      </div>\n\n      {/* Footer Stats */}\n      <div className=\"flex-shrink-0 border-t border-border-default bg-bg-surface px-6 py-3\">\n        <div className=\"flex items-center justify-between text-sm text-text-secondary\">\n          <span>\n            {t('bigconsole.widgetDemo.footer.showing', 'Showing {{shown}} of {{total}} widget types', {\n              shown: demoWidgets.length,\n              total: WIDGET_TYPES.length,\n            })}\n          </span>\n          <span>\n            {t('bigconsole.widgetDemo.footer.hint', 'Widgets show empty state until connected to DataSink + Parser')}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default WidgetDemoPage;\n"],"mappings":";;;;;;;AAuCA,IAAM,IAMA;CACJ;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;EACV,aAAa;EACb,gBAAgB;EACjB;CACF,EAMY,UAA2B;CACtC,IAAM,EAAE,SAAM,GAAS,E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"}