@bluemarble/bi 0.1.0 → 0.1.2

package/dist/{DashboardDevtools-ByrFb6HT.js → DashboardDevtools-DLhEr3fN.js}

@@ -1,6 +1,6 @@
 import { C as validateModel, D as parseColumnRef, E as modelEdges, T as measureHome, _ as AGGREGATIONS, a as FILTER_FIELDS, c as chartReferences, d as layoutModelWarnings, f as validateLayout, g as toModelCode, i as CHART_TYPE_LABEL, k as referencedTables, l as filterReferences, n as CHART_FIELDS, o as chartColumns, p as canonicalJson, r as CHART_TYPES, s as chartOfType, t as CANVAS_PRESETS, u as layoutFileContent, v as AGGREGATION_LABEL, x as isAggregate, y as VALUE_FORMATS } from "./layout-iPByu6V0.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-AjNbffwG.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-DU6i_QSn.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 { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -660,6 +660,35 @@ const inputSx$1 = { "& .MuiInputBase-input": {
 } };
 const itemElement = (layoutId, item) => document.querySelector(`[${LAYOUT_ITEM_ATTRIBUTE}="${CSS.escape(layoutItemKey(layoutId, item))}"]`);
 const itemQueryId = (layoutId, item) => itemElement(layoutId, item)?.querySelector(`[data-bm-dashboard-query]`)?.getAttribute("data-bm-dashboard-query") ?? null;
+const SIDEBAR_KEY = "bm-dashboard-devtools:layout-sidebar";
+/** Abaixo disso a lista vai para cima do formulário, em vez de ficar ao lado. */
+const STACK_WIDTH = 640;
+function loadSidebar() {
+	try {
+		return localStorage.getItem(SIDEBAR_KEY) !== "closed";
+	} catch {
+		return true;
+	}
+}
+/** Largura do elemento, acompanhando o redimensionamento do devtools. */
+function useWidth() {
+	const [element, setElement] = useState(null);
+	const [width, setWidth] = useState(Number.POSITIVE_INFINITY);
+	useEffect(() => {
+		if (!element) return;
+		const observer = new ResizeObserver(([entry]) => entry && setWidth(entry.contentRect.width));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [element]);
+	return [setElement, width];
+}
+/** Move o item `from` para antes da posição `to` (`to === list.length` = fim). */
+function moveTo(list, from, to) {
+	const next = [...list];
+	const [item] = next.splice(from, 1);
+	next.splice(to > from ? to - 1 : to, 0, item);
+	return next;
+}
 const uniqueId = (charts, base) => {
 	const ids = new Set(charts.map((chart) => chart.id));
 	if (!ids.has(base)) return base;
@@ -726,6 +755,10 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	const reference = entry ? entry.draft ?? entry.registered : null;
 	const [editing, setEditing] = useState(reference);
 	const [selection, setSelection] = useState(null);
+	const [sidebar, setSidebar] = useState(loadSidebar);
+	const [drag, setDrag] = useState(null);
+	const [rootRef, rootWidth] = useWidth();
+	const [editorRef, editorWidth] = useWidth();
 	const [busy, setBusy] = useState(false);
 	const [actionError, setActionError] = useState(null);
 	const [save, setSave] = useState(null);
@@ -768,7 +801,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 = selectedFilter || selection?.kind === "filter" ? null : charts.find((chart) => chart.id === selection?.key) ?? charts[0] ?? null;
+	const selected = selection?.kind === "filter" || selection?.kind === "canvas" ? 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) => {
@@ -790,21 +823,39 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 		filters: next
 	});
 	const patchFilter = (dimension, change) => setFilters(filters.map((filter) => filter.dimension === dimension ? change(filter) : filter));
-	const swap = (list, index, delta) => {
-		const target = index + delta;
-		if (target < 0 || target >= list.length) return null;
-		const next = [...list];
-		[next[index], next[target]] = [next[target], next[index]];
-		return next;
-	};
-	const move = (index, delta) => {
-		const next = swap(charts, index, delta);
-		if (next) setCharts(next);
-	};
-	const moveFilter = (index, delta) => {
-		const next = swap(filters, index, delta);
-		if (next) setFilters(next);
+	const toggleSidebar = () => {
+		const next = !sidebar;
+		setSidebar(next);
+		try {
+			localStorage.setItem(SIDEBAR_KEY, next ? "open" : "closed");
+		} catch {}
 	};
+	const dragProps = (kind, index, length) => ({
+		dropBefore: drag?.kind === kind && drag.from !== index && drag.to === index,
+		dropAfter: drag?.kind === kind && index === length - 1 && drag.to === length,
+		onDragStart: () => setDrag({
+			kind,
+			from: index,
+			to: index
+		}),
+		onDragOver: (e) => {
+			if (drag?.kind !== kind) return;
+			e.preventDefault();
+			const rect = e.currentTarget.getBoundingClientRect();
+			const to = e.clientY < rect.top + rect.height / 2 ? index : index + 1;
+			if (to !== drag.to) setDrag({
+				...drag,
+				to
+			});
+		},
+		onDrop: () => {
+			if (drag?.kind !== kind) return;
+			if (drag.to !== drag.from && drag.to !== drag.from + 1) if (kind === "chart") setCharts(moveTo(charts, drag.from, drag.to));
+			else setFilters(moveTo(filters, drag.from, drag.to));
+			setDrag(null);
+		},
+		onDragEnd: () => setDrag(null)
+	});
 	const addFilter = () => {
 		const used = new Set(filters.map((filter) => filter.dimension));
 		const dimension = Object.keys(model.dimensions).find((name) => !used.has(name));
@@ -817,11 +868,15 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	};
 	const focus = (item) => {
 		setSelection(item);
+		if (stacked) setSidebar(false);
 		itemElement(layoutKey, item)?.scrollIntoView({
 			behavior: "smooth",
 			block: "center"
 		});
 	};
+	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 hover = (item) => onHover(item && itemQueryId(layoutKey, item));
 	const add = (type, base) => {
 		setAddMenu(null);
@@ -864,6 +919,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs(Box, {
+		ref: rootRef,
 		sx: {
 			display: "flex",
 			flexDirection: "column",
@@ -871,19 +927,45 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 			minHeight: 0
 		},
 		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1,
+					px: 1,
+					py: .5,
+					borderBottom: 1,
+					borderColor: "divider"
+				},
+				children: [/* @__PURE__ */ jsx(SmallButton, {
+					title: sidebar ? "Recolher a lista" : "Mostrar a lista",
+					onClick: toggleSidebar,
+					children: sidebar ? "«" : "☰"
+				}), /* @__PURE__ */ jsx(Typography, {
+					noWrap: true,
+					sx: {
+						fontSize: 12,
+						fontWeight: 700
+					},
+					children: stacked && sidebar ? `Layout ${layoutKey}` : selectedTitle
+				})]
+			}),
 			/* @__PURE__ */ jsxs(Box, {
 				sx: {
 					flex: 1,
 					minHeight: 0,
-					display: "grid",
-					gridTemplateColumns: "280px 1fr"
+					display: "flex"
 				},
-				children: [/* @__PURE__ */ jsxs(Box, {
+				children: [sidebar && /* @__PURE__ */ jsxs(Box, {
 					sx: {
-						borderRight: 1,
-						borderColor: "divider",
 						overflow: "auto",
-						p: 1.5
+						p: 1.5,
+						...stacked ? { flex: 1 } : {
+							width: 280,
+							flexShrink: 0,
+							borderRight: 1,
+							borderColor: "divider"
+						}
 					},
 					children: [
 						entries.length > 1 && /* @__PURE__ */ jsx(TextField, {
@@ -902,9 +984,17 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 								children: [item.registered.id, item.draft ? " · rascunho" : ""]
 							}, item.registered.id))
 						}),
-						/* @__PURE__ */ jsx(CanvasSection, {
-							canvas: editing.canvas,
-							onChange: setCanvas
+						/* @__PURE__ */ jsx(Section, {
+							title: "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",
+								onSelect: () => {
+									setSelection({ kind: "canvas" });
+									if (stacked) setSidebar(false);
+								}
+							})
 						}),
 						/* @__PURE__ */ jsxs(Section, {
 							title: `Filtros (${filters.length})`,
@@ -932,8 +1022,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 									selected: selectedFilter?.dimension === filter.dimension,
 									onSelect: () => focus(item),
 									onHover: (on) => hover(on ? item : null),
-									onUp: index ? () => moveFilter(index, -1) : void 0,
-									onDown: index < filters.length - 1 ? () => moveFilter(index, 1) : void 0,
+									...dragProps("filter", index, filters.length),
 									onRemove: () => setFilters(filters.filter((other) => other.dimension !== filter.dimension))
 								}, filter.dimension);
 							})]
@@ -965,79 +1054,90 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 									selected: chart.id === selected?.id,
 									onSelect: () => focus(item),
 									onHover: (on) => hover(on ? item : null),
-									onUp: index ? () => move(index, -1) : void 0,
-									onDown: index < charts.length - 1 ? () => move(index, 1) : void 0,
+									...dragProps("chart", index, charts.length),
 									onDuplicate: () => add(chart.type, chart),
 									onRemove: () => setCharts(charts.filter((other) => other.id !== chart.id))
 								}, chart.id);
 							})
 						})
 					]
-				}), /* @__PURE__ */ jsxs(Box, {
+				}), !(stacked && sidebar) && /* @__PURE__ */ jsx(Box, {
+					ref: editorRef,
 					sx: {
-						overflow: "auto",
-						p: 1.5
+						flex: 1,
+						minWidth: 0,
+						overflow: "auto"
 					},
-					children: [
-						entry.draft && /* @__PURE__ */ jsxs(Alert, {
-							severity: "warning",
-							sx: { mb: 1.5 },
-							children: [
-								"Rascunho aplicado: a página mostra o layout editado, não o arquivo",
-								" ",
-								/* @__PURE__ */ jsxs("code", { children: [entry.registered.id, ".json"] }),
-								".",
-								capabilities?.saveLayout ? " Use \"Salvar no arquivo\" quando terminar." : " Copie o JSON para o arquivo quando terminar."
-							]
-						}),
-						!!errors.length && /* @__PURE__ */ jsxs(Alert, {
-							severity: "error",
-							sx: { mb: 1.5 },
-							children: ["Layout inválido — as edições não foram aplicadas na página:", errors.map((error) => /* @__PURE__ */ jsx("div", { children: error }, error))]
-						}),
-						!!warnings.length && /* @__PURE__ */ jsx(Alert, {
-							severity: "warning",
-							sx: { mb: 1.5 },
-							children: warnings.map((warning) => /* @__PURE__ */ jsx("div", { children: warning }, warning))
-						}),
-						actionError && /* @__PURE__ */ jsx(Alert, {
-							severity: "error",
-							sx: {
-								mb: 1.5,
-								fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-								fontSize: 12
-							},
-							children: actionError
-						}),
-						selectedFilter ? /* @__PURE__ */ jsx(FilterForm, {
-							filter: selectedFilter,
-							model,
-							formatters: entry.parts.filters ?? [],
-							onChange: (change) => {
-								patchFilter(selectedFilter.dimension, change);
-								setSelection({
-									kind: "filter",
-									key: change(selectedFilter).dimension
-								});
-							}
-						}, `filter:${selectedFilter.dimension}`) : selected ? /* @__PURE__ */ jsx(ChartForm, {
-							chart: selected,
-							model,
-							formatters: entry.parts.charts ?? [],
-							onChange: (change) => {
-								patchChart(selected.id, change);
-								setSelection({
-									kind: "chart",
-									key: change(selected).id
-								});
-							}
-						}, `chart:${selected.id}`) : /* @__PURE__ */ jsx(Empty, { children: "Escolha um filtro ou gráfico, ou use \"+ Novo\"." })
-					]
+					children: /* @__PURE__ */ jsxs(Box, {
+						sx: { p: 1.5 },
+						children: [
+							entry.draft && /* @__PURE__ */ jsxs(Alert, {
+								severity: "warning",
+								sx: { mb: 1.5 },
+								children: [
+									"Rascunho aplicado: a página mostra o layout editado, não o arquivo",
+									" ",
+									/* @__PURE__ */ jsxs("code", { children: [entry.registered.id, ".json"] }),
+									".",
+									capabilities?.saveLayout ? " Use \"Salvar no arquivo\" quando terminar." : " Copie o JSON para o arquivo quando terminar."
+								]
+							}),
+							!!errors.length && /* @__PURE__ */ jsxs(Alert, {
+								severity: "error",
+								sx: { mb: 1.5 },
+								children: ["Layout inválido — as edições não foram aplicadas na página:", errors.map((error) => /* @__PURE__ */ jsx("div", { children: error }, error))]
+							}),
+							!!warnings.length && /* @__PURE__ */ jsx(Alert, {
+								severity: "warning",
+								sx: { mb: 1.5 },
+								children: warnings.map((warning) => /* @__PURE__ */ jsx("div", { children: warning }, warning))
+							}),
+							actionError && /* @__PURE__ */ jsx(Alert, {
+								severity: "error",
+								sx: {
+									mb: 1.5,
+									fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+									fontSize: 12
+								},
+								children: actionError
+							}),
+							selection?.kind === "canvas" ? /* @__PURE__ */ jsx(CanvasForm, {
+								canvas: editing.canvas,
+								columns: formColumns,
+								onChange: setCanvas
+							}) : selectedFilter ? /* @__PURE__ */ jsx(FilterForm, {
+								filter: selectedFilter,
+								model,
+								formatters: entry.parts.filters ?? [],
+								columns: formColumns,
+								onChange: (change) => {
+									patchFilter(selectedFilter.dimension, change);
+									setSelection({
+										kind: "filter",
+										key: change(selectedFilter).dimension
+									});
+								}
+							}, `filter:${selectedFilter.dimension}`) : selected ? /* @__PURE__ */ jsx(ChartForm, {
+								chart: selected,
+								model,
+								formatters: entry.parts.charts ?? [],
+								columns: formColumns,
+								onChange: (change) => {
+									patchChart(selected.id, change);
+									setSelection({
+										kind: "chart",
+										key: change(selected).id
+									});
+								}
+							}, `chart:${selected.id}`) : /* @__PURE__ */ jsx(Empty, { children: "Escolha a tela, um filtro ou um gráfico, ou use \"+ Novo\"." })
+						]
+					})
 				})]
 			}),
 			/* @__PURE__ */ jsxs(Box, {
 				sx: {
 					display: "flex",
+					flexWrap: "wrap",
 					gap: 1,
 					justifyContent: "flex-end",
 					alignItems: "center",
@@ -1120,74 +1220,88 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 }
 const presetLabel = ({ width, height }) => `${width}×${height ?? "auto"}`;
 /** Tamanho fixo da tela (`layout.canvas`): desligado = responsivo. */
-function CanvasSection({ canvas, onChange }) {
+function CanvasForm({ canvas, columns, onChange }) {
 	const preset = canvas && CANVAS_PRESETS.find((item) => presetLabel(item) === presetLabel(canvas));
 	const number = (value) => value === "" ? void 0 : Number(value);
-	return /* @__PURE__ */ jsxs(Section, {
+	return /* @__PURE__ */ jsx(Section, {
 		title: "Tela",
-		children: [/* @__PURE__ */ jsx(Tooltip, {
-			title: "Desenha o dashboard nesse tamanho e escala para caber na tela, mantendo a proporção, em vez de reorganizar os gráficos. A página precisa do <DashboardCanvas>.",
-			placement: "right",
-			children: /* @__PURE__ */ jsx(FormControlLabel, {
-				control: /* @__PURE__ */ jsx(Checkbox, {
-					size: "small",
-					checked: !!canvas,
-					onChange: (e) => onChange(e.target.checked ? CANVAS_PRESETS[0] : void 0)
-				}),
-				label: /* @__PURE__ */ jsx(Typography, {
-					sx: { fontSize: 12 },
-					children: "Tamanho fixo"
-				})
-			})
-		}), canvas && /* @__PURE__ */ jsxs(Box, {
-			sx: {
-				display: "grid",
-				gridTemplateColumns: "1fr 1fr",
-				gap: 1,
-				mt: .5
-			},
-			children: [
-				/* @__PURE__ */ jsx(TextField, {
+		children: /* @__PURE__ */ jsxs(Box, {
+			sx: formGrid(columns),
+			children: [/* @__PURE__ */ jsx(Box, {
+				sx: { gridColumn: "1 / -1" },
+				children: withHint(/* @__PURE__ */ jsx(FormControlLabel, {
+					control: /* @__PURE__ */ jsx(Checkbox, {
+						size: "small",
+						checked: !!canvas,
+						onChange: (e) => onChange(e.target.checked ? CANVAS_PRESETS[0] : void 0)
+					}),
+					label: /* @__PURE__ */ jsx(Typography, {
+						sx: { fontSize: 12 },
+						children: "Tamanho fixo"
+					})
+				}), "Desenha o dashboard nesse tamanho e escala para caber na tela, mantendo a proporção, em vez de reorganizar os gráficos. A página precisa do <DashboardCanvas>.")
+			}), canvas && /* @__PURE__ */ jsxs(Fragment, { children: [
+				field("Predefinido", /* @__PURE__ */ jsx(TextField, {
 					select: true,
 					size: "small",
-					label: "Predefinido",
+					fullWidth: true,
 					value: preset ? presetLabel(preset) : "",
 					onChange: (e) => onChange(CANVAS_PRESETS.find((item) => presetLabel(item) === e.target.value)),
-					sx: {
-						...inputSx$1,
-						gridColumn: "1 / -1"
-					},
+					sx: inputSx$1,
 					children: CANVAS_PRESETS.map((item) => /* @__PURE__ */ jsx(MenuItem, {
 						value: presetLabel(item),
 						children: presetLabel(item)
 					}, presetLabel(item)))
-				}),
-				/* @__PURE__ */ jsx(TextField, {
+				})),
+				field("Largura", /* @__PURE__ */ jsx(TextField, {
 					size: "small",
+					fullWidth: true,
 					type: "number",
-					label: "Largura",
 					value: canvas.width ?? "",
 					onChange: (e) => onChange(withField(canvas, "width", number(e.target.value))),
 					sx: inputSx$1
-				}),
-				/* @__PURE__ */ jsx(TextField, {
+				})),
+				field("Altura mín.", /* @__PURE__ */ jsx(TextField, {
 					size: "small",
+					fullWidth: true,
 					type: "number",
-					label: "Altura mín.",
 					value: canvas.height ?? "",
+					placeholder: "auto",
 					onChange: (e) => onChange(withField(canvas, "height", number(e.target.value))),
 					sx: inputSx$1
-				})
-			]
-		})]
+				}))
+			] })]
+		})
 	});
 }
-function ItemRow({ title, subtitle, selected, onSelect, onHover, onUp, onDown, onDuplicate, onRemove }) {
+function ItemRow({ title, subtitle, selected, onSelect, onHover, onDuplicate, onRemove, dropBefore, dropAfter, onDragStart, onDragOver, onDrop, onDragEnd }) {
+	const marker = {
+		content: "\"\"",
+		position: "absolute",
+		left: 0,
+		right: 0,
+		height: 2,
+		bgcolor: "primary.main"
+	};
 	return /* @__PURE__ */ jsxs(Box, {
 		onClick: onSelect,
-		onMouseEnter: () => onHover(true),
-		onMouseLeave: () => onHover(false),
+		onMouseEnter: () => onHover?.(true),
+		onMouseLeave: () => onHover?.(false),
+		draggable: !!onDragStart,
+		onDragStart: (e) => {
+			if (!onDragStart) return;
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/plain", title);
+			onDragStart();
+		},
+		onDragOver,
+		onDrop: (e) => {
+			e.preventDefault();
+			onDrop?.();
+		},
+		onDragEnd,
 		sx: {
+			position: "relative",
 			display: "flex",
 			alignItems: "center",
 			gap: .5,
@@ -1195,64 +1309,71 @@ function ItemRow({ title, subtitle, selected, onSelect, onHover, onUp, onDown, o
 			py: .5,
 			mb: .5,
 			borderRadius: 1,
-			cursor: "pointer",
+			cursor: onDragStart ? "grab" : "pointer",
 			border: 1,
 			borderColor: selected ? "primary.main" : "divider",
-			"&:hover .item-actions": { visibility: "visible" }
+			"&:hover .item-actions": { visibility: "visible" },
+			"&::before": dropBefore ? {
+				...marker,
+				top: -4
+			} : void 0,
+			"&::after": dropAfter ? {
+				...marker,
+				bottom: -4
+			} : void 0
 		},
-		children: [/* @__PURE__ */ jsxs(Box, {
-			sx: {
-				minWidth: 0,
-				flex: 1
-			},
-			children: [/* @__PURE__ */ jsx(Typography, {
-				noWrap: true,
+		children: [
+			onDragStart && /* @__PURE__ */ jsx(Box, {
+				component: "span",
+				"aria-hidden": true,
 				sx: {
+					color: "text.disabled",
 					fontSize: 12,
-					fontWeight: 700
+					lineHeight: 1,
+					userSelect: "none"
 				},
-				children: title
-			}), /* @__PURE__ */ jsx(Typography, {
-				noWrap: true,
+				children: "⋮⋮"
+			}),
+			/* @__PURE__ */ jsxs(Box, {
 				sx: {
-					fontSize: 11,
-					color: "text.secondary",
-					fontFamily: MONO
+					minWidth: 0,
+					flex: 1
 				},
-				children: subtitle
-			})]
-		}), /* @__PURE__ */ jsxs(Box, {
-			className: "item-actions",
-			onClick: (e) => e.stopPropagation(),
-			sx: {
-				display: "flex",
-				visibility: "hidden"
-			},
-			children: [
-				/* @__PURE__ */ jsx(SmallButton, {
-					title: "Subir",
-					disabled: !onUp,
-					onClick: () => onUp?.(),
-					children: "↑"
-				}),
-				/* @__PURE__ */ jsx(SmallButton, {
-					title: "Descer",
-					disabled: !onDown,
-					onClick: () => onDown?.(),
-					children: "↓"
-				}),
-				onDuplicate && /* @__PURE__ */ jsx(SmallButton, {
+				children: [/* @__PURE__ */ jsx(Typography, {
+					noWrap: true,
+					sx: {
+						fontSize: 12,
+						fontWeight: 700
+					},
+					children: title
+				}), /* @__PURE__ */ jsx(Typography, {
+					noWrap: true,
+					sx: {
+						fontSize: 11,
+						color: "text.secondary",
+						fontFamily: MONO
+					},
+					children: subtitle
+				})]
+			}),
+			(onDuplicate || onRemove) && /* @__PURE__ */ jsxs(Box, {
+				className: "item-actions",
+				onClick: (e) => e.stopPropagation(),
+				sx: {
+					display: "flex",
+					visibility: selected ? "visible" : "hidden"
+				},
+				children: [onDuplicate && /* @__PURE__ */ jsx(SmallButton, {
 					title: "Duplicar",
 					onClick: onDuplicate,
 					children: "⧉"
-				}),
-				/* @__PURE__ */ jsx(SmallButton, {
+				}), onRemove && /* @__PURE__ */ jsx(SmallButton, {
 					title: "Remover",
 					onClick: onRemove,
 					children: "×"
-				})
-			]
-		})]
+				})]
+			})
+		]
 	});
 }
 function SmallButton({ title, disabled, onClick, children }) {
@@ -1271,7 +1392,7 @@ function SmallButton({ title, disabled, onClick, children }) {
 		}) })
 	});
 }
-function ChartForm({ chart, model, formatters, onChange }) {
+function ChartForm({ chart, model, formatters, columns, onChange }) {
 	const set = (key, value) => onChange((current) => withField(current, key, value));
 	return /* @__PURE__ */ jsx(FieldsForm, {
 		fields: CHART_FIELDS[chart.type],
@@ -1280,6 +1401,7 @@ function ChartForm({ chart, model, formatters, onChange }) {
 		model,
 		formatters,
 		columns: chartColumns(chart),
+		formColumns: columns,
 		chosenDimensions: chartReferences(chart).dimensions,
 		header: /* @__PURE__ */ jsxs(Fragment, { children: [field("Tipo", /* @__PURE__ */ jsx(TextField, {
 			select: true,
@@ -1302,7 +1424,7 @@ function ChartForm({ chart, model, formatters, onChange }) {
 		}), "Identificador no JSON (letras, números, \"-\" e \"_\")")] })
 	});
 }
-function FilterForm({ filter, model, formatters, onChange }) {
+function FilterForm({ filter, model, formatters, columns, onChange }) {
 	return /* @__PURE__ */ jsx(FieldsForm, {
 		fields: FILTER_FIELDS,
 		values: filter,
@@ -1310,11 +1432,12 @@ function FilterForm({ filter, model, formatters, onChange }) {
 		model,
 		formatters,
 		columns: [],
+		formColumns: columns,
 		chosenDimensions: [filter.dimension]
 	});
 }
 /** Formulário gerado dos `FieldSpec` (campos do tipo de gráfico ou do filtro). */
-function FieldsForm({ fields, values, onSet: set, model, formatters, columns, chosenDimensions, header }) {
+function FieldsForm({ fields, values, onSet: set, model, formatters, columns, formColumns, chosenDimensions, header }) {
 	const dimensions = Object.entries(model.dimensions).map(([name, dim]) => ({
 		name,
 		label: dim.label
@@ -1484,21 +1607,16 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, ch
 		}
 	};
 	const sections = [...new Set(entries.map(([, spec]) => spec.section))];
-	const grid = {
-		display: "grid",
-		gap: 1.5,
-		gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
-	};
 	const wide = (spec, key) => key === "title" || spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters";
 	return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => {
 		const inSection = entries.filter(([, spec]) => spec.section === section);
 		return /* @__PURE__ */ jsx(Section, {
 			title: section,
 			children: /* @__PURE__ */ jsxs(Box, {
-				sx: grid,
+				sx: formGrid(formColumns),
 				children: [section === sections[0] && header, inSection.map(([key, spec]) => /* @__PURE__ */ jsx(Box, {
 					sx: {
-						gridColumn: wide(spec, key) ? "span 2" : void 0,
+						gridColumn: wide(spec, key) && formColumns > 1 ? "span 2" : void 0,
 						alignSelf: spec.kind === "boolean" ? "end" : void 0
 					},
 					children: spec.kind === "boolean" ? withHint(input(key, spec), spec.hint) : field(spec.label, input(key, spec), spec.hint)
@@ -1507,6 +1625,11 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, ch
 		}, section);
 	}) });
 }
+const formGrid = (columns) => ({
+	display: "grid",
+	gap: 1.5,
+	gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+});
 /** Rótulo padrão (do dicionário) como placeholder dos campos `*Label` do combo. */
 function labelPlaceholder(key, values, model) {
 	if (key === "label" && typeof values.dimension === "string") return model.dimensions[values.dimension]?.label ?? values.dimension;
@@ -6258,4 +6381,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-ByrFb6HT.js.map
+//# sourceMappingURL=DashboardDevtools-DLhEr3fN.js.map