@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

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

@@ -5,103 +5,105 @@ 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 { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+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";
 //#region src/bigconsole/components/dashboard/DrilldownBreadcrumb.tsx
-var p = r(function({ className: r = "", currentDashboardId: p, currentDashboardName: m, showHome: h = !0, basePath: g = "/bigconsole/dashboards" }) {
-	let _ = t(), { getDrilldownMetadata: v, isInDrilldown: y, drilldownDepth: b } = n(), x = e((e) => e.dashboards), [S, C] = o([]);
+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 (!y) {
-			C([]);
+		if (!x) {
+			T([]);
 			return;
 		}
-		let { path: e } = v();
+		let { path: e } = b();
 		if (e.length === 0) {
-			C([]);
+			T([]);
 			return;
 		}
-		C(e.map((e) => ({
+		T(e.map((e) => ({
 			id: e,
-			name: x.get(e)?.name || `Dashboard ${e.slice(0, 8)}...`,
-			href: `${g}/${e}`
+			name: C.get(e)?.name || v("bigconsole.dashboards.drilldownBreadcrumb.fallbackName", "Dashboard {{id}}...", { id: e.slice(0, 8) }),
+			href: `${_}/${e}`
 		})));
 	}, [
-		y,
-		v,
 		x,
-		g
+		b,
+		C,
+		_,
+		v
 	]);
-	let w = i((e, t) => {
-		let n = v().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]), _(i.pathname + i.search);
-	}, [v, _]), T = i(() => {
-		let e = v();
+	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();
 		if (e.parent) {
-			let t = e.path.slice(0, -1), n = e.depth - 1, r = new URL(`${g}/${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])), _(r.pathname + r.search);
-		} else if (S.length > 0) {
-			let e = S[S.length - 1];
-			w(e, S.length - 1);
+			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);
 		}
 	}, [
-		v,
-		g,
+		b,
 		_,
-		S,
-		w
-	]), E = i((e) => {
-		e.preventDefault(), _(g);
-	}, [_, g]);
-	return y ? /* @__PURE__ */ f("nav", {
+		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": "Drilldown breadcrumb",
+		"aria-label": v("bigconsole.dashboards.drilldownBreadcrumb.ariaLabel", "Drilldown breadcrumb"),
 		children: [
-			/* @__PURE__ */ f("button", {
+			/* @__PURE__ */ p("button", {
 				type: "button",
-				onClick: T,
+				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": "Go back",
-				children: [/* @__PURE__ */ d(s, { className: "w-4 h-4" }), /* @__PURE__ */ d("span", {
+				"aria-label": v("bigconsole.dashboards.drilldownBreadcrumb.back", "Go back"),
+				children: [/* @__PURE__ */ f(s, { className: "w-4 h-4" }), /* @__PURE__ */ f("span", {
 					className: "hidden sm:inline",
-					children: "Back"
+					children: v("bigconsole.dashboards.drilldownBreadcrumb.backLabel", "Back")
 				})]
 			}),
-			/* @__PURE__ */ d("span", {
+			/* @__PURE__ */ f("span", {
 				className: "text-border-default",
 				children: "|"
 			}),
-			h && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("a", {
-				href: g,
-				onClick: E,
+			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": "Home",
-				children: [/* @__PURE__ */ d(l, { className: "w-4 h-4" }), /* @__PURE__ */ d("span", {
+				"aria-label": v("bigconsole.dashboards.drilldownBreadcrumb.home", "Home"),
+				children: [/* @__PURE__ */ f(l, { className: "w-4 h-4" }), /* @__PURE__ */ f("span", {
 					className: "hidden sm:inline",
-					children: "Dashboards"
+					children: v("bigconsole.dashboards.drilldownBreadcrumb.dashboards", "Dashboards")
 				})]
-			}), /* @__PURE__ */ d(c, { className: "w-4 h-4 text-text-tertiary" })] }),
-			S.map((e, t) => /* @__PURE__ */ f("div", {
+			}), /* @__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__ */ d("button", {
+				children: [/* @__PURE__ */ f("button", {
 					type: "button",
-					onClick: () => w(e, t),
+					onClick: () => E(e, t),
 					className: "text-sm text-text-secondary hover:text-text-primary hover:underline transition-colors max-w-[150px] truncate",
 					title: e.name,
 					children: e.name
-				}), /* @__PURE__ */ d(c, { className: "w-4 h-4 text-text-tertiary" })]
+				}), /* @__PURE__ */ f(c, { className: "w-4 h-4 text-text-tertiary" })]
 			}, e.id)),
-			m && /* @__PURE__ */ d("span", {
+			h && /* @__PURE__ */ f("span", {
 				className: "text-sm font-medium text-text-primary max-w-[200px] truncate",
-				title: m,
-				children: m
+				title: h,
+				children: h
 			}),
 			/* @__PURE__ */ f("span", {
 				className: "ml-auto text-xs text-text-tertiary bg-bg-sunken px-2 py-0.5 rounded",
-				children: ["Level ", b]
+				children: v("bigconsole.dashboards.drilldownBreadcrumb.level", "Level {{depth}}", { depth: S ?? "" })
 			})
 		]
 	}) : null;
 });
 //#endregion
-export { p as default };
+export { m 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 { 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 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 = dashboard?.name || `Dashboard ${dashboardId.slice(0, 8)}...`;\n\n      return {\n        id: dashboardId,\n        name,\n        href: `${basePath}/${dashboardId}`,\n      };\n    });\n\n    setBreadcrumbs(items);\n  }, [isInDrilldown, getDrilldownMetadata, dashboards, basePath]);\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=\"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=\"Go back\"\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        <span className=\"hidden sm:inline\">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=\"Home\"\n          >\n            <Home className=\"w-4 h-4\" />\n            <span className=\"hidden sm:inline\">Dashboards</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        Level {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';\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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"}