@bluemarble/bi 0.4.0 → 0.6.0

package/dist/{DashboardDevtools-7L93aV1-.js → DashboardDevtools-SCewfQGR.js}

@@ -1,7 +1,8 @@
-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-676sEvvb.js";
+import { _ as referencedTables, a as AGGREGATIONS, d as validateModel, h as parseColumnRef, i as toModelCode, l as isAggregate, m as modelEdges, o as AGGREGATION_LABEL, p as measureHome, s as VALUE_FORMATS, t as canonicalJson } from "./codegen-DBe4-XW_.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-Y7W9oK1J.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 { C as RULE_OPERATOR_LABEL, S as RULE_OPERATORS, _ as tableColumns, a as FILTER_FIELDS, b as COLUMN_VERTICAL_ALIGNS, c as chartOfType, d as filterReferences, h as percentColumn, i as CARD_FIELDS, 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 validateLayout, w as UNARY_OPERATORS, x as NUMERIC_OPERATORS, y as COLUMN_ALIGNS } from "./layout-BS51SQcJ.js";
+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-C2tzlOY8.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 +961,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 +971,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 +983,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 +1039,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 +1151,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 +1420,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,11 +1692,13 @@ 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),
@@ -1704,7 +1752,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, chosenMeasures = [], 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
@@ -1714,6 +1762,182 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 		label: measure.label
 	}));
 	const entries = Object.entries(fields);
+	const columnLabel = (name) => name.startsWith("%:") ? `% ${fieldLabelOf(model, name.slice(2))}` : fieldLabelOf(model, name);
+	const columnOptionsOf = (names) => names.map((name) => ({
+		name,
+		label: columnLabel(name)
+	}));
+	const fieldOptions = [
+		...columnOptionsOf(columns).map((option) => ({
+			...option,
+			group: "Colunas do gráfico"
+		})),
+		...dimensions.filter((option) => !columns.includes(option.name)).map((option) => ({
+			...option,
+			group: "Dimensões fora do gráfico"
+		})),
+		...measures.filter((option) => !columns.includes(option.name)).map((option) => ({
+			...option,
+			group: "Medidas fora do gráfico"
+		}))
+	];
+	const keyOf = (kind) => entries.find(([, spec]) => spec.kind === kind)?.[0];
+	const labelsKey = keyOf("labels");
+	const formatsKey = keyOf("formats");
+	const alignsKey = keyOf("aligns");
+	const verticalKey = keyOf("verticalAligns");
+	const columnOptions = !!(labelsKey || formatsKey || alignsKey || verticalKey);
+	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 aligns = alignsKey && values[alignsKey] || {};
+	const verticals = verticalKey && values[verticalKey] || {};
+	const alignProps = (column, defaultAlign) => ({
+		align: alignsKey ? aligns[column] ?? "" : void 0,
+		defaultAlign,
+		onAlign: (next) => alignsKey && set(alignsKey, pruned(withField(aligns, column, next), columns)),
+		verticalAlign: verticalKey ? verticals[column] ?? "" : void 0,
+		onVerticalAlign: (next) => verticalKey && set(verticalKey, pruned(withField(verticals, column, next), columns))
+	});
+	const resetAligns = (column, changes) => {
+		if (alignsKey) changes[alignsKey] = pruned(withField(aligns, column, void 0), columns);
+		if (verticalKey) changes[verticalKey] = pruned(withField(verticals, column, void 0), columns);
+	};
+	const setChanges = (changes) => {
+		if (onSetMany) onSetMany(changes);
+		else for (const [key, value] of Object.entries(changes)) set(key, value);
+	};
+	const dimensionFormatters = formattersKey && values[formattersKey] || {};
+	const optionsButton = (kind, name) => {
+		if (!columnOptions || !name) return null;
+		if (kind === "percent") {
+			if (!alignsKey && !verticalKey) return null;
+			const column = percentColumn(name);
+			return /* @__PURE__ */ jsx(ColumnOptions, {
+				kind,
+				name,
+				model,
+				label: void 0,
+				onLabel: () => {},
+				format: void 0,
+				onFormat: () => {},
+				formatter: void 0,
+				formatters,
+				onFormatter: () => {},
+				...alignProps(column, "right"),
+				onReset: () => {
+					const changes = {};
+					resetAligns(column, changes);
+					setChanges(changes);
+				}
+			});
+		}
+		const canFormatter = kind === "dimension" && !!(formattersKey || formatterKey);
+		return /* @__PURE__ */ jsx(ColumnOptions, {
+			kind,
+			name,
+			model,
+			...alignProps(name, kind === "dimension" ? "left" : "right"),
+			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);
+				resetAligns(name, changes);
+				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.percent && other.section === spec.section);
+			if (!pair) continue;
+			const order = entries.find(([, other]) => other.kind === "columnOrder")?.[0];
+			const percents = order ? entries.find(([, other]) => other.kind === "measures" && other.percent && other.section === spec.section) : void 0;
+			return {
+				dimensions: dimensionsKey,
+				dimensionsSpec: spec,
+				measures: pair[0],
+				measuresSpec: pair[1],
+				percents: percents?.[0],
+				percentsSpec: percents?.[1],
+				order
+			};
+		}
+	})();
+	const mergedInput = (pair) => {
+		const dimensionNames = values[pair.dimensions] ?? [];
+		const measureNames = values[pair.measures] ?? [];
+		const percentNames = pair.percents ? values[pair.percents] ?? [] : [];
+		const all = [
+			...dimensionNames.map((name) => ({
+				kind: "dimension",
+				name
+			})),
+			...measureNames.map((name) => ({
+				kind: "measure",
+				name
+			})),
+			...percentNames.map((name) => ({
+				kind: "percent",
+				name
+			}))
+		];
+		const order = pair.order ? values[pair.order] : void 0;
+		const sortedColumns = tableColumns([...dimensionNames, ...measureNames], percentNames, order);
+		const pool = [...all];
+		const items = sortedColumns.map((column) => {
+			const index = pool.findIndex((item) => itemColumn(item) === column);
+			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),
+				...pair.percentsSpec && { percent: options(pair.percentsSpec) }
+			},
+			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 percentList = next.filter((item) => item.kind === "percent").map((i) => i.name);
+				const names = next.map(itemColumn);
+				const standard = tableColumns([...dimensionList, ...measureList].map((item) => item.name), percentList);
+				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.percents) changes[pair.percents] = percentList.length ? percentList : 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":
@@ -1721,10 +1945,7 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 			case "measure":
 			case "measures": return measures;
 			case "formatter": return formatters.map((name) => ({ name }));
-			case "column": return columns.map((name) => ({
-				name,
-				label: model.dimensions[name]?.label ?? model.measures[name]?.label
-			}));
+			case "column": return spec.outside ? fieldOptions : columnOptionsOf(columns);
 			case "enum": return spec.values.map((name) => ({
 				name,
 				label: spec.labels?.[name]
@@ -1793,11 +2014,30 @@ 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 "formatRules": return /* @__PURE__ */ jsx(FormatRulesInput, {
+				rules: value ?? [],
+				fieldOptions,
+				columnOptions: columnOptionsOf(columns),
+				model,
+				onChange: (rules) => set(key, rules.length ? rules : void 0)
 			});
 			case "formatters": {
 				const map = value ?? {};
@@ -1838,45 +2078,40 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 					}, dimension))
 				});
 			}
-			case "labels":
-				if (!columns.length) return /* @__PURE__ */ jsx(Typography, {
-					sx: {
-						fontSize: 12,
-						color: "text.disabled"
-					},
-					children: "sem colunas"
-				});
-				return /* @__PURE__ */ jsx(LabelsEditor, {
-					value: value ?? {},
-					columns,
-					model,
-					onChange: (next) => set(key, next)
+			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)
 				});
-			case "formats":
-				if (!chosenMeasures.length) return /* @__PURE__ */ jsx(Typography, {
+				const button = spec.kind === "dimension" || spec.kind === "measure" ? optionsButton(spec.kind, value) : null;
+				return button ? /* @__PURE__ */ jsxs(Box, {
 					sx: {
-						fontSize: 12,
-						color: "text.disabled"
+						display: "flex",
+						gap: .25,
+						alignItems: "center"
 					},
-					children: "sem medidas"
-				});
-				return /* @__PURE__ */ jsx(FormatsEditor, {
-					value: value ?? {},
-					measures: chosenMeasures,
-					model,
-					onChange: (next) => set(key, next)
-				});
-			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)
-			});
+					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" || spec.kind === "labels" || spec.kind === "formats";
+	const hidden = new Set([
+		merged?.measures,
+		merged?.percents,
+		...entries.filter(([, spec]) => spec.kind === "columnOrder").map(([key]) => key),
+		labelsKey,
+		formatsKey,
+		alignsKey,
+		verticalKey,
+		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" || spec.kind === "formatRules";
+	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, {
@@ -1884,20 +2119,359 @@ 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(merged.percents ? "Dimensões, medidas e %" : "Dimensões e medidas", input(key, spec), `${merged.order ? "Em qualquer ordem: é a ordem das colunas. " : ""}${[
+						spec.hint,
+						merged.measuresSpec.hint,
+						merged.percentsSpec?.hint && `% do total: ${merged.percentsSpec.hint}`
+					].filter(Boolean).join(" · ")}`) : field(spec.label, input(key, spec), spec.hint)
 				}, key))]
 			})
 		}, section);
 	}) });
 }
+const fieldLabelOf = (model, name) => model.dimensions[name]?.label ?? model.measures[name]?.label ?? name;
+/** Exemplo de célula com o estilo de uma regra. */
+const RULE_SAMPLE = "Exemplo";
+const DEFAULT_RULE_BACKGROUND = "#ffe3e3";
 /**
-* Cor com o seletor nativo. Mexer no seletor só muda a amostra: o rascunho (e a página) muda quando
-* ele fecha — o `change` nativo; o `onChange` do React dispara a cada movimento. O texto aplica no
+* Regras de formatação condicional, uma por cartão: "se <campo> <operador> <valor>, pinta <a célula
+* de uma coluna | a linha toda> com <texto, fundo, negrito>". A ordem importa (a de baixo ganha):
+* reordena com ↑/↓.
+*/
+function FormatRulesInput({ rules, fieldOptions, columnOptions, model, onChange }) {
+	const update = (index, change) => onChange(rules.map((rule, i) => i === index ? change(rule) : rule));
+	const columns = columnOptions.map((option) => option.name);
+	const parseValue = (rule, text) => {
+		const trimmed = text.trim();
+		if (!trimmed) return void 0;
+		const number = Number(trimmed.replace(",", "."));
+		if (NUMERIC_OPERATORS.includes(rule.operator)) return Number.isFinite(number) ? number : void 0;
+		if (rule.operator === "contains") return trimmed;
+		return !(model.dimensions[rule.field]?.type === "string") && Number.isFinite(number) ? number : trimmed;
+	};
+	const withOperator = (rule, operator) => {
+		const { value, to, ...rest } = rule;
+		if (UNARY_OPERATORS.includes(operator)) return {
+			...rest,
+			operator
+		};
+		const numeric = NUMERIC_OPERATORS.includes(operator);
+		const next = {
+			...rest,
+			operator,
+			value: numeric ? Number.isFinite(Number(value)) ? Number(value) : 0 : value ?? ""
+		};
+		if (operator === "between") next.to = to ?? next.value;
+		return next;
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: .75,
+			maxWidth: 760
+		},
+		children: [rules.map((rule, index) => {
+			const painted = rule.target === "row" ? void 0 : rule.column ?? rule.field;
+			const lost = painted !== void 0 && !columns.includes(painted);
+			return /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1,
+					p: .75,
+					display: "flex",
+					flexDirection: "column",
+					gap: .5,
+					"&:hover .row-actions": { visibility: "visible" }
+				},
+				children: [
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "flex",
+							gap: .5,
+							alignItems: "center",
+							flexWrap: "wrap"
+						},
+						children: [
+							/* @__PURE__ */ jsxs(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: [index + 1, ". Se"]
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								sx: { flex: "2 1 140px" },
+								children: /* @__PURE__ */ jsx(NameSelect, {
+									value: rule.field,
+									options: fieldOptions,
+									required: true,
+									onChange: (field) => update(index, (current) => ({
+										...current,
+										field
+									}))
+								})
+							}),
+							/* @__PURE__ */ jsx(TextField, {
+								select: true,
+								size: "small",
+								value: rule.operator,
+								onChange: (e) => update(index, (current) => withOperator(current, e.target.value)),
+								sx: {
+									...inputSx$1,
+									flex: "1 1 110px"
+								},
+								children: RULE_OPERATORS.map((operator) => /* @__PURE__ */ jsx(MenuItem, {
+									value: operator,
+									children: RULE_OPERATOR_LABEL[operator]
+								}, operator))
+							}),
+							!UNARY_OPERATORS.includes(rule.operator) && /* @__PURE__ */ jsx(Box, {
+								sx: { flex: "1 1 80px" },
+								children: /* @__PURE__ */ jsx(CommitText, {
+									value: rule.value === void 0 ? "" : String(rule.value),
+									placeholder: "valor",
+									error: rule.value === void 0,
+									onCommit: (text) => update(index, (current) => ({
+										...current,
+										value: parseValue(current, text)
+									}))
+								})
+							}),
+							rule.operator === "between" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: "e"
+							}), /* @__PURE__ */ jsx(Box, {
+								sx: { flex: "1 1 80px" },
+								children: /* @__PURE__ */ jsx(CommitText, {
+									value: rule.to === void 0 ? "" : String(rule.to),
+									placeholder: "até",
+									error: rule.to === void 0,
+									onCommit: (text) => update(index, (current) => {
+										const to = parseValue(current, text);
+										return {
+											...current,
+											to: typeof to === "number" ? to : void 0
+										};
+									})
+								})
+							})] }),
+							/* @__PURE__ */ jsxs(Box, {
+								className: "row-actions",
+								sx: {
+									display: "flex",
+									visibility: "hidden"
+								},
+								children: [
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Subir",
+										disabled: index === 0,
+										onClick: () => onChange(moveTo(rules, index, index - 1)),
+										children: "↑"
+									}),
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Descer",
+										disabled: index === rules.length - 1,
+										onClick: () => onChange(moveTo(rules, index, index + 2)),
+										children: "↓"
+									}),
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Remover",
+										onClick: () => onChange(rules.filter((_, i) => i !== index)),
+										children: "×"
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "flex",
+							gap: .5,
+							alignItems: "center",
+							flexWrap: "wrap"
+						},
+						children: [
+							/* @__PURE__ */ jsx(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: "pinta"
+							}),
+							/* @__PURE__ */ jsxs(TextField, {
+								select: true,
+								size: "small",
+								value: rule.target === "row" ? "row" : "cell",
+								onChange: (e) => update(index, ({ target: _target, column: _column, ...rest }) => e.target.value === "row" ? {
+									...rest,
+									target: "row"
+								} : rest),
+								sx: {
+									...inputSx$1,
+									flex: "1 1 110px"
+								},
+								children: [/* @__PURE__ */ jsx(MenuItem, {
+									value: "cell",
+									children: "a célula de"
+								}), /* @__PURE__ */ jsx(MenuItem, {
+									value: "row",
+									children: "a linha toda"
+								})]
+							}),
+							rule.target !== "row" && /* @__PURE__ */ jsx(Box, {
+								sx: { flex: "2 1 140px" },
+								children: /* @__PURE__ */ jsx(NameSelect, {
+									value: rule.column ?? "",
+									options: columnOptions,
+									emptyLabel: `o próprio campo${columns.includes(rule.field) ? "" : " (fora do gráfico)"}`,
+									onChange: (column) => update(index, (current) => withField(current, "column", column || void 0))
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								sx: {
+									px: 1,
+									py: .25,
+									fontSize: 12,
+									border: 1,
+									borderColor: "divider",
+									color: rule.color,
+									bgcolor: rule.background,
+									fontWeight: rule.bold ? 700 : void 0
+								},
+								children: RULE_SAMPLE
+							})
+						]
+					}),
+					lost && /* @__PURE__ */ jsxs(Typography, {
+						sx: {
+							fontSize: 11,
+							color: "warning.main"
+						},
+						children: [
+							"\"",
+							painted,
+							"\" não é coluna do gráfico: escolha a coluna a pintar ou a linha toda"
+						]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "grid",
+							gap: .5,
+							gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+							alignItems: "end"
+						},
+						children: [
+							field("Cor do texto", /* @__PURE__ */ jsx(ColorInput, {
+								value: rule.color,
+								fallback: "#000000",
+								onCommit: (color) => update(index, (current) => withField(current, "color", color))
+							})),
+							field("Fundo", /* @__PURE__ */ jsx(ColorInput, {
+								value: rule.background,
+								fallback: "#ffffff",
+								onCommit: (color) => update(index, (current) => withField(current, "background", color))
+							})),
+							field("Alinhamento", /* @__PURE__ */ jsxs(TextField, {
+								select: true,
+								size: "small",
+								fullWidth: true,
+								value: rule.align ?? "",
+								onChange: (e) => update(index, (current) => withField(current, "align", e.target.value || void 0)),
+								slotProps: { select: { displayEmpty: true } },
+								sx: inputSx$1,
+								children: [/* @__PURE__ */ jsx(MenuItem, {
+									value: "",
+									children: /* @__PURE__ */ jsx("em", { children: "não muda" })
+								}), COLUMN_ALIGNS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+									value: option,
+									children: ALIGN_LABEL[option]
+								}, option))]
+							})),
+							field("Vertical", /* @__PURE__ */ jsxs(TextField, {
+								select: true,
+								size: "small",
+								fullWidth: true,
+								value: rule.verticalAlign ?? "",
+								onChange: (e) => update(index, (current) => withField(current, "verticalAlign", e.target.value || void 0)),
+								slotProps: { select: { displayEmpty: true } },
+								sx: inputSx$1,
+								children: [/* @__PURE__ */ jsx(MenuItem, {
+									value: "",
+									children: /* @__PURE__ */ jsx("em", { children: "não muda" })
+								}), COLUMN_VERTICAL_ALIGNS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+									value: option,
+									children: VERTICAL_ALIGN_LABEL[option]
+								}, option))]
+							})),
+							/* @__PURE__ */ jsx(FormControlLabel, {
+								control: /* @__PURE__ */ jsx(Checkbox, {
+									size: "small",
+									checked: !!rule.bold,
+									onChange: (e) => update(index, (current) => withField(current, "bold", e.target.checked || void 0))
+								}),
+								label: /* @__PURE__ */ jsx(Typography, {
+									sx: { fontSize: 12 },
+									children: "Negrito"
+								})
+							})
+						]
+					})
+				]
+			}, index);
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			variant: "outlined",
+			disabled: !fieldOptions.length,
+			onClick: () => onChange([...rules, {
+				field: columns.find((name) => !name.startsWith("%:")) ?? "",
+				operator: ">",
+				value: 0,
+				background: DEFAULT_RULE_BACKGROUND
+			}]),
+			sx: {
+				alignSelf: "flex-start",
+				textTransform: "none"
+			},
+			children: "+ regra"
+		})]
+	});
+}
+/** Campo de texto que só manda o valor no Enter ou ao sair (número parcial não vira valor). */
+function CommitText({ value, placeholder, error, onCommit }) {
+	const [typing, setTyping] = useState(null);
+	const commit = () => {
+		if (typing === null) return;
+		setTyping(null);
+		if (typing !== value) onCommit(typing);
+	};
+	return /* @__PURE__ */ jsx(TextField, {
+		size: "small",
+		fullWidth: true,
+		value: typing ?? value,
+		placeholder,
+		error: error && typing === null,
+		onChange: (e) => setTyping(e.target.value),
+		onBlur: commit,
+		onKeyDown: (e) => {
+			if (e.key === "Enter") commit();
+			if (e.key === "Escape") setTyping(null);
+		},
+		sx: inputSx$1
+	});
+}
+/**
+* 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 }) {
@@ -1964,61 +2538,40 @@ 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 columnNameSx = {
-	fontFamily: MONO,
-	fontSize: 12,
-	minWidth: 90,
-	maxWidth: 140,
-	overflow: "hidden",
-	textOverflow: "ellipsis",
-	whiteSpace: "nowrap"
+const ALIGN_LABEL = {
+	left: "à esquerda",
+	center: "centralizado",
+	right: "à direita"
+};
+const VERTICAL_ALIGN_LABEL = {
+	top: "em cima",
+	middle: "no meio",
+	bottom: "embaixo"
 };
-/** Rótulo de cada coluna do gráfico; o placeholder é o rótulo do dicionário. */
-function LabelsEditor({ value, columns, model, onChange }) {
-	return /* @__PURE__ */ jsx(Box, {
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: .5
-		},
-		children: columns.map((column) => /* @__PURE__ */ jsxs(Box, {
-			sx: {
-				display: "flex",
-				gap: .5,
-				alignItems: "center"
-			},
-			children: [/* @__PURE__ */ jsx(Tooltip, {
-				title: model.dimensions[column] ? "dimensão" : "medida",
-				placement: "left",
-				children: /* @__PURE__ */ jsx(Typography, {
-					sx: columnNameSx,
-					children: column
-				})
-			}), /* @__PURE__ */ jsx(TextField, {
-				size: "small",
-				fullWidth: true,
-				value: value[column] ?? "",
-				placeholder: model.dimensions[column]?.label ?? model.measures[column]?.label ?? column,
-				onChange: (e) => onChange(pruned(withField(value, column, e.target.value), columns)),
-				sx: inputSx$1
-			})]
-		}, column))
-	});
-}
 const FORMAT_LABEL = {
 	number: "número",
 	integer: "inteiro",
 	currency: "R$",
 	percent: "%"
 };
-/** Formato de cada medida do gráfico; vazio = o do dicionário (que aparece como placeholder). */
-function FormatsEditor({ value, measures, model, onChange }) {
-	const setFormat = (measure, key, next) => {
-		const format = withField(value[measure] ?? {}, key, next);
-		const map = { ...value };
-		if (Object.keys(format).length) map[measure] = format;
-		else delete map[measure];
-		onChange(pruned(map, measures));
+/** 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, align, defaultAlign, onAlign, verticalAlign, onVerticalAlign, 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 || !!align || !!verticalAlign || 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,
@@ -2028,104 +2581,232 @@ function FormatsEditor({ value, measures, model, onChange }) {
 			px: 1
 		}
 	};
-	return /* @__PURE__ */ jsx(Box, {
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: .75
+	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"
 		},
-		children: measures.map((measure) => {
-			const format = value[measure] ?? {};
-			const fromModel = model.measures[measure];
-			const decimals = format.decimals;
-			return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Typography, {
-				sx: {
-					...columnNameSx,
-					maxWidth: "none",
-					mb: .25
-				},
-				children: [measure, fromModel?.label && /* @__PURE__ */ jsx(Box, {
+		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",
-						ml: 1,
-						fontFamily: "inherit"
+						fontWeight: 400,
+						ml: 1
 					},
-					children: fromModel.label
-				})]
-			}), /* @__PURE__ */ jsxs(Box, {
-				sx: {
-					display: "grid",
-					gap: .5,
-					alignItems: "center",
-					gridTemplateColumns: "minmax(88px, 1.4fr) minmax(52px, .8fr) 1fr 1fr auto"
-				},
-				children: [
-					/* @__PURE__ */ jsxs(TextField, {
-						select: true,
-						size: "small",
-						value: format.format ?? "",
-						onChange: (e) => setFormat(measure, "format", e.target.value || void 0),
-						slotProps: { select: { displayEmpty: true } },
-						sx: small,
-						children: [/* @__PURE__ */ jsx(MenuItem, {
-							value: "",
-							children: /* @__PURE__ */ jsxs("em", { children: ["padrão", fromModel?.format ? ` (${FORMAT_LABEL[fromModel.format]})` : ""] })
-						}), VALUE_FORMATS.map((name) => /* @__PURE__ */ jsx(MenuItem, {
-							value: name,
-							children: FORMAT_LABEL[name]
-						}, name))]
+					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"),
+				align !== void 0 && field("Alinhamento", /* @__PURE__ */ jsxs(TextField, {
+					select: true,
+					size: "small",
+					fullWidth: true,
+					value: align,
+					onChange: (e) => onAlign(e.target.value || void 0),
+					slotProps: { select: { displayEmpty: true } },
+					sx: small,
+					children: [/* @__PURE__ */ jsx(MenuItem, {
+						value: "",
+						children: /* @__PURE__ */ jsxs("em", { children: [
+							"padrão (",
+							ALIGN_LABEL[defaultAlign],
+							")"
+						] })
+					}), COLUMN_ALIGNS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+						value: option,
+						children: ALIGN_LABEL[option]
+					}, option))]
+				}), "Horizontal: cabeçalho, células e total da coluna"),
+				verticalAlign !== void 0 && field("Alinhamento vertical", /* @__PURE__ */ jsxs(TextField, {
+					select: true,
+					size: "small",
+					fullWidth: true,
+					value: verticalAlign,
+					onChange: (e) => onVerticalAlign(e.target.value || void 0),
+					slotProps: { select: { displayEmpty: true } },
+					sx: small,
+					children: [/* @__PURE__ */ jsx(MenuItem, {
+						value: "",
+						children: /* @__PURE__ */ jsxs("em", { children: [
+							"padrão (",
+							VERTICAL_ALIGN_LABEL.middle,
+							")"
+						] })
+					}), COLUMN_VERTICAL_ALIGNS.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+						value: option,
+						children: VERTICAL_ALIGN_LABEL[option]
+					}, option))]
+				}), "Aparece quando a linha tem texto em mais de uma linha"),
+				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(Tooltip, {
-						title: "Casas decimais (0 a 10)",
-						children: /* @__PURE__ */ jsx(TextField, {
+					/* @__PURE__ */ jsx(FormControlLabel, {
+						sx: { m: 0 },
+						control: /* @__PURE__ */ jsx(Checkbox, {
 							size: "small",
-							type: "number",
-							value: decimals ?? "",
-							placeholder: fromModel?.decimals === void 0 ? ",00" : String(fromModel.decimals),
-							error: decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0 || decimals > 10),
-							onChange: (e) => setFormat(measure, "decimals", e.target.value.trim() === "" ? void 0 : Number(e.target.value)),
-							slotProps: { htmlInput: {
-								min: 0,
-								max: 10
-							} },
-							sx: 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__ */ jsx(TextField, {
-						size: "small",
-						value: format.prefix ?? "",
-						placeholder: "prefixo",
-						onChange: (e) => setFormat(measure, "prefix", e.target.value),
-						sx: small
-					}),
-					/* @__PURE__ */ jsx(TextField, {
-						size: "small",
-						value: format.suffix ?? "",
-						placeholder: "sufixo",
-						onChange: (e) => setFormat(measure, "suffix", e.target.value),
-						sx: small
-					}),
-					/* @__PURE__ */ jsx(Tooltip, {
-						title: "Notação curta: 1,2 mil / 3,4 mi",
-						children: /* @__PURE__ */ jsx(FormControlLabel, {
-							sx: { m: 0 },
-							control: /* @__PURE__ */ jsx(Checkbox, {
-								size: "small",
-								sx: { p: .25 },
-								checked: format.compact ?? false,
-								onChange: (e) => setFormat(measure, "compact", e.target.checked || void 0)
-							}),
-							label: /* @__PURE__ */ jsx(Typography, {
-								sx: { fontSize: 11 },
-								children: "curto"
+					/* @__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)
 							})
-						})
+						]
 					})
-				]
-			})] }, measure);
-		})
-	});
+				] }),
+				/* @__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",
@@ -2192,59 +2873,219 @@ function NameSelect({ value, options, required, emptyLabel, onChange }) {
 				value,
 				children: [value, " (não existe)"]
 			}),
-			options.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+			options.flatMap((option, index) => [...option.group && option.group !== options[index - 1]?.group ? [/* @__PURE__ */ jsx(ListSubheader, { children: option.group }, `h:${option.group}`)] : [], /* @__PURE__ */ jsx(MenuItem, {
 				value: option.name,
 				children: /* @__PURE__ */ jsx(OptionText, { option })
-			}, option.name))
+			}, option.name)])
 		]
 	});
 }
-/** 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 itemColumn = (item) => item.kind === "percent" ? percentColumn(item.name) : item.name;
+const KIND_STYLE = {
+	dimension: {
+		icon: "◇",
+		color: "#4dabf7",
+		noun: "dimensão",
+		group: "Dimensões"
+	},
+	measure: {
+		icon: "Σ",
+		color: "#F58220",
+		noun: "medida",
+		group: "Medidas"
+	},
+	percent: {
+		icon: "%",
+		color: "#9775fa",
+		noun: "% do total",
+		group: "% do total (da medida)"
+	}
+};
+/**
+* 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: value.indexOf(option.name) + 1
+					children: index + 1
 				}),
-				/* @__PURE__ */ jsx(OptionText, { option })
+				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: [
+						/* @__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: "×"
+						})
+					]
+				}),
+				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
@@ -7270,4 +8111,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-7L93aV1-.js.map
+//# sourceMappingURL=DashboardDevtools-SCewfQGR.js.map