@bluemarble/bi 0.6.6 → 0.8.0

package/dist/{DashboardDevtools-I00Iz0Z8.js → DashboardDevtools-wk4vMfhy.js}

@@ -1,7 +1,7 @@
 import { c as VALUE_FORMATS, f as validateModel, g as parseColumnRef, h as modelEdges, m as measureHome, o as AGGREGATIONS, s as AGGREGATION_LABEL, t as canonicalJson, u as isAggregate, v as referencedTables } from "./codegen-LoQzFAle.js";
 import { n as diffRows } from "./compare-DloZhg1T.js";
-import { C as RULE_OPERATORS, E as VALUE_RULE_OPERATORS, S as NUMERIC_OPERATORS, T as UNARY_OPERATORS, a as FILTER_FIELDS, b as COLUMN_ALIGNS, c as chartColumns, f as filterReferences, g as percentColumn, h as layoutModelWarnings, i as CARD_FIELDS, l as chartOfType, n as CANVAS_PRESETS, o as cardsGap, r as CARDS_FIELDS, t as BUILTIN_CHART_TYPES, u as chartReferences, v as tableColumns, w as RULE_OPERATOR_LABEL, x as COLUMN_VERTICAL_ALIGNS, y as validateLayout } from "./layout-CrZ00tB0.js";
-import { C as parseLayoutItemKey, S as layoutItemKey, b as errorMessage, f as SERIES_COLORS, n as INSPECT_ATTRIBUTE, o as formatMeasure, t as ModelDictionary, x as LAYOUT_ITEM_ATTRIBUTE, y as useDashboard } from "./ModelDictionary-DUGFHBo-.js";
+import { C as DEFAULT_SCALE_MIN_COLOR, D as UNARY_OPERATORS, E as RULE_OPERATOR_LABEL, O as VALUE_RULE_OPERATORS, S as COLUMN_VERTICAL_ALIGNS, T as RULE_OPERATORS, a as FILTER_FIELDS, b as COLOR_SCALE_TARGETS, c as chartColumns, f as filterReferences, g as percentColumn, h as layoutModelWarnings, i as CARD_FIELDS, l as chartOfType, n as CANVAS_PRESETS, o as cardsGap, r as CARDS_FIELDS, t as BUILTIN_CHART_TYPES, u as chartReferences, v as tableColumns, w as NUMERIC_OPERATORS, x as COLUMN_ALIGNS, y as validateLayout } from "./layout-BS3nO6OT.js";
+import { C as useDashboard, D as parseLayoutItemKey, E as layoutItemKey, T as LAYOUT_ITEM_ATTRIBUTE, g as SERIES_COLORS, n as INSPECT_ATTRIBUTE, s as formatMeasure, t as ModelDictionary, w as errorMessage } from "./ModelDictionary-DZiYK1mV.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, Switch, 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";
@@ -2182,6 +2182,11 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 				model,
 				onChange: (rules) => set(key, rules.length ? rules : void 0)
 			});
+			case "colorScales": return /* @__PURE__ */ jsx(ColorScalesInput, {
+				scales: value ?? [],
+				columnOptions: columnOptionsOf(columns.filter((name) => model.dimensions[name]?.type !== "string")),
+				onChange: (scales) => set(key, scales.length ? scales : void 0)
+			});
 			case "formatters": {
 				const map = value ?? {};
 				if (!chosenDimensions.length) return /* @__PURE__ */ jsx(Typography, {
@@ -2254,7 +2259,7 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 		...pairedFormatters
 	].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" || spec.kind === "colors" || spec.kind === "valueRule";
+	const fullRow = (spec) => spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters" || spec.kind === "formatRules" || spec.kind === "colorScales" || spec.kind === "colors" || spec.kind === "valueRule";
 	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);
@@ -2590,6 +2595,202 @@ function FormatRulesInput({ rules, fieldOptions, columnOptions, model, onChange
 		})]
 	});
 }
+const COLOR_SCALE_TARGET_LABEL = {
+	background: "o fundo",
+	text: "o texto"
+};
+const DEFAULT_SCALE_COLOR = "#2e7d32";
+/**
+* Escalas de cor (gradiente), uma por cartão: "pinta <o fundo | o texto> de <coluna> de <cor
+* mínima> (em <mínimo>) a <cor máxima> (em <máximo>)". Mínimo/máximo vazios = da própria coluna.
+*/
+function ColorScalesInput({ scales, columnOptions, onChange }) {
+	const update = (index, change) => onChange(scales.map((scale, i) => i === index ? change(scale) : scale));
+	const columns = columnOptions.map((option) => option.name);
+	const parseNumber = (text) => {
+		const number = Number(text.trim().replace(",", "."));
+		return text.trim() && Number.isFinite(number) ? number : void 0;
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: .75,
+			maxWidth: 760
+		},
+		children: [scales.map((scale, index) => {
+			const minColor = scale.minColor ?? "#ffffff";
+			const inverted = scale.min !== void 0 && scale.max !== void 0 && scale.min >= scale.max;
+			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, ". Pinta"]
+							}),
+							/* @__PURE__ */ jsx(TextField, {
+								select: true,
+								size: "small",
+								value: scale.target ?? "background",
+								onChange: (e) => update(index, (current) => withField(current, "target", e.target.value === "background" ? void 0 : e.target.value)),
+								sx: {
+									...inputSx$1,
+									flex: "1 1 100px"
+								},
+								children: COLOR_SCALE_TARGETS.map((target) => /* @__PURE__ */ jsx(MenuItem, {
+									value: target,
+									children: COLOR_SCALE_TARGET_LABEL[target]
+								}, target))
+							}),
+							/* @__PURE__ */ jsx(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: "de"
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								sx: { flex: "2 1 140px" },
+								children: /* @__PURE__ */ jsx(NameSelect, {
+									value: scale.column,
+									options: columnOptions,
+									required: true,
+									onChange: (column) => update(index, (current) => ({
+										...current,
+										column
+									}))
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								title: "Prévia do gradiente",
+								sx: {
+									flex: "1 1 80px",
+									height: 20,
+									border: 1,
+									borderColor: "divider",
+									borderRadius: .5,
+									background: `linear-gradient(to right, ${minColor}, ${scale.color})`
+								}
+							}),
+							/* @__PURE__ */ jsxs(Box, {
+								className: "row-actions",
+								sx: {
+									display: "flex",
+									visibility: "hidden"
+								},
+								children: [
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Subir",
+										disabled: index === 0,
+										onClick: () => onChange(moveTo(scales, index, index - 1)),
+										children: "↑"
+									}),
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Descer",
+										disabled: index === scales.length - 1,
+										onClick: () => onChange(moveTo(scales, index, index + 2)),
+										children: "↓"
+									}),
+									/* @__PURE__ */ jsx(SmallButton, {
+										title: "Remover",
+										onClick: () => onChange(scales.filter((_, i) => i !== index)),
+										children: "×"
+									})
+								]
+							})
+						]
+					}),
+					scale.column && !columns.includes(scale.column) && /* @__PURE__ */ jsxs(Typography, {
+						sx: {
+							fontSize: 11,
+							color: "warning.main"
+						},
+						children: [
+							"\"",
+							scale.column,
+							"\" não é coluna numérica do gráfico: nada é pintado"
+						]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "grid",
+							gap: .5,
+							gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))",
+							alignItems: "end"
+						},
+						children: [
+							field("Cor mínima", /* @__PURE__ */ jsx(ColorInput, {
+								value: scale.minColor,
+								fallback: DEFAULT_SCALE_MIN_COLOR,
+								onCommit: (color) => update(index, (current) => withField(current, "minColor", color === "#ffffff" ? void 0 : color))
+							})),
+							field("Mínimo", /* @__PURE__ */ jsx(CommitText, {
+								value: scale.min === void 0 ? "" : String(scale.min),
+								placeholder: "menor da coluna",
+								error: inverted,
+								onCommit: (text) => update(index, (current) => withField(current, "min", parseNumber(text)))
+							})),
+							field("Cor máxima", /* @__PURE__ */ jsx(ColorInput, {
+								value: scale.color,
+								fallback: DEFAULT_SCALE_COLOR,
+								onCommit: (color) => update(index, (current) => ({
+									...current,
+									color: color ?? DEFAULT_SCALE_COLOR
+								}))
+							})),
+							field("Máximo", /* @__PURE__ */ jsx(CommitText, {
+								value: scale.max === void 0 ? "" : String(scale.max),
+								placeholder: "maior da coluna",
+								error: inverted,
+								onCommit: (text) => update(index, (current) => withField(current, "max", parseNumber(text)))
+							}))
+						]
+					}),
+					inverted && /* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontSize: 11,
+							color: "error.main"
+						},
+						children: "O mínimo precisa ser menor que o máximo"
+					})
+				]
+			}, index);
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			variant: "outlined",
+			disabled: !columnOptions.length,
+			onClick: () => onChange([...scales, {
+				column: columns.find((name) => !scales.some((scale) => scale.column === name)) ?? columns[0] ?? "",
+				color: DEFAULT_SCALE_COLOR
+			}]),
+			sx: {
+				alignSelf: "flex-start",
+				textTransform: "none"
+			},
+			children: "+ escala"
+		})]
+	});
+}
 /** 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);
@@ -3036,7 +3237,7 @@ function ColumnOptions({ kind, name, model, label, onLabel, format, onFormat, fo
 					value: formatter,
 					options: formatters.map((option) => ({ name: option })),
 					onChange: onFormatter
-				}), "Formatters passados ao <DashboardCharts formatters={{ ... }}> da página"),
+				}), "Built-in (to_month_name, to_date, ...) e os passados ao <DashboardCharts formatters={{ ... }}> da página"),
 				format !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsxs(Box, {
 						sx: {
@@ -3620,126 +3821,629 @@ function freeName(prefix, taken) {
 	for (let index = 2;; index++) if (!taken.includes(`${prefix}${index}`)) return `${prefix}${index}`;
 }
 //#endregion
-//#region src/devtools/SqlEditor.tsx
-/**
-* Campo de SQL com destaque de sintaxe e autocomplete de tabelas e colunas. As colunas vêm do
-* `information_schema` (tabelas/views do banco) e das colunas de cada tabela do modelo (lidas do banco).
-* O ⤢ abre o mesmo SQL num editor grande.
-*
-* O destaque é um `<pre>` colorido por baixo do `<textarea>` de texto transparente: mesma fonte,
-* mesmo recuo e mesma quebra de linha, com a rolagem sincronizada. O cursor, a seleção e o
-* autocomplete continuam sendo do textarea.
-*/
-const PAD = {
-	top: 8.5,
-	right: 30,
-	bottom: 8.5,
-	left: 12
-};
-const LINE_HEIGHT = "18px";
-const SqlCompletionsContext = createContext({
-	tables: [],
-	modelColumns: {}
-});
-const KEYWORDS = new Set("WHERE ON LEFT RIGHT INNER OUTER JOIN GROUP ORDER LIMIT USING AND OR AS SET HAVING UNION".split(" "));
-/** `alias -> tabela` a partir dos `FROM x a` / `JOIN x AS a` do texto. */
-function aliases(sql) {
-	const map = /* @__PURE__ */ new Map();
-	for (const match of sql.matchAll(/\b(?:FROM|JOIN)\s+`?(\w+)`?(?:\s+(?:AS\s+)?`?(\w+)`?)?/gi)) {
-		const [, table, alias] = match;
-		map.set(table.toLowerCase(), table);
-		if (alias && !KEYWORDS.has(alias.toUpperCase())) map.set(alias.toLowerCase(), table);
-	}
-	return map;
+//#region src/devtools/QueryBuilder.tsx
+const RESERVED = new Set("select from where group order by limit key keys index table desc asc and or not in is null like as on join case when then else end interval range rows".split(" "));
+const quote = (name) => /^[A-Za-z_]\w*$/.test(name) && !RESERVED.has(name.toLowerCase()) ? name : `\`${name}\``;
+const unquote = (name) => name.trim().replace(/^`(.*)`$/, "$1");
+function buildSelect(table, columns) {
+	return `SELECT\n${columns.length ? columns.map((column) => `  ${quote(column)}`).join(",\n") : "  *"}\nFROM ${quote(table)}`;
 }
-function suggest(sql, caret, completions) {
-	const before = sql.slice(0, caret);
-	const tables = new Map(completions.tables.map((table) => [table.name.toLowerCase(), table]));
-	const columnsOf = (table) => tables.get(table.toLowerCase())?.columns.map((column) => ({
-		text: column.name,
-		detail: column.type
-	})) ?? [];
-	let prefix;
-	let candidates;
-	const qualified = /([A-Za-z_]\w*)\.(\w*)$/.exec(before);
-	if (qualified) {
-		const [, qualifier, typed] = qualified;
-		prefix = typed;
-		if (completions.modelColumns[qualifier]) candidates = completions.modelColumns[qualifier].map((text) => ({
-			text,
-			detail: qualifier
-		}));
-		else candidates = columnsOf(aliases(sql).get(qualifier.toLowerCase()) ?? qualifier);
-	} else {
-		const word = /[A-Za-z_]\w*$/.exec(before);
-		if (!word || word[0].length < 2) return null;
-		prefix = word[0];
-		const referenced = [...new Set(aliases(sql).values())];
-		candidates = [
-			...Object.keys(completions.modelColumns).map((text) => ({
-				text,
-				detail: "tabela do modelo"
-			})),
-			...completions.tables.map((table) => ({
-				text: table.name,
-				detail: table.type
-			})),
-			...referenced.flatMap(columnsOf)
-		];
-	}
-	const lower = prefix.toLowerCase();
-	const seen = /* @__PURE__ */ new Set();
-	const items = candidates.filter((item) => {
-		const text = item.text.toLowerCase();
-		if (seen.has(text) || text === lower || !text.includes(lower)) return false;
-		seen.add(text);
-		return true;
-	}).sort((a, b) => Number(!a.text.toLowerCase().startsWith(lower)) - Number(!b.text.toLowerCase().startsWith(lower)) || a.text.localeCompare(b.text)).slice(0, 8);
-	return items.length ? {
-		from: caret - prefix.length,
-		items
-	} : null;
+/** Tabela e colunas de um `SELECT a, b FROM t` (sem WHERE, JOIN etc.); senão `null`. */
+function parseSelect(sql) {
+	const match = /^\s*SELECT\s+([\s\S]+?)\s+FROM\s+(`[^`]+`|\w+)\s*;?\s*$/i.exec(sql);
+	if (!match) return null;
+	const columns = match[1].trim() === "*" ? [] : match[1].split(",").map(unquote);
+	if (columns.some((column) => !/^[^\s`().]+$/.test(column))) return null;
+	return {
+		table: unquote(match[2]),
+		columns
+	};
 }
-function SqlEditor({ value, onChange, label, placeholder = "SQL", minRows, maxRows = 6, error, warning, expandable = true }) {
-	const completions = useContext(SqlCompletionsContext);
-	const anchor = useRef(null);
-	const input = useRef(null);
-	const highlight = useRef(null);
-	const [expanded, setExpanded] = useState(false);
-	const [state, setState] = useState(null);
-	const accept = (item) => {
-		const element = input.current;
-		if (!element || !state) return;
-		const caret = element.selectionStart;
-		onChange(value.slice(0, state.from) + item.text + value.slice(caret));
-		setState(null);
-		const position = state.from + item.text.length;
-		requestAnimationFrame(() => {
-			element.focus();
-			element.setSelectionRange(position, position);
-		});
+function QueryBuilder({ open, onClose, tables, sql, onApply }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onClose,
+		maxWidth: "md",
+		fullWidth: true,
+		children: open && /* @__PURE__ */ jsx(Builder, {
+			tables,
+			sql,
+			onClose,
+			onApply
+		})
+	});
+}
+function Builder({ tables, sql, onClose, onApply }) {
+	const [initial] = useState(() => {
+		const parsed = parseSelect(sql);
+		const table = parsed && tables.find((item) => item.name === parsed.table);
+		if (!parsed || !table) return {
+			table: null,
+			columns: []
+		};
+		const known = new Set(table.columns.map((column) => column.name));
+		return {
+			table,
+			columns: parsed.columns.filter((column) => known.has(column))
+		};
+	});
+	const [table, setTable] = useState(initial.table);
+	const [selected, setSelected] = useState(initial.columns);
+	const [search, setSearch] = useState("");
+	const visible = useMemo(() => {
+		const lower = search.trim().toLowerCase();
+		return (table?.columns ?? []).filter((column) => column.name.toLowerCase().includes(lower));
+	}, [table, search]);
+	const ordered = (table?.columns ?? []).map((column) => column.name).filter((name) => selected.includes(name));
+	const result = table ? buildSelect(table.name, ordered) : "";
+	const allVisible = visible.length > 0 && visible.every((column) => selected.includes(column.name));
+	const toggle = (name) => setSelected((current) => current.includes(name) ? current.filter((item) => item !== name) : [...current, name]);
+	const toggleVisible = () => {
+		const names = visible.map((column) => column.name);
+		setSelected((current) => allVisible ? current.filter((name) => !names.includes(name)) : [.../* @__PURE__ */ new Set([...current, ...names])]);
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(TextField, {
-			ref: anchor,
-			inputRef: input,
-			size: "small",
-			fullWidth: true,
-			multiline: true,
-			label,
-			minRows,
-			maxRows,
-			value,
-			placeholder,
-			error: !value.trim() || !!error,
-			helperText: error ?? warning,
-			onChange: (event) => {
-				onChange(event.target.value);
-				const found = suggest(event.target.value, event.target.selectionStart ?? 0, completions);
-				setState(found && {
-					...found,
-					index: 0
-				});
+		/* @__PURE__ */ jsx(DialogTitle, {
+			sx: { fontSize: 14 },
+			children: "Criar query"
+		}),
+		/* @__PURE__ */ jsxs(DialogContent, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 1.5
+			},
+			children: [
+				/* @__PURE__ */ jsx(Autocomplete, {
+					size: "small",
+					options: tables,
+					value: table,
+					onChange: (_, value) => {
+						setTable(value);
+						setSelected([]);
+						setSearch("");
+					},
+					getOptionLabel: (option) => option.name,
+					isOptionEqualToValue: (option, value) => option.name === value.name,
+					noOptionsText: tables.length ? "Nenhuma tabela" : "Carregando as tabelas do banco…",
+					renderOption: ({ key, ...props }, option) => /* @__PURE__ */ jsxs(Box, {
+						component: "li",
+						...props,
+						sx: {
+							gap: 2,
+							fontFamily: MONO,
+							fontSize: 12
+						},
+						children: [option.name, /* @__PURE__ */ jsxs(Box, {
+							component: "span",
+							sx: {
+								ml: "auto",
+								color: "text.secondary",
+								fontSize: 11
+							},
+							children: [
+								option.type,
+								" · ",
+								option.columns.length,
+								" colunas"
+							]
+						})]
+					}, key),
+					renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+						...params,
+						label: "tabela",
+						sx: { mt: 1 }
+					})
+				}),
+				table && /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						flexDirection: "column",
+						gap: .5
+					},
+					children: [/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							display: "flex",
+							alignItems: "center",
+							gap: 1
+						},
+						children: [
+							/* @__PURE__ */ jsx(FormControlLabel, {
+								control: /* @__PURE__ */ jsx(Checkbox, {
+									size: "small",
+									checked: allVisible,
+									indeterminate: !allVisible && visible.some((c) => selected.includes(c.name)),
+									onChange: toggleVisible
+								}),
+								label: /* @__PURE__ */ jsx(Typography, {
+									sx: { fontSize: 12 },
+									children: "Todas"
+								})
+							}),
+							/* @__PURE__ */ jsxs(Typography, {
+								sx: {
+									fontSize: 12,
+									color: "text.secondary"
+								},
+								children: [
+									selected.length,
+									" de ",
+									table.columns.length,
+									" marcadas",
+									!selected.length && " (nenhuma = *)"
+								]
+							}),
+							/* @__PURE__ */ jsx(TextField, {
+								size: "small",
+								placeholder: "filtrar colunas",
+								value: search,
+								onChange: (event) => setSearch(event.target.value),
+								sx: {
+									ml: "auto",
+									width: 200
+								}
+							})
+						]
+					}), /* @__PURE__ */ jsx(Box, {
+						sx: {
+							maxHeight: 280,
+							overflow: "auto",
+							border: 1,
+							borderColor: "divider",
+							borderRadius: 1,
+							px: 1,
+							display: "grid",
+							gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))"
+						},
+						children: visible.map((column) => /* @__PURE__ */ jsx(FormControlLabel, {
+							control: /* @__PURE__ */ jsx(Checkbox, {
+								size: "small",
+								checked: selected.includes(column.name),
+								onChange: () => toggle(column.name)
+							}),
+							label: /* @__PURE__ */ jsxs(Box, {
+								component: "span",
+								sx: {
+									fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+									fontSize: 12
+								},
+								children: [
+									column.name,
+									" ",
+									/* @__PURE__ */ jsx(Box, {
+										component: "span",
+										sx: {
+											color: "text.secondary",
+											fontSize: 11
+										},
+										children: column.type
+									})
+								]
+							}),
+							sx: {
+								m: 0,
+								minWidth: 0
+							}
+						}, column.name))
+					})]
+				}),
+				result && /* @__PURE__ */ jsx(Box, {
+					component: "pre",
+					sx: {
+						m: 0,
+						p: 1,
+						border: 1,
+						borderColor: "divider",
+						borderRadius: 1,
+						fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+						fontSize: 12,
+						maxHeight: 200,
+						overflow: "auto"
+					},
+					children: /* @__PURE__ */ jsx(HighlightedSql, { code: result })
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Cancelar"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "contained",
+			disabled: !table,
+			onClick: () => {
+				onApply(result);
+				onClose();
+			},
+			title: "Substitui o SQL atual",
+			children: "Usar no SQL"
+		})] })
+	] });
+}
+//#endregion
+//#region src/devtools/queryTemplates.ts
+/**
+* `WITH` da origem: a tabela do banco entra pelo nome; o SQL de uma tabela do modelo vira o CTE
+* `origem`, antes dos CTEs do template.
+*/
+function withSource(source) {
+	if (source.kind === "database") return {
+		ctes: [],
+		from: quote(source.table)
+	};
+	return {
+		ctes: [`origem AS (\n${source.sql.trim().replace(/;+\s*$/, "").replace(/^/gm, "    ")}\n)`],
+		from: "origem"
+	};
+}
+/**
+* Um dia por linha, do menor ao maior valor da coluna, com ano e mês. É a tabela "Calendário" do
+* Power BI: relacione a coluna de data da fato com `dia`.
+*
+* Não é um `WITH RECURSIVE` de um dia por iteração: o MySQL (`cte_max_recursion_depth`) e o MariaDB
+* (`max_recursive_iterations`) param em 1000 iterações, e o MariaDB corta em silêncio — o calendário
+* acabaria ~2,7 anos depois do início. A recursão só gera 0–999 e o dia sai de `mil * 1000 + n`.
+*/
+function calendarSql(source, column) {
+	const { ctes, from } = withSource(source);
+	const col = quote(column);
+	return [
+		`WITH RECURSIVE ${[
+			...ctes,
+			[
+				"limites AS (",
+				`    SELECT DATE(MIN(${col})) AS inicio, DATE(MAX(${col})) AS fim`,
+				`    FROM ${from}`,
+				")"
+			],
+			[
+				"numeros AS (",
+				"    SELECT 0 AS n",
+				"    UNION ALL",
+				"    SELECT n + 1 FROM numeros WHERE n < 999",
+				")"
+			],
+			[
+				"dias AS (",
+				"    SELECT inicio + INTERVAL (mil.n * 1000 + numeros.n) DAY AS dia",
+				"    FROM limites, numeros mil, numeros",
+				"    WHERE mil.n <= DATEDIFF(fim, inicio) DIV 1000",
+				"        AND mil.n * 1000 + numeros.n <= DATEDIFF(fim, inicio)",
+				")"
+			]
+		].map((part) => Array.isArray(part) ? part.join("\n") : part).join(",\n")}`,
+		"SELECT",
+		"  dia,",
+		"  YEAR(dia) AS ano,",
+		"  MONTH(dia) AS mes",
+		"FROM dias"
+	].join("\n");
+}
+const QUERY_TEMPLATES = [{
+	id: "calendar",
+	label: "Calendário",
+	description: "Um dia por linha (com ano e mês) entre a menor e a maior data da coluna. Relacione a data da fato com `dia`.",
+	columnLabel: "coluna de data",
+	preferredTypes: /date|time/i,
+	build: calendarSql
+}];
+//#endregion
+//#region src/devtools/QueryTemplates.tsx
+function QueryTemplates({ open, onClose, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onClose,
+		maxWidth: "md",
+		fullWidth: true,
+		children: open && /* @__PURE__ */ jsx(Templates, {
+			onClose,
+			...props
+		})
+	});
+}
+function Templates({ tables, modelTables, onClose, onApply }) {
+	const [templateId, setTemplateId] = useState(QUERY_TEMPLATES[0].id);
+	const [source, setSource] = useState(null);
+	const [column, setColumn] = useState(null);
+	const template = QUERY_TEMPLATES.find((item) => item.id === templateId) ?? QUERY_TEMPLATES[0];
+	const sources = useMemo(() => [...Object.entries(modelTables).map(([name, table]) => ({
+		key: `model:${name}`,
+		name,
+		group: "Tabelas do modelo",
+		columns: table.columns.map((column) => ({ name: column })),
+		source: {
+			kind: "model",
+			sql: table.sql
+		}
+	})), ...tables.map((table) => ({
+		key: `database:${table.name}`,
+		name: table.name,
+		group: "Tabelas do banco",
+		columns: table.columns,
+		source: {
+			kind: "database",
+			table: table.name
+		}
+	}))], [tables, modelTables]);
+	const columns = useMemo(() => {
+		const list = source?.columns ?? [];
+		const preferred = (type) => !!type && !!template.preferredTypes?.test(type);
+		return [...list.filter((c) => preferred(c.type)), ...list.filter((c) => !preferred(c.type))];
+	}, [source, template]);
+	const result = source && column ? template.build(source.source, column) : "";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(DialogTitle, {
+			sx: { fontSize: 14 },
+			children: "Importar template"
+		}),
+		/* @__PURE__ */ jsxs(DialogContent, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 1.5
+			},
+			children: [
+				/* @__PURE__ */ jsx(TextField, {
+					select: true,
+					size: "small",
+					label: "template",
+					value: template.id,
+					onChange: (event) => setTemplateId(event.target.value),
+					helperText: template.description,
+					sx: { mt: 1 },
+					children: QUERY_TEMPLATES.map((item) => /* @__PURE__ */ jsx(MenuItem, {
+						value: item.id,
+						children: item.label
+					}, item.id))
+				}),
+				/* @__PURE__ */ jsx(Autocomplete, {
+					size: "small",
+					options: sources,
+					value: source,
+					onChange: (_, value) => {
+						setSource(value);
+						setColumn(null);
+					},
+					groupBy: (option) => option.group,
+					getOptionLabel: (option) => option.name,
+					isOptionEqualToValue: (option, value) => option.key === value.key,
+					noOptionsText: "Nenhuma tabela",
+					renderOption: ({ key, ...props }, option) => /* @__PURE__ */ jsxs(Box, {
+						component: "li",
+						...props,
+						sx: {
+							gap: 2,
+							fontFamily: MONO,
+							fontSize: 12
+						},
+						children: [option.name, /* @__PURE__ */ jsxs(Box, {
+							component: "span",
+							sx: {
+								ml: "auto",
+								color: "text.secondary",
+								fontSize: 11
+							},
+							children: [option.columns.length, " colunas"]
+						})]
+					}, key),
+					renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+						...params,
+						label: "tabela"
+					})
+				}),
+				source && /* @__PURE__ */ jsx(Autocomplete, {
+					size: "small",
+					options: columns.map((item) => item.name),
+					value: column,
+					onChange: (_, value) => setColumn(value),
+					noOptionsText: source.source.kind === "model" ? "Sem colunas: valide o SQL dessa tabela" : "Nenhuma coluna",
+					renderOption: ({ key, ...props }, name) => /* @__PURE__ */ jsxs(Box, {
+						component: "li",
+						...props,
+						sx: {
+							gap: 2,
+							fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+							fontSize: 12
+						},
+						children: [name, /* @__PURE__ */ jsx(Box, {
+							component: "span",
+							sx: {
+								ml: "auto",
+								color: "text.secondary",
+								fontSize: 11
+							},
+							children: columns.find((item) => item.name === name)?.type
+						})]
+					}, key),
+					renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+						...params,
+						label: template.columnLabel
+					})
+				}),
+				result ? /* @__PURE__ */ jsx(Box, {
+					component: "pre",
+					sx: {
+						m: 0,
+						p: 1,
+						border: 1,
+						borderColor: "divider",
+						borderRadius: 1,
+						fontFamily: MONO,
+						fontSize: 12,
+						maxHeight: 280,
+						overflow: "auto"
+					},
+					children: /* @__PURE__ */ jsx(HighlightedSql, { code: result })
+				}) : /* @__PURE__ */ jsx(Typography, {
+					sx: {
+						fontSize: 12,
+						color: "text.secondary"
+					},
+					children: "Escolha a tabela e a coluna para ver o SQL."
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Cancelar"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "contained",
+			disabled: !result,
+			onClick: () => {
+				onApply(result);
+				onClose();
+			},
+			title: "Substitui o SQL atual",
+			children: "Usar no SQL"
+		})] })
+	] });
+}
+//#endregion
+//#region src/devtools/SqlEditor.tsx
+/**
+* Campo de SQL com destaque de sintaxe e autocomplete de tabelas e colunas. As colunas vêm do
+* `information_schema` (tabelas/views do banco) e das colunas de cada tabela do modelo (lidas do banco).
+* O ⤢ abre o mesmo SQL num editor grande; com `queryTools`, ele traz "Criar query" (escolher tabela e
+* colunas do banco), "Importar template" (calendário etc.) e "Validar SQL" (executa no banco e
+* mostra uma amostra).
+*
+* O destaque é um `<pre>` colorido por baixo do `<textarea>` de texto transparente: mesma fonte,
+* mesmo recuo e mesma quebra de linha, com a rolagem sincronizada. O cursor, a seleção e o
+* autocomplete continuam sendo do textarea.
+*/
+const PAD = {
+	top: 8.5,
+	right: 30,
+	bottom: 8.5,
+	left: 12
+};
+const LINE_HEIGHT = "18px";
+const SqlCompletionsContext = createContext({
+	tables: [],
+	modelColumns: {}
+});
+const KEYWORDS = new Set("WHERE ON LEFT RIGHT INNER OUTER JOIN GROUP ORDER LIMIT USING AND OR AS SET HAVING UNION".split(" "));
+/** `alias -> tabela` a partir dos `FROM x a` / `JOIN x AS a` do texto. */
+function aliases(sql) {
+	const map = /* @__PURE__ */ new Map();
+	for (const match of sql.matchAll(/\b(?:FROM|JOIN)\s+`?(\w+)`?(?:\s+(?:AS\s+)?`?(\w+)`?)?/gi)) {
+		const [, table, alias] = match;
+		map.set(table.toLowerCase(), table);
+		if (alias && !KEYWORDS.has(alias.toUpperCase())) map.set(alias.toLowerCase(), table);
+	}
+	return map;
+}
+function suggest(sql, caret, completions) {
+	const before = sql.slice(0, caret);
+	const tables = new Map(completions.tables.map((table) => [table.name.toLowerCase(), table]));
+	const columnsOf = (table) => tables.get(table.toLowerCase())?.columns.map((column) => ({
+		text: column.name,
+		detail: column.type
+	})) ?? [];
+	let prefix;
+	let candidates;
+	const qualified = /([A-Za-z_]\w*)\.(\w*)$/.exec(before);
+	if (qualified) {
+		const [, qualifier, typed] = qualified;
+		prefix = typed;
+		if (completions.modelColumns[qualifier]) candidates = completions.modelColumns[qualifier].map((text) => ({
+			text,
+			detail: qualifier
+		}));
+		else candidates = columnsOf(aliases(sql).get(qualifier.toLowerCase()) ?? qualifier);
+	} else {
+		const word = /[A-Za-z_]\w*$/.exec(before);
+		if (!word || word[0].length < 2) return null;
+		prefix = word[0];
+		const referenced = [...new Set(aliases(sql).values())];
+		candidates = [
+			...Object.keys(completions.modelColumns).map((text) => ({
+				text,
+				detail: "tabela do modelo"
+			})),
+			...completions.tables.map((table) => ({
+				text: table.name,
+				detail: table.type
+			})),
+			...referenced.flatMap(columnsOf)
+		];
+	}
+	const lower = prefix.toLowerCase();
+	const seen = /* @__PURE__ */ new Set();
+	const items = candidates.filter((item) => {
+		const text = item.text.toLowerCase();
+		if (seen.has(text) || text === lower || !text.includes(lower)) return false;
+		seen.add(text);
+		return true;
+	}).sort((a, b) => Number(!a.text.toLowerCase().startsWith(lower)) - Number(!b.text.toLowerCase().startsWith(lower)) || a.text.localeCompare(b.text)).slice(0, 8);
+	return items.length ? {
+		from: caret - prefix.length,
+		items
+	} : null;
+}
+function SqlEditor({ value, onChange, label, placeholder = "SQL", minRows, maxRows = 6, error, warning, expandable = true, queryTools = false }) {
+	const completions = useContext(SqlCompletionsContext);
+	const anchor = useRef(null);
+	const input = useRef(null);
+	const highlight = useRef(null);
+	const [expanded, setExpanded] = useState(false);
+	const [building, setBuilding] = useState(false);
+	const [importing, setImporting] = useState(false);
+	const [test, setTest] = useState(null);
+	const [testing, setTesting] = useState(false);
+	const currentTest = test?.sql === value ? test : null;
+	const testSql = completions.testSql;
+	const runTest = async () => {
+		if (!testSql) return;
+		const sql = value;
+		setTesting(true);
+		try {
+			setTest({
+				sql,
+				result: await testSql(sql)
+			});
+		} catch (error) {
+			setTest({
+				sql,
+				error: errorMessage(error)
+			});
+		} finally {
+			setTesting(false);
+		}
+	};
+	const [state, setState] = useState(null);
+	const accept = (item) => {
+		const element = input.current;
+		if (!element || !state) return;
+		const caret = element.selectionStart;
+		onChange(value.slice(0, state.from) + item.text + value.slice(caret));
+		setState(null);
+		const position = state.from + item.text.length;
+		requestAnimationFrame(() => {
+			element.focus();
+			element.setSelectionRange(position, position);
+		});
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(TextField, {
+			ref: anchor,
+			inputRef: input,
+			size: "small",
+			fullWidth: true,
+			multiline: true,
+			label,
+			minRows,
+			maxRows,
+			value,
+			placeholder,
+			error: !value.trim() || !!error,
+			helperText: error ?? warning,
+			onChange: (event) => {
+				onChange(event.target.value);
+				const found = suggest(event.target.value, event.target.selectionStart ?? 0, completions);
+				setState(found && {
+					...found,
+					index: 0
+				});
 			},
 			onKeyDown: (event) => {
 				if (!state) return;
@@ -3845,25 +4549,90 @@ function SqlEditor({ value, onChange, label, placeholder = "SQL", minRows, maxRo
 					sx: { fontSize: 14 },
 					children: label ?? "SQL"
 				}),
-				/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Box, {
-					sx: { pt: 1 },
-					children: /* @__PURE__ */ jsx(SqlEditor, {
-						value,
-						onChange,
-						placeholder,
-						minRows: 20,
-						maxRows: 36,
-						error,
-						warning,
-						expandable: false
+				/* @__PURE__ */ jsxs(DialogContent, { children: [
+					/* @__PURE__ */ jsx(Box, {
+						sx: { pt: 1 },
+						children: /* @__PURE__ */ jsx(SqlEditor, {
+							value,
+							onChange,
+							placeholder,
+							minRows: 20,
+							maxRows: 36,
+							error,
+							warning,
+							expandable: false
+						})
+					}),
+					currentTest?.error && /* @__PURE__ */ jsx(Alert, {
+						severity: "error",
+						sx: {
+							mt: 1,
+							fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+							fontSize: 12
+						},
+						children: currentTest.error
+					}),
+					currentTest?.result && /* @__PURE__ */ jsxs(Box, {
+						sx: {
+							mt: 1,
+							display: "flex",
+							flexDirection: "column",
+							gap: 1
+						},
+						children: [/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Chip, {
+							color: "success",
+							size: "small",
+							label: `SQL válido · ${currentTest.result.columns.length} colunas · ${currentTest.result.durationMs} ms`
+						}) }), /* @__PURE__ */ jsx(ResultTable, {
+							rows: currentTest.result.rows,
+							maxHeight: 240
+						})]
 					})
-				}) }),
-				/* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, {
-					onClick: () => setExpanded(false),
-					children: "Fechar"
-				}) })
+				] }),
+				/* @__PURE__ */ jsxs(DialogActions, { children: [
+					queryTools && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(Button, {
+							onClick: () => setBuilding(true),
+							title: "Escolher a tabela e as colunas",
+							children: "Criar query"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							onClick: () => setImporting(true),
+							title: "Calendário e outras queries prontas",
+							children: "Importar template"
+						}),
+						testSql && /* @__PURE__ */ jsx(Button, {
+							disabled: !value.trim() || testing,
+							onClick: runTest,
+							title: "Executa o SQL no banco e mostra as primeiras linhas",
+							children: testing ? "Validando…" : "Validar SQL"
+						})
+					] }),
+					/* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
+					/* @__PURE__ */ jsx(Button, {
+						onClick: () => setExpanded(false),
+						children: "Fechar"
+					})
+				] })
 			]
 		}),
+		queryTools && /* @__PURE__ */ jsx(QueryBuilder, {
+			open: building,
+			onClose: () => setBuilding(false),
+			tables: completions.tables,
+			sql: value,
+			onApply: onChange
+		}),
+		queryTools && /* @__PURE__ */ jsx(QueryTemplates, {
+			open: importing,
+			onClose: () => setImporting(false),
+			tables: completions.tables,
+			modelTables: Object.fromEntries(Object.entries(completions.modelSql ?? {}).map(([name, sql]) => [name, {
+				sql,
+				columns: completions.modelColumns[name] ?? []
+			}])),
+			onApply: onChange
+		}),
 		/* @__PURE__ */ jsx(Popper, {
 			open: !!state,
 			anchorEl: anchor.current,
@@ -4323,6 +5092,28 @@ function DimensionSource({ row, editor, columns, error, warning, onPatch }) {
 }
 //#endregion
 //#region src/devtools/ModelDiagram.tsx
+const TARGET_NAME = {
+	table: "tabela",
+	dimension: "dimensão",
+	measure: "medida"
+};
+/** Põe uma medida calculada (fórmula) nova, com nome livre, no fim; devolve o `uid` dela. */
+function addFormulaTo(setEditor) {
+	const uid = newUid();
+	setEditor((current) => {
+		const taken = [...current.dimensions, ...current.measures].map((item) => item.name);
+		const measure = emptyMeasure({
+			uid,
+			type: "formula",
+			name: freeName("novaMedida", taken)
+		});
+		return {
+			...current,
+			measures: [...current.measures, measure]
+		};
+	});
+	return uid;
+}
 const CARD_WIDTH = 230;
 const HEADER = 34;
 const ROW = 22;
@@ -4489,6 +5280,12 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 	});
 	const [selection, setSelection] = useState(null);
 	const [panel, setPanel] = useState(loadPanel);
+	const [renaming, setRenaming] = useState(null);
+	const [menu, setMenu] = useState(null);
+	const closeMenu = () => setMenu((current) => current && {
+		...current,
+		open: false
+	});
 	useEffect(() => {
 		try {
 			localStorage.setItem(PANEL_KEY, JSON.stringify(panel));
@@ -4609,15 +5406,16 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		const rect = canvas.current?.getBoundingClientRect();
 		return toWorld((rect?.left ?? 0) + (rect?.width ?? 600) / 2 - CARD_WIDTH / 2, (rect?.top ?? 0) + (rect?.height ?? 400) / 3);
 	};
-	const addTable = () => {
+	/** `at`: canto do card (o ponto do botão direito); sem ele, perto do centro da tela. */
+	const addTable = (at) => {
 		const uid = newUid();
 		const name = freeName("novaTabela", editor.tables.map((table) => table.name));
-		const center = visibleCenter();
+		const position = at ?? visibleCenter();
 		setEditor((current) => ({
 			...current,
 			positions: {
 				...current.positions,
-				[uid]: center
+				[uid]: position
 			},
 			tables: [...current.tables, {
 				uid,
@@ -4633,6 +5431,20 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 			uid
 		});
 	};
+	const organize = () => {
+		const layout = autoLayout(nodes, sizes);
+		setPositions((current) => Object.fromEntries(Object.entries(layout).map(([id, point]) => [id, {
+			...current[id],
+			...point
+		}])));
+		fitToScreen(layout);
+	};
+	const addFormula = () => {
+		setSelection({
+			kind: "measure",
+			uid: addFormulaTo(setEditor)
+		});
+	};
 	const removeTable = (uid) => {
 		setEditor((current) => ({
 			...current,
@@ -4641,6 +5453,19 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		}));
 		setSelection(null);
 	};
+	const remove = (target) => {
+		if (target.kind === "table") return removeTable(target.uid);
+		const list = {
+			relationship: "relationships",
+			dimension: "dimensions",
+			measure: "measures"
+		}[target.kind];
+		setEditor((current) => ({
+			...current,
+			[list]: current[list].filter((row) => row.uid !== target.uid)
+		}));
+		setSelection((current) => current?.uid === target.uid ? null : current);
+	};
 	const commitRename = (uid, name) => setEditor((current) => renameTable(current, uid, name));
 	const connect = (from, fromColumn, to, toColumn) => {
 		if (from.uid === to.uid) return;
@@ -4701,20 +5526,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		});
 	};
 	const removeSelection = () => {
-		if (!selection) return;
-		if (selection.kind === "table") removeTable(selection.uid);
-		else {
-			const list = {
-				relationship: "relationships",
-				dimension: "dimensions",
-				measure: "measures"
-			}[selection.kind];
-			setEditor((current) => ({
-				...current,
-				[list]: current[list].filter((row) => row.uid !== selection.uid)
-			}));
-			setSelection(null);
-		}
+		if (selection) remove(selection);
 	};
 	const startPan = (event) => {
 		if (event.button !== 0) return;
@@ -4902,305 +5714,392 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 			height: "100%",
 			minHeight: 0
 		},
-		children: [/* @__PURE__ */ jsxs(Box, {
-			ref: canvas,
-			tabIndex: -1,
-			onMouseDown: startPan,
-			onMouseDownCapture: () => canvas.current?.focus({ preventScroll: true }),
-			onKeyDown: (event) => {
-				if ((event.key === "Delete" || event.key === "Backspace") && event.target === canvas.current) removeSelection();
-			},
-			onWheel,
-			sx: {
-				outline: "none",
-				flex: 1,
-				position: "relative",
-				overflow: "hidden",
-				cursor: "grab",
-				bgcolor: "#15171b",
-				backgroundImage: "radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px)",
-				backgroundSize: `${20 * view.zoom}px ${20 * view.zoom}px`,
-				backgroundPosition: `${view.x}px ${view.y}px`
-			},
-			children: [
-				/* @__PURE__ */ jsxs(Box, {
-					sx: {
-						position: "absolute",
-						left: 0,
-						top: 0,
-						transformOrigin: "0 0",
-						transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
-					},
-					children: [/* @__PURE__ */ jsxs("svg", {
-						width: 1,
-						height: 1,
-						style: {
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				ref: canvas,
+				tabIndex: -1,
+				onMouseDown: startPan,
+				onMouseDownCapture: () => canvas.current?.focus({ preventScroll: true }),
+				onKeyDown: (event) => {
+					if ((event.key === "Delete" || event.key === "Backspace") && event.target === canvas.current) removeSelection();
+				},
+				onWheel,
+				onContextMenu: (event) => {
+					event.preventDefault();
+					setMenu({
+						open: true,
+						x: event.clientX,
+						y: event.clientY,
+						target: null
+					});
+				},
+				sx: {
+					outline: "none",
+					flex: 1,
+					position: "relative",
+					overflow: "hidden",
+					cursor: "grab",
+					bgcolor: "#15171b",
+					backgroundImage: "radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px)",
+					backgroundSize: `${20 * view.zoom}px ${20 * view.zoom}px`,
+					backgroundPosition: `${view.x}px ${view.y}px`
+				},
+				children: [
+					/* @__PURE__ */ jsxs(Box, {
+						sx: {
+							position: "absolute",
+							left: 0,
+							top: 0,
+							transformOrigin: "0 0",
+							transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
+						},
+						children: [/* @__PURE__ */ jsxs("svg", {
+							width: 1,
+							height: 1,
+							style: {
+								position: "absolute",
+								overflow: "visible",
+								pointerEvents: "none"
+							},
+							"aria-hidden": true,
+							children: [lines.map((line) => /* @__PURE__ */ jsx(RelationshipLine, {
+								line,
+								hovered: hoveredEdge === line.id,
+								onHover: (hovered) => setHoveredEdge(hovered ? line.id : null)
+							}, line.id)), linkPreview && /* @__PURE__ */ jsx("path", {
+								d: linkPreview,
+								fill: "none",
+								stroke: "#F58220",
+								strokeWidth: 2,
+								strokeDasharray: "5 4"
+							})]
+						}), nodes.map((node) => /* @__PURE__ */ jsx(TableCard, {
+							node,
+							position: placed(node),
+							size: sizeOf(node),
+							collapsed: !!collapsed[node.id],
+							selected: !!isSelected(node),
+							linking: !!linking && linking.node.id !== node.id,
+							selectedField: selection?.kind === "dimension" || selection?.kind === "measure" ? selection.uid : null,
+							onToggle: () => setCollapsed((current) => ({
+								...current,
+								[node.id]: !current[node.id]
+							})),
+							onScroll: (top) => setScrolls((current) => ({
+								...current,
+								[node.id]: top
+							})),
+							onHeaderDown: (event) => startMove(event, node),
+							onResizeDown: (event, edges) => startResize(event, node, edges),
+							onResizeReset: () => resetSize(node),
+							onColumnDown: (event, column) => startLink(event, node, column),
+							onFieldClick: (item) => setSelection({
+								kind: item.kind,
+								uid: item.uid
+							}),
+							onAddField: (kind, column) => addField(kind, node.name, column),
+							renaming: renaming === node.uid,
+							onRenameStart: () => setRenaming(node.uid),
+							onRename: (name) => {
+								setRenaming(null);
+								if (name !== null && name !== node.name) commitRename(node.uid, name);
+							},
+							onContextMenu: (event, target) => {
+								event.preventDefault();
+								event.stopPropagation();
+								setMenu({
+									open: true,
+									x: event.clientX,
+									y: event.clientY,
+									target
+								});
+							}
+						}, node.id))]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						onMouseDown: (event) => event.stopPropagation(),
+						onContextMenu: (event) => event.stopPropagation(),
+						sx: {
+							position: "absolute",
+							top: 8,
+							left: 8,
+							right: 8,
+							display: "flex",
+							gap: .75,
+							flexWrap: "wrap",
+							alignItems: "center",
+							pointerEvents: "none",
+							"& > *": { pointerEvents: "auto" }
+						},
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								size: "small",
+								variant: "outlined",
+								onClick: () => addTable(),
+								children: "+ Tabela"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "small",
+								onClick: onLoadColumns,
+								disabled: loadingColumns,
+								title: "Lê uma linha de cada tabela para listar as colunas",
+								sx: { bgcolor: "#1b1e23" },
+								children: loadingColumns ? "Lendo colunas…" : "Recarregar colunas"
+							}),
+							/* @__PURE__ */ jsxs(Box, {
+								sx: {
+									ml: "auto",
+									display: "flex",
+									gap: .5,
+									alignItems: "center"
+								},
+								children: [
+									/* @__PURE__ */ jsx(Button, {
+										size: "small",
+										onClick: organize,
+										title: "Dimensões em cima, fatos embaixo (troca as posições salvas)",
+										sx: { bgcolor: "#1b1e23" },
+										children: "Organizar"
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										size: "small",
+										onClick: () => fitToScreen(),
+										sx: { bgcolor: "#1b1e23" },
+										children: "Ajustar à tela"
+									}),
+									/* @__PURE__ */ jsx(IconButton, {
+										size: "small",
+										"aria-label": "Diminuir zoom",
+										onClick: () => setView((current) => ({
+											...current,
+											zoom: Math.max(.3, current.zoom - .1)
+										})),
+										children: "−"
+									}),
+									/* @__PURE__ */ jsxs(Typography, {
+										sx: {
+											fontSize: 11,
+											fontFamily: MONO,
+											width: 36,
+											textAlign: "center"
+										},
+										children: [Math.round(view.zoom * 100), "%"]
+									}),
+									/* @__PURE__ */ jsx(IconButton, {
+										size: "small",
+										"aria-label": "Aumentar zoom",
+										onClick: () => setView((current) => ({
+											...current,
+											zoom: Math.min(2, current.zoom + .1)
+										})),
+										children: "+"
+									})
+								]
+							})
+						]
+					}),
+					!nodes.length && /* @__PURE__ */ jsx(Box, {
+						sx: {
+							position: "absolute",
+							inset: 0,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							pointerEvents: "none",
+							color: "text.secondary",
+							fontSize: 13,
+							textAlign: "center",
+							px: 4
+						},
+						children: "Modelo vazio. Adicione as tabelas dimensão (cadastros: navio, calendário…) e fato (lançamentos: pesagens, custos…) e arraste a coluna da fato até a chave da dimensão para relacioná-las."
+					}),
+					!!nodes.length && /* @__PURE__ */ jsx(Typography, {
+						sx: {
 							position: "absolute",
-							overflow: "visible",
+							left: 10,
+							bottom: 6,
+							fontSize: 11,
+							color: "text.disabled",
 							pointerEvents: "none"
 						},
-						"aria-hidden": true,
-						children: [lines.map((line) => /* @__PURE__ */ jsx(RelationshipLine, {
-							line,
-							hovered: hoveredEdge === line.id,
-							onHover: (hovered) => setHoveredEdge(hovered ? line.id : null)
-						}, line.id)), linkPreview && /* @__PURE__ */ jsx("path", {
-							d: linkPreview,
-							fill: "none",
-							stroke: "#F58220",
-							strokeWidth: 2,
-							strokeDasharray: "5 4"
-						})]
-					}), nodes.map((node) => /* @__PURE__ */ jsx(TableCard, {
-						node,
-						position: placed(node),
-						size: sizeOf(node),
-						collapsed: !!collapsed[node.id],
-						selected: !!isSelected(node),
-						linking: !!linking && linking.node.id !== node.id,
-						selectedField: selection?.kind === "dimension" || selection?.kind === "measure" ? selection.uid : null,
-						onToggle: () => setCollapsed((current) => ({
-							...current,
-							[node.id]: !current[node.id]
-						})),
-						onScroll: (top) => setScrolls((current) => ({
-							...current,
-							[node.id]: top
-						})),
-						onHeaderDown: (event) => startMove(event, node),
-						onResizeDown: (event, edges) => startResize(event, node, edges),
-						onResizeReset: () => resetSize(node),
-						onColumnDown: (event, column) => startLink(event, node, column),
-						onFieldClick: (item) => setSelection({
-							kind: item.kind,
-							uid: item.uid
-						}),
-						onAddField: (kind, column) => addField(kind, node.name, column)
-					}, node.id))]
-				}),
-				/* @__PURE__ */ jsxs(Box, {
-					onMouseDown: (event) => event.stopPropagation(),
-					sx: {
-						position: "absolute",
-						top: 8,
-						left: 8,
-						right: 8,
-						display: "flex",
-						gap: .75,
-						flexWrap: "wrap",
-						alignItems: "center",
-						pointerEvents: "none",
-						"& > *": { pointerEvents: "auto" }
-					},
-					children: [
-						/* @__PURE__ */ jsx(Button, {
-							size: "small",
-							variant: "outlined",
-							onClick: addTable,
-							children: "+ Tabela"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							size: "small",
-							onClick: onLoadColumns,
-							disabled: loadingColumns,
-							title: "Lê uma linha de cada tabela para listar as colunas",
-							sx: { bgcolor: "#1b1e23" },
-							children: loadingColumns ? "Lendo colunas…" : "Recarregar colunas"
-						}),
-						/* @__PURE__ */ jsxs(Box, {
-							sx: {
-								ml: "auto",
-								display: "flex",
-								gap: .5,
-								alignItems: "center"
-							},
-							children: [
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									onClick: () => {
-										const layout = autoLayout(nodes, sizes);
-										setPositions((current) => Object.fromEntries(Object.entries(layout).map(([id, point]) => [id, {
-											...current[id],
-											...point
-										}])));
-										fitToScreen(layout);
-									},
-									title: "Dimensões em cima, fatos embaixo (troca as posições salvas)",
-									sx: { bgcolor: "#1b1e23" },
-									children: "Organizar"
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									onClick: () => fitToScreen(),
-									sx: { bgcolor: "#1b1e23" },
-									children: "Ajustar à tela"
-								}),
-								/* @__PURE__ */ jsx(IconButton, {
-									size: "small",
-									"aria-label": "Diminuir zoom",
-									onClick: () => setView((current) => ({
-										...current,
-										zoom: Math.max(.3, current.zoom - .1)
-									})),
-									children: "−"
-								}),
-								/* @__PURE__ */ jsxs(Typography, {
-									sx: {
-										fontSize: 11,
-										fontFamily: MONO,
-										width: 36,
-										textAlign: "center"
-									},
-									children: [Math.round(view.zoom * 100), "%"]
-								}),
-								/* @__PURE__ */ jsx(IconButton, {
-									size: "small",
-									"aria-label": "Aumentar zoom",
-									onClick: () => setView((current) => ({
-										...current,
-										zoom: Math.min(2, current.zoom + .1)
-									})),
-									children: "+"
-								})
-							]
-						})
-					]
-				}),
-				!nodes.length && /* @__PURE__ */ jsx(Box, {
-					sx: {
-						position: "absolute",
-						inset: 0,
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						pointerEvents: "none",
-						color: "text.secondary",
-						fontSize: 13,
-						textAlign: "center",
-						px: 4
+						children: "Arraste uma coluna até a coluna de outra tabela para relacionar · +◇/+Σ na coluna cria dimensão/medida · Duplo clique no nome renomeia · Botão direito: editar/remover (no fundo: nova tabela/medida, recarregar, organizar) · Delete remove · Ctrl+roda: zoom"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Menu, {
+				open: !!menu?.open,
+				onClose: closeMenu,
+				anchorReference: "anchorPosition",
+				anchorPosition: menu ? {
+					top: menu.y,
+					left: menu.x
+				} : void 0,
+				transitionDuration: {
+					enter: 90,
+					exit: 60
+				},
+				onContextMenu: (event) => event.preventDefault(),
+				children: menu?.target ? [/* @__PURE__ */ jsxs(MenuItem, {
+					dense: true,
+					onClick: () => {
+						setSelection(menu.target);
+						closeMenu();
 					},
-					children: "Modelo vazio. Adicione as tabelas dimensão (cadastros: navio, calendário…) e fato (lançamentos: pesagens, custos…) e arraste a coluna da fato até a chave da dimensão para relacioná-las."
-				}),
-				!!nodes.length && /* @__PURE__ */ jsx(Typography, {
-					sx: {
-						position: "absolute",
-						left: 10,
-						bottom: 6,
-						fontSize: 11,
-						color: "text.disabled",
-						pointerEvents: "none"
+					children: ["Editar ", TARGET_NAME[menu.target.kind]]
+				}, "edit"), /* @__PURE__ */ jsxs(MenuItem, {
+					dense: true,
+					sx: { color: "error.main" },
+					onClick: () => {
+						if (menu.target) remove(menu.target);
+						closeMenu();
 					},
-					children: "Arraste uma coluna até a coluna de outra tabela para relacionar · +◇/+Σ na coluna cria dimensão/medida · Delete remove · Ctrl+roda: zoom"
-				})
-			]
-		}), panel.open ? /* @__PURE__ */ jsxs(Box, {
-			sx: {
-				width: panel.width,
-				flexShrink: 0,
-				borderLeft: 1,
-				borderColor: "divider",
-				position: "relative",
-				display: "flex",
-				flexDirection: "column",
-				minHeight: 0
-			},
-			children: [
-				/* @__PURE__ */ jsx(Box, {
-					onMouseDown: startPanelResize,
-					title: "Arraste para redimensionar",
-					sx: {
-						position: "absolute",
-						left: -3,
-						top: 0,
-						bottom: 0,
-						width: 6,
-						cursor: "ew-resize",
-						zIndex: 2,
-						"&:hover": {
-							bgcolor: "primary.main",
-							opacity: .4
+					children: ["Remover ", TARGET_NAME[menu.target.kind]]
+				}, "remove")] : [
+					/* @__PURE__ */ jsx(MenuItem, {
+						dense: true,
+						onClick: () => {
+							if (menu) addTable(toWorld(menu.x, menu.y));
+							closeMenu();
+						},
+						children: "Nova Tabela"
+					}, "table"),
+					/* @__PURE__ */ jsx(MenuItem, {
+						dense: true,
+						onClick: () => {
+							addFormula();
+							closeMenu();
+						},
+						children: "Nova Medida Calculada"
+					}, "formula"),
+					/* @__PURE__ */ jsx(Divider, {}, "divider"),
+					/* @__PURE__ */ jsx(MenuItem, {
+						dense: true,
+						disabled: loadingColumns,
+						onClick: () => {
+							onLoadColumns();
+							closeMenu();
+						},
+						children: "Recarregar colunas"
+					}, "columns"),
+					/* @__PURE__ */ jsx(MenuItem, {
+						dense: true,
+						onClick: () => {
+							organize();
+							closeMenu();
+						},
+						children: "Organizar"
+					}, "organize")
+				]
+			}),
+			panel.open ? /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					width: panel.width,
+					flexShrink: 0,
+					borderLeft: 1,
+					borderColor: "divider",
+					position: "relative",
+					display: "flex",
+					flexDirection: "column",
+					minHeight: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(Box, {
+						onMouseDown: startPanelResize,
+						title: "Arraste para redimensionar",
+						sx: {
+							position: "absolute",
+							left: -3,
+							top: 0,
+							bottom: 0,
+							width: 6,
+							cursor: "ew-resize",
+							zIndex: 2,
+							"&:hover": {
+								bgcolor: "primary.main",
+								opacity: .4
+							}
 						}
-					}
-				}),
-				/* @__PURE__ */ jsxs(Box, {
-					sx: {
-						display: "flex",
-						alignItems: "center",
-						px: 1.5,
-						py: .5,
-						borderBottom: 1,
-						borderColor: "divider"
-					},
-					children: [/* @__PURE__ */ jsx(Typography, {
+					}),
+					/* @__PURE__ */ jsxs(Box, {
 						sx: {
-							fontSize: 12,
-							fontWeight: 700,
-							color: "text.secondary",
-							flex: 1
+							display: "flex",
+							alignItems: "center",
+							px: 1.5,
+							py: .5,
+							borderBottom: 1,
+							borderColor: "divider"
 						},
-						children: "Propriedades"
-					}), /* @__PURE__ */ jsx(IconButton, {
-						size: "small",
-						"aria-label": "Recolher propriedades",
-						title: "Recolher",
-						onClick: () => setPanel((current) => ({
-							...current,
-							open: false
-						})),
-						children: "⟩"
-					})]
-				}),
-				/* @__PURE__ */ jsx(Box, {
-					sx: {
-						overflow: "auto",
-						flex: 1,
-						p: 1.5
-					},
-					children: /* @__PURE__ */ jsx(Properties, {
-						editor,
-						selection,
-						columns,
-						errors,
-						warnings,
-						usage,
-						onSelect: setSelection,
-						onTry,
-						setEditor,
-						patchTable,
-						patchRelationship,
-						patchDimension,
-						patchMeasure,
-						removeTable,
-						commitRename,
-						addField,
-						unplaced
+						children: [/* @__PURE__ */ jsx(Typography, {
+							sx: {
+								fontSize: 12,
+								fontWeight: 700,
+								color: "text.secondary",
+								flex: 1
+							},
+							children: "Propriedades"
+						}), /* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							"aria-label": "Recolher propriedades",
+							title: "Recolher",
+							onClick: () => setPanel((current) => ({
+								...current,
+								open: false
+							})),
+							children: "⟩"
+						})]
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						sx: {
+							overflow: "auto",
+							flex: 1,
+							p: 1.5
+						},
+						children: /* @__PURE__ */ jsx(Properties, {
+							editor,
+							selection,
+							columns,
+							errors,
+							warnings,
+							usage,
+							onSelect: setSelection,
+							onTry,
+							setEditor,
+							patchTable,
+							patchRelationship,
+							patchDimension,
+							patchMeasure,
+							removeTable,
+							commitRename,
+							addField,
+							unplaced
+						})
 					})
-				})
-			]
-		}) : /* @__PURE__ */ jsx(Box, {
-			component: "button",
-			type: "button",
-			title: "Mostrar as propriedades",
-			onClick: () => setPanel((current) => ({
-				...current,
-				open: true
-			})),
-			sx: {
-				width: 28,
-				flexShrink: 0,
-				border: 0,
-				borderLeft: 1,
-				borderColor: "divider",
-				bgcolor: "background.paper",
-				color: "text.secondary",
-				cursor: "pointer",
-				writingMode: "vertical-rl",
-				fontSize: 12,
-				py: 1,
-				"&:hover": { color: "primary.main" }
-			},
-			children: "⟨ Propriedades"
-		})]
+				]
+			}) : /* @__PURE__ */ jsx(Box, {
+				component: "button",
+				type: "button",
+				title: "Mostrar as propriedades",
+				onClick: () => setPanel((current) => ({
+					...current,
+					open: true
+				})),
+				sx: {
+					width: 28,
+					flexShrink: 0,
+					border: 0,
+					borderLeft: 1,
+					borderColor: "divider",
+					bgcolor: "background.paper",
+					color: "text.secondary",
+					cursor: "pointer",
+					writingMode: "vertical-rl",
+					fontSize: 12,
+					py: 1,
+					"&:hover": { color: "primary.main" }
+				},
+				children: "⟨ Propriedades"
+			})
+		]
 	});
 }
 /** Curva com tangentes horizontais (saída e chegada pelas laterais dos cards). */
@@ -5269,11 +6168,15 @@ function RelationshipLine({ line, hovered, onHover }) {
 		]
 	});
 }
-function TableCard({ node, position, size, collapsed, selected, linking, selectedField, onToggle, onScroll, onHeaderDown, onResizeDown, onResizeReset, onColumnDown, onFieldClick, onAddField }) {
+function TableCard({ node, position, size, collapsed, selected, linking, selectedField, onToggle, onScroll, onHeaderDown, onResizeDown, onResizeReset, onColumnDown, onFieldClick, onAddField, renaming, onRenameStart, onRename, onContextMenu }) {
 	const style = ROLE_STYLE[node.role];
 	const columnActions = ["dimension", "measure"];
 	return /* @__PURE__ */ jsxs(Box, {
 		onMouseDown: (event) => event.stopPropagation(),
+		onContextMenu: (event) => onContextMenu(event, {
+			kind: "table",
+			uid: node.uid
+		}),
 		sx: {
 			position: "absolute",
 			left: position.x,
@@ -5314,7 +6217,12 @@ function TableCard({ node, position, size, collapsed, selected, linking, selecte
 						},
 						children: "▦"
 					}),
-					/* @__PURE__ */ jsx(Typography, {
+					renaming ? /* @__PURE__ */ jsx(TableNameInput, {
+						value: node.name,
+						onDone: onRename
+					}) : /* @__PURE__ */ jsx(Typography, {
+						onDoubleClick: onRenameStart,
+						title: "Duplo clique para renomear",
 						sx: {
 							fontWeight: 700,
 							fontSize: 13,
@@ -5442,6 +6350,10 @@ function TableCard({ node, position, size, collapsed, selected, linking, selecte
 				}, `c:${item.name}`) : /* @__PURE__ */ jsxs(Box, {
 					onMouseDown: (event) => event.stopPropagation(),
 					onClick: () => onFieldClick(item),
+					onContextMenu: (event) => onContextMenu(event, {
+						kind: item.kind,
+						uid: item.uid
+					}),
 					sx: {
 						height: ROW,
 						display: "flex",
@@ -5537,23 +6449,60 @@ const resizeHandleSx = {
 	position: "absolute",
 	zIndex: 1
 };
-function PropertyBlock({ title, children }) {
-	return /* @__PURE__ */ jsxs(Box, {
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: 1,
-			mb: 2
+const IDENTIFIER = /^[A-Za-z_][A-Za-z0-9_]*$/;
+/** Nome da tabela editado no cabeçalho do card: Enter/sair confirma, Esc cancela. */
+function TableNameInput({ value, onDone }) {
+	const [text, setText] = useState(value);
+	const valid = IDENTIFIER.test(text);
+	const done = useRef(false);
+	const finish = (name) => {
+		if (done.current) return;
+		done.current = true;
+		onDone(name);
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		component: "input",
+		autoFocus: true,
+		value: text,
+		"aria-label": "Nome da tabela",
+		onFocus: (event) => event.currentTarget.select(),
+		onChange: (event) => setText(event.target.value),
+		onMouseDown: (event) => event.stopPropagation(),
+		onKeyDown: (event) => {
+			event.stopPropagation();
+			if (event.key === "Enter") finish(valid ? text : null);
+			if (event.key === "Escape") finish(null);
 		},
-		children: [/* @__PURE__ */ jsx(Typography, {
-			variant: "overline",
+		onBlur: () => finish(valid ? text : null),
+		sx: {
+			flex: 1,
+			minWidth: 0,
+			font: "inherit",
+			fontSize: 13,
+			fontWeight: 700,
+			color: "text.primary",
+			bgcolor: "#1b1e23",
+			border: "1px solid",
+			borderColor: valid ? "primary.main" : "error.main",
+			borderRadius: .5,
+			px: .5,
+			outline: "none"
+		}
+	});
+}
+/** Bloco do painel; com `collapseKey`, o título recolhe/expande (lembrado no navegador). */
+function PropertyBlock({ title, collapseKey, children }) {
+	return /* @__PURE__ */ jsx(Section, {
+		title,
+		collapseKey,
+		children: /* @__PURE__ */ jsx(Box, {
 			sx: {
-				color: "text.secondary",
-				fontWeight: 700,
-				lineHeight: 1.5
+				display: "flex",
+				flexDirection: "column",
+				gap: 1
 			},
-			children: title
-		}), children]
+			children
+		})
 	});
 }
 function ColumnSelect({ label, value, options, onChange }) {
@@ -5617,29 +6566,23 @@ function Properties({ editor, selection, columns, errors, warnings, usage, onSel
 		return /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsxs(PropertyBlock, {
 				title: "Tabela",
-				children: [
-					/* @__PURE__ */ jsx(RenameField, {
-						value: table.name,
-						onCommit: (name) => commitRename(table.uid, name)
-					}, table.uid),
-					/* @__PURE__ */ jsx(ColumnSelect, {
-						label: "chave (key)",
-						value: table.key,
-						options: columnsOf(table.uid).length ? ["", ...columnsOf(table.uid)] : [],
-						onChange: (key) => patchTable(table.uid, { key })
-					}),
-					/* @__PURE__ */ jsx(SqlEditor, {
-						label: "sql",
-						minRows: 3,
-						maxRows: 12,
-						value: table.sql,
-						error: errors[`table:${table.name}`],
-						onChange: (sql) => patchTable(table.uid, { sql })
-					})
-				]
+				collapseKey: "diagram:table",
+				children: [/* @__PURE__ */ jsx(RenameField, {
+					value: table.name,
+					onCommit: (name) => commitRename(table.uid, name)
+				}, table.uid), /* @__PURE__ */ jsx(SqlEditor, {
+					label: "sql",
+					minRows: 3,
+					maxRows: 12,
+					value: table.sql,
+					error: errors[`table:${table.name}`],
+					onChange: (sql) => patchTable(table.uid, { sql }),
+					queryTools: true
+				})]
 			}),
 			/* @__PURE__ */ jsx(PropertyBlock, {
 				title: "Dimensões (marque as colunas)",
+				collapseKey: "diagram:dimensions",
 				children: /* @__PURE__ */ jsx(DimensionPicker, {
 					editor,
 					setEditor,
@@ -5653,6 +6596,7 @@ function Properties({ editor, selection, columns, errors, warnings, usage, onSel
 			}),
 			/* @__PURE__ */ jsx(PropertyBlock, {
 				title: "Dicionário",
+				collapseKey: "diagram:dictionary",
 				children: /* @__PURE__ */ jsx(DictionaryFields, {
 					row: table,
 					onPatch: (changes) => patchTable(table.uid, changes)
@@ -5839,6 +6783,7 @@ function Properties({ editor, selection, columns, errors, warnings, usage, onSel
 			}),
 			/* @__PURE__ */ jsx(PropertyBlock, {
 				title: "Dicionário",
+				collapseKey: "diagram:dictionary",
 				children: /* @__PURE__ */ jsx(DictionaryFields, {
 					row,
 					onPatch: (changes) => patchDimension(row.uid, changes)
@@ -5891,6 +6836,7 @@ function Properties({ editor, selection, columns, errors, warnings, usage, onSel
 			}),
 			/* @__PURE__ */ jsx(PropertyBlock, {
 				title: "Dicionário",
+				collapseKey: "diagram:dictionary",
 				children: /* @__PURE__ */ jsx(DictionaryFields, {
 					row,
 					onPatch: (changes) => patchMeasure(row.uid, changes)
@@ -5917,6 +6863,7 @@ function Properties({ editor, selection, columns, errors, warnings, usage, onSel
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(PropertyBlock, {
 			title: "Modelo",
+			collapseKey: "diagram:model",
 			children: /* @__PURE__ */ jsx(Typography, {
 				sx: {
 					fontSize: 12,
@@ -5927,6 +6874,7 @@ function Properties({ editor, selection, columns, errors, warnings, usage, onSel
 		}),
 		/* @__PURE__ */ jsxs(PropertyBlock, {
 			title: "Relacionamentos",
+			collapseKey: "diagram:relationships",
 			children: [!editor.relationships.length && /* @__PURE__ */ jsx(Typography, {
 				sx: {
 					fontSize: 12,
@@ -5995,6 +6943,7 @@ function Properties({ editor, selection, columns, errors, warnings, usage, onSel
 		}),
 		/* @__PURE__ */ jsxs(PropertyBlock, {
 			title: "Medidas calculadas",
+			collapseKey: "diagram:formulas",
 			children: [formulas.map((row) => /* @__PURE__ */ jsxs(Button, {
 				size: "small",
 				onClick: () => onSelect({
@@ -6012,22 +6961,10 @@ function Properties({ editor, selection, columns, errors, warnings, usage, onSel
 				]
 			}, row.uid)), /* @__PURE__ */ jsx(Button, {
 				size: "small",
-				onClick: () => {
-					const uid = newUid();
-					const taken = [...editor.dimensions, ...editor.measures].map((item) => item.name);
-					setEditor((current) => ({
-						...current,
-						measures: [...current.measures, emptyMeasure({
-							uid,
-							type: "formula",
-							name: freeName("novaMedida", taken)
-						})]
-					}));
-					onSelect({
-						kind: "measure",
-						uid
-					});
-				},
+				onClick: () => onSelect({
+					kind: "measure",
+					uid: addFormulaTo(setEditor)
+				}),
 				children: "+ Medida calculada"
 			})]
 		}),
@@ -6050,7 +6987,7 @@ function RenameField({ value, onCommit }) {
 		value: text,
 		onChange: setText,
 		onBlur: () => {
-			if (/^[A-Za-z_][A-Za-z0-9_]*$/.test(text)) onCommit(text);
+			if (IDENTIFIER.test(text)) onCommit(text);
 			else setText(value);
 		}
 	});
@@ -6228,11 +7165,22 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 	});
 	const completions = useMemo(() => ({
 		tables,
-		modelColumns: Object.fromEntries(editor.tables.map((row) => [row.name, columns?.tables[row.name] ?? []]))
+		modelColumns: Object.fromEntries(editor.tables.map((row) => [row.name, columns?.tables[row.name] ?? []])),
+		modelSql: Object.fromEntries(editor.tables.map((row) => [row.name, row.sql])),
+		testSql: async (sql) => {
+			const result = await fetcher({
+				model: modelName,
+				devtools: { testSql: sql }
+			});
+			if (!result.devtools?.sqlTest) throw new Error("O servidor não devolveu o teste do SQL");
+			return result.devtools.sqlTest;
+		}
 	}), [
 		tables,
 		columns,
-		editor.tables
+		editor.tables,
+		fetcher,
+		modelName
 	]);
 	const validationErrors = validation ? Object.entries(validation.errors) : [];
 	return /* @__PURE__ */ jsxs(SqlCompletionsContext.Provider, {
@@ -8381,4 +9329,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-I00Iz0Z8.js.map
+//# sourceMappingURL=DashboardDevtools-wk4vMfhy.js.map