@bluemarble/bi 0.4.0 → 0.5.0

package/dist/{DashboardDevtools-7L93aV1-.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-676sEvvb.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-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 { 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,11 +1691,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 +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, 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 +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":
@@ -1793,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, {
@@ -1838,45 +1997,37 @@ 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,
+		...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, {
@@ -1884,20 +2035,20 @@ 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 rascunho (e a página) muda quando
-* ele fecha — o `change` nativo; o `onChange` do React dispara a cada movimento. O texto aplica no
+* 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 +2115,30 @@ 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"
-};
-/** 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, 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,
@@ -2028,104 +2148,192 @@ 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"),
+				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",
@@ -2199,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
@@ -7270,4 +7631,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-7L93aV1-.js.map
+//# sourceMappingURL=DashboardDevtools-6v5HDe-A.js.map