@bluemarble/bi 0.6.1 → 0.6.2

package/dist/{DashboardDevtools-xhkgdAkr.js → DashboardDevtools-BT9mJrmJ.js}

@@ -1,11 +1,46 @@
 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-DkfI6UJr.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-DAFeHIuP.js";
-import { d as useDashboard, f as errorMessage, h as parseLayoutItemKey, m as layoutItemKey, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-B26oLtPH.js";
-import { Alert, Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControlLabel, IconButton, List, ListItemButton, ListSubheader, Menu, MenuItem, MenuList, Paper, Popover, Popper, Portal, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Tabs, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography, createTheme } from "@mui/material";
+import { d as useDashboard, f as errorMessage, h as parseLayoutItemKey, m as layoutItemKey, n as INSPECT_ATTRIBUTE, o as formatMeasure, p as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-BlDeDyAE.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";
 import { createPortal } from "react-dom";
+//#region src/devtools/autoApply.ts
+/**
+* Preferência "Aplicar automaticamente" dos editores (Layout e Modelo): ligada, cada edição válida
+* vai para a página sozinha, como se clicasse em "Aplicar na página". Uma só para os dois editores,
+* guardada no navegador.
+*/
+const KEY = "bm-dashboard-devtools:auto-apply";
+const listeners = /* @__PURE__ */ new Set();
+function read() {
+	try {
+		return localStorage.getItem(KEY) === "1";
+	} catch {
+		return false;
+	}
+}
+let enabled = read();
+function setAutoApply(next) {
+	enabled = next;
+	try {
+		localStorage.setItem(KEY, next ? "1" : "0");
+	} catch {}
+	for (const listener of listeners) listener();
+}
+const subscribe = (listener) => {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+};
+const getSnapshot = () => enabled;
+const useAutoApply = () => useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+/** Espera entre a última edição e o aplicar automático (digitação não aplica a cada tecla). */
+const AUTO_APPLY_DELAY = {
+	layout: 500,
+	model: 1200
+};
+//#endregion
 //#region src/devtools/sqlHighlight.tsx
 const KEYWORDS$1 = new Set(`SELECT FROM WHERE AND OR NOT IN IS NULL JOIN LEFT RIGHT INNER OUTER CROSS ON AS GROUP BY ORDER
   HAVING LIMIT OFFSET UNION ALL DISTINCT CASE WHEN THEN ELSE END WITH ASC DESC BETWEEN LIKE EXISTS
@@ -484,6 +519,67 @@ function RowDiffTable({ diffs, expectedLabel = "esperado", actualLabel = "atual"
 		})
 	});
 }
+/**
+* Botão que pede confirmação antes de agir (ações que perdem trabalho, como desfazer edições).
+* Diálogo do MUI, e não `confirm()`: no modo janela separada, ele abre no popup.
+*/
+function ConfirmButton({ confirmTitle, confirmText, confirmLabel = "Confirmar", onConfirm, ...props }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		...props,
+		onClick: () => setOpen(true)
+	}), /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onClose: () => setOpen(false),
+		maxWidth: "xs",
+		fullWidth: true,
+		children: [
+			/* @__PURE__ */ jsx(DialogTitle, {
+				sx: { fontSize: 15 },
+				children: confirmTitle
+			}),
+			/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Typography, {
+				sx: { fontSize: 13 },
+				children: confirmText
+			}) }),
+			/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: () => setOpen(false),
+				children: "Cancelar"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				color: "warning",
+				autoFocus: true,
+				onClick: () => {
+					setOpen(false);
+					onConfirm();
+				},
+				children: confirmLabel
+			})] })
+		]
+	})] });
+}
+/** Liga/desliga o "Aplicar automaticamente" (compartilhado entre os editores). */
+function AutoApplySwitch({ applying }) {
+	const enabled = useAutoApply();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: "Cada edição válida vai para a página sozinha (como “Aplicar na página”). Desligado, aparece o botão Aplicar.",
+		children: /* @__PURE__ */ jsx(FormControlLabel, {
+			sx: {
+				m: 0,
+				mr: .5
+			},
+			control: /* @__PURE__ */ jsx(Switch, {
+				size: "small",
+				checked: enabled,
+				onChange: (e) => setAutoApply(e.target.checked)
+			}),
+			label: /* @__PURE__ */ jsxs(Typography, {
+				sx: { fontSize: 12 },
+				children: ["Aplicar automaticamente", enabled && applying ? " · aplicando…" : ""]
+			})
+		})
+	});
+}
 //#endregion
 //#region src/devtools/FiltersPanel.tsx
 function parseFilters(text) {
@@ -1003,6 +1099,25 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 		setSelection(parsed.item);
 	}, [picked]);
 	const errors = useMemo(() => editing ? validateLayout(editing, chartTypes) : [], [editing, chartTypes]);
+	/** Manda o editor para a página (vira rascunho e a página re-renderiza com ele). */
+	const applyEditing = () => {
+		if (!entry || !editing || validateLayout(editing, chartTypes).length) return;
+		devtools.store.expectRefetch();
+		layouts.setPending(entry.registered.id, null);
+		layouts.setDraft(entry.registered.id, editing);
+	};
+	const autoApply = useAutoApply();
+	const editingKey = canonicalJson(editing);
+	useEffect(() => {
+		if (!autoApply || editingKey === referenceKey || errors.length) return;
+		const timer = setTimeout(applyEditing, AUTO_APPLY_DELAY.layout);
+		return () => clearTimeout(timer);
+	}, [
+		autoApply,
+		editingKey,
+		referenceKey,
+		errors.length
+	]);
 	const warnings = useMemo(() => {
 		if (!editing || errors.length) return [];
 		const list = layoutModelWarnings(editing, model, chartTypes);
@@ -1044,12 +1159,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 		setEditing(next);
 		setSave(null);
 	};
-	const apply = () => {
-		if (validateLayout(editing, chartTypes).length) return;
-		devtools.store.expectRefetch();
-		layouts.setPending(entry.registered.id, null);
-		layouts.setDraft(entry.registered.id, editing);
-	};
+	const apply = applyEditing;
 	const setCharts = (next) => update({
 		...editing,
 		charts: next
@@ -1420,23 +1530,33 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 					borderColor: "divider"
 				},
 				children: [
-					dirty && /* @__PURE__ */ jsx(Typography, {
+					/* @__PURE__ */ jsxs(Box, {
 						sx: {
-							fontSize: 12,
-							color: "warning.main",
-							mr: "auto"
+							mr: "auto",
+							display: "flex",
+							alignItems: "center",
+							gap: 1
 						},
-						children: "Edições não aplicadas"
+						children: [/* @__PURE__ */ jsx(AutoApplySwitch, { applying: dirty && !errors.length }), dirty && (!autoApply || !!errors.length) && /* @__PURE__ */ jsx(Typography, {
+							sx: {
+								fontSize: 12,
+								color: "warning.main"
+							},
+							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(Button, {
+					/* @__PURE__ */ jsx(ConfirmButton, {
 						size: "small",
 						disabled: !dirty,
-						onClick: () => setEditing(reference),
+						onConfirm: () => setEditing(reference),
 						title: "Desfaz as edições ainda não aplicadas",
+						confirmTitle: "Desfazer as edições?",
+						confirmText: "As edições ainda não aplicadas na página serão perdidas; o editor volta ao que a página mostra.",
+						confirmLabel: "Desfazer",
 						children: "Desfazer"
 					}),
 					/* @__PURE__ */ jsx(Button, {
@@ -1460,7 +1580,7 @@ function LayoutPanel({ devtools, model, capabilities, picked, onHover }) {
 						title: `Reescreve ${entry.registered.id}.json com o que está no editor`,
 						children: busy ? "Gerando…" : "Salvar no arquivo"
 					}),
-					/* @__PURE__ */ jsx(Button, {
+					!autoApply && /* @__PURE__ */ jsx(Button, {
 						size: "small",
 						variant: "contained",
 						disabled: !dirty || !!errors.length,
@@ -4153,7 +4273,6 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 	});
 	const [selection, setSelection] = useState(null);
 	const [panel, setPanel] = useState(loadPanel);
-	const [picking, setPicking] = useState(null);
 	useEffect(() => {
 		try {
 			localStorage.setItem(PANEL_KEY, JSON.stringify(panel));
@@ -4567,376 +4686,305 @@ 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: {
-								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)
-						}, 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",
-								variant: "outlined",
-								disabled: !editor.tables.length,
-								onClick: () => setPicking(editor.tables[0]?.name ?? null),
-								title: "Escolher a tabela e marcar as colunas que viram dimensão",
-								children: "+ Dimensões"
-							}),
-							/* @__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: "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: {
+		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: {
 							position: "absolute",
-							left: 10,
-							bottom: 6,
-							fontSize: 11,
-							color: "text.disabled",
+							overflow: "visible",
 							pointerEvents: "none"
 						},
-						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
-							}
-						}
-					}),
-					/* @__PURE__ */ jsxs(Box, {
-						sx: {
-							display: "flex",
-							alignItems: "center",
-							px: 1.5,
-							py: .5,
-							borderBottom: 1,
-							borderColor: "divider"
-						},
-						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: "⟩"
+						"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"
 						})]
-					}),
-					/* @__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__ */ jsxs(Dialog, {
-				open: picking !== null,
-				onClose: () => setPicking(null),
-				maxWidth: "xs",
-				fullWidth: true,
-				children: [
-					/* @__PURE__ */ jsx(DialogTitle, {
-						sx: { fontSize: 14 },
-						children: "Dimensões"
-					}),
-					/* @__PURE__ */ jsxs(DialogContent, { children: [
-						/* @__PURE__ */ jsxs(Typography, {
-							sx: {
-								fontSize: 12,
-								color: "text.secondary",
-								mb: 1
-							},
-							children: [
-								"Marque as colunas que viram dimensão (filtro e eixo dos gráficos). Para expressões como",
-								" ",
-								/* @__PURE__ */ jsx("code", { children: "YEAR(tabela.data)" }),
-								", use o modo SQL da dimensão."
-							]
+					}), 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
 						}),
-						/* @__PURE__ */ jsx(TextField, {
-							select: true,
+						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",
-							fullWidth: true,
-							label: "tabela",
-							value: picking ?? "",
-							onChange: (e) => setPicking(e.target.value),
+							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: {
-								...inputSx,
-								mb: 1
+								ml: "auto",
+								display: "flex",
+								gap: .5,
+								alignItems: "center"
 							},
-							children: editor.tables.map((table) => /* @__PURE__ */ jsx(MenuItem, {
-								value: table.name,
-								children: table.name
-							}, table.uid))
-						}),
-						picking && /* @__PURE__ */ jsx(DimensionPicker, {
-							editor,
-							setEditor,
-							columns,
-							table: picking,
-							onOpen: (uid) => {
-								setPicking(null);
-								setSelection({
-									kind: "dimension",
-									uid
-								});
-							}
+							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: "+"
+								})
+							]
 						})
-					] }),
-					/* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, {
-						onClick: () => setPicking(null),
-						children: "Fechar"
-					}) })
-				]
-			})
-		]
+					]
+				}),
+				!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 · 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
+						}
+					}
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						px: 1.5,
+						py: .5,
+						borderBottom: 1,
+						borderColor: "divider"
+					},
+					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"
+		})]
 	});
 }
 /** Curva com tangentes horizontais (saída e chegada pelas laterais dos cards). */
@@ -5844,7 +5892,12 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 	const [busy, setBusy] = useState(null);
 	const [actionError, setActionError] = useState(null);
 	const [save, setSave] = useState(null);
-	useEffect(() => setEditor(toEditor(draft ?? original)), [draft, original]);
+	const applied = useRef(null);
+	useEffect(() => {
+		const next = draft ?? original;
+		if (draft && canonicalJson(draft) === applied.current) return;
+		setEditor((current) => same(fromEditor(current), next) ? current : toEditor(next));
+	}, [draft, original]);
 	const errors = useMemo(() => validateEditor(editor), [editor]);
 	const edited = useMemo(() => fromEditor(editor), [editor]);
 	const structure = useMemo(() => canonicalJson(withoutDiagram(edited)), [edited]);
@@ -5916,8 +5969,26 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 	const apply = () => act("apply", async () => {
 		const result = canonicalJson(withoutDiagram(reference)) === structure ? null : await validateSql();
 		if (result && Object.keys(result.errors).length) return;
+		applied.current = differsFromOriginal ? canonicalJson(edited) : null;
 		setDraft(differsFromOriginal ? edited : null);
 	});
+	const autoApply = useAutoApply();
+	const editedKey = canonicalJson(edited);
+	const attempted = useRef(null);
+	useEffect(() => {
+		if (!autoApply || !dirty || errors.length || busy || attempted.current === editedKey) return;
+		const timer = setTimeout(() => {
+			attempted.current = editedKey;
+			apply();
+		}, AUTO_APPLY_DELAY.model);
+		return () => clearTimeout(timer);
+	}, [
+		autoApply,
+		editedKey,
+		dirty,
+		errors.length,
+		busy
+	]);
 	const previewSave = () => act("save", async () => {
 		const result = await fetcher({
 			model: modelName,
@@ -6060,9 +6131,11 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 									ml: "auto",
 									display: "flex",
 									gap: 1,
-									flexWrap: "wrap"
+									flexWrap: "wrap",
+									alignItems: "center"
 								},
 								children: [
+									/* @__PURE__ */ jsx(AutoApplySwitch, { applying: busy === "apply" }),
 									/* @__PURE__ */ jsx(Button, {
 										size: "small",
 										onClick: () => setShowCode(true),
@@ -6082,11 +6155,14 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 										title: "Executa cada pedaço do modelo no banco com poucas chaves",
 										children: busy === "validate" ? "Validando…" : "Validar SQL"
 									}),
-									/* @__PURE__ */ jsx(Button, {
+									/* @__PURE__ */ jsx(ConfirmButton, {
 										size: "small",
 										disabled: !dirty,
-										onClick: () => setEditor(toEditor(reference)),
+										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, {
@@ -6105,7 +6181,7 @@ function ModelPanel({ devtools, original, capabilities, tables, onTry, onSaved }
 										title: `Reescreve src/dashboard/models/${original.name}.ts`,
 										children: busy === "save" ? "Gerando…" : "Salvar no arquivo"
 									}),
-									/* @__PURE__ */ jsx(Button, {
+									!autoApply && /* @__PURE__ */ jsx(Button, {
 										size: "small",
 										variant: "contained",
 										disabled: !dirty || !!errors.length || !!busy,
@@ -8111,4 +8187,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-xhkgdAkr.js.map
+//# sourceMappingURL=DashboardDevtools-BT9mJrmJ.js.map