@bluemarble/bi 0.3.1 → 0.5.0

package/dist/{DashboardDevtools-C4E9afPT.js → DashboardDevtools-6v5HDe-A.js}

@@ -1,7 +1,7 @@
-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 { A as measureHome, C as AGGREGATION_LABEL, E as isAggregate, M as parseColumnRef, O as validateModel, P as referencedTables, S as AGGREGATIONS, _ as validateLayout, a as FILTER_FIELDS, c as chartOfType, d as filterReferences, h as orderedColumns, i as CARD_FIELDS, j as modelEdges, 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, v as canonicalJson, w as VALUE_FORMATS, x as toModelCode } from "./layout-QuOYFmp1.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-kUKcdbc8.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 { d as useDashboard, f as errorMessage, h as parseLayoutItemKey, m as layoutItemKey, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-D3JzCd6x.js";
+import { Alert, Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControlLabel, IconButton, List, ListItemButton, ListSubheader, Menu, MenuItem, MenuList, Paper, Popover, 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";
 import { createPortal } from "react-dom";
@@ -960,8 +960,8 @@ const chartSummary = (chart, types) => {
 };
 /**
 * Editor dos layouts da página (filtros do `<DashboardFilters>` e gráficos do `<DashboardCharts>`).
-* Cada edição válida vira rascunho na hora — a página re-renderiza com ele — e "Salvar no arquivo"
-* grava o JSON do layout.
+* Como no modelo: as edições ficam no editor até "Aplicar na página" (vira rascunho e a página
+* re-renderiza com ele); "Salvar no arquivo" grava o JSON do layout com o que está no editor.
 */
 function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	const { layouts } = devtools;
@@ -970,7 +970,8 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	const [layoutId, setLayoutId] = useState(null);
 	const entry = entries.find((item) => item.registered.id === layoutId) ?? entries[0] ?? null;
 	const reference = entry ? entry.draft ?? entry.registered : null;
-	const [editing, setEditing] = useState(reference);
+	const pendingOrReference = () => (entry && layouts.pendingOf(entry.registered.id)) ?? reference;
+	const [editing, setEditingState] = useState(pendingOrReference);
 	const [selection, setSelection] = useState(null);
 	const [sidebar, setSidebar] = useState(loadSidebar);
 	const [drag, setDrag] = useState(null);
@@ -981,7 +982,19 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	const [save, setSave] = useState(null);
 	const [addMenu, setAddMenu] = useState(null);
 	const referenceKey = canonicalJson(reference);
-	useEffect(() => setEditing(reference), [referenceKey]);
+	/** Muda o editor e guarda como pendente o que difere do que a página mostra. */
+	const setEditing = (next) => {
+		setEditingState(next);
+		if (entry) layouts.setPending(entry.registered.id, next && canonicalJson(next) !== referenceKey ? next : null);
+	};
+	const firstRun = useRef(true);
+	useEffect(() => {
+		if (firstRun.current) {
+			firstRun.current = false;
+			return;
+		}
+		setEditingState(pendingOrReference());
+	}, [referenceKey]);
 	useEffect(() => {
 		const parsed = picked && parseLayoutItemKey(picked.item);
 		if (!parsed) return;
@@ -1025,13 +1038,16 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	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 dirty = canonicalJson(editing) !== referenceKey;
 	const update = (next) => {
 		setEditing(next);
 		setSave(null);
-		if (!validateLayout(next, chartTypes).length) {
-			devtools.store.expectRefetch();
-			layouts.setDraft(entry.registered.id, next);
-		}
+	};
+	const apply = () => {
+		if (validateLayout(editing, chartTypes).length) return;
+		devtools.store.expectRefetch();
+		layouts.setPending(entry.registered.id, null);
+		layouts.setDraft(entry.registered.id, editing);
 	};
 	const setCharts = (next) => update({
 		...editing,
@@ -1134,6 +1150,11 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 				} }
 			});
 			setSave(mode === "write" ? null : result.devtools?.save ?? null);
+			if (mode === "write" && editing && entry) {
+				devtools.store.expectRefetch();
+				layouts.setPending(entry.registered.id, null);
+				layouts.setDraft(entry.registered.id, editing);
+			}
 		} catch (error) {
 			setActionError(errorMessage(error));
 		} finally {
@@ -1398,29 +1419,53 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 					borderColor: "divider"
 				},
 				children: [
+					dirty && /* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontSize: 12,
+							color: "warning.main",
+							mr: "auto"
+						},
+						children: "Edições não aplicadas"
+					}),
 					/* @__PURE__ */ jsx(CopyButton, {
 						text: layoutFileContent(editing),
 						label: "Copiar JSON"
 					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "small",
+						disabled: !dirty,
+						onClick: () => setEditing(reference),
+						title: "Desfaz as edições ainda não aplicadas",
+						children: "Desfazer"
+					}),
 					/* @__PURE__ */ jsx(Button, {
 						size: "small",
 						color: "warning",
-						disabled: !entry.draft && !differsFromFile,
+						disabled: !entry.draft,
 						onClick: () => {
 							devtools.store.expectRefetch();
+							layouts.setPending(entry.registered.id, null);
 							layouts.setDraft(entry.registered.id, null);
-							setEditing(entry.registered);
+							setEditingState(entry.registered);
 						},
-						title: "Volta ao layout do arquivo",
+						title: "Volta a página e o editor ao layout do arquivo",
 						children: "Descartar rascunho"
 					}),
 					capabilities?.saveLayout && /* @__PURE__ */ jsx(Button, {
 						size: "small",
-						variant: "contained",
+						variant: "outlined",
 						disabled: !differsFromFile || !!errors.length || busy,
 						onClick: () => saveFile("preview"),
-						title: `Reescreve ${entry.registered.id}.json`,
+						title: `Reescreve ${entry.registered.id}.json com o que está no editor`,
 						children: busy ? "Gerando…" : "Salvar no arquivo"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "small",
+						variant: "contained",
+						disabled: !dirty || !!errors.length,
+						onClick: apply,
+						title: "Mostra as edições na página (sem gravar o arquivo)",
+						children: "Aplicar na página"
 					})
 				]
 			}),
@@ -1646,16 +1691,19 @@ function SmallButton({ title, disabled, onClick, children }) {
 }
 function ChartForm({ chart, cards, types, model, formatters, columns, onChange }) {
 	const set = (key, value) => onChange((current) => withField(current, key, value));
+	const setMany = (changes) => onChange((current) => Object.entries(changes).reduce((chart, [key, value]) => withField(chart, key, value), current));
 	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,
+		onSetMany: setMany,
 		model,
 		formatters,
 		columns: chartColumns(chart, types),
 		formColumns: columns,
 		chosenDimensions: chartReferences(chart, types).dimensions,
+		chosenMeasures: chartReferences(chart, types).measures,
 		header: /* @__PURE__ */ jsxs(Fragment, { children: [field("Tipo", /* @__PURE__ */ jsxs(TextField, {
 			select: true,
 			size: "small",
@@ -1703,7 +1751,7 @@ function FilterForm({ filter, model, formatters, columns, onChange }) {
 	});
 }
 /** Formulário gerado dos `FieldSpec` (campos do tipo de gráfico ou do filtro). */
-function FieldsForm({ fields, values, onSet: set, model, formatters, columns, formColumns, chosenDimensions, header }) {
+function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters, columns, formColumns, chosenDimensions, chosenMeasures = [], header }) {
 	const dimensions = Object.entries(model.dimensions).map(([name, dim]) => ({
 		name,
 		label: dim.label
@@ -1713,6 +1761,106 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 		label: measure.label
 	}));
 	const entries = Object.entries(fields);
+	const keyOf = (kind) => entries.find(([, spec]) => spec.kind === kind)?.[0];
+	const labelsKey = keyOf("labels");
+	const formatsKey = keyOf("formats");
+	const columnOptions = !!(labelsKey || formatsKey);
+	const formattersKey = columnOptions ? keyOf("formatters") : void 0;
+	const single = (kind) => entries.filter(([, spec]) => spec.kind === kind);
+	const formatterKey = columnOptions && single("dimension").length === 1 && single("formatter").length === 1 ? single("formatter")[0]?.[0] : void 0;
+	const labels = labelsKey && values[labelsKey] || {};
+	const formats = formatsKey && values[formatsKey] || {};
+	const dimensionFormatters = formattersKey && values[formattersKey] || {};
+	const optionsButton = (kind, name) => {
+		if (!columnOptions || !name) return null;
+		const canFormatter = kind === "dimension" && !!(formattersKey || formatterKey);
+		return /* @__PURE__ */ jsx(ColumnOptions, {
+			kind,
+			name,
+			model,
+			label: labelsKey ? labels[name] ?? "" : void 0,
+			onLabel: (text) => labelsKey && set(labelsKey, pruned(withField(labels, name, text), columns)),
+			format: kind === "measure" && formatsKey ? formats[name] ?? {} : void 0,
+			onFormat: (format) => {
+				if (!formatsKey) return;
+				const map = { ...formats };
+				if (Object.keys(format).length) map[name] = format;
+				else delete map[name];
+				set(formatsKey, pruned(map, chosenMeasures));
+			},
+			formatter: !canFormatter ? void 0 : formattersKey ? dimensionFormatters[name] ?? "" : (formatterKey && values[formatterKey]) ?? "",
+			formatters,
+			onFormatter: (formatter) => {
+				if (formattersKey) set(formattersKey, pruned(withField(dimensionFormatters, name, formatter), chosenDimensions));
+				else if (formatterKey) set(formatterKey, formatter || void 0);
+			},
+			onReset: () => {
+				const changes = {};
+				if (labelsKey) changes[labelsKey] = pruned(withField(labels, name, void 0), columns);
+				if (formatsKey && kind === "measure") changes[formatsKey] = pruned(withField(formats, name, void 0), chosenMeasures);
+				if (canFormatter && formattersKey) changes[formattersKey] = pruned(withField(dimensionFormatters, name, void 0), chosenDimensions);
+				else if (canFormatter && formatterKey) changes[formatterKey] = void 0;
+				if (onSetMany) onSetMany(changes);
+				else for (const [key, value] of Object.entries(changes)) set(key, value);
+			}
+		});
+	};
+	const merged = (() => {
+		for (const [dimensionsKey, spec] of entries) {
+			if (spec.kind !== "dimensions") continue;
+			const pair = entries.find(([, other]) => other.kind === "measures" && other.section === spec.section);
+			if (!pair) continue;
+			const order = entries.find(([, other]) => other.kind === "columnOrder")?.[0];
+			return {
+				dimensions: dimensionsKey,
+				dimensionsSpec: spec,
+				measures: pair[0],
+				measuresSpec: pair[1],
+				order
+			};
+		}
+	})();
+	const mergedInput = (pair) => {
+		const dimensionNames = values[pair.dimensions] ?? [];
+		const measureNames = values[pair.measures] ?? [];
+		const all = [...dimensionNames.map((name) => ({
+			kind: "dimension",
+			name
+		})), ...measureNames.map((name) => ({
+			kind: "measure",
+			name
+		}))];
+		const order = pair.order ? values[pair.order] : void 0;
+		const sortedNames = orderedColumns(all.map((item) => item.name), order);
+		const pool = [...all];
+		const items = sortedNames.map((name) => {
+			const index = pool.findIndex((item) => item.name === name);
+			return pool.splice(index, 1)[0];
+		});
+		const required = !!pair.dimensionsSpec.required || !!pair.measuresSpec.required;
+		return /* @__PURE__ */ jsx(ColumnList, {
+			items,
+			options: {
+				dimension: options(pair.dimensionsSpec),
+				measure: options(pair.measuresSpec)
+			},
+			extra: (item) => optionsButton(item.kind, item.name),
+			error: !!pair.measuresSpec.required && !measureNames.length || !!pair.dimensionsSpec.required && !dimensionNames.length || required && !items.length,
+			onChange: (next) => {
+				const dimensionList = next.filter((item) => item.kind === "dimension");
+				const measureList = next.filter((item) => item.kind === "measure");
+				const names = next.map((item) => item.name);
+				const standard = [...dimensionList, ...measureList].map((item) => item.name);
+				const changes = {
+					[pair.dimensions]: dimensionList.length || pair.dimensionsSpec.required ? dimensionList.map((item) => item.name) : void 0,
+					[pair.measures]: measureList.length || pair.measuresSpec.required ? measureList.map((item) => item.name) : void 0
+				};
+				if (pair.order) changes[pair.order] = names.join("\0") === standard.join("\0") ? void 0 : names;
+				if (onSetMany) onSetMany(changes);
+				else for (const [key, value] of Object.entries(changes)) set(key, value);
+			}
+		});
+	};
 	const options = (spec) => {
 		switch (spec.kind) {
 			case "dimension":
@@ -1742,37 +1890,11 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 				onChange: (e) => set(key, e.target.value),
 				sx: inputSx$1
 			});
-			case "color": {
-				const fallback = spec.default;
-				return /* @__PURE__ */ jsxs(Box, {
-					sx: {
-						display: "flex",
-						gap: .5,
-						alignItems: "center"
-					},
-					children: [/* @__PURE__ */ jsx(Box, {
-						component: "input",
-						type: "color",
-						value: value ?? fallback,
-						onChange: (e) => set(key, e.target.value),
-						sx: {
-							width: 32,
-							height: 30,
-							p: 0,
-							border: 0,
-							bgcolor: "transparent",
-							cursor: "pointer"
-						}
-					}), /* @__PURE__ */ jsx(TextField, {
-						size: "small",
-						fullWidth: true,
-						value: value ?? "",
-						placeholder: fallback,
-						onChange: (e) => set(key, e.target.value),
-						sx: inputSx$1
-					})]
-				});
-			}
+			case "color": return /* @__PURE__ */ jsx(ColorInput, {
+				value,
+				fallback: spec.default,
+				onCommit: (color) => set(key, color)
+			});
 			case "boolean": {
 				const fallback = spec.default;
 				return /* @__PURE__ */ jsx(FormControlLabel, {
@@ -1818,12 +1940,24 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 					sx: inputSx$1
 				});
 			case "dimensions":
-			case "measures": return /* @__PURE__ */ jsx(MultiNameSelect, {
-				value: value ?? [],
-				options: options(spec),
-				required: !!spec.required,
-				onChange: (next) => set(key, next.length || spec.required ? next : void 0)
-			});
+			case "measures": {
+				const kind = spec.kind === "dimensions" ? "dimension" : "measure";
+				if (merged?.dimensions === key) return mergedInput(merged);
+				const names = value ?? [];
+				return /* @__PURE__ */ jsx(ColumnList, {
+					items: names.map((name) => ({
+						kind,
+						name
+					})),
+					options: { [kind]: options(spec) },
+					extra: (item) => optionsButton(item.kind, item.name),
+					error: !!spec.required && !names.length,
+					onChange: (next) => {
+						const list = next.map((item) => item.name);
+						set(key, list.length || spec.required ? list : void 0);
+					}
+				});
+			}
 			case "formatters": {
 				const map = value ?? {};
 				if (!chosenDimensions.length) return /* @__PURE__ */ jsx(Typography, {
@@ -1863,17 +1997,37 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 					}, dimension))
 				});
 			}
-			default: return /* @__PURE__ */ jsx(NameSelect, {
-				value: value ?? "",
-				options: options(spec),
-				required: spec.required,
-				emptyLabel: spec.kind === "enum" && spec.default ? `padrão (${spec.labels?.[spec.default] ?? spec.default})` : void 0,
-				onChange: (name) => set(key, name === spec.default ? void 0 : name)
-			});
+			default: {
+				const select = /* @__PURE__ */ jsx(NameSelect, {
+					value: value ?? "",
+					options: options(spec),
+					required: spec.required,
+					emptyLabel: spec.kind === "enum" && spec.default ? `padrão (${spec.labels?.[spec.default] ?? spec.default})` : void 0,
+					onChange: (name) => set(key, name === spec.default ? void 0 : name)
+				});
+				const button = spec.kind === "dimension" || spec.kind === "measure" ? optionsButton(spec.kind, value) : null;
+				return button ? /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						gap: .25,
+						alignItems: "center"
+					},
+					children: [select, button]
+				}) : select;
+			}
 		}
 	};
-	const sections = [...new Set(entries.map(([, spec]) => spec.section))];
-	const wide = (spec, key) => key === "title" || spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters";
+	const hidden = new Set([
+		merged?.measures,
+		...entries.filter(([, spec]) => spec.kind === "columnOrder").map(([key]) => key),
+		labelsKey,
+		formatsKey,
+		formattersKey,
+		formatterKey
+	].filter(Boolean));
+	const sections = [...new Set(entries.filter(([key]) => !hidden.has(key)).map(([, spec]) => spec.section))];
+	const fullRow = (spec) => spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters";
+	const gridColumn = (spec, key) => fullRow(spec) ? "1 / -1" : key === "title" && formColumns > 1 ? "span 2" : void 0;
 	return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => {
 		const inSection = entries.filter(([, spec]) => spec.section === section);
 		return /* @__PURE__ */ jsx(Section, {
@@ -1881,28 +2035,314 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 			collapseKey: `layout:form:${section}`,
 			children: /* @__PURE__ */ jsxs(Box, {
 				sx: formGrid(formColumns),
-				children: [section === sections[0] && header, inSection.map(([key, spec]) => /* @__PURE__ */ jsx(Box, {
+				children: [section === sections[0] && header, inSection.filter(([key]) => !hidden.has(key)).map(([key, spec]) => /* @__PURE__ */ jsx(Box, {
 					sx: {
-						gridColumn: wide(spec, key) && formColumns > 1 ? "span 2" : void 0,
+						gridColumn: gridColumn(spec, key),
 						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)
+					children: spec.kind === "boolean" ? withHint(input(key, spec), spec.hint) : merged?.dimensions === key ? field("Dimensões e medidas", input(key, spec), `${merged.order ? "Em qualquer ordem: é a ordem das colunas. " : ""}${[spec.hint, merged.measuresSpec.hint].filter(Boolean).join(" · ")}`) : field(spec.label, input(key, spec), spec.hint)
 				}, key))]
 			})
 		}, section);
 	}) });
 }
+/**
+* Cor com o seletor nativo. Mexer no seletor só muda a amostra: o valor vai para o editor quando
+* ele fecha — o `change` nativo; o `onChange` do React dispara a cada movimento. O texto entra no
+* Enter ou ao sair do campo.
+*/
+function ColorInput({ value, fallback, onCommit }) {
+	const [picking, setPicking] = useState(null);
+	const [typing, setTyping] = useState(null);
+	const picker = useRef(null);
+	const commit = useRef(onCommit);
+	useEffect(() => {
+		commit.current = onCommit;
+	});
+	useEffect(() => {
+		const input = picker.current;
+		if (!input) return;
+		const listener = () => {
+			commit.current(input.value);
+			setPicking(null);
+		};
+		input.addEventListener("change", listener);
+		return () => input.removeEventListener("change", listener);
+	}, []);
+	const commitText = () => {
+		if (typing === null) return;
+		const text = typing.trim();
+		setTyping(null);
+		if (text !== (value ?? "")) onCommit(text || void 0);
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			gap: .5,
+			alignItems: "center"
+		},
+		children: [/* @__PURE__ */ jsx(Box, {
+			component: "input",
+			type: "color",
+			ref: picker,
+			value: picking ?? value ?? fallback,
+			onChange: (e) => setPicking(e.target.value),
+			sx: {
+				width: 32,
+				height: 30,
+				p: 0,
+				border: 0,
+				bgcolor: "transparent",
+				cursor: "pointer"
+			}
+		}), /* @__PURE__ */ jsx(TextField, {
+			size: "small",
+			fullWidth: true,
+			value: typing ?? picking ?? value ?? "",
+			placeholder: fallback,
+			onChange: (e) => setTyping(e.target.value),
+			onBlur: commitText,
+			onKeyDown: (e) => {
+				if (e.key === "Enter") commitText();
+				if (e.key === "Escape") setTyping(null);
+			},
+			sx: inputSx$1
+		})]
+	});
+}
+/** Sem as chaves de colunas que saíram do gráfico; vazio = `undefined` (sai do JSON). */
+function pruned(map, keep) {
+	const next = Object.fromEntries(Object.entries(map).filter(([key]) => keep.includes(key)));
+	return Object.keys(next).length ? next : void 0;
+}
+const FORMAT_LABEL = {
+	number: "número",
+	integer: "inteiro",
+	currency: "R$",
+	percent: "%"
+};
+/** Número de exemplo da prévia do formato. */
+const SAMPLE = 1234567.891;
+/**
+* Ícone à direita de uma dimensão/medida que abre as opções dela no gráfico: rótulo, formatter
+* (dimensão) e formato (medida). Vazio = o do dicionário do modelo (que aparece como placeholder).
+* Opção ausente (`undefined`) = o tipo do gráfico não tem esse campo.
+*/
+function ColumnOptions({ kind, name, model, label, onLabel, format, onFormat, formatter, formatters, onFormatter, onReset }) {
+	const [anchor, setAnchor] = useState(null);
+	const fromModel = kind === "measure" ? model.measures[name] : model.dimensions[name];
+	const measureMeta = kind === "measure" ? model.measures[name] : void 0;
+	const customized = !!label || !!formatter || format !== void 0 && Object.keys(format).length > 0;
+	const setFormat = (key, next) => onFormat(withField(format ?? {}, key, next));
+	const decimals = format?.decimals;
+	const resolved = {
+		...measureMeta?.format !== void 0 && { format: measureMeta.format },
+		...measureMeta?.decimals !== void 0 && { decimals: measureMeta.decimals },
+		...format
+	};
+	const small = {
+		...inputSx$1,
+		"& .MuiInputBase-input": {
+			fontFamily: MONO,
+			fontSize: 12,
+			px: 1
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		title: customized ? "Opções da coluna (personalizada)" : "Opções da coluna",
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "small",
+			"aria-label": `Opções de ${name}`,
+			onClick: (e) => setAnchor(e.currentTarget),
+			sx: {
+				p: .25,
+				fontSize: 14,
+				color: customized ? "primary.main" : "text.secondary"
+			},
+			children: "⚙"
+		})
+	}), /* @__PURE__ */ jsxs(Popover, {
+		open: !!anchor,
+		anchorEl: anchor,
+		onClose: () => setAnchor(null),
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		},
+		slotProps: { paper: { sx: {
+			p: 1.5,
+			width: 320
+		} } },
+		children: [/* @__PURE__ */ jsxs(Typography, {
+			sx: {
+				fontSize: 12,
+				fontWeight: 700,
+				mb: 1
+			},
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					component: "span",
+					sx: {
+						color: KIND_STYLE[kind].color,
+						mr: .75
+					},
+					children: KIND_STYLE[kind].icon
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					component: "span",
+					sx: { fontFamily: MONO },
+					children: name
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					component: "span",
+					sx: {
+						color: "text.secondary",
+						fontWeight: 400,
+						ml: 1
+					},
+					children: KIND_STYLE[kind].noun
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 1.25
+			},
+			children: [
+				label !== void 0 && field("Rótulo", /* @__PURE__ */ jsx(TextField, {
+					size: "small",
+					fullWidth: true,
+					autoFocus: true,
+					value: label,
+					placeholder: fromModel?.label ?? name,
+					onChange: (e) => onLabel(e.target.value),
+					sx: inputSx$1
+				}), "Legenda, tooltip e cabeçalho, só neste gráfico; vazio = rótulo do dicionário"),
+				formatter !== void 0 && field("Formatter", /* @__PURE__ */ jsx(NameSelect, {
+					value: formatter,
+					options: formatters.map((option) => ({ name: option })),
+					onChange: onFormatter
+				}), "Formatters passados ao <DashboardCharts formatters={{ ... }}> da página"),
+				format !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "grid",
+							gridTemplateColumns: "1fr 1fr",
+							gap: 1
+						},
+						children: [
+							field("Formato", /* @__PURE__ */ jsxs(TextField, {
+								select: true,
+								size: "small",
+								fullWidth: true,
+								value: format.format ?? "",
+								onChange: (e) => setFormat("format", e.target.value || void 0),
+								slotProps: { select: { displayEmpty: true } },
+								sx: small,
+								children: [/* @__PURE__ */ jsx(MenuItem, {
+									value: "",
+									children: /* @__PURE__ */ jsxs("em", { children: ["padrão", measureMeta?.format ? ` (${FORMAT_LABEL[measureMeta.format]})` : ""] })
+								}), VALUE_FORMATS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+									value: option,
+									children: FORMAT_LABEL[option]
+								}, option))]
+							})),
+							field("Casas decimais", /* @__PURE__ */ jsx(TextField, {
+								size: "small",
+								fullWidth: true,
+								type: "number",
+								value: decimals ?? "",
+								placeholder: measureMeta?.decimals === void 0 ? "padrão" : String(measureMeta.decimals),
+								error: decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0 || decimals > 10),
+								onChange: (e) => setFormat("decimals", e.target.value.trim() === "" ? void 0 : Number(e.target.value)),
+								slotProps: { htmlInput: {
+									min: 0,
+									max: 10
+								} },
+								sx: small
+							})),
+							field("Prefixo", /* @__PURE__ */ jsx(TextField, {
+								size: "small",
+								fullWidth: true,
+								value: format.prefix ?? "",
+								placeholder: "ex.: ~",
+								onChange: (e) => setFormat("prefix", e.target.value),
+								sx: small
+							})),
+							field("Sufixo", /* @__PURE__ */ jsx(TextField, {
+								size: "small",
+								fullWidth: true,
+								value: format.suffix ?? "",
+								placeholder: "ex.:  t",
+								onChange: (e) => setFormat("suffix", e.target.value),
+								sx: small
+							}))
+						]
+					}),
+					/* @__PURE__ */ jsx(FormControlLabel, {
+						sx: { m: 0 },
+						control: /* @__PURE__ */ jsx(Checkbox, {
+							size: "small",
+							sx: {
+								p: .25,
+								mr: .5
+							},
+							checked: format.compact ?? false,
+							onChange: (e) => setFormat("compact", e.target.checked || void 0)
+						}),
+						label: /* @__PURE__ */ jsx(Typography, {
+							sx: { fontSize: 12 },
+							children: "Notação curta (1,2 mil / 3,4 mi)"
+						})
+					}),
+					/* @__PURE__ */ jsxs(Typography, {
+						sx: {
+							fontSize: 11,
+							color: "text.secondary"
+						},
+						children: [
+							"Exemplo:",
+							" ",
+							/* @__PURE__ */ jsx(Box, {
+								component: "span",
+								sx: {
+									fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+									color: "text.primary"
+								},
+								children: formatMeasure(SAMPLE, resolved, 2)
+							})
+						]
+					})
+				] }),
+				/* @__PURE__ */ jsx(Box, {
+					sx: {
+						display: "flex",
+						justifyContent: "flex-end"
+					},
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "small",
+						disabled: !customized,
+						onClick: onReset,
+						children: "Restaurar padrão"
+					})
+				})
+			]
+		})]
+	})] });
+}
 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. */
+/** Rótulo padrão (do dicionário) como placeholder do `label` do filtro. */
 function labelPlaceholder(key, values, model) {
 	if (key === "label" && typeof values.dimension === "string") return model.dimensions[values.dimension]?.label ?? values.dimension;
-	const measureKey = key.endsWith("Label") ? key.slice(0, -5) : null;
-	const measure = measureKey && values[measureKey];
-	return typeof measure === "string" ? model.measures[measure]?.label ?? measure : void 0;
 }
 function field(label, input, hint) {
 	return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Typography, {
@@ -1967,52 +2407,205 @@ function NameSelect({ value, options, required, emptyLabel, onChange }) {
 		]
 	});
 }
-/** Lista ordenada de nomes: a ordem de escolha é a ordem das séries/colunas. */
-function MultiNameSelect({ value, options, required, onChange }) {
-	const unknown = value.filter((name) => !options.some((option) => option.name === name));
-	return /* @__PURE__ */ jsxs(TextField, {
-		select: true,
-		size: "small",
-		fullWidth: true,
-		value,
-		error: !!unknown.length || required && !value.length,
-		onChange: (e) => {
-			const next = e.target.value;
-			onChange(next);
+const KIND_STYLE = {
+	dimension: {
+		icon: "◇",
+		color: "#4dabf7",
+		noun: "dimensão",
+		group: "Dimensões"
+	},
+	measure: {
+		icon: "Σ",
+		color: "#F58220",
+		noun: "medida",
+		group: "Medidas"
+	}
+};
+/**
+* Lista ordenada, uma linha por item: a ordem é a das séries/colunas. Reordena arrastando pela alça
+* (⋮⋮) ou com ↑/↓; um único "+ adicionar" no fim (já com o nome escolhido, sem linha vazia). Com
+* dois tipos (dimensões e medidas juntas), o adicionar agrupa as opções por tipo e a ordem mistura
+* os dois.
+*/
+function ColumnList({ items, options, extra, error, onChange }) {
+	const [drag, setDrag] = useState(null);
+	const [grabbed, setGrabbed] = useState(null);
+	const kinds = Object.keys(options);
+	const mixed = kinds.length > 1;
+	const used = (kind, name) => items.some((item) => item.kind === kind && item.name === name);
+	const free = (kind, keep) => (options[kind] ?? []).filter((option) => option.name === keep || !used(kind, option.name));
+	const replace = (index, name) => onChange(items.map((item, i) => i === index ? {
+		...item,
+		name
+	} : item));
+	const marker = {
+		content: "\"\"",
+		position: "absolute",
+		left: 0,
+		right: 0,
+		height: 2,
+		bgcolor: "primary.main"
+	};
+	const addable = kinds.filter((kind) => free(kind).length);
+	const addOptions = addable.flatMap((kind) => [...mixed ? [/* @__PURE__ */ jsx(ListSubheader, { children: KIND_STYLE[kind].group }, `h:${kind}`)] : [], ...free(kind).map((option) => /* @__PURE__ */ jsxs(MenuItem, {
+		value: `${kind}:${option.name}`,
+		children: [mixed && /* @__PURE__ */ jsx(Box, {
+			component: "span",
+			sx: {
+				color: KIND_STYLE[kind].color,
+				mr: .75
+			},
+			children: KIND_STYLE[kind].icon
+		}), /* @__PURE__ */ jsx(OptionText, { option })]
+	}, `${kind}:${option.name}`))]);
+	const addNoun = mixed ? kinds.map((kind) => KIND_STYLE[kind].noun).join(" ou ") : KIND_STYLE[kinds[0] ?? "measure"].noun;
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: .5,
+			maxWidth: 760
 		},
-		slotProps: { select: {
-			multiple: true,
-			renderValue: (selected) => selected.join(", ") || "(nenhum)",
-			displayEmpty: true
-		} },
-		sx: inputSx$1,
-		children: [unknown.map((name) => /* @__PURE__ */ jsxs(MenuItem, {
-			value: name,
-			children: [name, " (não existe)"]
-		}, name)), options.map((option) => /* @__PURE__ */ jsxs(MenuItem, {
-			value: option.name,
-			dense: true,
+		children: [items.map((item, index) => /* @__PURE__ */ jsxs(Box, {
+			draggable: grabbed === index,
+			onDragStart: (e) => {
+				e.dataTransfer.effectAllowed = "move";
+				e.dataTransfer.setData("text/plain", item.name);
+				setDrag({
+					from: index,
+					to: index
+				});
+			},
+			onDragOver: (e) => {
+				if (!drag) 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: (e) => {
+				e.preventDefault();
+				if (drag && drag.to !== drag.from && drag.to !== drag.from + 1) onChange(moveTo(items, drag.from, drag.to));
+				setDrag(null);
+			},
+			onDragEnd: () => {
+				setDrag(null);
+				setGrabbed(null);
+			},
+			sx: {
+				position: "relative",
+				display: "flex",
+				gap: .25,
+				alignItems: "center",
+				opacity: drag?.from === index ? .4 : 1,
+				"&:hover .row-actions": { visibility: "visible" },
+				"&::before": drag && drag.from !== index && drag.to === index ? {
+					...marker,
+					top: -3
+				} : void 0,
+				"&::after": drag && index === items.length - 1 && drag.to === items.length ? {
+					...marker,
+					bottom: -3
+				} : void 0
+			},
 			children: [
-				/* @__PURE__ */ jsx(Checkbox, {
-					size: "small",
-					checked: value.includes(option.name),
+				/* @__PURE__ */ jsx(Box, {
+					component: "span",
+					title: "Arraste para reordenar",
+					onMouseDown: () => setGrabbed(index),
+					onMouseUp: () => setGrabbed(null),
 					sx: {
-						p: .25,
-						mr: 1
-					}
+						color: "text.disabled",
+						fontSize: 12,
+						cursor: "grab",
+						userSelect: "none",
+						px: .25
+					},
+					children: "⋮⋮"
 				}),
-				value.includes(option.name) && /* @__PURE__ */ jsx(Box, {
-					component: "span",
+				/* @__PURE__ */ jsx(Typography, {
 					sx: {
+						fontFamily: MONO,
+						fontSize: 11,
 						color: "primary.main",
-						mr: .75,
-						fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+						minWidth: 14
+					},
+					children: index + 1
+				}),
+				mixed && /* @__PURE__ */ jsx(Tooltip, {
+					title: KIND_STYLE[item.kind].noun,
+					children: /* @__PURE__ */ jsx(Box, {
+						component: "span",
+						sx: {
+							color: KIND_STYLE[item.kind].color,
+							fontSize: 12,
+							minWidth: 12
+						},
+						children: KIND_STYLE[item.kind].icon
+					})
+				}),
+				/* @__PURE__ */ jsx(NameSelect, {
+					value: item.name,
+					options: free(item.kind, item.name),
+					required: true,
+					onChange: (next) => replace(index, next)
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					className: "row-actions",
+					sx: {
+						display: "flex",
+						visibility: "hidden"
 					},
-					children: value.indexOf(option.name) + 1
+					children: [
+						/* @__PURE__ */ jsx(SmallButton, {
+							title: "Subir",
+							disabled: index === 0,
+							onClick: () => onChange(moveTo(items, index, index - 1)),
+							children: "↑"
+						}),
+						/* @__PURE__ */ jsx(SmallButton, {
+							title: "Descer",
+							disabled: index === items.length - 1,
+							onClick: () => onChange(moveTo(items, index, index + 2)),
+							children: "↓"
+						}),
+						/* @__PURE__ */ jsx(SmallButton, {
+							title: "Remover",
+							onClick: () => onChange(items.filter((_, i) => i !== index)),
+							children: "×"
+						})
+					]
 				}),
-				/* @__PURE__ */ jsx(OptionText, { option })
+				extra?.(item)
 			]
-		}, option.name))]
+		}, `${item.kind}:${item.name}`)), addable.length > 0 && /* @__PURE__ */ jsx(TextField, {
+			select: true,
+			size: "small",
+			fullWidth: true,
+			value: "",
+			error,
+			onChange: (e) => {
+				const [kind, ...rest] = e.target.value.split(":");
+				const name = rest.join(":");
+				if (name) onChange([...items, {
+					kind,
+					name
+				}]);
+			},
+			slotProps: { select: {
+				displayEmpty: true,
+				renderValue: () => /* @__PURE__ */ jsxs(Box, {
+					component: "span",
+					sx: { color: "text.secondary" },
+					children: ["+ adicionar ", addNoun]
+				})
+			} },
+			sx: inputSx$1,
+			children: addOptions
+		})]
 	});
 }
 //#endregion
@@ -2034,10 +2627,7 @@ function toEditor(model) {
 	const uidOf = (name) => tables.find((table) => table.name === name)?.uid ?? "";
 	const positions = Object.fromEntries(Object.entries(model.diagram ?? {}).flatMap(([name, point]) => {
 		const uid = uidOf(name);
-		return uid ? [[uid, {
-			x: point.x,
-			y: point.y
-		}]] : [];
+		return uid ? [[uid, { ...point }]] : [];
 	}));
 	return {
 		name: model.name,
@@ -2132,14 +2722,18 @@ function fromEditor(editor) {
 		...Object.keys(diagram).length && { diagram }
 	};
 }
-/** Posições pelo nome, na ordem dos cards; arredonda (o arquivo não precisa de frações). */
+/** Posições (e tamanhos) pelo nome, na ordem dos cards; arredonda (o arquivo não precisa de frações). */
 function diagramOf(editor) {
 	return Object.fromEntries(editor.tables.flatMap(({ uid, name }) => {
 		const point = editor.positions[uid];
-		return point && name ? [[name, {
-			x: Math.round(point.x),
-			y: Math.round(point.y)
-		}]] : [];
+		if (!point || !name) return [];
+		const { x, y, width, height } = point;
+		return [[name, {
+			x: Math.round(x),
+			y: Math.round(y),
+			...width !== void 0 && { width: Math.round(width) },
+			...height !== void 0 && { height: Math.round(height) }
+		}]];
 	}));
 }
 /** O modelo sem as posições do diagrama: o que muda as consultas. */
@@ -2918,6 +3512,11 @@ const HEADER = 34;
 const ROW = 22;
 const MAX_BODY = 264;
 const PADDING = 4;
+/** Limites do redimensionamento do card. */
+const MIN_WIDTH = 160;
+const MAX_WIDTH = 800;
+const MIN_HEIGHT$1 = 64;
+const MAX_HEIGHT = 1600;
 const ROLE_STYLE = {
 	one: {
 		color: "#4dabf7",
@@ -3034,25 +3633,27 @@ function buildNodes(editor, columns, errors) {
 		};
 	});
 }
-const cardHeight = (node, collapsed) => collapsed ? HEADER : HEADER + Math.min(node.items.length * ROW, MAX_BODY) + 8;
+/** Altura do conteúdo (sem tamanho salvo): até `MAX_BODY` de linhas, o resto rola. */
+const contentHeight = (node) => HEADER + Math.min(node.items.length * ROW, MAX_BODY) + 8;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 /** Quem só filtra (lado 1) em cima, o resto embaixo (como costuma ficar no Power BI). */
-function autoLayout(nodes, heights) {
+function autoLayout(nodes, sizes) {
 	const top = nodes.filter((node) => node.role === "one");
 	const bottom = nodes.filter((node) => node.role !== "one");
 	const positions = {};
-	top.forEach((node, index) => {
-		positions[node.id] = {
-			x: 40 + index * 290,
-			y: 40
-		};
-	});
-	const topHeight = Math.max(0, ...top.map((node) => heights.get(node.id) ?? HEADER));
-	bottom.forEach((node, index) => {
-		positions[node.id] = {
-			x: 40 + index * 290,
-			y: 40 + topHeight + 140
-		};
-	});
+	const gap = 60;
+	const row = (list, y) => {
+		let x = 40;
+		for (const node of list) {
+			positions[node.id] = {
+				x,
+				y
+			};
+			x += (sizes.get(node.id)?.width ?? CARD_WIDTH) + gap;
+		}
+	};
+	row(top, 40);
+	row(bottom, 40 + Math.max(0, ...top.map((node) => sizes.get(node.id)?.height ?? HEADER)) + 140);
 	return positions;
 }
 function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingColumns, onLoadColumns, onTry, usage }) {
@@ -3062,6 +3663,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		errors
 	]);
 	const [moving, setMoving] = useState(null);
+	const [resizing, setResizing] = useState(null);
 	const [collapsed, setCollapsed] = useState({});
 	const [scrolls, setScrolls] = useState({});
 	const [view, setView] = useState({
@@ -3099,9 +3701,39 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		requested.current = true;
 		onLoadColumns();
 	}, [columns, onLoadColumns]);
-	const heights = useMemo(() => new Map(nodes.map((node) => [node.id, cardHeight(node, !!collapsed[node.id])])), [nodes, collapsed]);
-	const fallback = useMemo(() => autoLayout(nodes, heights), [nodes, heights]);
-	const placed = (node) => (moving?.id === node.id ? moving.point : editor.positions[node.id]) ?? fallback[node.id];
+	const sizes = useMemo(() => new Map(nodes.map((node) => {
+		const saved = resizing?.id === node.id ? resizing : editor.positions[node.id];
+		const width = saved?.width ?? CARD_WIDTH;
+		if (collapsed[node.id]) return [node.id, {
+			width,
+			height: HEADER
+		}];
+		return [node.id, {
+			width,
+			height: saved?.height ?? contentHeight(node)
+		}];
+	})), [
+		nodes,
+		collapsed,
+		editor.positions,
+		resizing
+	]);
+	const sizeOf = (node) => sizes.get(node.id) ?? {
+		width: CARD_WIDTH,
+		height: HEADER
+	};
+	const fallback = useMemo(() => autoLayout(nodes, sizes), [nodes, sizes]);
+	const placed = (node) => {
+		if (moving?.id === node.id) return moving.point;
+		const saved = editor.positions[node.id];
+		return saved ? {
+			x: saved.x,
+			y: saved.y
+		} : fallback[node.id] ?? {
+			x: 0,
+			y: 0
+		};
+	};
 	const setPositions = (update) => setEditor((current) => ({
 		...current,
 		positions: update(current.positions)
@@ -3110,7 +3742,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 	/** Ponto da linha na coluna do card (lado esquerdo ou direito). */
 	const anchor = (node, column, side) => {
 		const { x, y } = placed(node);
-		const height = heights.get(node.id) ?? HEADER;
+		const { width, height } = sizeOf(node);
 		const index = node.items.findIndex((item) => item.kind === "column" && item.name === column);
 		let rowY = y + HEADER / 2;
 		if (!collapsed[node.id] && index >= 0) {
@@ -3118,7 +3750,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 			rowY = Math.min(Math.max(raw, y + HEADER + 2), y + height - 2);
 		}
 		return {
-			x: side === "left" ? x : x + CARD_WIDTH,
+			x: side === "left" ? x : x + width,
 			y: rowY
 		};
 	};
@@ -3298,11 +3930,56 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 			setMoving(null);
 			if (moved) setPositions((current) => ({
 				...current,
-				[node.id]: point
+				[node.id]: {
+					...current[node.id],
+					...point
+				}
 			}));
 			else selectNode(node);
 		});
 	};
+	/** Arrasta a borda direita (`width`), a de baixo (`height`) ou o canto (as duas). */
+	const startResize = (event, node, edges) => {
+		if (event.button !== 0) return;
+		const start = sizeOf(node);
+		const { zoom } = view;
+		let size = start;
+		track(event, (dx, dy) => {
+			size = {
+				width: edges.width ? clamp(start.width + dx / zoom, MIN_WIDTH, MAX_WIDTH) : start.width,
+				height: edges.height ? clamp(start.height + dy / zoom, MIN_HEIGHT$1, MAX_HEIGHT) : start.height
+			};
+			setResizing({
+				id: node.id,
+				...size
+			});
+		}, (_, moved) => {
+			setResizing(null);
+			if (!moved) return;
+			const point = placed(node);
+			setPositions((current) => ({
+				...current,
+				[node.id]: {
+					...point,
+					...current[node.id],
+					...edges.width && { width: size.width },
+					...edges.height && { height: size.height }
+				}
+			}));
+		});
+	};
+	/** Duplo clique na alça: volta ao tamanho automático (largura padrão, altura do conteúdo). */
+	const resetSize = (node) => setPositions((current) => {
+		const saved = current[node.id];
+		if (!saved) return current;
+		return {
+			...current,
+			[node.id]: {
+				x: saved.x,
+				y: saved.y
+			}
+		};
+	});
 	const startLink = (event, node, column) => {
 		if (event.button !== 0) return;
 		track(event, (_, __, moveEvent) => setLinking({
@@ -3355,11 +4032,12 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		if (!rect || !nodes.length) return;
 		const boxes = nodes.map((node) => ({
 			...layout?.[node.id] ?? placed(node),
-			h: heights.get(node.id) ?? HEADER
+			w: sizeOf(node).width,
+			h: sizeOf(node).height
 		}));
 		const minX = Math.min(...boxes.map((box) => box.x));
 		const minY = Math.min(...boxes.map((box) => box.y));
-		const maxX = Math.max(...boxes.map((box) => box.x + CARD_WIDTH));
+		const maxX = Math.max(...boxes.map((box) => box.x + box.w));
 		const maxY = Math.max(...boxes.map((box) => box.y + box.h));
 		const zoom = Math.min(1.2, Math.max(.3, Math.min((rect.width - 60) / (maxX - minX), (rect.height - 60) / (maxY - minY))));
 		setView({
@@ -3375,7 +4053,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 	const isSelected = (node) => selection?.kind === "table" && selection.uid === node.uid;
 	const lines = [];
 	const pushLine = (id, many, manyColumn, one, oneColumn, extra) => {
-		const rightward = placed(many).x + CARD_WIDTH / 2 <= placed(one).x + CARD_WIDTH / 2;
+		const rightward = placed(many).x + sizeOf(many).width / 2 <= placed(one).x + sizeOf(one).width / 2;
 		lines.push({
 			id,
 			from: anchor(many, manyColumn, rightward ? "right" : "left"),
@@ -3462,7 +4140,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 						}), nodes.map((node) => /* @__PURE__ */ jsx(TableCard, {
 							node,
 							position: placed(node),
-							height: heights.get(node.id) ?? HEADER,
+							size: sizeOf(node),
 							collapsed: !!collapsed[node.id],
 							selected: !!isSelected(node),
 							linking: !!linking && linking.node.id !== node.id,
@@ -3476,6 +4154,8 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 								[node.id]: top
 							})),
 							onHeaderDown: (event) => startMove(event, node),
+							onResizeDown: (event, edges) => startResize(event, node, edges),
+							onResizeReset: () => resetSize(node),
 							onColumnDown: (event, column) => startLink(event, node, column),
 							onFieldClick: (item) => setSelection({
 								kind: item.kind,
@@ -3532,8 +4212,11 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 									/* @__PURE__ */ jsx(Button, {
 										size: "small",
 										onClick: () => {
-											const layout = autoLayout(nodes, heights);
-											setPositions(() => layout);
+											const layout = autoLayout(nodes, sizes);
+											setPositions((current) => Object.fromEntries(Object.entries(layout).map(([id, point]) => [id, {
+												...current[id],
+												...point
+											}])));
 											fitToScreen(layout);
 										},
 										title: "Dimensões em cima, fatos embaixo (troca as posições salvas)",
@@ -3842,7 +4525,7 @@ function RelationshipLine({ line, hovered, onHover }) {
 		]
 	});
 }
-function TableCard({ node, position, height, collapsed, selected, linking, selectedField, onToggle, onScroll, onHeaderDown, onColumnDown, onFieldClick, onAddField }) {
+function TableCard({ node, position, size, collapsed, selected, linking, selectedField, onToggle, onScroll, onHeaderDown, onResizeDown, onResizeReset, onColumnDown, onFieldClick, onAddField }) {
 	const style = ROLE_STYLE[node.role];
 	const columnActions = ["dimension", "measure"];
 	return /* @__PURE__ */ jsxs(Box, {
@@ -3851,8 +4534,8 @@ function TableCard({ node, position, height, collapsed, selected, linking, selec
 			position: "absolute",
 			left: position.x,
 			top: position.y,
-			width: CARD_WIDTH,
-			height,
+			width: size.width,
+			height: size.height,
 			bgcolor: "#23272e",
 			border: "1px solid",
 			borderColor: node.error ? "error.main" : selected ? style.color : "#3a3f47",
@@ -3864,187 +4547,252 @@ function TableCard({ node, position, height, collapsed, selected, linking, selec
 			userSelect: "none",
 			cursor: "default"
 		},
-		children: [/* @__PURE__ */ jsxs(Box, {
-			onMouseDown: onHeaderDown,
-			title: node.error,
-			sx: {
-				height: 31,
-				display: "flex",
-				alignItems: "center",
-				gap: .75,
-				px: 1,
-				cursor: "move",
-				borderBottom: collapsed ? 0 : "1px solid #3a3f47",
-				flexShrink: 0
-			},
-			children: [
-				/* @__PURE__ */ jsx(Box, {
-					component: "span",
-					sx: {
-						color: style.color,
-						fontSize: 13
-					},
-					children: "▦"
-				}),
-				/* @__PURE__ */ jsx(Typography, {
-					sx: {
-						fontWeight: 700,
-						fontSize: 13,
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-						flex: 1
-					},
-					children: node.name || /* @__PURE__ */ jsx("em", { children: "sem nome" })
-				}),
-				/* @__PURE__ */ jsx(Box, {
-					component: "span",
-					title: style.title,
-					sx: {
-						fontSize: 10,
-						color: style.color
-					},
-					children: style.label
-				}),
-				node.error && /* @__PURE__ */ jsx(Box, {
-					component: "span",
-					sx: {
-						color: "error.main",
-						fontSize: 12
-					},
-					children: "⚠"
-				}),
-				/* @__PURE__ */ jsx(Box, {
-					component: "button",
-					type: "button",
-					"aria-label": collapsed ? "Expandir" : "Recolher",
-					onMouseDown: (event) => event.stopPropagation(),
-					onClick: onToggle,
-					sx: {
-						border: 0,
-						bgcolor: "transparent",
-						color: "text.secondary",
-						cursor: "pointer",
-						p: 0,
-						fontSize: 11
-					},
-					children: collapsed ? "▾" : "▴"
-				})
-			]
-		}), !collapsed && /* @__PURE__ */ jsxs(Box, {
-			onScroll: (event) => onScroll(event.currentTarget.scrollTop),
-			sx: {
-				overflow: "auto",
-				flex: 1,
-				py: `${PADDING}px`
-			},
-			children: [!node.items.length && /* @__PURE__ */ jsx(Typography, {
-				sx: {
-					fontSize: 11,
-					color: "text.disabled",
-					px: 1,
-					lineHeight: `${ROW}px`
-				},
-				children: "sem colunas lidas"
-			}), node.items.map((item) => item.kind === "column" ? /* @__PURE__ */ jsxs(Box, {
-				"data-diagram-node": node.id,
-				"data-diagram-column": item.name,
-				onMouseDown: (event) => onColumnDown(event, item.name),
-				title: item.missing ? "Citada no modelo, mas a tabela não devolve essa coluna" : "Arraste até a coluna de outra tabela para relacionar",
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				onMouseDown: onHeaderDown,
+				title: node.error,
 				sx: {
-					height: ROW,
+					height: 31,
 					display: "flex",
 					alignItems: "center",
 					gap: .75,
 					px: 1,
-					fontSize: 12,
-					cursor: "crosshair",
-					"& .column-actions": { display: "none" },
-					"&:hover .column-actions": { display: linking ? "none" : "flex" },
-					color: item.missing ? "error.main" : item.linked ? "text.primary" : "#adb5bd",
-					fontWeight: item.linked ? 700 : 400,
-					"&:hover": { bgcolor: linking ? "rgba(245,130,32,.25)" : "rgba(255,255,255,.06)" }
+					cursor: "move",
+					borderBottom: collapsed ? 0 : "1px solid #3a3f47",
+					flexShrink: 0
 				},
 				children: [
 					/* @__PURE__ */ jsx(Box, {
 						component: "span",
 						sx: {
-							width: 14,
-							textAlign: "center",
-							color: "text.secondary"
+							color: style.color,
+							fontSize: 13
 						},
-						children: item.isKey ? "🔑" : item.numeric ? "Σ" : ""
+						children: "▦"
 					}),
-					/* @__PURE__ */ jsx(Box, {
-						component: "span",
+					/* @__PURE__ */ jsx(Typography, {
 						sx: {
+							fontWeight: 700,
+							fontSize: 13,
 							overflow: "hidden",
 							textOverflow: "ellipsis",
-							whiteSpace: "nowrap"
+							whiteSpace: "nowrap",
+							flex: 1
 						},
-						children: item.name
+						children: node.name || /* @__PURE__ */ jsx("em", { children: "sem nome" })
 					}),
 					/* @__PURE__ */ jsx(Box, {
-						className: "column-actions",
+						component: "span",
+						title: style.title,
 						sx: {
-							ml: "auto",
-							gap: .25
+							fontSize: 10,
+							color: style.color
 						},
-						children: columnActions.map((kind) => /* @__PURE__ */ jsx(Box, {
-							component: "button",
-							type: "button",
-							title: kind === "dimension" ? `Nova dimensão com ${node.name}.${item.name}` : `Nova medida: ${item.numeric ? "soma" : "contagem"} de ${node.name}.${item.name}`,
-							onMouseDown: (event) => event.stopPropagation(),
-							onClick: () => onAddField(kind, item),
-							sx: {
-								border: "1px solid #3a3f47",
-								borderRadius: .5,
-								bgcolor: "#1b1e23",
-								color: kind === "measure" ? "#ffd8a8" : "#a5d8ff",
-								cursor: "pointer",
-								fontSize: 10,
-								lineHeight: "14px",
-								px: .5
-							},
-							children: kind === "dimension" ? "+◇" : "+Σ"
-						}, kind))
+						children: style.label
+					}),
+					node.error && /* @__PURE__ */ jsx(Box, {
+						component: "span",
+						sx: {
+							color: "error.main",
+							fontSize: 12
+						},
+						children: "⚠"
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						component: "button",
+						type: "button",
+						"aria-label": collapsed ? "Expandir" : "Recolher",
+						onMouseDown: (event) => event.stopPropagation(),
+						onClick: onToggle,
+						sx: {
+							border: 0,
+							bgcolor: "transparent",
+							color: "text.secondary",
+							cursor: "pointer",
+							p: 0,
+							fontSize: 11
+						},
+						children: collapsed ? "▾" : "▴"
 					})
 				]
-			}, `c:${item.name}`) : /* @__PURE__ */ jsxs(Box, {
-				onMouseDown: (event) => event.stopPropagation(),
-				onClick: () => onFieldClick(item),
+			}),
+			!collapsed && /* @__PURE__ */ jsxs(Box, {
+				onScroll: (event) => onScroll(event.currentTarget.scrollTop),
 				sx: {
-					height: ROW,
-					display: "flex",
-					alignItems: "center",
-					gap: .75,
-					px: 1,
-					fontSize: 12,
-					cursor: "pointer",
-					color: item.kind === "measure" ? "#ffd8a8" : "#a5d8ff",
-					bgcolor: selectedField === item.uid ? "rgba(245,130,32,.2)" : void 0,
-					"&:hover": { bgcolor: "rgba(255,255,255,.06)" }
+					overflow: "auto",
+					flex: 1,
+					py: `${PADDING}px`
 				},
-				children: [/* @__PURE__ */ jsx(Box, {
-					component: "span",
+				children: [!node.items.length && /* @__PURE__ */ jsx(Typography, {
 					sx: {
-						width: 14,
-						textAlign: "center"
+						fontSize: 11,
+						color: "text.disabled",
+						px: 1,
+						lineHeight: `${ROW}px`
 					},
-					children: item.icon
-				}), /* @__PURE__ */ jsx(Box, {
-					component: "span",
+					children: "sem colunas lidas"
+				}), node.items.map((item) => item.kind === "column" ? /* @__PURE__ */ jsxs(Box, {
+					"data-diagram-node": node.id,
+					"data-diagram-column": item.name,
+					onMouseDown: (event) => onColumnDown(event, item.name),
+					title: item.missing ? "Citada no modelo, mas a tabela não devolve essa coluna" : "Arraste até a coluna de outra tabela para relacionar",
 					sx: {
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap"
+						height: ROW,
+						display: "flex",
+						alignItems: "center",
+						gap: .75,
+						px: 1,
+						fontSize: 12,
+						cursor: "crosshair",
+						"& .column-actions": { display: "none" },
+						"&:hover .column-actions": { display: linking ? "none" : "flex" },
+						color: item.missing ? "error.main" : item.linked ? "text.primary" : "#adb5bd",
+						fontWeight: item.linked ? 700 : 400,
+						"&:hover": { bgcolor: linking ? "rgba(245,130,32,.25)" : "rgba(255,255,255,.06)" }
 					},
-					children: item.name || /* @__PURE__ */ jsx("em", { children: "sem nome" })
-				})]
-			}, `f:${item.uid}`))]
-		})]
+					children: [
+						/* @__PURE__ */ jsx(Box, {
+							component: "span",
+							sx: {
+								width: 14,
+								textAlign: "center",
+								color: "text.secondary"
+							},
+							children: item.isKey ? "🔑" : item.numeric ? "Σ" : ""
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							component: "span",
+							sx: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: item.name
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							className: "column-actions",
+							sx: {
+								ml: "auto",
+								gap: .25
+							},
+							children: columnActions.map((kind) => /* @__PURE__ */ jsx(Box, {
+								component: "button",
+								type: "button",
+								title: kind === "dimension" ? `Nova dimensão com ${node.name}.${item.name}` : `Nova medida: ${item.numeric ? "soma" : "contagem"} de ${node.name}.${item.name}`,
+								onMouseDown: (event) => event.stopPropagation(),
+								onClick: () => onAddField(kind, item),
+								sx: {
+									border: "1px solid #3a3f47",
+									borderRadius: .5,
+									bgcolor: "#1b1e23",
+									color: kind === "measure" ? "#ffd8a8" : "#a5d8ff",
+									cursor: "pointer",
+									fontSize: 10,
+									lineHeight: "14px",
+									px: .5
+								},
+								children: kind === "dimension" ? "+◇" : "+Σ"
+							}, kind))
+						})
+					]
+				}, `c:${item.name}`) : /* @__PURE__ */ jsxs(Box, {
+					onMouseDown: (event) => event.stopPropagation(),
+					onClick: () => onFieldClick(item),
+					sx: {
+						height: ROW,
+						display: "flex",
+						alignItems: "center",
+						gap: .75,
+						px: 1,
+						fontSize: 12,
+						cursor: "pointer",
+						color: item.kind === "measure" ? "#ffd8a8" : "#a5d8ff",
+						bgcolor: selectedField === item.uid ? "rgba(245,130,32,.2)" : void 0,
+						"&:hover": { bgcolor: "rgba(255,255,255,.06)" }
+					},
+					children: [/* @__PURE__ */ jsx(Box, {
+						component: "span",
+						sx: {
+							width: 14,
+							textAlign: "center"
+						},
+						children: item.icon
+					}), /* @__PURE__ */ jsx(Box, {
+						component: "span",
+						sx: {
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: item.name || /* @__PURE__ */ jsx("em", { children: "sem nome" })
+					})]
+				}, `f:${item.uid}`))]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				onMouseDown: (event) => onResizeDown(event, {
+					width: true,
+					height: false
+				}),
+				onDoubleClick: onResizeReset,
+				title: "Arraste para mudar a largura (duplo clique: tamanho automático)",
+				sx: {
+					...resizeHandleSx,
+					top: 0,
+					right: -4,
+					bottom: 8,
+					width: 8,
+					cursor: "ew-resize"
+				}
+			}),
+			!collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+				onMouseDown: (event) => onResizeDown(event, {
+					width: false,
+					height: true
+				}),
+				onDoubleClick: onResizeReset,
+				title: "Arraste para mudar a altura (duplo clique: tamanho automático)",
+				sx: {
+					...resizeHandleSx,
+					left: 0,
+					right: 8,
+					bottom: -4,
+					height: 8,
+					cursor: "ns-resize"
+				}
+			}), /* @__PURE__ */ jsx(Box, {
+				onMouseDown: (event) => onResizeDown(event, {
+					width: true,
+					height: true
+				}),
+				onDoubleClick: onResizeReset,
+				title: "Arraste para redimensionar (duplo clique: tamanho automático)",
+				sx: {
+					...resizeHandleSx,
+					right: -4,
+					bottom: -4,
+					width: 14,
+					height: 14,
+					cursor: "nwse-resize",
+					"&::after": {
+						content: "\"\"",
+						position: "absolute",
+						right: 6,
+						bottom: 6,
+						width: 6,
+						height: 6,
+						borderRight: "2px solid #5c636e",
+						borderBottom: "2px solid #5c636e"
+					},
+					"&:hover::after": { borderColor: ROLE_STYLE[node.role].color }
+				}
+			})] })
+		]
 	});
 }
+const resizeHandleSx = {
+	position: "absolute",
+	zIndex: 1
+};
 function PropertyBlock({ title, children }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		sx: {
@@ -6883,4 +7631,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-C4E9afPT.js.map
+//# sourceMappingURL=DashboardDevtools-6v5HDe-A.js.map