npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.805.2 → 2026.812.1 - Mend

@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

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 (253) hide show

package/dist/bigconsole/components/dashboard/WidgetPalette.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WidgetPalette.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/WidgetPalette.tsx"],"sourcesContent":["/*\n WidgetPalette Component\n \n Sidebar panel with draggable widget types for the dashboard builder.\n * Uses semantic tokens for consistent theming.\n * Features categorized widgets, search, and drag-and-drop support.\n /\n\nimport { type FC, memo, useState, useCallback, useMemo } from 'react';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport {\n Search,\n ChevronDown,\n ChevronRight,\n TrendingUp,\n BarChart3,\n Filter,\n Table,\n Grid3x3,\n Gauge,\n Activity,\n List,\n FileText,\n Type,\n ExternalLink,\n MapPin,\n Calendar,\n Columns,\n GitBranch,\n Puzzle,\n LayoutDashboard,\n GripVertical,\n X,\n Layers,\n Store,\n type LucideIcon,\n} from 'lucide-react';\nimport {\n getWidgetCategories,\n getWidgetKey,\n WIDGET_CATEGORY_LABELS,\n type WidgetDefinition,\n} from '../widgets/WidgetRegistry';\nimport type { WidgetType, WidgetCategory } from '../../types';\n\n// ============================================================================\n// Icon Mapping\n// ============================================================================\n\nconst ICON_MAP: Record<string, LucideIcon> = {\n TrendingUp,\n BarChart3,\n Filter,\n Table,\n Grid3x3,\n Gauge,\n Activity,\n List,\n FileText,\n Type,\n ExternalLink,\n MapPin,\n Calendar,\n Columns,\n GitBranch,\n Puzzle,\n LayoutDashboard,\n};\n\nfunction getIconComponent(iconName: string): LucideIcon {\n return ICON_MAP[iconName] \|\| Puzzle;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetPaletteProps {\n /* Whether the palette is open /\n isOpen: boolean;\n /* Callback to close the palette /\n onClose: () => void;\n /* Callback when a widget is selected (for quick add without drag) /\n onWidgetSelect?: (type: WidgetType, definition?: WidgetDefinition) => void;\n /* Callback when drag starts /\n onDragStart?: (type: WidgetType, definition: WidgetDefinition) => void;\n /* Callback when drag ends /\n onDragEnd?: () => void;\n /* Installed widgets from the store (fetched by parent) /\n installedWidgets?: WidgetDefinition[];\n /* Whether installed widgets are still loading /\n installedWidgetsLoading?: boolean;\n /\n Built-in widget catalog (from the backend `getWidgetTypes`, fetched by the\n * parent via useWidgetCatalog). When omitted, falls back to the bundled\n * static registry.\n /\n definitions?: WidgetDefinition[];\n}\n\n// ============================================================================\n// Styles using semantic tokens\n// ============================================================================\n\nconst styles = {\n container: {\n width: '300px',\n height: '100%',\n backgroundColor: 'var(--color-bg-surface)',\n borderRight: '1px solid var(--color-border)',\n display: 'flex',\n flexDirection: 'column' as const,\n flexShrink: 0,\n overflow: 'hidden',\n position: 'relative' as const,\n },\n header: {\n padding: 'var(--space-formGap)',\n borderBottom: '1px solid var(--color-border)',\n backgroundColor: 'var(--color-bg-sunken)',\n flexShrink: 0,\n },\n headerTop: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: 'var(--space-controlGap)',\n },\n headerTitle: {\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--space-iconGap)',\n },\n headerIcon: {\n width: '32px',\n height: '32px',\n borderRadius: 'var(--radius-button)',\n backgroundColor: 'var(--color-action-primary-bg)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n title: {\n fontSize: 'var(--font-size-body-md)',\n fontWeight: 'var(--font-weight-semibold)' as const,\n color: 'var(--color-text-primary)',\n margin: 0,\n },\n subtitle: {\n fontSize: 'var(--font-size-body-xs)',\n color: 'var(--color-text-muted)',\n margin: '2px 0 0 0',\n },\n closeButton: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '28px',\n height: '28px',\n border: 'none',\n background: 'transparent',\n borderRadius: 'var(--radius-button)',\n cursor: 'pointer',\n color: 'var(--color-text-secondary)',\n transition: 'background-color 0.15s',\n },\n searchContainer: {\n position: 'relative' as const,\n },\n searchIcon: {\n position: 'absolute' as const,\n left: '10px',\n top: '50%',\n transform: 'translateY(-50%)',\n width: '16px',\n height: '16px',\n color: 'var(--color-text-muted)',\n pointerEvents: 'none' as const,\n },\n searchInput: {\n width: '100%',\n paddingLeft: '36px',\n height: 'var(--size-controlHeight-sm)',\n fontSize: 'var(--font-size-body-sm)',\n },\n content: {\n flex: '1 1 0',\n minHeight: 0,\n overflow: 'hidden',\n position: 'relative' as const,\n },\n scrollArea: {\n position: 'absolute' as const,\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n overflowY: 'auto' as const,\n overflowX: 'hidden' as const,\n padding: 'var(--space-controlGap)',\n },\n categoryContainer: {\n marginBottom: 'var(--space-controlGap)',\n },\n categoryHeader: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--space-iconGap)',\n padding: 'var(--space-controlGap) var(--space-iconGap)',\n border: 'none',\n background: 'transparent',\n cursor: 'pointer',\n borderRadius: 'var(--radius-button)',\n transition: 'background-color 0.15s',\n },\n categoryChevron: {\n width: '16px',\n height: '16px',\n color: 'var(--color-text-muted)',\n flexShrink: 0,\n },\n categoryLabel: {\n flex: 1,\n textAlign: 'left' as const,\n fontSize: 'var(--font-size-body-xs)',\n fontWeight: 'var(--font-weight-semibold)' as const,\n color: 'var(--color-text-secondary)',\n textTransform: 'uppercase' as const,\n letterSpacing: '0.05em',\n },\n categoryCount: {\n fontSize: 'var(--font-size-body-xs)',\n color: 'var(--color-text-muted)',\n backgroundColor: 'var(--color-bg-sunken)',\n padding: '2px 8px',\n borderRadius: 'var(--radius-full)',\n },\n widgetList: {\n display: 'flex',\n flexDirection: 'column' as const,\n gap: '4px',\n marginTop: 'var(--space-controlGap)',\n paddingLeft: '4px',\n },\n widgetCard: {\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--space-iconGap)',\n padding: 'var(--space-controlGap)',\n borderRadius: 'var(--radius-card)',\n cursor: 'grab',\n backgroundColor: 'var(--color-bg-surface)',\n border: '1px solid var(--color-border)',\n transition: 'all 0.15s ease',\n },\n widgetCardHover: {\n backgroundColor: 'var(--color-bg-hover)',\n borderColor: 'var(--color-action-primary-border)',\n boxShadow: 'var(--shadow-elevation-1)',\n },\n dragHandle: {\n width: '16px',\n height: '16px',\n color: 'var(--color-text-muted)',\n opacity: 0.5,\n flexShrink: 0,\n },\n widgetIcon: {\n width: '36px',\n height: '36px',\n borderRadius: 'var(--radius-button)',\n backgroundColor: 'var(--color-bg-sunken)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n widgetIconInner: {\n width: '18px',\n height: '18px',\n color: 'var(--color-action-primary-bg)',\n },\n widgetText: {\n flex: 1,\n minWidth: 0,\n overflow: 'hidden',\n },\n widgetName: {\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-medium)' as const,\n color: 'var(--color-text-primary)',\n whiteSpace: 'nowrap' as const,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n marginBottom: '2px',\n },\n widgetDescription: {\n fontSize: 'var(--font-size-body-xs)',\n color: 'var(--color-text-muted)',\n lineHeight: 1.3,\n overflow: 'hidden',\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical' as const,\n },\n emptyState: {\n textAlign: 'center' as const,\n padding: 'var(--space-pagePadding)',\n },\n emptyIcon: {\n width: '48px',\n height: '48px',\n borderRadius: 'var(--radius-card)',\n backgroundColor: 'var(--color-bg-sunken)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n margin: '0 auto var(--space-formGap)',\n },\n emptyText: {\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-text-muted)',\n margin: 0,\n },\n clearButton: {\n marginTop: 'var(--space-controlGap)',\n padding: 'var(--space-controlGap) var(--space-formGap)',\n fontSize: 'var(--font-size-body-xs)',\n fontWeight: 'var(--font-weight-medium)' as const,\n color: 'var(--color-action-primary-text)',\n backgroundColor: 'var(--color-action-primary-bg)',\n border: 'none',\n borderRadius: 'var(--radius-button)',\n cursor: 'pointer',\n },\n footer: {\n padding: 'var(--space-controlGap) var(--space-formGap)',\n borderTop: '1px solid var(--color-border)',\n backgroundColor: 'var(--color-bg-sunken)',\n flexShrink: 0,\n },\n footerText: {\n fontSize: 'var(--font-size-body-xs)',\n color: 'var(--color-text-muted)',\n margin: 0,\n textAlign: 'center' as const,\n },\n browseStoreButton: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 'var(--space-iconGap)',\n width: '100%',\n padding: 'var(--space-controlGap)',\n marginBottom: 'var(--space-controlGap)',\n borderRadius: 'var(--radius-button)',\n border: '1px dashed var(--color-border)',\n backgroundColor: 'transparent',\n color: 'var(--color-text-secondary)',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)' as const,\n cursor: 'pointer',\n transition: 'border-color 0.15s, color 0.15s',\n },\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const WidgetPalette: FC<WidgetPaletteProps> = memo(function WidgetPalette({\n isOpen,\n onClose,\n onWidgetSelect,\n onDragStart,\n onDragEnd,\n installedWidgets = [],\n installedWidgetsLoading = false,\n definitions,\n}) {\n const [searchQuery, setSearchQuery] = useState('');\n const [expandedCategories, setExpandedCategories] = useState<Set<WidgetCategory>>(\n new Set(['KPI', 'Visualization', 'Data', 'Content', 'Temporal', 'Custom', 'Installed'])\n );\n const [hoveredWidget, setHoveredWidget] = useState<string \| null>(null);\n\n // Get categorized widgets, merging in installed widgets. When the parent\n // supplies a backend-sourced catalog (`definitions`), group that by category;\n // otherwise fall back to the bundled static registry.\n const categories = useMemo(() => {\n const baseCategories = definitions\n ? (Object.keys(WIDGET_CATEGORY_LABELS) as WidgetCategory[]).map((category) => ({\n category,\n label: WIDGET_CATEGORY_LABELS[category],\n widgets: definitions.filter((def) => def.category === category),\n }))\n : getWidgetCategories();\n\n return baseCategories\n .map((cat) => {\n if (cat.category === 'Installed') {\n // Two sources feed \"Installed from Store\": the registry-driven backend\n // catalog (getWidgetTypes store types — rich metadata, install-gated,\n // BOFF-2858) which arrives via `definitions` under this category, and\n // the legacy workspaceInstalledApps listing passed as `installedWidgets`.\n // Merge both, deduping by name (the catalog entry wins) so a widget\n // present in both sources shows once with the richer definition, while\n // legacy installs not yet in the registry are still preserved.\n const byName = new Map<string, WidgetDefinition>();\n for (const w of installedWidgets) byName.set(w.name.toLowerCase(), w);\n for (const w of cat.widgets) {\n const key = w.name.toLowerCase();\n const legacy = byName.get(key);\n // Catalog wins for metadata but MERGE defaultConfig so the legacy\n // workspaceInstalledApps fields survive — notably `componentId`, which the\n // current render path needs and the catalog store entry lacks until\n // widgetTypeKey rendering is wired. Keeps overlapping store widgets renderable.\n byName.set(key, legacy ? { ...w, defaultConfig: { ...legacy.defaultConfig, ...w.defaultConfig } } : w);\n }\n return { ...cat, widgets: Array.from(byName.values()) };\n }\n return cat;\n })\n .filter((cat) => cat.category !== 'Installed' \|\| cat.widgets.length > 0);\n }, [installedWidgets, definitions]);\n\n // Filter widgets by search query\n const filteredCategories = useMemo(() => {\n if (!searchQuery.trim()) {\n return categories;\n }\n\n const query = searchQuery.toLowerCase();\n return categories\n .map((cat) => ({\n ...cat,\n widgets: cat.widgets.filter(\n (w) =>\n w.name.toLowerCase().includes(query) \|\|\n w.description.toLowerCase().includes(query) \|\|\n w.tags.some((tag) => tag.includes(query))\n ),\n }))\n .filter((cat) => cat.widgets.length > 0);\n }, [categories, searchQuery]);\n\n // Toggle category expansion\n const toggleCategory = useCallback((category: WidgetCategory) => {\n setExpandedCategories((prev) => {\n const next = new Set(prev);\n if (next.has(category)) {\n next.delete(category);\n } else {\n next.add(category);\n }\n return next;\n });\n }, []);\n\n // Handle drag start\n const handleDragStart = useCallback(\n (e: React.DragEvent, widget: WidgetDefinition) => {\n e.dataTransfer.setData(\n 'application/json',\n JSON.stringify({\n type: widget.type,\n name: widget.name,\n defaultSize: widget.defaultSize,\n defaultConfig: widget.defaultConfig,\n category: widget.category,\n })\n );\n e.dataTransfer.effectAllowed = 'copy';\n\n // Create custom drag image\n const dragImage = document.createElement('div');\n dragImage.style.cssText = `\n position: absolute;\n top: -1000px;\n left: -1000px;\n padding: 8px 12px;\n background: var(--color-bg-surface);\n border: 2px solid var(--color-action-primary-bg);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--color-text-primary);\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n `;\n dragImage.textContent = widget.name;\n document.body.appendChild(dragImage);\n e.dataTransfer.setDragImage(dragImage, 0, 0);\n\n setTimeout(() => {\n document.body.removeChild(dragImage);\n }, 0);\n\n onDragStart?.(widget.type, widget);\n },\n [onDragStart]\n );\n\n // Handle drag end\n const handleDragEnd = useCallback(() => {\n onDragEnd?.();\n }, [onDragEnd]);\n\n // Handle click to quick-add\n const handleWidgetClick = useCallback(\n (widget: WidgetDefinition) => {\n onWidgetSelect?.(widget.type, widget);\n },\n [onWidgetSelect]\n );\n\n // Open the widget store in a new tab so the builder (and any unsaved edits)\n // stays intact. Preserves the current org/workspace/project query params.\n const handleBrowseStore = useCallback(() => {\n if (typeof window === 'undefined') return;\n const url = `${window.location.origin}/bigconsole/store${window.location.search}`;\n window.open(url, '_blank', 'noopener,noreferrer');\n }, []);\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <div style={styles.container}>\n {/ Header /}\n <div style={styles.header}>\n <div style={styles.headerTop}>\n <div style={styles.headerTitle}>\n <div style={styles.headerIcon}>\n <Layers style={{ width: '18px', height: '18px', color: 'var(--color-action-primary-text)' }} />\n </div>\n <div>\n <h3 style={styles.title}>Widgets</h3>\n <p style={styles.subtitle}>Drag or click to add</p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={onClose}\n style={styles.closeButton}\n onMouseOver={(e) => (e.currentTarget.style.backgroundColor = 'var(--color-bg-hover)')}\n onMouseOut={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}\n >\n <X style={{ width: '16px', height: '16px' }} />\n </button>\n </div>\n\n {/ Search /}\n <div style={styles.searchContainer}>\n <Search style={styles.searchIcon} />\n <Input\n type=\"text\"\n placeholder=\"Search widgets...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n style={styles.searchInput}\n />\n </div>\n </div>\n\n {/ Widget Categories /}\n <div style={styles.content}>\n <div style={styles.scrollArea}>\n {filteredCategories.map((category) => (\n <div key={category.category} style={styles.categoryContainer}>\n {/ Category Header /}\n <button\n type=\"button\"\n onClick={() => toggleCategory(category.category)}\n style={styles.categoryHeader}\n onMouseOver={(e) => (e.currentTarget.style.backgroundColor = 'var(--color-bg-hover)')}\n onMouseOut={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}\n >\n {expandedCategories.has(category.category) ? (\n <ChevronDown style={styles.categoryChevron} />\n ) : (\n <ChevronRight style={styles.categoryChevron} />\n )}\n <span style={styles.categoryLabel}>{category.label}</span>\n <span style={styles.categoryCount}>{category.widgets.length}</span>\n </button>\n\n {/ Widget Items /}\n {expandedCategories.has(category.category) && (\n <div style={styles.widgetList}>\n {installedWidgetsLoading && category.category === 'Installed' && (\n <div\n style={{\n fontSize: 'var(--font-size-body-xs)',\n color: 'var(--color-text-muted)',\n padding: 'var(--space-controlGap)',\n }}\n >\n Loading...\n </div>\n )}\n {category.widgets.map((widget) => {\n const IconComponent = getIconComponent(widget.icon);\n const widgetKey = getWidgetKey(widget);\n const isHovered = hoveredWidget === widgetKey;\n\n return (\n <div\n key={widgetKey}\n draggable\n onDragStart={(e) => handleDragStart(e, widget)}\n onDragEnd={handleDragEnd}\n onClick={() => handleWidgetClick(widget)}\n onMouseEnter={() => setHoveredWidget(widgetKey)}\n onMouseLeave={() => setHoveredWidget(null)}\n style={{\n ...styles.widgetCard,\n ...(isHovered ? styles.widgetCardHover : {}),\n }}\n >\n {/ Drag Handle /}\n <GripVertical style={styles.dragHandle} />\n\n {/ Icon /}\n <div style={styles.widgetIcon}>\n <IconComponent style={styles.widgetIconInner} />\n </div>\n\n {/ Text /}\n <div style={styles.widgetText}>\n <div style={styles.widgetName}>{widget.name}</div>\n <div style={styles.widgetDescription}>{widget.description}</div>\n </div>\n </div>\n );\n })}\n </div>\n )}\n </div>\n ))}\n\n {filteredCategories.length === 0 && (\n <div style={styles.emptyState}>\n <div style={styles.emptyIcon}>\n <Search style={{ width: '24px', height: '24px', color: 'var(--color-text-muted)' }} />\n </div>\n <p style={styles.emptyText}>\n No widgets found for \"<strong>{searchQuery}</strong>\"\n </p>\n <button type=\"button\" onClick={() => setSearchQuery('')} style={styles.clearButton}>\n Clear search\n </button>\n </div>\n )}\n </div>\n </div>\n\n {/ Footer */}\n <div style={styles.footer}>\n <button\n type=\"button\"\n onClick={handleBrowseStore}\n style={styles.browseStoreButton}\n onMouseOver={(e) => {\n e.currentTarget.style.borderColor = 'var(--color-action-primary-bg)';\n e.currentTarget.style.color = 'var(--color-action-primary-text)';\n }}\n onMouseOut={(e) => {\n e.currentTarget.style.borderColor = 'var(--color-border)';\n e.currentTarget.style.color = 'var(--color-text-secondary)';\n }}\n >\n <Store style={{ width: '15px', height: '15px' }} />\n Browse widget store\n <ExternalLink style={{ width: '13px', height: '13px', opacity: 0.7 }} />\n </button>\n <p style={styles.footerText}>Drag widgets to position them on the canvas</p>\n </div>\n </div>\n );\n});\n\nexport default WidgetPalette;\n"],"mappings":"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"}
1	+ {"version":3,"file":"WidgetPalette.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/WidgetPalette.tsx"],"sourcesContent":["/*\n WidgetPalette Component\n \n Sidebar panel with draggable widget types for the dashboard builder.\n * Uses semantic tokens for consistent theming.\n * Features categorized widgets, search, and drag-and-drop support.\n \n Section emphasis (BOFF-5636). The palette used to be three bands that all\n * looked alike — sunken header, surface body, sunken footer — with cards drawn\n * on exactly the same fill as the panel behind them, so a card read as a row\n * rather than as a draggable object. It now follows one rule:\n \n header (surface, the panel's identity)\n * → scroll body (sunken, a recessed tray)\n * → widget cards (surface + elevation, objects lifted off the tray)\n * → footer (surface, terminal band, lighter type)\n \n and the category headings sit above their cards with heading-weight type, so\n * the group is never lighter than the things it groups.\n /\n\nimport { type FC, memo, useState, useCallback, useMemo } from 'react';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { SECTION_FOCUS_RING } from '../common';\nimport {\n Search,\n ChevronDown,\n ChevronRight,\n TrendingUp,\n BarChart3,\n Filter,\n Table,\n Grid3x3,\n Gauge,\n Activity,\n List,\n FileText,\n Type,\n ExternalLink,\n MapPin,\n Calendar,\n Columns,\n GitBranch,\n Puzzle,\n LayoutDashboard,\n GripVertical,\n X,\n Layers,\n Store,\n type LucideIcon,\n} from 'lucide-react';\nimport {\n getWidgetCategories,\n getWidgetKey,\n WIDGET_CATEGORY_LABELS,\n type WidgetDefinition,\n} from '../widgets/WidgetRegistry';\nimport type { WidgetType, WidgetCategory } from '../../types';\n\n// ============================================================================\n// Icon Mapping\n// ============================================================================\n\nconst ICON_MAP: Record<string, LucideIcon> = {\n TrendingUp,\n BarChart3,\n Filter,\n Table,\n Grid3x3,\n Gauge,\n Activity,\n List,\n FileText,\n Type,\n ExternalLink,\n MapPin,\n Calendar,\n Columns,\n GitBranch,\n Puzzle,\n LayoutDashboard,\n};\n\nfunction getIconComponent(iconName: string): LucideIcon {\n return ICON_MAP[iconName] \|\| Puzzle;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetPaletteProps {\n /* Whether the palette is open /\n isOpen: boolean;\n /* Callback to close the palette /\n onClose: () => void;\n /* Callback when a widget is selected (for quick add without drag) /\n onWidgetSelect?: (type: WidgetType, definition?: WidgetDefinition) => void;\n /* Callback when drag starts /\n onDragStart?: (type: WidgetType, definition: WidgetDefinition) => void;\n /* Callback when drag ends /\n onDragEnd?: () => void;\n /* Installed widgets from the store (fetched by parent) /\n installedWidgets?: WidgetDefinition[];\n /* Whether installed widgets are still loading /\n installedWidgetsLoading?: boolean;\n /\n Built-in widget catalog (from the backend `getWidgetTypes`, fetched by the\n * parent via useWidgetCatalog). When omitted, falls back to the bundled\n * static registry.\n /\n definitions?: WidgetDefinition[];\n}\n\n// ============================================================================\n// Styles using semantic tokens\n// ============================================================================\n\nconst styles = {\n // Width, borders and max-height live in `className` so they can be\n // breakpoint-aware — a hard 300px pane next to a canvas is unusable on a\n // phone, where the palette now becomes a full-width, height-capped drawer.\n container: {\n backgroundColor: 'var(--color-bg-surface)',\n display: 'flex',\n flexDirection: 'column' as const,\n flexShrink: 0,\n overflow: 'hidden',\n position: 'relative' as const,\n },\n header: {\n padding: 'var(--space-formGap)',\n borderBottom: '1px solid var(--color-border-subtle)',\n backgroundColor: 'var(--color-bg-surface)',\n flexShrink: 0,\n },\n headerTop: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: 'var(--space-controlGap)',\n },\n headerTitle: {\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--space-iconGap)',\n },\n headerIcon: {\n width: '32px',\n height: '32px',\n borderRadius: 'var(--radius-button)',\n backgroundColor: 'var(--color-action-primary-bg)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n title: {\n fontSize: 'var(--font-size-body-md)',\n fontWeight: 'var(--font-weight-bold)' as const,\n letterSpacing: '-0.01em',\n color: 'var(--color-text-primary)',\n margin: 0,\n },\n subtitle: {\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-text-secondary)',\n margin: '2px 0 0 0',\n },\n closeButton: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n // 40px keeps the only way to dismiss the palette above the minimum\n // touch-target size on a phone (was 28px).\n width: 'var(--size-controlHeight-md)',\n height: 'var(--size-controlHeight-md)',\n border: 'none',\n background: 'transparent',\n borderRadius: 'var(--radius-button)',\n cursor: 'pointer',\n color: 'var(--color-text-secondary)',\n flexShrink: 0,\n transition: 'background-color 0.15s',\n },\n searchContainer: {\n position: 'relative' as const,\n },\n searchIcon: {\n position: 'absolute' as const,\n left: '10px',\n top: '50%',\n transform: 'translateY(-50%)',\n width: '16px',\n height: '16px',\n color: 'var(--color-text-muted)',\n pointerEvents: 'none' as const,\n },\n searchInput: {\n width: '100%',\n paddingLeft: '36px',\n height: 'var(--size-controlHeight-md)',\n fontSize: 'var(--font-size-body-sm)',\n },\n content: {\n flex: '1 1 0',\n minHeight: 0,\n overflow: 'hidden',\n position: 'relative' as const,\n },\n // Recessed tray: the cards below sit ON this, so they can be lifted off it.\n scrollArea: {\n position: 'absolute' as const,\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n overflowY: 'auto' as const,\n overflowX: 'hidden' as const,\n padding: 'var(--space-controlGap)',\n backgroundColor: 'var(--color-bg-sunken)',\n },\n categoryContainer: {\n marginBottom: 'var(--space-formGap)',\n },\n categoryHeading: {\n margin: 0,\n },\n categoryHeader: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--space-iconGap)',\n minHeight: 'var(--size-controlHeight-md)',\n padding: 'var(--space-iconGap) var(--space-controlGap)',\n border: 'none',\n background: 'transparent',\n cursor: 'pointer',\n borderRadius: 'var(--radius-button)',\n transition: 'background-color 0.15s',\n },\n categoryChevron: {\n width: '16px',\n height: '16px',\n color: 'var(--color-text-secondary)',\n flexShrink: 0,\n },\n // A group label must not be lighter than its members: heading weight,\n // primary text colour, uppercase for rhythm.\n categoryLabel: {\n flex: 1,\n textAlign: 'left' as const,\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-bold)' as const,\n color: 'var(--color-text-primary)',\n textTransform: 'uppercase' as const,\n letterSpacing: '0.06em',\n },\n categoryCount: {\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-medium)' as const,\n color: 'var(--color-text-secondary)',\n backgroundColor: 'var(--color-bg-surface)',\n border: '1px solid var(--color-border-subtle)',\n padding: '1px 8px',\n // `--radius-full` is not a token in the build; the undefined var made the\n // declaration invalid, so the \"pill\" rendered as a square (BOFF-5636).\n borderRadius: 'var(--radius-pill, 9999px)',\n flexShrink: 0,\n },\n widgetList: {\n display: 'flex',\n flexDirection: 'column' as const,\n gap: '4px',\n marginTop: 'var(--space-controlGap)',\n paddingLeft: '4px',\n },\n widgetCard: {\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--space-iconGap)',\n minHeight: 'var(--size-controlHeight-lg)',\n padding: 'var(--space-controlGap)',\n borderRadius: 'var(--radius-card)',\n cursor: 'grab',\n backgroundColor: 'var(--color-bg-surface)',\n border: '1px solid var(--color-border-subtle)',\n // Elevation is what says \"this is an object you can pick up\". Previously the\n // card shared the panel's fill and had no shadow, so it read as a table row.\n boxShadow: 'var(--shadow-elevation-1)',\n transition: 'box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease',\n },\n // `--color-bg-hover` is not a token in the build — the undefined var made every\n // hover declaration in this file invalid, so there was no hover feedback at all.\n // `--color-action-ghost-bgHover` is the real per-theme hover fill (BOFF-5636).\n widgetCardHover: {\n backgroundColor: 'var(--color-action-ghost-bgHover)',\n borderColor: 'var(--color-action-primary-border)',\n boxShadow: 'var(--shadow-elevation-2)',\n },\n dragHandle: {\n width: '16px',\n height: '16px',\n color: 'var(--color-text-muted)',\n opacity: 0.5,\n flexShrink: 0,\n },\n widgetIcon: {\n width: '36px',\n height: '36px',\n borderRadius: 'var(--radius-button)',\n backgroundColor: 'var(--color-bg-sunken)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n widgetIconInner: {\n width: '18px',\n height: '18px',\n color: 'var(--color-action-primary-bg)',\n },\n widgetText: {\n flex: 1,\n minWidth: 0,\n overflow: 'hidden',\n },\n widgetName: {\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-medium)' as const,\n color: 'var(--color-text-primary)',\n whiteSpace: 'nowrap' as const,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n marginBottom: '2px',\n },\n widgetDescription: {\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-text-muted)',\n lineHeight: 1.3,\n overflow: 'hidden',\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical' as const,\n },\n emptyState: {\n textAlign: 'center' as const,\n padding: 'var(--space-pagePadding) var(--space-formGap)',\n backgroundColor: 'var(--color-status-info-bgSubtle)',\n border: '1px solid var(--color-status-info-border)',\n borderRadius: 'var(--radius-card)',\n },\n emptyIcon: {\n width: '48px',\n height: '48px',\n borderRadius: 'var(--radius-card)',\n backgroundColor: 'var(--color-bg-surface)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n margin: '0 auto var(--space-formGap)',\n },\n emptyTitle: {\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)' as const,\n color: 'var(--color-status-info-text)',\n margin: 0,\n },\n emptyText: {\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-text-secondary)',\n margin: 'var(--space-iconGap) 0 0 0',\n },\n clearButton: {\n marginTop: 'var(--space-controlGap)',\n minHeight: 'var(--size-controlHeight-md)',\n padding: '0 var(--space-formGap)',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-medium)' as const,\n color: 'var(--color-action-primary-text)',\n backgroundColor: 'var(--color-action-primary-bg)',\n border: 'none',\n borderRadius: 'var(--radius-button)',\n cursor: 'pointer',\n },\n // Terminal band. Surface fill + a hairline, matching the header's rule rather\n // than repeating the sunken tray, so top and bottom are no longer identical.\n footer: {\n padding: 'var(--space-controlGap) var(--space-formGap)',\n borderTop: '1px solid var(--color-border-subtle)',\n backgroundColor: 'var(--color-bg-surface)',\n flexShrink: 0,\n },\n footerText: {\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-text-muted)',\n margin: 0,\n textAlign: 'center' as const,\n },\n browseStoreButton: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 'var(--space-iconGap)',\n width: '100%',\n minHeight: 'var(--size-controlHeight-md)',\n padding: 'var(--space-controlGap)',\n marginBottom: 'var(--space-controlGap)',\n borderRadius: 'var(--radius-button)',\n border: '1px dashed var(--color-border-subtle)',\n backgroundColor: 'transparent',\n color: 'var(--color-text-secondary)',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)' as const,\n cursor: 'pointer',\n transition: 'border-color 0.15s, color 0.15s',\n },\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const WidgetPalette: FC<WidgetPaletteProps> = memo(function WidgetPalette({\n isOpen,\n onClose,\n onWidgetSelect,\n onDragStart,\n onDragEnd,\n installedWidgets = [],\n installedWidgetsLoading = false,\n definitions,\n}) {\n const { t } = useI18n();\n const [searchQuery, setSearchQuery] = useState('');\n const [expandedCategories, setExpandedCategories] = useState<Set<WidgetCategory>>(\n new Set(['KPI', 'Visualization', 'Data', 'Content', 'Temporal', 'Custom', 'Installed'])\n );\n const [hoveredWidget, setHoveredWidget] = useState<string \| null>(null);\n\n // Get categorized widgets, merging in installed widgets. When the parent\n // supplies a backend-sourced catalog (`definitions`), group that by category;\n // otherwise fall back to the bundled static registry.\n const categories = useMemo(() => {\n const baseCategories = definitions\n ? (Object.keys(WIDGET_CATEGORY_LABELS) as WidgetCategory[]).map((category) => ({\n category,\n label: WIDGET_CATEGORY_LABELS[category],\n widgets: definitions.filter((def) => def.category === category),\n }))\n : getWidgetCategories();\n\n return baseCategories\n .map((cat) => {\n if (cat.category === 'Installed') {\n // Two sources feed \"Installed from Store\": the registry-driven backend\n // catalog (getWidgetTypes store types — rich metadata, install-gated,\n // BOFF-2858) which arrives via `definitions` under this category, and\n // the legacy workspaceInstalledApps listing passed as `installedWidgets`.\n // Merge both, deduping by name (the catalog entry wins) so a widget\n // present in both sources shows once with the richer definition, while\n // legacy installs not yet in the registry are still preserved.\n const byName = new Map<string, WidgetDefinition>();\n for (const w of installedWidgets) byName.set(w.name.toLowerCase(), w);\n for (const w of cat.widgets) {\n const key = w.name.toLowerCase();\n const legacy = byName.get(key);\n // Catalog wins for metadata but MERGE defaultConfig so the legacy\n // workspaceInstalledApps fields survive — notably `componentId`, which the\n // current render path needs and the catalog store entry lacks until\n // widgetTypeKey rendering is wired. Keeps overlapping store widgets renderable.\n byName.set(key, legacy ? { ...w, defaultConfig: { ...legacy.defaultConfig, ...w.defaultConfig } } : w);\n }\n return { ...cat, widgets: Array.from(byName.values()) };\n }\n return cat;\n })\n .filter((cat) => cat.category !== 'Installed' \|\| cat.widgets.length > 0);\n }, [installedWidgets, definitions]);\n\n // Filter widgets by search query\n const filteredCategories = useMemo(() => {\n if (!searchQuery.trim()) {\n return categories;\n }\n\n const query = searchQuery.toLowerCase();\n return categories\n .map((cat) => ({\n ...cat,\n widgets: cat.widgets.filter(\n (w) =>\n w.name.toLowerCase().includes(query) \|\|\n w.description.toLowerCase().includes(query) \|\|\n w.tags.some((tag) => tag.includes(query))\n ),\n }))\n .filter((cat) => cat.widgets.length > 0);\n }, [categories, searchQuery]);\n\n // Toggle category expansion\n const toggleCategory = useCallback((category: WidgetCategory) => {\n setExpandedCategories((prev) => {\n const next = new Set(prev);\n if (next.has(category)) {\n next.delete(category);\n } else {\n next.add(category);\n }\n return next;\n });\n }, []);\n\n // Handle drag start\n const handleDragStart = useCallback(\n (e: React.DragEvent, widget: WidgetDefinition) => {\n e.dataTransfer.setData(\n 'application/json',\n JSON.stringify({\n type: widget.type,\n name: widget.name,\n defaultSize: widget.defaultSize,\n defaultConfig: widget.defaultConfig,\n category: widget.category,\n })\n );\n e.dataTransfer.effectAllowed = 'copy';\n\n // Create custom drag image\n const dragImage = document.createElement('div');\n dragImage.style.cssText = `\n position: absolute;\n top: -1000px;\n left: -1000px;\n padding: 8px 12px;\n background: var(--color-bg-surface);\n border: 2px solid var(--color-action-primary-bg);\n border-radius: var(--radius-card);\n font-size: var(--font-size-body-sm);\n font-weight: 500;\n color: var(--color-text-primary);\n box-shadow: var(--shadow-elevation-3);\n `;\n dragImage.textContent = widget.name;\n document.body.appendChild(dragImage);\n e.dataTransfer.setDragImage(dragImage, 0, 0);\n\n setTimeout(() => {\n document.body.removeChild(dragImage);\n }, 0);\n\n onDragStart?.(widget.type, widget);\n },\n [onDragStart]\n );\n\n // Handle drag end\n const handleDragEnd = useCallback(() => {\n onDragEnd?.();\n }, [onDragEnd]);\n\n // Handle click to quick-add\n const handleWidgetClick = useCallback(\n (widget: WidgetDefinition) => {\n onWidgetSelect?.(widget.type, widget);\n },\n [onWidgetSelect]\n );\n\n // Open the widget store in a new tab so the builder (and any unsaved edits)\n // stays intact. Preserves the current org/workspace/project query params.\n const handleBrowseStore = useCallback(() => {\n if (typeof window === 'undefined') return;\n const url = `${window.location.origin}/bigconsole/store${window.location.search}`;\n window.open(url, '_blank', 'noopener,noreferrer');\n }, []);\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <section\n aria-label=\"Widget palette\"\n data-testid=\"widget-palette\"\n style={styles.container}\n className=\"h-auto max-h-[45vh] w-full border-b border-[var(--color-border-subtle)] md:h-full md:max-h-none md:w-[300px] md:border-b-0 md:border-r\"\n >\n {/ Header — the panel's identity band /}\n <div style={styles.header}>\n <div style={styles.headerTop}>\n <div style={styles.headerTitle}>\n <div style={styles.headerIcon}>\n <Layers\n aria-hidden=\"true\"\n style={{ width: '18px', height: '18px', color: 'var(--color-action-primary-text)' }}\n />\n </div>\n <div>\n <h2 style={styles.title}>{t('bigconsole.dashboards.widgetPalette.title', 'Widgets')}</h2>\n <p style={styles.subtitle}>{t('bigconsole.dashboards.widgetPalette.subtitle', 'Drag or click to add')}</p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={onClose}\n aria-label=\"Close widget palette\"\n title=\"Close widget palette\"\n style={styles.closeButton}\n className={`hover:bg-action-ghost-bgHover motion-safe:transition-colors ${SECTION_FOCUS_RING}`}\n >\n <X aria-hidden=\"true\" style={{ width: '16px', height: '16px' }} />\n </button>\n </div>\n\n {/ Search /}\n <div style={styles.searchContainer}>\n <label htmlFor=\"widget-palette-search\" className=\"sr-only\">\n Search widgets\n </label>\n <Search aria-hidden=\"true\" style={styles.searchIcon} />\n <Input\n id=\"widget-palette-search\"\n type=\"text\"\n placeholder={t('bigconsole.dashboards.widgetPalette.searchPlaceholder', 'Search widgets...')}\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n style={styles.searchInput}\n />\n </div>\n </div>\n\n {/ Widget Categories — recessed tray /}\n <div style={styles.content}>\n <div style={styles.scrollArea}>\n {filteredCategories.map((category) => {\n const isExpanded = expandedCategories.has(category.category);\n const panelId = `widget-palette-${category.category.toLowerCase()}`;\n return (\n <div key={category.category} style={styles.categoryContainer}>\n {/ Category Header /}\n <h3 style={styles.categoryHeading}>\n <button\n type=\"button\"\n onClick={() => toggleCategory(category.category)}\n aria-expanded={isExpanded}\n aria-controls={panelId}\n style={styles.categoryHeader}\n className={`hover:bg-action-ghost-bgHover motion-safe:transition-colors ${SECTION_FOCUS_RING}`}\n >\n {isExpanded ? (\n <ChevronDown aria-hidden=\"true\" style={styles.categoryChevron} />\n ) : (\n <ChevronRight aria-hidden=\"true\" style={styles.categoryChevron} />\n )}\n <span style={styles.categoryLabel}>{category.label}</span>\n <span style={styles.categoryCount}>{category.widgets.length}</span>\n </button>\n </h3>\n\n {/ Widget Items /}\n {isExpanded && (\n <div id={panelId} style={styles.widgetList}>\n {installedWidgetsLoading && category.category === 'Installed' && (\n <div\n style={{\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-text-muted)',\n padding: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.widgetPalette.loading', 'Loading...')}\n </div>\n )}\n {category.widgets.map((widget) => {\n const IconComponent = getIconComponent(widget.icon);\n const widgetKey = getWidgetKey(widget);\n const isHovered = hoveredWidget === widgetKey;\n\n return (\n <div\n key={widgetKey}\n draggable\n role=\"button\"\n tabIndex={0}\n aria-label={`Add ${widget.name} widget`}\n onDragStart={(e) => handleDragStart(e, widget)}\n onDragEnd={handleDragEnd}\n onClick={() => handleWidgetClick(widget)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n handleWidgetClick(widget);\n }\n }}\n onMouseEnter={() => setHoveredWidget(widgetKey)}\n onMouseLeave={() => setHoveredWidget(null)}\n className={SECTION_FOCUS_RING}\n style={{\n ...styles.widgetCard,\n ...(isHovered ? styles.widgetCardHover : {}),\n }}\n >\n {/ Drag Handle /}\n <GripVertical aria-hidden=\"true\" style={styles.dragHandle} />\n\n {/ Icon /}\n <div style={styles.widgetIcon}>\n <IconComponent aria-hidden=\"true\" style={styles.widgetIconInner} />\n </div>\n\n {/ Text /}\n <div style={styles.widgetText}>\n <div style={styles.widgetName}>{widget.name}</div>\n <div style={styles.widgetDescription}>{widget.description}</div>\n </div>\n </div>\n );\n })}\n </div>\n )}\n </div>\n );\n })}\n\n {filteredCategories.length === 0 && (\n <div style={styles.emptyState} role=\"status\">\n <div style={styles.emptyIcon}>\n <Search\n aria-hidden=\"true\"\n style={{ width: '24px', height: '24px', color: 'var(--color-text-muted)' }}\n />\n </div>\n <p style={styles.emptyTitle}>\n {t('bigconsole.dashboards.widgetPalette.noResultsBefore', 'No widgets found for')} “\n <strong>{searchQuery}</strong>”\n </p>\n {/ No catalog key exists for this hint — literal until one lands in\n src/translations/en.ts. /}\n <p style={styles.emptyText}>Try a shorter term, or browse the widget store for more types.</p>\n <button\n type=\"button\"\n onClick={() => setSearchQuery('')}\n style={styles.clearButton}\n className={SECTION_FOCUS_RING}\n >\n {t('bigconsole.dashboards.widgetPalette.clearSearch', 'Clear search')}\n </button>\n </div>\n )}\n </div>\n </div>\n\n {/ Footer — terminal band */}\n <div style={styles.footer}>\n <button\n type=\"button\"\n onClick={handleBrowseStore}\n style={styles.browseStoreButton}\n className={`hover:border-action-primary-bg hover:text-action-primary-text motion-safe:transition-colors ${SECTION_FOCUS_RING}`}\n >\n <Store aria-hidden=\"true\" style={{ width: '15px', height: '15px' }} />\n {t('bigconsole.dashboards.widgetPalette.browseStore', 'Browse widget store')}\n <ExternalLink aria-hidden=\"true\" style={{ width: '13px', height: '13px', opacity: 0.7 }} />\n </button>\n <p style={styles.footerText}>\n {t('bigconsole.dashboards.widgetPalette.footerHint', 'Drag widgets to position them on the canvas')}\n </p>\n </div>\n </section>\n );\n});\n\nexport default WidgetPalette;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/CacheTTLSelector.js CHANGED Viewed

@@ -1,247 +1,246 @@
-import { memo as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/CacheTTLSelector.tsx
-var c = [
-	{
-		value: 300,
-		label: "5 minutes",
-		description: "Best for real-time dashboards"
-	},
-	{
-		value: 900,
-		label: "15 minutes",
-		description: "Balanced performance",
-		recommended: !0
-	},
-	{
-		value: 3600,
-		label: "1 hour",
-		description: "For data that changes hourly"
-	},
-	{
-		value: 86400,
-		label: "24 hours",
-		description: "For daily reports"
-	}
+var u = [
+	300,
+	900,
+	3600,
+	86400
 ];
-function l(e) {
-	return e === null ? !1 : c.some((t) => t.value === e);
+function d(e) {
+	return e === null ? !1 : u.includes(e);
 }
-function u(e) {
-	return e < 60 ? `${e} seconds` : e < 3600 ? `${Math.floor(e / 60)} minutes` : e < 86400 ? `${Math.floor(e / 3600)} hours` : `${Math.floor(e / 86400)} days`;
-}
-var d = e(function({ value: e, onChange: d, disabled: f = !1, error: p, hideLabel: m = !1 }) {
-	let [h, g] = i(!l(e) && e !== null), [_, v] = i(e?.toString() || ""), [y, b] = i(null), x = r(e);
+var f = e(function({ value: e, onChange: u, disabled: f = !1, error: p, hideLabel: m = !1 }) {
+	let { t: h } = o(), g = r(() => [
+		{
+			value: 300,
+			label: h("bigconsole.dataSinks.cacheTtl.preset5MinutesLabel", "5 minutes"),
+			description: h("bigconsole.dataSinks.cacheTtl.preset5MinutesDescription", "Best for real-time dashboards")
+		},
+		{
+			value: 900,
+			label: h("bigconsole.dataSinks.cacheTtl.preset15MinutesLabel", "15 minutes"),
+			description: h("bigconsole.dataSinks.cacheTtl.preset15MinutesDescription", "Balanced performance"),
+			recommended: !0
+		},
+		{
+			value: 3600,
+			label: h("bigconsole.dataSinks.cacheTtl.preset1HourLabel", "1 hour"),
+			description: h("bigconsole.dataSinks.cacheTtl.preset1HourDescription", "For data that changes hourly")
+		},
+		{
+			value: 86400,
+			label: h("bigconsole.dataSinks.cacheTtl.preset24HoursLabel", "24 hours"),
+			description: h("bigconsole.dataSinks.cacheTtl.preset24HoursDescription", "For daily reports")
+		}
+	], [h]), _ = t((e) => e < 60 ? h("bigconsole.dataSinks.cacheTtl.durationSeconds", "{{count}} seconds", { count: e }) : e < 3600 ? h("bigconsole.dataSinks.cacheTtl.durationMinutes", "{{count}} minutes", { count: Math.floor(e / 60) }) : e < 86400 ? h("bigconsole.dataSinks.cacheTtl.durationHours", "{{count}} hours", { count: Math.floor(e / 3600) }) : h("bigconsole.dataSinks.cacheTtl.durationDays", "{{count}} days", { count: Math.floor(e / 86400) }), [h]), [v, y] = a(!d(e) && e !== null), [b, x] = a(e?.toString() || ""), [S, C] = a(null), w = i(e);
 	n(() => {
-		x.current !== e && (x.current = e, e !== null && !l(e) && queueMicrotask(() => {
-			v(e.toString()), g(!0);
+		w.current !== e && (w.current = e, e !== null && !d(e) && queueMicrotask(() => {
+			x(e.toString()), y(!0);
 		}));
 	}, [e]);
-	let S = t((e) => {
-		f || (g(!1), d(e));
-	}, [f, d]), C = t(() => {
+	let T = t((e) => {
+		f || (y(!1), u(e));
+	}, [f, u]), E = t(() => {
 		if (f) return;
-		g(!0);
-		let e = parseInt(_);
-		!isNaN(e) && e >= 30 && e <= 86400 && d(e);
+		y(!0);
+		let e = parseInt(b);
+		!isNaN(e) && e >= 30 && e <= 86400 && u(e);
 	}, [
 		f,
-		_,
-		d
-	]), w = t((e) => {
+		b,
+		u
+	]), D = t((e) => {
 		let t = e.target.value;
-		if (v(t), t === "") {
-			b(null);
+		if (x(t), t === "") {
+			C(null);
 			return;
 		}
 		let n = parseInt(t);
 		if (isNaN(n)) {
-			b("Please enter a valid number");
+			C(h("bigconsole.dataSinks.cacheTtl.errorInvalidNumber", "Please enter a valid number"));
 			return;
 		}
 		if (n < 30) {
-			b("Minimum cache duration is 30 seconds");
+			C(h("bigconsole.dataSinks.cacheTtl.errorMinDuration", "Minimum cache duration is 30 seconds"));
 			return;
 		}
 		if (n > 86400) {
-			b("Maximum cache duration is 86400 seconds (24 hours)");
+			C(h("bigconsole.dataSinks.cacheTtl.errorMaxDuration", "Maximum cache duration is 86400 seconds (24 hours)"));
 			return;
 		}
-		b(null), d(n);
-	}, [d]);
-	return /* @__PURE__ */ s("div", {
-		className: "space-y-3",
+		C(null), u(n);
+	}, [u, h]);
+	return /* @__PURE__ */ l("div", {
+		className: "space-y-form-gap",
 		children: [
-			!m && /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("label", {
+			!m && /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Cache Duration"
-			}), /* @__PURE__ */ o("p", {
+				children: h("bigconsole.dataSinks.cacheTtl.heading", "Cache Duration")
+			}), /* @__PURE__ */ c("p", {
 				className: "text-xs text-text-secondary",
-				children: "How long should data be cached before refreshing?"
+				children: h("bigconsole.dataSinks.cacheTtl.headingDescription", "How long should data be cached before refreshing?")
 			})] }),
-			/* @__PURE__ */ s("div", {
-				className: "space-y-2",
-				children: [c.map((t) => /* @__PURE__ */ s("label", {
+			/* @__PURE__ */ l("div", {
+				role: "group",
+				"aria-label": h("bigconsole.dataSinks.cacheTtl.heading", "Cache Duration"),
+				className: "space-y-list-gap",
+				children: [g.map((t) => /* @__PURE__ */ l("label", {
 					className: `
-              flex items-start gap-3
-              p-3
-              border rounded-lg
-              cursor-pointer
-              transition-all
-              ${f ? "opacity-50 cursor-not-allowed" : ""}
-              ${!h && e === t.value ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default hover:border-border-hover"}
+              flex cursor-pointer items-start gap-3
+              rounded-input
+              border p-3
+              motion-safe:transition-colors
+              ${f ? "cursor-not-allowed opacity-50" : ""}
+              ${!v && e === t.value ? "border-[var(--color-action-primary-bg)] bg-bg-accentSubtle" : "border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]"}
             `,
-					children: [/* @__PURE__ */ o("input", {
+					children: [/* @__PURE__ */ c("input", {
 						type: "radio",
 						name: "cache-ttl",
-						checked: !h && e === t.value,
-						onChange: () => S(t.value),
+						checked: !v && e === t.value,
+						onChange: () => T(t.value),
 						disabled: f,
-						className: "\n                mt-0.5\n                w-4 h-4\n                text-action-primary-bg\n                border-border-default\n                focus:ring-action-primary-bg\n                focus:ring-offset-0\n              "
-					}), /* @__PURE__ */ s("div", {
+						className: "\n                mt-0.5\n                h-4 w-4\n                border-[var(--color-border-default)]\n                text-action-primary-bg\n                focus-visible:ring-2\n                focus-visible:ring-ring\n              "
+					}), /* @__PURE__ */ l("div", {
 						className: "flex-1",
-						children: [/* @__PURE__ */ s("div", {
+						children: [/* @__PURE__ */ l("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ o("span", {
+							children: [/* @__PURE__ */ c("span", {
 								className: "text-sm font-medium text-text-primary",
 								children: t.label
-							}), t.recommended && /* @__PURE__ */ o("span", {
+							}), t.recommended && /* @__PURE__ */ c("span", {
 								className: "px-1.5 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded",
-								children: "Recommended"
+								children: h("bigconsole.dataSinks.cacheTtl.recommendedBadge", "Recommended")
 							})]
-						}), /* @__PURE__ */ o("p", {
+						}), /* @__PURE__ */ c("p", {
 							className: "text-xs text-text-secondary mt-0.5",
 							children: t.description
 						})]
 					})]
-				}, t.value)), /* @__PURE__ */ s("label", {
+				}, t.value)), /* @__PURE__ */ l("label", {
 					className: `
-            flex items-start gap-3
-            p-3
-            border rounded-lg
-            cursor-pointer
-            transition-all
-            ${f ? "opacity-50 cursor-not-allowed" : ""}
-            ${h ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default hover:border-border-hover"}
+            flex cursor-pointer items-start gap-3
+            rounded-input
+            border p-3
+            motion-safe:transition-colors
+            ${f ? "cursor-not-allowed opacity-50" : ""}
+            ${v ? "border-[var(--color-action-primary-bg)] bg-bg-accentSubtle" : "border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]"}
           `,
-					children: [/* @__PURE__ */ o("input", {
+					children: [/* @__PURE__ */ c("input", {
 						type: "radio",
 						name: "cache-ttl",
-						checked: h,
-						onChange: C,
+						checked: v,
+						onChange: E,
 						disabled: f,
-						className: "\n              mt-0.5\n              w-4 h-4\n              text-action-primary-bg\n              border-border-default\n              focus:ring-action-primary-bg\n              focus:ring-offset-0\n            "
-					}), /* @__PURE__ */ s("div", {
+						className: "\n              mt-0.5\n              h-4 w-4\n              border-[var(--color-border-default)]\n              text-action-primary-bg\n              focus-visible:ring-2\n              focus-visible:ring-ring\n            "
+					}), /* @__PURE__ */ l("div", {
 						className: "flex-1",
 						children: [
-							/* @__PURE__ */ o("span", {
+							/* @__PURE__ */ c("span", {
 								className: "text-sm font-medium text-text-primary",
-								children: "Custom"
+								children: h("bigconsole.dataSinks.cacheTtl.customLabel", "Custom")
 							}),
-							/* @__PURE__ */ o("p", {
+							/* @__PURE__ */ c("p", {
 								className: "text-xs text-text-secondary mt-0.5",
-								children: "Enter a custom cache duration (30 - 86400 seconds)"
+								children: h("bigconsole.dataSinks.cacheTtl.customDescription", "Enter a custom cache duration (30 - 86400 seconds)")
 							}),
-							h && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("div", {
-								className: "mt-3 flex items-center gap-2",
+							v && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("div", {
+								className: "mt-3 flex flex-wrap items-center gap-2",
 								children: [
-									/* @__PURE__ */ o("input", {
+									/* @__PURE__ */ c("input", {
 										type: "number",
-										value: _,
-										onChange: w,
+										"aria-label": "Custom cache duration in seconds",
+										value: b,
+										onChange: D,
 										disabled: f,
 										min: 30,
 										max: 86400,
 										placeholder: "300",
 										className: `
-                      w-32 px-3 py-2
-                      bg-bg-sunken
-                      border rounded-md
+                      h-control-md w-full min-w-0 rounded-input
+                      border bg-bg-sunken
+                      px-3
                       text-sm text-text-primary
-                      placeholder-text-tertiary
-                      focus:outline-none
-                      focus:border-action-primary-bg
-                      focus:ring-2
-                      focus:ring-action-primary-bg/20
-                      ${p || y ? "border-status-error-border" : "border-border-default"}
+                      focus-visible:outline-none
+                      focus-visible:ring-2
+                      focus-visible:ring-ring
+                      sm:w-32
+                      ${p || S ? "border-[var(--color-status-error-border)]" : "border-[var(--color-border-default)]"}
                     `
 									}),
-									/* @__PURE__ */ o("span", {
+									/* @__PURE__ */ c("span", {
 										className: "text-sm text-text-secondary",
-										children: "seconds"
+										children: h("bigconsole.dataSinks.cacheTtl.secondsUnit", "seconds")
 									}),
-									_ && !isNaN(parseInt(_)) && !y && /* @__PURE__ */ s("span", {
-										className: "text-xs text-text-tertiary",
+									b && !isNaN(parseInt(b)) && !S && /* @__PURE__ */ l("span", {
+										className: "text-xs text-text-muted",
 										children: [
 											"(",
-											u(parseInt(_)),
+											_(parseInt(b)),
 											")"
 										]
 									})
 								]
-							}), y && /* @__PURE__ */ s("div", {
+							}), S && /* @__PURE__ */ l("div", {
 								className: "flex items-center gap-1 mt-1",
-								children: [/* @__PURE__ */ o("svg", {
+								children: [/* @__PURE__ */ c("svg", {
 									className: "w-3.5 h-3.5 text-status-error-text flex-shrink-0",
 									fill: "none",
 									stroke: "currentColor",
 									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ o("path", {
+									children: /* @__PURE__ */ c("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 2,
 										d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 									})
-								}), /* @__PURE__ */ o("span", {
+								}), /* @__PURE__ */ c("span", {
 									className: "text-xs text-status-error-text",
-									children: y
+									children: S
 								})]
 							})] })
 						]
 					})]
 				})]
 			}),
-			p && /* @__PURE__ */ s("div", {
+			p && /* @__PURE__ */ l("div", {
 				className: "flex items-start gap-2",
-				children: [/* @__PURE__ */ o("svg", {
+				children: [/* @__PURE__ */ c("svg", {
 					className: "w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ o("path", {
+					children: /* @__PURE__ */ c("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
 						d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 					})
-				}), /* @__PURE__ */ o("p", {
+				}), /* @__PURE__ */ c("p", {
 					className: "text-xs text-status-error-text",
 					children: p
 				})]
 			}),
-			e !== null && !p && /* @__PURE__ */ s("div", {
+			e !== null && !p && /* @__PURE__ */ l("div", {
 				className: "flex items-center gap-2 text-xs text-text-secondary",
-				children: [/* @__PURE__ */ o("svg", {
+				children: [/* @__PURE__ */ c("svg", {
 					className: "w-4 h-4",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ o("path", {
+					children: /* @__PURE__ */ c("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
 						d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 					})
-				}), /* @__PURE__ */ s("span", { children: [
-					"Data will be cached for ",
-					u(e),
-					" before being refreshed"
-				] })]
+				}), /* @__PURE__ */ c("span", { children: h("bigconsole.dataSinks.cacheTtl.infoCachedFor", "Data will be cached for {{duration}} before being refreshed", { duration: _(e) }) })]
 			})
 		]
 	});
 });
 //#endregion
-export { d as default };
+export { f as default };
 //# sourceMappingURL=CacheTTLSelector.js.map