@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/dashboard/GlobalFiltersBar/GlobalFiltersBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalFiltersBar.js","names":[],"sources":["../../../../../src/bigconsole/components/dashboard/GlobalFiltersBar/GlobalFiltersBar.tsx"],"sourcesContent":["/**\n * GlobalFiltersBar Component\n *\n * Displays and manages global dashboard filters.\n * v2.0: Added URL persistence and filter presets support.\n */\n\nimport React, { useState, useEffect, useCallback } from 'react';\nimport {\n  useGlobalFilters,\n  useFilterUrlSync,\n  useFilterPresets,\n  type GlobalFilter,\n  type FilterType,\n} from '../../../hooks';\nimport { FilterChip } from './FilterChip';\nimport { FilterEditor } from './FilterEditor';\nimport { FilterPresetSelector } from './FilterPresetSelector';\nimport { SEMANTIC_COLORS } from '../../../utils/semanticTokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface GlobalFiltersBarProps {\n  dashboardId: string;\n  onFilterChange?: (values: Record<string, unknown>) => void;\n  collapsible?: boolean;\n  className?: string;\n  /** Enable URL sync for shareable filtered views */\n  enableUrlSync?: boolean;\n  /** Enable filter presets */\n  enablePresets?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function GlobalFiltersBar({\n  dashboardId,\n  onFilterChange,\n  collapsible = true,\n  className = '',\n  enableUrlSync = true,\n  enablePresets = true,\n}: GlobalFiltersBarProps) {\n  const { t } = useI18n();\n  const {\n    filters,\n    activeValues,\n    loading,\n    fetchFilters,\n    createFilter,\n    updateFilter,\n    deleteFilter,\n    setFilterValue,\n    resetFilters,\n  } = useGlobalFilters();\n\n  // URL Sync hook\n  const { getShareableUrl, clearUrlParams } = useFilterUrlSync({\n    enabled: enableUrlSync,\n    paramPrefix: 'filter_',\n    debounceMs: 300,\n  });\n\n  // Filter Presets hook\n  const {\n    presets,\n    activePresetId,\n    loadPresets,\n    applyPreset,\n    saveCurrentAsPreset,\n    deletePreset: removePreset,\n    clearActivePreset,\n  } = useFilterPresets(dashboardId);\n\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const [isEditorOpen, setIsEditorOpen] = useState(false);\n  const [editingFilter, setEditingFilter] = useState<GlobalFilter | null>(null);\n  const [showShareTooltip, setShowShareTooltip] = useState(false);\n\n  // Fetch filters on mount\n  useEffect(() => {\n    if (dashboardId) {\n      fetchFilters(dashboardId);\n      if (enablePresets) {\n        loadPresets(dashboardId);\n      }\n    }\n  }, [dashboardId, fetchFilters, loadPresets, enablePresets]);\n\n  // Notify parent of filter changes\n  useEffect(() => {\n    if (onFilterChange) {\n      onFilterChange(activeValues);\n    }\n  }, [activeValues, onFilterChange]);\n\n  // Clear active preset when filter values change manually\n  useEffect(() => {\n    if (activePresetId && Object.keys(activeValues).length > 0) {\n      // Check if current values differ from active preset\n      const preset = presets.find((p) => p.id === activePresetId);\n      if (preset) {\n        const presetStr = JSON.stringify(preset.values);\n        const currentStr = JSON.stringify(activeValues);\n        if (presetStr !== currentStr) {\n          clearActivePreset();\n        }\n      }\n    }\n  }, [activeValues, activePresetId, presets, clearActivePreset]);\n\n  // Handle filter value change\n  const handleFilterChange = useCallback(\n    (filterId: string, value: unknown) => {\n      setFilterValue(filterId, value);\n    },\n    [setFilterValue]\n  );\n\n  // Handle add new filter\n  const handleAddFilter = useCallback(() => {\n    setEditingFilter(null);\n    setIsEditorOpen(true);\n  }, []);\n\n  // Handle edit filter\n  const handleEditFilter = useCallback((filter: GlobalFilter) => {\n    setEditingFilter(filter);\n    setIsEditorOpen(true);\n  }, []);\n\n  // Handle save filter\n  const handleSaveFilter = useCallback(\n    async (data: {\n      name: string;\n      type: FilterType;\n      config: Record<string, unknown>;\n      defaultValue?: unknown;\n      isRequired?: boolean;\n    }) => {\n      if (editingFilter) {\n        await updateFilter({\n          id: editingFilter.id,\n          name: data.name,\n          config: data.config,\n          defaultValue: data.defaultValue,\n          isRequired: data.isRequired,\n        });\n      } else {\n        await createFilter({\n          dashboardId,\n          name: data.name,\n          type: data.type,\n          config: data.config,\n          defaultValue: data.defaultValue,\n          isRequired: data.isRequired,\n        });\n      }\n      setIsEditorOpen(false);\n      setEditingFilter(null);\n    },\n    [dashboardId, editingFilter, createFilter, updateFilter]\n  );\n\n  // Handle delete filter\n  const handleDeleteFilter = useCallback(\n    async (filterId: string) => {\n      await deleteFilter(filterId);\n    },\n    [deleteFilter]\n  );\n\n  // Handle reset all filters\n  const handleResetAll = useCallback(() => {\n    resetFilters();\n    clearUrlParams();\n    clearActivePreset();\n  }, [resetFilters, clearUrlParams, clearActivePreset]);\n\n  // Handle copy shareable URL\n  const handleCopyShareableUrl = useCallback(async () => {\n    const url = getShareableUrl();\n    try {\n      await navigator.clipboard.writeText(url);\n      setShowShareTooltip(true);\n      setTimeout(() => setShowShareTooltip(false), 2000);\n    } catch {\n      // Failed to copy URL to clipboard\n    }\n  }, [getShareableUrl]);\n\n  // Handle apply preset\n  const handleApplyPreset = useCallback(\n    (presetId: string) => {\n      applyPreset(presetId);\n    },\n    [applyPreset]\n  );\n\n  // Handle save current as preset\n  const handleSavePreset = useCallback(\n    (name: string, description?: string) => {\n      saveCurrentAsPreset(name, description);\n    },\n    [saveCurrentAsPreset]\n  );\n\n  // Handle delete preset\n  const handleDeletePreset = useCallback(\n    (presetId: string) => {\n      removePreset(presetId);\n    },\n    [removePreset]\n  );\n\n  // Toggle collapse\n  const toggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, []);\n\n  // Count active filters\n  const activeFilterCount = Object.keys(activeValues).filter(\n    (key) => activeValues[key] !== undefined && activeValues[key] !== null && activeValues[key] !== ''\n  ).length;\n\n  if (loading && filters.length === 0) {\n    return (\n      <div\n        className={className}\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: '10px',\n          padding: '12px 16px',\n          backgroundColor: SEMANTIC_COLORS.bgPrimary,\n          borderBottom: `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n        }}\n      >\n        <div\n          style={{\n            width: '16px',\n            height: '16px',\n            border: `2px solid ${SEMANTIC_COLORS.actionPrimaryBg}`,\n            borderTopColor: 'transparent',\n            borderRadius: '50%',\n            animation: 'spin 1s linear infinite',\n          }}\n        />\n        <span style={{ color: SEMANTIC_COLORS.textSecondary, fontSize: '14px' }}>\n          {t('bigconsole.filters.bar.loading', 'Loading filters...')}\n        </span>\n      </div>\n    );\n  }\n\n  // Show empty state with \"Add Filter\" button when no filters exist\n  if (filters.length === 0) {\n    return (\n      <div\n        className={className}\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: '12px 16px',\n          backgroundColor: SEMANTIC_COLORS.bgPrimary,\n          borderBottom: `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n        }}\n      >\n        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>\n          <span style={{ fontWeight: 600, fontSize: '14px', color: SEMANTIC_COLORS.textPrimary }}>\n            {t('bigconsole.filters.bar.title', 'Filters')}\n          </span>\n          <span style={{ color: SEMANTIC_COLORS.textTertiary, fontSize: '13px' }}>\n            {t('bigconsole.filters.bar.noFiltersConfigured', 'No filters configured')}\n          </span>\n        </div>\n        <button\n          onClick={handleAddFilter}\n          style={{\n            padding: '6px 14px',\n            fontSize: '13px',\n            color: SEMANTIC_COLORS.actionPrimaryFg,\n            backgroundColor: SEMANTIC_COLORS.actionPrimaryBg,\n            border: 'none',\n            borderRadius: '6px',\n            cursor: 'pointer',\n            fontWeight: 500,\n            boxShadow: '0 2px 4px rgba(99, 102, 241, 0.3)',\n          }}\n        >\n          {t('bigconsole.filters.bar.addFilter', '+ Add Filter')}\n        </button>\n\n        {/* Filter Editor Modal */}\n        {isEditorOpen && (\n          <FilterEditor\n            filter={editingFilter}\n            onSave={handleSaveFilter}\n            onClose={() => {\n              setIsEditorOpen(false);\n              setEditingFilter(null);\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={className}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        backgroundColor: SEMANTIC_COLORS.bgPrimary,\n        borderBottom: `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n        boxShadow: '0 2px 4px rgba(0,0,0,0.05)',\n      }}\n    >\n      {/* Header */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: '10px 16px',\n          borderBottom: isCollapsed ? 'none' : `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n          backgroundColor: SEMANTIC_COLORS.bgSecondary,\n        }}\n      >\n        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>\n          <span style={{ fontWeight: 600, fontSize: '14px', color: SEMANTIC_COLORS.textPrimary }}>\n            {t('bigconsole.filters.bar.title', 'Filters')}\n          </span>\n          <span\n            style={{\n              fontSize: '12px',\n              color: SEMANTIC_COLORS.actionPrimaryFg,\n              backgroundColor: SEMANTIC_COLORS.actionPrimaryBg,\n              padding: '2px 8px',\n              borderRadius: '12px',\n              fontWeight: 500,\n            }}\n          >\n            {filters.length}\n          </span>\n          {activeFilterCount > 0 && (\n            <span\n              style={{\n                fontSize: '11px',\n                color: SEMANTIC_COLORS.statusSuccessText,\n                backgroundColor: SEMANTIC_COLORS.statusSuccessBgSubtle,\n                padding: '2px 8px',\n                borderRadius: '12px',\n                fontWeight: 500,\n              }}\n            >\n              {t('bigconsole.filters.bar.activeCount', '{{count}} active', {\n                count: activeFilterCount ?? '',\n              })}\n            </span>\n          )}\n        </div>\n\n        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>\n          {/* Filter Presets Selector */}\n          {enablePresets && (\n            <FilterPresetSelector\n              presets={presets}\n              activePresetId={activePresetId}\n              onApplyPreset={handleApplyPreset}\n              onSavePreset={handleSavePreset}\n              onDeletePreset={handleDeletePreset}\n            />\n          )}\n\n          {/* Share URL Button */}\n          {enableUrlSync && activeFilterCount > 0 && (\n            <div style={{ position: 'relative' }}>\n              <button\n                onClick={handleCopyShareableUrl}\n                title={t('bigconsole.filters.bar.shareUrlTitle', 'Copy shareable URL with filters')}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: '6px',\n                  padding: '8px 12px',\n                  fontSize: '13px',\n                  color: SEMANTIC_COLORS.textSecondary,\n                  backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                  border: `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n                  borderRadius: '6px',\n                  cursor: 'pointer',\n                  fontWeight: 500,\n                }}\n              >\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                  <path d=\"M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8\" />\n                  <polyline points=\"16,6 12,2 8,6\" />\n                  <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\" />\n                </svg>\n                {t('bigconsole.filters.bar.share', 'Share')}\n              </button>\n              {showShareTooltip && (\n                <div\n                  style={{\n                    position: 'absolute',\n                    top: '100%',\n                    left: '50%',\n                    transform: 'translateX(-50%)',\n                    marginTop: '4px',\n                    padding: '6px 12px',\n                    backgroundColor: SEMANTIC_COLORS.textPrimary,\n                    color: SEMANTIC_COLORS.bgPrimary,\n                    fontSize: '12px',\n                    borderRadius: '4px',\n                    whiteSpace: 'nowrap',\n                    zIndex: 100001,\n                  }}\n                >\n                  {t('bigconsole.filters.bar.urlCopied', 'URL copied!')}\n                </div>\n              )}\n            </div>\n          )}\n\n          {/* Reset Button */}\n          {activeFilterCount > 0 && (\n            <button\n              onClick={handleResetAll}\n              style={{\n                padding: '8px 12px',\n                fontSize: '13px',\n                color: SEMANTIC_COLORS.statusErrorText,\n                backgroundColor: 'transparent',\n                border: 'none',\n                cursor: 'pointer',\n                fontWeight: 500,\n              }}\n            >\n              {t('bigconsole.filters.bar.resetAll', 'Reset all')}\n            </button>\n          )}\n\n          {/* Add Filter Button */}\n          <button\n            onClick={handleAddFilter}\n            style={{\n              padding: '8px 14px',\n              fontSize: '13px',\n              color: SEMANTIC_COLORS.actionPrimaryFg,\n              backgroundColor: SEMANTIC_COLORS.actionPrimaryBg,\n              border: 'none',\n              borderRadius: '6px',\n              cursor: 'pointer',\n              fontWeight: 500,\n              boxShadow: '0 2px 4px rgba(99, 102, 241, 0.3)',\n            }}\n          >\n            {t('bigconsole.filters.bar.addFilter', '+ Add Filter')}\n          </button>\n\n          {/* Collapse Button */}\n          {collapsible && (\n            <button\n              onClick={toggleCollapse}\n              style={{\n                padding: '8px 12px',\n                fontSize: '13px',\n                color: SEMANTIC_COLORS.textSecondary,\n                backgroundColor: 'transparent',\n                border: `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n                borderRadius: '6px',\n                cursor: 'pointer',\n              }}\n            >\n              {isCollapsed\n                ? t('bigconsole.filters.bar.expand', '▼ Expand')\n                : t('bigconsole.filters.bar.collapse', '▲ Collapse')}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Filters List */}\n      {!isCollapsed && (\n        <div\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: '10px',\n            padding: '12px 16px',\n            overflow: 'visible',\n            backgroundColor: SEMANTIC_COLORS.bgPrimary,\n            position: 'relative',\n          }}\n        >\n          {filters.map((filter) => (\n            <FilterChip\n              key={filter.id}\n              filter={filter}\n              value={activeValues[filter.id]}\n              onChange={(value) => handleFilterChange(filter.id, value)}\n              onEdit={() => handleEditFilter(filter)}\n              onDelete={() => handleDeleteFilter(filter.id)}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Filter Editor Modal */}\n      {isEditorOpen && (\n        <FilterEditor\n          filter={editingFilter}\n          onSave={handleSaveFilter}\n          onClose={() => {\n            setIsEditorOpen(false);\n            setEditingFilter(null);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default GlobalFiltersBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalFiltersBar.js","names":[],"sources":["../../../../../src/bigconsole/components/dashboard/GlobalFiltersBar/GlobalFiltersBar.tsx"],"sourcesContent":["/**\n * GlobalFiltersBar Component\n *\n * Displays and manages global dashboard filters.\n * v2.0: Added URL persistence and filter presets support.\n */\n\nimport React, { useState, useEffect, useCallback } from 'react';\nimport {\n  useGlobalFilters,\n  useFilterUrlSync,\n  useFilterPresets,\n  type GlobalFilter,\n  type FilterType,\n} from '../../../hooks';\nimport { FilterChip } from './FilterChip';\nimport { FilterEditor } from './FilterEditor';\nimport { FilterPresetSelector } from './FilterPresetSelector';\nimport { SEMANTIC_COLORS } from '../../../utils/semanticTokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { SECTION_FOCUS_RING } from '../../common';\n\n// ============================================================================\n// Local class vocabulary\n// ============================================================================\n\n/**\n * The filters bar configures the board below it. Before this it shipped a\n * saturated primary \"+ Add Filter\" with an indigo glow and a drop-shadowed\n * container, which made the configuration louder than the data it filtered.\n * Everything here is deliberately secondary weight.\n */\nconst SECONDARY_BUTTON_CLASSES = `inline-flex min-h-control-sm items-center gap-icon-gap rounded-button border border-[var(--color-border-subtle)] bg-bg-surface px-3 py-1 text-sm font-medium text-text-primary motion-safe:transition-colors hover:bg-bg-accentSubtle ${SECTION_FOCUS_RING}`;\n\n/** Text-only affordances (reset, collapse) sit a step below that again. */\nconst QUIET_BUTTON_CLASSES = `inline-flex min-h-control-sm items-center gap-icon-gap rounded-button px-2 py-1 text-sm font-medium text-text-secondary motion-safe:transition-colors hover:bg-bg-accentSubtle ${SECTION_FOCUS_RING}`;\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface GlobalFiltersBarProps {\n  dashboardId: string;\n  onFilterChange?: (values: Record<string, unknown>) => void;\n  collapsible?: boolean;\n  className?: string;\n  /** Enable URL sync for shareable filtered views */\n  enableUrlSync?: boolean;\n  /** Enable filter presets */\n  enablePresets?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function GlobalFiltersBar({\n  dashboardId,\n  onFilterChange,\n  collapsible = true,\n  className = '',\n  enableUrlSync = true,\n  enablePresets = true,\n}: GlobalFiltersBarProps) {\n  const { t } = useI18n();\n  const {\n    filters,\n    activeValues,\n    loading,\n    fetchFilters,\n    createFilter,\n    updateFilter,\n    deleteFilter,\n    setFilterValue,\n    resetFilters,\n  } = useGlobalFilters();\n\n  // URL Sync hook\n  const { getShareableUrl, clearUrlParams } = useFilterUrlSync({\n    enabled: enableUrlSync,\n    paramPrefix: 'filter_',\n    debounceMs: 300,\n  });\n\n  // Filter Presets hook\n  const {\n    presets,\n    activePresetId,\n    loadPresets,\n    applyPreset,\n    saveCurrentAsPreset,\n    deletePreset: removePreset,\n    clearActivePreset,\n  } = useFilterPresets(dashboardId);\n\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const [isEditorOpen, setIsEditorOpen] = useState(false);\n  const [editingFilter, setEditingFilter] = useState<GlobalFilter | null>(null);\n  const [showShareTooltip, setShowShareTooltip] = useState(false);\n\n  // Fetch filters on mount\n  useEffect(() => {\n    if (dashboardId) {\n      fetchFilters(dashboardId);\n      if (enablePresets) {\n        loadPresets(dashboardId);\n      }\n    }\n  }, [dashboardId, fetchFilters, loadPresets, enablePresets]);\n\n  // Notify parent of filter changes\n  useEffect(() => {\n    if (onFilterChange) {\n      onFilterChange(activeValues);\n    }\n  }, [activeValues, onFilterChange]);\n\n  // Clear active preset when filter values change manually\n  useEffect(() => {\n    if (activePresetId && Object.keys(activeValues).length > 0) {\n      // Check if current values differ from active preset\n      const preset = presets.find((p) => p.id === activePresetId);\n      if (preset) {\n        const presetStr = JSON.stringify(preset.values);\n        const currentStr = JSON.stringify(activeValues);\n        if (presetStr !== currentStr) {\n          clearActivePreset();\n        }\n      }\n    }\n  }, [activeValues, activePresetId, presets, clearActivePreset]);\n\n  // Handle filter value change\n  const handleFilterChange = useCallback(\n    (filterId: string, value: unknown) => {\n      setFilterValue(filterId, value);\n    },\n    [setFilterValue]\n  );\n\n  // Handle add new filter\n  const handleAddFilter = useCallback(() => {\n    setEditingFilter(null);\n    setIsEditorOpen(true);\n  }, []);\n\n  // Handle edit filter\n  const handleEditFilter = useCallback((filter: GlobalFilter) => {\n    setEditingFilter(filter);\n    setIsEditorOpen(true);\n  }, []);\n\n  // Handle save filter\n  const handleSaveFilter = useCallback(\n    async (data: {\n      name: string;\n      type: FilterType;\n      config: Record<string, unknown>;\n      defaultValue?: unknown;\n      isRequired?: boolean;\n    }) => {\n      if (editingFilter) {\n        await updateFilter({\n          id: editingFilter.id,\n          name: data.name,\n          config: data.config,\n          defaultValue: data.defaultValue,\n          isRequired: data.isRequired,\n        });\n      } else {\n        await createFilter({\n          dashboardId,\n          name: data.name,\n          type: data.type,\n          config: data.config,\n          defaultValue: data.defaultValue,\n          isRequired: data.isRequired,\n        });\n      }\n      setIsEditorOpen(false);\n      setEditingFilter(null);\n    },\n    [dashboardId, editingFilter, createFilter, updateFilter]\n  );\n\n  // Handle delete filter\n  const handleDeleteFilter = useCallback(\n    async (filterId: string) => {\n      await deleteFilter(filterId);\n    },\n    [deleteFilter]\n  );\n\n  // Handle reset all filters\n  const handleResetAll = useCallback(() => {\n    resetFilters();\n    clearUrlParams();\n    clearActivePreset();\n  }, [resetFilters, clearUrlParams, clearActivePreset]);\n\n  // Handle copy shareable URL\n  const handleCopyShareableUrl = useCallback(async () => {\n    const url = getShareableUrl();\n    try {\n      await navigator.clipboard.writeText(url);\n      setShowShareTooltip(true);\n      setTimeout(() => setShowShareTooltip(false), 2000);\n    } catch {\n      // Failed to copy URL to clipboard\n    }\n  }, [getShareableUrl]);\n\n  // Handle apply preset\n  const handleApplyPreset = useCallback(\n    (presetId: string) => {\n      applyPreset(presetId);\n    },\n    [applyPreset]\n  );\n\n  // Handle save current as preset\n  const handleSavePreset = useCallback(\n    (name: string, description?: string) => {\n      saveCurrentAsPreset(name, description);\n    },\n    [saveCurrentAsPreset]\n  );\n\n  // Handle delete preset\n  const handleDeletePreset = useCallback(\n    (presetId: string) => {\n      removePreset(presetId);\n    },\n    [removePreset]\n  );\n\n  // Toggle collapse\n  const toggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, []);\n\n  // Count active filters\n  const activeFilterCount = Object.keys(activeValues).filter(\n    (key) => activeValues[key] !== undefined && activeValues[key] !== null && activeValues[key] !== ''\n  ).length;\n\n  if (loading && filters.length === 0) {\n    return (\n      <div\n        className={`flex flex-wrap items-center gap-control-gap border-b border-[var(--color-border-subtle)] bg-bg-sunken px-card-padding py-control-gap ${className}`}\n        role=\"status\"\n        aria-live=\"polite\"\n        data-testid=\"global-filters-loading\"\n      >\n        <span className=\"h-icon-sm w-icon-sm animate-spin rounded-full border-2 border-action-primary-bg border-t-transparent\" />\n        <span className=\"text-sm text-text-secondary\">{t('bigconsole.filters.bar.loading', 'Loading filters...')}</span>\n      </div>\n    );\n  }\n\n  // Show empty state with \"Add Filter\" button when no filters exist\n  if (filters.length === 0) {\n    return (\n      <div\n        className={`flex flex-wrap items-center justify-between gap-control-gap border-b border-[var(--color-border-subtle)] bg-bg-sunken px-card-padding py-control-gap ${className}`}\n        data-testid=\"global-filters-empty\"\n      >\n        <div className=\"flex min-w-0 flex-wrap items-center gap-icon-gap\">\n          <h2 className=\"text-sm font-semibold text-text-primary\">{t('bigconsole.filters.bar.title', 'Filters')}</h2>\n          <span className=\"text-sm text-text-muted\">\n            {t('bigconsole.filters.bar.noFiltersConfigured', 'No filters configured')}\n          </span>\n        </div>\n        <button type=\"button\" onClick={handleAddFilter} className={SECONDARY_BUTTON_CLASSES}>\n          {t('bigconsole.filters.bar.addFilter', '+ Add Filter')}\n        </button>\n\n        {/* Filter Editor Modal */}\n        {isEditorOpen && (\n          <FilterEditor\n            filter={editingFilter}\n            onSave={handleSaveFilter}\n            onClose={() => {\n              setIsEditorOpen(false);\n              setEditingFilter(null);\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <section\n      // A configuration band, not a result: recessed surface, no drop shadow,\n      // secondary-weight controls. It sits directly above the board and must\n      // stay quieter than it.\n      className={`flex min-w-0 flex-col border-b border-[var(--color-border-subtle)] bg-bg-sunken ${className}`}\n      aria-labelledby=\"global-filters-heading\"\n      data-testid=\"global-filters-bar\"\n    >\n      {/* Header */}\n      <div\n        className={`flex flex-wrap items-center justify-between gap-control-gap px-card-padding py-control-gap ${\n          isCollapsed ? '' : 'border-b border-[var(--color-border-subtle)]'\n        }`}\n      >\n        <div className=\"flex min-w-0 flex-wrap items-center gap-icon-gap\">\n          <h2 id=\"global-filters-heading\" className=\"text-sm font-semibold text-text-primary\">\n            {t('bigconsole.filters.bar.title', 'Filters')}\n          </h2>\n          <span className=\"rounded-pill bg-bg-surface px-2 py-0.5 text-xs font-medium text-text-secondary\">\n            {filters.length}\n          </span>\n          {activeFilterCount > 0 && (\n            <span className=\"rounded-pill bg-[var(--color-status-success-bgSubtle)] px-2 py-0.5 text-xs font-medium text-status-success-text\">\n              {t('bigconsole.filters.bar.activeCount', '{{count}} active', {\n                count: activeFilterCount ?? '',\n              })}\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex min-w-0 flex-wrap items-center justify-end gap-control-gap\">\n          {/* Filter Presets Selector */}\n          {enablePresets && (\n            <FilterPresetSelector\n              presets={presets}\n              activePresetId={activePresetId}\n              onApplyPreset={handleApplyPreset}\n              onSavePreset={handleSavePreset}\n              onDeletePreset={handleDeletePreset}\n            />\n          )}\n\n          {/* Share URL Button */}\n          {enableUrlSync && activeFilterCount > 0 && (\n            <div style={{ position: 'relative' }}>\n              <button\n                type=\"button\"\n                onClick={handleCopyShareableUrl}\n                title={t('bigconsole.filters.bar.shareUrlTitle', 'Copy shareable URL with filters')}\n                className={SECONDARY_BUTTON_CLASSES}\n              >\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                  <path d=\"M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8\" />\n                  <polyline points=\"16,6 12,2 8,6\" />\n                  <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\" />\n                </svg>\n                {t('bigconsole.filters.bar.share', 'Share')}\n              </button>\n              {showShareTooltip && (\n                <div\n                  style={{\n                    position: 'absolute',\n                    top: '100%',\n                    left: '50%',\n                    transform: 'translateX(-50%)',\n                    marginTop: '4px',\n                    padding: '6px 12px',\n                    backgroundColor: SEMANTIC_COLORS.textPrimary,\n                    color: SEMANTIC_COLORS.bgPrimary,\n                    fontSize: '12px',\n                    borderRadius: '4px',\n                    whiteSpace: 'nowrap',\n                    zIndex: 100001,\n                  }}\n                >\n                  {t('bigconsole.filters.bar.urlCopied', 'URL copied!')}\n                </div>\n              )}\n            </div>\n          )}\n\n          {/* Reset Button */}\n          {activeFilterCount > 0 && (\n            <button type=\"button\" onClick={handleResetAll} className={`${QUIET_BUTTON_CLASSES} text-status-error-text`}>\n              {t('bigconsole.filters.bar.resetAll', 'Reset all')}\n            </button>\n          )}\n\n          {/* Add Filter Button */}\n          <button type=\"button\" onClick={handleAddFilter} className={SECONDARY_BUTTON_CLASSES}>\n            {t('bigconsole.filters.bar.addFilter', '+ Add Filter')}\n          </button>\n\n          {/* Collapse Button */}\n          {collapsible && (\n            <button\n              type=\"button\"\n              onClick={toggleCollapse}\n              aria-expanded={!isCollapsed}\n              // The chips container is unmounted while collapsed; pointing\n              // aria-controls at a missing id is an invalid reference, so only\n              // advertise it when the target actually exists.\n              aria-controls={isCollapsed ? undefined : 'global-filters-chips'}\n              className={QUIET_BUTTON_CLASSES}\n            >\n              {isCollapsed\n                ? t('bigconsole.filters.bar.expand', '▼ Expand')\n                : t('bigconsole.filters.bar.collapse', '▲ Collapse')}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Filters List */}\n      {!isCollapsed && (\n        <div\n          id=\"global-filters-chips\"\n          className=\"relative flex flex-wrap gap-control-gap px-card-padding py-control-gap\"\n          style={{ overflow: 'visible' }}\n        >\n          {filters.map((filter) => (\n            <FilterChip\n              key={filter.id}\n              filter={filter}\n              value={activeValues[filter.id]}\n              onChange={(value) => handleFilterChange(filter.id, value)}\n              onEdit={() => handleEditFilter(filter)}\n              onDelete={() => handleDeleteFilter(filter.id)}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Filter Editor Modal */}\n      {isEditorOpen && (\n        <FilterEditor\n          filter={editingFilter}\n          onSave={handleSaveFilter}\n          onClose={() => {\n            setIsEditorOpen(false);\n            setEditingFilter(null);\n          }}\n        />\n      )}\n    </section>\n  );\n}\n\nexport default GlobalFiltersBar;\n"],"mappings":"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"}

package/dist/bigconsole/components/dashboard/ImportDashboardDialog.js

@@ -1,11 +1,13 @@
-import { reportBigConsoleQuotaError as e } from "../../utils/quota.js";
-import t from "../../hooks/useBigConsoleAnalytics.js";
-import n from "../../hooks/useImportDashboard.js";
+import { Section as e } from "../common/Section.js";
+import "../common/index.js";
+import { reportBigConsoleQuotaError as t } from "../../utils/quota.js";
+import n from "../../hooks/useBigConsoleAnalytics.js";
+import r from "../../hooks/useImportDashboard.js";
 import "../../hooks/index.js";
-import { memo as r, useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
-import { AlertTriangle as c, ArrowLeft as l, Check as u, FileJson as ee, Info as d, RefreshCw as te, Upload as f, XCircle as p } from "lucide-react";
+import { memo as i, useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { AlertTriangle as ee, ArrowLeft as l, Check as u, FileJson as te, Info as d, RefreshCw as ne, Upload as f, XCircle as p } from "lucide-react";
 import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Badge as h, Button as g, Card as _, CardContent as v, Checkbox as y, Dialog as b, DialogContent as ne, DialogDescription as re, DialogFooter as ie, DialogHeader as x, DialogTitle as S, Input as C, Label as w, Spinner as T } from "@burdenoff/fe-libs/ui";
+import { Badge as h, Button as g, Card as _, CardContent as v, Checkbox as y, Dialog as b, DialogContent as x, DialogDescription as S, DialogFooter as re, DialogHeader as ie, DialogTitle as ae, Input as C, Label as w, Spinner as T } from "@burdenoff/fe-libs/ui";
 import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/ImportDashboardDialog.tsx
 function k(e) {
@@ -17,12 +19,12 @@ function k(e) {
 		return null;
 	}
 }
-var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
-	let { t: M } = m(), [N, P] = s("select"), [, F] = s(null), [I, L] = s(null), [R, z] = s(""), [B, V] = s("PRIVATE"), [H, U] = s(!1), W = o(null), { loading: G, error: K, validationResult: q, importResult: J, validateImport: Y, importDashboard: X, clearState: Z } = n(), Q = t();
-	a(() => {
-		r && (P("select"), F(null), L(null), z(""), V("PRIVATE"), U(!1), Z());
-	}, [r, Z]);
-	let ae = i(async (e) => {
+var A = i(function({ isOpen: i, onClose: A, onSuccess: j }) {
+	let { t: M } = m(), [N, P] = c("select"), [, F] = c(null), [I, L] = c(null), [R, z] = c(""), [B, V] = c("PRIVATE"), [H, U] = c(!1), W = s(null), { loading: G, error: K, validationResult: q, importResult: J, validateImport: Y, importDashboard: X, clearState: Z } = r(), Q = n();
+	o(() => {
+		i && (P("select"), F(null), L(null), z(""), V("PRIVATE"), U(!1), Z());
+	}, [i, Z]);
+	let oe = a(async (e) => {
 		let t = e.target.files?.[0];
 		if (!t) return;
 		if (!t.name.endsWith(".json")) {
@@ -39,31 +41,31 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 		}, n.onerror = () => {
 			alert(M("bigconsole.dashboards.import.failedToReadFile", "Failed to read file"));
 		}, n.readAsText(t);
-	}, [Y, M]), oe = i((e) => {
+	}, [Y, M]), se = a((e) => {
 		e.preventDefault();
 		let t = e.dataTransfer.files?.[0];
 		if (t) {
 			let e = new DataTransfer();
 			e.items.add(t), W.current && (W.current.files = e.files, W.current.dispatchEvent(new Event("change", { bubbles: !0 })));
 		}
-	}, []), se = i(async () => {
+	}, []), ce = a(async () => {
 		if (!I) return;
 		P("importing");
-		let t = {
+		let e = {
 			name: R.trim() || void 0,
 			visibility: B,
 			skipWarnings: H
 		};
 		Q("bigconsole.dashboard.import_clicked", { source: "import" });
 		try {
-			let e = await X(I, t);
-			e?.success && e.dashboard ? (P("complete"), Q("bigconsole.dashboard.imported", {
-				dashboardId: e.dashboard.id,
+			let t = await X(I, e);
+			t?.success && t.dashboard ? (P("complete"), Q("bigconsole.dashboard.imported", {
+				dashboardId: t.dashboard.id,
 				source: "import",
-				originalUpdated: e.originalUpdated ?? !1
-			}), j?.(e.dashboard.id, e.dashboard.name, e.originalUpdated ?? !1)) : P("preview");
-		} catch (t) {
-			if (e(t, "project")) {
+				originalUpdated: t.originalUpdated ?? !1
+			}), j?.(t.dashboard.id, t.dashboard.name, t.originalUpdated ?? !1)) : P("preview");
+		} catch (e) {
+			if (t(e, "project")) {
 				A();
 				return;
 			}
@@ -80,27 +82,27 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 		B
 	]), $ = !G && N !== "importing";
 	return /* @__PURE__ */ D(b, {
-		open: r,
+		open: i,
 		onOpenChange: (e) => !e && $ && A(),
-		children: /* @__PURE__ */ O(ne, {
+		children: /* @__PURE__ */ O(x, {
 			className: "sm:max-w-lg max-h-[85vh] flex flex-col",
 			children: [
-				/* @__PURE__ */ O(x, { children: [/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ O(ie, { children: [/* @__PURE__ */ O("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ D("div", {
 						className: "flex size-10 items-center justify-center rounded-lg bg-action-primary-bg/10",
 						children: /* @__PURE__ */ D(f, { className: "size-5 text-primary" })
-					}), /* @__PURE__ */ D(S, { children: M("bigconsole.dashboards.import.title", "Import Dashboard") })]
-				}), /* @__PURE__ */ D(re, { children: M("bigconsole.dashboards.import.description", "Upload a Dashboard export file to restore it into this workspace.") })] }),
+					}), /* @__PURE__ */ D(ae, { children: M("bigconsole.dashboards.import.title", "Import Dashboard") })]
+				}), /* @__PURE__ */ D(S, { children: M("bigconsole.dashboards.import.description", "Upload a Dashboard export file to restore it into this workspace.") })] }),
 				/* @__PURE__ */ O("div", {
 					className: "flex-1 overflow-y-auto py-4 space-y-4",
 					children: [
 						N === "select" && /* @__PURE__ */ O("div", {
 							onDragOver: (e) => e.preventDefault(),
-							onDrop: oe,
+							onDrop: se,
 							className: "border-2 border-dashed rounded-lg p-8 text-center hover:border-primary transition-colors",
 							children: [
-								/* @__PURE__ */ D(ee, { className: "size-12 mx-auto text-text-secondary mb-4" }),
+								/* @__PURE__ */ D(te, { className: "size-12 mx-auto text-text-secondary mb-4" }),
 								/* @__PURE__ */ D("p", {
 									className: "text-sm mb-2",
 									children: M("bigconsole.dashboards.import.dropzoneTitle", "Drag and drop a dashboard export file here")
@@ -113,7 +115,7 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 									ref: W,
 									type: "file",
 									accept: ".json",
-									onChange: ae,
+									onChange: oe,
 									className: "hidden"
 								}),
 								/* @__PURE__ */ D(g, {
@@ -128,8 +130,13 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 							]
 						}),
 						(N === "preview" || N === "importing") && q && /* @__PURE__ */ O(E, { children: [
-							/* @__PURE__ */ D(_, { children: /* @__PURE__ */ O(v, {
-								className: "p-4 space-y-2",
+							/* @__PURE__ */ O(e, {
+								headingLevel: 3,
+								emphasis: "muted",
+								padding: "compact",
+								title: "What's in this file",
+								"data-testid": "import-summary",
+								bodyClassName: "space-y-2",
 								children: [
 									/* @__PURE__ */ O("div", {
 										className: "flex items-center justify-between",
@@ -182,7 +189,7 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 										})]
 									}),
 									/* @__PURE__ */ O("div", {
-										className: "flex items-center justify-between",
+										className: "flex flex-wrap items-center justify-between gap-x-4",
 										children: [/* @__PURE__ */ D("span", {
 											className: "text-sm text-text-secondary",
 											children: M("bigconsole.dashboards.import.fieldSchemaVersion", "Schema Version")
@@ -192,104 +199,99 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 										})]
 									})
 								]
-							}) }),
-							q.errors.length > 0 && /* @__PURE__ */ D(_, {
-								className: "border-status-error-border/50 bg-status-error-bg/5",
-								children: /* @__PURE__ */ O(v, {
-									className: "p-3",
-									children: [/* @__PURE__ */ O("div", {
-										className: "flex items-center gap-2 mb-2",
-										children: [/* @__PURE__ */ D(p, { className: "size-4 text-status-error-text" }), /* @__PURE__ */ D("span", {
-											className: "text-sm font-medium text-status-error-text",
-											children: M("bigconsole.dashboards.import.errorsCount", "Errors ({{count}})", { count: q.errors.length })
-										})]
-									}), /* @__PURE__ */ D("ul", {
-										className: "text-xs text-status-error-text space-y-1",
-										children: q.errors.map((e, t) => /* @__PURE__ */ O("li", { children: [
-											/* @__PURE__ */ O("span", {
-												className: "font-mono",
-												children: [
-													"[",
-													e.code,
-													"]"
-												]
-											}),
-											" ",
-											e.message
-										] }, t))
-									})]
+							}),
+							q.errors.length > 0 && /* @__PURE__ */ D(e, {
+								headingLevel: 3,
+								tone: "danger",
+								padding: "compact",
+								icon: /* @__PURE__ */ D(p, { className: "size-4" }),
+								title: M("bigconsole.dashboards.import.errorsCount", "Errors ({{count}})", { count: q.errors.length }),
+								description: "These must be fixed in the export file before it can be imported.",
+								"data-testid": "import-errors",
+								children: /* @__PURE__ */ D("ul", {
+									className: "space-y-1 text-xs text-status-error-text",
+									children: q.errors.map((e) => /* @__PURE__ */ O("li", { children: [
+										/* @__PURE__ */ O("span", {
+											className: "font-mono",
+											children: [
+												"[",
+												e.code,
+												"]"
+											]
+										}),
+										" ",
+										e.message
+									] }, `${e.code}-${e.message}`))
 								})
 							}),
-							q.warnings.length > 0 && /* @__PURE__ */ D(_, {
-								className: "border-yellow-500/50 bg-yellow-500/5",
-								children: /* @__PURE__ */ O(v, {
-									className: "p-3",
-									children: [/* @__PURE__ */ O("div", {
-										className: "flex items-center gap-2 mb-2",
-										children: [/* @__PURE__ */ D(c, { className: "size-4 text-yellow-600" }), /* @__PURE__ */ D("span", {
-											className: "text-sm font-medium text-yellow-600",
-											children: M("bigconsole.dashboards.import.warningsCount", "Warnings ({{count}})", { count: q.warnings.length })
-										})]
-									}), /* @__PURE__ */ D("ul", {
-										className: "text-xs text-yellow-600 space-y-1",
-										children: q.warnings.map((e, t) => /* @__PURE__ */ O("li", { children: [
-											/* @__PURE__ */ O("span", {
-												className: "font-mono",
-												children: [
-													"[",
-													e.code,
-													"]"
-												]
-											}),
-											" ",
-											e.message
-										] }, t))
-									})]
+							q.warnings.length > 0 && /* @__PURE__ */ D(e, {
+								headingLevel: 3,
+								tone: "warning",
+								padding: "compact",
+								icon: /* @__PURE__ */ D(ee, { className: "size-4" }),
+								title: M("bigconsole.dashboards.import.warningsCount", "Warnings ({{count}})", { count: q.warnings.length }),
+								description: "Advisory only — acknowledge them below to continue.",
+								"data-testid": "import-warnings",
+								children: /* @__PURE__ */ D("ul", {
+									className: "space-y-1 text-xs text-[var(--color-status-warning-text)]",
+									children: q.warnings.map((e) => /* @__PURE__ */ O("li", { children: [
+										/* @__PURE__ */ O("span", {
+											className: "font-mono",
+											children: [
+												"[",
+												e.code,
+												"]"
+											]
+										}),
+										" ",
+										e.message
+									] }, `${e.code}-${e.message}`))
 								})
 							}),
-							q.isValid && /* @__PURE__ */ O("div", {
-								className: "space-y-4",
+							q.isValid && /* @__PURE__ */ O(e, {
+								headingLevel: 3,
+								title: M("bigconsole.dashboards.import.optionsTitle", "Import Options"),
+								description: "How this file lands in the workspace.",
+								"data-testid": "import-options",
+								bodyClassName: "space-y-4",
 								children: [
-									/* @__PURE__ */ D("p", {
-										className: "text-sm font-medium",
-										children: M("bigconsole.dashboards.import.optionsTitle", "Import Options")
-									}),
-									/* @__PURE__ */ D(_, {
-										className: "border-blue-500/50 bg-blue-500/5",
-										children: /* @__PURE__ */ D(v, {
-											className: "p-3",
-											children: /* @__PURE__ */ O("div", {
-												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ D(d, { className: "size-4 text-blue-600 mt-0.5 shrink-0" }), /* @__PURE__ */ D("div", {
-													className: "text-xs text-blue-700 dark:text-blue-400",
-													children: k(I) ? /* @__PURE__ */ O(E, { children: [
-														/* @__PURE__ */ D("p", {
-															className: "font-medium mb-1",
-															children: M("bigconsole.dashboards.import.checkExistingTitle", "Import will check for existing dashboard")
-														}),
-														/* @__PURE__ */ O("p", { children: [
-															M("bigconsole.dashboards.import.checkExistingIdPrefix", "If the original dashboard (ID:"),
-															" ",
-															/* @__PURE__ */ O("code", {
-																className: "font-mono bg-blue-200/50 px-1 rounded",
-																children: [k(I)?.slice(0, 8), "..."]
-															}),
-															M("bigconsole.dashboards.import.checkExistingIdSuffix", ") exists:")
-														] }),
-														/* @__PURE__ */ O("ul", {
-															className: "list-disc list-inside mt-1 space-y-0.5",
-															children: [/* @__PURE__ */ D("li", { children: M("bigconsole.dashboards.import.checkExistingWithChanges", "With changes → Update the existing dashboard") }), /* @__PURE__ */ D("li", { children: M("bigconsole.dashboards.import.checkExistingNoChanges", "No changes → Show \"already exists\" message") })]
-														}),
-														/* @__PURE__ */ D("p", {
-															className: "mt-1",
-															children: M("bigconsole.dashboards.import.checkExistingNotFound", "If original doesn't exist → Create a new dashboard")
-														})
-													] }) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("p", {
+									/* @__PURE__ */ D(e, {
+										headingLevel: 4,
+										tone: "info",
+										"aria-label": M("bigconsole.dashboards.import.infoRegionLabel", "What this import will do"),
+										padding: "compact",
+										"data-testid": "import-info",
+										children: /* @__PURE__ */ O("div", {
+											className: "flex items-start gap-2",
+											children: [/* @__PURE__ */ D(d, { className: "size-4 mt-0.5 shrink-0 text-[var(--color-status-info-text)]" }), /* @__PURE__ */ D("div", {
+												className: "text-xs text-[var(--color-status-info-text)]",
+												children: k(I) ? /* @__PURE__ */ O(E, { children: [
+													/* @__PURE__ */ D("p", {
 														className: "font-medium mb-1",
-														children: M("bigconsole.dashboards.import.newDashboardTitle", "A new dashboard will be created")
-													}), /* @__PURE__ */ D("p", { children: M("bigconsole.dashboards.import.newDashboardBody", "Import as a new dashboard with the specified configuration.") })] })
-												})]
-											})
+														children: M("bigconsole.dashboards.import.checkExistingTitle", "Import will check for existing dashboard")
+													}),
+													/* @__PURE__ */ O("p", { children: [
+														M("bigconsole.dashboards.import.checkExistingIdPrefix", "If the original dashboard (ID:"),
+														" ",
+														/* @__PURE__ */ O("code", {
+															className: "rounded bg-bg-surface px-1 font-mono",
+															children: [k(I)?.slice(0, 8), "..."]
+														}),
+														M("bigconsole.dashboards.import.checkExistingIdSuffix", ") exists:")
+													] }),
+													/* @__PURE__ */ O("ul", {
+														className: "list-disc list-inside mt-1 space-y-0.5",
+														children: [/* @__PURE__ */ D("li", { children: M("bigconsole.dashboards.import.checkExistingWithChanges", "With changes → Update the existing dashboard") }), /* @__PURE__ */ D("li", { children: M("bigconsole.dashboards.import.checkExistingNoChanges", "No changes → Show \"already exists\" message") })]
+													}),
+													/* @__PURE__ */ D("p", {
+														className: "mt-1",
+														children: M("bigconsole.dashboards.import.checkExistingNotFound", "If original doesn't exist → Create a new dashboard")
+													})
+												] }) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("p", {
+													className: "font-medium mb-1",
+													children: M("bigconsole.dashboards.import.newDashboardTitle", "A new dashboard will be created")
+												}), /* @__PURE__ */ D("p", { children: M("bigconsole.dashboards.import.newDashboardBody", "Import as a new dashboard with the specified configuration.") })] })
+											})]
 										})
 									}),
 									/* @__PURE__ */ O("div", {
@@ -348,8 +350,8 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 							children: [
 								J.alreadyExists && /* @__PURE__ */ O(E, { children: [
 									/* @__PURE__ */ D("div", {
-										className: "size-16 mx-auto mb-4 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center",
-										children: /* @__PURE__ */ D(d, { className: "size-8 text-blue-600" })
+										className: "mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-[var(--color-status-info-bgSubtle)]",
+										children: /* @__PURE__ */ D(d, { className: "size-8 text-[var(--color-status-info-text)]" })
 									}),
 									/* @__PURE__ */ D("h3", {
 										className: "text-lg font-medium mb-2",
@@ -362,8 +364,8 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 								] }),
 								J.originalUpdated && !J.alreadyExists && /* @__PURE__ */ O(E, { children: [
 									/* @__PURE__ */ D("div", {
-										className: "size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center",
-										children: /* @__PURE__ */ D(te, { className: "size-8 text-green-600" })
+										className: "mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-[var(--color-status-success-bgSubtle)]",
+										children: /* @__PURE__ */ D(ne, { className: "size-8 text-status-success-text" })
 									}),
 									/* @__PURE__ */ D("h3", {
 										className: "text-lg font-medium mb-2",
@@ -376,8 +378,8 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 								] }),
 								!J.originalUpdated && !J.alreadyExists && /* @__PURE__ */ O(E, { children: [
 									/* @__PURE__ */ D("div", {
-										className: "size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center",
-										children: /* @__PURE__ */ D(u, { className: "size-8 text-green-600" })
+										className: "mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-[var(--color-status-success-bgSubtle)]",
+										children: /* @__PURE__ */ D(u, { className: "size-8 text-status-success-text" })
 									}),
 									/* @__PURE__ */ D("h3", {
 										className: "text-lg font-medium mb-2",
@@ -419,29 +421,23 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 								] })
 							]
 						}),
-						K && /* @__PURE__ */ D(_, {
-							className: "border-status-error-border/50 bg-status-error-bg/5",
-							children: /* @__PURE__ */ D(v, {
-								className: "p-3",
-								children: /* @__PURE__ */ D("p", {
-									className: "text-sm text-status-error-text",
-									children: K.message
-								})
-							})
+						K && /* @__PURE__ */ D(e, {
+							headingLevel: 3,
+							tone: "danger",
+							padding: "compact",
+							title: "Import failed",
+							description: K.message
 						}),
-						J && !J.success && J.errorMessage && /* @__PURE__ */ D(_, {
-							className: "border-status-error-border/50 bg-status-error-bg/5",
-							children: /* @__PURE__ */ D(v, {
-								className: "p-3",
-								children: /* @__PURE__ */ D("p", {
-									className: "text-sm text-status-error-text",
-									children: J.errorMessage
-								})
-							})
+						J && !J.success && J.errorMessage && /* @__PURE__ */ D(e, {
+							headingLevel: 3,
+							tone: "danger",
+							padding: "compact",
+							title: "Import failed",
+							description: J.errorMessage
 						})
 					]
 				}),
-				/* @__PURE__ */ O(ie, {
+				/* @__PURE__ */ O(re, {
 					className: "flex-row justify-between sm:justify-between",
 					children: [/* @__PURE__ */ D("div", { children: N === "preview" && /* @__PURE__ */ O(g, {
 						variant: "ghost",
@@ -460,7 +456,7 @@ var A = r(function({ isOpen: r, onClose: A, onSuccess: j }) {
 								children: M("bigconsole.dashboards.import.cancel", "Cancel")
 							}),
 							N === "preview" && q?.isValid && /* @__PURE__ */ O(g, {
-								onClick: se,
+								onClick: ce,
 								disabled: G || q.warnings.length > 0 && !H,
 								children: [/* @__PURE__ */ D(f, { className: "size-4" }), M("bigconsole.dashboards.import.importButton", "Import Dashboard")]
 							}),