@bluemarble/bi 0.3.1 → 0.4.0

package/dist/{DashboardDevtools-C4E9afPT.js → DashboardDevtools-7L93aV1-.js}

@@ -1,6 +1,6 @@
-import { A as modelEdges, C as VALUE_FORMATS, D as validateModel, N as referencedTables, S as AGGREGATION_LABEL, T as isAggregate, _ as canonicalJson, a as FILTER_FIELDS, b as toModelCode, c as chartOfType, d as filterReferences, g as validateLayout, i as CARD_FIELDS, j as parseColumnRef, k as measureHome, l as chartReferences, m as layoutModelWarnings, n as CANVAS_PRESETS, p as layoutFileContent, r as CARDS_FIELDS, s as chartColumns, t as BUILTIN_CHART_TYPES, x as AGGREGATIONS } from "./layout-DTR4vI-I.js";
+import { A as modelEdges, C as VALUE_FORMATS, D as validateModel, N as referencedTables, S as AGGREGATION_LABEL, T as isAggregate, _ as canonicalJson, a as FILTER_FIELDS, b as toModelCode, c as chartOfType, d as filterReferences, g as validateLayout, i as CARD_FIELDS, j as parseColumnRef, k as measureHome, l as chartReferences, m as layoutModelWarnings, n as CANVAS_PRESETS, p as layoutFileContent, r as CARDS_FIELDS, s as chartColumns, t as BUILTIN_CHART_TYPES, x as AGGREGATIONS } from "./layout-676sEvvb.js";
 import { n as diffRows } from "./compare-DloZhg1T.js";
-import { a as useDashboard, c as layoutItemKey, l as parseLayoutItemKey, n as INSPECT_ATTRIBUTE, o as errorMessage, s as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-kUKcdbc8.js";
+import { a as useDashboard, c as layoutItemKey, l as parseLayoutItemKey, n as INSPECT_ATTRIBUTE, o as errorMessage, s as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "./ModelDictionary-Y7W9oK1J.js";
 import { Alert, Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControlLabel, IconButton, List, ListItemButton, Menu, MenuItem, MenuList, Paper, Popper, Portal, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Tabs, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography, createTheme } from "@mui/material";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1656,6 +1656,7 @@ function ChartForm({ chart, cards, types, model, formatters, columns, onChange }
 		columns: chartColumns(chart, types),
 		formColumns: columns,
 		chosenDimensions: chartReferences(chart, types).dimensions,
+		chosenMeasures: chartReferences(chart, types).measures,
 		header: /* @__PURE__ */ jsxs(Fragment, { children: [field("Tipo", /* @__PURE__ */ jsxs(TextField, {
 			select: true,
 			size: "small",
@@ -1703,7 +1704,7 @@ function FilterForm({ filter, model, formatters, columns, onChange }) {
 	});
 }
 /** Formulário gerado dos `FieldSpec` (campos do tipo de gráfico ou do filtro). */
-function FieldsForm({ fields, values, onSet: set, model, formatters, columns, formColumns, chosenDimensions, header }) {
+function FieldsForm({ fields, values, onSet: set, model, formatters, columns, formColumns, chosenDimensions, chosenMeasures = [], header }) {
 	const dimensions = Object.entries(model.dimensions).map(([name, dim]) => ({
 		name,
 		label: dim.label
@@ -1742,37 +1743,11 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 				onChange: (e) => set(key, e.target.value),
 				sx: inputSx$1
 			});
-			case "color": {
-				const fallback = spec.default;
-				return /* @__PURE__ */ jsxs(Box, {
-					sx: {
-						display: "flex",
-						gap: .5,
-						alignItems: "center"
-					},
-					children: [/* @__PURE__ */ jsx(Box, {
-						component: "input",
-						type: "color",
-						value: value ?? fallback,
-						onChange: (e) => set(key, e.target.value),
-						sx: {
-							width: 32,
-							height: 30,
-							p: 0,
-							border: 0,
-							bgcolor: "transparent",
-							cursor: "pointer"
-						}
-					}), /* @__PURE__ */ jsx(TextField, {
-						size: "small",
-						fullWidth: true,
-						value: value ?? "",
-						placeholder: fallback,
-						onChange: (e) => set(key, e.target.value),
-						sx: inputSx$1
-					})]
-				});
-			}
+			case "color": return /* @__PURE__ */ jsx(ColorInput, {
+				value,
+				fallback: spec.default,
+				onCommit: (color) => set(key, color)
+			});
 			case "boolean": {
 				const fallback = spec.default;
 				return /* @__PURE__ */ jsx(FormControlLabel, {
@@ -1863,6 +1838,34 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 					}, dimension))
 				});
 			}
+			case "labels":
+				if (!columns.length) return /* @__PURE__ */ jsx(Typography, {
+					sx: {
+						fontSize: 12,
+						color: "text.disabled"
+					},
+					children: "sem colunas"
+				});
+				return /* @__PURE__ */ jsx(LabelsEditor, {
+					value: value ?? {},
+					columns,
+					model,
+					onChange: (next) => set(key, next)
+				});
+			case "formats":
+				if (!chosenMeasures.length) return /* @__PURE__ */ jsx(Typography, {
+					sx: {
+						fontSize: 12,
+						color: "text.disabled"
+					},
+					children: "sem medidas"
+				});
+				return /* @__PURE__ */ jsx(FormatsEditor, {
+					value: value ?? {},
+					measures: chosenMeasures,
+					model,
+					onChange: (next) => set(key, next)
+				});
 			default: return /* @__PURE__ */ jsx(NameSelect, {
 				value: value ?? "",
 				options: options(spec),
@@ -1873,7 +1876,7 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 		}
 	};
 	const sections = [...new Set(entries.map(([, spec]) => spec.section))];
-	const wide = (spec, key) => key === "title" || spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters";
+	const wide = (spec, key) => key === "title" || spec.kind === "dimensions" || spec.kind === "measures" || spec.kind === "formatters" || spec.kind === "labels" || spec.kind === "formats";
 	return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => {
 		const inSection = entries.filter(([, spec]) => spec.section === section);
 		return /* @__PURE__ */ jsx(Section, {
@@ -1892,17 +1895,246 @@ function FieldsForm({ fields, values, onSet: set, model, formatters, columns, fo
 		}, section);
 	}) });
 }
+/**
+* Cor com o seletor nativo. Mexer no seletor só muda a amostra: o rascunho (e a página) muda quando
+* ele fecha — o `change` nativo; o `onChange` do React dispara a cada movimento. O texto aplica no
+* Enter ou ao sair do campo.
+*/
+function ColorInput({ value, fallback, onCommit }) {
+	const [picking, setPicking] = useState(null);
+	const [typing, setTyping] = useState(null);
+	const picker = useRef(null);
+	const commit = useRef(onCommit);
+	useEffect(() => {
+		commit.current = onCommit;
+	});
+	useEffect(() => {
+		const input = picker.current;
+		if (!input) return;
+		const listener = () => {
+			commit.current(input.value);
+			setPicking(null);
+		};
+		input.addEventListener("change", listener);
+		return () => input.removeEventListener("change", listener);
+	}, []);
+	const commitText = () => {
+		if (typing === null) return;
+		const text = typing.trim();
+		setTyping(null);
+		if (text !== (value ?? "")) onCommit(text || void 0);
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			gap: .5,
+			alignItems: "center"
+		},
+		children: [/* @__PURE__ */ jsx(Box, {
+			component: "input",
+			type: "color",
+			ref: picker,
+			value: picking ?? value ?? fallback,
+			onChange: (e) => setPicking(e.target.value),
+			sx: {
+				width: 32,
+				height: 30,
+				p: 0,
+				border: 0,
+				bgcolor: "transparent",
+				cursor: "pointer"
+			}
+		}), /* @__PURE__ */ jsx(TextField, {
+			size: "small",
+			fullWidth: true,
+			value: typing ?? picking ?? value ?? "",
+			placeholder: fallback,
+			onChange: (e) => setTyping(e.target.value),
+			onBlur: commitText,
+			onKeyDown: (e) => {
+				if (e.key === "Enter") commitText();
+				if (e.key === "Escape") setTyping(null);
+			},
+			sx: inputSx$1
+		})]
+	});
+}
+/** Sem as chaves de colunas que saíram do gráfico; vazio = `undefined` (sai do JSON). */
+function pruned(map, keep) {
+	const next = Object.fromEntries(Object.entries(map).filter(([key]) => keep.includes(key)));
+	return Object.keys(next).length ? next : void 0;
+}
+const columnNameSx = {
+	fontFamily: MONO,
+	fontSize: 12,
+	minWidth: 90,
+	maxWidth: 140,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+};
+/** Rótulo de cada coluna do gráfico; o placeholder é o rótulo do dicionário. */
+function LabelsEditor({ value, columns, model, onChange }) {
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: .5
+		},
+		children: columns.map((column) => /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				gap: .5,
+				alignItems: "center"
+			},
+			children: [/* @__PURE__ */ jsx(Tooltip, {
+				title: model.dimensions[column] ? "dimensão" : "medida",
+				placement: "left",
+				children: /* @__PURE__ */ jsx(Typography, {
+					sx: columnNameSx,
+					children: column
+				})
+			}), /* @__PURE__ */ jsx(TextField, {
+				size: "small",
+				fullWidth: true,
+				value: value[column] ?? "",
+				placeholder: model.dimensions[column]?.label ?? model.measures[column]?.label ?? column,
+				onChange: (e) => onChange(pruned(withField(value, column, e.target.value), columns)),
+				sx: inputSx$1
+			})]
+		}, column))
+	});
+}
+const FORMAT_LABEL = {
+	number: "número",
+	integer: "inteiro",
+	currency: "R$",
+	percent: "%"
+};
+/** Formato de cada medida do gráfico; vazio = o do dicionário (que aparece como placeholder). */
+function FormatsEditor({ value, measures, model, onChange }) {
+	const setFormat = (measure, key, next) => {
+		const format = withField(value[measure] ?? {}, key, next);
+		const map = { ...value };
+		if (Object.keys(format).length) map[measure] = format;
+		else delete map[measure];
+		onChange(pruned(map, measures));
+	};
+	const small = {
+		...inputSx$1,
+		"& .MuiInputBase-input": {
+			fontFamily: MONO,
+			fontSize: 12,
+			px: 1
+		}
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: .75
+		},
+		children: measures.map((measure) => {
+			const format = value[measure] ?? {};
+			const fromModel = model.measures[measure];
+			const decimals = format.decimals;
+			return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Typography, {
+				sx: {
+					...columnNameSx,
+					maxWidth: "none",
+					mb: .25
+				},
+				children: [measure, fromModel?.label && /* @__PURE__ */ jsx(Box, {
+					component: "span",
+					sx: {
+						color: "text.secondary",
+						ml: 1,
+						fontFamily: "inherit"
+					},
+					children: fromModel.label
+				})]
+			}), /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "grid",
+					gap: .5,
+					alignItems: "center",
+					gridTemplateColumns: "minmax(88px, 1.4fr) minmax(52px, .8fr) 1fr 1fr auto"
+				},
+				children: [
+					/* @__PURE__ */ jsxs(TextField, {
+						select: true,
+						size: "small",
+						value: format.format ?? "",
+						onChange: (e) => setFormat(measure, "format", e.target.value || void 0),
+						slotProps: { select: { displayEmpty: true } },
+						sx: small,
+						children: [/* @__PURE__ */ jsx(MenuItem, {
+							value: "",
+							children: /* @__PURE__ */ jsxs("em", { children: ["padrão", fromModel?.format ? ` (${FORMAT_LABEL[fromModel.format]})` : ""] })
+						}), VALUE_FORMATS.map((name) => /* @__PURE__ */ jsx(MenuItem, {
+							value: name,
+							children: FORMAT_LABEL[name]
+						}, name))]
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						title: "Casas decimais (0 a 10)",
+						children: /* @__PURE__ */ jsx(TextField, {
+							size: "small",
+							type: "number",
+							value: decimals ?? "",
+							placeholder: fromModel?.decimals === void 0 ? ",00" : String(fromModel.decimals),
+							error: decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0 || decimals > 10),
+							onChange: (e) => setFormat(measure, "decimals", e.target.value.trim() === "" ? void 0 : Number(e.target.value)),
+							slotProps: { htmlInput: {
+								min: 0,
+								max: 10
+							} },
+							sx: small
+						})
+					}),
+					/* @__PURE__ */ jsx(TextField, {
+						size: "small",
+						value: format.prefix ?? "",
+						placeholder: "prefixo",
+						onChange: (e) => setFormat(measure, "prefix", e.target.value),
+						sx: small
+					}),
+					/* @__PURE__ */ jsx(TextField, {
+						size: "small",
+						value: format.suffix ?? "",
+						placeholder: "sufixo",
+						onChange: (e) => setFormat(measure, "suffix", e.target.value),
+						sx: small
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						title: "Notação curta: 1,2 mil / 3,4 mi",
+						children: /* @__PURE__ */ jsx(FormControlLabel, {
+							sx: { m: 0 },
+							control: /* @__PURE__ */ jsx(Checkbox, {
+								size: "small",
+								sx: { p: .25 },
+								checked: format.compact ?? false,
+								onChange: (e) => setFormat(measure, "compact", e.target.checked || void 0)
+							}),
+							label: /* @__PURE__ */ jsx(Typography, {
+								sx: { fontSize: 11 },
+								children: "curto"
+							})
+						})
+					})
+				]
+			})] }, measure);
+		})
+	});
+}
 const formGrid = (columns) => ({
 	display: "grid",
 	gap: 1.5,
 	gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
 });
-/** Rótulo padrão (do dicionário) como placeholder dos campos `*Label` do combo. */
+/** Rótulo padrão (do dicionário) como placeholder do `label` do filtro. */
 function labelPlaceholder(key, values, model) {
 	if (key === "label" && typeof values.dimension === "string") return model.dimensions[values.dimension]?.label ?? values.dimension;
-	const measureKey = key.endsWith("Label") ? key.slice(0, -5) : null;
-	const measure = measureKey && values[measureKey];
-	return typeof measure === "string" ? model.measures[measure]?.label ?? measure : void 0;
 }
 function field(label, input, hint) {
 	return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Typography, {
@@ -2034,10 +2266,7 @@ function toEditor(model) {
 	const uidOf = (name) => tables.find((table) => table.name === name)?.uid ?? "";
 	const positions = Object.fromEntries(Object.entries(model.diagram ?? {}).flatMap(([name, point]) => {
 		const uid = uidOf(name);
-		return uid ? [[uid, {
-			x: point.x,
-			y: point.y
-		}]] : [];
+		return uid ? [[uid, { ...point }]] : [];
 	}));
 	return {
 		name: model.name,
@@ -2132,14 +2361,18 @@ function fromEditor(editor) {
 		...Object.keys(diagram).length && { diagram }
 	};
 }
-/** Posições pelo nome, na ordem dos cards; arredonda (o arquivo não precisa de frações). */
+/** Posições (e tamanhos) pelo nome, na ordem dos cards; arredonda (o arquivo não precisa de frações). */
 function diagramOf(editor) {
 	return Object.fromEntries(editor.tables.flatMap(({ uid, name }) => {
 		const point = editor.positions[uid];
-		return point && name ? [[name, {
-			x: Math.round(point.x),
-			y: Math.round(point.y)
-		}]] : [];
+		if (!point || !name) return [];
+		const { x, y, width, height } = point;
+		return [[name, {
+			x: Math.round(x),
+			y: Math.round(y),
+			...width !== void 0 && { width: Math.round(width) },
+			...height !== void 0 && { height: Math.round(height) }
+		}]];
 	}));
 }
 /** O modelo sem as posições do diagrama: o que muda as consultas. */
@@ -2918,6 +3151,11 @@ const HEADER = 34;
 const ROW = 22;
 const MAX_BODY = 264;
 const PADDING = 4;
+/** Limites do redimensionamento do card. */
+const MIN_WIDTH = 160;
+const MAX_WIDTH = 800;
+const MIN_HEIGHT$1 = 64;
+const MAX_HEIGHT = 1600;
 const ROLE_STYLE = {
 	one: {
 		color: "#4dabf7",
@@ -3034,25 +3272,27 @@ function buildNodes(editor, columns, errors) {
 		};
 	});
 }
-const cardHeight = (node, collapsed) => collapsed ? HEADER : HEADER + Math.min(node.items.length * ROW, MAX_BODY) + 8;
+/** Altura do conteúdo (sem tamanho salvo): até `MAX_BODY` de linhas, o resto rola. */
+const contentHeight = (node) => HEADER + Math.min(node.items.length * ROW, MAX_BODY) + 8;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 /** Quem só filtra (lado 1) em cima, o resto embaixo (como costuma ficar no Power BI). */
-function autoLayout(nodes, heights) {
+function autoLayout(nodes, sizes) {
 	const top = nodes.filter((node) => node.role === "one");
 	const bottom = nodes.filter((node) => node.role !== "one");
 	const positions = {};
-	top.forEach((node, index) => {
-		positions[node.id] = {
-			x: 40 + index * 290,
-			y: 40
-		};
-	});
-	const topHeight = Math.max(0, ...top.map((node) => heights.get(node.id) ?? HEADER));
-	bottom.forEach((node, index) => {
-		positions[node.id] = {
-			x: 40 + index * 290,
-			y: 40 + topHeight + 140
-		};
-	});
+	const gap = 60;
+	const row = (list, y) => {
+		let x = 40;
+		for (const node of list) {
+			positions[node.id] = {
+				x,
+				y
+			};
+			x += (sizes.get(node.id)?.width ?? CARD_WIDTH) + gap;
+		}
+	};
+	row(top, 40);
+	row(bottom, 40 + Math.max(0, ...top.map((node) => sizes.get(node.id)?.height ?? HEADER)) + 140);
 	return positions;
 }
 function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingColumns, onLoadColumns, onTry, usage }) {
@@ -3062,6 +3302,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		errors
 	]);
 	const [moving, setMoving] = useState(null);
+	const [resizing, setResizing] = useState(null);
 	const [collapsed, setCollapsed] = useState({});
 	const [scrolls, setScrolls] = useState({});
 	const [view, setView] = useState({
@@ -3099,9 +3340,39 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		requested.current = true;
 		onLoadColumns();
 	}, [columns, onLoadColumns]);
-	const heights = useMemo(() => new Map(nodes.map((node) => [node.id, cardHeight(node, !!collapsed[node.id])])), [nodes, collapsed]);
-	const fallback = useMemo(() => autoLayout(nodes, heights), [nodes, heights]);
-	const placed = (node) => (moving?.id === node.id ? moving.point : editor.positions[node.id]) ?? fallback[node.id];
+	const sizes = useMemo(() => new Map(nodes.map((node) => {
+		const saved = resizing?.id === node.id ? resizing : editor.positions[node.id];
+		const width = saved?.width ?? CARD_WIDTH;
+		if (collapsed[node.id]) return [node.id, {
+			width,
+			height: HEADER
+		}];
+		return [node.id, {
+			width,
+			height: saved?.height ?? contentHeight(node)
+		}];
+	})), [
+		nodes,
+		collapsed,
+		editor.positions,
+		resizing
+	]);
+	const sizeOf = (node) => sizes.get(node.id) ?? {
+		width: CARD_WIDTH,
+		height: HEADER
+	};
+	const fallback = useMemo(() => autoLayout(nodes, sizes), [nodes, sizes]);
+	const placed = (node) => {
+		if (moving?.id === node.id) return moving.point;
+		const saved = editor.positions[node.id];
+		return saved ? {
+			x: saved.x,
+			y: saved.y
+		} : fallback[node.id] ?? {
+			x: 0,
+			y: 0
+		};
+	};
 	const setPositions = (update) => setEditor((current) => ({
 		...current,
 		positions: update(current.positions)
@@ -3110,7 +3381,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 	/** Ponto da linha na coluna do card (lado esquerdo ou direito). */
 	const anchor = (node, column, side) => {
 		const { x, y } = placed(node);
-		const height = heights.get(node.id) ?? HEADER;
+		const { width, height } = sizeOf(node);
 		const index = node.items.findIndex((item) => item.kind === "column" && item.name === column);
 		let rowY = y + HEADER / 2;
 		if (!collapsed[node.id] && index >= 0) {
@@ -3118,7 +3389,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 			rowY = Math.min(Math.max(raw, y + HEADER + 2), y + height - 2);
 		}
 		return {
-			x: side === "left" ? x : x + CARD_WIDTH,
+			x: side === "left" ? x : x + width,
 			y: rowY
 		};
 	};
@@ -3298,11 +3569,56 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 			setMoving(null);
 			if (moved) setPositions((current) => ({
 				...current,
-				[node.id]: point
+				[node.id]: {
+					...current[node.id],
+					...point
+				}
 			}));
 			else selectNode(node);
 		});
 	};
+	/** Arrasta a borda direita (`width`), a de baixo (`height`) ou o canto (as duas). */
+	const startResize = (event, node, edges) => {
+		if (event.button !== 0) return;
+		const start = sizeOf(node);
+		const { zoom } = view;
+		let size = start;
+		track(event, (dx, dy) => {
+			size = {
+				width: edges.width ? clamp(start.width + dx / zoom, MIN_WIDTH, MAX_WIDTH) : start.width,
+				height: edges.height ? clamp(start.height + dy / zoom, MIN_HEIGHT$1, MAX_HEIGHT) : start.height
+			};
+			setResizing({
+				id: node.id,
+				...size
+			});
+		}, (_, moved) => {
+			setResizing(null);
+			if (!moved) return;
+			const point = placed(node);
+			setPositions((current) => ({
+				...current,
+				[node.id]: {
+					...point,
+					...current[node.id],
+					...edges.width && { width: size.width },
+					...edges.height && { height: size.height }
+				}
+			}));
+		});
+	};
+	/** Duplo clique na alça: volta ao tamanho automático (largura padrão, altura do conteúdo). */
+	const resetSize = (node) => setPositions((current) => {
+		const saved = current[node.id];
+		if (!saved) return current;
+		return {
+			...current,
+			[node.id]: {
+				x: saved.x,
+				y: saved.y
+			}
+		};
+	});
 	const startLink = (event, node, column) => {
 		if (event.button !== 0) return;
 		track(event, (_, __, moveEvent) => setLinking({
@@ -3355,11 +3671,12 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 		if (!rect || !nodes.length) return;
 		const boxes = nodes.map((node) => ({
 			...layout?.[node.id] ?? placed(node),
-			h: heights.get(node.id) ?? HEADER
+			w: sizeOf(node).width,
+			h: sizeOf(node).height
 		}));
 		const minX = Math.min(...boxes.map((box) => box.x));
 		const minY = Math.min(...boxes.map((box) => box.y));
-		const maxX = Math.max(...boxes.map((box) => box.x + CARD_WIDTH));
+		const maxX = Math.max(...boxes.map((box) => box.x + box.w));
 		const maxY = Math.max(...boxes.map((box) => box.y + box.h));
 		const zoom = Math.min(1.2, Math.max(.3, Math.min((rect.width - 60) / (maxX - minX), (rect.height - 60) / (maxY - minY))));
 		setView({
@@ -3375,7 +3692,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 	const isSelected = (node) => selection?.kind === "table" && selection.uid === node.uid;
 	const lines = [];
 	const pushLine = (id, many, manyColumn, one, oneColumn, extra) => {
-		const rightward = placed(many).x + CARD_WIDTH / 2 <= placed(one).x + CARD_WIDTH / 2;
+		const rightward = placed(many).x + sizeOf(many).width / 2 <= placed(one).x + sizeOf(one).width / 2;
 		lines.push({
 			id,
 			from: anchor(many, manyColumn, rightward ? "right" : "left"),
@@ -3462,7 +3779,7 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 						}), nodes.map((node) => /* @__PURE__ */ jsx(TableCard, {
 							node,
 							position: placed(node),
-							height: heights.get(node.id) ?? HEADER,
+							size: sizeOf(node),
 							collapsed: !!collapsed[node.id],
 							selected: !!isSelected(node),
 							linking: !!linking && linking.node.id !== node.id,
@@ -3476,6 +3793,8 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 								[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,
@@ -3532,8 +3851,11 @@ function ModelDiagram({ editor, setEditor, columns, errors, warnings, loadingCol
 									/* @__PURE__ */ jsx(Button, {
 										size: "small",
 										onClick: () => {
-											const layout = autoLayout(nodes, heights);
-											setPositions(() => layout);
+											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)",
@@ -3842,7 +4164,7 @@ function RelationshipLine({ line, hovered, onHover }) {
 		]
 	});
 }
-function TableCard({ node, position, height, collapsed, selected, linking, selectedField, onToggle, onScroll, onHeaderDown, onColumnDown, onFieldClick, onAddField }) {
+function TableCard({ node, position, size, collapsed, selected, linking, selectedField, onToggle, onScroll, onHeaderDown, onResizeDown, onResizeReset, onColumnDown, onFieldClick, onAddField }) {
 	const style = ROLE_STYLE[node.role];
 	const columnActions = ["dimension", "measure"];
 	return /* @__PURE__ */ jsxs(Box, {
@@ -3851,8 +4173,8 @@ function TableCard({ node, position, height, collapsed, selected, linking, selec
 			position: "absolute",
 			left: position.x,
 			top: position.y,
-			width: CARD_WIDTH,
-			height,
+			width: size.width,
+			height: size.height,
 			bgcolor: "#23272e",
 			border: "1px solid",
 			borderColor: node.error ? "error.main" : selected ? style.color : "#3a3f47",
@@ -3864,187 +4186,252 @@ function TableCard({ node, position, height, collapsed, selected, linking, selec
 			userSelect: "none",
 			cursor: "default"
 		},
-		children: [/* @__PURE__ */ jsxs(Box, {
-			onMouseDown: onHeaderDown,
-			title: node.error,
-			sx: {
-				height: 31,
-				display: "flex",
-				alignItems: "center",
-				gap: .75,
-				px: 1,
-				cursor: "move",
-				borderBottom: collapsed ? 0 : "1px solid #3a3f47",
-				flexShrink: 0
-			},
-			children: [
-				/* @__PURE__ */ jsx(Box, {
-					component: "span",
-					sx: {
-						color: style.color,
-						fontSize: 13
-					},
-					children: "▦"
-				}),
-				/* @__PURE__ */ jsx(Typography, {
-					sx: {
-						fontWeight: 700,
-						fontSize: 13,
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-						flex: 1
-					},
-					children: node.name || /* @__PURE__ */ jsx("em", { children: "sem nome" })
-				}),
-				/* @__PURE__ */ jsx(Box, {
-					component: "span",
-					title: style.title,
-					sx: {
-						fontSize: 10,
-						color: style.color
-					},
-					children: style.label
-				}),
-				node.error && /* @__PURE__ */ jsx(Box, {
-					component: "span",
-					sx: {
-						color: "error.main",
-						fontSize: 12
-					},
-					children: "⚠"
-				}),
-				/* @__PURE__ */ jsx(Box, {
-					component: "button",
-					type: "button",
-					"aria-label": collapsed ? "Expandir" : "Recolher",
-					onMouseDown: (event) => event.stopPropagation(),
-					onClick: onToggle,
-					sx: {
-						border: 0,
-						bgcolor: "transparent",
-						color: "text.secondary",
-						cursor: "pointer",
-						p: 0,
-						fontSize: 11
-					},
-					children: collapsed ? "▾" : "▴"
-				})
-			]
-		}), !collapsed && /* @__PURE__ */ jsxs(Box, {
-			onScroll: (event) => onScroll(event.currentTarget.scrollTop),
-			sx: {
-				overflow: "auto",
-				flex: 1,
-				py: `${PADDING}px`
-			},
-			children: [!node.items.length && /* @__PURE__ */ jsx(Typography, {
-				sx: {
-					fontSize: 11,
-					color: "text.disabled",
-					px: 1,
-					lineHeight: `${ROW}px`
-				},
-				children: "sem colunas lidas"
-			}), node.items.map((item) => item.kind === "column" ? /* @__PURE__ */ jsxs(Box, {
-				"data-diagram-node": node.id,
-				"data-diagram-column": item.name,
-				onMouseDown: (event) => onColumnDown(event, item.name),
-				title: item.missing ? "Citada no modelo, mas a tabela não devolve essa coluna" : "Arraste até a coluna de outra tabela para relacionar",
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				onMouseDown: onHeaderDown,
+				title: node.error,
 				sx: {
-					height: ROW,
+					height: 31,
 					display: "flex",
 					alignItems: "center",
 					gap: .75,
 					px: 1,
-					fontSize: 12,
-					cursor: "crosshair",
-					"& .column-actions": { display: "none" },
-					"&:hover .column-actions": { display: linking ? "none" : "flex" },
-					color: item.missing ? "error.main" : item.linked ? "text.primary" : "#adb5bd",
-					fontWeight: item.linked ? 700 : 400,
-					"&:hover": { bgcolor: linking ? "rgba(245,130,32,.25)" : "rgba(255,255,255,.06)" }
+					cursor: "move",
+					borderBottom: collapsed ? 0 : "1px solid #3a3f47",
+					flexShrink: 0
 				},
 				children: [
 					/* @__PURE__ */ jsx(Box, {
 						component: "span",
 						sx: {
-							width: 14,
-							textAlign: "center",
-							color: "text.secondary"
+							color: style.color,
+							fontSize: 13
 						},
-						children: item.isKey ? "🔑" : item.numeric ? "Σ" : ""
+						children: "▦"
 					}),
-					/* @__PURE__ */ jsx(Box, {
-						component: "span",
+					/* @__PURE__ */ jsx(Typography, {
 						sx: {
+							fontWeight: 700,
+							fontSize: 13,
 							overflow: "hidden",
 							textOverflow: "ellipsis",
-							whiteSpace: "nowrap"
+							whiteSpace: "nowrap",
+							flex: 1
 						},
-						children: item.name
+						children: node.name || /* @__PURE__ */ jsx("em", { children: "sem nome" })
 					}),
 					/* @__PURE__ */ jsx(Box, {
-						className: "column-actions",
+						component: "span",
+						title: style.title,
 						sx: {
-							ml: "auto",
-							gap: .25
+							fontSize: 10,
+							color: style.color
 						},
-						children: columnActions.map((kind) => /* @__PURE__ */ jsx(Box, {
-							component: "button",
-							type: "button",
-							title: kind === "dimension" ? `Nova dimensão com ${node.name}.${item.name}` : `Nova medida: ${item.numeric ? "soma" : "contagem"} de ${node.name}.${item.name}`,
-							onMouseDown: (event) => event.stopPropagation(),
-							onClick: () => onAddField(kind, item),
-							sx: {
-								border: "1px solid #3a3f47",
-								borderRadius: .5,
-								bgcolor: "#1b1e23",
-								color: kind === "measure" ? "#ffd8a8" : "#a5d8ff",
-								cursor: "pointer",
-								fontSize: 10,
-								lineHeight: "14px",
-								px: .5
-							},
-							children: kind === "dimension" ? "+◇" : "+Σ"
-						}, kind))
+						children: style.label
+					}),
+					node.error && /* @__PURE__ */ jsx(Box, {
+						component: "span",
+						sx: {
+							color: "error.main",
+							fontSize: 12
+						},
+						children: "⚠"
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						component: "button",
+						type: "button",
+						"aria-label": collapsed ? "Expandir" : "Recolher",
+						onMouseDown: (event) => event.stopPropagation(),
+						onClick: onToggle,
+						sx: {
+							border: 0,
+							bgcolor: "transparent",
+							color: "text.secondary",
+							cursor: "pointer",
+							p: 0,
+							fontSize: 11
+						},
+						children: collapsed ? "▾" : "▴"
 					})
 				]
-			}, `c:${item.name}`) : /* @__PURE__ */ jsxs(Box, {
-				onMouseDown: (event) => event.stopPropagation(),
-				onClick: () => onFieldClick(item),
+			}),
+			!collapsed && /* @__PURE__ */ jsxs(Box, {
+				onScroll: (event) => onScroll(event.currentTarget.scrollTop),
 				sx: {
-					height: ROW,
-					display: "flex",
-					alignItems: "center",
-					gap: .75,
-					px: 1,
-					fontSize: 12,
-					cursor: "pointer",
-					color: item.kind === "measure" ? "#ffd8a8" : "#a5d8ff",
-					bgcolor: selectedField === item.uid ? "rgba(245,130,32,.2)" : void 0,
-					"&:hover": { bgcolor: "rgba(255,255,255,.06)" }
+					overflow: "auto",
+					flex: 1,
+					py: `${PADDING}px`
 				},
-				children: [/* @__PURE__ */ jsx(Box, {
-					component: "span",
+				children: [!node.items.length && /* @__PURE__ */ jsx(Typography, {
 					sx: {
-						width: 14,
-						textAlign: "center"
+						fontSize: 11,
+						color: "text.disabled",
+						px: 1,
+						lineHeight: `${ROW}px`
 					},
-					children: item.icon
-				}), /* @__PURE__ */ jsx(Box, {
-					component: "span",
+					children: "sem colunas lidas"
+				}), node.items.map((item) => item.kind === "column" ? /* @__PURE__ */ jsxs(Box, {
+					"data-diagram-node": node.id,
+					"data-diagram-column": item.name,
+					onMouseDown: (event) => onColumnDown(event, item.name),
+					title: item.missing ? "Citada no modelo, mas a tabela não devolve essa coluna" : "Arraste até a coluna de outra tabela para relacionar",
 					sx: {
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap"
+						height: ROW,
+						display: "flex",
+						alignItems: "center",
+						gap: .75,
+						px: 1,
+						fontSize: 12,
+						cursor: "crosshair",
+						"& .column-actions": { display: "none" },
+						"&:hover .column-actions": { display: linking ? "none" : "flex" },
+						color: item.missing ? "error.main" : item.linked ? "text.primary" : "#adb5bd",
+						fontWeight: item.linked ? 700 : 400,
+						"&:hover": { bgcolor: linking ? "rgba(245,130,32,.25)" : "rgba(255,255,255,.06)" }
 					},
-					children: item.name || /* @__PURE__ */ jsx("em", { children: "sem nome" })
-				})]
-			}, `f:${item.uid}`))]
-		})]
+					children: [
+						/* @__PURE__ */ jsx(Box, {
+							component: "span",
+							sx: {
+								width: 14,
+								textAlign: "center",
+								color: "text.secondary"
+							},
+							children: item.isKey ? "🔑" : item.numeric ? "Σ" : ""
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							component: "span",
+							sx: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: item.name
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							className: "column-actions",
+							sx: {
+								ml: "auto",
+								gap: .25
+							},
+							children: columnActions.map((kind) => /* @__PURE__ */ jsx(Box, {
+								component: "button",
+								type: "button",
+								title: kind === "dimension" ? `Nova dimensão com ${node.name}.${item.name}` : `Nova medida: ${item.numeric ? "soma" : "contagem"} de ${node.name}.${item.name}`,
+								onMouseDown: (event) => event.stopPropagation(),
+								onClick: () => onAddField(kind, item),
+								sx: {
+									border: "1px solid #3a3f47",
+									borderRadius: .5,
+									bgcolor: "#1b1e23",
+									color: kind === "measure" ? "#ffd8a8" : "#a5d8ff",
+									cursor: "pointer",
+									fontSize: 10,
+									lineHeight: "14px",
+									px: .5
+								},
+								children: kind === "dimension" ? "+◇" : "+Σ"
+							}, kind))
+						})
+					]
+				}, `c:${item.name}`) : /* @__PURE__ */ jsxs(Box, {
+					onMouseDown: (event) => event.stopPropagation(),
+					onClick: () => onFieldClick(item),
+					sx: {
+						height: ROW,
+						display: "flex",
+						alignItems: "center",
+						gap: .75,
+						px: 1,
+						fontSize: 12,
+						cursor: "pointer",
+						color: item.kind === "measure" ? "#ffd8a8" : "#a5d8ff",
+						bgcolor: selectedField === item.uid ? "rgba(245,130,32,.2)" : void 0,
+						"&:hover": { bgcolor: "rgba(255,255,255,.06)" }
+					},
+					children: [/* @__PURE__ */ jsx(Box, {
+						component: "span",
+						sx: {
+							width: 14,
+							textAlign: "center"
+						},
+						children: item.icon
+					}), /* @__PURE__ */ jsx(Box, {
+						component: "span",
+						sx: {
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: item.name || /* @__PURE__ */ jsx("em", { children: "sem nome" })
+					})]
+				}, `f:${item.uid}`))]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				onMouseDown: (event) => onResizeDown(event, {
+					width: true,
+					height: false
+				}),
+				onDoubleClick: onResizeReset,
+				title: "Arraste para mudar a largura (duplo clique: tamanho automático)",
+				sx: {
+					...resizeHandleSx,
+					top: 0,
+					right: -4,
+					bottom: 8,
+					width: 8,
+					cursor: "ew-resize"
+				}
+			}),
+			!collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+				onMouseDown: (event) => onResizeDown(event, {
+					width: false,
+					height: true
+				}),
+				onDoubleClick: onResizeReset,
+				title: "Arraste para mudar a altura (duplo clique: tamanho automático)",
+				sx: {
+					...resizeHandleSx,
+					left: 0,
+					right: 8,
+					bottom: -4,
+					height: 8,
+					cursor: "ns-resize"
+				}
+			}), /* @__PURE__ */ jsx(Box, {
+				onMouseDown: (event) => onResizeDown(event, {
+					width: true,
+					height: true
+				}),
+				onDoubleClick: onResizeReset,
+				title: "Arraste para redimensionar (duplo clique: tamanho automático)",
+				sx: {
+					...resizeHandleSx,
+					right: -4,
+					bottom: -4,
+					width: 14,
+					height: 14,
+					cursor: "nwse-resize",
+					"&::after": {
+						content: "\"\"",
+						position: "absolute",
+						right: 6,
+						bottom: 6,
+						width: 6,
+						height: 6,
+						borderRight: "2px solid #5c636e",
+						borderBottom: "2px solid #5c636e"
+					},
+					"&:hover::after": { borderColor: ROLE_STYLE[node.role].color }
+				}
+			})] })
+		]
 	});
 }
+const resizeHandleSx = {
+	position: "absolute",
+	zIndex: 1
+};
 function PropertyBlock({ title, children }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		sx: {
@@ -6883,4 +7270,4 @@ function ToggleButton$1({ draft, loading, problems, inspecting, onOpen }) {
 //#endregion
 export { DashboardDevtools as default };
 
-//# sourceMappingURL=DashboardDevtools-C4E9afPT.js.map
+//# sourceMappingURL=DashboardDevtools-7L93aV1-.js.map