@bluemarble/bi 0.7.0 → 0.8.0

package/dist/{DashboardDevtools-D0pzwSgn.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 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 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-Cw4sa8tW.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";
@@ -3237,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: {
@@ -3821,11 +3821,490 @@ function freeName(prefix, taken) {
 	for (let index = 2;; index++) if (!taken.includes(`${prefix}${index}`)) return `${prefix}${index}`;
 }
 //#endregion
+//#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)}`;
+}
+/** 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 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(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.
+* 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
@@ -3901,12 +4380,36 @@ function suggest(sql, caret, completions) {
 		items
 	} : null;
 }
-function SqlEditor({ value, onChange, label, placeholder = "SQL", minRows, maxRows = 6, error, warning, expandable = true }) {
+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;
@@ -4046,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,
@@ -4524,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;
@@ -4690,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));
@@ -4810,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,
@@ -4834,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,
@@ -4842,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;
@@ -4902,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;
@@ -5103,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",
-							overflow: "visible",
-							pointerEvents: "none"
+							left: 0,
+							top: 0,
+							transformOrigin: "0 0",
+							transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
 						},
-						"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__ */ jsxs("svg", {
+							width: 1,
+							height: 1,
+							style: {
+								position: "absolute",
+								overflow: "visible",
+								pointerEvents: "none"
 							},
-							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
+							"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",
+							left: 10,
+							bottom: 6,
+							fontSize: 11,
+							color: "text.disabled",
+							pointerEvents: "none"
+						},
+						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). */
@@ -5470,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,
@@ -5515,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,
@@ -5643,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",
@@ -5738,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 }) {
@@ -5818,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,
@@ -5854,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)
@@ -6040,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)
@@ -6092,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)
@@ -6118,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,
@@ -6128,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,
@@ -6196,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({
@@ -6213,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"
 			})]
 		}),
@@ -6251,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);
 		}
 	});
@@ -6429,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, {
@@ -8582,4 +9329,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-D0pzwSgn.js.map
+//# sourceMappingURL=DashboardDevtools-wk4vMfhy.js.map