@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/widgets/DrilldownConfigPanel.js

@@ -1,22 +1,27 @@
-import { ListDashboardsDocument as e } from "../../../generated/wspace-operations.js";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import { Section as t } from "../common/Section.js";
+import "../common/index.js";
+import { ListDashboardsDocument as n } from "../../../generated/wspace-operations.js";
 import "../../hooks/useDrilldown.js";
-import { memo as t, useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
-import { useApolloClient as o } from "@apollo/client/react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { memo as r, useCallback as i, useEffect as a, useMemo as o, useState as s } from "react";
+import { useApolloClient as c } from "@apollo/client/react";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/DrilldownConfigPanel.tsx
-function u(e, t = "") {
+var p = "min-h-control-md rounded-input border border-[var(--color-border-subtle)] bg-bg-surface py-2 text-sm 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", m = `${p} w-full px-3`, h = "bg-action-primary-bg border-action-primary-bg", g = "bg-bg-sunken border-[var(--color-border-strong)]", _ = "bg-bg-surface shadow-[var(--shadow-elevation-1)]";
+function v(e, t = "") {
 	if (!e || typeof e != "object") return [];
 	let n = [];
-	if (Array.isArray(e)) return e.length > 0 && typeof e[0] == "object" ? u(e[0], t) : [];
+	if (Array.isArray(e)) return e.length > 0 && typeof e[0] == "object" ? v(e[0], t) : [];
 	for (let [r, i] of Object.entries(e)) {
 		let e = t ? `${t}.${r}` : r;
-		n.push(e), i && typeof i == "object" && !Array.isArray(i) && t.split(".").length < 2 && n.push(...u(i, e));
+		n.push(e), i && typeof i == "object" && !Array.isArray(i) && t.split(".").length < 2 && n.push(...v(i, e));
 	}
 	return n;
 }
-var d = t(function({ widget: t, onChange: d, widgetData: f }) {
-	let p = o(), [m, h] = a(t.drilldown?.enabled ?? !1), [g, _] = a(t.drilldown?.targetDashboardId ?? ""), [v, y] = a(t.drilldown?.navigationMode ?? "MODAL"), [b, x] = a(t.drilldown?.passGlobalFilters ?? !0), [S, C] = a(t.drilldown?.maxDepth ?? 3), [w, T] = a(t.drilldown?.openIn ?? "same"), [E, D] = a(() => {
-		let e = t.drilldown?.parameterMapping;
+var y = r(function({ widget: r, onChange: y, widgetData: b }) {
+	let { t: x } = l(), S = c(), [C, w] = s(r.drilldown?.enabled ?? !1), [T, E] = s(r.drilldown?.targetDashboardId ?? ""), [D, O] = s(r.drilldown?.navigationMode ?? "MODAL"), [k, A] = s(r.drilldown?.passGlobalFilters ?? !0), [j, M] = s(r.drilldown?.maxDepth ?? 3), [N, P] = s(r.drilldown?.openIn ?? "same"), [F, I] = s(() => {
+		let e = r.drilldown?.parameterMapping;
 		return e ? Object.entries(e).map(([e, t]) => ({
 			key: e,
 			value: t
@@ -24,55 +29,55 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 			key: "",
 			value: ""
 		}];
-	}), [O, k] = a([]), [A, j] = a(!1), [M, N] = a(null), P = i(() => {
-		if (!f) return [];
+	}), [L, R] = s([]), [z, B] = s(!1), [V, H] = s(null), U = o(() => {
+		if (!b) return [];
 		let e = [
 			"row",
 			"item",
 			"point",
 			"selectedData"
-		], t = u(f), n = [];
+		], t = v(b), n = [];
 		for (let r of t) for (let t of e) n.push(`{{${t}.${r}}}`);
 		return n.push("{{widget.value}}", "{{widget.title}}", "{{widget.id}}"), n.push("{{globals.vars.dateFrom}}", "{{globals.vars.dateTo}}"), [...new Set(n)];
-	}, [f]), F = n(() => {
+	}, [b]), W = i(() => {
 		let e = {};
-		for (let { key: t, value: n } of E) t.trim() && n.trim() && (e[t.trim()] = n.trim());
-		d?.({
-			enabled: m,
-			targetDashboardId: g,
-			navigationMode: v,
+		for (let { key: t, value: n } of F) t.trim() && n.trim() && (e[t.trim()] = n.trim());
+		y?.({
+			enabled: C,
+			targetDashboardId: T,
+			navigationMode: D,
 			parameterMapping: e,
-			passGlobalFilters: b,
-			maxDepth: S,
-			openIn: w
+			passGlobalFilters: k,
+			maxDepth: j,
+			openIn: N
 		});
 	}, [
-		m,
-		g,
-		v,
-		E,
-		b,
-		S,
-		w,
-		d
+		C,
+		T,
+		D,
+		F,
+		k,
+		j,
+		N,
+		y
 	]);
-	r(() => {
-		F();
+	a(() => {
+		W();
 	}, [
-		m,
-		g,
-		v,
-		E,
-		b,
-		S,
-		w,
-		F
-	]), r(() => {
-		async function t() {
-			j(!0);
+		C,
+		T,
+		D,
+		F,
+		k,
+		j,
+		N,
+		W
+	]), a(() => {
+		async function e() {
+			B(!0);
 			try {
-				k(((await p.query({
-					query: e,
+				R(((await S.query({
+					query: n,
 					variables: { first: 100 },
 					fetchPolicy: "cache-first"
 				})).data?.listDashboards?.edges || []).map((e) => {
@@ -83,161 +88,164 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 					};
 				}));
 			} catch {} finally {
-				j(!1);
+				B(!1);
 			}
 		}
-		t();
-	}, [p]);
-	let I = n(() => {
-		D((e) => [...e, {
+		e();
+	}, [S]);
+	let G = i(() => {
+		I((e) => [...e, {
 			key: "",
 			value: ""
 		}]);
-	}, []), L = n((e) => {
-		D((t) => t.filter((t, n) => n !== e));
-	}, []), R = n((e, t, n) => {
-		D((r) => r.map((r, i) => i === e ? {
+	}, []), K = i((e) => {
+		I((t) => t.filter((t, n) => n !== e));
+	}, []), q = i((e, t, n) => {
+		I((r) => r.map((r, i) => i === e ? {
 			...r,
 			[t]: n
 		} : r));
 	}, []);
-	return /* @__PURE__ */ l("div", {
-		className: "space-y-4 pb-8",
+	return /* @__PURE__ */ f("div", {
+		className: "min-w-0 space-y-form-gap",
 		children: [
-			/* @__PURE__ */ l("div", {
-				className: "flex items-center justify-between p-3 rounded-lg border border-border-default bg-bg-surface",
-				children: [/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ f("div", {
+				className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-3",
+				children: [/* @__PURE__ */ d("label", {
+					htmlFor: "drilldown-enable",
 					className: "text-sm font-medium text-text-primary",
-					children: "Enable Drilldown"
-				}), /* @__PURE__ */ c("button", {
+					children: x("bigconsole.widget.drilldown.enableLabel", "Enable Drilldown")
+				}), /* @__PURE__ */ d("button", {
+					id: "drilldown-enable",
 					type: "button",
 					role: "switch",
-					"aria-checked": m,
-					onClick: () => h(!m),
-					className: `
-              relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer border
-              ${m ? "bg-action-primary-bg border-action-primary-bg" : "bg-gray-300 border-gray-400"}
-            `,
-					children: /* @__PURE__ */ c("span", { className: `
-                inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform
-                ${m ? "translate-x-6" : "translate-x-1"}
-              ` })
+					"aria-checked": C,
+					onClick: () => w(!C),
+					className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border motion-safe:transition-colors ${e} ${C ? h : g}`,
+					children: /* @__PURE__ */ d("span", { className: `inline-block h-4 w-4 transform rounded-full motion-safe:transition-transform ${_} ${C ? "translate-x-6" : "translate-x-1"}` })
 				})]
 			}),
-			m && /* @__PURE__ */ l(s, { children: [
-				/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
-					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Target Dashboard"
-				}), /* @__PURE__ */ l("select", {
-					value: g,
-					onChange: (e) => _(e.target.value),
-					disabled: A,
-					className: "w-full px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-					children: [/* @__PURE__ */ c("option", {
+			C && /* @__PURE__ */ f(u, { children: [
+				/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+					htmlFor: "drilldown-target",
+					className: "mb-1 block text-sm font-medium text-text-primary",
+					children: x("bigconsole.widget.drilldown.targetDashboardLabel", "Target Dashboard")
+				}), /* @__PURE__ */ f("select", {
+					id: "drilldown-target",
+					value: T,
+					onChange: (e) => E(e.target.value),
+					disabled: z,
+					className: m,
+					children: [/* @__PURE__ */ d("option", {
 						value: "",
-						children: "Select a dashboard..."
-					}), O.filter((e) => e.id !== t.dashboardId).map((e) => /* @__PURE__ */ c("option", {
+						children: x("bigconsole.widget.drilldown.selectDashboard", "Select a dashboard...")
+					}), L.filter((e) => e.id !== r.dashboardId).map((e) => /* @__PURE__ */ d("option", {
 						value: e.id,
 						children: e.name
 					}, e.id))]
 				})] }),
-				/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ c("label", {
-						className: "block text-sm font-medium text-text-primary mb-1",
-						children: "Navigation Mode"
+				/* @__PURE__ */ f("div", { children: [
+					/* @__PURE__ */ d("p", {
+						className: "mb-1 text-sm font-medium text-text-primary",
+						id: "drilldown-nav-mode-label",
+						children: x("bigconsole.widget.drilldown.navigationModeLabel", "Navigation Mode")
 					}),
-					/* @__PURE__ */ c("div", {
-						className: "flex gap-2",
+					/* @__PURE__ */ d("div", {
+						className: "flex flex-wrap gap-2",
+						role: "group",
+						"aria-labelledby": "drilldown-nav-mode-label",
 						children: [
 							"MODAL",
 							"NEW_TAB",
 							"SAME_WINDOW"
-						].map((e) => /* @__PURE__ */ l("button", {
+						].map((e) => /* @__PURE__ */ f("button", {
 							type: "button",
-							onClick: () => y(e),
-							className: `
-                      flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors
-                      ${v === e ? "bg-action-primary-bg text-white" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"}
-                    `,
+							"aria-pressed": D === e,
+							onClick: () => O(e),
+							className: `min-h-control-md min-w-[7rem] flex-1 rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${D === e ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"}`,
 							children: [
-								e === "MODAL" && "Modal",
-								e === "NEW_TAB" && "New Tab",
-								e === "SAME_WINDOW" && "Same Window"
+								e === "MODAL" && x("bigconsole.widget.drilldown.mode.modal", "Modal"),
+								e === "NEW_TAB" && x("bigconsole.widget.drilldown.mode.newTab", "New Tab"),
+								e === "SAME_WINDOW" && x("bigconsole.widget.drilldown.mode.sameWindow", "Same Window")
 							]
 						}, e))
 					}),
-					/* @__PURE__ */ l("p", {
-						className: "text-xs text-text-tertiary mt-1",
+					/* @__PURE__ */ f("p", {
+						className: "mt-1 text-xs text-text-muted",
 						children: [
-							v === "MODAL" && "Opens target dashboard in a modal overlay",
-							v === "NEW_TAB" && "Opens target dashboard in a new browser tab",
-							v === "SAME_WINDOW" && "Navigates to target dashboard in current window"
+							D === "MODAL" && x("bigconsole.widget.drilldown.modeHelp.modal", "Opens target dashboard in a modal overlay"),
+							D === "NEW_TAB" && x("bigconsole.widget.drilldown.modeHelp.newTab", "Opens target dashboard in a new browser tab"),
+							D === "SAME_WINDOW" && x("bigconsole.widget.drilldown.modeHelp.sameWindow", "Navigates to target dashboard in current window")
 						]
 					})
 				] }),
-				/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ l("div", {
-						className: "flex items-center justify-between mb-2",
-						children: [/* @__PURE__ */ c("label", {
+				/* @__PURE__ */ f("div", { children: [
+					/* @__PURE__ */ f("div", {
+						className: "mb-2 flex flex-wrap items-center justify-between gap-2",
+						children: [/* @__PURE__ */ d("p", {
 							className: "text-sm font-medium text-text-primary",
-							children: "Parameter Mappings"
-						}), /* @__PURE__ */ c("button", {
+							children: x("bigconsole.widget.drilldown.parameterMappingsLabel", "Parameter Mappings")
+						}), /* @__PURE__ */ d("button", {
 							type: "button",
-							onClick: I,
-							className: "text-xs text-action-primary-text hover:underline",
-							children: "+ Add Parameter"
+							onClick: G,
+							className: "rounded-button px-1 text-xs text-text-link hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+							children: x("bigconsole.widget.drilldown.addParameter", "+ Add Parameter")
 						})]
 					}),
-					/* @__PURE__ */ c("div", {
+					/* @__PURE__ */ d("div", {
 						className: "space-y-2",
-						children: E.map((e, t) => /* @__PURE__ */ c("div", {
+						children: F.map((e, t) => /* @__PURE__ */ d("div", {
 							className: "relative",
-							children: /* @__PURE__ */ l("div", {
-								className: "flex gap-2 items-center",
+							children: /* @__PURE__ */ f("div", {
+								className: "flex min-w-0 flex-wrap items-center gap-2",
 								children: [
-									/* @__PURE__ */ c("input", {
+									/* @__PURE__ */ d("input", {
 										type: "text",
 										value: e.key,
-										onChange: (e) => R(t, "key", e.target.value),
-										placeholder: "Parameter name",
-										className: "flex-1 px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg"
+										onChange: (e) => q(t, "key", e.target.value),
+										placeholder: x("bigconsole.widget.drilldown.parameterNamePlaceholder", "Parameter name"),
+										"aria-label": `Parameter ${t + 1} name`,
+										className: `${m} min-w-[7rem] flex-1`
 									}),
-									/* @__PURE__ */ c("span", {
-										className: "text-text-tertiary",
+									/* @__PURE__ */ d("span", {
+										"aria-hidden": "true",
+										className: "text-text-muted",
 										children: "="
 									}),
-									/* @__PURE__ */ l("div", {
-										className: "flex-1 relative",
-										children: [/* @__PURE__ */ c("input", {
+									/* @__PURE__ */ f("div", {
+										className: "relative min-w-[7rem] flex-1",
+										children: [/* @__PURE__ */ d("input", {
 											type: "text",
 											value: e.value,
-											onChange: (e) => R(t, "value", e.target.value),
-											onFocus: () => N(t),
-											onBlur: () => setTimeout(() => N(null), 200),
-											placeholder: "{{row.field}} or static",
-											className: "w-full px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg"
-										}), M === t && P.length > 0 && /* @__PURE__ */ c("div", {
-											className: "absolute z-10 top-full left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-bg-surface border border-border-default rounded-md shadow-lg",
-											children: P.slice(0, 10).map((e) => /* @__PURE__ */ c("button", {
+											onChange: (e) => q(t, "value", e.target.value),
+											onFocus: () => H(t),
+											onBlur: () => setTimeout(() => H(null), 200),
+											placeholder: x("bigconsole.widget.drilldown.parameterValuePlaceholder", "{{row.field}} or static"),
+											"aria-label": `Parameter ${t + 1} value`,
+											className: m
+										}), V === t && U.length > 0 && /* @__PURE__ */ d("div", {
+											className: "absolute left-0 right-0 top-full z-10 mt-1 max-h-40 overflow-y-auto rounded-input border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-2)]",
+											children: U.slice(0, 10).map((e) => /* @__PURE__ */ d("button", {
 												type: "button",
 												onClick: () => {
-													R(t, "value", e), N(null);
+													q(t, "value", e), H(null);
 												},
-												className: "w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-sunken font-mono",
+												className: "w-full px-3 py-1.5 text-left font-mono text-xs text-text-primary 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",
 												children: e
 											}, e))
 										})]
 									}),
-									E.length > 1 && /* @__PURE__ */ c("button", {
+									F.length > 1 && /* @__PURE__ */ d("button", {
 										type: "button",
-										onClick: () => L(t),
-										className: "p-1 text-text-tertiary hover:text-status-error-text",
-										children: /* @__PURE__ */ c("svg", {
-											className: "w-4 h-4",
+										onClick: () => K(t),
+										"aria-label": `Remove parameter ${t + 1}`,
+										className: "rounded-button p-1 text-text-muted hover:text-[var(--color-status-error-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+										children: /* @__PURE__ */ d("svg", {
+											className: "h-icon-sm w-icon-sm",
 											fill: "none",
 											stroke: "currentColor",
 											viewBox: "0 0 24 24",
-											children: /* @__PURE__ */ c("path", {
+											children: /* @__PURE__ */ d("path", {
 												strokeLinecap: "round",
 												strokeLinejoin: "round",
 												strokeWidth: 2,
@@ -249,130 +257,150 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 							})
 						}, t))
 					}),
-					/* @__PURE__ */ l("p", {
-						className: "text-xs text-text-tertiary mt-2",
+					/* @__PURE__ */ f("p", {
+						className: "mt-2 text-xs text-text-muted",
 						children: [
-							"Use ",
-							/* @__PURE__ */ c("code", {
+							x("bigconsole.widget.drilldown.paramHelp.usePrefix", "Use"),
+							" ",
+							/* @__PURE__ */ d("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.field}}"
 							}),
-							" for dynamic values or enter static text.",
-							/* @__PURE__ */ c("br", {}),
-							"Examples: ",
-							/* @__PURE__ */ c("code", {
+							" ",
+							x("bigconsole.widget.drilldown.paramHelp.useSuffix", "for dynamic values or enter static text."),
+							/* @__PURE__ */ d("br", {}),
+							x("bigconsole.widget.drilldown.paramHelp.examples", "Examples:"),
+							" ",
+							/* @__PURE__ */ d("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.category}}"
 							}),
 							",",
 							" ",
-							/* @__PURE__ */ c("code", {
+							/* @__PURE__ */ d("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{item.id}}"
 							}),
 							",",
 							" ",
-							/* @__PURE__ */ c("code", {
+							/* @__PURE__ */ d("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{globals.vars.dateFrom}}"
 							})
 						]
 					})
 				] }),
-				/* @__PURE__ */ l("div", {
-					className: "border-t border-border-default pt-4 mt-4",
-					children: [
-						/* @__PURE__ */ c("h4", {
-							className: "text-sm font-medium text-text-primary mb-3",
-							children: "Advanced Options"
-						}),
-						/* @__PURE__ */ l("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-sunken mb-3",
-							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
-								className: "text-sm text-text-primary",
-								children: "Pass Global Filters"
-							}), /* @__PURE__ */ c("p", {
-								className: "text-xs text-text-tertiary",
-								children: "Include current dashboard filters in drilldown"
-							})] }), /* @__PURE__ */ c("button", {
-								type: "button",
-								role: "switch",
-								"aria-checked": b,
-								onClick: () => x(!b),
-								className: `
-                    relative inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer border
-                    ${b ? "bg-action-primary-bg border-action-primary-bg" : "bg-gray-300 border-gray-400"}
-                  `,
-								children: /* @__PURE__ */ c("span", { className: `
-                      inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform
-                      ${b ? "translate-x-5" : "translate-x-1"}
-                    ` })
-							})]
-						}),
-						/* @__PURE__ */ l("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-sunken mb-3",
-							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
-								className: "text-sm text-text-primary",
-								children: "Max Drilldown Depth"
-							}), /* @__PURE__ */ c("p", {
-								className: "text-xs text-text-tertiary",
-								children: "Limit nested drilldown levels"
-							})] }), /* @__PURE__ */ c("select", {
-								value: S,
-								onChange: (e) => C(Number(e.target.value)),
-								className: "w-16 px-2 py-1 rounded border border-border-default bg-bg-surface text-text-primary text-sm",
-								children: [
-									1,
-									2,
-									3,
-									4,
-									5
-								].map((e) => /* @__PURE__ */ c("option", {
-									value: e,
-									children: e
-								}, e))
-							})]
-						}),
-						v === "SAME_WINDOW" && /* @__PURE__ */ l("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-sunken",
-							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
-								className: "text-sm text-text-primary",
-								children: "Open In"
-							}), /* @__PURE__ */ c("p", {
-								className: "text-xs text-text-tertiary",
-								children: "Tab behavior for navigation"
-							})] }), /* @__PURE__ */ l("div", {
-								className: "flex gap-1",
-								children: [/* @__PURE__ */ c("button", {
-									type: "button",
-									onClick: () => T("same"),
-									className: `
-                        px-2 py-1 rounded text-xs font-medium transition-colors
-                        ${w === "same" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
-                      `,
-									children: "Same Tab"
-								}), /* @__PURE__ */ c("button", {
+				/* @__PURE__ */ d(t, {
+					emphasis: "muted",
+					padding: "compact",
+					headingLevel: 4,
+					title: x("bigconsole.widget.drilldown.advancedOptions", "Advanced Options"),
+					description: "Rarely changed. Defaults suit most drilldowns.",
+					"data-testid": "drilldown-advanced",
+					children: /* @__PURE__ */ f("div", {
+						className: "flex flex-col gap-2",
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
+								children: [/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("label", {
+										htmlFor: "drilldown-pass-filters",
+										className: "text-sm text-text-primary",
+										children: x("bigconsole.widget.drilldown.passGlobalFiltersLabel", "Pass Global Filters")
+									}), /* @__PURE__ */ d("p", {
+										className: "text-xs text-text-muted",
+										children: x("bigconsole.widget.drilldown.passGlobalFiltersHelp", "Include current dashboard filters in drilldown")
+									})]
+								}), /* @__PURE__ */ d("button", {
+									id: "drilldown-pass-filters",
 									type: "button",
-									onClick: () => T("new"),
-									className: `
-                        px-2 py-1 rounded text-xs font-medium transition-colors
-                        ${w === "new" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
-                      `,
-									children: "New Tab"
+									role: "switch",
+									"aria-checked": k,
+									onClick: () => A(!k),
+									className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${k ? h : g}`,
+									children: /* @__PURE__ */ d("span", { className: `inline-block h-3 w-3 transform rounded-full motion-safe:transition-transform ${_} ${k ? "translate-x-5" : "translate-x-1"}` })
+								})]
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
+								children: [/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("label", {
+										htmlFor: "drilldown-max-depth",
+										className: "text-sm text-text-primary",
+										children: x("bigconsole.widget.drilldown.maxDepthLabel", "Max Drilldown Depth")
+									}), /* @__PURE__ */ d("p", {
+										className: "text-xs text-text-muted",
+										children: x("bigconsole.widget.drilldown.maxDepthHelp", "Limit nested drilldown levels")
+									})]
+								}), /* @__PURE__ */ d("select", {
+									id: "drilldown-max-depth",
+									value: j,
+									onChange: (e) => M(Number(e.target.value)),
+									className: `${p} w-auto min-w-[4rem] shrink-0 px-2`,
+									children: [
+										1,
+										2,
+										3,
+										4,
+										5
+									].map((e) => /* @__PURE__ */ d("option", {
+										value: e,
+										children: e
+									}, e))
 								})]
-							})]
-						})
-					]
+							}),
+							D === "SAME_WINDOW" && /* @__PURE__ */ f("div", {
+								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
+								children: [/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("p", {
+										className: "text-sm text-text-primary",
+										id: "drilldown-open-in-label",
+										children: x("bigconsole.widget.drilldown.openInLabel", "Open In")
+									}), /* @__PURE__ */ d("p", {
+										className: "text-xs text-text-muted",
+										children: x("bigconsole.widget.drilldown.openInHelp", "Tab behavior for navigation")
+									})]
+								}), /* @__PURE__ */ f("div", {
+									className: "flex shrink-0 flex-wrap gap-1",
+									role: "group",
+									"aria-labelledby": "drilldown-open-in-label",
+									children: [/* @__PURE__ */ d("button", {
+										type: "button",
+										"aria-pressed": N === "same",
+										onClick: () => P("same"),
+										className: `min-h-control-md rounded-button px-2 text-xs font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${N === "same" ? "bg-action-primary-bg text-action-primary-text" : "border border-[var(--color-border-subtle)] bg-bg-surface text-text-secondary hover:text-text-primary"}`,
+										children: x("bigconsole.widget.drilldown.openIn.sameTab", "Same Tab")
+									}), /* @__PURE__ */ d("button", {
+										type: "button",
+										"aria-pressed": N === "new",
+										onClick: () => P("new"),
+										className: `min-h-control-md rounded-button px-2 text-xs font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${N === "new" ? "bg-action-primary-bg text-action-primary-text" : "border border-[var(--color-border-subtle)] bg-bg-surface text-text-secondary hover:text-text-primary"}`,
+										children: x("bigconsole.widget.drilldown.openIn.newTab", "New Tab")
+									})]
+								})]
+							})
+						]
+					})
 				})
 			] }),
-			!m && t.drilldown?.id && /* @__PURE__ */ c("div", {
-				className: "p-2 rounded bg-amber-100 text-amber-800 text-sm",
-				children: "Drilldown will be removed when you save changes."
+			!C && r.drilldown?.id && /* @__PURE__ */ d(t, {
+				tone: "warning",
+				padding: "compact",
+				headingLevel: 4,
+				title: "Drilldown will be removed",
+				"data-testid": "drilldown-removal-notice",
+				children: /* @__PURE__ */ d("p", {
+					className: "text-xs text-text-secondary",
+					children: x("bigconsole.widget.drilldown.removalWarning", "Drilldown will be removed when you save changes.")
+				})
 			})
 		]
 	});
 });
 //#endregion
-export { d as default };
+export { y as default };
 
 //# sourceMappingURL=DrilldownConfigPanel.js.map