@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/DrilldownDashboardRenderer.js

@@ -1,17 +1,19 @@
-import { GetDashboardDocument as e, ListWidgetsByDashboardDocument as t } from "../../generated/wspace-operations.js";
-import { mapFromFederationWidgetType as n } from "../utils/widgetTypeMapping.js";
-import r from "./widgets/WidgetWrapper.js";
-import { memo as i, useEffect as a, useState as o } from "react";
-import { useApolloClient as s } from "@apollo/client/react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Section as e, SectionStack as t } from "./common/Section.js";
+import "./common/index.js";
+import { GetDashboardDocument as n, ListWidgetsByDashboardDocument as r } from "../../generated/wspace-operations.js";
+import { mapFromFederationWidgetType as i } from "../utils/widgetTypeMapping.js";
+import a from "./widgets/WidgetWrapper.js";
+import { memo as o, useEffect as s, useState as c } from "react";
+import { useApolloClient as l } from "@apollo/client/react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/bigconsole/components/DrilldownDashboardRenderer.tsx
-function u(e, t) {
-	let r = t * 4, i = {
+function f(e, t) {
+	let n = t * 4, r = {
 		x: 0,
-		y: r,
+		y: n,
 		width: 12,
 		height: 4
-	}, a = e.config || {}, o = a._internalWidgetType || n(e.type || "KPI");
+	}, a = e.config || {}, o = a._internalWidgetType || i(e.type || "KPI");
 	return {
 		id: e.id ?? "",
 		pageId: e.pageId || "",
@@ -25,9 +27,9 @@ function u(e, t) {
 		parserId: e.parserId || null,
 		parserRules: e.parserRules || null,
 		config: a,
-		position: i,
+		position: r,
 		positionX: 0,
-		positionY: r,
+		positionY: n,
 		positionWidth: 12,
 		positionHeight: 4,
 		positionResponsive: e.positionResponsive,
@@ -45,147 +47,157 @@ function u(e, t) {
 		updatedAt: e.updatedAt || (/* @__PURE__ */ new Date()).toISOString()
 	};
 }
-var d = i(function({ dashboardId: n, params: r }) {
-	let i = s(), [d, p] = o(!0), [m, h] = o(null), [g, _] = o(null), [v, y] = o([]);
-	return a(() => {
-		if (!n) {
-			p(!1);
+var p = o(function({ dashboardId: i, params: a }) {
+	let o = l(), [p, h] = c(!0), [g, _] = c(null), [v, y] = c(null), [b, x] = c([]);
+	if (s(() => {
+		if (!i) {
+			h(!1);
 			return;
 		}
-		async function r() {
-			p(!0), h(null);
+		async function e() {
+			h(!0), _(null);
 			try {
-				let r = (await i.query({
-					query: e,
-					variables: { id: n },
+				let e = (await o.query({
+					query: n,
+					variables: { id: i },
 					fetchPolicy: "network-only"
 				})).data?.getDashboard;
-				if (!r) {
-					h("Dashboard not found"), p(!1);
+				if (!e) {
+					_("Dashboard not found"), h(!1);
 					return;
 				}
-				let a = r.pages?.edges?.map((e) => ({
+				let t = e.pages?.edges?.map((e) => ({
 					id: e.node.id,
 					name: e.node.name || "Page 1"
 				})) || [];
-				_({
-					id: r.id,
-					name: r.name,
-					description: r.description,
-					pages: a
-				}), y(((await i.query({
-					query: t,
-					variables: { dashboardId: n },
+				y({
+					id: e.id,
+					name: e.name,
+					description: e.description,
+					pages: t
+				}), x(((await o.query({
+					query: r,
+					variables: { dashboardId: i },
 					fetchPolicy: "network-only"
-				})).data?.listWidgetsByDashboard || []).map((e, t) => u(e, t)));
+				})).data?.listWidgetsByDashboard || []).map((e, t) => f(e, t)));
 			} catch (e) {
-				h(e instanceof Error ? e.message : "Failed to load dashboard");
+				_(e instanceof Error ? e.message : "Failed to load dashboard");
 			} finally {
-				p(!1);
+				h(!1);
 			}
 		}
-		r();
-	}, [n, i]), d ? /* @__PURE__ */ c("div", {
+		e();
+	}, [i, o]), p) return /* @__PURE__ */ u("div", {
 		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ d("div", {
 			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ c("div", { className: "w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ c("p", {
+			children: [/* @__PURE__ */ u("div", { className: "w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ u("p", {
 				className: "text-sm text-text-secondary",
 				children: "Loading dashboard..."
 			})]
 		})
-	}) : m ? /* @__PURE__ */ c("div", {
-		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ l("div", {
-			className: "flex flex-col items-center gap-3 text-center max-w-md",
-			children: [/* @__PURE__ */ c("svg", {
-				className: "w-12 h-12 text-status-error-text",
+	});
+	if (g) return /* @__PURE__ */ u("div", {
+		className: "flex h-full items-center justify-center",
+		role: "alert",
+		children: /* @__PURE__ */ u(e, {
+			headingLevel: 3,
+			tone: "danger",
+			className: "w-full max-w-md",
+			"data-testid": "drilldown-error",
+			title: "Could not load this dashboard",
+			description: g,
+			icon: /* @__PURE__ */ u("svg", {
+				className: "h-icon-md w-icon-md",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ c("path", {
+				children: /* @__PURE__ */ u("path", {
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					strokeWidth: 1.5,
 					d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
 				})
-			}), /* @__PURE__ */ c("p", {
-				className: "text-sm text-text-secondary",
-				children: m
-			})]
+			})
 		})
-	}) : !g || v.length === 0 ? /* @__PURE__ */ c("div", {
+	});
+	if (!v || b.length === 0) return /* @__PURE__ */ u("div", {
 		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ d("div", {
 			className: "flex flex-col items-center gap-3 text-center",
-			children: [/* @__PURE__ */ c("svg", {
-				className: "w-12 h-12 text-text-tertiary",
+			children: [/* @__PURE__ */ u("svg", {
+				className: "w-12 h-12 text-text-muted",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ c("path", {
+				children: /* @__PURE__ */ u("path", {
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					strokeWidth: 1.5,
 					d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
 				})
-			}), /* @__PURE__ */ c("p", {
+			}), /* @__PURE__ */ u("p", {
 				className: "text-sm text-text-secondary",
-				children: g ? "This dashboard has no widgets" : "Dashboard not found"
+				children: v ? "This dashboard has no widgets" : "Dashboard not found"
 			})]
 		})
-	}) : /* @__PURE__ */ l("div", {
+	});
+	let S = Object.entries(a).filter(([e]) => !e.startsWith("__"));
+	return /* @__PURE__ */ d(t, {
 		className: "w-full",
-		children: [/* @__PURE__ */ l("div", {
-			className: "pb-3 mb-4 border-b border-border-default",
-			children: [
-				/* @__PURE__ */ c("h3", {
-					className: "text-lg font-semibold text-text-primary",
-					children: g.name
-				}),
-				g.description && /* @__PURE__ */ c("p", {
-					className: "text-sm text-text-secondary mt-1",
-					children: g.description
-				}),
-				Object.keys(r).filter((e) => !e.startsWith("__")).length > 0 && /* @__PURE__ */ c("div", {
-					className: "flex flex-wrap gap-2 mt-2",
-					children: Object.entries(r).filter(([e]) => !e.startsWith("__")).map(([e, t]) => /* @__PURE__ */ l("span", {
-						className: "inline-flex items-center px-2 py-1 rounded bg-action-primary-bg/10 text-xs",
-						children: [/* @__PURE__ */ l("span", {
-							className: "font-medium text-text-primary",
-							children: [e, ":"]
-						}), /* @__PURE__ */ c("span", {
-							className: "ml-1 text-action-primary-text",
-							children: typeof t == "object" && t ? JSON.stringify(t) : String(t)
-						})]
-					}, e))
+		children: [
+			/* @__PURE__ */ u(e, {
+				emphasis: "bare",
+				padding: "none",
+				headingLevel: 3,
+				title: v.name,
+				description: v.description,
+				"data-testid": "drilldown-dashboard-header"
+			}),
+			S.length > 0 && /* @__PURE__ */ u(e, {
+				emphasis: "muted",
+				padding: "compact",
+				headingLevel: 3,
+				title: "Filtered by",
+				"data-testid": "drilldown-params",
+				bodyClassName: "flex flex-wrap gap-control-gap",
+				children: S.map(([e, t]) => /* @__PURE__ */ d("span", {
+					className: "inline-flex items-center rounded-pill bg-bg-surface px-2 py-1 text-xs text-text-secondary",
+					children: [/* @__PURE__ */ d("span", {
+						className: "font-medium text-text-primary",
+						children: [e, ":"]
+					}), /* @__PURE__ */ u("span", {
+						className: "ml-1",
+						children: typeof t == "object" && t ? JSON.stringify(t) : String(t)
+					})]
+				}, e))
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex flex-col gap-form-gap",
+				children: b.map((e) => {
+					let t = e.config?._internalWidgetType, n = e.type;
+					return /* @__PURE__ */ u("div", {
+						className: "min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-surface",
+						style: n === "LINE_CHART" || n === "chart" || t === "chart" || t === "funnel_chart" ? { height: "clamp(220px, 45vh, 350px)" } : n === "TABLE" || n === "table" || t === "table" || t === "list" || t === "pivot_table" ? {
+							minHeight: "min(250px, 40vh)",
+							maxHeight: "min(500px, 65vh)"
+						} : {
+							minHeight: "min(120px, 25vh)",
+							maxHeight: "min(300px, 50vh)"
+						},
+						children: /* @__PURE__ */ u(m, {
+							widget: e,
+							filterValues: a
+						})
+					}, e.id);
 				})
-			]
-		}), /* @__PURE__ */ c("div", {
-			className: "space-y-4",
-			children: v.map((e) => {
-				let t = e.config?._internalWidgetType, n = e.type;
-				return /* @__PURE__ */ c("div", {
-					className: "border border-border-default rounded-lg bg-bg-surface overflow-hidden",
-					style: n === "LINE_CHART" || n === "chart" || t === "chart" || t === "funnel_chart" ? { height: "350px" } : n === "TABLE" || n === "table" || t === "table" || t === "list" || t === "pivot_table" ? {
-						minHeight: "250px",
-						maxHeight: "500px"
-					} : {
-						minHeight: "120px",
-						maxHeight: "300px"
-					},
-					children: /* @__PURE__ */ c(f, {
-						widget: e,
-						filterValues: r
-					})
-				}, e.id);
 			})
-		})]
+		]
 	});
-}), f = i(function({ widget: e, filterValues: t }) {
-	return /* @__PURE__ */ c("div", {
+}), m = o(function({ widget: e, filterValues: t }) {
+	return /* @__PURE__ */ u("div", {
 		className: "h-full [&_[data-widget-id]]:border-transparent [&_[data-widget-id]:hover]:border-transparent",
-		children: /* @__PURE__ */ c(r, {
+		children: /* @__PURE__ */ u(a, {
 			widget: e,
 			isLoading: !1,
 			error: null,
@@ -194,6 +206,6 @@ var d = i(function({ dashboardId: n, params: r }) {
 	});
 });
 //#endregion
-export { d as default };
+export { p as default };
 
 //# sourceMappingURL=DrilldownDashboardRenderer.js.map

package/dist/bigconsole/components/DrilldownDashboardRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrilldownDashboardRenderer.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownDashboardRenderer.tsx"],"sourcesContent":["/**\n * DrilldownDashboardRenderer Component\n *\n * Renders a dashboard inside the DrilldownModal.\n * Fetches dashboard data and displays widgets with passed parameters.\n */\n\nimport { type FC, memo, useEffect, useState } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget } from '../types';\nimport { WidgetWrapper } from './widgets/WidgetWrapper';\nimport { ListWidgetsByDashboardDocument, GetDashboardDocument } from '../../generated/wspace-operations';\nimport { mapFromFederationWidgetType } from '../utils/widgetTypeMapping';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownDashboardRendererProps {\n  /** Target dashboard ID to render */\n  dashboardId: string;\n  /** Parameters passed from drilldown (can be used for filtering) */\n  params: Record<string, unknown>;\n}\n\ninterface DashboardData {\n  id: string;\n  name: string;\n  description?: string;\n  pages: Array<{\n    id: string;\n    name: string;\n  }>;\n}\n\n// ============================================================================\n// Helper: Normalize widget from GraphQL\n// ============================================================================\n\nfunction normalizeWidget(raw: Record<string, unknown>, index: number): Widget {\n  // For drilldown modal, stack widgets vertically with compact sizing\n  const posX = 0;\n  const posY = index * 4; // Stack vertically, 4 row units per widget\n  const posW = 12; // Full width\n  const posH = 4; // Better height for widget content\n\n  const position = { x: posX, y: posY, width: posW, height: posH };\n\n  // Get the config object\n  const config = (raw.config as Record<string, unknown>) || {};\n\n  // Map widget type correctly: check _internalWidgetType first, then map from federation type\n  // This is critical — federation types like 'KPI' must be mapped to internal types like 'metric_card'\n  const internalType = config._internalWidgetType as string | undefined;\n  const widgetType = internalType || mapFromFederationWidgetType((raw.type as string) || 'KPI');\n\n  return {\n    id: (raw.id as string) ?? '',\n    pageId: (raw.pageId as string) || '',\n    dashboardId: raw.dashboardId as string | undefined,\n    type: widgetType,\n    title: (raw.title as string) || 'Untitled Widget',\n    renderer: raw.renderer || 'BIGCONSOLE',\n    template: raw.template || null,\n    dataSinkId: raw.dataSinkId || null,\n    datasetId: raw.datasetId || null,\n    parserId: raw.parserId || null,\n    parserRules: raw.parserRules || null,\n    config: config,\n    position: position,\n    positionX: posX,\n    positionY: posY,\n    positionWidth: posW,\n    positionHeight: posH,\n    positionResponsive: raw.positionResponsive as Widget['positionResponsive'],\n    rowOrder: (raw.rowOrder as number | null) ?? null,\n    refreshInterval: raw.refreshInterval,\n    lastRefreshedAt: raw.lastRefreshedAt,\n    cacheTTL: (raw.cacheTTL as number | null) ?? null,\n    drilldown: raw.drilldown as Widget['drilldown'],\n    actions: (raw.actions as Widget['actions']) || [],\n    translations: (raw.translations as Widget['translations']) || [],\n    metadata: raw.metadata as Record<string, unknown> | undefined,\n    context: raw.context,\n    // Include widget data from backend (critical for showing real data in modal)\n    data: raw.data || null,\n    createdAt: (raw.createdAt as string) || new Date().toISOString(),\n    updatedAt: (raw.updatedAt as string) || new Date().toISOString(),\n  } as Widget;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownDashboardRenderer: FC<DrilldownDashboardRendererProps> = memo(\n  function DrilldownDashboardRenderer({ dashboardId, params }) {\n    const apolloClient = useApolloClient();\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<string | null>(null);\n    const [dashboard, setDashboard] = useState<DashboardData | null>(null);\n    const [widgets, setWidgets] = useState<Widget[]>([]);\n\n    // Fetch dashboard and widgets — only when dashboardId is provided\n    useEffect(() => {\n      if (!dashboardId) {\n        setLoading(false);\n        return;\n      }\n\n      async function fetchData() {\n        setLoading(true);\n        setError(null);\n\n        try {\n          // Fetch dashboard info\n          interface DashboardQueryResult {\n            getDashboard: {\n              id: string;\n              name: string;\n              description?: string;\n              pages?: {\n                edges?: Array<{ node: { id: string; name?: string } }>;\n              };\n            } | null;\n          }\n\n          const dashboardResult = await apolloClient.query<DashboardQueryResult>({\n            query: GetDashboardDocument,\n            variables: { id: dashboardId },\n            fetchPolicy: 'network-only',\n          });\n\n          const dashboardData = dashboardResult.data?.getDashboard;\n          if (!dashboardData) {\n            setError('Dashboard not found');\n            setLoading(false);\n            return;\n          }\n\n          // Normalize dashboard\n          const pages =\n            dashboardData.pages?.edges?.map((edge) => ({\n              id: edge.node.id,\n              name: edge.node.name || 'Page 1',\n            })) || [];\n\n          setDashboard({\n            id: dashboardData.id,\n            name: dashboardData.name,\n            description: dashboardData.description,\n            pages,\n          });\n\n          // Fetch widgets for the dashboard\n          const widgetsResult = await apolloClient.query<{ listWidgetsByDashboard: Record<string, unknown>[] }>({\n            query: ListWidgetsByDashboardDocument,\n            variables: { dashboardId },\n            fetchPolicy: 'network-only',\n          });\n\n          const widgetsList = widgetsResult.data?.listWidgetsByDashboard || [];\n          setWidgets(widgetsList.map((w, i) => normalizeWidget(w, i)));\n        } catch (err) {\n          setError(err instanceof Error ? err.message : 'Failed to load dashboard');\n        } finally {\n          setLoading(false);\n        }\n      }\n\n      fetchData();\n    }, [dashboardId, apolloClient]);\n\n    // Loading state\n    if (loading) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <div className=\"w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin\" />\n            <p className=\"text-sm text-text-secondary\">Loading dashboard...</p>\n          </div>\n        </div>\n      );\n    }\n\n    // Error state\n    if (error) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3 text-center max-w-md\">\n            <svg className=\"w-12 h-12 text-status-error-text\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n            <p className=\"text-sm text-text-secondary\">{error}</p>\n          </div>\n        </div>\n      );\n    }\n\n    // Empty state\n    if (!dashboard || widgets.length === 0) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <svg className=\"w-12 h-12 text-text-tertiary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n              />\n            </svg>\n            <p className=\"text-sm text-text-secondary\">\n              {dashboard ? 'This dashboard has no widgets' : 'Dashboard not found'}\n            </p>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"w-full\">\n        {/* Dashboard Header */}\n        <div className=\"pb-3 mb-4 border-b border-border-default\">\n          <h3 className=\"text-lg font-semibold text-text-primary\">{dashboard.name}</h3>\n          {dashboard.description && <p className=\"text-sm text-text-secondary mt-1\">{dashboard.description}</p>}\n          {/* Show params if present (filter out internal __drilldown metadata) */}\n          {Object.keys(params).filter((k) => !k.startsWith('__')).length > 0 && (\n            <div className=\"flex flex-wrap gap-2 mt-2\">\n              {Object.entries(params)\n                .filter(([key]) => !key.startsWith('__'))\n                .map(([key, value]) => (\n                  <span\n                    key={key}\n                    className=\"inline-flex items-center px-2 py-1 rounded bg-action-primary-bg/10 text-xs\"\n                  >\n                    <span className=\"font-medium text-text-primary\">{key}:</span>\n                    <span className=\"ml-1 text-action-primary-text\">\n                      {typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value)}\n                    </span>\n                  </span>\n                ))}\n            </div>\n          )}\n        </div>\n\n        {/* Widgets List - simple vertical layout for modal */}\n        <div className=\"space-y-4\">\n          {widgets.map((widget) => {\n            // Chart widgets (LINE_CHART / chart) need explicit pixel height because\n            // Recharts ResponsiveContainer height=\"100%\" requires a parent with\n            // a definite height — minHeight alone doesn't work.\n            const internalType = (widget.config as Record<string, unknown>)?._internalWidgetType as string | undefined;\n            const widgetType = widget.type as string;\n            const isChartWidget =\n              widgetType === 'LINE_CHART' ||\n              widgetType === 'chart' ||\n              internalType === 'chart' ||\n              internalType === 'funnel_chart';\n            const isTableWidget =\n              widgetType === 'TABLE' ||\n              widgetType === 'table' ||\n              internalType === 'table' ||\n              internalType === 'list' ||\n              internalType === 'pivot_table';\n\n            // Charts need explicit height; tables need more space; KPIs auto-size\n            const heightStyle = isChartWidget\n              ? { height: '350px' }\n              : isTableWidget\n                ? { minHeight: '250px', maxHeight: '500px' }\n                : { minHeight: '120px', maxHeight: '300px' };\n\n            return (\n              <div\n                key={widget.id}\n                className=\"border border-border-default rounded-lg bg-bg-surface overflow-hidden\"\n                style={heightStyle}\n              >\n                <WidgetInModal widget={widget} filterValues={params} />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\n// ============================================================================\n// Widget In Modal Component\n// ============================================================================\n\ninterface WidgetInModalProps {\n  widget: Widget;\n  filterValues?: Record<string, unknown>;\n}\n\nconst WidgetInModal: FC<WidgetInModalProps> = memo(function WidgetInModal({ widget, filterValues }) {\n  return (\n    <div className=\"h-full [&_[data-widget-id]]:border-transparent [&_[data-widget-id]:hover]:border-transparent\">\n      <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={filterValues} />\n    </div>\n  );\n});\n\nexport default DrilldownDashboardRenderer;\n"],"mappings":"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"}
+{"version":3,"file":"DrilldownDashboardRenderer.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownDashboardRenderer.tsx"],"sourcesContent":["/**\n * DrilldownDashboardRenderer Component\n *\n * Renders a dashboard inside the DrilldownModal.\n * Fetches dashboard data and displays widgets with passed parameters.\n */\n\nimport { type FC, memo, useEffect, useState } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget } from '../types';\nimport { WidgetWrapper } from './widgets/WidgetWrapper';\nimport { Section, SectionStack } from './common';\nimport { ListWidgetsByDashboardDocument, GetDashboardDocument } from '../../generated/wspace-operations';\nimport { mapFromFederationWidgetType } from '../utils/widgetTypeMapping';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownDashboardRendererProps {\n  /** Target dashboard ID to render */\n  dashboardId: string;\n  /** Parameters passed from drilldown (can be used for filtering) */\n  params: Record<string, unknown>;\n}\n\ninterface DashboardData {\n  id: string;\n  name: string;\n  description?: string;\n  pages: Array<{\n    id: string;\n    name: string;\n  }>;\n}\n\n// ============================================================================\n// Helper: Normalize widget from GraphQL\n// ============================================================================\n\nfunction normalizeWidget(raw: Record<string, unknown>, index: number): Widget {\n  // For drilldown modal, stack widgets vertically with compact sizing\n  const posX = 0;\n  const posY = index * 4; // Stack vertically, 4 row units per widget\n  const posW = 12; // Full width\n  const posH = 4; // Better height for widget content\n\n  const position = { x: posX, y: posY, width: posW, height: posH };\n\n  // Get the config object\n  const config = (raw.config as Record<string, unknown>) || {};\n\n  // Map widget type correctly: check _internalWidgetType first, then map from federation type\n  // This is critical — federation types like 'KPI' must be mapped to internal types like 'metric_card'\n  const internalType = config._internalWidgetType as string | undefined;\n  const widgetType = internalType || mapFromFederationWidgetType((raw.type as string) || 'KPI');\n\n  return {\n    id: (raw.id as string) ?? '',\n    pageId: (raw.pageId as string) || '',\n    dashboardId: raw.dashboardId as string | undefined,\n    type: widgetType,\n    title: (raw.title as string) || 'Untitled Widget',\n    renderer: raw.renderer || 'BIGCONSOLE',\n    template: raw.template || null,\n    dataSinkId: raw.dataSinkId || null,\n    datasetId: raw.datasetId || null,\n    parserId: raw.parserId || null,\n    parserRules: raw.parserRules || null,\n    config: config,\n    position: position,\n    positionX: posX,\n    positionY: posY,\n    positionWidth: posW,\n    positionHeight: posH,\n    positionResponsive: raw.positionResponsive as Widget['positionResponsive'],\n    rowOrder: (raw.rowOrder as number | null) ?? null,\n    refreshInterval: raw.refreshInterval,\n    lastRefreshedAt: raw.lastRefreshedAt,\n    cacheTTL: (raw.cacheTTL as number | null) ?? null,\n    drilldown: raw.drilldown as Widget['drilldown'],\n    actions: (raw.actions as Widget['actions']) || [],\n    translations: (raw.translations as Widget['translations']) || [],\n    metadata: raw.metadata as Record<string, unknown> | undefined,\n    context: raw.context,\n    // Include widget data from backend (critical for showing real data in modal)\n    data: raw.data || null,\n    createdAt: (raw.createdAt as string) || new Date().toISOString(),\n    updatedAt: (raw.updatedAt as string) || new Date().toISOString(),\n  } as Widget;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownDashboardRenderer: FC<DrilldownDashboardRendererProps> = memo(\n  function DrilldownDashboardRenderer({ dashboardId, params }) {\n    const apolloClient = useApolloClient();\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<string | null>(null);\n    const [dashboard, setDashboard] = useState<DashboardData | null>(null);\n    const [widgets, setWidgets] = useState<Widget[]>([]);\n\n    // Fetch dashboard and widgets — only when dashboardId is provided\n    useEffect(() => {\n      if (!dashboardId) {\n        setLoading(false);\n        return;\n      }\n\n      async function fetchData() {\n        setLoading(true);\n        setError(null);\n\n        try {\n          // Fetch dashboard info\n          interface DashboardQueryResult {\n            getDashboard: {\n              id: string;\n              name: string;\n              description?: string;\n              pages?: {\n                edges?: Array<{ node: { id: string; name?: string } }>;\n              };\n            } | null;\n          }\n\n          const dashboardResult = await apolloClient.query<DashboardQueryResult>({\n            query: GetDashboardDocument,\n            variables: { id: dashboardId },\n            fetchPolicy: 'network-only',\n          });\n\n          const dashboardData = dashboardResult.data?.getDashboard;\n          if (!dashboardData) {\n            setError('Dashboard not found');\n            setLoading(false);\n            return;\n          }\n\n          // Normalize dashboard\n          const pages =\n            dashboardData.pages?.edges?.map((edge) => ({\n              id: edge.node.id,\n              name: edge.node.name || 'Page 1',\n            })) || [];\n\n          setDashboard({\n            id: dashboardData.id,\n            name: dashboardData.name,\n            description: dashboardData.description,\n            pages,\n          });\n\n          // Fetch widgets for the dashboard\n          const widgetsResult = await apolloClient.query<{ listWidgetsByDashboard: Record<string, unknown>[] }>({\n            query: ListWidgetsByDashboardDocument,\n            variables: { dashboardId },\n            fetchPolicy: 'network-only',\n          });\n\n          const widgetsList = widgetsResult.data?.listWidgetsByDashboard || [];\n          setWidgets(widgetsList.map((w, i) => normalizeWidget(w, i)));\n        } catch (err) {\n          setError(err instanceof Error ? err.message : 'Failed to load dashboard');\n        } finally {\n          setLoading(false);\n        }\n      }\n\n      fetchData();\n    }, [dashboardId, apolloClient]);\n\n    // Loading state\n    if (loading) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <div className=\"w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin\" />\n            <p className=\"text-sm text-text-secondary\">Loading dashboard...</p>\n          </div>\n        </div>\n      );\n    }\n\n    // Error state\n    if (error) {\n      return (\n        <div className=\"flex h-full items-center justify-center\" role=\"alert\">\n          <Section\n            headingLevel={3}\n            tone=\"danger\"\n            className=\"w-full max-w-md\"\n            data-testid=\"drilldown-error\"\n            title=\"Could not load this dashboard\"\n            description={error}\n            icon={\n              <svg className=\"h-icon-md w-icon-md\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={1.5}\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n            }\n          />\n        </div>\n      );\n    }\n\n    // Empty state\n    if (!dashboard || widgets.length === 0) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <svg className=\"w-12 h-12 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n              />\n            </svg>\n            <p className=\"text-sm text-text-secondary\">\n              {dashboard ? 'This dashboard has no widgets' : 'Dashboard not found'}\n            </p>\n          </div>\n        </div>\n      );\n    }\n\n    const visibleParams = Object.entries(params).filter(([key]) => !key.startsWith('__'));\n\n    return (\n      <SectionStack className=\"w-full\">\n        {/* Which board you drilled into — identity, not content. */}\n        <Section\n          emphasis=\"bare\"\n          padding=\"none\"\n          headingLevel={3}\n          title={dashboard.name}\n          description={dashboard.description}\n          data-testid=\"drilldown-dashboard-header\"\n        />\n\n        {/* The filter context you arrived with: supporting detail, recessed. */}\n        {visibleParams.length > 0 && (\n          <Section\n            emphasis=\"muted\"\n            padding=\"compact\"\n            headingLevel={3}\n            title=\"Filtered by\"\n            data-testid=\"drilldown-params\"\n            bodyClassName=\"flex flex-wrap gap-control-gap\"\n          >\n            {visibleParams.map(([key, value]) => (\n              <span\n                key={key}\n                className=\"inline-flex items-center rounded-pill bg-bg-surface px-2 py-1 text-xs text-text-secondary\"\n              >\n                <span className=\"font-medium text-text-primary\">{key}:</span>\n                <span className=\"ml-1\">\n                  {typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value)}\n                </span>\n              </span>\n            ))}\n          </Section>\n        )}\n\n        {/* Widgets List - simple vertical layout for modal */}\n        <div className=\"flex flex-col gap-form-gap\">\n          {widgets.map((widget) => {\n            // Chart widgets (LINE_CHART / chart) need explicit pixel height because\n            // Recharts ResponsiveContainer height=\"100%\" requires a parent with\n            // a definite height — minHeight alone doesn't work.\n            const internalType = (widget.config as Record<string, unknown>)?._internalWidgetType as string | undefined;\n            const widgetType = widget.type as string;\n            const isChartWidget =\n              widgetType === 'LINE_CHART' ||\n              widgetType === 'chart' ||\n              internalType === 'chart' ||\n              internalType === 'funnel_chart';\n            const isTableWidget =\n              widgetType === 'TABLE' ||\n              widgetType === 'table' ||\n              internalType === 'table' ||\n              internalType === 'list' ||\n              internalType === 'pivot_table';\n\n            // Charts need an explicit height (Recharts' ResponsiveContainer needs a\n            // definite parent). Clamping against the viewport keeps a 350px chart\n            // plus a 500px table from filling a phone screen twice over.\n            const heightStyle = isChartWidget\n              ? { height: 'clamp(220px, 45vh, 350px)' }\n              : isTableWidget\n                ? { minHeight: 'min(250px, 40vh)', maxHeight: 'min(500px, 65vh)' }\n                : { minHeight: 'min(120px, 25vh)', maxHeight: 'min(300px, 50vh)' };\n\n            return (\n              <div\n                key={widget.id}\n                className=\"min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-surface\"\n                style={heightStyle}\n              >\n                <WidgetInModal widget={widget} filterValues={params} />\n              </div>\n            );\n          })}\n        </div>\n      </SectionStack>\n    );\n  }\n);\n\n// ============================================================================\n// Widget In Modal Component\n// ============================================================================\n\ninterface WidgetInModalProps {\n  widget: Widget;\n  filterValues?: Record<string, unknown>;\n}\n\nconst WidgetInModal: FC<WidgetInModalProps> = memo(function WidgetInModal({ widget, filterValues }) {\n  return (\n    <div className=\"h-full [&_[data-widget-id]]:border-transparent [&_[data-widget-id]:hover]:border-transparent\">\n      <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={filterValues} />\n    </div>\n  );\n});\n\nexport default DrilldownDashboardRenderer;\n"],"mappings":"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"}

package/dist/bigconsole/components/DrilldownModal.js

@@ -1,49 +1,52 @@
 import e from "../store/drilldownStore.js";
-import { memo as t, useCallback as n, useEffect as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as t } from "./common/sectionStyles.js";
+import "./common/index.js";
+import { memo as n, useCallback as r, useEffect as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/bigconsole/components/DrilldownModal.tsx
-var o = t(function({ renderDashboard: t, onClose: o }) {
-	let c = e((e) => e.isOpen), l = e((e) => e.dashboardId), u = e((e) => e.params), d = e((e) => e.history), f = e((e) => e.closeModal), p = e((e) => e.popDrilldown), m = n(() => {
-		f(), o?.();
-	}, [f, o]), h = n(() => {
-		p();
-	}, [p]), g = n((e) => {
-		e.target === e.currentTarget && m();
-	}, [m]);
-	return r(() => {
+var s = n(function({ renderDashboard: n, onClose: s }) {
+	let l = e((e) => e.isOpen), u = e((e) => e.dashboardId), d = e((e) => e.params), f = e((e) => e.history), p = e((e) => e.closeModal), m = e((e) => e.popDrilldown), h = r(() => {
+		p(), s?.();
+	}, [p, s]), g = r(() => {
+		m();
+	}, [m]), _ = r((e) => {
+		e.target === e.currentTarget && h();
+	}, [h]);
+	return i(() => {
 		let e = (e) => {
-			e.key === "Escape" && c && m();
+			e.key === "Escape" && l && h();
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [c, m]), r(() => (c ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+	}, [l, h]), i(() => (l ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
 		document.body.style.overflow = "";
-	}), [c]), !c || !l ? null : /* @__PURE__ */ a("div", {
+	}), [l]), !l || !u ? null : /* @__PURE__ */ o("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center p-4",
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-labelledby": "drilldown-modal-title",
-		onClick: g,
-		children: [/* @__PURE__ */ i("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm" }), /* @__PURE__ */ a("div", {
-			className: "relative z-10 w-full max-w-5xl bg-bg-surface rounded-xl shadow-2xl flex flex-col",
+		onClick: _,
+		children: [/* @__PURE__ */ a("div", { className: "absolute inset-0 bg-[var(--color-overlay-scrim)] backdrop-blur-sm" }), /* @__PURE__ */ o("div", {
+			className: "relative z-10 flex w-full max-w-5xl flex-col overflow-hidden rounded-card bg-bg-surface shadow-[var(--shadow-elevation-3)]",
 			style: { maxHeight: "calc(100vh - 2rem)" },
 			onClick: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ a("div", {
-					className: "flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-sunken/50 rounded-t-xl",
-					children: [/* @__PURE__ */ a("div", {
-						className: "flex items-center gap-3",
+				/* @__PURE__ */ o("div", {
+					className: "flex flex-shrink-0 flex-wrap items-center justify-between gap-control-gap border-b border-[var(--color-border-subtle)] px-4 py-3",
+					children: [/* @__PURE__ */ o("div", {
+						className: "flex min-w-0 items-center gap-3",
 						children: [
-							d.length > 0 && /* @__PURE__ */ i("button", {
+							f.length > 0 && /* @__PURE__ */ a("button", {
 								type: "button",
-								onClick: h,
-								className: "p-1.5 rounded-md hover:bg-bg-sunken transition-colors",
+								onClick: g,
+								className: "flex h-control-md w-[var(--size-controlHeight-md)] shrink-0 items-center justify-center rounded-button motion-safe:transition-colors hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 								title: "Go back",
-								children: /* @__PURE__ */ i("svg", {
+								"aria-label": "Go back",
+								children: /* @__PURE__ */ a("svg", {
 									className: "w-5 h-5 text-text-secondary",
 									fill: "none",
 									stroke: "currentColor",
 									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ i("path", {
+									children: /* @__PURE__ */ a("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 2,
@@ -51,33 +54,34 @@ var o = t(function({ renderDashboard: t, onClose: o }) {
 									})
 								})
 							}),
-							/* @__PURE__ */ i("h2", {
+							/* @__PURE__ */ a("h2", {
 								id: "drilldown-modal-title",
-								className: "text-sm font-medium text-text-primary",
+								className: "truncate text-sm font-semibold text-text-primary",
 								children: "Drilldown View"
 							}),
-							d.length > 0 && /* @__PURE__ */ a("span", {
-								className: "text-xs text-text-tertiary",
+							f.length > 0 && /* @__PURE__ */ o("span", {
+								className: "text-xs text-text-muted",
 								children: [
 									"(",
-									d.length + 1,
+									f.length + 1,
 									" level",
-									d.length > 0 ? "s" : "",
+									f.length > 0 ? "s" : "",
 									" deep)"
 								]
 							})
 						]
-					}), /* @__PURE__ */ i("button", {
+					}), /* @__PURE__ */ a("button", {
 						type: "button",
-						onClick: m,
-						className: "p-2 rounded-md hover:bg-bg-sunken transition-colors",
+						onClick: h,
+						className: `flex h-control-md w-[var(--size-controlHeight-md)] shrink-0 items-center justify-center rounded-button motion-safe:transition-colors hover:bg-bg-sunken ${t}`,
 						title: "Close (Esc)",
-						children: /* @__PURE__ */ i("svg", {
+						"aria-label": "Close drilldown",
+						children: /* @__PURE__ */ a("svg", {
 							className: "w-5 h-5 text-text-secondary",
 							fill: "none",
 							stroke: "currentColor",
 							viewBox: "0 0 24 24",
-							children: /* @__PURE__ */ i("path", {
+							children: /* @__PURE__ */ a("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -86,32 +90,32 @@ var o = t(function({ renderDashboard: t, onClose: o }) {
 						})
 					})]
 				}),
-				/* @__PURE__ */ i("div", {
-					className: "flex-1 overflow-y-auto min-h-0 p-4",
-					children: t ? t(l, u) : /* @__PURE__ */ i(s, {})
+				/* @__PURE__ */ a("div", {
+					className: "min-h-0 flex-1 overflow-y-auto bg-bg-sunken p-4",
+					children: n ? n(u, d) : /* @__PURE__ */ a(c, {})
 				}),
-				/* @__PURE__ */ i("div", {
-					className: "flex-shrink-0 px-4 py-2 border-t border-border-default bg-bg-sunken/30 rounded-b-xl",
-					children: /* @__PURE__ */ a("div", {
-						className: "flex items-center justify-between text-xs text-text-tertiary",
-						children: [/* @__PURE__ */ a("span", { children: [
+				/* @__PURE__ */ a("div", {
+					className: "flex-shrink-0 border-t border-[var(--color-border-subtle)] px-4 py-2",
+					children: /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-text-muted",
+						children: [/* @__PURE__ */ o("span", { children: [
 							"Parameters:",
 							" ",
-							Object.keys(u).filter((e) => !e.startsWith("__")).length > 0 ? Object.keys(u).filter((e) => !e.startsWith("__")).join(", ") : "None"
-						] }), /* @__PURE__ */ i("span", { children: "Press Esc to close" })]
+							Object.keys(d).filter((e) => !e.startsWith("__")).length > 0 ? Object.keys(d).filter((e) => !e.startsWith("__")).join(", ") : "None"
+						] }), /* @__PURE__ */ a("span", { children: "Press Esc to close" })]
 					})
 				})
 			]
 		})]
 	});
 });
-function s() {
-	return /* @__PURE__ */ i("div", {
+function c() {
+	return /* @__PURE__ */ a("div", {
 		className: "flex items-center justify-center h-full text-sm text-text-secondary",
 		children: "Unable to load drilldown content. Please try again."
 	});
 }
 //#endregion
-export { o as default };
+export { s as default };
 
 //# sourceMappingURL=DrilldownModal.js.map

package/dist/bigconsole/components/DrilldownModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrilldownModal.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownModal.tsx"],"sourcesContent":["/**\n * DrilldownModal Component\n *\n * Modal overlay for displaying drilldown dashboards.\n * Supports nested drilldowns with back navigation.\n */\n\nimport { type FC, useEffect, useCallback, memo } from 'react';\nimport { useDrilldownStore } from '../store/drilldownStore';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownModalProps {\n  /** Custom content renderer for the dashboard */\n  renderDashboard?: (dashboardId: string, params: Record<string, unknown>) => React.ReactNode;\n  /** Called when modal closes */\n  onClose?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownModal: FC<DrilldownModalProps> = memo(function DrilldownModal({ renderDashboard, onClose }) {\n  const isOpen = useDrilldownStore((state) => state.isOpen);\n  const dashboardId = useDrilldownStore((state) => state.dashboardId);\n  const params = useDrilldownStore((state) => state.params);\n  const history = useDrilldownStore((state) => state.history);\n  const closeModal = useDrilldownStore((state) => state.closeModal);\n  const popDrilldown = useDrilldownStore((state) => state.popDrilldown);\n\n  // Define handlers before effects that use them\n  const handleClose = useCallback(() => {\n    closeModal();\n    onClose?.();\n  }, [closeModal, onClose]);\n\n  const handleBack = useCallback(() => {\n    popDrilldown();\n  }, [popDrilldown]);\n\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        handleClose();\n      }\n    },\n    [handleClose]\n  );\n\n  // Handle escape key\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        handleClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isOpen, handleClose]);\n\n  // Prevent body scroll when modal is open\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => {\n      document.body.style.overflow = '';\n    };\n  }, [isOpen]);\n\n  if (!isOpen || !dashboardId) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"drilldown-modal-title\"\n      onClick={handleBackdropClick}\n    >\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-black/60 backdrop-blur-sm\" />\n\n      {/* Modal Content - contained within viewport */}\n      <div\n        className=\"relative z-10 w-full max-w-5xl bg-bg-surface rounded-xl shadow-2xl flex flex-col\"\n        style={{ maxHeight: 'calc(100vh - 2rem)' }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Header */}\n        <div className=\"flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-sunken/50 rounded-t-xl\">\n          <div className=\"flex items-center gap-3\">\n            {/* Back button */}\n            {history.length > 0 && (\n              <button\n                type=\"button\"\n                onClick={handleBack}\n                className=\"p-1.5 rounded-md hover:bg-bg-sunken transition-colors\"\n                title=\"Go back\"\n              >\n                <svg className=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n                </svg>\n              </button>\n            )}\n\n            {/* Title */}\n            <h2 id=\"drilldown-modal-title\" className=\"text-sm font-medium text-text-primary\">\n              Drilldown View\n            </h2>\n\n            {/* Breadcrumb indicator */}\n            {history.length > 0 && (\n              <span className=\"text-xs text-text-tertiary\">\n                ({history.length + 1} level{history.length > 0 ? 's' : ''} deep)\n              </span>\n            )}\n          </div>\n\n          {/* Close button */}\n          <button\n            type=\"button\"\n            onClick={handleClose}\n            className=\"p-2 rounded-md hover:bg-bg-sunken transition-colors\"\n            title=\"Close (Esc)\"\n          >\n            <svg className=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Dashboard Content - scrollable */}\n        <div className=\"flex-1 overflow-y-auto min-h-0 p-4\">\n          {renderDashboard ? renderDashboard(dashboardId, params) : <DrilldownFallback />}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex-shrink-0 px-4 py-2 border-t border-border-default bg-bg-sunken/30 rounded-b-xl\">\n          <div className=\"flex items-center justify-between text-xs text-text-tertiary\">\n            <span>\n              Parameters:{' '}\n              {Object.keys(params).filter((k) => !k.startsWith('__')).length > 0\n                ? Object.keys(params)\n                    .filter((k) => !k.startsWith('__'))\n                    .join(', ')\n                : 'None'}\n            </span>\n            <span>Press Esc to close</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\n// Fallback when no renderDashboard prop is provided (should not happen in normal usage\n// since BigConsoleRoot always passes DrilldownDashboardRenderer).\nfunction DrilldownFallback() {\n  return (\n    <div className=\"flex items-center justify-center h-full text-sm text-text-secondary\">\n      Unable to load drilldown content. Please try again.\n    </div>\n  );\n}\n\nexport default DrilldownModal;\n"],"mappings":"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"}
+{"version":3,"file":"DrilldownModal.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownModal.tsx"],"sourcesContent":["/**\n * DrilldownModal Component\n *\n * Modal overlay for displaying drilldown dashboards.\n * Supports nested drilldowns with back navigation.\n */\n\nimport { type FC, useEffect, useCallback, memo } from 'react';\nimport { useDrilldownStore } from '../store/drilldownStore';\nimport { SECTION_FOCUS_RING } from './common';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownModalProps {\n  /** Custom content renderer for the dashboard */\n  renderDashboard?: (dashboardId: string, params: Record<string, unknown>) => React.ReactNode;\n  /** Called when modal closes */\n  onClose?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownModal: FC<DrilldownModalProps> = memo(function DrilldownModal({ renderDashboard, onClose }) {\n  const isOpen = useDrilldownStore((state) => state.isOpen);\n  const dashboardId = useDrilldownStore((state) => state.dashboardId);\n  const params = useDrilldownStore((state) => state.params);\n  const history = useDrilldownStore((state) => state.history);\n  const closeModal = useDrilldownStore((state) => state.closeModal);\n  const popDrilldown = useDrilldownStore((state) => state.popDrilldown);\n\n  // Define handlers before effects that use them\n  const handleClose = useCallback(() => {\n    closeModal();\n    onClose?.();\n  }, [closeModal, onClose]);\n\n  const handleBack = useCallback(() => {\n    popDrilldown();\n  }, [popDrilldown]);\n\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        handleClose();\n      }\n    },\n    [handleClose]\n  );\n\n  // Handle escape key\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        handleClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isOpen, handleClose]);\n\n  // Prevent body scroll when modal is open\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => {\n      document.body.style.overflow = '';\n    };\n  }, [isOpen]);\n\n  if (!isOpen || !dashboardId) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"drilldown-modal-title\"\n      onClick={handleBackdropClick}\n    >\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-[var(--color-overlay-scrim)] backdrop-blur-sm\" />\n\n      {/* Modal Content - contained within viewport */}\n      <div\n        className=\"relative z-10 flex w-full max-w-5xl flex-col overflow-hidden rounded-card bg-bg-surface shadow-[var(--shadow-elevation-3)]\"\n        style={{ maxHeight: 'calc(100vh - 2rem)' }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Header — bare chrome: identity + close, no surface of its own */}\n        <div className=\"flex flex-shrink-0 flex-wrap items-center justify-between gap-control-gap border-b border-[var(--color-border-subtle)] px-4 py-3\">\n          <div className=\"flex min-w-0 items-center gap-3\">\n            {/* Back button */}\n            {history.length > 0 && (\n              <button\n                type=\"button\"\n                onClick={handleBack}\n                className={`flex h-control-md w-[var(--size-controlHeight-md)] shrink-0 items-center justify-center rounded-button motion-safe:transition-colors hover:bg-bg-sunken ${SECTION_FOCUS_RING}`}\n                title=\"Go back\"\n                aria-label=\"Go back\"\n              >\n                <svg className=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n                </svg>\n              </button>\n            )}\n\n            {/* Title */}\n            <h2 id=\"drilldown-modal-title\" className=\"truncate text-sm font-semibold text-text-primary\">\n              Drilldown View\n            </h2>\n\n            {/* Breadcrumb indicator */}\n            {history.length > 0 && (\n              <span className=\"text-xs text-text-muted\">\n                ({history.length + 1} level{history.length > 0 ? 's' : ''} deep)\n              </span>\n            )}\n          </div>\n\n          {/* Close button */}\n          <button\n            type=\"button\"\n            onClick={handleClose}\n            className={`flex h-control-md w-[var(--size-controlHeight-md)] shrink-0 items-center justify-center rounded-button motion-safe:transition-colors hover:bg-bg-sunken ${SECTION_FOCUS_RING}`}\n            title=\"Close (Esc)\"\n            aria-label=\"Close drilldown\"\n          >\n            <svg className=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Dashboard Content — the point of the overlay, so it gets the surface\n            weight and the chrome around it stays flat. */}\n        <div className=\"min-h-0 flex-1 overflow-y-auto bg-bg-sunken p-4\">\n          {renderDashboard ? renderDashboard(dashboardId, params) : <DrilldownFallback />}\n        </div>\n\n        {/* Footer — supporting detail only */}\n        <div className=\"flex-shrink-0 border-t border-[var(--color-border-subtle)] px-4 py-2\">\n          <div className=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-text-muted\">\n            <span>\n              Parameters:{' '}\n              {Object.keys(params).filter((k) => !k.startsWith('__')).length > 0\n                ? Object.keys(params)\n                    .filter((k) => !k.startsWith('__'))\n                    .join(', ')\n                : 'None'}\n            </span>\n            <span>Press Esc to close</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\n// Fallback when no renderDashboard prop is provided (should not happen in normal usage\n// since BigConsoleRoot always passes DrilldownDashboardRenderer).\nfunction DrilldownFallback() {\n  return (\n    <div className=\"flex items-center justify-center h-full text-sm text-text-secondary\">\n      Unable to load drilldown content. Please try again.\n    </div>\n  );\n}\n\nexport default DrilldownModal;\n"],"mappings":"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"}

package/dist/bigconsole/components/builder/BuilderCanvas.js

@@ -3,12 +3,12 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/bigconsole/components/builder/BuilderCanvas.tsx
 var r = e(function({ palette: e, canvas: r, inspector: i }) {
 	return /* @__PURE__ */ n("div", {
-		className: "flex min-h-0 min-w-0 flex-1 overflow-hidden",
+		className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden md:flex-row",
 		"data-testid": "dashboard-editor-panes",
 		children: [
 			e,
 			/* @__PURE__ */ t("main", {
-				className: "relative min-w-0 flex-1 overflow-hidden",
+				className: "relative min-h-0 min-w-0 flex-1 overflow-hidden",
 				children: r
 			}),
 			i