@bluemarble/bi 0.2.0 → 0.3.0

package/dist/{DashboardDevtools-5wh3brAT.js → DashboardDevtools-C8AXaFgw.js}

@@ -1,9 +1,16 @@
-import { A as referencedTables, D as modelEdges, E as measureHome, O as parseColumnRef, S as isAggregate, _ as toModelCode, a as chartOfType, b as VALUE_FORMATS, c as filterReferences, d as layoutModelWarnings, i as chartColumns, m as canonicalJson, n as CANVAS_PRESETS, o as chartReferences, p as validateLayout, r as FILTER_FIELDS, t as BUILTIN_CHART_TYPES, u as layoutFileContent, v as AGGREGATIONS, w as validateModel, y as AGGREGATION_LABEL } from "./layout-DvHS8XFz.js";
+import { A as modelEdges, C as VALUE_FORMATS, D as validateModel, N as referencedTables, S as AGGREGATION_LABEL, T as isAggregate, _ as canonicalJson, a as FILTER_FIELDS, b as toModelCode, c as chartOfType, d as filterReferences, g as validateLayout, i as CARD_FIELDS, j as parseColumnRef, k as measureHome, l as chartReferences, m as layoutModelWarnings, n as CANVAS_PRESETS, p as layoutFileContent, r as CARDS_FIELDS, s as chartColumns, t as BUILTIN_CHART_TYPES, x as AGGREGATIONS } from "./layout-DTR4vI-I.js";
 import { n as diffRows } from "./compare-DloZhg1T.js";
-import { a as useDashboard, c as layoutItemKey, l as parseLayoutItemKey, n as INSPECT_ATTRIBUTE, o as errorMessage, s as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-DN77UDVM.js";
-import { Alert, Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControlLabel, IconButton, List, ListItemButton, Menu, MenuItem, MenuList, Paper, Popper, Portal, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tabs, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography, createTheme } from "@mui/material";
+import { a as useDashboard, c as layoutItemKey, l as parseLayoutItemKey, n as INSPECT_ATTRIBUTE, o as errorMessage, s as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-CBILYbZ1.js";
+import { Alert, Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControlLabel, IconButton, List, ListItemButton, Menu, MenuItem, MenuList, Paper, Popper, Portal, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Tabs, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography, createTheme } from "@mui/material";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region \0rolldown/runtime.js
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
+//#endregion
 //#region src/devtools/sqlHighlight.tsx
 const KEYWORDS$1 = new Set(`SELECT FROM WHERE AND OR NOT IN IS NULL JOIN LEFT RIGHT INNER OUTER CROSS ON AS GROUP BY ORDER
   HAVING LIMIT OFFSET UNION ALL DISTINCT CASE WHEN THEN ELSE END WITH ASC DESC BETWEEN LIKE EXISTS
@@ -91,9 +98,13 @@ function StatusDot({ status }) {
 		}
 	});
 }
-async function copyText(text) {
+/**
+* Copia para a área de transferência. Com o devtools em janela separada, o clipboard tem que ser o
+* dela (o da página não está em foco e recusa): passe o elemento clicado.
+*/
+async function copyText(text, from) {
 	try {
-		await navigator.clipboard.writeText(text);
+		await (from?.ownerDocument.defaultView ?? window).navigator.clipboard.writeText(text);
 		return true;
 	} catch {
 		return false;
@@ -103,8 +114,8 @@ function CopyButton({ text, label = "Copiar" }) {
 	const [copied, setCopied] = useState(false);
 	return /* @__PURE__ */ jsx(Button, {
 		size: "small",
-		onClick: async () => {
-			if (await copyText(text)) {
+		onClick: async (event) => {
+			if (await copyText(text, event.currentTarget)) {
 				setCopied(true);
 				setTimeout(() => setCopied(false), 1200);
 			}
@@ -112,9 +123,33 @@ function CopyButton({ text, label = "Copiar" }) {
 		children: copied ? "Copiado!" : label
 	});
 }
-function Section({ title, actions, children }) {
+const COLLAPSED_KEY = "bm-dashboard-devtools:collapsed";
+function loadCollapsed() {
+	try {
+		const saved = JSON.parse(localStorage.getItem(COLLAPSED_KEY) ?? "[]");
+		return Array.isArray(saved) ? saved : [];
+	} catch {
+		return [];
+	}
+}
+/** Seção recolhida (lembrada entre recargas, pela chave). */
+function useCollapsed(key) {
+	const [collapsed, setCollapsed] = useState(() => !!key && loadCollapsed().includes(key));
+	const toggle = () => {
+		if (!key) return;
+		const next = !collapsed;
+		setCollapsed(next);
+		try {
+			const others = loadCollapsed().filter((item) => item !== key);
+			localStorage.setItem(COLLAPSED_KEY, JSON.stringify(next ? [...others, key] : others));
+		} catch {}
+	};
+	return [collapsed, toggle];
+}
+function Section({ title, actions, collapseKey, children }) {
+	const [collapsed, toggle] = useCollapsed(collapseKey);
 	return /* @__PURE__ */ jsxs(Box, {
-		sx: { mb: 2 },
+		sx: { mb: collapsed ? .5 : 2 },
 		children: [/* @__PURE__ */ jsxs(Box, {
 			sx: {
 				display: "flex",
@@ -123,15 +158,43 @@ function Section({ title, actions, children }) {
 				mb: .5,
 				minHeight: 30
 			},
-			children: [/* @__PURE__ */ jsx(Typography, {
+			children: [/* @__PURE__ */ jsxs(Typography, {
 				variant: "overline",
+				component: collapseKey ? "button" : "span",
+				...collapseKey && {
+					type: "button",
+					onClick: toggle,
+					"aria-expanded": !collapsed,
+					title: collapsed ? "Expandir" : "Recolher"
+				},
 				sx: {
 					color: "text.secondary",
 					lineHeight: 1.5,
-					fontWeight: 700
+					fontWeight: 700,
+					...collapseKey && {
+						display: "flex",
+						alignItems: "center",
+						gap: .5,
+						p: 0,
+						border: 0,
+						bgcolor: "transparent",
+						cursor: "pointer",
+						textAlign: "left",
+						"&:hover": { color: "text.primary" }
+					}
 				},
-				children: title
-			}), /* @__PURE__ */ jsx(Box, {
+				children: [collapseKey && /* @__PURE__ */ jsx(Box, {
+					component: "span",
+					"aria-hidden": true,
+					sx: {
+						display: "inline-block",
+						fontSize: 9,
+						transition: "transform .15s",
+						transform: collapsed ? "rotate(-90deg)" : "none"
+					},
+					children: "▼"
+				}), title]
+			}), !collapsed && /* @__PURE__ */ jsx(Box, {
 				sx: {
 					ml: "auto",
 					display: "flex",
@@ -139,7 +202,7 @@ function Section({ title, actions, children }) {
 				},
 				children: actions
 			})]
-		}), children]
+		}), !collapsed && children]
 	});
 }
 function CodeBlock({ code, maxHeight = 260, sql = false }) {
@@ -181,7 +244,16 @@ function inlineParams(sql, params) {
 	});
 }
 const MAX_ROWS = 500;
+/** Ordena linhas de resultado por uma coluna; `null` sempre no fim. */
+function compareCells(a, b, { column, direction }) {
+	const [x, y] = [a[column], b[column]];
+	if (x === null || x === void 0) return y === null || y === void 0 ? 0 : 1;
+	if (y === null || y === void 0) return -1;
+	const order = typeof x === "number" && typeof y === "number" ? x - y : String(x).localeCompare(String(y), "pt-BR", { numeric: true });
+	return direction === "asc" ? order : -order;
+}
 function ResultTable({ rows, maxHeight = 320 }) {
+	const [sort, setSort] = useState(null);
 	if (!rows.length) return /* @__PURE__ */ jsx(Typography, {
 		sx: {
 			color: "text.secondary",
@@ -190,6 +262,14 @@ function ResultTable({ rows, maxHeight = 320 }) {
 		children: "Nenhuma linha."
 	});
 	const columns = Object.keys(rows[0]);
+	const sorted = sort ? [...rows].sort((a, b) => compareCells(a, b, sort)) : rows;
+	const toggleSort = (column) => setSort((current) => current?.column !== column ? {
+		column,
+		direction: "asc"
+	} : current.direction === "asc" ? {
+		column,
+		direction: "desc"
+	} : null);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableContainer, {
 		sx: {
 			maxHeight,
@@ -201,12 +281,19 @@ function ResultTable({ rows, maxHeight = 320 }) {
 			size: "small",
 			stickyHeader: true,
 			children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+				sortDirection: sort?.column === column ? sort.direction : false,
 				sx: {
 					fontFamily: MONO,
-					fontWeight: 700
+					fontWeight: 700,
+					whiteSpace: "nowrap"
 				},
-				children: column
-			}, column)) }) }), /* @__PURE__ */ jsx(TableBody, { children: rows.slice(0, MAX_ROWS).map((row, index) => /* @__PURE__ */ jsx(TableRow, {
+				children: /* @__PURE__ */ jsx(TableSortLabel, {
+					active: sort?.column === column,
+					direction: sort?.column === column ? sort.direction : "asc",
+					onClick: () => toggleSort(column),
+					children: column
+				})
+			}, column)) }) }), /* @__PURE__ */ jsx(TableBody, { children: sorted.slice(0, MAX_ROWS).map((row, index) => /* @__PURE__ */ jsx(TableRow, {
 				hover: true,
 				children: columns.map((column) => /* @__PURE__ */ jsx(TableCell, {
 					align: typeof row[column] === "number" ? "right" : "left",
@@ -508,6 +595,483 @@ function FiltersPanel({ devtools }) {
 	});
 }
 //#endregion
+//#region node_modules/react-dom/cjs/react-dom.production.js
+/**
+* @license React
+* react-dom.production.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_dom_production = /* @__PURE__ */ __commonJSMin(((exports) => {
+	var React = __require("react");
+	function formatProdErrorMessage(code) {
+		var url = "https://react.dev/errors/" + code;
+		if (1 < arguments.length) {
+			url += "?args[]=" + encodeURIComponent(arguments[1]);
+			for (var i = 2; i < arguments.length; i++) url += "&args[]=" + encodeURIComponent(arguments[i]);
+		}
+		return "Minified React error #" + code + "; visit " + url + " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
+	}
+	function noop() {}
+	var Internals = {
+		d: {
+			f: noop,
+			r: function() {
+				throw Error(formatProdErrorMessage(522));
+			},
+			D: noop,
+			C: noop,
+			L: noop,
+			m: noop,
+			X: noop,
+			S: noop,
+			M: noop
+		},
+		p: 0,
+		findDOMNode: null
+	};
+	var REACT_PORTAL_TYPE = Symbol.for("react.portal");
+	var REACT_RECOVERABLE_TYPE = Symbol.for("react.recoverable");
+	var REACT_OPTIMISTIC_KEY = Symbol.for("react.optimistic_key");
+	function createPortal$1(children, containerInfo, implementation) {
+		var key = 3 < arguments.length && void 0 !== arguments[3] ? arguments[3] : null;
+		return {
+			$$typeof: REACT_PORTAL_TYPE,
+			key: null == key ? null : key === REACT_OPTIMISTIC_KEY ? REACT_OPTIMISTIC_KEY : "" + key,
+			children,
+			containerInfo,
+			implementation
+		};
+	}
+	var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+	function getCrossOriginStringAs(as, input) {
+		if ("font" === as) return "";
+		if ("string" === typeof input) return "use-credentials" === input ? input : "";
+	}
+	exports.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = Internals;
+	exports.browser = function(reason) {
+		return {
+			$$typeof: REACT_RECOVERABLE_TYPE,
+			_reason: reason
+		};
+	};
+	exports.createPortal = function(children, container) {
+		var key = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : null;
+		if (!container || 1 !== container.nodeType && 9 !== container.nodeType && 11 !== container.nodeType) throw Error(formatProdErrorMessage(299));
+		return createPortal$1(children, container, null, key);
+	};
+	exports.flushSync = function(fn) {
+		var previousTransition = ReactSharedInternals.T, previousUpdatePriority = Internals.p;
+		try {
+			if (ReactSharedInternals.T = null, Internals.p = 2, fn) return fn();
+		} finally {
+			ReactSharedInternals.T = previousTransition, Internals.p = previousUpdatePriority, Internals.d.f();
+		}
+	};
+	exports.preconnect = function(href, options) {
+		"string" === typeof href && (options ? (options = options.crossOrigin, options = "string" === typeof options ? "use-credentials" === options ? options : "" : void 0) : options = null, Internals.d.C(href, options));
+	};
+	exports.prefetchDNS = function(href) {
+		"string" === typeof href && Internals.d.D(href);
+	};
+	exports.preinit = function(href, options) {
+		if ("string" === typeof href && options && "string" === typeof options.as) {
+			var as = options.as, crossOrigin = getCrossOriginStringAs(as, options.crossOrigin), integrity = "string" === typeof options.integrity ? options.integrity : void 0, fetchPriority = "string" === typeof options.fetchPriority ? options.fetchPriority : void 0;
+			"style" === as ? Internals.d.S(href, "string" === typeof options.precedence ? options.precedence : void 0, {
+				crossOrigin,
+				integrity,
+				fetchPriority
+			}) : "script" === as && Internals.d.X(href, {
+				crossOrigin,
+				integrity,
+				fetchPriority,
+				nonce: "string" === typeof options.nonce ? options.nonce : void 0
+			});
+		}
+	};
+	exports.preinitModule = function(href, options) {
+		if ("string" === typeof href) if ("object" === typeof options && null !== options) {
+			if (null == options.as || "script" === options.as) {
+				var crossOrigin = getCrossOriginStringAs(options.as, options.crossOrigin);
+				Internals.d.M(href, {
+					crossOrigin,
+					integrity: "string" === typeof options.integrity ? options.integrity : void 0,
+					nonce: "string" === typeof options.nonce ? options.nonce : void 0,
+					fetchPriority: "string" === typeof options.fetchPriority ? options.fetchPriority : void 0
+				});
+			}
+		} else options ?? Internals.d.M(href);
+	};
+	exports.preload = function(href, options) {
+		if ("string" === typeof href && "object" === typeof options && null !== options && "string" === typeof options.as) {
+			var as = options.as, crossOrigin = getCrossOriginStringAs(as, options.crossOrigin);
+			Internals.d.L(href, as, {
+				crossOrigin,
+				integrity: "string" === typeof options.integrity ? options.integrity : void 0,
+				nonce: "string" === typeof options.nonce ? options.nonce : void 0,
+				type: "string" === typeof options.type ? options.type : void 0,
+				fetchPriority: "string" === typeof options.fetchPriority ? options.fetchPriority : void 0,
+				referrerPolicy: "string" === typeof options.referrerPolicy ? options.referrerPolicy : void 0,
+				imageSrcSet: "string" === typeof options.imageSrcSet ? options.imageSrcSet : void 0,
+				imageSizes: "string" === typeof options.imageSizes ? options.imageSizes : void 0,
+				media: "string" === typeof options.media ? options.media : void 0
+			});
+		}
+	};
+	exports.preloadModule = function(href, options) {
+		if ("string" === typeof href) if (options) {
+			var crossOrigin = getCrossOriginStringAs(options.as, options.crossOrigin);
+			Internals.d.m(href, {
+				as: "string" === typeof options.as && "script" !== options.as ? options.as : void 0,
+				crossOrigin,
+				integrity: "string" === typeof options.integrity ? options.integrity : void 0,
+				nonce: "string" === typeof options.nonce ? options.nonce : void 0,
+				fetchPriority: "string" === typeof options.fetchPriority ? options.fetchPriority : void 0
+			});
+		} else Internals.d.m(href);
+	};
+	exports.requestFormReset = function(form) {
+		Internals.d.r(form);
+	};
+	exports.unstable_batchedUpdates = function(fn, a) {
+		return fn(a);
+	};
+	exports.useFormState = function(action, initialState, permalink) {
+		return ReactSharedInternals.H.useFormState(action, initialState, permalink);
+	};
+	exports.useFormStatus = function() {
+		return ReactSharedInternals.H.useHostTransitionStatus();
+	};
+	exports.version = "19.3.0";
+}));
+//#endregion
+//#region node_modules/react-dom/cjs/react-dom.development.js
+/**
+* @license React
+* react-dom.development.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_dom_development = /* @__PURE__ */ __commonJSMin(((exports) => {
+	"production" !== process.env.NODE_ENV && (function() {
+		function noop() {}
+		function testStringCoercion(value) {
+			return "" + value;
+		}
+		function createPortal$1(children, containerInfo, implementation) {
+			var key = 3 < arguments.length && void 0 !== arguments[3] ? arguments[3] : null;
+			if (null == key) key = null;
+			else if (key === REACT_OPTIMISTIC_KEY) key = REACT_OPTIMISTIC_KEY;
+			else {
+				try {
+					testStringCoercion(key);
+					var JSCompiler_inline_result = !1;
+				} catch (e) {
+					JSCompiler_inline_result = !0;
+				}
+				JSCompiler_inline_result && (console.error("The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", "function" === typeof Symbol && Symbol.toStringTag && key[Symbol.toStringTag] || key.constructor.name || "Object"), testStringCoercion(key));
+				key = "" + key;
+			}
+			return {
+				$$typeof: REACT_PORTAL_TYPE,
+				key,
+				children,
+				containerInfo,
+				implementation
+			};
+		}
+		function getCrossOriginStringAs(as, input) {
+			if ("font" === as) return "";
+			if ("string" === typeof input) return "use-credentials" === input ? input : "";
+		}
+		function getValueDescriptorExpectingObjectForWarning(thing) {
+			return null === thing ? "`null`" : void 0 === thing ? "`undefined`" : "" === thing ? "an empty string" : "something with type \"" + typeof thing + "\"";
+		}
+		function getValueDescriptorExpectingEnumForWarning(thing) {
+			return null === thing ? "`null`" : void 0 === thing ? "`undefined`" : "" === thing ? "an empty string" : "string" === typeof thing ? JSON.stringify(thing) : "number" === typeof thing ? "`" + thing + "`" : "something with type \"" + typeof thing + "\"";
+		}
+		function resolveDispatcher() {
+			var dispatcher = ReactSharedInternals.H;
+			null === dispatcher && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.");
+			return dispatcher;
+		}
+		"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+		var React = __require("react"), Internals = {
+			d: {
+				f: noop,
+				r: function() {
+					throw Error("Invalid form element. requestFormReset must be passed a form that was rendered by React.");
+				},
+				D: noop,
+				C: noop,
+				L: noop,
+				m: noop,
+				X: noop,
+				S: noop,
+				M: noop
+			},
+			p: 0,
+			findDOMNode: null
+		}, REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_RECOVERABLE_TYPE = Symbol.for("react.recoverable"), REACT_OPTIMISTIC_KEY = Symbol.for("react.optimistic_key"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+		"function" === typeof Map && null != Map.prototype && "function" === typeof Map.prototype.forEach && "function" === typeof Set && null != Set.prototype && "function" === typeof Set.prototype.clear && "function" === typeof Set.prototype.forEach || console.error("React depends on Map and Set built-in types. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills");
+		exports.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = Internals;
+		exports.browser = function(reason) {
+			return {
+				$$typeof: REACT_RECOVERABLE_TYPE,
+				_reason: reason
+			};
+		};
+		exports.createPortal = function(children, container) {
+			var key = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : null;
+			if (!container || 1 !== container.nodeType && 9 !== container.nodeType && 11 !== container.nodeType) throw Error("Target container is not a DOM element.");
+			return createPortal$1(children, container, null, key);
+		};
+		exports.flushSync = function(fn) {
+			var previousTransition = ReactSharedInternals.T, previousUpdatePriority = Internals.p;
+			try {
+				if (ReactSharedInternals.T = null, Internals.p = 2, fn) return fn();
+			} finally {
+				ReactSharedInternals.T = previousTransition, Internals.p = previousUpdatePriority, Internals.d.f() && console.error("flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.");
+			}
+		};
+		exports.preconnect = function(href, options) {
+			"string" === typeof href && href ? null != options && "object" !== typeof options ? console.error("ReactDOM.preconnect(): Expected the `options` argument (second) to be an object but encountered %s instead. The only supported option at this time is `crossOrigin` which accepts a string.", getValueDescriptorExpectingEnumForWarning(options)) : null != options && "string" !== typeof options.crossOrigin && console.error("ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered %s instead. Try removing this option or passing a string value instead.", getValueDescriptorExpectingObjectForWarning(options.crossOrigin)) : console.error("ReactDOM.preconnect(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.", getValueDescriptorExpectingObjectForWarning(href));
+			"string" === typeof href && (options ? (options = options.crossOrigin, options = "string" === typeof options ? "use-credentials" === options ? options : "" : void 0) : options = null, Internals.d.C(href, options));
+		};
+		exports.prefetchDNS = function(href) {
+			if ("string" !== typeof href || !href) console.error("ReactDOM.prefetchDNS(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.", getValueDescriptorExpectingObjectForWarning(href));
+			else if (1 < arguments.length) {
+				var options = arguments[1];
+				"object" === typeof options && options.hasOwnProperty("crossOrigin") ? console.error("ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.", getValueDescriptorExpectingEnumForWarning(options)) : console.error("ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.", getValueDescriptorExpectingEnumForWarning(options));
+			}
+			"string" === typeof href && Internals.d.D(href);
+		};
+		exports.preinit = function(href, options) {
+			"string" === typeof href && href ? null == options || "object" !== typeof options ? console.error("ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered %s instead.", getValueDescriptorExpectingEnumForWarning(options)) : "style" !== options.as && "script" !== options.as && console.error("ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered %s instead. Valid values for `as` are \"style\" and \"script\".", getValueDescriptorExpectingEnumForWarning(options.as)) : console.error("ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.", getValueDescriptorExpectingObjectForWarning(href));
+			if ("string" === typeof href && options && "string" === typeof options.as) {
+				var as = options.as, crossOrigin = getCrossOriginStringAs(as, options.crossOrigin), integrity = "string" === typeof options.integrity ? options.integrity : void 0, fetchPriority = "string" === typeof options.fetchPriority ? options.fetchPriority : void 0;
+				"style" === as ? Internals.d.S(href, "string" === typeof options.precedence ? options.precedence : void 0, {
+					crossOrigin,
+					integrity,
+					fetchPriority
+				}) : "script" === as && Internals.d.X(href, {
+					crossOrigin,
+					integrity,
+					fetchPriority,
+					nonce: "string" === typeof options.nonce ? options.nonce : void 0
+				});
+			}
+		};
+		exports.preinitModule = function(href, options) {
+			var encountered = "";
+			"string" === typeof href && href || (encountered += " The `href` argument encountered was " + getValueDescriptorExpectingObjectForWarning(href) + ".");
+			void 0 !== options && "object" !== typeof options ? encountered += " The `options` argument encountered was " + getValueDescriptorExpectingObjectForWarning(options) + "." : options && "as" in options && "script" !== options.as && (encountered += " The `as` option encountered was " + getValueDescriptorExpectingEnumForWarning(options.as) + ".");
+			if (encountered) console.error("ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property.%s", encountered);
+			else switch (encountered = options && "string" === typeof options.as ? options.as : "script", encountered) {
+				case "script": break;
+				default: encountered = getValueDescriptorExpectingEnumForWarning(encountered), console.error("ReactDOM.preinitModule(): Currently the only supported \"as\" type for this function is \"script\" but received \"%s\" instead. This warning was generated for `href` \"%s\". In the future other module types will be supported, aligning with the import-attributes proposal. Learn more here: (https://github.com/tc39/proposal-import-attributes)", encountered, href);
+			}
+			if ("string" === typeof href) if ("object" === typeof options && null !== options) {
+				if (null == options.as || "script" === options.as) encountered = getCrossOriginStringAs(options.as, options.crossOrigin), Internals.d.M(href, {
+					crossOrigin: encountered,
+					integrity: "string" === typeof options.integrity ? options.integrity : void 0,
+					nonce: "string" === typeof options.nonce ? options.nonce : void 0,
+					fetchPriority: "string" === typeof options.fetchPriority ? options.fetchPriority : void 0
+				});
+			} else options ?? Internals.d.M(href);
+		};
+		exports.preload = function(href, options) {
+			var encountered = "";
+			"string" === typeof href && href || (encountered += " The `href` argument encountered was " + getValueDescriptorExpectingObjectForWarning(href) + ".");
+			null == options || "object" !== typeof options ? encountered += " The `options` argument encountered was " + getValueDescriptorExpectingObjectForWarning(options) + "." : "string" === typeof options.as && options.as || (encountered += " The `as` option encountered was " + getValueDescriptorExpectingObjectForWarning(options.as) + ".");
+			encountered && console.error("ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel=\"preload\" as=\"...\" />` tag.%s", encountered);
+			if ("string" === typeof href && "object" === typeof options && null !== options && "string" === typeof options.as) {
+				encountered = options.as;
+				var crossOrigin = getCrossOriginStringAs(encountered, options.crossOrigin);
+				Internals.d.L(href, encountered, {
+					crossOrigin,
+					integrity: "string" === typeof options.integrity ? options.integrity : void 0,
+					nonce: "string" === typeof options.nonce ? options.nonce : void 0,
+					type: "string" === typeof options.type ? options.type : void 0,
+					fetchPriority: "string" === typeof options.fetchPriority ? options.fetchPriority : void 0,
+					referrerPolicy: "string" === typeof options.referrerPolicy ? options.referrerPolicy : void 0,
+					imageSrcSet: "string" === typeof options.imageSrcSet ? options.imageSrcSet : void 0,
+					imageSizes: "string" === typeof options.imageSizes ? options.imageSizes : void 0,
+					media: "string" === typeof options.media ? options.media : void 0
+				});
+			}
+		};
+		exports.preloadModule = function(href, options) {
+			var encountered = "";
+			"string" === typeof href && href || (encountered += " The `href` argument encountered was " + getValueDescriptorExpectingObjectForWarning(href) + ".");
+			void 0 !== options && "object" !== typeof options ? encountered += " The `options` argument encountered was " + getValueDescriptorExpectingObjectForWarning(options) + "." : options && "as" in options && "string" !== typeof options.as && (encountered += " The `as` option encountered was " + getValueDescriptorExpectingObjectForWarning(options.as) + ".");
+			encountered && console.error("ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel=\"modulepreload\" as=\"...\" />` tag.%s", encountered);
+			"string" === typeof href && (options ? (encountered = getCrossOriginStringAs(options.as, options.crossOrigin), Internals.d.m(href, {
+				as: "string" === typeof options.as && "script" !== options.as ? options.as : void 0,
+				crossOrigin: encountered,
+				integrity: "string" === typeof options.integrity ? options.integrity : void 0,
+				nonce: "string" === typeof options.nonce ? options.nonce : void 0,
+				fetchPriority: "string" === typeof options.fetchPriority ? options.fetchPriority : void 0
+			})) : Internals.d.m(href));
+		};
+		exports.requestFormReset = function(form) {
+			Internals.d.r(form);
+		};
+		exports.unstable_batchedUpdates = function(fn, a) {
+			return fn(a);
+		};
+		exports.useFormState = function(action, initialState, permalink) {
+			return resolveDispatcher().useFormState(action, initialState, permalink);
+		};
+		exports.useFormStatus = function() {
+			return resolveDispatcher().useHostTransitionStatus();
+		};
+		exports.version = "19.3.0";
+		"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+	})();
+}));
+//#endregion
+//#region src/devtools/DevtoolsWindow.tsx
+var import_react_dom = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
+	function checkDCE() {
+		if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") return;
+		if (process.env.NODE_ENV !== "production") throw new Error("^_^");
+		try {
+			__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+		} catch (err) {
+			console.error(err);
+		}
+	}
+	if (process.env.NODE_ENV === "production") {
+		checkDCE();
+		module.exports = require_react_dom_production();
+	} else module.exports = require_react_dom_development();
+})))();
+/**
+* Devtools numa janela separada do navegador (popup), para usar com a página em tela cheia ou em
+* outro monitor. O painel continua sendo renderizado pela árvore React da página (mesmo contexto,
+* mesmo store), só que via portal no `document` do popup:
+*
+* - os estilos do emotion/MUI vão para o `<head>` da página; aqui eles são espelhados no popup;
+* - menus, tooltips e diálogos do MUI montam no `body` da página por padrão: o tema da janela
+*   aponta o `container` deles para o popup.
+*
+* Recarregar a página derruba o vínculo (o popup é de outra árvore): o popup avisa e o botão do
+* devtools na página reconecta (abrir popup exige um clique, o navegador bloqueia sem gesto).
+*/
+const WINDOW_NAME = "bm-bi-devtools";
+/** Abre (ou reaproveita, se ainda estiver aberta) a janela do devtools. `null` = bloqueada. */
+function openDevtoolsWindow() {
+	const width = Math.min(1100, window.screen.availWidth);
+	const height = Math.min(720, window.screen.availHeight);
+	return window.open("", WINDOW_NAME, `popup,width=${width},height=${height}`);
+}
+const isStyleNode = (node) => node instanceof HTMLStyleElement || node instanceof HTMLLinkElement && node.rel === "stylesheet";
+/** Cópia de um `<style>`/`<link>`; estilo inserido por `insertRule` (sem texto) vai pelas regras. */
+function cloneStyle(node, target) {
+	const clone = target.importNode(node, true);
+	if (node instanceof HTMLStyleElement && !node.textContent && node.sheet?.cssRules.length) clone.textContent = [...node.sheet.cssRules].map((rule) => rule.cssText).join("\n");
+	return clone;
+}
+/** Copia os estilos da página para o popup e acompanha os que entrarem/saírem depois. */
+function mirrorStyles(source, target) {
+	const clones = /* @__PURE__ */ new Map();
+	const add = (node) => {
+		if (!isStyleNode(node) || clones.has(node)) return;
+		const clone = cloneStyle(node, target);
+		clones.set(node, clone);
+		target.head.appendChild(clone);
+	};
+	for (const node of source.head.querySelectorAll("style, link[rel=\"stylesheet\"]")) add(node);
+	const observer = new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			if (mutation.type === "characterData" || mutation.target !== source.head) {
+				const style = (mutation.target instanceof Element ? mutation.target : mutation.target.parentElement)?.closest("style");
+				const clone = style && clones.get(style);
+				if (style && clone) {
+					const next = cloneStyle(style, target);
+					target.head.replaceChild(next, clone);
+					clones.set(style, next);
+				}
+				continue;
+			}
+			for (const node of mutation.addedNodes) add(node);
+			for (const node of mutation.removedNodes) {
+				clones.get(node)?.parentNode?.removeChild(clones.get(node));
+				clones.delete(node);
+			}
+		}
+	});
+	observer.observe(source.head, {
+		childList: true,
+		subtree: true,
+		characterData: true
+	});
+	return () => observer.disconnect();
+}
+/** Tema com os portais do MUI (menus, tooltips, diálogos) dentro do popup. */
+function windowTheme(base, container) {
+	return createTheme(base, { components: {
+		MuiModal: { defaultProps: { container } },
+		MuiPopover: { defaultProps: { container } },
+		MuiPopper: { defaultProps: { container } },
+		MuiDialog: { defaultProps: { container } },
+		MuiMenu: { defaultProps: { container } }
+	} });
+}
+function DevtoolsWindow({ popup, title, theme, onClosed, children }) {
+	const [root, setRoot] = useState(null);
+	const onClosedRef = useRef(onClosed);
+	onClosedRef.current = onClosed;
+	useEffect(() => {
+		const doc = popup.document;
+		doc.title = title;
+		doc.head.replaceChildren();
+		doc.body.replaceChildren();
+		const meta = doc.createElement("meta");
+		meta.setAttribute("charset", "utf-8");
+		doc.head.appendChild(meta);
+		const base = doc.createElement("style");
+		base.textContent = `html, body { height: 100%; margin: 0; background: ${theme.palette.background.paper}; color-scheme: dark; } body { font-family: ${theme.typography.fontFamily}; } #${WINDOW_NAME} { height: 100%; display: flex; flex-direction: column; }`;
+		doc.head.appendChild(base);
+		const container = doc.createElement("div");
+		container.id = WINDOW_NAME;
+		doc.body.appendChild(container);
+		const stopMirror = mirrorStyles(document, doc);
+		setRoot(container);
+		const poll = setInterval(() => {
+			if (popup.closed) onClosedRef.current();
+		}, 400);
+		const onPageHide = () => {
+			stopMirror();
+			doc.body.innerHTML = `<p style="font: 14px sans-serif; color: #ccc; padding: 24px">A página do dashboard recarregou. Clique no botão <b style="color: #F58220">◆ BI</b> da página para reconectar o devtools a esta janela.</p>`;
+		};
+		window.addEventListener("pagehide", onPageHide);
+		return () => {
+			clearInterval(poll);
+			window.removeEventListener("pagehide", onPageHide);
+			stopMirror();
+			setRoot(null);
+		};
+	}, [
+		popup,
+		title,
+		theme
+	]);
+	const localTheme = useMemo(() => root && windowTheme(theme, root), [theme, root]);
+	if (!root || !localTheme) return null;
+	return (0, import_react_dom.createPortal)(/* @__PURE__ */ jsx(ThemeProvider, {
+		theme: localTheme,
+		children
+	}), root);
+}
+//#endregion
 //#region src/devtools/Inspector.tsx
 /**
 * Liga componente da página <-> consulta do devtools. Os componentes marcam o elemento raiz com
@@ -676,7 +1240,7 @@ function useWidth() {
 	const [width, setWidth] = useState(Number.POSITIVE_INFINITY);
 	useEffect(() => {
 		if (!element) return;
-		const observer = new ResizeObserver(([entry]) => entry && setWidth(entry.contentRect.width));
+		const observer = new ((element.ownerDocument.defaultView?.ResizeObserver) ?? ResizeObserver)(([entry]) => entry && setWidth(entry.contentRect.width));
 		observer.observe(element);
 		return () => observer.disconnect();
 	}, [element]);
@@ -696,6 +1260,18 @@ const uniqueId = (charts, base) => {
 	while (ids.has(`${base}-${n}`)) n++;
 	return `${base}-${n}`;
 };
+/** Objeto sem nenhum campo sai do JSON. */
+const nonEmpty = (object) => Object.keys(object).length ? object : void 0;
+/** Campos do card de um gráfico, com o padrão do layout (`cards`) no lugar do padrão da lib. */
+const chartCardFields = (cards) => Object.fromEntries(Object.entries(CARD_FIELDS).map(([key, spec]) => [key, {
+	...spec,
+	default: cards?.[key] ?? spec.default
+}]));
+const cardsSummary = (cards) => {
+	const { gap, ...style } = cards ?? {};
+	const custom = Object.keys(style).length;
+	return `espaço ${String(gap ?? CARDS_FIELDS.gap?.default)}px · ${custom ? `${custom} ajuste(s) de estilo` : "estilo padrão"}`;
+};
 /** Campo opcional vazio sai do objeto, para o JSON ficar só com o que foi definido. */
 function withField(object, key, value) {
 	const next = { ...object };
@@ -809,7 +1385,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	const charts = editing.charts;
 	const filters = editing.filters ?? [];
 	const selectedFilter = selection?.kind === "filter" ? filters.find((filter) => filter.dimension === selection.key) ?? null : null;
-	const selected = selection?.kind === "filter" || selection?.kind === "canvas" ? null : charts.find((chart) => chart.id === selection?.key) ?? charts[0] ?? null;
+	const selected = selection?.kind === "filter" || selection?.kind === "canvas" || selection?.kind === "cards" ? null : charts.find((chart) => chart.id === selection?.key) ?? charts[0] ?? null;
 	const layoutKey = entry.registered.id;
 	const differsFromFile = canonicalJson(editing) !== canonicalJson(entry.registered);
 	const update = (next) => {
@@ -826,6 +1402,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	});
 	const patchChart = (id, change) => setCharts(charts.map((chart) => chart.id === id ? change(chart) : chart));
 	const setCanvas = (next) => update(withField(editing, "canvas", next));
+	const setCards = (key, value) => update(withField(editing, "cards", nonEmpty(withField(editing.cards ?? {}, key, value))));
 	const setFilters = (next) => update({
 		...editing,
 		filters: next
@@ -884,7 +1461,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	};
 	const stacked = rootWidth < STACK_WIDTH;
 	const formColumns = editorWidth < 420 ? 1 : editorWidth < 720 ? 2 : 4;
-	const selectedTitle = selection?.kind === "canvas" ? "Tela" : selectedFilter ? selectedFilter.label || model.dimensions[selectedFilter.dimension]?.label || selectedFilter.dimension : selected ? selected.title || selected.id : "";
+	const selectedTitle = selection?.kind === "canvas" ? "Tela" : selection?.kind === "cards" ? "Cards" : selectedFilter ? selectedFilter.label || model.dimensions[selectedFilter.dimension]?.label || selectedFilter.dimension : selected ? selected.title || selected.id : "";
 	const hover = (item) => onHover(item && itemQueryId(layoutKey, item));
 	const add = (type, base) => {
 		setAddMenu(null);
@@ -992,9 +1569,10 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 								children: [item.registered.id, item.draft ? " · rascunho" : ""]
 							}, item.registered.id))
 						}),
-						/* @__PURE__ */ jsx(Section, {
+						/* @__PURE__ */ jsxs(Section, {
 							title: "Tela",
-							children: /* @__PURE__ */ jsx(ItemRow, {
+							collapseKey: "layout:lista:tela",
+							children: [/* @__PURE__ */ jsx(ItemRow, {
 								title: editing.canvas ? "Tamanho fixo" : "Responsiva",
 								subtitle: editing.canvas ? presetLabel(editing.canvas) : "reorganiza conforme a largura",
 								selected: selection?.kind === "canvas",
@@ -1002,10 +1580,19 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 									setSelection({ kind: "canvas" });
 									if (stacked) setSidebar(false);
 								}
-							})
+							}), /* @__PURE__ */ jsx(ItemRow, {
+								title: "Cards",
+								subtitle: cardsSummary(editing.cards),
+								selected: selection?.kind === "cards",
+								onSelect: () => {
+									setSelection({ kind: "cards" });
+									if (stacked) setSidebar(false);
+								}
+							})]
 						}),
 						/* @__PURE__ */ jsxs(Section, {
 							title: `Filtros (${filters.length})`,
+							collapseKey: "layout:lista:filtros",
 							actions: /* @__PURE__ */ jsx(Button, {
 								size: "small",
 								onClick: addFilter,
@@ -1037,6 +1624,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 						}),
 						/* @__PURE__ */ jsx(Section, {
 							title: `Gráficos (${charts.length})`,
+							collapseKey: "layout:lista:graficos",
 							actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
 								size: "small",
 								onClick: (e) => setAddMenu(e.currentTarget),
@@ -1113,7 +1701,23 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 								canvas: editing.canvas,
 								columns: formColumns,
 								onChange: setCanvas
-							}) : selectedFilter ? /* @__PURE__ */ jsx(FilterForm, {
+							}) : selection?.kind === "cards" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary",
+									mb: 1
+								},
+								children: "Estilo padrão dos cards de todos os gráficos; cada gráfico pode sobrepor na seção Card dele. Vazio = padrão do componente."
+							}), /* @__PURE__ */ jsx(FieldsForm, {
+								fields: CARDS_FIELDS,
+								values: editing.cards ?? {},
+								onSet: setCards,
+								model,
+								formatters: [],
+								columns: [],
+								formColumns,
+								chosenDimensions: []
+							})] }) : selectedFilter ? /* @__PURE__ */ jsx(FilterForm, {
 								filter: selectedFilter,
 								model,
 								formatters: entry.parts.filters ?? [],
@@ -1127,6 +1731,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 								}
 							}, `filter:${selectedFilter.dimension}`) : selected ? /* @__PURE__ */ jsx(ChartForm, {
 								chart: selected,
+								cards: editing.cards,
 								types: chartTypes,
 								model,
 								formatters: entry.parts.charts ?? [],
@@ -1234,6 +1839,7 @@ function CanvasForm({ canvas, columns, onChange }) {
 	const number = (value) => value === "" ? void 0 : Number(value);
 	return /* @__PURE__ */ jsx(Section, {
 		title: "Tela",
+		collapseKey: "layout:form:Tela",
 		children: /* @__PURE__ */ jsxs(Box, {
 			sx: formGrid(columns),
 			children: [/* @__PURE__ */ jsx(Box, {
@@ -1401,9 +2007,10 @@ function SmallButton({ title, disabled, onClick, children }) {
 		}) })
 	});
 }
-function ChartForm({ chart, types, model, formatters, columns, onChange }) {
+function ChartForm({ chart, cards, types, model, formatters, columns, onChange }) {
 	const set = (key, value) => onChange((current) => withField(current, key, value));
-	return /* @__PURE__ */ jsx(FieldsForm, {
+	const setCard = (key, value) => onChange((current) => withField(current, "card", nonEmpty(withField(current.card ?? {}, key, value))));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldsForm, {
 		fields: types[chart.type]?.fields ?? {},
 		values: chart,
 		onSet: set,
@@ -1435,7 +2042,16 @@ function ChartForm({ chart, types, model, formatters, columns, onChange }) {
 			onChange: (e) => set("id", e.target.value),
 			sx: inputSx$1
 		}), "Identificador no JSON (letras, números, \"-\" e \"_\")")] })
-	});
+	}), /* @__PURE__ */ jsx(FieldsForm, {
+		fields: chartCardFields(cards),
+		values: chart.card ?? {},
+		onSet: setCard,
+		model,
+		formatters: [],
+		columns: [],
+		formColumns: columns,
+		chosenDimensions: []
+	})] });
 }
 function FilterForm({ filter, model, formatters, columns, onChange }) {
 	return /* @__PURE__ */ jsx(FieldsForm, {
@@ -1625,6 +2241,7 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 		const inSection = entries.filter(([, spec]) => spec.section === section);
 		return /* @__PURE__ */ jsx(Section, {
 			title: section,
+			collapseKey: `layout:form:${section}`,
 			children: /* @__PURE__ */ jsxs(Box, {
 				sx: formGrid(formColumns),
 				children: [section === sections[0] && header, inSection.map(([key, spec]) => /* @__PURE__ */ jsx(Box, {
@@ -2705,6 +3322,7 @@ function track(event, onMove, onUp) {
 		x: event.clientX,
 		y: event.clientY
 	};
+	const win = event.currentTarget.ownerDocument.defaultView ?? window;
 	let moved = false;
 	const move = (moveEvent) => {
 		const dx = moveEvent.clientX - start.x;
@@ -2713,12 +3331,12 @@ function track(event, onMove, onUp) {
 		if (moved) onMove(dx, dy, moveEvent);
 	};
 	const up = (upEvent) => {
-		window.removeEventListener("mousemove", move);
-		window.removeEventListener("mouseup", up);
+		win.removeEventListener("mousemove", move);
+		win.removeEventListener("mouseup", up);
 		onUp?.(upEvent, moved);
 	};
-	window.addEventListener("mousemove", move);
-	window.addEventListener("mouseup", up);
+	win.addEventListener("mousemove", move);
+	win.addEventListener("mouseup", up);
 }
 /** Colunas citadas como `tabela.coluna` no SQL das dimensões/medidas. */
 function citedColumns(sql, table) {
@@ -3060,7 +3678,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 				selectNode(node);
 				return;
 			}
-			const target = document.elementFromPoint(upEvent.clientX, upEvent.clientY)?.closest("[data-diagram-column]");
+			const target = (canvas.current?.ownerDocument ?? document).elementFromPoint(upEvent.clientX, upEvent.clientY)?.closest("[data-diagram-column]");
 			const targetNode = nodes.find((item) => item.id === target?.dataset.diagramNode);
 			const targetColumn = target?.dataset.diagramColumn;
 			if (targetNode && targetColumn) connect(node, column, targetNode, targetColumn);
@@ -4587,7 +5205,7 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 									}),
 									/* @__PURE__ */ jsx(Button, {
 										size: "small",
-										onClick: () => copyText(toModelCode(edited)),
+										onClick: (e) => copyText(toModelCode(edited), e.currentTarget),
 										children: "Copiar TS"
 									}),
 									/* @__PURE__ */ jsx(Button, {
@@ -4850,12 +5468,55 @@ function PlaygroundPanel({ model, selection, onSelectionChange }) {
 //#endregion
 //#region src/devtools/QueriesPanel.tsx
 const queryKey = (run) => JSON.stringify(run.query);
+const SORT_LABEL = {
+	default: "ordem da página",
+	label: "nome",
+	duration: "mais lentas",
+	rows: "mais linhas",
+	status: "erros primeiro"
+};
+const SORT_KEY = "bm-dashboard-devtools:queries-sort";
+/** Problemas primeiro: erro, em andamento, cancelada, ok. */
+const STATUS_ORDER = {
+	error: 0,
+	loading: 1,
+	cancelled: 2,
+	success: 3
+};
+function loadSort() {
+	try {
+		const saved = localStorage.getItem(SORT_KEY);
+		return saved && saved in SORT_LABEL ? saved : "default";
+	} catch {
+		return "default";
+	}
+}
+/** Ordena a lista; empate mantém a ordem original (página ou mais recente primeiro). */
+function sortRuns(runs, key) {
+	if (key === "default") return runs;
+	const compare = (a, b) => {
+		switch (key) {
+			case "label": return a.label.localeCompare(b.label, "pt-BR", { numeric: true });
+			case "duration": return (b.durationMs ?? Date.now() - b.startedAt) - (a.durationMs ?? Date.now() - a.startedAt);
+			case "rows": return (b.rows?.length ?? -1) - (a.rows?.length ?? -1);
+			case "status": return STATUS_ORDER[a.status] - STATUS_ORDER[b.status];
+		}
+	};
+	return [...runs].sort(compare);
+}
 /** Consultas ativas na página (uma por componente) e o histórico de execuções. */
 function QueriesPanel({ devtools, capabilities, selected, onSelect, onHover, onClearServerCache }) {
 	const { store, refresh } = devtools;
 	const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 	const [view, setView] = useState("active");
-	const runs = view === "active" ? snapshot.instances.map((instance) => instance.last) : snapshot.history;
+	const [sort, setSort] = useState(loadSort);
+	const changeSort = (next) => {
+		setSort(next);
+		try {
+			localStorage.setItem(SORT_KEY, next);
+		} catch {}
+	};
+	const runs = sortRuns(view === "active" ? snapshot.instances.map((instance) => instance.last) : snapshot.history, sort);
 	const instanceById = new Map(snapshot.instances.map((item) => [item.instanceId, item]));
 	const sameQuery = /* @__PURE__ */ new Map();
 	for (const { last } of snapshot.instances) sameQuery.set(queryKey(last), (sameQuery.get(queryKey(last)) ?? 0) + 1);
@@ -4886,31 +5547,54 @@ function QueriesPanel({ devtools, capabilities, selected, onSelect, onHover, onC
 						borderBottom: 1,
 						borderColor: "divider"
 					},
-					children: [/* @__PURE__ */ jsxs(ToggleButtonGroup, {
-						size: "small",
-						exclusive: true,
-						value: view,
-						onChange: (_, value) => value && setView(value),
-						children: [/* @__PURE__ */ jsxs(ToggleButton, {
-							value: "active",
-							children: [
-								"Ativas (",
-								snapshot.instances.length,
-								")"
-							]
-						}), /* @__PURE__ */ jsxs(ToggleButton, {
-							value: "history",
-							children: [
-								"Histórico (",
-								snapshot.history.length,
-								")"
-							]
-						})]
-					}), view === "history" && /* @__PURE__ */ jsx(Button, {
-						size: "small",
-						onClick: store.clearHistory,
-						children: "Limpar"
-					})]
+					children: [
+						/* @__PURE__ */ jsxs(ToggleButtonGroup, {
+							size: "small",
+							exclusive: true,
+							value: view,
+							onChange: (_, value) => value && setView(value),
+							children: [/* @__PURE__ */ jsxs(ToggleButton, {
+								value: "active",
+								children: [
+									"Ativas (",
+									snapshot.instances.length,
+									")"
+								]
+							}), /* @__PURE__ */ jsxs(ToggleButton, {
+								value: "history",
+								children: [
+									"Histórico (",
+									snapshot.history.length,
+									")"
+								]
+							})]
+						}),
+						view === "history" && /* @__PURE__ */ jsx(Button, {
+							size: "small",
+							onClick: store.clearHistory,
+							children: "Limpar"
+						}),
+						/* @__PURE__ */ jsx(TextField, {
+							select: true,
+							size: "small",
+							value: sort,
+							onChange: (e) => changeSort(e.target.value),
+							title: "Ordenar a lista",
+							sx: {
+								ml: "auto",
+								minWidth: 0,
+								"& .MuiSelect-select": {
+									fontSize: 12,
+									py: .5
+								}
+							},
+							children: Object.keys(SORT_LABEL).map((key) => /* @__PURE__ */ jsx(MenuItem, {
+								value: key,
+								dense: true,
+								children: key === "default" && view === "history" ? "mais recentes" : SORT_LABEL[key]
+							}, key))
+						})
+					]
 				}),
 				/* @__PURE__ */ jsxs(Box, {
 					sx: {
@@ -5102,6 +5786,7 @@ function RunDetail({ run, devtools, capabilities, mounted }) {
 			},
 			children: run.error
 		}),
+		run.status === "error" && !debug && /* @__PURE__ */ jsx(FailedSql, { run }),
 		/* @__PURE__ */ jsx(Section, {
 			title: "Consulta",
 			children: /* @__PURE__ */ jsx(CodeBlock, {
@@ -5149,6 +5834,67 @@ function RunDetail({ run, devtools, capabilities, mounted }) {
 		})
 	] });
 }
+/**
+* SQL de uma consulta que deu erro: o servidor não devolve debug junto com o erro, então pede só a
+* compilação (`devtools.compile`), sem executar. Se nem compilar, mostra por quê.
+*/
+function FailedSql({ run }) {
+	const { fetcher } = useDashboard();
+	const [state, setState] = useState(null);
+	useEffect(() => {
+		let active = true;
+		setState({ loading: true });
+		fetcher({
+			...run.query,
+			devtools: { compile: true }
+		}).then((result) => {
+			const debug = result.devtools?.debug;
+			if (active) setState(debug ? {
+				loading: false,
+				data: debug
+			} : {
+				loading: false,
+				error: "O endpoint não devolveu o SQL (precisa de runQuery(..., { devtools: true }) numa versão que aceite devtools.compile)."
+			});
+		}).catch((error) => active && setState({
+			loading: false,
+			error: errorMessage(error)
+		}));
+		return () => {
+			active = false;
+		};
+	}, [fetcher, run.query]);
+	return /* @__PURE__ */ jsx(Section, {
+		title: "SQL gerado (não executou)",
+		children: /* @__PURE__ */ jsx(ToolResult, {
+			state,
+			children: (debug) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CodeBlock, {
+				sql: true,
+				code: inlineParams(debug.sql, debug.params)
+			}), /* @__PURE__ */ jsxs(Typography, {
+				sx: {
+					fontSize: 11,
+					color: "text.secondary",
+					mt: .5
+				},
+				children: [
+					"Compilado de novo agora",
+					debug.draft ? ", com o rascunho atual" : "",
+					", para depurar o erro acima.",
+					!!debug.params.length && /* @__PURE__ */ jsxs(Box, {
+						component: "span",
+						sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
+						children: [
+							" ",
+							"params: ",
+							JSON.stringify(debug.params)
+						]
+					})
+				]
+			})] })
+		})
+	});
+}
 function useTool() {
 	const [state, setState] = useState(null);
 	const run = async (load) => {
@@ -5632,9 +6378,10 @@ function CheckList({ checks, expectedLabel, actualLabel }) {
 * painel com as consultas da página, o modelo editável, um playground, regressão, dicionário e
 * filtros. Montado pelo próprio `DashboardProvider` em desenvolvimento.
 *
-* Dois modos: fixado na parte de baixo da tela ou flutuante (janela que se arrasta pelo cabeçalho e
-* redimensiona pelo canto). Fixado (embaixo, à esquerda ou à direita), o painel ocupa espaço: a
-* página encolhe para não ficar escondida atrás dele; só o modo flutuante sobrepõe a página.
+* Modos: fixado (embaixo, à esquerda ou à direita), flutuante (janela que se arrasta pelo cabeçalho
+* e redimensiona pelo canto) ou numa janela separada do navegador (`DevtoolsWindow`). Fixado, o
+* painel ocupa espaço: a página encolhe para não ficar escondida atrás dele; só o modo flutuante
+* sobrepõe a página.
 * Atalhos: Alt+Shift+B abre/fecha o painel, Alt+Shift+F alterna entre fixado e flutuante,
 * Alt+Shift+I liga o inspetor, Esc sai do inspetor.
 */
@@ -5723,13 +6470,15 @@ function loadUi() {
 			"bottom",
 			"left",
 			"right",
-			"floating"
+			"floating",
+			"window"
 		].includes(saved.mode)) saved.mode = "bottom";
 		if (![
 			"bottom",
 			"left",
 			"right"
 		].includes(saved.dock)) saved.dock = "bottom";
+		if (saved.mode === "window") saved.open = false;
 		return {
 			...saved,
 			float: clampFloat({
@@ -5828,6 +6577,7 @@ function DashboardDevtools() {
 	const [pickedItem, setPickedItem] = useState(null);
 	const [hovered, setHovered] = useState(null);
 	const [inspecting, setInspecting] = useState(false);
+	const [popup, setPopup] = useState(null);
 	const store = devtools?.store;
 	const instances = useSyncExternalStore(store?.subscribe ?? (() => () => {}), () => store?.getSnapshot(), () => store?.getSnapshot())?.instances ?? [];
 	useEffect(() => {
@@ -5886,18 +6636,85 @@ function DashboardDevtools() {
 			}));
 		}, [layoutTab])
 	});
+	const closePopup = useCallback(() => {
+		setPopup((current) => {
+			if (current && !current.closed) current.close();
+			return null;
+		});
+	}, []);
+	const openPanel = useCallback(() => {
+		if (ui.mode !== "window") {
+			setUi((current) => ({
+				...current,
+				open: true
+			}));
+			return;
+		}
+		const opened = popup && !popup.closed ? popup : openDevtoolsWindow();
+		if (opened) {
+			opened.focus();
+			setPopup(opened);
+			setUi((current) => ({
+				...current,
+				open: true
+			}));
+		} else setUi((current) => ({
+			...current,
+			open: true,
+			mode: current.dock
+		}));
+	}, [ui.mode, popup]);
+	const closePanel = useCallback(() => {
+		closePopup();
+		setUi((current) => ({
+			...current,
+			open: false
+		}));
+	}, [closePopup]);
+	const toWindow = () => {
+		const opened = openDevtoolsWindow();
+		if (!opened) return;
+		opened.focus();
+		setPopup(opened);
+		setUi((current) => ({
+			...current,
+			open: true,
+			mode: "window"
+		}));
+	};
+	const onPopupClosed = useCallback(() => {
+		setPopup(null);
+		setUi((current) => ({
+			...current,
+			open: false
+		}));
+	}, []);
+	const keyActions = useRef({
+		openPanel,
+		closePanel,
+		closePopup,
+		open: ui.open,
+		inspecting
+	});
+	keyActions.current = {
+		openPanel,
+		closePanel,
+		closePopup,
+		open: ui.open,
+		inspecting
+	};
 	useEffect(() => {
 		const onKey = (event) => {
-			if (event.key === "Escape" && inspecting) setInspecting(false);
+			const actions = keyActions.current;
+			if (event.key === "Escape" && actions.inspecting) setInspecting(false);
 			if (!event.altKey || !event.shiftKey) return;
 			if (event.code === "KeyB") {
 				event.preventDefault();
-				setUi((current) => ({
-					...current,
-					open: !current.open
-				}));
+				if (actions.open) actions.closePanel();
+				else actions.openPanel();
 			} else if (event.code === "KeyF") {
 				event.preventDefault();
+				actions.closePopup();
 				setUi((current) => ({
 					...current,
 					open: true,
@@ -5908,10 +6725,13 @@ function DashboardDevtools() {
 				setInspecting((value) => !value);
 			}
 		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [inspecting]);
-	const reserved = ui.open && ui.mode !== "floating" ? ui.mode : null;
+		const targets = popup && !popup.closed ? [window, popup] : [window];
+		for (const target of targets) target.addEventListener("keydown", onKey);
+		return () => {
+			for (const target of targets) target.removeEventListener("keydown", onKey);
+		};
+	}, [popup]);
+	const reserved = ui.open && ui.mode !== "floating" && ui.mode !== "window" ? ui.mode : null;
 	const reservedSize = reserved === "bottom" ? ui.height : ui.width;
 	const reservation = useRef(null);
 	const reservedSizeRef = useRef(reservedSize);
@@ -5935,6 +6755,7 @@ function DashboardDevtools() {
 		return () => window.removeEventListener("resize", onResize);
 	}, []);
 	if (!devtools || !store) return null;
+	const inWindow = ui.mode === "window" && !!popup;
 	const floating = ui.mode === "floating";
 	const side = ui.mode === "left" || ui.mode === "right" ? ui.mode : null;
 	const startDockResize = (event) => {
@@ -5971,15 +6792,21 @@ function DashboardDevtools() {
 			})
 		})));
 	};
-	const toggleMode = () => setUi((current) => ({
-		...current,
-		mode: current.mode === "floating" ? current.dock : "floating"
-	}));
-	const dockTo = (dock) => setUi((current) => ({
-		...current,
-		mode: dock,
-		dock
-	}));
+	const toggleMode = () => {
+		closePopup();
+		setUi((current) => ({
+			...current,
+			mode: current.mode === "floating" ? current.dock : "floating"
+		}));
+	};
+	const dockTo = (dock) => {
+		closePopup();
+		setUi((current) => ({
+			...current,
+			mode: dock,
+			dock
+		}));
+	};
 	const clearServerCache = () => loadModel(true).then(devtools.refresh);
 	const loading = instances.filter((item) => item.last.status === "loading").length;
 	const errors = instances.filter((item) => item.last.status === "error").length;
@@ -6008,6 +6835,229 @@ function DashboardDevtools() {
 		},
 		children: /* @__PURE__ */ jsx(CircularProgress, { size: 20 })
 	}) : content(original);
+	const header = /* @__PURE__ */ jsxs(Box, {
+		onMouseDown: startDrag,
+		onDoubleClick: (event) => {
+			if (floating && !event.target.closest("button, [role=\"tab\"]")) toggleMode();
+		},
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			gap: 1.5,
+			px: 1.5,
+			borderBottom: 1,
+			borderColor: "divider",
+			cursor: floating ? "move" : void 0,
+			...side && {
+				flexWrap: "wrap",
+				columnGap: 1,
+				pt: .5
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 800,
+					color: "primary.main",
+					whiteSpace: "nowrap"
+				},
+				children: "◆ BI Devtools"
+			}),
+			/* @__PURE__ */ jsx(Chip, {
+				size: "small",
+				label: model,
+				sx: { fontFamily: MONO }
+			}),
+			/* @__PURE__ */ jsxs(Tabs, {
+				value: ui.tab,
+				onChange: (_, tab) => setTab(tab),
+				variant: "scrollable",
+				scrollButtons: "auto",
+				sx: {
+					minHeight: 40,
+					...side && {
+						order: 1,
+						width: "100%"
+					}
+				},
+				children: [
+					/* @__PURE__ */ jsx(Tab, {
+						value: "queries",
+						label: /* @__PURE__ */ jsxs(Box, {
+							sx: {
+								display: "flex",
+								alignItems: "center",
+								gap: .75
+							},
+							children: [
+								"Consultas (",
+								instances.length,
+								")",
+								!!loading && /* @__PURE__ */ jsx(CircularProgress, { size: 10 }),
+								!!(errors || storms) && /* @__PURE__ */ jsx(Chip, {
+									size: "small",
+									color: "error",
+									label: errors + storms,
+									sx: { height: 16 }
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ jsx(Tab, {
+						value: "model",
+						label: "Modelo"
+					}),
+					/* @__PURE__ */ jsx(Tab, {
+						value: "layout",
+						label: "Layout"
+					}),
+					/* @__PURE__ */ jsx(Tab, {
+						value: "playground",
+						label: "Playground"
+					}),
+					/* @__PURE__ */ jsx(Tab, {
+						value: "regression",
+						label: "Regressão"
+					}),
+					/* @__PURE__ */ jsx(Tab, {
+						value: "dictionary",
+						label: "Dicionário"
+					}),
+					/* @__PURE__ */ jsx(Tab, {
+						value: "filters",
+						label: "Filtros"
+					})
+				]
+			}),
+			devtools.draft && /* @__PURE__ */ jsx(Chip, {
+				size: "small",
+				color: "warning",
+				label: "rascunho aplicado"
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					ml: "auto",
+					display: "flex",
+					alignItems: "center",
+					gap: .5
+				},
+				children: [
+					/* @__PURE__ */ jsx(Tooltip, {
+						title: "Inspecionar componente (Alt+Shift+I)",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							color: inspecting ? "primary" : "default",
+							onClick: () => setInspecting((value) => !value),
+							"aria-label": "Inspecionar componente",
+							children: "⌖"
+						})
+					}),
+					DOCK_SIDES.map(({ side: dock, icon, label }) => /* @__PURE__ */ jsx(Tooltip, {
+						title: `${label} (ocupa espaço na página)`,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							color: ui.mode === dock ? "primary" : "default",
+							onClick: () => dockTo(dock),
+							"aria-label": label,
+							children: icon
+						})
+					}, dock)),
+					/* @__PURE__ */ jsx(Tooltip, {
+						title: "Janela flutuante, por cima da página (Alt+Shift+F) · arraste pelo cabeçalho",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							color: floating ? "primary" : "default",
+							onClick: toggleMode,
+							"aria-label": "Devtools flutuante",
+							children: "⧉"
+						})
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						title: "Abrir numa janela separada do navegador (ex.: em outro monitor)",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							color: inWindow ? "primary" : "default",
+							onClick: inWindow ? () => popup?.focus() : toWindow,
+							"aria-label": "Devtools em janela separada",
+							children: "↗"
+						})
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						title: "Fechar (Alt+Shift+B)",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							onClick: closePanel,
+							"aria-label": "Fechar devtools",
+							children: "✕"
+						})
+					})
+				]
+			})
+		]
+	});
+	const body = /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			flex: 1,
+			minHeight: 0
+		},
+		children: [
+			ui.tab === "queries" && /* @__PURE__ */ jsx(QueriesPanel, {
+				devtools,
+				capabilities,
+				selected,
+				onSelect: setSelected,
+				onHover: setHovered,
+				onClearServerCache: clearServerCache
+			}),
+			ui.tab === "model" && needsModel((registered) => /* @__PURE__ */ jsx(ModelPanel, {
+				devtools,
+				original: registered,
+				capabilities,
+				tables: tables ?? [],
+				onTry: (selection) => {
+					setPlayground(selection);
+					setTab("playground");
+				},
+				onSaved: () => setTimeout(() => loadModel(), 1e3)
+			})),
+			ui.tab === "layout" && needsModel((registered) => /* @__PURE__ */ jsx(LayoutPanel, {
+				devtools,
+				model: devtools.draft ?? registered,
+				capabilities,
+				picked: pickedItem,
+				onHover: setHovered
+			})),
+			ui.tab === "playground" && needsModel((registered) => /* @__PURE__ */ jsx(PlaygroundPanel, {
+				model: devtools.draft ?? registered,
+				selection: playground,
+				onSelectionChange: setPlayground
+			})),
+			ui.tab === "regression" && /* @__PURE__ */ jsx(RegressionPanel, {
+				devtools,
+				capabilities
+			}),
+			ui.tab === "dictionary" && /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					p: 1.5,
+					overflow: "auto",
+					height: "100%"
+				},
+				children: [/* @__PURE__ */ jsxs(Typography, {
+					sx: {
+						fontSize: 12,
+						color: "text.secondary",
+						mb: 1.5
+					},
+					children: [
+						"O mesmo ",
+						/* @__PURE__ */ jsx("code", { children: "<ModelDictionary />" }),
+						" pode ir numa página do dashboard como documentação para quem usa. Edite rótulos e descrições na aba Modelo."
+					]
+				}), /* @__PURE__ */ jsx(ModelDictionary, {})]
+			}),
+			ui.tab === "filters" && /* @__PURE__ */ jsx(FiltersPanel, { devtools })
+		]
+	});
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(ThemeProvider, {
 		theme,
 		children: [
@@ -6016,7 +7066,26 @@ function DashboardDevtools() {
 				label: hoveredLabel,
 				zIndex: 1251
 			}),
-			ui.open ? /* @__PURE__ */ jsxs(Paper, {
+			ui.open && inWindow && popup && /* @__PURE__ */ jsx(DevtoolsWindow, {
+				popup,
+				title: `BI Devtools · ${model}`,
+				theme,
+				onClosed: onPopupClosed,
+				children: /* @__PURE__ */ jsxs(Paper, {
+					...devtoolsMarker,
+					square: true,
+					elevation: 0,
+					sx: {
+						height: "100%",
+						display: "flex",
+						flexDirection: "column",
+						color: "text.primary",
+						overflow: "hidden"
+					},
+					children: [header, body]
+				})
+			}),
+			ui.open && !inWindow ? /* @__PURE__ */ jsxs(Paper, {
 				...devtoolsMarker,
 				square: !floating,
 				elevation: floating ? 16 : 12,
@@ -6081,232 +7150,15 @@ function DashboardDevtools() {
 							cursor: "ns-resize"
 						}
 					}),
-					/* @__PURE__ */ jsxs(Box, {
-						onMouseDown: startDrag,
-						onDoubleClick: (event) => {
-							if (floating && !event.target.closest("button, [role=\"tab\"]")) toggleMode();
-						},
-						sx: {
-							display: "flex",
-							alignItems: "center",
-							gap: 1.5,
-							px: 1.5,
-							borderBottom: 1,
-							borderColor: "divider",
-							cursor: floating ? "move" : void 0,
-							...side && {
-								flexWrap: "wrap",
-								columnGap: 1,
-								pt: .5
-							}
-						},
-						children: [
-							/* @__PURE__ */ jsx(Typography, {
-								sx: {
-									fontWeight: 800,
-									color: "primary.main",
-									whiteSpace: "nowrap"
-								},
-								children: "◆ BI Devtools"
-							}),
-							/* @__PURE__ */ jsx(Chip, {
-								size: "small",
-								label: model,
-								sx: { fontFamily: MONO }
-							}),
-							/* @__PURE__ */ jsxs(Tabs, {
-								value: ui.tab,
-								onChange: (_, tab) => setTab(tab),
-								variant: "scrollable",
-								scrollButtons: "auto",
-								sx: {
-									minHeight: 40,
-									...side && {
-										order: 1,
-										width: "100%"
-									}
-								},
-								children: [
-									/* @__PURE__ */ jsx(Tab, {
-										value: "queries",
-										label: /* @__PURE__ */ jsxs(Box, {
-											sx: {
-												display: "flex",
-												alignItems: "center",
-												gap: .75
-											},
-											children: [
-												"Consultas (",
-												instances.length,
-												")",
-												!!loading && /* @__PURE__ */ jsx(CircularProgress, { size: 10 }),
-												!!(errors || storms) && /* @__PURE__ */ jsx(Chip, {
-													size: "small",
-													color: "error",
-													label: errors + storms,
-													sx: { height: 16 }
-												})
-											]
-										})
-									}),
-									/* @__PURE__ */ jsx(Tab, {
-										value: "model",
-										label: "Modelo"
-									}),
-									/* @__PURE__ */ jsx(Tab, {
-										value: "layout",
-										label: "Layout"
-									}),
-									/* @__PURE__ */ jsx(Tab, {
-										value: "playground",
-										label: "Playground"
-									}),
-									/* @__PURE__ */ jsx(Tab, {
-										value: "regression",
-										label: "Regressão"
-									}),
-									/* @__PURE__ */ jsx(Tab, {
-										value: "dictionary",
-										label: "Dicionário"
-									}),
-									/* @__PURE__ */ jsx(Tab, {
-										value: "filters",
-										label: "Filtros"
-									})
-								]
-							}),
-							devtools.draft && /* @__PURE__ */ jsx(Chip, {
-								size: "small",
-								color: "warning",
-								label: "rascunho aplicado"
-							}),
-							/* @__PURE__ */ jsxs(Box, {
-								sx: {
-									ml: "auto",
-									display: "flex",
-									alignItems: "center",
-									gap: .5
-								},
-								children: [
-									/* @__PURE__ */ jsx(Tooltip, {
-										title: "Inspecionar componente (Alt+Shift+I)",
-										children: /* @__PURE__ */ jsx(IconButton, {
-											size: "small",
-											color: inspecting ? "primary" : "default",
-											onClick: () => setInspecting((value) => !value),
-											"aria-label": "Inspecionar componente",
-											children: "⌖"
-										})
-									}),
-									DOCK_SIDES.map(({ side: dock, icon, label }) => /* @__PURE__ */ jsx(Tooltip, {
-										title: `${label} (ocupa espaço na página)`,
-										children: /* @__PURE__ */ jsx(IconButton, {
-											size: "small",
-											color: ui.mode === dock ? "primary" : "default",
-											onClick: () => dockTo(dock),
-											"aria-label": label,
-											children: icon
-										})
-									}, dock)),
-									/* @__PURE__ */ jsx(Tooltip, {
-										title: "Janela flutuante, por cima da página (Alt+Shift+F) · arraste pelo cabeçalho",
-										children: /* @__PURE__ */ jsx(IconButton, {
-											size: "small",
-											color: floating ? "primary" : "default",
-											onClick: toggleMode,
-											"aria-label": "Devtools flutuante",
-											children: "⧉"
-										})
-									}),
-									/* @__PURE__ */ jsx(Tooltip, {
-										title: "Fechar (Alt+Shift+B)",
-										children: /* @__PURE__ */ jsx(IconButton, {
-											size: "small",
-											onClick: () => setUi((current) => ({
-												...current,
-												open: false
-											})),
-											"aria-label": "Fechar devtools",
-											children: "✕"
-										})
-									})
-								]
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs(Box, {
-						sx: {
-							flex: 1,
-							minHeight: 0
-						},
-						children: [
-							ui.tab === "queries" && /* @__PURE__ */ jsx(QueriesPanel, {
-								devtools,
-								capabilities,
-								selected,
-								onSelect: setSelected,
-								onHover: setHovered,
-								onClearServerCache: clearServerCache
-							}),
-							ui.tab === "model" && needsModel((registered) => /* @__PURE__ */ jsx(ModelPanel, {
-								devtools,
-								original: registered,
-								capabilities,
-								tables: tables ?? [],
-								onTry: (selection) => {
-									setPlayground(selection);
-									setTab("playground");
-								},
-								onSaved: () => setTimeout(() => loadModel(), 1e3)
-							})),
-							ui.tab === "layout" && needsModel((registered) => /* @__PURE__ */ jsx(LayoutPanel, {
-								devtools,
-								model: devtools.draft ?? registered,
-								capabilities,
-								picked: pickedItem,
-								onHover: setHovered
-							})),
-							ui.tab === "playground" && needsModel((registered) => /* @__PURE__ */ jsx(PlaygroundPanel, {
-								model: devtools.draft ?? registered,
-								selection: playground,
-								onSelectionChange: setPlayground
-							})),
-							ui.tab === "regression" && /* @__PURE__ */ jsx(RegressionPanel, {
-								devtools,
-								capabilities
-							}),
-							ui.tab === "dictionary" && /* @__PURE__ */ jsxs(Box, {
-								sx: {
-									p: 1.5,
-									overflow: "auto",
-									height: "100%"
-								},
-								children: [/* @__PURE__ */ jsxs(Typography, {
-									sx: {
-										fontSize: 12,
-										color: "text.secondary",
-										mb: 1.5
-									},
-									children: [
-										"O mesmo ",
-										/* @__PURE__ */ jsx("code", { children: "<ModelDictionary />" }),
-										" pode ir numa página do dashboard como documentação para quem usa. Edite rótulos e descrições na aba Modelo."
-									]
-								}), /* @__PURE__ */ jsx(ModelDictionary, {})]
-							}),
-							ui.tab === "filters" && /* @__PURE__ */ jsx(FiltersPanel, { devtools })
-						]
-					})
+					header,
+					body
 				]
 			}) : /* @__PURE__ */ jsx(ToggleButton$1, {
 				draft: !!devtools.draft,
 				loading,
 				problems: errors + storms,
 				inspecting,
-				onOpen: () => setUi((current) => ({
-					...current,
-					open: true
-				}))
+				onOpen: inWindow ? () => popup?.focus() : openPanel
 			}),
 			inspecting && /* @__PURE__ */ jsx(Box, {
 				...devtoolsMarker,
@@ -6394,4 +7246,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-5wh3brAT.js.map
+//# sourceMappingURL=DashboardDevtools-C8AXaFgw.js.map