@bluemarble/bi 0.6.5 → 0.7.0

package/dist/{DashboardDevtools-CMIuUYpw.js → DashboardDevtools-D0pzwSgn.js}

@@ -1,7 +1,7 @@
-import { a as toModelCode, 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 { 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_OPERATOR_LABEL, S as RULE_OPERATORS, _ as tableColumns, a as FILTER_FIELDS, b as COLUMN_VERTICAL_ALIGNS, c as chartOfType, d as filterReferences, h as percentColumn, i as CARD_FIELDS, l as chartReferences, m as layoutModelWarnings, n as CANVAS_PRESETS, p as layoutFileContent, r as CARDS_FIELDS, s as chartColumns, t as BUILTIN_CHART_TYPES, v as validateLayout, w as UNARY_OPERATORS, x as NUMERIC_OPERATORS, y as COLUMN_ALIGNS } from "./layout-CBzYDoqE.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-CyeYU6ZJ.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 { 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";
@@ -1001,10 +1001,21 @@ const chartCardFields = (cards) => Object.fromEntries(Object.entries(CARD_FIELDS
 	...spec,
 	default: cards?.[key] ?? spec.default
 }]));
+/** `cards` como o formulário edita: o `gap` antigo vira `rowGap` e `columnGap`. */
+const cardsValues = (cards) => {
+	const { gap: _gap, ...rest } = cards ?? {};
+	const space = cardsGap(cards);
+	return nonEmpty({
+		...rest,
+		...space.row === void 0 ? {} : { rowGap: space.row },
+		...space.column === void 0 ? {} : { columnGap: space.column }
+	}) ?? {};
+};
 const cardsSummary = (cards) => {
-	const { gap, ...style } = cards ?? {};
+	const { gap: _gap, rowGap: _row, columnGap: _column, ...style } = cards ?? {};
+	const space = cardsGap(cards);
 	const custom = Object.keys(style).length;
-	return `espaço ${String(gap ?? CARDS_FIELDS.gap?.default)}px · ${custom ? `${custom} ajuste(s) de estilo` : "estilo padrão"}`;
+	return `espaço ${String(space.row ?? CARDS_FIELDS.rowGap?.default)}×${String(space.column ?? CARDS_FIELDS.columnGap?.default)}px · ${custom ? `${custom} ajuste(s) de estilo` : "estilo padrão"}`;
 };
 /** Campo opcional vazio sai do objeto, para o JSON ficar só com o que foi definido. */
 function withField(object, key, value) {
@@ -1166,7 +1177,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 	});
 	const patchChart = (id, change) => setCharts(charts.map((chart) => chart.id === id ? change(chart) : chart));
 	const setCanvas = (next) => update(withField(editing, "canvas", next));
-	const setCards = (key, value) => update(withField(editing, "cards", nonEmpty(withField(editing.cards ?? {}, key, value))));
+	const setCards = (key, value) => update(withField(editing, "cards", nonEmpty(withField(cardsValues(editing.cards), key, value))));
 	const setFilters = (next) => update({
 		...editing,
 		filters: next
@@ -1479,7 +1490,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 								children: "Estilo padrão dos cards de todos os gráficos; cada gráfico pode sobrepor na seção Card dele. Vazio = padrão do componente."
 							}), /* @__PURE__ */ jsx(FieldsForm, {
 								fields: CARDS_FIELDS,
-								values: editing.cards ?? {},
+								values: cardsValues(editing.cards),
 								onSet: setCards,
 								model,
 								formatters: [],
@@ -1545,11 +1556,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 							children: errors.length ? "Edições com erro, não aplicadas" : "Edições não aplicadas"
 						})]
 					}),
-					/* @__PURE__ */ jsx(CopyButton, {
-						text: layoutFileContent(editing),
-						label: "Copiar JSON"
-					}),
-					/* @__PURE__ */ jsx(ConfirmButton, {
+					!autoApply && /* @__PURE__ */ jsx(ConfirmButton, {
 						size: "small",
 						disabled: !dirty,
 						onConfirm: () => setEditing(reference),
@@ -1559,17 +1566,20 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 						confirmLabel: "Desfazer",
 						children: "Desfazer"
 					}),
-					/* @__PURE__ */ jsx(Button, {
+					/* @__PURE__ */ jsx(ConfirmButton, {
 						size: "small",
 						color: "warning",
 						disabled: !entry.draft,
-						onClick: () => {
+						onConfirm: () => {
 							devtools.store.expectRefetch();
 							layouts.setPending(entry.registered.id, null);
 							layouts.setDraft(entry.registered.id, null);
 							setEditingState(entry.registered);
 						},
 						title: "Volta a página e o editor ao layout do arquivo",
+						confirmTitle: "Descartar o rascunho?",
+						confirmText: "O rascunho e as edições do editor serão perdidos; a página e o editor voltam ao layout do arquivo.",
+						confirmLabel: "Descartar",
 						children: "Descartar rascunho"
 					}),
 					capabilities?.saveLayout && /* @__PURE__ */ jsx(Button, {
@@ -2155,6 +2165,11 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 					}
 				});
 			}
+			case "valueRule": return /* @__PURE__ */ jsx(ValueRuleInput, {
+				rule: value,
+				label: spec.label,
+				onChange: (rule) => set(key, rule)
+			});
 			case "colors": return /* @__PURE__ */ jsx(ColorsInput, {
 				colors: value ?? {},
 				measures: spec.values && values[spec.values] ? null : chosenMeasures,
@@ -2167,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, {
@@ -2239,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";
+	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);
@@ -2253,7 +2273,7 @@ function FieldsForm({ fields, values, onSet: set, onSetMany, model, formatters,
 						gridColumn: gridColumn(spec, key),
 						alignSelf: spec.kind === "boolean" ? "end" : void 0
 					},
-					children: spec.kind === "boolean" ? withHint(input(key, spec), spec.hint) : merged?.dimensions === key ? field(merged.percents ? "Dimensões, medidas e %" : "Dimensões e medidas", input(key, spec), `${merged.order ? "Em qualquer ordem: é a ordem das colunas. " : ""}${[
+					children: spec.kind === "boolean" || spec.kind === "valueRule" ? withHint(input(key, spec), spec.hint) : merged?.dimensions === key ? field(merged.percents ? "Dimensões, medidas e %" : "Dimensões e medidas", input(key, spec), `${merged.order ? "Em qualquer ordem: é a ordem das colunas. " : ""}${[
 						spec.hint,
 						merged.measuresSpec.hint,
 						merged.percentsSpec?.hint && `% do total: ${merged.percentsSpec.hint}`
@@ -2575,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);
@@ -2663,6 +2879,105 @@ function ColorInput({ value, fallback, onCommit }) {
 	});
 }
 /**
+* Regra de um valor (`ValueRule`): a checkbox liga (com "diferente de 0") e desliga (sai do JSON);
+* ligada, escolhe o operador e o número (e o fim do intervalo no "entre").
+*/
+function ValueRuleInput({ rule, label, onChange }) {
+	const setOperator = (operator) => {
+		const { to, ...rest } = rule ?? { value: 0 };
+		onChange(operator === "between" ? {
+			...rest,
+			operator,
+			to: to ?? rest.value
+		} : {
+			...rest,
+			operator
+		});
+	};
+	return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(FormControlLabel, {
+		control: /* @__PURE__ */ jsx(Checkbox, {
+			size: "small",
+			checked: !!rule,
+			onChange: (e) => onChange(e.target.checked ? {
+				operator: "!=",
+				value: 0
+			} : void 0)
+		}),
+		label: /* @__PURE__ */ jsx(Typography, {
+			sx: { fontSize: 12 },
+			children: label
+		})
+	}), rule && /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			gap: .5,
+			alignItems: "center",
+			pl: 3.5
+		},
+		children: [
+			/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontSize: 12,
+					whiteSpace: "nowrap"
+				},
+				children: "valor"
+			}),
+			/* @__PURE__ */ jsx(TextField, {
+				select: true,
+				size: "small",
+				value: rule.operator,
+				onChange: (e) => setOperator(e.target.value),
+				sx: {
+					...inputSx$1,
+					minWidth: 130
+				},
+				children: VALUE_RULE_OPERATORS.map((operator) => /* @__PURE__ */ jsx(MenuItem, {
+					value: operator,
+					sx: { fontSize: 12 },
+					children: RULE_OPERATOR_LABEL[operator]
+				}, operator))
+			}),
+			/* @__PURE__ */ jsx(RuleNumber, {
+				value: rule.value,
+				onCommit: (value) => onChange({
+					...rule,
+					value
+				})
+			}),
+			rule.operator === "between" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
+				sx: { fontSize: 12 },
+				children: "e"
+			}), /* @__PURE__ */ jsx(RuleNumber, {
+				value: rule.to ?? rule.value,
+				onCommit: (to) => onChange({
+					...rule,
+					to
+				})
+			})] })
+		]
+	})] });
+}
+/** Número digitado (aceita vírgula); só grava quando o texto é um número. */
+function RuleNumber({ value, onCommit }) {
+	const [typing, setTyping] = useState(null);
+	return /* @__PURE__ */ jsx(TextField, {
+		size: "small",
+		value: typing ?? String(value),
+		error: typing !== null && !Number.isFinite(Number(typing.trim().replace(",", "."))),
+		onChange: (e) => {
+			setTyping(e.target.value);
+			const text = e.target.value.trim().replace(",", ".");
+			const number = Number(text);
+			if (text && Number.isFinite(number)) onCommit(number);
+		},
+		onBlur: () => setTyping(null),
+		sx: {
+			...inputSx$1,
+			width: 90
+		}
+	});
+}
+/**
 * Cor por série (`{ série: cor }`). `measures`: uma linha por medida do gráfico (padrão: a paleta,
 * na ordem); `null`: as séries são valores de uma dimensão, que o devtools não conhece — digita o
 * valor e adiciona.
@@ -5987,7 +6302,6 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 	const { store, draft, setDraft } = devtools;
 	const { fetcher, model: modelName } = useDashboard();
 	const [editor, setEditor] = useState(() => toEditor(draft ?? original));
-	const [showCode, setShowCode] = useState(false);
 	const [checked, setChecked] = useState(null);
 	const [columns, setColumns] = useState(null);
 	const [columnErrors, setColumnErrors] = useState({});
@@ -6124,238 +6438,211 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 	const validationErrors = validation ? Object.entries(validation.errors) : [];
 	return /* @__PURE__ */ jsxs(SqlCompletionsContext.Provider, {
 		value: completions,
-		children: [
-			/* @__PURE__ */ jsxs(Box, {
-				sx: {
-					display: "flex",
-					flexDirection: "column",
-					height: "100%",
-					minHeight: 0
-				},
-				children: [
-					/* @__PURE__ */ jsxs(Box, {
-						sx: {
-							px: 1.5,
-							"& .MuiAlert-root": {
-								my: .5,
-								py: 0
-							}
-						},
-						children: [
-							draft && /* @__PURE__ */ jsxs(Alert, {
-								severity: "warning",
-								children: [
-									"Rascunho aplicado: as consultas desta página estão usando o modelo editado, não o registrado em ",
-									/* @__PURE__ */ jsx("code", { children: "src/dashboard/models" }),
-									".",
-									capabilities?.saveModel ? " Use \"Salvar no arquivo\" quando terminar." : " Copie o código para o arquivo quando terminar."
-								]
-							}),
-							actionError && /* @__PURE__ */ jsx(Alert, {
-								severity: "error",
-								sx: {
-									fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-									fontSize: 12
-								},
-								children: actionError
-							}),
-							!!validationErrors.length && /* @__PURE__ */ jsxs(Alert, {
-								severity: "error",
-								children: [
-									"O banco recusou ",
-									validationErrors.length,
-									" pedaço(s) do modelo — veja os campos marcados. O rascunho não foi aplicado.",
-									validation?.errors.model && /* @__PURE__ */ jsx("div", { children: validation.errors.model })
-								]
-							})
-						]
-					}),
-					/* @__PURE__ */ jsx(Box, {
-						sx: {
-							flex: 1,
-							minHeight: 0,
-							borderTop: 1,
-							borderColor: "divider"
-						},
-						children: /* @__PURE__ */ jsx(ModelDiagram, {
-							editor,
-							setEditor,
-							columns,
-							errors: {
-								...columnErrors,
-								...validation?.errors
+		children: [/* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				height: "100%",
+				minHeight: 0
+			},
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
+					sx: {
+						px: 1.5,
+						"& .MuiAlert-root": {
+							my: .5,
+							py: 0
+						}
+					},
+					children: [
+						draft && /* @__PURE__ */ jsxs(Alert, {
+							severity: "warning",
+							children: [
+								"Rascunho aplicado: as consultas desta página estão usando o modelo editado, não o registrado em ",
+								/* @__PURE__ */ jsx("code", { children: "src/dashboard/models" }),
+								".",
+								capabilities?.saveModel ? " Use \"Salvar no arquivo\" quando terminar." : " Copie o código para o arquivo quando terminar."
+							]
+						}),
+						actionError && /* @__PURE__ */ jsx(Alert, {
+							severity: "error",
+							sx: {
+								fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+								fontSize: 12
 							},
-							warnings: validation?.warnings ?? {},
-							loadingColumns: busy === "columns",
-							onLoadColumns: loadColumns,
-							onTry,
-							usage
+							children: actionError
+						}),
+						!!validationErrors.length && /* @__PURE__ */ jsxs(Alert, {
+							severity: "error",
+							children: [
+								"O banco recusou ",
+								validationErrors.length,
+								" pedaço(s) do modelo — veja os campos marcados. O rascunho não foi aplicado.",
+								validation?.errors.model && /* @__PURE__ */ jsx("div", { children: validation.errors.model })
+							]
 						})
-					}),
-					/* @__PURE__ */ jsxs(Box, {
-						sx: {
-							borderTop: 1,
-							borderColor: "divider",
-							p: 1,
-							display: "flex",
-							alignItems: "center",
-							gap: 1,
-							flexWrap: "wrap"
+					]
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					sx: {
+						flex: 1,
+						minHeight: 0,
+						borderTop: 1,
+						borderColor: "divider"
+					},
+					children: /* @__PURE__ */ jsx(ModelDiagram, {
+						editor,
+						setEditor,
+						columns,
+						errors: {
+							...columnErrors,
+							...validation?.errors
 						},
-						children: [
-							errors.length ? /* @__PURE__ */ jsx(Tooltip, {
-								title: /* @__PURE__ */ jsx(Box, {
-									sx: { whiteSpace: "pre-line" },
-									children: errors.join("\n")
-								}),
-								children: /* @__PURE__ */ jsx(Chip, {
-									color: "error",
-									size: "small",
-									label: `${errors.length} erro(s): ${errors[0]}`
-								})
-							}) : validation && !validationErrors.length ? /* @__PURE__ */ jsx(Chip, {
-								color: "success",
-								size: "small",
-								label: "SQL validado no banco"
-							}) : /* @__PURE__ */ jsx(Chip, {
-								color: "success",
-								size: "small",
-								variant: "outlined",
-								label: "modelo válido"
+						warnings: validation?.warnings ?? {},
+						loadingColumns: busy === "columns",
+						onLoadColumns: loadColumns,
+						onTry,
+						usage
+					})
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					sx: {
+						borderTop: 1,
+						borderColor: "divider",
+						p: 1,
+						display: "flex",
+						alignItems: "center",
+						gap: 1,
+						flexWrap: "wrap"
+					},
+					children: [
+						errors.length ? /* @__PURE__ */ jsx(Tooltip, {
+							title: /* @__PURE__ */ jsx(Box, {
+								sx: { whiteSpace: "pre-line" },
+								children: errors.join("\n")
 							}),
-							!!removed.length && /* @__PURE__ */ jsx(Chip, {
+							children: /* @__PURE__ */ jsx(Chip, {
+								color: "error",
 								size: "small",
-								color: "warning",
-								label: `removidos: ${removed.join(", ")}`
-							}),
-							/* @__PURE__ */ jsxs(Box, {
-								sx: {
-									ml: "auto",
-									display: "flex",
-									gap: 1,
-									flexWrap: "wrap",
-									alignItems: "center"
-								},
-								children: [
-									/* @__PURE__ */ jsx(AutoApplySwitch, { applying: busy === "apply" }),
-									/* @__PURE__ */ jsx(Button, {
-										size: "small",
-										onClick: () => setShowCode(true),
-										children: "Ver código"
-									}),
-									/* @__PURE__ */ jsx(Button, {
-										size: "small",
-										onClick: (e) => copyText(toModelCode(edited), e.currentTarget),
-										children: "Copiar TS"
-									}),
-									/* @__PURE__ */ jsx(Button, {
-										size: "small",
-										disabled: !!errors.length || !!busy,
-										onClick: () => act("validate", async () => {
-											await validateSql();
-										}),
-										title: "Executa cada pedaço do modelo no banco com poucas chaves",
-										children: busy === "validate" ? "Validando…" : "Validar SQL"
-									}),
-									/* @__PURE__ */ jsx(ConfirmButton, {
-										size: "small",
-										disabled: !dirty,
-										onConfirm: () => setEditor(toEditor(reference)),
-										title: "Desfaz as edições ainda não aplicadas",
-										confirmTitle: "Desfazer as edições?",
-										confirmText: "As edições do modelo ainda não aplicadas na página serão perdidas; o editor volta ao modelo que a página usa.",
-										confirmLabel: "Desfazer",
-										children: "Desfazer"
-									}),
-									/* @__PURE__ */ jsx(Button, {
-										size: "small",
-										color: "warning",
-										disabled: !draft,
-										onClick: () => setDraft(null),
-										title: "Volta a usar o modelo registrado no servidor",
-										children: "Descartar rascunho"
-									}),
-									capabilities?.saveModel && /* @__PURE__ */ jsx(Button, {
-										size: "small",
-										variant: "outlined",
-										disabled: !differsFromOriginal || !!errors.length || !!busy,
-										onClick: previewSave,
-										title: `Reescreve src/dashboard/models/${original.name}.ts`,
-										children: busy === "save" ? "Gerando…" : "Salvar no arquivo"
-									}),
-									!autoApply && /* @__PURE__ */ jsx(Button, {
-										size: "small",
-										variant: "contained",
-										disabled: !dirty || !!errors.length || !!busy,
-										onClick: apply,
-										children: busy === "apply" ? "Validando…" : "Aplicar na página"
-									})
-								]
+								label: `${errors.length} erro(s): ${errors[0]}`
 							})
-						]
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs(Dialog, {
-				open: showCode,
-				onClose: () => setShowCode(false),
-				maxWidth: "lg",
-				fullWidth: true,
-				children: [
-					/* @__PURE__ */ jsx(DialogTitle, { children: "Código do modelo" }),
-					/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(CodeBlock, {
-						code: toModelCode(edited),
-						maxHeight: 600
-					}) }),
-					/* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, {
-						onClick: () => setShowCode(false),
-						children: "Fechar"
-					}) })
-				]
-			}),
-			/* @__PURE__ */ jsxs(Dialog, {
-				open: !!save,
-				onClose: () => setSave(null),
-				maxWidth: "lg",
-				fullWidth: true,
-				children: [
-					/* @__PURE__ */ jsx(DialogTitle, { children: "Salvar no arquivo" }),
-					/* @__PURE__ */ jsxs(DialogContent, { children: [
-						/* @__PURE__ */ jsx(Typography, {
-							sx: {
-								fontFamily: MONO,
-								fontSize: 12,
-								mb: 1
-							},
-							children: save?.path
+						}) : validation && !validationErrors.length ? /* @__PURE__ */ jsx(Chip, {
+							color: "success",
+							size: "small",
+							label: "SQL validado no banco"
+						}) : /* @__PURE__ */ jsx(Chip, {
+							color: "success",
+							size: "small",
+							variant: "outlined",
+							label: "modelo válido"
 						}),
-						save?.warnings.map((warning) => /* @__PURE__ */ jsx(Alert, {
-							severity: "warning",
-							sx: { mb: 1 },
-							children: warning
-						}, warning)),
-						save && /* @__PURE__ */ jsx(FileDiff, { lines: lineDiff(save.previous, save.content) }),
-						/* @__PURE__ */ jsx(Typography, {
+						!!removed.length && /* @__PURE__ */ jsx(Chip, {
+							size: "small",
+							color: "warning",
+							label: `removidos: ${removed.join(", ")}`
+						}),
+						/* @__PURE__ */ jsxs(Box, {
 							sx: {
-								fontSize: 12,
-								color: "text.secondary",
-								mt: 1
+								ml: "auto",
+								display: "flex",
+								gap: 1,
+								flexWrap: "wrap",
+								alignItems: "center"
 							},
-							children: "O Next recarrega o modelo sozinho; o rascunho é descartado. O lint-staged formata o arquivo no commit."
+							children: [
+								/* @__PURE__ */ jsx(AutoApplySwitch, { applying: busy === "apply" }),
+								/* @__PURE__ */ jsx(Button, {
+									size: "small",
+									disabled: !!errors.length || !!busy,
+									onClick: () => act("validate", async () => {
+										await validateSql();
+									}),
+									title: "Executa cada pedaço do modelo no banco com poucas chaves",
+									children: busy === "validate" ? "Validando…" : "Validar SQL"
+								}),
+								!autoApply && /* @__PURE__ */ jsx(ConfirmButton, {
+									size: "small",
+									disabled: !dirty,
+									onConfirm: () => setEditor(toEditor(reference)),
+									title: "Desfaz as edições ainda não aplicadas",
+									confirmTitle: "Desfazer as edições?",
+									confirmText: "As edições do modelo ainda não aplicadas na página serão perdidas; o editor volta ao modelo que a página usa.",
+									confirmLabel: "Desfazer",
+									children: "Desfazer"
+								}),
+								/* @__PURE__ */ jsx(ConfirmButton, {
+									size: "small",
+									color: "warning",
+									disabled: !draft,
+									onConfirm: () => setDraft(null),
+									title: "Volta a usar o modelo registrado no servidor",
+									confirmTitle: "Descartar o rascunho?",
+									confirmText: "A página volta a usar o modelo registrado no servidor; as edições do rascunho serão perdidas.",
+									confirmLabel: "Descartar",
+									children: "Descartar rascunho"
+								}),
+								capabilities?.saveModel && /* @__PURE__ */ jsx(Button, {
+									size: "small",
+									variant: "outlined",
+									disabled: !differsFromOriginal || !!errors.length || !!busy,
+									onClick: previewSave,
+									title: `Reescreve src/dashboard/models/${original.name}.ts`,
+									children: busy === "save" ? "Gerando…" : "Salvar no arquivo"
+								}),
+								!autoApply && /* @__PURE__ */ jsx(Button, {
+									size: "small",
+									variant: "contained",
+									disabled: !dirty || !!errors.length || !!busy,
+									onClick: apply,
+									children: busy === "apply" ? "Validando…" : "Aplicar na página"
+								})
+							]
 						})
-					] }),
-					/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
-						onClick: () => setSave(null),
-						children: "Cancelar"
-					}), /* @__PURE__ */ jsx(Button, {
-						variant: "contained",
-						disabled: !save || save.previous === save.content || !!busy,
-						onClick: writeSave,
-						children: "Gravar"
-					})] })
-				]
-			})
-		]
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Dialog, {
+			open: !!save,
+			onClose: () => setSave(null),
+			maxWidth: "lg",
+			fullWidth: true,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, { children: "Salvar no arquivo" }),
+				/* @__PURE__ */ jsxs(DialogContent, { children: [
+					/* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontFamily: MONO,
+							fontSize: 12,
+							mb: 1
+						},
+						children: save?.path
+					}),
+					save?.warnings.map((warning) => /* @__PURE__ */ jsx(Alert, {
+						severity: "warning",
+						sx: { mb: 1 },
+						children: warning
+					}, warning)),
+					save && /* @__PURE__ */ jsx(FileDiff, { lines: lineDiff(save.previous, save.content) }),
+					/* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontSize: 12,
+							color: "text.secondary",
+							mt: 1
+						},
+						children: "O Next recarrega o modelo sozinho; o rascunho é descartado. O lint-staged formata o arquivo no commit."
+					})
+				] }),
+				/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setSave(null),
+					children: "Cancelar"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "contained",
+					disabled: !save || save.previous === save.content || !!busy,
+					onClick: writeSave,
+					children: "Gravar"
+				})] })
+			]
+		})]
 	});
 }
 //#endregion
@@ -8295,4 +8582,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-CMIuUYpw.js.map
+//# sourceMappingURL=DashboardDevtools-D0pzwSgn.js.map