@bonnard/react 0.1.1

package/dist/dashboard.js

@@ -0,0 +1,935 @@
+import { a as BarChart, i as LineChart, n as PieChart, o as BigValue, r as AreaChart, t as DataTable, u as useBonnard } from "./data-table-DQKxzbS3.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import DOMPurify from "isomorphic-dompurify";
+import matter from "gray-matter";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import { SKIP, visit } from "unist-util-visit";
+import yaml from "yaml";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/hooks/use-dashboard.ts
+function useDashboard(slug) {
+	const { client } = useBonnard();
+	const [dashboard, setDashboard] = useState(void 0);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(void 0);
+	useEffect(() => {
+		let cancelled = false;
+		setLoading(true);
+		setError(void 0);
+		client.getDashboard(slug).then((result) => {
+			if (!cancelled) {
+				setDashboard(result.dashboard);
+				setLoading(false);
+			}
+		}, (err) => {
+			if (!cancelled) {
+				setError(err instanceof Error ? err.message : "Failed to load dashboard");
+				setLoading(false);
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [client, slug]);
+	return {
+		dashboard,
+		loading,
+		error
+	};
+}
+
+//#endregion
+//#region src/dashboard/parser.ts
+const VALID_QUERY_NAME = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+const VALID_COMPONENTS = new Set([
+	"BigValue",
+	"LineChart",
+	"BarChart",
+	"AreaChart",
+	"DataTable",
+	"PieChart",
+	"DateRange",
+	"Dropdown"
+]);
+/** Input component types that get hoisted into the inputs bar */
+const INPUT_COMPONENTS = new Set(["DateRange", "Dropdown"]);
+/**
+* Regex to extract individual props from an attributes string.
+* Matches:
+*   data={name}     → key="data", value from group 2 (curly)
+*   x="field"       → key="x",    value from group 3 (double-quoted)
+*   x='field'       → key="x",    value from group 4 (single-quoted)
+*   horizontal      → key="horizontal", value undefined (boolean shorthand)
+*/
+const PROP_RE = /(\w+)(?:=\{(\w+)\}|="([^"]*)"|='([^']*)')?/g;
+/**
+* Parse a dashboard markdown string into structured output.
+*
+* Collects all validation errors and reports them together rather than
+* failing on the first error (pattern from Evidence.dev).
+*/
+function parseDashboard(markdown) {
+	const errors = [];
+	const { data: rawFrontmatter, content: bodyWithoutFrontmatter } = matter(markdown);
+	const frontmatter = {
+		title: typeof rawFrontmatter.title === "string" ? rawFrontmatter.title : "Untitled Dashboard",
+		description: typeof rawFrontmatter.description === "string" ? rawFrontmatter.description : void 0
+	};
+	const queries = /* @__PURE__ */ new Map();
+	const tree = unified().use(remarkParse).parse(bodyWithoutFrontmatter);
+	const nodesToRemove = [];
+	visit(tree, "code", (node, index, parent) => {
+		if (node.lang !== "query") return;
+		const name = node.meta?.trim();
+		if (!name) {
+			errors.push("Query block must have a name: ```query my_query_name");
+			return;
+		}
+		if (!VALID_QUERY_NAME.test(name)) {
+			errors.push(`Invalid query name "${name}": must be a valid identifier (letters, numbers, _, $)`);
+			return;
+		}
+		if (queries.has(name)) {
+			errors.push(`Duplicate query name "${name}"`);
+			return;
+		}
+		try {
+			const options = yaml.parse(node.value);
+			if (!options || !options.cube) {
+				errors.push(`Query "${name}" must specify a cube`);
+				return;
+			}
+			queries.set(name, options);
+		} catch (e) {
+			errors.push(`Query "${name}" has invalid YAML: ${e instanceof Error ? e.message : String(e)}`);
+			return;
+		}
+		if (parent && typeof index === "number") nodesToRemove.push({
+			parent,
+			index
+		});
+		return SKIP;
+	});
+	for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+		const { parent, index } = nodesToRemove[i];
+		parent.children.splice(index, 1);
+	}
+	if (errors.length > 0) throw new Error(`Dashboard parse errors:\n- ${errors.join("\n- ")}`);
+	const htmlResult = unified().use(remarkRehype, { allowDangerousHtml: true }).use(rehypeStringify, { allowDangerousHtml: true }).stringify(unified().use(remarkRehype, { allowDangerousHtml: true }).runSync(tree));
+	const { sections, inputs } = splitIntoSections(String(htmlResult));
+	return {
+		frontmatter,
+		queries,
+		inputs,
+		sections
+	};
+}
+/**
+* Split HTML string into sections of HTML content, component tags, and grid layouts.
+* Input components (DateRange, Dropdown) are hoisted into a separate inputs array.
+*/
+function splitIntoSections(html) {
+	const sections = [];
+	const inputs = [];
+	let lastIndex = 0;
+	const COMBINED_RE = /<Grid\s+([\s\S]*?)>([\s\S]*?)<\/Grid>|<(BigValue|LineChart|BarChart|AreaChart|DataTable|PieChart|DateRange|Dropdown)\s+([\s\S]*?)\/>/g;
+	COMBINED_RE.lastIndex = 0;
+	let match;
+	while ((match = COMBINED_RE.exec(html)) !== null) {
+		const before = html.slice(lastIndex, match.index).trim();
+		if (before) sections.push({
+			kind: "html",
+			content: before
+		});
+		if (match[1] !== void 0) {
+			const props = parseProps(match[1]);
+			const inner = splitIntoSections(match[2]);
+			inputs.push(...inner.inputs);
+			sections.push({
+				kind: "grid",
+				props,
+				children: inner.sections
+			});
+		} else {
+			const component = parseComponentTag(match[3], match[4]);
+			if (component) if (INPUT_COMPONENTS.has(component.type)) inputs.push(component);
+			else sections.push({
+				kind: "component",
+				component
+			});
+		}
+		lastIndex = match.index + match[0].length;
+	}
+	const remaining = html.slice(lastIndex).trim();
+	if (remaining) sections.push({
+		kind: "html",
+		content: remaining
+	});
+	return {
+		sections,
+		inputs
+	};
+}
+/**
+* Parse an attributes string into a props Record.
+*/
+function parseProps(attrsString) {
+	const props = {};
+	PROP_RE.lastIndex = 0;
+	let propMatch;
+	while ((propMatch = PROP_RE.exec(attrsString)) !== null) {
+		const key = propMatch[1];
+		props[key] = propMatch[2] ?? propMatch[3] ?? propMatch[4] ?? "true";
+	}
+	return props;
+}
+/**
+* Parse component attributes string into a ComponentTag.
+*/
+function parseComponentTag(name, attrsString) {
+	if (!VALID_COMPONENTS.has(name)) return null;
+	return {
+		type: name,
+		props: parseProps(attrsString)
+	};
+}
+
+//#endregion
+//#region src/lib/date-presets.ts
+function fmt(d) {
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function today() {
+	const d = /* @__PURE__ */ new Date();
+	return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+const PRESETS = {
+	"last-7-days": {
+		label: "Last 7 Days",
+		getRange: () => {
+			const end = today();
+			const start = new Date(end);
+			start.setDate(start.getDate() - 6);
+			return [fmt(start), fmt(end)];
+		}
+	},
+	"last-30-days": {
+		label: "Last 30 Days",
+		getRange: () => {
+			const end = today();
+			const start = new Date(end);
+			start.setDate(start.getDate() - 29);
+			return [fmt(start), fmt(end)];
+		}
+	},
+	"last-3-months": {
+		label: "Last 3 Months",
+		getRange: () => {
+			const end = today();
+			const start = new Date(end);
+			start.setMonth(start.getMonth() - 3);
+			return [fmt(start), fmt(end)];
+		}
+	},
+	"last-6-months": {
+		label: "Last 6 Months",
+		getRange: () => {
+			const end = today();
+			const start = new Date(end);
+			start.setMonth(start.getMonth() - 6);
+			return [fmt(start), fmt(end)];
+		}
+	},
+	"last-12-months": {
+		label: "Last 12 Months",
+		getRange: () => {
+			const end = today();
+			const start = new Date(end);
+			start.setFullYear(start.getFullYear() - 1);
+			return [fmt(start), fmt(end)];
+		}
+	},
+	"month-to-date": {
+		label: "Month to Date",
+		getRange: () => {
+			const end = today();
+			return [fmt(new Date(end.getFullYear(), end.getMonth(), 1)), fmt(end)];
+		}
+	},
+	"year-to-date": {
+		label: "Year to Date",
+		getRange: () => {
+			const end = today();
+			return [fmt(new Date(end.getFullYear(), 0, 1)), fmt(end)];
+		}
+	},
+	"last-year": {
+		label: "Last Year",
+		getRange: () => {
+			const end = today();
+			const start = new Date(end.getFullYear() - 1, 0, 1);
+			const yearEnd = new Date(end.getFullYear() - 1, 11, 31);
+			return [fmt(start), fmt(yearEnd)];
+		}
+	},
+	"all-time": {
+		label: "All Time",
+		getRange: () => ["2000-01-01", fmt(today())]
+	}
+};
+/** Resolve a preset key to a concrete [start, end] date range */
+function getPresetRange(preset) {
+	const def = PRESETS[preset];
+	if (!def) throw new Error(`Unknown date preset: ${preset}`);
+	return def.getRange();
+}
+/** Ordered array of preset options for UI rendering */
+const PRESET_OPTIONS = [
+	{
+		key: "last-7-days",
+		label: "Last 7 Days"
+	},
+	{
+		key: "last-30-days",
+		label: "Last 30 Days"
+	},
+	{
+		key: "last-3-months",
+		label: "Last 3 Months"
+	},
+	{
+		key: "last-6-months",
+		label: "Last 6 Months"
+	},
+	{
+		key: "last-12-months",
+		label: "Last 12 Months"
+	},
+	{
+		key: "month-to-date",
+		label: "Month to Date"
+	},
+	{
+		key: "year-to-date",
+		label: "Year to Date"
+	},
+	{
+		key: "last-year",
+		label: "Last Year"
+	},
+	{
+		key: "all-time",
+		label: "All Time"
+	}
+];
+
+//#endregion
+//#region src/lib/apply-inputs.ts
+/**
+* Apply all active inputs to a single query's options.
+*
+* - DateRange: overrides timeDimension.dateRange on targeted queries
+* - Dropdown: adds/replaces a filter on the specified dimension
+*/
+function applyInputsToQuery(queryName, baseOptions, inputTags, inputsState) {
+	let options = structuredClone(baseOptions);
+	for (const input of inputTags) {
+		const { type, props } = input;
+		const inputName = props.name;
+		if (!inputName) continue;
+		const state = inputsState[inputName];
+		if (state === void 0) continue;
+		if (type === "DateRange") options = applyDateRange(queryName, options, props, state);
+		else if (type === "Dropdown") options = applyDropdown(queryName, options, props, state);
+	}
+	return options;
+}
+function applyDateRange(queryName, options, props, state) {
+	if (!options.timeDimension) return options;
+	if (props.queries) {
+		if (!props.queries.split(",").map((s) => s.trim()).includes(queryName)) return options;
+	}
+	if (!state) return options;
+	options.timeDimension = {
+		...options.timeDimension,
+		dateRange: state.range
+	};
+	return options;
+}
+function applyDropdown(queryName, options, props, state) {
+	const dimension = props.dimension;
+	if (!dimension) return options;
+	if (!props.queries) return options;
+	const targets = props.queries.split(",").map((s) => s.trim());
+	const dataQuery = props.data;
+	if (dataQuery && dataQuery === queryName) return options;
+	if (!targets.includes(queryName)) return options;
+	if (state === null || state === "") {
+		if (options.filters) {
+			options.filters = options.filters.filter((f) => f.dimension !== dimension);
+			if (options.filters.length === 0) delete options.filters;
+		}
+		return options;
+	}
+	const newFilter = {
+		dimension,
+		operator: "equals",
+		values: [state]
+	};
+	if (!options.filters) options.filters = [newFilter];
+	else {
+		const idx = options.filters.findIndex((f) => f.dimension === dimension);
+		if (idx >= 0) options.filters[idx] = newFilter;
+		else options.filters.push(newFilter);
+	}
+	return options;
+}
+/**
+* Build the initial inputsState from input tags (using their defaults).
+*/
+function buildInitialInputsState(inputs) {
+	const state = {};
+	for (const input of inputs) {
+		const { type, props } = input;
+		const name = props.name;
+		if (!name) continue;
+		if (type === "DateRange") {
+			const preset = props.default || "last-6-months";
+			state[name] = {
+				preset,
+				range: getPresetRange(preset)
+			};
+		} else if (type === "Dropdown") state[name] = props.default || null;
+	}
+	return state;
+}
+
+//#endregion
+//#region src/dashboard/query-load.tsx
+/**
+* QueryLoad — wraps chart components to handle loading / error / empty states.
+*/
+function QueryLoad({ data, loading, error, children }) {
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			height: 200,
+			fontSize: 14,
+			color: "var(--bon-text-muted)"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8
+			},
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				width: 16,
+				height: 16,
+				borderRadius: "50%",
+				border: "2px solid var(--bon-spinner-color)",
+				borderTopColor: "transparent",
+				animation: "bonnard-spin 0.6s linear infinite"
+			} }), "Loading data…"]
+		})
+	});
+	if (error) return /* @__PURE__ */ jsxs("div", {
+		style: {
+			borderRadius: "var(--bon-radius)",
+			border: "1px solid var(--bon-border-error)",
+			backgroundColor: "var(--bon-bg-error)",
+			padding: 16,
+			fontSize: 14,
+			color: "var(--bon-text-error)"
+		},
+		children: ["Query error: ", error]
+	});
+	if (!data || data.length === 0) return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			height: 200,
+			fontSize: 14,
+			color: "var(--bon-text-muted)"
+		},
+		children: "No data available"
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: children(data) });
+}
+
+//#endregion
+//#region src/dashboard/inputs/date-range-input.tsx
+function DateRangeInput({ name, label, value, onInputChange }) {
+	const handleChange = (e) => {
+		const preset = e.target.value;
+		onInputChange(name, {
+			preset,
+			range: getPresetRange(preset)
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 4
+		},
+		children: [label && /* @__PURE__ */ jsx("label", {
+			style: {
+				fontSize: 12,
+				fontWeight: 500,
+				color: "var(--bon-text-muted)"
+			},
+			children: label
+		}), /* @__PURE__ */ jsx("select", {
+			value: value.preset,
+			onChange: handleChange,
+			style: {
+				width: 180,
+				height: 32,
+				fontSize: 14,
+				padding: "0 8px",
+				borderRadius: "var(--bon-radius)",
+				border: "1px solid var(--bon-input-border)",
+				backgroundColor: "var(--bon-input-bg)",
+				color: "var(--bon-text)",
+				cursor: "pointer"
+			},
+			children: PRESET_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", {
+				value: opt.key,
+				children: opt.label
+			}, opt.key))
+		})]
+	});
+}
+
+//#endregion
+//#region src/dashboard/inputs/dropdown-input.tsx
+function DropdownInput({ name, dimension, label, data, value, onInputChange }) {
+	const options = Array.from(new Set(data.map((row) => String(row[dimension] ?? "")).filter(Boolean))).sort();
+	const handleChange = (e) => {
+		const val = e.target.value;
+		onInputChange(name, val === "" ? null : val);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 4
+		},
+		children: [label && /* @__PURE__ */ jsx("label", {
+			style: {
+				fontSize: 12,
+				fontWeight: 500,
+				color: "var(--bon-text-muted)"
+			},
+			children: label
+		}), /* @__PURE__ */ jsxs("select", {
+			value: value ?? "",
+			onChange: handleChange,
+			style: {
+				width: 180,
+				height: 32,
+				fontSize: 14,
+				padding: "0 8px",
+				borderRadius: "var(--bon-radius)",
+				border: "1px solid var(--bon-input-border)",
+				backgroundColor: "var(--bon-input-bg)",
+				color: "var(--bon-text)",
+				cursor: "pointer"
+			},
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: "All"
+			}), options.map((opt) => /* @__PURE__ */ jsx("option", {
+				value: opt,
+				children: opt
+			}, opt))]
+		})]
+	});
+}
+
+//#endregion
+//#region src/dashboard/dashboard-viewer.tsx
+const GRID_COL_STYLES = {
+	"1": { gridTemplateColumns: "1fr" },
+	"2": { gridTemplateColumns: "repeat(2, 1fr)" },
+	"3": { gridTemplateColumns: "repeat(3, 1fr)" },
+	"4": { gridTemplateColumns: "repeat(4, 1fr)" },
+	"5": { gridTemplateColumns: "repeat(5, 1fr)" },
+	"6": { gridTemplateColumns: "repeat(6, 1fr)" }
+};
+/**
+* DashboardViewer — parses dashboard markdown and renders it.
+*/
+function DashboardViewer({ content, onInputsChange }) {
+	const { client } = useBonnard();
+	const [parsed, setParsed] = useState(null);
+	const [parseError, setParseError] = useState(null);
+	const [queryStates, setQueryStates] = useState(/* @__PURE__ */ new Map());
+	const [inputsState, setInputsState] = useState({});
+	const isInitialRender = useRef(true);
+	useEffect(() => {
+		try {
+			const result = parseDashboard(content);
+			setParsed(result);
+			setParseError(null);
+			setInputsState(buildInitialInputsState(result.inputs));
+			isInitialRender.current = true;
+		} catch (err) {
+			setParseError(err instanceof Error ? err.message : "Failed to parse dashboard");
+			setParsed(null);
+		}
+	}, [content]);
+	const executeQueries = useCallback(async (queries, inputs, currentInputsState, queryNames) => {
+		const namesToExecute = queryNames ?? Array.from(queries.keys());
+		setQueryStates((prev) => {
+			const next = new Map(prev);
+			for (const name of namesToExecute) next.set(name, { loading: true });
+			return next;
+		});
+		await Promise.all(namesToExecute.map(async (name) => {
+			const baseOptions = queries.get(name);
+			if (!baseOptions) return;
+			const options = applyInputsToQuery(name, baseOptions, inputs, currentInputsState);
+			try {
+				const result = await client.query(options);
+				setQueryStates((prev) => {
+					const next = new Map(prev);
+					next.set(name, {
+						loading: false,
+						data: result.data,
+						limit: options.limit ?? null
+					});
+					return next;
+				});
+			} catch (err) {
+				setQueryStates((prev) => {
+					const next = new Map(prev);
+					next.set(name, {
+						loading: false,
+						error: err instanceof Error ? err.message : "Query failed"
+					});
+					return next;
+				});
+			}
+		}));
+	}, [client]);
+	useEffect(() => {
+		if (parsed && parsed.queries.size > 0 && isInitialRender.current) {
+			isInitialRender.current = false;
+			executeQueries(parsed.queries, parsed.inputs, inputsState);
+		}
+	}, [
+		parsed,
+		inputsState,
+		executeQueries
+	]);
+	const handleInputChange = useCallback((inputName, value) => {
+		if (!parsed) return;
+		setInputsState((prev) => {
+			const next = {
+				...prev,
+				[inputName]: value
+			};
+			const changedInput = parsed.inputs.find((i) => i.props.name === inputName);
+			if (!changedInput) return next;
+			let affectedQueries;
+			if (changedInput.type === "DateRange") if (changedInput.props.queries) affectedQueries = changedInput.props.queries.split(",").map((s) => s.trim());
+			else affectedQueries = Array.from(parsed.queries.entries()).filter(([, opts]) => opts.timeDimension).map(([name]) => name);
+			else affectedQueries = changedInput.props.queries ? changedInput.props.queries.split(",").map((s) => s.trim()) : [];
+			if (affectedQueries.length > 0) executeQueries(parsed.queries, parsed.inputs, next, affectedQueries);
+			return next;
+		});
+	}, [parsed, executeQueries]);
+	if (parseError) return /* @__PURE__ */ jsxs("div", {
+		style: {
+			borderRadius: "var(--bon-radius)",
+			border: "1px solid var(--bon-border-error)",
+			backgroundColor: "var(--bon-bg-error)",
+			padding: 16
+		},
+		children: [/* @__PURE__ */ jsx("h3", {
+			style: {
+				fontWeight: 500,
+				color: "var(--bon-text-error)",
+				marginBottom: 4,
+				margin: 0
+			},
+			children: "Dashboard Parse Error"
+		}), /* @__PURE__ */ jsx("pre", {
+			style: {
+				fontSize: 14,
+				color: "var(--bon-text-error)",
+				whiteSpace: "pre-wrap",
+				margin: 0
+			},
+			children: parseError
+		})]
+	});
+	if (!parsed) return null;
+	const groupedSections = groupConsecutiveBigValues(parsed.sections);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 16
+		},
+		children: [parsed.inputs.length > 0 && /* @__PURE__ */ jsx(InputsBar, {
+			inputs: parsed.inputs,
+			inputsState,
+			queryStates,
+			onInputChange: handleInputChange
+		}), groupedSections.map((section, i) => /* @__PURE__ */ jsx(SectionRenderer, {
+			section,
+			queryStates
+		}, i))]
+	});
+}
+function InputsBar({ inputs, inputsState, queryStates, onInputChange }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "flex-end",
+			gap: 16,
+			borderRadius: "var(--bon-radius)",
+			backgroundColor: "var(--bon-bg-muted)",
+			padding: "12px 16px"
+		},
+		children: inputs.map((input) => {
+			const { type, props } = input;
+			const name = props.name;
+			if (!name) return null;
+			if (type === "DateRange") {
+				const value = inputsState[name];
+				if (!value) return null;
+				return /* @__PURE__ */ jsx(DateRangeInput, {
+					name,
+					label: props.label,
+					value,
+					onInputChange
+				}, name);
+			}
+			if (type === "Dropdown") {
+				const dataRef = props.data;
+				const data = dataRef ? queryStates.get(dataRef)?.data ?? [] : [];
+				return /* @__PURE__ */ jsx(DropdownInput, {
+					name,
+					dimension: props.dimension,
+					label: props.label,
+					data,
+					value: inputsState[name] ?? null,
+					onInputChange
+				}, name);
+			}
+			return null;
+		})
+	});
+}
+function groupConsecutiveBigValues(sections) {
+	const result = [];
+	let bigValueRun = [];
+	const flushRun = () => {
+		if (bigValueRun.length > 1) result.push({
+			kind: "grid",
+			props: { cols: String(Math.min(bigValueRun.length, 4)) },
+			children: bigValueRun
+		});
+		else if (bigValueRun.length === 1) result.push(bigValueRun[0]);
+		bigValueRun = [];
+	};
+	for (const section of sections) if (section.kind === "component" && section.component.type === "BigValue") bigValueRun.push(section);
+	else {
+		flushRun();
+		result.push(section);
+	}
+	flushRun();
+	return result;
+}
+function SectionRenderer({ section, queryStates }) {
+	if (section.kind === "html") return /* @__PURE__ */ jsx("div", {
+		style: {
+			color: "var(--bon-text)",
+			fontSize: 14,
+			lineHeight: 1.6
+		},
+		dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(section.content) }
+	});
+	if (section.kind === "grid") return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			gap: 16,
+			...GRID_COL_STYLES[section.props.cols || "2"] || GRID_COL_STYLES["2"]
+		},
+		children: section.children.map((child, i) => /* @__PURE__ */ jsx(SectionRenderer, {
+			section: child,
+			queryStates
+		}, i))
+	});
+	return /* @__PURE__ */ jsx(ComponentRenderer, {
+		component: section.component,
+		queryStates
+	});
+}
+function ComponentRenderer({ component, queryStates }) {
+	const { type, props } = component;
+	const dataRef = props.data;
+	if (!dataRef) return /* @__PURE__ */ jsxs("div", {
+		style: {
+			borderRadius: "var(--bon-radius)",
+			border: "1px solid var(--bon-border-warn)",
+			backgroundColor: "var(--bon-bg-warn)",
+			padding: 12,
+			fontSize: 14,
+			color: "var(--bon-text-warn)"
+		},
+		children: [
+			"Component <",
+			type,
+			"> is missing a \"data\" prop"
+		]
+	});
+	const qs = queryStates.get(dataRef);
+	return /* @__PURE__ */ jsx(QueryLoad, {
+		data: qs?.data,
+		loading: qs?.loading ?? true,
+		error: qs?.error,
+		children: (data) => {
+			switch (type) {
+				case "BigValue": return /* @__PURE__ */ jsx(BigValue, {
+					data,
+					value: props.value,
+					title: props.title,
+					fmt: props.fmt
+				});
+				case "BarChart": return /* @__PURE__ */ jsx(BarChart, {
+					data,
+					x: props.x,
+					y: props.y,
+					title: props.title,
+					horizontal: props.horizontal === "true",
+					series: props.series,
+					type: props.type,
+					yFmt: props.yFmt
+				});
+				case "LineChart": return /* @__PURE__ */ jsx(LineChart, {
+					data,
+					x: props.x,
+					y: props.y,
+					title: props.title,
+					series: props.series,
+					type: props.type,
+					yFmt: props.yFmt
+				});
+				case "AreaChart": return /* @__PURE__ */ jsx(AreaChart, {
+					data,
+					x: props.x,
+					y: props.y,
+					title: props.title,
+					series: props.series,
+					type: props.type,
+					yFmt: props.yFmt
+				});
+				case "PieChart": return /* @__PURE__ */ jsx(PieChart, {
+					data,
+					name: props.name,
+					value: props.value,
+					title: props.title
+				});
+				case "DataTable": return /* @__PURE__ */ jsx(DataTable, {
+					data,
+					columns: props.columns ? props.columns.split(",").map((c) => c.trim()) : void 0,
+					fmt: props.fmt,
+					rows: props.rows === "all" ? "all" : props.rows ? Number(props.rows) : void 0,
+					queryLimit: qs?.limit
+				});
+				default: return /* @__PURE__ */ jsxs("div", {
+					style: {
+						borderRadius: "var(--bon-radius)",
+						border: "1px solid var(--bon-border-warn)",
+						backgroundColor: "var(--bon-bg-warn)",
+						padding: 12,
+						fontSize: 14,
+						color: "var(--bon-text-warn)"
+					},
+					children: ["Unknown component: ", type]
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/dashboard/dashboard.tsx
+function Dashboard({ slug, content, onInputsChange, className }) {
+	if (content) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(DashboardViewer, {
+			content,
+			onInputsChange
+		})
+	});
+	if (slug) return /* @__PURE__ */ jsx(DashboardFromSlug, {
+		slug,
+		onInputsChange,
+		className
+	});
+	return null;
+}
+function DashboardFromSlug({ slug, onInputsChange, className }) {
+	const { dashboard, loading, error } = useDashboard(slug);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			height: 200,
+			fontSize: 14,
+			color: "var(--bon-text-muted)"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8
+			},
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				width: 16,
+				height: 16,
+				borderRadius: "50%",
+				border: "2px solid var(--bon-spinner-color)",
+				borderTopColor: "transparent",
+				animation: "bonnard-spin 0.6s linear infinite"
+			} }), "Loading dashboard…"]
+		})
+	});
+	if (error) return /* @__PURE__ */ jsxs("div", {
+		style: {
+			borderRadius: "var(--bon-radius)",
+			border: "1px solid var(--bon-border-error)",
+			backgroundColor: "var(--bon-bg-error)",
+			padding: 16,
+			fontSize: 14,
+			color: "var(--bon-text-error)"
+		},
+		children: ["Failed to load dashboard: ", error]
+	});
+	if (!dashboard) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(DashboardViewer, {
+			content: dashboard.content,
+			onInputsChange
+		})
+	});
+}
+
+//#endregion
+export { Dashboard, DashboardViewer, parseDashboard, useDashboard };