npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.1004.3 → 2026.1004.4 - Mend

@burdenoff/microfe-bigconsole 2026.1004.3 → 2026.1004.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

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

	@@ -1 +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 { 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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"}
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 { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Settings, Save, RotateCcw } from 'lucide-react';\n\nimport {\n type BigConsoleSettings,\n DEFAULT_SETTINGS,\n loadBigConsoleSettings,\n saveBigConsoleSettings,\n} from '../hooks/useBigConsoleSettings';\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const SettingsPage: FC = memo(function SettingsPage() {\n const { t } = useI18n();\n const [settings, setSettings] = useState<BigConsoleSettings>(loadBigConsoleSettings);\n const [saved, setSaved] = useState(false);\n const [saveError, setSaveError] = 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 const success = saveBigConsoleSettings(settings);\n setSaved(success);\n setSaveError(!success);\n }, [settings]);\n\n const handleReset = useCallback(() => {\n setSettings({ ...DEFAULT_SETTINGS });\n const success = saveBigConsoleSettings(DEFAULT_SETTINGS);\n setSaved(success);\n setSaveError(!success);\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 };\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: 'var(--font-size-body-sm)',\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: 1440, 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 {saveError && (\n <p role=\"alert\" className=\"mb-form-gap text-status-error-text\">\n {t('bigconsole.settings.actions.saveError', 'Your browser could not save these preferences. Try again.')}\n </p>\n )}\n <PagePurpose className=\"mb-[var(--space-sectionGap)]\">\n {t(\n 'bigconsole.settings.localDefaultsPurpose',\n 'These browser-local defaults apply when you add dashboard pages, widgets and data sinks. Display preferences update existing widgets in this browser. They do not change existing page layouts, widget refresh schedules or data sink cache settings, and are not shared with your team.'\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 className=\"grid gap-form-gap md:grid-cols-3\">\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) =>\n handleChange('defaultGridColumns', Math.min(24, Math.max(4, Number(e.target.value) \|\| 12)))\n }\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) =>\n handleChange('defaultWidgetHeight', Math.min(12, Math.max(1, Number(e.target.value) \|\| 4)))\n }\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 className=\"grid gap-form-gap md:grid-cols-2\">\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.newSinkHelp', 'Enable caching by default for new data sinks')}\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 flexShrink: 0,\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: 'var(--color-action-primary-text)',\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) =>\n handleChange('cacheTTLSeconds', Math.min(86400, Math.max(0, Number(e.target.value))))\n }\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 className=\"grid gap-form-gap md:grid-cols-3\">\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 flexShrink: 0,\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: 'var(--color-action-primary-text)',\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 flexShrink: 0,\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: 'var(--color-action-primary-text)',\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 flexShrink: 0,\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: 'var(--color-action-primary-text)',\n position: 'absolute',\n top: 3,\n left: settings.animationsEnabled ? 23 : 3,\n transition: 'left 200ms',\n }}\n />\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n});\n\nexport default SettingsPage;\n"],"mappings":"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"}

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

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

package/dist/bigconsole/pages/WidgetDemoPage.js CHANGED Viewed

@@ -1,15 +1,17 @@
-import { sectionSurfaceClasses as e } from "../components/common/sectionStyles.js";
-import { Section as t, SectionStack as n } from "../components/common/Section.js";
+import { useAppNavigate as e } from "../contexts/NavigationContext.js";
+import "../contexts/index.js";
+import { sectionSurfaceClasses as t } from "../components/common/sectionStyles.js";
+import { Section as n, SectionStack as r } from "../components/common/Section.js";
 import "../components/common/index.js";
-import { WIDGET_CATEGORY_LABELS as r } from "../components/widgets/WidgetRegistry.js";
-import i from "../components/widgets/WidgetWrapper.js";
+import { WIDGET_CATEGORY_LABELS as i } from "../components/widgets/WidgetRegistry.js";
+import a from "../components/widgets/WidgetWrapper.js";
 import "../components/widgets/index.js";
-import { useMemo as a, useState as o } from "react";
-import { IllustratedEmptyState as s, PagePurpose as c } from "@burdenoff/fe-libs/ui";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useMemo as o, useState as s } from "react";
+import { Button as c, IllustratedEmptyState as l, PagePurpose as u } from "@burdenoff/fe-libs/ui";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/pages/WidgetDemoPage.tsx
-var f = [
+var m = [
 	{
 		type: "metric_card",
 		title: "Metric Card",
@@ -154,27 +156,31 @@ var f = [
 		descriptionKey: "bigconsole.widgetDemo.type.custom.description",
 		category: "Custom"
 	}
-], p = [
+], h = [
 	"KPI",
 	"Visualization",
 	"Data",
 	"Content",
 	"Temporal",
 	"Custom"
-], m = {
+], g = {
 	KPI: "Single-number widgets for a headline figure and how it is trending.",
 	Visualization: "Chart widgets for comparing series, stages and distributions.",
 	Data: "Row-and-column widgets for browsing records in detail.",
 	Content: "Widgets that carry prose, forms or an embedded page.",
 	Temporal: "Widgets organised by date, schedule or workflow stage.",
 	Custom: "Widgets whose body you define yourself."
-}, h = () => {
-	let { t: h } = d(), [g, _] = o(""), [v, y] = o("grid"), b = a(() => (g ? f.filter((e) => e.type.includes(g.toLowerCase()) || e.title.toLowerCase().includes(g.toLowerCase())) : f).map((e, t) => ({
+}, _ = () => {
+	let { t: _ } = p(), v = e(), [y, b] = s(""), [x, S] = s("grid"), C = o(() => (y ? m.filter((e) => [
+		e.type,
+		_(e.titleKey, e.title),
+		_(e.descriptionKey, e.description)
+	].some((e) => e.toLowerCase().includes(y.trim().toLowerCase()))) : m).map((e, t) => ({
 		id: `demo-${e.type}`,
 		pageId: "demo-page",
 		dashboardId: "demo-dashboard",
 		type: e.type,
-		title: h(e.titleKey, e.title),
+		title: _(e.titleKey, e.title),
 		config: {},
 		position: {
 			x: t % 3 * 4,
@@ -188,126 +194,134 @@ var f = [
 		positionHeight: 4,
 		refreshInterval: void 0,
 		lastRefreshedAt: void 0,
-		metadata: { description: h(e.descriptionKey, e.description) },
+		metadata: { description: _(e.descriptionKey, e.description) },
 		context: {},
 		translations: [],
 		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 		updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-	})), [g, h]), x = a(() => {
+	})), [y, _]), w = o(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of b) {
-			let n = f.find((e) => e.type === t.type);
+		for (let t of C) {
+			let n = m.find((e) => e.type === t.type);
 			if (!n) continue;
 			let r = e.get(n.category);
 			r ? r.push(t) : e.set(n.category, [t]);
 		}
-		return p.filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
+		return h.filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
 			category: t,
-			label: r[t],
-			blurb: m[t],
+			label: i[t],
+			blurb: g[t],
 			widgets: e.get(t) ?? []
 		}));
-	}, [b]), S = v === "grid" ? "grid grid-cols-1 gap-form-gap sm:grid-cols-2 xl:grid-cols-3" : "flex flex-col gap-form-gap";
-	return /* @__PURE__ */ u("div", {
+	}, [C]), T = x === "grid" ? "grid grid-cols-1 gap-form-gap sm:grid-cols-2 xl:grid-cols-3" : "flex flex-col gap-form-gap";
+	return /* @__PURE__ */ f("div", {
 		className: "flex h-full min-w-0 flex-col bg-bg-canvas",
 		children: [
-			/* @__PURE__ */ l("section", {
+			/* @__PURE__ */ d("section", {
 				"aria-label": "Widget demo header",
-				className: `${e("bare", "neutral", "none")} flex-shrink-0 border-b border-[var(--color-border-subtle)] bg-bg-surface px-4 py-3 sm:px-6 sm:py-4`,
-				children: /* @__PURE__ */ u("div", {
+				className: `${t("bare", "neutral", "none")} flex-shrink-0 border-b border-[var(--color-border-subtle)] bg-bg-surface px-4 py-3 sm:px-6 sm:py-4`,
+				children: /* @__PURE__ */ f("div", {
 					className: "flex flex-col gap-control-gap lg:flex-row lg:items-center lg:justify-between",
-					children: [/* @__PURE__ */ u("div", {
+					children: [/* @__PURE__ */ f("div", {
 						className: "min-w-0",
-						children: [/* @__PURE__ */ l("h1", {
+						children: [/* @__PURE__ */ d("h1", {
 							className: "text-xl font-semibold text-text-primary",
-							children: h("bigconsole.widgetDemo.header.title", "Widget Demo")
-						}), /* @__PURE__ */ l("p", {
+							children: _("bigconsole.widgetDemo.header.title", "Widget Demo")
+						}), /* @__PURE__ */ d("p", {
 							className: "mt-1 text-sm text-text-secondary",
-							children: h("bigconsole.widgetDemo.header.subtitle", "All 18 widget types - connect a DataSink for real data")
+							children: _("bigconsole.widgetDemo.header.subtitle", "All 18 widget types - connect a DataSink for real data")
 						})]
-					}), /* @__PURE__ */ u("div", {
+					}), /* @__PURE__ */ f("div", {
 						className: "flex flex-wrap items-center gap-control-gap",
-						children: [/* @__PURE__ */ u("div", {
-							className: "relative min-w-0 flex-1 sm:flex-none",
-							children: [
-								/* @__PURE__ */ l("label", {
-									htmlFor: "widget-demo-filter",
-									className: "sr-only",
-									children: "Filter widget types"
-								}),
-								/* @__PURE__ */ l("input", {
-									id: "widget-demo-filter",
-									type: "text",
-									placeholder: h("bigconsole.widgetDemo.filter.placeholder", "Filter widgets..."),
-									value: g,
-									onChange: (e) => _(e.target.value),
-									className: "h-control-md w-full min-w-0 rounded-input border border-[var(--color-border-subtle)] bg-bg-sunken py-2 pl-[3.25rem] pr-3 text-sm text-text-primary placeholder:text-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface sm:w-64"
-								}),
-								/* @__PURE__ */ l("svg", {
-									"aria-hidden": "true",
-									className: "pointer-events-none absolute left-3 top-1/2 h-icon-sm w-icon-sm -translate-y-1/2 text-text-secondary",
-									fill: "none",
-									stroke: "currentColor",
-									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ l("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 2,
-										d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: "relative min-w-0 flex-1 sm:flex-none",
+								children: [
+									/* @__PURE__ */ d("label", {
+										htmlFor: "widget-demo-filter",
+										className: "sr-only",
+										children: "Filter widget types"
+									}),
+									/* @__PURE__ */ d("input", {
+										id: "widget-demo-filter",
+										type: "text",
+										placeholder: _("bigconsole.widgetDemo.filter.placeholder", "Filter widgets..."),
+										value: y,
+										onChange: (e) => b(e.target.value),
+										className: "h-control-md w-full min-w-0 rounded-input border border-[var(--color-border-subtle)] bg-bg-sunken py-2 pl-[3.25rem] pr-3 text-sm text-text-primary placeholder:text-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface sm:w-64"
+									}),
+									/* @__PURE__ */ d("svg", {
+										"aria-hidden": "true",
+										className: "pointer-events-none absolute left-3 top-1/2 h-icon-sm w-icon-sm -translate-y-1/2 text-text-secondary",
+										fill: "none",
+										stroke: "currentColor",
+										viewBox: "0 0 24 24",
+										children: /* @__PURE__ */ d("path", {
+											strokeLinecap: "round",
+											strokeLinejoin: "round",
+											strokeWidth: 2,
+											d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+										})
 									})
-								})
-							]
-						}), /* @__PURE__ */ u("div", {
-							className: "flex shrink-0 items-center gap-1 rounded-button bg-bg-sunken p-1",
-							role: "group",
-							"aria-label": "Gallery layout",
-							children: [/* @__PURE__ */ l("button", {
-								type: "button",
-								onClick: () => y("grid"),
-								"aria-pressed": v === "grid",
-								className: `min-h-control-md rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${v === "grid" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
-								children: h("bigconsole.widgetDemo.viewToggle.grid", "Grid")
-							}), /* @__PURE__ */ l("button", {
-								type: "button",
-								onClick: () => y("list"),
-								"aria-pressed": v === "list",
-								className: `min-h-control-md rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${v === "list" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
-								children: h("bigconsole.widgetDemo.viewToggle.list", "List")
-							})]
-						})]
+								]
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "flex shrink-0 items-center gap-1 rounded-button bg-bg-sunken p-1",
+								role: "group",
+								"aria-label": "Gallery layout",
+								children: [/* @__PURE__ */ d("button", {
+									type: "button",
+									onClick: () => S("grid"),
+									"aria-pressed": x === "grid",
+									className: `min-h-control-md rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x === "grid" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
+									children: _("bigconsole.widgetDemo.viewToggle.grid", "Grid")
+								}), /* @__PURE__ */ d("button", {
+									type: "button",
+									onClick: () => S("list"),
+									"aria-pressed": x === "list",
+									className: `min-h-control-md rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x === "list" ? "bg-bg-surface text-text-primary shadow-[var(--shadow-elevation-1)]" : "text-text-secondary hover:text-text-primary"}`,
+									children: _("bigconsole.widgetDemo.viewToggle.list", "List")
+								})]
+							}),
+							/* @__PURE__ */ d(c, {
+								variant: "secondary",
+								onClick: () => v("/dashboards"),
+								children: _("bigconsole.widgetDemo.openDashboards", "Open dashboards")
+							})
+						]
 					})]
 				})
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ d("div", {
 				className: "min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6",
-				children: /* @__PURE__ */ u(n, { children: [
-					/* @__PURE__ */ l("section", {
+				children: /* @__PURE__ */ f(r, { children: [
+					/* @__PURE__ */ d("section", {
 						"aria-label": "What this gallery is for",
-						className: e("muted", "neutral", "compact"),
-						children: /* @__PURE__ */ l(c, { children: h("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.") })
+						className: t("muted", "neutral", "compact"),
+						children: /* @__PURE__ */ d(u, { children: _("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.") })
 					}),
-					x.length > 0 && /* @__PURE__ */ l(t, {
+					w.length > 0 && /* @__PURE__ */ d(n, {
 						emphasis: "primary",
 						headingLevel: 2,
 						title: "Widget gallery",
 						description: "Every widget renders its unconnected state here — the card chrome, header and empty copy are exactly what a dashboard will show before a DataSink is bound.",
-						meta: /* @__PURE__ */ u("span", {
+						meta: /* @__PURE__ */ f("span", {
 							className: "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
 							children: [
-								b.length,
+								C.length,
 								" of ",
-								f.length
+								m.length
 							]
 						}),
-						children: /* @__PURE__ */ l("div", {
+						children: /* @__PURE__ */ d("div", {
 							className: "flex flex-col gap-section-gap",
-							children: x.map((e) => /* @__PURE__ */ l(t, {
+							children: w.map((e) => /* @__PURE__ */ d(n, {
 								emphasis: "bare",
 								padding: "none",
 								headingLevel: 3,
 								title: e.label,
 								description: e.blurb,
-								meta: /* @__PURE__ */ u("span", {
+								meta: /* @__PURE__ */ f("span", {
 									className: "text-xs font-medium text-text-muted",
 									children: [
 										e.widgets.length,
@@ -315,28 +329,31 @@ var f = [
 										e.widgets.length === 1 ? "type" : "types"
 									]
 								}),
-								children: /* @__PURE__ */ l("div", {
-									className: S,
+								children: /* @__PURE__ */ d("div", {
+									className: T,
 									children: e.widgets.map((e) => {
-										let t = f.find((t) => t.type === e.type);
-										return /* @__PURE__ */ u("figure", {
-											className: `m-0 flex min-w-0 flex-col ${v === "grid" ? "h-80" : "h-64"}`,
-											children: [/* @__PURE__ */ u("figcaption", {
+										let t = m.find((t) => t.type === e.type);
+										return /* @__PURE__ */ f("figure", {
+											className: `m-0 flex min-w-0 flex-col ${x === "grid" ? "h-80" : "h-64"}`,
+											children: [/* @__PURE__ */ f("figcaption", {
 												className: "mb-2 flex flex-shrink-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs text-text-secondary",
-												children: [/* @__PURE__ */ u("span", { children: [
-													h("bigconsole.widgetDemo.widgetCard.typeLabel", "Type:"),
+												children: [/* @__PURE__ */ f("span", { children: [
+													_("bigconsole.widgetDemo.widgetCard.typeLabel", "Type:"),
 													" ",
-													/* @__PURE__ */ l("code", {
+													/* @__PURE__ */ d("code", {
 														className: "font-mono text-text-link",
 														children: e.type
 													})
-												] }), t && /* @__PURE__ */ l("span", {
+												] }), t && /* @__PURE__ */ d("span", {
 													className: "text-text-muted",
-													children: h(t.descriptionKey, t.description)
+													children: _(t.descriptionKey, t.description)
 												})]
-											}), /* @__PURE__ */ l("div", {
+											}), /* @__PURE__ */ d("div", {
 												className: "min-h-0 min-w-0 flex-1",
-												children: /* @__PURE__ */ l(i, { widget: e })
+												children: /* @__PURE__ */ d(a, {
+													previewOnly: !0,
+													widget: e
+												})
 											})]
 										}, e.id);
 									})
@@ -344,31 +361,31 @@ var f = [
 							}, e.category))
 						})
 					}),
-					b.length === 0 && /* @__PURE__ */ l(t, {
+					C.length === 0 && /* @__PURE__ */ d(n, {
 						emphasis: "standard",
 						tone: "info",
-						title: h("bigconsole.widgetDemo.emptyState.title", "No widgets match your filter"),
+						title: _("bigconsole.widgetDemo.emptyState.title", "No widgets match your filter"),
 						headingLevel: 2,
 						"data-testid": "widget-demo-empty",
-						children: /* @__PURE__ */ l(s, {
+						children: /* @__PURE__ */ d(l, {
 							illustration: "empty-search",
-							title: h("bigconsole.widgetDemo.emptyState.description", "Try a different search term to preview a widget type."),
+							title: _("bigconsole.widgetDemo.emptyState.description", "Try a different search term to preview a widget type."),
 							description: "The filter matches a widget's name and its one-line description."
 						})
 					})
 				] })
 			}),
-			/* @__PURE__ */ l("section", {
+			/* @__PURE__ */ d("section", {
 				"aria-label": "Gallery summary",
-				className: `${e("bare", "neutral", "none")} flex-shrink-0 border-t border-[var(--color-border-subtle)] bg-bg-sunken px-4 py-2 sm:px-6`,
-				children: /* @__PURE__ */ u("div", {
+				className: `${t("bare", "neutral", "none")} flex-shrink-0 border-t border-[var(--color-border-subtle)] bg-bg-sunken px-4 py-2 sm:px-6`,
+				children: /* @__PURE__ */ f("div", {
 					className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-text-secondary",
-					children: [/* @__PURE__ */ l("span", { children: h("bigconsole.widgetDemo.footer.showing", "Showing {{shown}} of {{total}} widget types", {
-						shown: b.length,
-						total: f.length
-					}) }), /* @__PURE__ */ l("span", {
+					children: [/* @__PURE__ */ d("span", { children: _("bigconsole.widgetDemo.footer.showing", "Showing {{shown}} of {{total}} widget types", {
+						shown: C.length,
+						total: m.length
+					}) }), /* @__PURE__ */ d("span", {
 						className: "text-text-muted",
-						children: h("bigconsole.widgetDemo.footer.hint", "Widgets show empty state until connected to DataSink + Parser")
+						children: _("bigconsole.widgetDemo.footer.hint", "Widgets show empty state until connected to DataSink + Parser")
 					})]
 				})
 			})
@@ -376,6 +393,6 @@ var f = [
 	});
 };
 //#endregion
-export { h as WidgetDemoPage, h as default };
+export { _ as WidgetDemoPage, _ as default };
 //# sourceMappingURL=WidgetDemoPage.js.map