@bluemarble/bi 0.0.0-stage → 0.1.2

package/dist/client/index.js

@@ -0,0 +1,1325 @@
+import { a as useDashboard, c as layoutItemKey, i as DashboardProvider, n as INSPECT_ATTRIBUTE, r as useModelQuery, s as LAYOUT_ITEM_ATTRIBUTE, t as ModelDictionary } from "../ModelDictionary-DU6i_QSn.js";
+import { Box, Checkbox, CircularProgress, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Paper, Select, Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, Typography } from "@mui/material";
+import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, ComposedChart, LabelList, Line, Pie, PieChart, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/chartKit.tsx
+/**
+* Peças comuns dos gráficos ligados ao modelo: paleta, filtro por clique, legenda e os estados de
+* carregando/erro/vazio.
+*/
+/**
+* Paleta categórica, sempre nesta ordem (a série N tem sempre a mesma cor). Laranja Rocha primeiro;
+* a ordem passa no validador de daltonismo (CVD ΔE ≥ 9 entre vizinhas) e de visão normal (≥ 19).
+*/
+const SERIES_COLORS = [
+	"#F58220",
+	"#2a78d6",
+	"#1baf7a",
+	"#eda100",
+	"#e87ba4",
+	"#008300",
+	"#6250d6",
+	"#e34948"
+];
+/** "Outros" (fatias agrupadas) fica neutro, fora da paleta. */
+const OTHER_COLOR = "#9e9e9e";
+const seriesColor = (index) => SERIES_COLORS[index % SERIES_COLORS.length];
+/** Valor numérico de uma coluna da linha (`null` quando vazio). */
+const numberOf = (row, key) => key && row[key] !== null && row[key] !== void 0 ? Number(row[key]) : null;
+/**
+* Filtro cruzado a partir do gráfico: clicar num valor filtra o dashboard por ele (Ctrl/Cmd+clique
+* acumula; clicar de novo no único selecionado limpa). O gráfico deve ignorar o próprio filtro na
+* consulta (`ignoreFilters`) e só destacar a seleção.
+*/
+function useClickFilter(dimension, enabled) {
+	const { filters, setFilter } = useDashboard();
+	const selected = enabled && dimension ? filters[dimension] ?? [] : [];
+	const toggle = (value, event) => {
+		if (!enabled || !dimension) return;
+		if (event?.ctrlKey || event?.metaKey) setFilter(dimension, selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value]);
+		else setFilter(dimension, selected.length === 1 && selected[0] === value ? [] : [value]);
+	};
+	return {
+		selected,
+		/** Há seleção e este valor não está nela. */
+		isDimmed: (value) => selected.length > 0 && !selected.includes(value),
+		toggle,
+		clear: () => {
+			if (enabled && dimension && selected.length) setFilter(dimension, []);
+		}
+	};
+}
+function Legend({ items, loading }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexWrap: "wrap",
+			columnGap: 1.5,
+			rowGap: .5,
+			mb: 1,
+			fontSize: 14,
+			color: "#555",
+			minHeight: 21
+		},
+		children: [items.map((item) => /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [/* @__PURE__ */ jsx(Box, { sx: {
+				width: 9,
+				height: 9,
+				borderRadius: "50%",
+				bgcolor: item.color
+			} }), item.label]
+		}, item.label)), loading && /* @__PURE__ */ jsx(CircularProgress, {
+			size: 14,
+			sx: { ml: "auto" }
+		})]
+	});
+}
+/** Erro / carregando / sem dados no lugar do gráfico; `null` quando há o que desenhar (função, não componente). */
+function chartPlaceholder({ height, error, isLoading, empty }) {
+	if (!error && !empty) return null;
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			height,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			color: error ? "error.main" : "#999"
+		},
+		children: error ? "Erro ao carregar o gráfico" : isLoading ? "Carregando…" : "Sem dados para os filtros selecionados"
+	});
+}
+function TooltipBox({ title, children }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			bgcolor: "#fff",
+			border: "1px solid #ccc",
+			p: 1,
+			fontSize: 13
+		},
+		children: [/* @__PURE__ */ jsx(Box, {
+			sx: { fontWeight: 700 },
+			children: title
+		}), children]
+	});
+}
+//#endregion
+//#region src/client/format.ts
+const formatters = /* @__PURE__ */ new Map();
+function formatNumber(value, decimals = 2) {
+	if (value === null || value === void 0 || value === "") return "";
+	const number = Number(value);
+	if (Number.isNaN(number)) return String(value);
+	let formatter = formatters.get(decimals);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat("pt-BR", {
+			minimumFractionDigits: decimals,
+			maximumFractionDigits: decimals
+		});
+		formatters.set(decimals, formatter);
+	}
+	return formatter.format(number);
+}
+const formatCurrency = (value, decimals = 2) => {
+	const text = formatNumber(value, decimals);
+	return text && `R$ ${text}`;
+};
+/**
+* Formata pelo dicionário do modelo (`format`/`decimals` da medida). `fallbackDecimals` é o padrão
+* do componente quando a medida não define `decimals`.
+*/
+function formatMeasure(value, meta, fallbackDecimals = 2) {
+	const decimals = meta?.decimals ?? (meta?.format === "integer" ? 0 : fallbackDecimals);
+	switch (meta?.format) {
+		case "currency": return formatCurrency(value, decimals);
+		case "percent": {
+			if (value === null || value === void 0 || value === "") return "";
+			const text = formatNumber(Number(value) * 100, decimals);
+			return text && `${text}%`;
+		}
+		default: return formatNumber(value, decimals);
+	}
+}
+/** Formatter de uma medida pelo dicionário do modelo; sem `format`, número com `fallbackDecimals`. */
+function measureFormatter(meta, measure, fallbackDecimals = 2) {
+	const measureMeta = meta?.measures[measure];
+	return (value) => formatMeasure(value, measureMeta, fallbackDecimals);
+}
+//#endregion
+//#region src/client/BarChart.tsx
+const MAX_VALUE_LABELS = 30;
+/** Altura de cada categoria no modo horizontal (barras finas, com respiro). */
+const ROW_HEIGHT = 28;
+/**
+* Barras de uma ou mais medidas por uma dimensão. Ex.:
+* `<BarChart dimension="navio" measures={['custoTotal']} orientation="horizontal" sort="desc" limit={10} />`.
+*/
+function BarChart({ dimension, measures, orientation = "vertical", stacked = false, sort = "dimension", limit, formatDimension = String, hideEmpty = true, showValues = true, clickToFilter = false, height = 360, queryLabel }) {
+	const { meta } = useDashboard();
+	const { rows, isLoading, error, inspectProps } = useModelQuery({
+		dimensions: [dimension],
+		measures,
+		ignoreFilters: clickToFilter ? [dimension] : void 0,
+		label: queryLabel ?? `BarChart · ${dimension}`
+	});
+	const filter = useClickFilter(dimension, clickToFilter);
+	const formats = measures.map((measure) => measureFormatter(meta, measure, 0));
+	const labelOf = (measure) => meta?.measures[measure]?.label ?? measure;
+	const first = measures[0];
+	let data = rows.filter((row) => !hideEmpty || measures.some((measure) => numberOf(row, measure))).map((row) => {
+		const value = row[dimension] ?? "";
+		const point = {
+			value,
+			label: formatDimension(value)
+		};
+		for (const measure of measures) point[measure] = numberOf(row, measure) ?? 0;
+		return point;
+	});
+	if (sort !== "dimension" && first) data = [...data].sort((a, b) => sort === "desc" ? Number(b[first]) - Number(a[first]) : Number(a[first]) - Number(b[first]));
+	if (limit) data = data.slice(0, limit);
+	const horizontal = orientation === "horizontal";
+	const labels = showValues && data.length <= MAX_VALUE_LABELS;
+	const chartHeight = horizontal ? Math.max(height, data.length * ROW_HEIGHT + 24) : height;
+	const longest = Math.max(0, ...data.map((point) => point.label.length));
+	const state = chartPlaceholder({
+		height,
+		error,
+		isLoading,
+		empty: !data.length
+	});
+	const ChartTooltip = ({ active, payload }) => {
+		if (!active || !payload?.length) return null;
+		const point = payload[0].payload;
+		return /* @__PURE__ */ jsx(TooltipBox, {
+			title: point.label,
+			children: measures.map((measure, index) => /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: .75
+				},
+				children: [
+					/* @__PURE__ */ jsx(Box, { sx: {
+						width: 8,
+						height: 8,
+						borderRadius: "50%",
+						bgcolor: seriesColor(index)
+					} }),
+					labelOf(measure),
+					": ",
+					formats[index]?.(point[measure])
+				]
+			}, measure))
+		});
+	};
+	const handleClick = (index, event) => {
+		event.stopPropagation();
+		const point = data[index];
+		if (point) filter.toggle(point.value, event);
+	};
+	const radius = (index) => {
+		if (stacked && index < measures.length - 1) return [
+			0,
+			0,
+			0,
+			0
+		];
+		return horizontal ? [
+			0,
+			4,
+			4,
+			0
+		] : [
+			4,
+			4,
+			0,
+			0
+		];
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		...inspectProps,
+		sx: { minWidth: 0 },
+		children: [/* @__PURE__ */ jsx(Legend, {
+			items: measures.length > 1 ? measures.map((measure, index) => ({
+				label: labelOf(measure),
+				color: seriesColor(index)
+			})) : [],
+			loading: isLoading
+		}), state ?? /* @__PURE__ */ jsx(Box, {
+			onClick: filter.clear,
+			sx: {
+				height,
+				overflowY: horizontal ? "auto" : "hidden",
+				opacity: isLoading ? .5 : 1,
+				transition: "opacity .2s"
+			},
+			children: /* @__PURE__ */ jsx(Box, {
+				sx: { height: chartHeight },
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(BarChart$1, {
+						data,
+						layout: horizontal ? "vertical" : "horizontal",
+						barGap: 2,
+						barCategoryGap: "20%",
+						margin: horizontal ? {
+							top: 4,
+							right: labels ? 96 : 16,
+							left: 8,
+							bottom: 4
+						} : {
+							top: labels ? 24 : 8,
+							right: 8,
+							left: 8,
+							bottom: 0
+						},
+						children: [
+							/* @__PURE__ */ jsx(CartesianGrid, {
+								stroke: "#eee",
+								vertical: horizontal,
+								horizontal: !horizontal
+							}),
+							horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+								type: "number",
+								hide: labels,
+								tick: {
+									fontSize: 12,
+									fill: "#555"
+								}
+							}), /* @__PURE__ */ jsx(YAxis, {
+								type: "category",
+								dataKey: "label",
+								interval: 0,
+								width: Math.min(220, longest * 7 + 12),
+								tick: {
+									fontSize: 12,
+									fill: "#555"
+								},
+								tickLine: false,
+								axisLine: false
+							})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+								dataKey: "label",
+								interval: data.length > MAX_VALUE_LABELS ? "preserveStartEnd" : 0,
+								tick: {
+									fontSize: 12,
+									fill: "#555"
+								},
+								tickLine: false,
+								axisLine: { stroke: "#ccc" }
+							}), /* @__PURE__ */ jsx(YAxis, {
+								hide: labels,
+								tick: {
+									fontSize: 12,
+									fill: "#555"
+								},
+								tickFormatter: (value) => formatNumber(value, 0),
+								width: 72
+							})] }),
+							/* @__PURE__ */ jsx(Tooltip$1, {
+								content: /* @__PURE__ */ jsx(ChartTooltip, {}),
+								cursor: { fill: "rgba(0,0,0,.04)" }
+							}),
+							measures.map((measure, index) => /* @__PURE__ */ jsxs(Bar, {
+								dataKey: measure,
+								name: labelOf(measure),
+								fill: seriesColor(index),
+								stackId: stacked ? "stack" : void 0,
+								radius: radius(index),
+								maxBarSize: horizontal ? 18 : 56,
+								isAnimationActive: false,
+								onClick: clickToFilter ? (_bar, barIndex, event) => handleClick(barIndex, event) : void 0,
+								cursor: clickToFilter ? "pointer" : void 0,
+								children: [clickToFilter && data.map((point) => /* @__PURE__ */ jsx(Cell, { fillOpacity: filter.isDimmed(point.value) ? .35 : 1 }, String(point.value))), labels && !stacked && /* @__PURE__ */ jsx(LabelList, {
+									dataKey: measure,
+									position: horizontal ? "right" : "top",
+									formatter: (value) => formats[index]?.(value) ?? "",
+									style: {
+										fontSize: 12,
+										fill: "#333",
+										fontWeight: 600
+									}
+								})]
+							}, measure))
+						]
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/client/ComboChart.tsx
+/** Mantém a linha na faixa de baixo do gráfico, longe dos rótulos que ficam em cima das barras. */
+const lineDomain = ([min, max]) => {
+	const range = max - min || Math.abs(max) || 1;
+	return [min - range * .3, max + range * 1.7];
+};
+/**
+* Barras + linha de uma dimensão, consultando o modelo do `DashboardProvider` (com os filtros dele).
+* Ex.: `<ComboChart dimension="mes" bar="custoTotal" line="custoTon" detail="volTotal" />`.
+*/
+function ComboChart({ dimension, bar, line, detail, barLabel, lineLabel, detailLabel, formatDimension = String, formatBar, formatLine, formatDetail, hideEmpty = true, height = 360, maxLabels = 24, barColor = "#F58220", lineColor = "#555", clickToFilter = false, queryLabel }) {
+	const { meta, filters, setFilter } = useDashboard();
+	const fromModel = (measure, decimals, fallback) => {
+		const measureMeta = meta?.measures[measure];
+		return measureMeta?.format ? (value) => formatMeasure(value, measureMeta, decimals) : fallback;
+	};
+	formatBar ??= fromModel(bar, 0, (value) => formatCurrency(value, 0));
+	formatLine ??= fromModel(line, 2, (value) => formatNumber(value, 2));
+	formatDetail ??= detail ? fromModel(detail, 3, (value) => formatNumber(value, 3)) : (value) => formatNumber(value, 3);
+	barLabel ??= meta?.measures[bar]?.label ?? bar;
+	lineLabel ??= meta?.measures[line]?.label ?? line;
+	detailLabel ??= detail && (meta?.measures[detail]?.label ?? detail);
+	const { rows, isLoading, error, inspectProps } = useModelQuery({
+		dimensions: [dimension],
+		measures: detail ? [
+			bar,
+			line,
+			detail
+		] : [bar, line],
+		ignoreFilters: clickToFilter ? [dimension] : void 0,
+		label: queryLabel ?? `ComboChart · ${dimension}`
+	});
+	const num = (row, key) => key && row[key] !== null && row[key] !== void 0 ? Number(row[key]) : null;
+	const data = rows.filter((row) => !hideEmpty || num(row, bar)).map((row) => ({
+		value: row[dimension] ?? "",
+		label: formatDimension(row[dimension] ?? ""),
+		bar: num(row, bar) ?? 0,
+		line: num(row, line),
+		detail: num(row, detail)
+	}));
+	const showLabels = data.length <= maxLabels;
+	const selected = clickToFilter ? filters[dimension] ?? [] : [];
+	const isDimmed = (point) => selected.length > 0 && !selected.includes(point.value);
+	const handleBarClick = (index, event) => {
+		event.stopPropagation();
+		const point = data[index];
+		if (!point) return;
+		if (event.ctrlKey || event.metaKey) setFilter(dimension, selected.includes(point.value) ? selected.filter((value) => value !== point.value) : [...selected, point.value]);
+		else {
+			const onlyThis = selected.length === 1 && selected[0] === point.value;
+			setFilter(dimension, onlyThis ? [] : [point.value]);
+		}
+	};
+	const clearFilter = () => {
+		if (selected.length) setFilter(dimension, []);
+	};
+	const BarValueLabel = (props) => {
+		const point = data[props.index];
+		if (!point?.bar) return null;
+		const cx = Number(props.x) + Number(props.width) / 2;
+		const lines = [formatBar(point.bar), point.detail === null ? null : formatDetail(point.detail)].filter((text) => !!text);
+		const top = Number(props.y) - 6 - lines.length * 15;
+		const width = Math.max(...lines.map((text) => text.length)) * 6.8 + 10;
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x: cx - width / 2,
+			y: top,
+			width,
+			height: lines.length * 15 + 4,
+			rx: 2,
+			fill: "#555"
+		}), lines.map((text, i) => /* @__PURE__ */ jsx("text", {
+			x: cx,
+			y: top + 14 + i * 15,
+			textAnchor: "middle",
+			fill: "#fff",
+			fontSize: 12,
+			fontWeight: 700,
+			children: text
+		}, text))] });
+	};
+	const LineValueLabel = (props) => {
+		if (props.value === null || props.value === void 0) return null;
+		const text = formatLine(Number(props.value));
+		const width = text.length * 7 + 10;
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x: props.x - width / 2,
+			y: props.y - 9,
+			width,
+			height: 18,
+			rx: 2,
+			fill: "#d9d9d9"
+		}), /* @__PURE__ */ jsx("text", {
+			x: props.x,
+			y: props.y + 4,
+			textAnchor: "middle",
+			fill: "#222",
+			fontSize: 12,
+			fontWeight: 700,
+			children: text
+		})] });
+	};
+	const ChartTooltip = ({ active, payload }) => {
+		if (!active || !payload?.length) return null;
+		const point = payload[0].payload;
+		return /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				bgcolor: "#fff",
+				border: "1px solid #ccc",
+				p: 1,
+				fontSize: 13
+			},
+			children: [
+				/* @__PURE__ */ jsx(Typography, {
+					sx: {
+						fontWeight: 700,
+						fontSize: 13
+					},
+					children: point.label
+				}),
+				/* @__PURE__ */ jsxs("div", { children: [
+					barLabel,
+					": ",
+					formatBar(point.bar)
+				] }),
+				point.detail !== null && /* @__PURE__ */ jsxs("div", { children: [
+					detailLabel,
+					": ",
+					formatDetail(point.detail)
+				] }),
+				/* @__PURE__ */ jsxs("div", { children: [
+					lineLabel,
+					": ",
+					point.line === null ? "" : formatLine(point.line)
+				] })
+			]
+		});
+	};
+	const legend = [{
+		label: barLabel,
+		color: barColor
+	}, {
+		label: lineLabel,
+		color: lineColor
+	}];
+	return /* @__PURE__ */ jsxs(Box, {
+		...inspectProps,
+		sx: {
+			minWidth: 0,
+			position: "relative"
+		},
+		children: [/* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				gap: 1.5,
+				mb: 1,
+				fontSize: 14,
+				color: "#555"
+			},
+			children: [legend.map((item) => /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: .5
+				},
+				children: [/* @__PURE__ */ jsx(Box, { sx: {
+					width: 9,
+					height: 9,
+					borderRadius: "50%",
+					bgcolor: item.color
+				} }), item.label]
+			}, item.label)), isLoading && /* @__PURE__ */ jsx(CircularProgress, {
+				size: 14,
+				sx: { ml: "auto" }
+			})]
+		}), error ? /* @__PURE__ */ jsx(Box, {
+			sx: {
+				height,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				color: "error.main"
+			},
+			children: "Erro ao carregar o gráfico"
+		}) : !data.length ? /* @__PURE__ */ jsx(Box, {
+			sx: {
+				height,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				color: "#999"
+			},
+			children: isLoading ? "Carregando…" : "Sem dados para os filtros selecionados"
+		}) : /* @__PURE__ */ jsx(Box, {
+			onClick: clickToFilter ? clearFilter : void 0,
+			sx: {
+				height,
+				opacity: isLoading ? .5 : 1,
+				transition: "opacity .2s"
+			},
+			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(ComposedChart, {
+					data,
+					margin: {
+						top: showLabels ? 48 : 12,
+						right: 8,
+						left: 8
+					},
+					children: [
+						/* @__PURE__ */ jsx(XAxis, {
+							dataKey: "label",
+							interval: 0,
+							tick: {
+								fontSize: 12,
+								fill: "#555"
+							},
+							tickLine: false,
+							axisLine: false
+						}),
+						/* @__PURE__ */ jsx(YAxis, {
+							yAxisId: "bar",
+							hide: true,
+							domain: [0, "auto"]
+						}),
+						/* @__PURE__ */ jsx(YAxis, {
+							yAxisId: "line",
+							hide: true,
+							domain: lineDomain
+						}),
+						/* @__PURE__ */ jsx(Tooltip$1, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
+						/* @__PURE__ */ jsxs(Bar, {
+							yAxisId: "bar",
+							dataKey: "bar",
+							fill: barColor,
+							isAnimationActive: false,
+							onClick: clickToFilter ? (_bar, index, event) => handleBarClick(index, event) : void 0,
+							cursor: clickToFilter ? "pointer" : void 0,
+							children: [clickToFilter && data.map((point) => /* @__PURE__ */ jsx(Cell, { fillOpacity: isDimmed(point) ? .35 : 1 }, String(point.value))), showLabels && /* @__PURE__ */ jsx(LabelList, {
+								dataKey: "bar",
+								content: /* @__PURE__ */ jsx(BarValueLabel, {})
+							})]
+						}),
+						/* @__PURE__ */ jsx(Line, {
+							yAxisId: "line",
+							dataKey: "line",
+							stroke: lineColor,
+							strokeWidth: 2,
+							strokeDasharray: "5 4",
+							dot: {
+								r: 2,
+								fill: lineColor
+							},
+							connectNulls: true,
+							isAnimationActive: false,
+							children: showLabels && /* @__PURE__ */ jsx(LabelList, {
+								dataKey: "line",
+								content: /* @__PURE__ */ jsx(LineValueLabel, {})
+							})
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/client/useLayout.ts
+const noLayouts = () => () => {};
+/**
+* Layout em vigor: o do arquivo ou, com o devtools, o rascunho editado na aba Layout. Registra a
+* parte (`charts`/`filters`) para o devtools saber o que a página renderiza.
+*/
+function useLayout(layout, part, formatters) {
+	const { devtools } = useDashboard();
+	const layouts = devtools?.layouts;
+	const formatterNames = Object.keys(formatters).sort().join(",");
+	useEffect(() => layouts?.register(layout, part, formatterNames ? formatterNames.split(",") : []), [
+		layouts,
+		layout,
+		part,
+		formatterNames
+	]);
+	useSyncExternalStore(layouts?.subscribe ?? noLayouts, () => layouts?.getSnapshot(), () => void 0);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => setMounted(true), []);
+	return mounted && layouts?.draftOf(layout) || layout;
+}
+//#endregion
+//#region src/client/DashboardCanvas.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const FixedCanvasContext = createContext(false);
+/** Dentro de um `<DashboardCanvas>` com tamanho fixo: o grid não troca de colunas pela tela. */
+const useFixedCanvas = () => useContext(FixedCanvasContext);
+/**
+* Tela de tamanho fixo (`layout.canvas`, ex.: 1920×1080): desenha os filhos nessa largura e escala
+* tudo para caber na largura disponível, mantendo a proporção — numa tela menor o dashboard encolhe
+* em vez de reorganizar os gráficos. Sem `canvas` no layout, só renderiza os filhos (responsivo).
+*
+* ```tsx
+* <DashboardCanvas layout={layout}>
+*   <DashboardFilters layout={layout} />
+*   <DashboardCharts layout={layout} />
+* </DashboardCanvas>
+* ```
+*
+* A escala é um `transform`: os gráficos continuam medindo o tamanho de projeto (o Recharts compensa
+* a escala no mouse) e os breakpoints do MUI, que olham a janela, ficam desligados no grid.
+*/
+function DashboardCanvas({ layout, children }) {
+	const { canvas } = useLayout(layout, "canvas", {});
+	const outer = useRef(null);
+	const inner = useRef(null);
+	const [size, setSize] = useState(null);
+	useIsomorphicLayoutEffect(() => {
+		if (!canvas || !outer.current || !inner.current) return;
+		const outerElement = outer.current;
+		const innerElement = inner.current;
+		const measure = () => {
+			const next = {
+				available: outerElement.clientWidth,
+				content: innerElement.offsetHeight
+			};
+			setSize((current) => current?.available === next.available && current.content === next.content ? current : next);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(outerElement);
+		observer.observe(innerElement);
+		return () => observer.disconnect();
+	}, [canvas]);
+	if (!canvas) return /* @__PURE__ */ jsx(Fragment, { children });
+	const scale = size ? size.available / canvas.width : 1;
+	return /* @__PURE__ */ jsx(FixedCanvasContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx(Box, {
+			ref: outer,
+			sx: {
+				width: "100%",
+				overflow: "hidden",
+				height: size ? size.content * scale : void 0
+			},
+			children: /* @__PURE__ */ jsx(Box, {
+				ref: inner,
+				sx: {
+					width: canvas.width,
+					minHeight: canvas.height,
+					transform: `scale(${scale})`,
+					transformOrigin: "0 0",
+					visibility: size ? void 0 : "hidden"
+				},
+				children
+			})
+		})
+	});
+}
+//#endregion
+//#region src/client/DataTable.tsx
+const EMPTY = [];
+function compare(a, b) {
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	return String(a).localeCompare(String(b), "pt-BR", { numeric: true });
+}
+/**
+* Tabela de medidas por dimensões, com total e ordenação pelo cabeçalho. Ex.:
+* `<DataTable dimensions={['navio']} measures={['volTotal', 'custoTotal', 'custoTon']} />`.
+*/
+function DataTable({ dimensions = EMPTY, measures, formatDimensions = {}, showTotal = true, sortBy, sortDirection = "desc", clickToFilter = false, height = 400, queryLabel }) {
+	const { meta } = useDashboard();
+	const name = queryLabel ?? `DataTable · ${dimensions.join(", ") || "total"}`;
+	const firstDimension = dimensions[0];
+	const ignoreFilters = clickToFilter && firstDimension ? [firstDimension] : void 0;
+	const { rows, isLoading, error, inspectProps } = useModelQuery({
+		dimensions,
+		measures,
+		ignoreFilters,
+		label: name
+	});
+	const totals = useModelQuery({
+		measures,
+		ignoreFilters,
+		label: `${name} · total`,
+		skip: !showTotal || !dimensions.length
+	});
+	const filter = useClickFilter(firstDimension, clickToFilter);
+	const [sort, setSort] = useState({
+		by: sortBy,
+		direction: sortDirection
+	});
+	const [configured, setConfigured] = useState([sortBy, sortDirection]);
+	if (configured[0] !== sortBy || configured[1] !== sortDirection) {
+		setConfigured([sortBy, sortDirection]);
+		setSort({
+			by: sortBy,
+			direction: sortDirection
+		});
+	}
+	const sorted = sort.by ? [...rows].sort((a, b) => {
+		const key = sort.by;
+		const [x, y] = [a[key], b[key]];
+		if (x === null || x === void 0) return 1;
+		if (y === null || y === void 0) return -1;
+		return sort.direction === "asc" ? compare(x, y) : compare(y, x);
+	}) : rows;
+	const formats = Object.fromEntries(measures.map((measure) => [measure, measureFormatter(meta, measure, 2)]));
+	const dimensionText = (dimension, value) => value === null || value === void 0 ? "(vazio)" : (formatDimensions[dimension] ?? String)(value);
+	const headerOf = (column) => meta?.dimensions[column]?.label ?? meta?.measures[column]?.label ?? column;
+	const toggleSort = (column) => setSort((current) => current.by === column ? {
+		by: column,
+		direction: current.direction === "asc" ? "desc" : "asc"
+	} : {
+		by: column,
+		direction: measures.includes(column) ? "desc" : "asc"
+	});
+	const totalRow = dimensions.length ? totals.rows[0] : void 0;
+	const placeholder = chartPlaceholder({
+		height: 160,
+		error,
+		isLoading,
+		empty: !rows.length
+	});
+	const header = (column, numeric) => /* @__PURE__ */ jsx(TableCell, {
+		align: numeric ? "right" : "left",
+		sortDirection: sort.by === column ? sort.direction : false,
+		sx: {
+			fontWeight: 700,
+			bgcolor: "#f3f3f3",
+			whiteSpace: "nowrap"
+		},
+		children: /* @__PURE__ */ jsx(TableSortLabel, {
+			active: sort.by === column,
+			direction: sort.by === column ? sort.direction : numeric ? "desc" : "asc",
+			onClick: () => toggleSort(column),
+			children: headerOf(column)
+		})
+	}, column);
+	return /* @__PURE__ */ jsxs(Box, {
+		...inspectProps,
+		sx: {
+			minWidth: 0,
+			position: "relative"
+		},
+		children: [isLoading && /* @__PURE__ */ jsx(CircularProgress, {
+			size: 14,
+			sx: {
+				position: "absolute",
+				top: -22,
+				right: 0
+			}
+		}), placeholder ?? /* @__PURE__ */ jsx(Box, {
+			sx: {
+				maxHeight: height,
+				overflow: "auto",
+				opacity: isLoading ? .5 : 1,
+				transition: "opacity .2s"
+			},
+			children: /* @__PURE__ */ jsxs(Table, {
+				size: "small",
+				stickyHeader: true,
+				sx: { "& td, & th": { fontSize: 13 } },
+				children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [dimensions.map((dimension) => header(dimension, false)), measures.map((measure) => header(measure, true))] }) }), /* @__PURE__ */ jsxs(TableBody, { children: [sorted.map((row) => {
+					const value = firstDimension ? row[firstDimension] : null;
+					const clickable = clickToFilter && value !== null && value !== void 0;
+					return /* @__PURE__ */ jsxs(TableRow, {
+						hover: true,
+						onClick: clickable ? (event) => filter.toggle(value, event) : void 0,
+						selected: clickable && filter.selected.includes(value),
+						sx: {
+							cursor: clickable ? "pointer" : void 0,
+							opacity: clickable && filter.isDimmed(value) ? .5 : 1
+						},
+						children: [dimensions.map((dimension) => /* @__PURE__ */ jsx(TableCell, { children: dimensionText(dimension, row[dimension]) }, dimension)), measures.map((measure) => /* @__PURE__ */ jsx(TableCell, {
+							align: "right",
+							sx: { whiteSpace: "nowrap" },
+							children: formats[measure]?.(row[measure])
+						}, measure))]
+					}, dimensions.map((dimension) => String(row[dimension])).join("\0"));
+				}), totalRow && /* @__PURE__ */ jsxs(TableRow, {
+					sx: { "& td": {
+						fontWeight: 700,
+						position: "sticky",
+						bottom: 0,
+						bgcolor: "#f3f3f3",
+						borderTop: "2px solid #ddd"
+					} },
+					children: [dimensions.map((dimension, index) => /* @__PURE__ */ jsx(TableCell, { children: index === 0 ? "Total" : "" }, dimension)), measures.map((measure) => /* @__PURE__ */ jsx(TableCell, {
+						align: "right",
+						sx: { whiteSpace: "nowrap" },
+						children: formats[measure]?.(totalRow[measure])
+					}, measure))]
+				})] })]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/client/DonutChart.tsx
+const OTHERS = "Outros";
+/**
+* Rosca de uma medida por uma dimensão, com o total no centro e a legenda ao lado (nome, % e valor).
+* Ex.: `<DonutChart dimension="operacao_status" measure="custoTotal" />`.
+*/
+function DonutChart({ dimension, measure, maxSlices = 6, formatDimension = String, clickToFilter = false, height = 300, queryLabel }) {
+	const { meta } = useDashboard();
+	const { rows, isLoading, error, inspectProps } = useModelQuery({
+		dimensions: [dimension],
+		measures: [measure],
+		ignoreFilters: clickToFilter ? [dimension] : void 0,
+		label: queryLabel ?? `DonutChart · ${dimension}`
+	});
+	const filter = useClickFilter(dimension, clickToFilter);
+	const format = measureFormatter(meta, measure, 0);
+	const positive = rows.map((row) => ({
+		value: row[dimension] ?? "",
+		amount: numberOf(row, measure) ?? 0
+	})).filter((item) => item.amount > 0).sort((a, b) => b.amount - a.amount);
+	const limit = Math.min(Math.max(maxSlices, 2), 8);
+	const kept = positive.length > limit ? positive.slice(0, limit - 1) : positive;
+	const rest = positive.slice(kept.length);
+	const slices = kept.map((item, index) => ({
+		key: String(item.value),
+		value: item.value,
+		label: formatDimension(item.value),
+		amount: item.amount,
+		color: seriesColor(index)
+	}));
+	if (rest.length) slices.push({
+		key: `\u0000${OTHERS}`,
+		value: null,
+		label: `${OTHERS} (${rest.length})`,
+		amount: rest.reduce((total, item) => total + item.amount, 0),
+		color: OTHER_COLOR
+	});
+	const total = slices.reduce((sum, slice) => sum + slice.amount, 0);
+	const percent = (amount) => `${formatNumber(amount / total * 100, 1)}%`;
+	const placeholder = chartPlaceholder({
+		height,
+		error,
+		isLoading,
+		empty: !slices.length
+	});
+	const select = (slice, event) => {
+		if (slice?.value !== null && slice?.value !== void 0) filter.toggle(slice.value, event);
+	};
+	const dimmed = (slice) => filter.selected.length > 0 && (slice.value === null || filter.isDimmed(slice.value));
+	const SliceTooltip = ({ active, payload }) => {
+		if (!active || !payload?.length) return null;
+		const slice = payload[0].payload;
+		return /* @__PURE__ */ jsxs(TooltipBox, {
+			title: slice.label,
+			children: [
+				format(slice.amount),
+				" · ",
+				percent(slice.amount)
+			]
+		});
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		...inspectProps,
+		sx: {
+			minWidth: 0,
+			position: "relative"
+		},
+		children: placeholder ?? /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				height,
+				display: "flex",
+				alignItems: "center",
+				gap: 2,
+				opacity: isLoading ? .5 : 1,
+				transition: "opacity .2s"
+			},
+			children: [/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					position: "relative",
+					height: "100%",
+					flex: "0 0 50%",
+					minWidth: 140
+				},
+				children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Tooltip$1, { content: /* @__PURE__ */ jsx(SliceTooltip, {}) }), /* @__PURE__ */ jsx(Pie, {
+						data: slices,
+						dataKey: "amount",
+						nameKey: "label",
+						innerRadius: "62%",
+						outerRadius: "92%",
+						startAngle: 90,
+						endAngle: -270,
+						stroke: "#fff",
+						strokeWidth: 2,
+						isAnimationActive: false,
+						onClick: (_, index, event) => select(slices[index], event),
+						cursor: clickToFilter ? "pointer" : void 0,
+						children: slices.map((slice) => /* @__PURE__ */ jsx(Cell, {
+							fill: slice.color,
+							fillOpacity: dimmed(slice) ? .35 : 1
+						}, slice.key))
+					})] })
+				}), /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						position: "absolute",
+						inset: 0,
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						justifyContent: "center",
+						pointerEvents: "none",
+						textAlign: "center"
+					},
+					children: [/* @__PURE__ */ jsx(Box, {
+						sx: {
+							fontSize: 12,
+							color: "#777"
+						},
+						children: "Total"
+					}), /* @__PURE__ */ jsx(Box, {
+						sx: {
+							fontSize: 15,
+							fontWeight: 700,
+							color: "#333"
+						},
+						children: format(total)
+					})]
+				})]
+			}), /* @__PURE__ */ jsx(Box, {
+				component: "ul",
+				sx: {
+					listStyle: "none",
+					m: 0,
+					p: 0,
+					minWidth: 0,
+					flex: 1,
+					overflow: "auto",
+					maxHeight: "100%"
+				},
+				children: slices.map((slice) => /* @__PURE__ */ jsxs(Box, {
+					component: "li",
+					onClick: (event) => select(slice, event),
+					sx: {
+						display: "grid",
+						gridTemplateColumns: "10px minmax(0, 1fr) auto",
+						alignItems: "center",
+						columnGap: .75,
+						py: .5,
+						fontSize: 13,
+						color: "#333",
+						opacity: dimmed(slice) ? .45 : 1,
+						cursor: clickToFilter && slice.value !== null ? "pointer" : void 0
+					},
+					children: [
+						/* @__PURE__ */ jsx(Box, { sx: {
+							width: 10,
+							height: 10,
+							borderRadius: "50%",
+							bgcolor: slice.color
+						} }),
+						/* @__PURE__ */ jsx(Box, {
+							sx: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: slice.label
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							sx: {
+								fontWeight: 700,
+								textAlign: "right"
+							},
+							children: percent(slice.amount)
+						}),
+						/* @__PURE__ */ jsx(Box, {}),
+						/* @__PURE__ */ jsx(Box, {
+							sx: {
+								gridColumn: "2 / 4",
+								fontSize: 12,
+								color: "#777"
+							},
+							children: format(slice.amount)
+						})
+					]
+				}, slice.key))
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/client/KpiCard.tsx
+/**
+* Card com o total de uma medida (e, opcionalmente, uma segunda medida embaixo). Uma consulta sem
+* dimensões: razões (custo/t) saem do total, não de uma média. Ex.:
+* `<KpiCard label="Custo total" measure="custoTotal" secondary="custoTon" />`.
+*/
+function KpiCard({ measure, label, secondary, secondaryLabel, queryLabel }) {
+	const { meta } = useDashboard();
+	const { rows, isLoading, error, inspectProps } = useModelQuery({
+		measures: secondary ? [measure, secondary] : [measure],
+		label: queryLabel ?? `KpiCard · ${measure}`
+	});
+	const row = rows[0];
+	const value = row ? numberOf(row, measure) : null;
+	const extra = row && secondary ? numberOf(row, secondary) : null;
+	return /* @__PURE__ */ jsxs(Box, {
+		...inspectProps,
+		sx: {
+			minWidth: 0,
+			position: "relative"
+		},
+		children: [
+			label && /* @__PURE__ */ jsx(Box, {
+				sx: {
+					fontSize: 13,
+					color: "#666",
+					mb: .5
+				},
+				children: label
+			}),
+			isLoading && /* @__PURE__ */ jsx(CircularProgress, {
+				size: 12,
+				sx: {
+					position: "absolute",
+					top: 0,
+					right: 0
+				}
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				sx: {
+					fontSize: 28,
+					fontWeight: 700,
+					lineHeight: 1.2,
+					color: error ? "error.main" : "#333",
+					fontVariantNumeric: "tabular-nums",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					opacity: isLoading ? .5 : 1,
+					transition: "opacity .2s"
+				},
+				children: error ? "Erro" : value === null ? "—" : measureFormatter(meta, measure, 0)(value)
+			}),
+			secondary && /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					fontSize: 13,
+					color: "#666",
+					mt: .25,
+					minHeight: 20
+				},
+				children: [
+					secondaryLabel ?? meta?.measures[secondary]?.label ?? secondary,
+					":",
+					" ",
+					/* @__PURE__ */ jsx(Box, {
+						component: "span",
+						sx: {
+							fontWeight: 600,
+							color: "#444"
+						},
+						children: extra === null ? "—" : measureFormatter(meta, secondary, 2)(extra)
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/client/DashboardCharts.tsx
+function DefaultPanel({ title, children }) {
+	return /* @__PURE__ */ jsxs(Paper, {
+		variant: "outlined",
+		sx: {
+			p: 1.5,
+			minWidth: 0,
+			height: "100%"
+		},
+		children: [title && /* @__PURE__ */ jsx(Typography, {
+			sx: {
+				fontWeight: 700,
+				mb: 1
+			},
+			children: title
+		}), children]
+	});
+}
+/**
+* Renderiza os gráficos de um layout declarativo num grid de 12 colunas (no celular, um por linha;
+* dentro de um `<DashboardCanvas>` de tamanho fixo, sempre as 12). Em desenvolvimento, a aba
+* Layout do devtools edita esse layout ao vivo (rascunho) e grava o JSON de volta.
+*
+* ```tsx
+* import layout from '@/dashboard/layouts/analiseCusto.json'
+* <DashboardCharts layout={layout as ChartsLayout} formatters={{ nomeMes }} panel={Panel} />
+* ```
+*/
+function DashboardCharts({ layout, formatters = {}, panel: Panel = DefaultPanel, gap = 1.5 }) {
+	const { charts } = useLayout(layout, "charts", formatters);
+	const fixed = useFixedCanvas();
+	const columns = `repeat(12, minmax(0, 1fr))`;
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			display: "grid",
+			gap,
+			gridTemplateColumns: fixed ? columns : {
+				xs: "1fr",
+				lg: columns
+			}
+		},
+		children: charts.map((chart) => /* @__PURE__ */ jsx(Box, {
+			[LAYOUT_ITEM_ATTRIBUTE]: layoutItemKey(layout.id, {
+				kind: "chart",
+				key: chart.id
+			}),
+			sx: {
+				minWidth: 0,
+				gridColumn: fixed ? `span ${chart.span ?? 12}` : { lg: `span ${chart.span ?? 12}` }
+			},
+			children: /* @__PURE__ */ jsx(Panel, {
+				title: chart.title,
+				chart,
+				children: /* @__PURE__ */ jsx(Chart, {
+					chart,
+					formatters
+				})
+			})
+		}, chart.id))
+	});
+}
+function Chart({ chart, formatters }) {
+	const queryLabel = `${chart.title || chart.id} · ${chart.type}`;
+	const formatter = (name) => name ? formatters[name] : void 0;
+	switch (chart.type) {
+		case "kpi": {
+			const { id, type, title, span, ...props } = chart;
+			return /* @__PURE__ */ jsx(KpiCard, {
+				...props,
+				queryLabel
+			});
+		}
+		case "combo": {
+			const { id, type, title, span, formatDimension, ...props } = chart;
+			return /* @__PURE__ */ jsx(ComboChart, {
+				...props,
+				queryLabel,
+				formatDimension: formatter(formatDimension)
+			});
+		}
+		case "bar": {
+			const { id, type, title, span, formatDimension, ...props } = chart;
+			return /* @__PURE__ */ jsx(BarChart, {
+				...props,
+				queryLabel,
+				formatDimension: formatter(formatDimension)
+			});
+		}
+		case "donut": {
+			const { id, type, title, span, formatDimension, ...props } = chart;
+			return /* @__PURE__ */ jsx(DonutChart, {
+				...props,
+				queryLabel,
+				formatDimension: formatter(formatDimension)
+			});
+		}
+		case "table": {
+			const { id, type, title, span, formatDimensions, ...props } = chart;
+			const resolved = {};
+			for (const [dimension, name] of Object.entries(formatDimensions ?? {})) {
+				const format = formatter(name);
+				if (format) resolved[dimension] = format;
+			}
+			return /* @__PURE__ */ jsx(DataTable, {
+				...props,
+				queryLabel,
+				formatDimensions: resolved
+			});
+		}
+		default: return /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				color: "error.main",
+				p: 2
+			},
+			children: ["Tipo de gráfico desconhecido: ", String(chart.type)]
+		});
+	}
+}
+//#endregion
+//#region src/client/FilterSelect.tsx
+/**
+* Filtro de múltipla escolha de uma dimensão. As opções vêm do próprio modelo e respeitam os
+* DEMAIS filtros (filtro cruzado): com Mês = Janeiro, o filtro de navio só lista quem atracou em
+* janeiro. Nada selecionado = "Todos".
+*/
+function FilterSelect({ dimension, label, formatLabel = String, width = 200 }) {
+	const { filters, setFilter, meta } = useDashboard();
+	label ??= meta?.dimensions[dimension]?.label ?? dimension;
+	const { rows, inspectProps } = useModelQuery({
+		dimensions: [dimension],
+		ignoreFilters: [dimension],
+		label: `FilterSelect · ${dimension}`
+	});
+	const selected = filters[dimension] ?? [];
+	const options = rows.map((row) => row[dimension]).filter((value) => value !== null && value !== "");
+	for (const value of selected) if (!options.includes(value)) options.push(value);
+	return /* @__PURE__ */ jsxs(FormControl, {
+		...inspectProps,
+		size: "small",
+		sx: { width },
+		children: [/* @__PURE__ */ jsx(InputLabel, {
+			shrink: true,
+			children: label
+		}), /* @__PURE__ */ jsx(Select, {
+			multiple: true,
+			displayEmpty: true,
+			value: selected,
+			onChange: (event) => setFilter(dimension, event.target.value),
+			input: /* @__PURE__ */ jsx(OutlinedInput, {
+				notched: true,
+				label
+			}),
+			renderValue: (values) => values.length ? values.map(formatLabel).join(", ") : "Todos",
+			MenuProps: { slotProps: { paper: { sx: { maxHeight: 360 } } } },
+			sx: { bgcolor: "#fff" },
+			children: options.map((option) => /* @__PURE__ */ jsxs(MenuItem, {
+				value: option,
+				dense: true,
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					size: "small",
+					checked: selected.includes(option),
+					sx: {
+						p: .5,
+						mr: 1
+					}
+				}), /* @__PURE__ */ jsx(ListItemText, { primary: formatLabel(option) })]
+			}, option))
+		})]
+	});
+}
+//#endregion
+//#region src/client/DashboardFilters.tsx
+/**
+* Filtros (slicers) declarados em `layout.filters`, na ordem. Em desenvolvimento, a aba Layout do
+* devtools adiciona, remove, reordena e edita os filtros ao vivo.
+*/
+function DashboardFilters({ layout, formatters = {}, gap = 2 }) {
+	const { filters = [] } = useLayout(layout, "filters", formatters);
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap
+		},
+		children: filters.map((filter) => /* @__PURE__ */ jsx(Box, {
+			[LAYOUT_ITEM_ATTRIBUTE]: layoutItemKey(layout.id, {
+				kind: "filter",
+				key: filter.dimension
+			}),
+			children: /* @__PURE__ */ jsx(FilterSelect, {
+				dimension: filter.dimension,
+				label: filter.label,
+				width: filter.width,
+				formatLabel: filter.formatLabel ? formatters[filter.formatLabel] : void 0
+			})
+		}, filter.dimension))
+	});
+}
+//#endregion
+export { BarChart, ComboChart, DashboardCanvas, DashboardCharts, DashboardFilters, DashboardProvider, DataTable, DonutChart, FilterSelect, INSPECT_ATTRIBUTE, KpiCard, ModelDictionary, OTHER_COLOR, SERIES_COLORS, formatCurrency, formatMeasure, formatNumber, measureFormatter, useDashboard, useModelQuery };
+
+//# sourceMappingURL=index.js.map