@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardToolbar.tsx"],"sourcesContent":["/**\n * DashboardToolbar Component\n *\n * Toolbar for dashboard actions and controls.\n * Uses fe-libs shared components for consistent styling.\n * Phase 2: Added SavedViewsDropdown and Share button.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport {\n  Clipboard,\n  Download,\n  Eye,\n  FileText,\n  Image as ImageIcon,\n  Minus,\n  PanelLeft,\n  PanelLeftClose,\n  Pencil,\n  Plus,\n  RotateCcw,\n  Save,\n  Share2,\n  Store,\n} from 'lucide-react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PermissionButton } from '@burdenoff/fe-libs/shared/components';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { BIGCONSOLE_PERMISSIONS } from '../../../constants/permissions';\nimport { SavedViewsDropdown } from './SavedViewsDropdown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardToolbarProps {\n  /** Dashboard ID for saved views */\n  dashboardId?: string;\n  /** Dashboard title */\n  title?: string;\n  /** Callback to add widget */\n  onAddWidget: () => void;\n  /** Callback to toggle widget palette */\n  onTogglePalette?: () => void;\n  /** Whether palette is open */\n  isPaletteOpen?: boolean;\n  /** Callback to paste widget */\n  onPaste?: () => void;\n  /** Callback to save dashboard */\n  onSave?: () => void;\n  /** Whether save is in progress */\n  isSaving?: boolean;\n  /** Callback to export dashboard (JSON console definition) */\n  onExport?: () => void;\n  /** Publish this dashboard as a reusable template. */\n  onPublishTemplate?: () => void;\n  /** Callback to export the board as a PNG image */\n  onExportImage?: () => void;\n  /** Callback to export the board as a PDF */\n  onExportPdf?: () => void;\n  /** Whether an image/PDF export is in progress */\n  isExportingImage?: boolean;\n  /** Callback to open share dialog */\n  onShare?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardToolbar: FC<DashboardToolbarProps> = memo(function DashboardToolbar({\n  dashboardId,\n  title,\n  onAddWidget,\n  onTogglePalette,\n  isPaletteOpen = false,\n  onPaste,\n  onSave,\n  isSaving = false,\n  onExport,\n  onPublishTemplate,\n  onExportImage,\n  onExportPdf,\n  isExportingImage = false,\n  onShare,\n}) {\n  const { hasPermission } = usePermissions();\n  const { t } = useI18n();\n  const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n  const toggleViewMode = useDashboardStore((state) => state.toggleViewMode);\n  const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n  const setZoomLevel = useDashboardStore((state) => state.setZoomLevel);\n\n  const clipboardWidgetId = useWidgetStore((state) => state.clipboardWidgetId);\n  const hasClipboard = !!clipboardWidgetId;\n\n  // Handle paste - use provided callback or fallback\n  const handlePaste = useCallback(() => {\n    if (hasClipboard && onPaste) {\n      onPaste();\n    }\n  }, [hasClipboard, onPaste]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2 bg-bg-surface border-b\">\n        {/* Left section */}\n        <div className=\"flex min-w-0 items-center gap-4\">\n          {title && (\n            <h1 className=\"min-w-0 truncate text-lg font-semibold\" title={title}>\n              {title}\n            </h1>\n          )}\n          {/* Saved Views Dropdown */}\n          {dashboardId && <SavedViewsDropdown dashboardId={dashboardId} />}\n        </div>\n\n        {/* Center section - Zoom controls */}\n        <div className=\"flex flex-shrink-0 items-center gap-1\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => setZoomLevel(Math.max(50, zoomLevel - 10))}\n                disabled={zoomLevel <= 50}\n              >\n                <Minus className=\"size-4\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>{t('bigconsole.dashboards.toolbar.zoomOut', 'Zoom out')}</TooltipContent>\n          </Tooltip>\n\n          <span className=\"text-sm text-text-secondary w-12 text-center\">{zoomLevel}%</span>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => setZoomLevel(Math.min(200, zoomLevel + 10))}\n                disabled={zoomLevel >= 200}\n              >\n                <Plus className=\"size-4\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>{t('bigconsole.dashboards.toolbar.zoomIn', 'Zoom in')}</TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => setZoomLevel(100)}>\n                <RotateCcw className=\"size-3.5 mr-1\" />\n                {t('bigconsole.dashboards.toolbar.reset', 'Reset')}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>{t('bigconsole.dashboards.toolbar.resetZoomTooltip', 'Reset zoom to 100%')}</TooltipContent>\n          </Tooltip>\n        </div>\n\n        {/* Right section - Actions */}\n        <div className=\"flex flex-wrap items-center justify-end gap-2\">\n          {isEditMode && (\n            <>\n              {/* Widget Palette Toggle */}\n              {onTogglePalette && (\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant={isPaletteOpen ? 'secondary' : 'outline'} size=\"sm\" onClick={onTogglePalette}>\n                      {isPaletteOpen ? <PanelLeftClose className=\"size-4\" /> : <PanelLeft className=\"size-4\" />}\n                      {t('bigconsole.dashboards.toolbar.widgets', 'Widgets')}\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    {isPaletteOpen\n                      ? t('bigconsole.dashboards.toolbar.hidePalette', 'Hide widget palette')\n                      : t('bigconsole.dashboards.toolbar.showPalette', 'Show widget palette for drag & drop')}\n                  </TooltipContent>\n                </Tooltip>\n              )}\n\n              {/* Paste */}\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"ghost\" size=\"sm\" onClick={handlePaste} disabled={!hasClipboard}>\n                    <Clipboard className=\"size-4\" />\n                    {t('bigconsole.dashboards.toolbar.paste', 'Paste')}\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  {t('bigconsole.dashboards.toolbar.pasteTooltip', 'Paste widget from clipboard')}\n                </TooltipContent>\n              </Tooltip>\n\n              {/* Add Widget (Dialog) */}\n              <PermissionButton permission={BIGCONSOLE_PERMISSIONS.WIDGET_CREATE} deniedBehavior=\"hide\">\n                <Button size=\"sm\" onClick={onAddWidget}>\n                  <Plus className=\"size-4\" />\n                  {t('bigconsole.dashboards.toolbar.addWidget', 'Add Widget')}\n                </Button>\n              </PermissionButton>\n            </>\n          )}\n\n          {/* Edit/View Mode Toggle */}\n          <Button variant={isEditMode ? 'secondary' : 'outline'} size=\"sm\" onClick={toggleViewMode}>\n            {isEditMode ? (\n              <>\n                <Eye className=\"size-4\" />\n                {t('bigconsole.dashboards.toolbar.preview', 'Preview')}\n              </>\n            ) : (\n              <>\n                <Pencil className=\"size-4\" />\n                {t('bigconsole.dashboards.toolbar.edit', 'Edit')}\n              </>\n            )}\n          </Button>\n\n          {/* Save */}\n          {onSave && (\n            <Button variant=\"outline\" size=\"sm\" onClick={onSave} disabled={isSaving}>\n              {isSaving ? (\n                <>\n                  <Spinner className=\"size-4\" />\n                  {t('bigconsole.dashboards.toolbar.saving', 'Saving...')}\n                </>\n              ) : (\n                <>\n                  <Save className=\"size-4\" />\n                  {t('bigconsole.dashboards.toolbar.save', 'Save')}\n                </>\n              )}\n            </Button>\n          )}\n\n          {/* Share */}\n          {onShare && (\n            <PermissionButton permission={BIGCONSOLE_PERMISSIONS.DASHBOARD_SHARE} deniedBehavior=\"hide\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"outline\" size=\"sm\" onClick={onShare}>\n                    <Share2 className=\"size-4\" />\n                    {t('bigconsole.dashboards.toolbar.share', 'Share')}\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  {t('bigconsole.dashboards.toolbar.shareTooltip', 'Share dashboard with others')}\n                </TooltipContent>\n              </Tooltip>\n            </PermissionButton>\n          )}\n\n          {/* Publish as a store template */}\n          {onPublishTemplate && (\n            <PermissionButton permission={BIGCONSOLE_PERMISSIONS.DASHBOARD_PUBLISH} deniedBehavior=\"hide\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"outline\" size=\"sm\" onClick={onPublishTemplate}>\n                    <Store className=\"size-4\" />\n                    <span className=\"hidden sm:inline\">{t('bigconsole.dashboards.toolbar.publish', 'Publish')}</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  {t('bigconsole.dashboards.toolbar.publishTooltip', 'Publish this dashboard as a reusable template')}\n                </TooltipContent>\n              </Tooltip>\n            </PermissionButton>\n          )}\n\n          {/* Export — JSON definition */}\n          {onExport && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" onClick={onExport}>\n                  <Download className=\"size-4\" />\n                  {t('bigconsole.dashboards.toolbar.export', 'Export')}\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                {t('bigconsole.dashboards.toolbar.exportTooltip', 'Export dashboard to JSON')}\n              </TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — board PNG */}\n          {onExportImage && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-sm\" onClick={onExportImage} disabled={isExportingImage}>\n                  {isExportingImage ? <Spinner className=\"size-4\" /> : <ImageIcon className=\"size-4\" />}\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                {t('bigconsole.dashboards.toolbar.exportPngTooltip', 'Export board as PNG image')}\n              </TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — board PDF */}\n          {onExportPdf && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-sm\" onClick={onExportPdf} disabled={isExportingImage}>\n                  <FileText className=\"size-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                {t('bigconsole.dashboards.toolbar.exportPdfTooltip', 'Export board as PDF')}\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n});\n\nexport default DashboardToolbar;\n"],"mappings":"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"}
+{"version":3,"file":"DashboardToolbar.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardToolbar.tsx"],"sourcesContent":["/**\n * DashboardToolbar Component\n *\n * Toolbar for dashboard actions and controls.\n * Uses fe-libs shared components for consistent styling.\n * Phase 2: Added SavedViewsDropdown and Share button.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport {\n  Clipboard,\n  Download,\n  Eye,\n  FileText,\n  Image as ImageIcon,\n  Minus,\n  PanelLeft,\n  PanelLeftClose,\n  Pencil,\n  Plus,\n  RotateCcw,\n  Save,\n  Share2,\n  Store,\n} from 'lucide-react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PermissionButton } from '@burdenoff/fe-libs/shared/components';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { BIGCONSOLE_PERMISSIONS } from '../../../constants/permissions';\nimport { Section } from '../common';\nimport { SavedViewsDropdown } from './SavedViewsDropdown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardToolbarProps {\n  /** Dashboard ID for saved views */\n  dashboardId?: string;\n  /** Dashboard title */\n  title?: string;\n  /** Callback to add widget */\n  onAddWidget: () => void;\n  /** Callback to toggle widget palette */\n  onTogglePalette?: () => void;\n  /** Whether palette is open */\n  isPaletteOpen?: boolean;\n  /** Callback to paste widget */\n  onPaste?: () => void;\n  /** Callback to save dashboard */\n  onSave?: () => void;\n  /** Whether save is in progress */\n  isSaving?: boolean;\n  /** Callback to export dashboard (JSON console definition) */\n  onExport?: () => void;\n  /** Publish this dashboard as a reusable template. */\n  onPublishTemplate?: () => void;\n  /** Callback to export the board as a PNG image */\n  onExportImage?: () => void;\n  /** Callback to export the board as a PDF */\n  onExportPdf?: () => void;\n  /** Whether an image/PDF export is in progress */\n  isExportingImage?: boolean;\n  /** Callback to open share dialog */\n  onShare?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardToolbar: FC<DashboardToolbarProps> = memo(function DashboardToolbar({\n  dashboardId,\n  title,\n  onAddWidget,\n  onTogglePalette,\n  isPaletteOpen = false,\n  onPaste,\n  onSave,\n  isSaving = false,\n  onExport,\n  onPublishTemplate,\n  onExportImage,\n  onExportPdf,\n  isExportingImage = false,\n  onShare,\n}) {\n  const { hasPermission } = usePermissions();\n  const { t } = useI18n();\n  const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n  const toggleViewMode = useDashboardStore((state) => state.toggleViewMode);\n  const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n  const setZoomLevel = useDashboardStore((state) => state.setZoomLevel);\n\n  const clipboardWidgetId = useWidgetStore((state) => state.clipboardWidgetId);\n  const hasClipboard = !!clipboardWidgetId;\n\n  // Handle paste - use provided callback or fallback\n  const handlePaste = useCallback(() => {\n    if (hasClipboard && onPaste) {\n      onPaste();\n    }\n  }, [hasClipboard, onPaste]);\n\n  return (\n    <TooltipProvider>\n      {/*\n        Structural band only — no surface of its own and, deliberately, no title:\n        the board is named once, by the route header above this toolbar. Three\n        labelled clusters (views · zoom · actions) replace what used to read as\n        one continuous run of same-weight buttons.\n      */}\n      <Section\n        emphasis=\"bare\"\n        padding=\"none\"\n        aria-label={title ? `Board toolbar — ${title}` : 'Board toolbar'}\n        data-testid=\"dashboard-toolbar\"\n        className=\"flex-shrink-0 border-b border-[var(--color-border-subtle)] bg-bg-surface px-4 py-2\"\n        bodyClassName=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2\"\n      >\n        {/* Left section — saved views */}\n        <div className=\"flex min-w-0 items-center gap-4\">\n          {/* Saved Views Dropdown */}\n          {dashboardId && <SavedViewsDropdown dashboardId={dashboardId} />}\n        </div>\n\n        {/* Center section - Zoom controls */}\n        <div\n          role=\"group\"\n          aria-label=\"Zoom\"\n          className=\"flex min-w-0 items-center gap-1 border-l border-[var(--color-border-subtle)] pl-4\"\n        >\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => setZoomLevel(Math.max(50, zoomLevel - 10))}\n                disabled={zoomLevel <= 50}\n              >\n                <Minus className=\"size-4\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>{t('bigconsole.dashboards.toolbar.zoomOut', 'Zoom out')}</TooltipContent>\n          </Tooltip>\n\n          <span className=\"text-sm text-text-secondary w-12 text-center\">{zoomLevel}%</span>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => setZoomLevel(Math.min(200, zoomLevel + 10))}\n                disabled={zoomLevel >= 200}\n              >\n                <Plus className=\"size-4\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>{t('bigconsole.dashboards.toolbar.zoomIn', 'Zoom in')}</TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => setZoomLevel(100)}>\n                <RotateCcw className=\"size-3.5 mr-1\" />\n                {t('bigconsole.dashboards.toolbar.reset', 'Reset')}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>{t('bigconsole.dashboards.toolbar.resetZoomTooltip', 'Reset zoom to 100%')}</TooltipContent>\n          </Tooltip>\n        </div>\n\n        {/* Right section - Actions */}\n        <div\n          role=\"group\"\n          aria-label=\"Board actions\"\n          className=\"flex min-w-0 flex-wrap items-center justify-end gap-2 border-l border-[var(--color-border-subtle)] pl-4\"\n        >\n          {isEditMode && (\n            <>\n              {/* Widget Palette Toggle */}\n              {onTogglePalette && (\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant={isPaletteOpen ? 'secondary' : 'outline'} size=\"sm\" onClick={onTogglePalette}>\n                      {isPaletteOpen ? <PanelLeftClose className=\"size-4\" /> : <PanelLeft className=\"size-4\" />}\n                      {t('bigconsole.dashboards.toolbar.widgets', 'Widgets')}\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    {isPaletteOpen\n                      ? t('bigconsole.dashboards.toolbar.hidePalette', 'Hide widget palette')\n                      : t('bigconsole.dashboards.toolbar.showPalette', 'Show widget palette for drag & drop')}\n                  </TooltipContent>\n                </Tooltip>\n              )}\n\n              {/* Paste */}\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"ghost\" size=\"sm\" onClick={handlePaste} disabled={!hasClipboard}>\n                    <Clipboard className=\"size-4\" />\n                    {t('bigconsole.dashboards.toolbar.paste', 'Paste')}\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  {t('bigconsole.dashboards.toolbar.pasteTooltip', 'Paste widget from clipboard')}\n                </TooltipContent>\n              </Tooltip>\n\n              {/* Add Widget (Dialog) */}\n              <PermissionButton permission={BIGCONSOLE_PERMISSIONS.WIDGET_CREATE} deniedBehavior=\"hide\">\n                <Button size=\"sm\" onClick={onAddWidget}>\n                  <Plus className=\"size-4\" />\n                  {t('bigconsole.dashboards.toolbar.addWidget', 'Add Widget')}\n                </Button>\n              </PermissionButton>\n            </>\n          )}\n\n          {/* Edit/View Mode Toggle */}\n          <Button variant={isEditMode ? 'secondary' : 'outline'} size=\"sm\" onClick={toggleViewMode}>\n            {isEditMode ? (\n              <>\n                <Eye className=\"size-4\" />\n                {t('bigconsole.dashboards.toolbar.preview', 'Preview')}\n              </>\n            ) : (\n              <>\n                <Pencil className=\"size-4\" />\n                {t('bigconsole.dashboards.toolbar.edit', 'Edit')}\n              </>\n            )}\n          </Button>\n\n          {/* Save */}\n          {onSave && (\n            <Button variant=\"outline\" size=\"sm\" onClick={onSave} disabled={isSaving}>\n              {isSaving ? (\n                <>\n                  <Spinner className=\"size-4\" />\n                  {t('bigconsole.dashboards.toolbar.saving', 'Saving...')}\n                </>\n              ) : (\n                <>\n                  <Save className=\"size-4\" />\n                  {t('bigconsole.dashboards.toolbar.save', 'Save')}\n                </>\n              )}\n            </Button>\n          )}\n\n          {/* Share */}\n          {onShare && (\n            <PermissionButton permission={BIGCONSOLE_PERMISSIONS.DASHBOARD_SHARE} deniedBehavior=\"hide\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"outline\" size=\"sm\" onClick={onShare}>\n                    <Share2 className=\"size-4\" />\n                    {t('bigconsole.dashboards.toolbar.share', 'Share')}\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  {t('bigconsole.dashboards.toolbar.shareTooltip', 'Share dashboard with others')}\n                </TooltipContent>\n              </Tooltip>\n            </PermissionButton>\n          )}\n\n          {/* Publish as a store template */}\n          {onPublishTemplate && (\n            <PermissionButton permission={BIGCONSOLE_PERMISSIONS.DASHBOARD_PUBLISH} deniedBehavior=\"hide\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"outline\" size=\"sm\" onClick={onPublishTemplate}>\n                    <Store className=\"size-4\" />\n                    <span className=\"hidden sm:inline\">{t('bigconsole.dashboards.toolbar.publish', 'Publish')}</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  {t('bigconsole.dashboards.toolbar.publishTooltip', 'Publish this dashboard as a reusable template')}\n                </TooltipContent>\n              </Tooltip>\n            </PermissionButton>\n          )}\n\n          {/* Export — JSON definition */}\n          {onExport && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" onClick={onExport}>\n                  <Download className=\"size-4\" />\n                  {t('bigconsole.dashboards.toolbar.export', 'Export')}\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                {t('bigconsole.dashboards.toolbar.exportTooltip', 'Export dashboard to JSON')}\n              </TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — board PNG */}\n          {onExportImage && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-sm\" onClick={onExportImage} disabled={isExportingImage}>\n                  {isExportingImage ? <Spinner className=\"size-4\" /> : <ImageIcon className=\"size-4\" />}\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                {t('bigconsole.dashboards.toolbar.exportPngTooltip', 'Export board as PNG image')}\n              </TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — board PDF */}\n          {onExportPdf && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-sm\" onClick={onExportPdf} disabled={isExportingImage}>\n                  <FileText className=\"size-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>\n                {t('bigconsole.dashboards.toolbar.exportPdfTooltip', 'Export board as PDF')}\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </Section>\n    </TooltipProvider>\n  );\n});\n\nexport default DashboardToolbar;\n"],"mappings":"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"}

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

@@ -1,109 +1,120 @@
 import { useDashboardStore as e } from "../../store/dashboardStore.js";
 import "../../store/index.js";
-import { useBigConsoleNavigate as t } from "../../context/BigConsoleContext.js";
+import { SECTION_FOCUS_RING as t } from "../common/sectionStyles.js";
+import "../common/index.js";
+import { useBigConsoleNavigate as n } from "../../context/BigConsoleContext.js";
 import "../../context/index.js";
-import n from "../../hooks/useFilterUrlSync.js";
-import { memo as r, useCallback as i, useEffect as a, useState as o } from "react";
-import { ArrowLeft as s, ChevronRight as c, Home as l } from "lucide-react";
-import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import r from "../../hooks/useFilterUrlSync.js";
+import { memo as i, useCallback as a, useEffect as o, useState as s } from "react";
+import { ArrowLeft as c, ChevronRight as l, Home as u } from "lucide-react";
+import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/DrilldownBreadcrumb.tsx
-var m = r(function({ className: r = "", currentDashboardId: m, currentDashboardName: h, showHome: g = !0, basePath: _ = "/bigconsole/dashboards" }) {
-	let { t: v } = u(), y = t(), { getDrilldownMetadata: b, isInDrilldown: x, drilldownDepth: S } = n(), C = e((e) => e.dashboards), [w, T] = o([]);
-	a(() => {
-		if (!x) {
-			T([]);
+var h = i(function({ className: i = "", currentDashboardId: h, currentDashboardName: g, showHome: _ = !0, basePath: v = "/bigconsole/dashboards" }) {
+	let { t: y } = d(), b = n(), { getDrilldownMetadata: x, isInDrilldown: S, drilldownDepth: C } = r(), w = e((e) => e.dashboards), [T, E] = s([]);
+	o(() => {
+		if (!S) {
+			E([]);
 			return;
 		}
-		let { path: e } = b();
+		let { path: e } = x();
 		if (e.length === 0) {
-			T([]);
+			E([]);
 			return;
 		}
-		T(e.map((e) => ({
+		E(e.map((e) => ({
 			id: e,
-			name: C.get(e)?.name || v("bigconsole.dashboards.drilldownBreadcrumb.fallbackName", "Dashboard {{id}}...", { id: e.slice(0, 8) }),
-			href: `${_}/${e}`
+			name: w.get(e)?.name || y("bigconsole.dashboards.drilldownBreadcrumb.fallbackName", "Dashboard {{id}}...", { id: e.slice(0, 8) }),
+			href: `${v}/${e}`
 		})));
 	}, [
+		S,
 		x,
-		b,
-		C,
-		_,
-		v
+		w,
+		v,
+		y
 	]);
-	let E = i((e, t) => {
-		let n = b().path.slice(0, t), r = t, i = new URL(e.href, window.location.origin);
-		i.searchParams.set("drilldown_depth", String(r)), n.length > 0 && i.searchParams.set("drilldown_path", encodeURIComponent(JSON.stringify(n))), t > 0 && n.length > 0 && i.searchParams.set("drilldown_parent", n[n.length - 1]), y(i.pathname + i.search);
-	}, [b, y]), D = i(() => {
-		let e = b();
+	let D = a((e, t) => {
+		let n = x().path.slice(0, t), r = t, i = new URL(e.href, window.location.origin);
+		i.searchParams.set("drilldown_depth", String(r)), n.length > 0 && i.searchParams.set("drilldown_path", encodeURIComponent(JSON.stringify(n))), t > 0 && n.length > 0 && i.searchParams.set("drilldown_parent", n[n.length - 1]), b(i.pathname + i.search);
+	}, [x, b]), O = a(() => {
+		let e = x();
 		if (e.parent) {
-			let t = e.path.slice(0, -1), n = e.depth - 1, r = new URL(`${_}/${e.parent}`, window.location.origin);
-			r.searchParams.set("drilldown_depth", String(n)), t.length > 0 && (r.searchParams.set("drilldown_path", encodeURIComponent(JSON.stringify(t))), r.searchParams.set("drilldown_parent", t[t.length - 1])), y(r.pathname + r.search);
-		} else if (w.length > 0) {
-			let e = w[w.length - 1];
-			E(e, w.length - 1);
+			let t = e.path.slice(0, -1), n = e.depth - 1, r = new URL(`${v}/${e.parent}`, window.location.origin);
+			r.searchParams.set("drilldown_depth", String(n)), t.length > 0 && (r.searchParams.set("drilldown_path", encodeURIComponent(JSON.stringify(t))), r.searchParams.set("drilldown_parent", t[t.length - 1])), b(r.pathname + r.search);
+		} else if (T.length > 0) {
+			let e = T[T.length - 1];
+			D(e, T.length - 1);
 		}
 	}, [
+		x,
+		v,
 		b,
-		_,
-		y,
-		w,
-		E
-	]), O = i((e) => {
-		e.preventDefault(), y(_);
-	}, [y, _]);
-	return x ? /* @__PURE__ */ p("nav", {
-		className: `flex items-center gap-2 px-4 py-2 bg-bg-surface border-b border-border-default ${r}`,
-		"aria-label": v("bigconsole.dashboards.drilldownBreadcrumb.ariaLabel", "Drilldown breadcrumb"),
+		T,
+		D
+	]), k = a((e) => {
+		e.preventDefault(), b(v);
+	}, [b, v]);
+	return S ? /* @__PURE__ */ m("nav", {
+		className: `flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-[var(--color-border-subtle)] bg-bg-sunken px-4 py-1.5 ${i}`,
+		"aria-label": y("bigconsole.dashboards.drilldownBreadcrumb.ariaLabel", "Drilldown breadcrumb"),
+		"data-testid": "drilldown-breadcrumb",
 		children: [
-			/* @__PURE__ */ p("button", {
+			/* @__PURE__ */ m("button", {
 				type: "button",
-				onClick: D,
-				className: "flex items-center gap-1 px-2 py-1 text-sm font-medium text-action-primary-bg hover:bg-action-primary-bg/10 rounded-md transition-colors",
-				"aria-label": v("bigconsole.dashboards.drilldownBreadcrumb.back", "Go back"),
-				children: [/* @__PURE__ */ f(s, { className: "w-4 h-4" }), /* @__PURE__ */ f("span", {
+				onClick: O,
+				className: `flex min-h-control-sm items-center gap-1 rounded-button px-2 py-1 text-sm font-medium text-text-link motion-safe:transition-colors hover:bg-bg-accentSubtle ${t}`,
+				"aria-label": y("bigconsole.dashboards.drilldownBreadcrumb.back", "Go back"),
+				children: [/* @__PURE__ */ p(c, { className: "w-4 h-4" }), /* @__PURE__ */ p("span", {
 					className: "hidden sm:inline",
-					children: v("bigconsole.dashboards.drilldownBreadcrumb.backLabel", "Back")
+					children: y("bigconsole.dashboards.drilldownBreadcrumb.backLabel", "Back")
 				})]
 			}),
-			/* @__PURE__ */ f("span", {
-				className: "text-border-default",
+			/* @__PURE__ */ p("span", {
+				className: "text-text-muted",
+				"aria-hidden": "true",
 				children: "|"
 			}),
-			g && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("a", {
-				href: _,
-				onClick: O,
-				className: "flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors",
-				"aria-label": v("bigconsole.dashboards.drilldownBreadcrumb.home", "Home"),
-				children: [/* @__PURE__ */ f(l, { className: "w-4 h-4" }), /* @__PURE__ */ f("span", {
+			_ && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("a", {
+				href: v,
+				onClick: k,
+				className: "flex min-h-control-sm items-center gap-1 rounded-button px-1 text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+				"aria-label": y("bigconsole.dashboards.drilldownBreadcrumb.home", "Home"),
+				children: [/* @__PURE__ */ p(u, { className: "w-4 h-4" }), /* @__PURE__ */ p("span", {
 					className: "hidden sm:inline",
-					children: v("bigconsole.dashboards.drilldownBreadcrumb.dashboards", "Dashboards")
+					children: y("bigconsole.dashboards.drilldownBreadcrumb.dashboards", "Dashboards")
 				})]
-			}), /* @__PURE__ */ f(c, { className: "w-4 h-4 text-text-tertiary" })] }),
-			w.map((e, t) => /* @__PURE__ */ p("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ f("button", {
+			}), /* @__PURE__ */ p(l, {
+				className: "w-4 h-4 shrink-0 text-text-muted",
+				"aria-hidden": "true"
+			})] }),
+			T.map((e, n) => /* @__PURE__ */ m("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ p("button", {
 					type: "button",
-					onClick: () => E(e, t),
-					className: "text-sm text-text-secondary hover:text-text-primary hover:underline transition-colors max-w-[150px] truncate",
+					onClick: () => D(e, n),
+					className: `min-h-control-sm max-w-[150px] truncate rounded-button px-1 text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary hover:underline ${t}`,
 					title: e.name,
 					children: e.name
-				}), /* @__PURE__ */ f(c, { className: "w-4 h-4 text-text-tertiary" })]
+				}), /* @__PURE__ */ p(l, {
+					className: "w-4 h-4 shrink-0 text-text-muted",
+					"aria-hidden": "true"
+				})]
 			}, e.id)),
-			h && /* @__PURE__ */ f("span", {
-				className: "text-sm font-medium text-text-primary max-w-[200px] truncate",
-				title: h,
-				children: h
+			g && /* @__PURE__ */ p("span", {
+				"aria-current": "page",
+				className: "max-w-[200px] truncate text-sm font-medium text-text-primary",
+				title: g,
+				children: g
 			}),
-			/* @__PURE__ */ f("span", {
-				className: "ml-auto text-xs text-text-tertiary bg-bg-sunken px-2 py-0.5 rounded",
-				children: v("bigconsole.dashboards.drilldownBreadcrumb.level", "Level {{depth}}", { depth: S ?? "" })
+			/* @__PURE__ */ p("span", {
+				className: "ml-auto shrink-0 rounded-pill bg-bg-surface px-2 py-0.5 text-xs text-text-muted",
+				children: y("bigconsole.dashboards.drilldownBreadcrumb.level", "Level {{depth}}", { depth: C ?? "" })
 			})
 		]
 	}) : null;
 });
 //#endregion
-export { m as default };
+export { h as default };
 
 //# sourceMappingURL=DrilldownBreadcrumb.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrilldownBreadcrumb.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DrilldownBreadcrumb.tsx"],"sourcesContent":["/**\n * DrilldownBreadcrumb Component\n *\n * Displays a breadcrumb trail showing the drilldown navigation path.\n * Allows users to navigate back up the drilldown hierarchy.\n *\n * URL Parameters Used:\n * - drilldown_depth: Current depth in drilldown hierarchy\n * - drilldown_parent: Parent dashboard ID\n * - drilldown_path: JSON array of dashboard IDs in the path\n */\n\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useBigConsoleNavigate } from '../../context';\nimport { useFilterUrlSync } from '../../hooks/useFilterUrlSync';\nimport { useDashboardStore } from '../../store';\nimport { ChevronRight, Home, ArrowLeft } from 'lucide-react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface DrilldownBreadcrumbProps {\n  /** Additional CSS classes */\n  className?: string;\n  /** Current dashboard ID */\n  currentDashboardId?: string;\n  /** Current dashboard name */\n  currentDashboardName?: string;\n  /** Whether to show the home/root link */\n  showHome?: boolean;\n  /** Base path for dashboard URLs */\n  basePath?: string;\n}\n\ninterface BreadcrumbItem {\n  id: string;\n  name: string;\n  href: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownBreadcrumb = memo(function DrilldownBreadcrumb({\n  className = '',\n  currentDashboardId,\n  currentDashboardName,\n  showHome = true,\n  basePath = '/bigconsole/dashboards',\n}: DrilldownBreadcrumbProps) {\n  const { t } = useI18n();\n  const navigate = useBigConsoleNavigate();\n  const { getDrilldownMetadata, isInDrilldown, drilldownDepth } = useFilterUrlSync();\n\n  // Get dashboards from store for name lookup\n  const dashboards = useDashboardStore((state) => state.dashboards);\n\n  const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([]);\n\n  // Build breadcrumb items from path\n  useEffect(() => {\n    if (!isInDrilldown) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    const metadata = getDrilldownMetadata();\n    const { path } = metadata;\n\n    if (path.length === 0) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    // Map path IDs to breadcrumb items\n    const items: BreadcrumbItem[] = path.map((dashboardId) => {\n      // Try to find dashboard name in store\n      const dashboard = dashboards.get(dashboardId);\n      const name =\n        dashboard?.name ||\n        t('bigconsole.dashboards.drilldownBreadcrumb.fallbackName', 'Dashboard {{id}}...', {\n          id: dashboardId.slice(0, 8),\n        });\n\n      return {\n        id: dashboardId,\n        name,\n        href: `${basePath}/${dashboardId}`,\n      };\n    });\n\n    setBreadcrumbs(items);\n  }, [isInDrilldown, getDrilldownMetadata, dashboards, basePath, t]);\n\n  // Handle navigation to a breadcrumb item\n  const handleNavigate = useCallback(\n    (item: BreadcrumbItem, index: number) => {\n      // Build URL preserving context up to this point\n      const metadata = getDrilldownMetadata();\n      const newPath = metadata.path.slice(0, index);\n      const newDepth = index;\n\n      // Build URL with updated drilldown params\n      const url = new URL(item.href, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n      }\n      if (index > 0 && newPath.length > 0) {\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    },\n    [getDrilldownMetadata, navigate]\n  );\n\n  // Handle back button click\n  const handleBack = useCallback(() => {\n    const metadata = getDrilldownMetadata();\n\n    if (metadata.parent) {\n      // Navigate to parent dashboard\n      const newPath = metadata.path.slice(0, -1);\n      const newDepth = metadata.depth - 1;\n\n      const url = new URL(`${basePath}/${metadata.parent}`, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    } else if (breadcrumbs.length > 0) {\n      // Navigate to last breadcrumb\n      const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];\n      handleNavigate(lastBreadcrumb, breadcrumbs.length - 1);\n    }\n  }, [getDrilldownMetadata, basePath, navigate, breadcrumbs, handleNavigate]);\n\n  // Handle home click\n  const handleHomeClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      navigate(basePath);\n    },\n    [navigate, basePath]\n  );\n\n  // Don't render if not in drilldown mode\n  if (!isInDrilldown) {\n    return null;\n  }\n\n  return (\n    <nav\n      className={`flex items-center gap-2 px-4 py-2 bg-bg-surface border-b border-border-default ${className}`}\n      aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.ariaLabel', 'Drilldown breadcrumb')}\n    >\n      {/* Back button */}\n      <button\n        type=\"button\"\n        onClick={handleBack}\n        className=\"flex items-center gap-1 px-2 py-1 text-sm font-medium text-action-primary-bg hover:bg-action-primary-bg/10 rounded-md transition-colors\"\n        aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.back', 'Go back')}\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        <span className=\"hidden sm:inline\">{t('bigconsole.dashboards.drilldownBreadcrumb.backLabel', 'Back')}</span>\n      </button>\n\n      <span className=\"text-border-default\">|</span>\n\n      {/* Home link */}\n      {showHome && (\n        <>\n          <a\n            href={basePath}\n            onClick={handleHomeClick}\n            className=\"flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n            aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.home', 'Home')}\n          >\n            <Home className=\"w-4 h-4\" />\n            <span className=\"hidden sm:inline\">\n              {t('bigconsole.dashboards.drilldownBreadcrumb.dashboards', 'Dashboards')}\n            </span>\n          </a>\n          <ChevronRight className=\"w-4 h-4 text-text-tertiary\" />\n        </>\n      )}\n\n      {/* Breadcrumb items */}\n      {breadcrumbs.map((item, index) => (\n        <div key={item.id} className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => handleNavigate(item, index)}\n            className=\"text-sm text-text-secondary hover:text-text-primary hover:underline transition-colors max-w-[150px] truncate\"\n            title={item.name}\n          >\n            {item.name}\n          </button>\n          <ChevronRight className=\"w-4 h-4 text-text-tertiary\" />\n        </div>\n      ))}\n\n      {/* Current dashboard (non-clickable) */}\n      {currentDashboardName && (\n        <span className=\"text-sm font-medium text-text-primary max-w-[200px] truncate\" title={currentDashboardName}>\n          {currentDashboardName}\n        </span>\n      )}\n\n      {/* Depth indicator */}\n      <span className=\"ml-auto text-xs text-text-tertiary bg-bg-sunken px-2 py-0.5 rounded\">\n        {t('bigconsole.dashboards.drilldownBreadcrumb.level', 'Level {{depth}}', { depth: drilldownDepth ?? '' })}\n      </span>\n    </nav>\n  );\n});\n\nexport default DrilldownBreadcrumb;\n"],"mappings":"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"}
+{"version":3,"file":"DrilldownBreadcrumb.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DrilldownBreadcrumb.tsx"],"sourcesContent":["/**\n * DrilldownBreadcrumb Component\n *\n * Displays a breadcrumb trail showing the drilldown navigation path.\n * Allows users to navigate back up the drilldown hierarchy.\n *\n * URL Parameters Used:\n * - drilldown_depth: Current depth in drilldown hierarchy\n * - drilldown_parent: Parent dashboard ID\n * - drilldown_path: JSON array of dashboard IDs in the path\n */\n\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useBigConsoleNavigate } from '../../context';\nimport { useFilterUrlSync } from '../../hooks/useFilterUrlSync';\nimport { useDashboardStore } from '../../store';\nimport { ChevronRight, Home, ArrowLeft } from 'lucide-react';\nimport { SECTION_FOCUS_RING } from '../common';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface DrilldownBreadcrumbProps {\n  /** Additional CSS classes */\n  className?: string;\n  /** Current dashboard ID */\n  currentDashboardId?: string;\n  /** Current dashboard name */\n  currentDashboardName?: string;\n  /** Whether to show the home/root link */\n  showHome?: boolean;\n  /** Base path for dashboard URLs */\n  basePath?: string;\n}\n\ninterface BreadcrumbItem {\n  id: string;\n  name: string;\n  href: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownBreadcrumb = memo(function DrilldownBreadcrumb({\n  className = '',\n  currentDashboardId,\n  currentDashboardName,\n  showHome = true,\n  basePath = '/bigconsole/dashboards',\n}: DrilldownBreadcrumbProps) {\n  const { t } = useI18n();\n  const navigate = useBigConsoleNavigate();\n  const { getDrilldownMetadata, isInDrilldown, drilldownDepth } = useFilterUrlSync();\n\n  // Get dashboards from store for name lookup\n  const dashboards = useDashboardStore((state) => state.dashboards);\n\n  const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([]);\n\n  // Build breadcrumb items from path\n  useEffect(() => {\n    if (!isInDrilldown) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    const metadata = getDrilldownMetadata();\n    const { path } = metadata;\n\n    if (path.length === 0) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    // Map path IDs to breadcrumb items\n    const items: BreadcrumbItem[] = path.map((dashboardId) => {\n      // Try to find dashboard name in store\n      const dashboard = dashboards.get(dashboardId);\n      const name =\n        dashboard?.name ||\n        t('bigconsole.dashboards.drilldownBreadcrumb.fallbackName', 'Dashboard {{id}}...', {\n          id: dashboardId.slice(0, 8),\n        });\n\n      return {\n        id: dashboardId,\n        name,\n        href: `${basePath}/${dashboardId}`,\n      };\n    });\n\n    setBreadcrumbs(items);\n  }, [isInDrilldown, getDrilldownMetadata, dashboards, basePath, t]);\n\n  // Handle navigation to a breadcrumb item\n  const handleNavigate = useCallback(\n    (item: BreadcrumbItem, index: number) => {\n      // Build URL preserving context up to this point\n      const metadata = getDrilldownMetadata();\n      const newPath = metadata.path.slice(0, index);\n      const newDepth = index;\n\n      // Build URL with updated drilldown params\n      const url = new URL(item.href, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n      }\n      if (index > 0 && newPath.length > 0) {\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    },\n    [getDrilldownMetadata, navigate]\n  );\n\n  // Handle back button click\n  const handleBack = useCallback(() => {\n    const metadata = getDrilldownMetadata();\n\n    if (metadata.parent) {\n      // Navigate to parent dashboard\n      const newPath = metadata.path.slice(0, -1);\n      const newDepth = metadata.depth - 1;\n\n      const url = new URL(`${basePath}/${metadata.parent}`, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    } else if (breadcrumbs.length > 0) {\n      // Navigate to last breadcrumb\n      const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];\n      handleNavigate(lastBreadcrumb, breadcrumbs.length - 1);\n    }\n  }, [getDrilldownMetadata, basePath, navigate, breadcrumbs, handleNavigate]);\n\n  // Handle home click\n  const handleHomeClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      navigate(basePath);\n    },\n    [navigate, basePath]\n  );\n\n  // Don't render if not in drilldown mode\n  if (!isInDrilldown) {\n    return null;\n  }\n\n  return (\n    <nav\n      // Recessed on purpose: this is navigational CONTEXT, not chrome you act\n      // on, so it reads a step below the route header and the toolbar it sits\n      // between instead of being a third identical bar. Wraps rather than\n      // overflowing once the trail gets deep on a narrow viewport.\n      className={`flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-[var(--color-border-subtle)] bg-bg-sunken px-4 py-1.5 ${className}`}\n      aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.ariaLabel', 'Drilldown breadcrumb')}\n      data-testid=\"drilldown-breadcrumb\"\n    >\n      {/* Back button */}\n      <button\n        type=\"button\"\n        onClick={handleBack}\n        className={`flex min-h-control-sm items-center gap-1 rounded-button px-2 py-1 text-sm font-medium text-text-link motion-safe:transition-colors hover:bg-bg-accentSubtle ${SECTION_FOCUS_RING}`}\n        aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.back', 'Go back')}\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        <span className=\"hidden sm:inline\">{t('bigconsole.dashboards.drilldownBreadcrumb.backLabel', 'Back')}</span>\n      </button>\n\n      <span className=\"text-text-muted\" aria-hidden=\"true\">\n        |\n      </span>\n\n      {/* Home link */}\n      {showHome && (\n        <>\n          <a\n            href={basePath}\n            onClick={handleHomeClick}\n            className={`flex min-h-control-sm items-center gap-1 rounded-button px-1 text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary ${SECTION_FOCUS_RING}`}\n            aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.home', 'Home')}\n          >\n            <Home className=\"w-4 h-4\" />\n            <span className=\"hidden sm:inline\">\n              {t('bigconsole.dashboards.drilldownBreadcrumb.dashboards', 'Dashboards')}\n            </span>\n          </a>\n          <ChevronRight className=\"w-4 h-4 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n        </>\n      )}\n\n      {/* Breadcrumb items */}\n      {breadcrumbs.map((item, index) => (\n        <div key={item.id} className=\"flex min-w-0 items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => handleNavigate(item, index)}\n            className={`min-h-control-sm max-w-[150px] truncate rounded-button px-1 text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary hover:underline ${SECTION_FOCUS_RING}`}\n            title={item.name}\n          >\n            {item.name}\n          </button>\n          <ChevronRight className=\"w-4 h-4 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n        </div>\n      ))}\n\n      {/* Current dashboard (non-clickable) */}\n      {currentDashboardName && (\n        <span\n          aria-current=\"page\"\n          className=\"max-w-[200px] truncate text-sm font-medium text-text-primary\"\n          title={currentDashboardName}\n        >\n          {currentDashboardName}\n        </span>\n      )}\n\n      {/* Depth indicator */}\n      <span className=\"ml-auto shrink-0 rounded-pill bg-bg-surface px-2 py-0.5 text-xs text-text-muted\">\n        {t('bigconsole.dashboards.drilldownBreadcrumb.level', 'Level {{depth}}', { depth: drilldownDepth ?? '' })}\n      </span>\n    </nav>\n  );\n});\n\nexport default DrilldownBreadcrumb;\n"],"mappings":"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"}