@klarkxy/dsh-deep-view 0.1.0 → 0.2.0

package/lib/widget.js

@@ -0,0 +1,1365 @@
+import { a as choiceValue, d as resolve, g as viewScope, h as viewInputs, r as asText, s as inputDefault } from "./core2.js";
+import { Fragment, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui.tsx
+const english = (key, params) => key.replace(/\{(\w+)\}/g, (_, name) => String(params?.[name] ?? `{${name}}`));
+function LineIcon({ paths }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "15",
+		height: "15",
+		viewBox: "0 0 20 20",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: paths.map((d, index) => /* @__PURE__ */ jsx("path", { d }, index))
+	});
+}
+const DotsIcon = () => /* @__PURE__ */ jsx(LineIcon, { paths: ["M5 10h.01M10 10h.01M15 10h.01"] });
+const CheckIcon = () => /* @__PURE__ */ jsx(LineIcon, { paths: ["M4.5 10.5l3.5 3.5 7.5-8"] });
+const CopyIcon = () => /* @__PURE__ */ jsx(LineIcon, { paths: ["M8.5 7h6A1.5 1.5 0 0 1 16 8.5v6a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 7 14.5v-6A1.5 1.5 0 0 1 8.5 7z", "M4 12.5V5.5A1.5 1.5 0 0 1 5.5 4H13"] });
+const TableIcon = () => /* @__PURE__ */ jsx(LineIcon, { paths: ["M4.5 4h11A1.5 1.5 0 0 1 17 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9A1.5 1.5 0 0 1 4.5 4z", "M3 8.5h14M8 8.5V16"] });
+const InfoIcon = () => /* @__PURE__ */ jsx(LineIcon, { paths: [
+	"M10 3.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13z",
+	"M10 9.25v4",
+	"M10 6.6h.01"
+] });
+const LinkIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 20 20",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.8",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ jsx("path", { d: "M8.5 11.5l3-3" }),
+		/* @__PURE__ */ jsx("path", { d: "M7 9.5L5.5 11a2.5 2.5 0 0 0 3.5 3.5L10.5 13" }),
+		/* @__PURE__ */ jsx("path", { d: "M13 10.5l1.5-1.5A2.5 2.5 0 0 0 11 5.5L9.5 7" })
+	]
+});
+const keyLetter = (index) => String.fromCharCode(65 + index);
+function Segmented({ label, value, className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: className ? `dvui-seg ${className}` : "dvui-seg",
+		role: "group",
+		"aria-label": label,
+		"data-active": value,
+		children
+	});
+}
+//#endregion
+//#region src/chart.tsx
+const PALETTE = [
+	"var(--dsw-alias-state-business-primary)",
+	"var(--dsw-alias-brand-primary)",
+	"var(--dsw-alias-state-success-primary)",
+	"var(--dsw-alias-state-warn-primary)",
+	"var(--dsw-alias-state-error-primary)"
+];
+const colorAt = (index) => PALETTE[index % PALETTE.length];
+const TICK = 10;
+const LABEL = 11;
+const textWidth = (text, size) => [...String(text)].reduce((sum, char) => sum + (char.charCodeAt(0) > 11904 ? size : size * .58), 0);
+const fit = (text, room, size) => {
+	if (textWidth(text, size) <= room) return String(text);
+	let out = "";
+	for (const char of String(text)) {
+		if (textWidth(`${out}${char}…`, size) > room) break;
+		out += char;
+	}
+	return out === "" ? "" : `${out}…`;
+};
+function formatNumber(value) {
+	if (!Number.isFinite(value)) return asText(value);
+	const abs = Math.abs(value);
+	const digits = abs >= 100 ? 0 : abs >= 10 ? 1 : 2;
+	return Number(value.toFixed(digits)).toLocaleString("en-US", { maximumFractionDigits: digits });
+}
+const withUnit$1 = (value, unit) => unit ? unit === "%" ? `${formatNumber(value)}%` : `${formatNumber(value)} ${unit}` : formatNumber(value);
+function niceTicks(low, high) {
+	let lo = low;
+	let hi = high;
+	if (lo === hi) {
+		lo = Math.min(0, lo);
+		hi = hi === 0 ? 1 : Math.max(0, hi);
+	}
+	if (lo === hi) hi = lo + 1;
+	const raw = (hi - lo) / 4;
+	const magnitude = 10 ** Math.floor(Math.log10(raw));
+	const step = [
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].map((scale) => scale * magnitude).find((candidate) => candidate >= raw);
+	const start = Math.floor(lo / step + 1e-9) * step;
+	const end = Math.ceil(hi / step - 1e-9) * step;
+	const ticks = [];
+	for (let value = start; value <= end + step / 2; value += step) ticks.push(Number(value.toPrecision(12)));
+	return ticks;
+}
+function chartData(node, lookup) {
+	const categories = (Array.isArray(node.categories) ? node.categories : []).map(asText);
+	const series = (Array.isArray(node.series) ? node.series : []).map((item, index) => ({
+		name: typeof item?.name === "string" ? item.name : "",
+		color: colorAt(index),
+		values: categories.map((_, at) => {
+			const value = Number(resolve(Array.isArray(item?.values) ? item.values[at] : void 0, lookup, 0));
+			return Number.isFinite(value) ? value : 0;
+		})
+	}));
+	return {
+		kind: node.kind ?? "bar",
+		categories,
+		series,
+		unit: typeof node.unit === "string" ? node.unit : ""
+	};
+}
+const csvCell = (value) => /[",\n]/.test(value) ? `"${value.replace(/"/g, "\"\"")}"` : value;
+function chartCsv({ categories, series, unit }, t = english) {
+	return [["", ...series.map((item, index) => item.name || (series.length === 1 ? unit || t("Value") : `${t("Series")} ${index + 1}`))], ...categories.map((label, at) => [label, ...series.map((item) => String(item.values[at]))])].map((row) => row.map((cell) => csvCell(String(cell))).join(",")).join("\n");
+}
+function valueAxis(values, zero) {
+	const finite = values.length > 0 ? values : [0];
+	const low = Math.min(...finite);
+	const high = Math.max(...finite);
+	if (zero) return niceTicks(Math.min(0, low), Math.max(0, high));
+	const pad = (high - low) * .1 || Math.abs(high) * .1 || 1;
+	return niceTicks(low - pad, high + pad);
+}
+function columns({ categories, series, unit, kind }, width, active, shown) {
+	const visible = series.filter((_, index) => shown[index]);
+	const ticks = valueAxis(visible.flatMap((item) => item.values), kind !== "line");
+	const lo = ticks[0];
+	const hi = ticks.at(-1);
+	const left = Math.ceil(Math.max(...ticks.map((tick) => textWidth(withUnit$1(tick, unit), TICK)))) + 10;
+	const top = 8;
+	const height = 220;
+	const plot = {
+		x: left,
+		y: top,
+		w: Math.max(40, width - left - 4),
+		h: 188
+	};
+	const y = (value) => plot.y + plot.h - (value - lo) / (hi - lo) * plot.h;
+	const band = plot.w / categories.length;
+	const parts = [];
+	for (const tick of ticks) {
+		parts.push(/* @__PURE__ */ jsx("line", {
+			className: "dvui-chart-grid",
+			x1: plot.x,
+			x2: plot.x + plot.w,
+			y1: y(tick),
+			y2: y(tick)
+		}, `g${tick}`));
+		parts.push(/* @__PURE__ */ jsx("text", {
+			className: "dvui-chart-tick",
+			x: plot.x - 8,
+			y: y(tick) + 3,
+			textAnchor: "end",
+			children: withUnit$1(tick, unit)
+		}, `t${tick}`));
+	}
+	const points = [];
+	categories.forEach((label, at) => {
+		const cx = plot.x + band * at + band / 2;
+		parts.push(/* @__PURE__ */ jsx("text", {
+			className: "dvui-chart-label",
+			x: cx,
+			y: 213,
+			textAnchor: "middle",
+			children: fit(label, band - 4, LABEL)
+		}, `c${at}`));
+		points.push({
+			x: cx,
+			y: y(Math.max(...visible.map((item) => item.values[at]), lo))
+		});
+	});
+	if (kind === "bar") {
+		const group = band * .72;
+		const gap = visible.length > 1 ? 2 : 0;
+		const barW = Math.max(2, (group - gap * (visible.length - 1)) / visible.length);
+		const zero = y(Math.max(lo, Math.min(0, hi)));
+		categories.forEach((_, at) => visible.forEach((item, row) => {
+			const value = item.values[at];
+			const x = plot.x + band * at + (band - group) / 2 + row * (barW + gap);
+			const top2 = Math.min(y(value), zero);
+			const tall = Math.max(1, Math.abs(y(value) - zero));
+			const r = Math.min(4, barW / 2, tall);
+			const d = value >= 0 ? `M${x},${top2 + tall}V${top2 + r}q0,-${r} ${r},-${r}h${barW - 2 * r}q${r},0 ${r},${r}V${top2 + tall}z` : `M${x},${top2}V${top2 + tall - r}q0,${r} ${r},${r}h${barW - 2 * r}q${r},0 ${r},-${r}V${top2}z`;
+			parts.push(/* @__PURE__ */ jsx("path", {
+				className: "dvui-chart-mark",
+				"data-dim": active !== null && active !== at ? "" : void 0,
+				d,
+				style: { fill: item.color }
+			}, `b${at}-${row}`));
+		}));
+	} else {
+		const xs = categories.map((_, at) => plot.x + band * at + band / 2);
+		visible.forEach((item, row) => {
+			const line = item.values.map((value, at) => `${at === 0 ? "M" : "L"}${xs[at]},${y(value)}`).join("");
+			if (kind === "area") {
+				const base = y(Math.max(lo, Math.min(0, hi)));
+				parts.push(/* @__PURE__ */ jsx("path", {
+					className: "dvui-chart-area",
+					d: `${line}L${xs.at(-1)},${base}L${xs[0]},${base}z`,
+					style: { fill: item.color }
+				}, `a${row}`));
+			}
+			parts.push(/* @__PURE__ */ jsx("path", {
+				className: "dvui-chart-line",
+				d: line,
+				style: { stroke: item.color }
+			}, `l${row}`));
+			item.values.forEach((value, at) => parts.push(/* @__PURE__ */ jsx("circle", {
+				className: "dvui-chart-dot",
+				cx: xs[at],
+				cy: y(value),
+				r: active === at ? 4 : 2.5,
+				style: { fill: item.color }
+			}, `p${row}-${at}`)));
+		});
+		if (active !== null) parts.unshift(/* @__PURE__ */ jsx("line", {
+			className: "dvui-chart-guide",
+			x1: xs[active],
+			x2: xs[active],
+			y1: plot.y,
+			y2: plot.y + plot.h
+		}, "guide"));
+	}
+	return {
+		parts,
+		height,
+		points,
+		hits: categories.map((_, at) => ({
+			x: plot.x + band * at,
+			y: plot.y,
+			w: band,
+			h: plot.h
+		}))
+	};
+}
+function rows({ categories, series, unit }, width, active, shown) {
+	const visible = series.filter((_, index) => shown[index]);
+	const ticks = valueAxis(visible.flatMap((item) => item.values), true);
+	const lo = ticks[0];
+	const hi = ticks.at(-1);
+	const labelW = Math.min(width * .38, Math.ceil(Math.max(...categories.map((label) => textWidth(label, LABEL)))) + 10);
+	const valueW = Math.ceil(Math.max(...visible.flatMap((item) => item.values).map((value) => textWidth(withUnit$1(value, unit), LABEL)))) + 10;
+	const barH = 14;
+	const rowH = 10 + visible.length * barH + (visible.length - 1) * 2;
+	const top = 4;
+	const height = top + rowH * categories.length + 22;
+	const plot = {
+		x: labelW,
+		y: top,
+		w: Math.max(40, width - labelW - valueW),
+		h: rowH * categories.length
+	};
+	const x = (value) => plot.x + (value - lo) / (hi - lo) * plot.w;
+	const parts = [];
+	for (const tick of ticks) {
+		parts.push(/* @__PURE__ */ jsx("line", {
+			className: "dvui-chart-grid",
+			x1: x(tick),
+			x2: x(tick),
+			y1: plot.y,
+			y2: plot.y + plot.h
+		}, `g${tick}`));
+		parts.push(/* @__PURE__ */ jsx("text", {
+			className: "dvui-chart-tick",
+			x: x(tick),
+			y: height - 6,
+			textAnchor: "middle",
+			children: withUnit$1(tick, unit)
+		}, `t${tick}`));
+	}
+	const points = [];
+	const zero = x(Math.max(lo, Math.min(0, hi)));
+	categories.forEach((label, at) => {
+		const rowY = plot.y + rowH * at + 5;
+		parts.push(/* @__PURE__ */ jsx("text", {
+			className: "dvui-chart-label",
+			x: labelW - 10,
+			y: rowY + (rowH - 10) / 2 + 4,
+			textAnchor: "end",
+			children: fit(label, labelW - 12, LABEL)
+		}, `c${at}`));
+		visible.forEach((item, row) => {
+			const value = item.values[at];
+			const by = rowY + row * 16;
+			const left = Math.min(x(value), zero);
+			const long = Math.max(1, Math.abs(x(value) - zero));
+			parts.push(/* @__PURE__ */ jsx("rect", {
+				className: "dvui-chart-mark",
+				"data-dim": active !== null && active !== at ? "" : void 0,
+				x: left,
+				y: by,
+				width: long,
+				height: barH,
+				rx: Math.min(4, long / 2),
+				style: { fill: item.color }
+			}, `b${at}-${row}`));
+			parts.push(/* @__PURE__ */ jsx("text", {
+				className: "dvui-chart-value",
+				x: left + long + 6,
+				y: by + barH - 3,
+				children: withUnit$1(value, unit)
+			}, `v${at}-${row}`));
+		});
+		points.push({
+			x: Math.max(...visible.map((item) => x(item.values[at])), zero),
+			y: rowY
+		});
+	});
+	return {
+		parts,
+		height,
+		points,
+		hits: categories.map((_, at) => ({
+			x: 0,
+			y: plot.y + rowH * at,
+			w: width,
+			h: rowH
+		}))
+	};
+}
+function donut({ categories, series }, width, active, hover) {
+	const values = (series[0]?.values ?? []).map((value) => Math.max(0, value));
+	const total = values.reduce((sum, value) => sum + value, 0);
+	const size = Math.min(180, Math.max(120, width * .42));
+	const r = size / 2;
+	const inner = r * .62;
+	const cx = r;
+	const cy = r;
+	const parts = [];
+	const points = [];
+	let angle = -Math.PI / 2;
+	values.forEach((value, at) => {
+		const sweep = total > 0 ? value / total * Math.PI * 2 : 0;
+		const end = angle + sweep;
+		const mid = angle + sweep / 2;
+		points.push({
+			x: cx + Math.cos(mid) * (r - (r - inner) / 2),
+			y: cy + Math.sin(mid) * (r - (r - inner) / 2)
+		});
+		if (sweep > 0) {
+			const large = sweep > Math.PI ? 1 : 0;
+			const full = sweep >= Math.PI * 2 - 1e-6;
+			const p = (radius, theta) => `${cx + Math.cos(theta) * radius},${cy + Math.sin(theta) * radius}`;
+			const d = full ? `M${p(r, angle)}A${r},${r} 0 1 1 ${p(r, angle + Math.PI)}A${r},${r} 0 1 1 ${p(r, angle)}M${p(inner, angle)}A${inner},${inner} 0 1 0 ${p(inner, angle + Math.PI)}A${inner},${inner} 0 1 0 ${p(inner, angle)}z` : `M${p(r, angle)}A${r},${r} 0 ${large} 1 ${p(r, end)}L${p(inner, end)}A${inner},${inner} 0 ${large} 0 ${p(inner, angle)}z`;
+			parts.push(/* @__PURE__ */ jsx("path", {
+				className: "dvui-chart-mark",
+				"data-dim": active !== null && active !== at ? "" : void 0,
+				d,
+				fillRule: "evenodd",
+				style: { fill: colorAt(at) },
+				onPointerEnter: () => hover(at)
+			}, `s${at}`));
+		}
+		angle = end;
+	});
+	return {
+		parts,
+		height: size,
+		size,
+		points,
+		total,
+		values,
+		hits: []
+	};
+}
+function useWidth(box, initial) {
+	const [width, setWidth] = useState(initial);
+	useLayoutEffect(() => {
+		const node = box.current;
+		if (!node || typeof ResizeObserver !== "function") return void 0;
+		const measure = () => {
+			const next = Math.round(node.clientWidth);
+			if (next > 0) setWidth(next);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [box]);
+	return width;
+}
+function ChartTable({ data, t = english }) {
+	const { categories, series, unit } = data;
+	const heads = series.map((item, index) => item.name || (series.length === 1 ? unit || t("Value") : `${t("Series")} ${index + 1}`));
+	return /* @__PURE__ */ jsx("div", {
+		className: "dvui-table",
+		children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", { scope: "col" }), heads.map((head, index) => /* @__PURE__ */ jsx("th", {
+			scope: "col",
+			className: "dvui-num",
+			children: head
+		}, index))] }) }), /* @__PURE__ */ jsx("tbody", { children: categories.map((label, at) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+			scope: "row",
+			children: label
+		}), series.map((item, index) => /* @__PURE__ */ jsx("td", {
+			className: "dvui-num",
+			children: withUnit$1(item.values[at], series.length === 1 && !item.name ? "" : unit)
+		}, index))] }, `${at}-${label}`)) })] })
+	});
+}
+function WidgetChart({ node, lookup, registerChart, refreshCharts, t = english }) {
+	const data = chartData(node, lookup);
+	const { kind, categories, series, unit } = data;
+	const box = useRef(null);
+	const width = useWidth(box, 520);
+	const [active, setActive] = useState(null);
+	const [hidden, setHidden] = useState([]);
+	const [asTable, setAsTable] = useState(false);
+	const [copied, setCopied] = useState(false);
+	const labelId = useId();
+	const menuKey = useId();
+	const table = useRef(asTable);
+	table.current = asTable;
+	const shown = series.map((_, index) => !hidden.includes(index));
+	const label = typeof node.caption === "string" && node.caption !== "" ? node.caption : t("Chart");
+	const isDonut = kind === "donut";
+	const legendBeside = isDonut && width >= 360;
+	const drawn = isDonut ? donut(data, legendBeside ? width - 200 : width, active, setActive) : kind === "hbar" ? rows(data, width, active, shown) : columns(data, width, active, shown);
+	const svgWidth = isDonut ? drawn.size : width;
+	const move = (event) => {
+		const keys = {
+			ArrowRight: 1,
+			ArrowDown: 1,
+			ArrowLeft: -1,
+			ArrowUp: -1
+		};
+		if (event.key === "Escape") {
+			setActive(null);
+			return;
+		}
+		if (keys[event.key] === void 0) return;
+		event.preventDefault();
+		setActive((current) => current === null ? 0 : (current + keys[event.key] + categories.length) % categories.length);
+	};
+	const point = active === null ? null : drawn.points[active];
+	const share = (at) => unit === "%" ? withUnit$1(drawn.values[at], unit) : `${withUnit$1(drawn.values[at], unit)} · ${drawn.total > 0 ? Math.round(drawn.values[at] / drawn.total * 100) : 0}%`;
+	const tipRows = active === null || isDonut ? [] : series.filter((_, index) => shown[index]).map((item) => ({
+		color: item.color,
+		name: item.name,
+		value: withUnit$1(item.values[active], unit)
+	}));
+	const copy = () => {
+		navigator.clipboard?.writeText(chartCsv(data, t)).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1200);
+		}).catch(() => {});
+	};
+	const toggleTable = () => {
+		table.current = !table.current;
+		setAsTable(table.current);
+	};
+	const action = useRef({
+		label: null,
+		asTable: false,
+		toggleTable,
+		copy
+	});
+	action.current = {
+		label: typeof node.caption === "string" && node.caption !== "" ? node.caption : null,
+		get asTable() {
+			return table.current;
+		},
+		toggleTable,
+		copy
+	};
+	useLayoutEffect(() => registerChart?.(menuKey, {
+		get label() {
+			return action.current.label;
+		},
+		get asTable() {
+			return action.current.asTable;
+		},
+		toggleTable: () => action.current.toggleTable(),
+		copy: () => action.current.copy()
+	}), [registerChart, menuKey]);
+	useLayoutEffect(() => {
+		refreshCharts?.();
+	}, [
+		refreshCharts,
+		asTable,
+		label
+	]);
+	const legend = isDonut ? /* @__PURE__ */ jsx("div", {
+		className: "dvui-chart-legend dvui-chart-legend-list",
+		children: categories.map((name, at) => /* @__PURE__ */ jsxs("div", {
+			className: "dvui-chart-key",
+			"data-dim": active !== null && active !== at ? "" : void 0,
+			onPointerEnter: () => setActive(at),
+			onPointerLeave: () => setActive(null),
+			children: [
+				/* @__PURE__ */ jsx("i", { style: { background: colorAt(at) } }),
+				/* @__PURE__ */ jsx("span", {
+					className: "dvui-chart-key-name",
+					children: name
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "dvui-chart-key-value",
+					children: share(at)
+				})
+			]
+		}, `${at}-${name}`))
+	}) : series.length > 1 ? /* @__PURE__ */ jsx("div", {
+		className: "dvui-chart-legend",
+		children: series.map((item, index) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "dvui-chart-key",
+			"aria-pressed": shown[index],
+			onClick: () => setHidden((before) => before.includes(index) ? before.filter((item) => item !== index) : shown.filter(Boolean).length > 1 ? [...before, index] : before),
+			children: [/* @__PURE__ */ jsx("i", { style: { background: item.color } }), item.name || `${t("Series")} ${index + 1}`]
+		}, `${index}-${item.name}`))
+	}) : null;
+	const plot = /* @__PURE__ */ jsxs("div", {
+		className: "dvui-chart-plot",
+		style: isDonut ? { width: svgWidth } : void 0,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			className: "dvui-chart-svg",
+			width: svgWidth,
+			height: drawn.height,
+			viewBox: `0 0 ${svgWidth} ${drawn.height}`,
+			role: "img",
+			"aria-labelledby": labelId,
+			tabIndex: 0,
+			onKeyDown: move,
+			onBlur: () => setActive(null),
+			onPointerLeave: () => setActive(null),
+			children: [drawn.parts, isDonut ? active === null ? /* @__PURE__ */ jsx("text", {
+				className: "dvui-chart-center",
+				x: svgWidth / 2,
+				y: drawn.height / 2 + 5,
+				textAnchor: "middle",
+				children: unit === "%" ? "" : withUnit$1(drawn.total, unit)
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("text", {
+				className: "dvui-chart-center-name",
+				x: svgWidth / 2,
+				y: drawn.height / 2 - 4,
+				textAnchor: "middle",
+				children: fit(categories[active], drawn.size * .56, LABEL)
+			}), /* @__PURE__ */ jsx("text", {
+				className: "dvui-chart-center",
+				x: svgWidth / 2,
+				y: drawn.height / 2 + 14,
+				textAnchor: "middle",
+				children: share(active)
+			})] }) : drawn.hits.map((hit, at) => /* @__PURE__ */ jsx("rect", {
+				className: "dvui-chart-hit",
+				x: hit.x,
+				y: hit.y,
+				width: hit.w,
+				height: hit.h,
+				onPointerEnter: () => setActive(at)
+			}, `h${at}`))]
+		}), point && !asTable && !isDonut ? /* @__PURE__ */ jsxs("div", {
+			className: "dvui-chart-tip",
+			role: "status",
+			style: {
+				left: point.x,
+				top: point.y
+			},
+			children: [/* @__PURE__ */ jsx("b", { children: categories[active] }), tipRows.map((row, index) => /* @__PURE__ */ jsxs("span", { children: [
+				/* @__PURE__ */ jsx("i", { style: { background: row.color } }),
+				row.name ? `${row.name}  ` : "",
+				row.value
+			] }, index))]
+		}) : null]
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: box,
+		className: "dvui-chart",
+		"data-kind": kind,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				hidden: true,
+				children: label
+			}),
+			asTable ? /* @__PURE__ */ jsx(ChartTable, {
+				data,
+				t
+			}) : isDonut ? /* @__PURE__ */ jsxs("div", {
+				className: legendBeside ? "dvui-chart-donut dvui-chart-donut-beside" : "dvui-chart-donut",
+				onPointerLeave: () => setActive(null),
+				children: [plot, legend]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [legend, plot] }),
+			copied ? /* @__PURE__ */ jsx("span", {
+				className: "dvui-chart-copied",
+				role: "status",
+				children: t("Copied")
+			}) : null,
+			typeof node.caption === "string" && node.caption !== "" ? /* @__PURE__ */ jsx("figcaption", {
+				className: "dvui-caption",
+				children: node.caption
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/widget.tsx
+const TONES = [
+	"good",
+	"warn",
+	"bad"
+];
+const CALLOUT_TONES = [
+	"info",
+	"good",
+	"warn",
+	"bad"
+];
+const optionsOf = (node) => Array.isArray(node.options) ? node.options : [];
+const fieldsOf = (node) => Array.isArray(node.fields) ? node.fields : [];
+const cellText = (value) => value === null || value === void 0 ? "" : typeof value === "object" ? JSON.stringify(value) : asText(value);
+const NUMERIC_CELL = /^[-+]?[\d.,]+\s?(%|[a-zA-Z]{1,4})?$/;
+function hasType(node, types) {
+	return types.has(node.type) || Array.isArray(node.children) && node.children.some((child) => hasType(child, types));
+}
+const answerValues = (answer, node) => answer != null && answer.action === node.id ? answer.values : void 0;
+const withUnit = (value, unit) => `${asText(value)}${unit ? ` ${unit}` : ""}`;
+const grouped = (value) => typeof value === "number" && Number.isFinite(value) ? value.toLocaleString("en-US", { maximumFractionDigits: 6 }) : asText(value);
+function FallbackMarkdown({ text }) {
+	return /* @__PURE__ */ jsx("span", { children: text });
+}
+function OptionsInput({ node, ctx, t }) {
+	const [picked, setPicked] = useState([]);
+	const options = optionsOf(node);
+	const multi = node.multi === true;
+	const choose = (label) => {
+		if (ctx.answerLocked) return;
+		if (multi) setPicked((current) => current.includes(label) ? current.filter((item) => item !== label) : [...current, label]);
+		else ctx.onSubmit?.(node.id, { selected: [label] });
+	};
+	const onKey = (event) => {
+		const index = event.key.toUpperCase().charCodeAt(0) - 65;
+		if (index >= 0 && index < options.length && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			choose(options[index].label);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "dvui-options",
+		role: "group",
+		"aria-label": t("Options"),
+		onKeyDown: onKey,
+		children: options.map((option, index) => {
+			const selected = multi && picked.includes(option.label);
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "dvui-option",
+				disabled: ctx.answerLocked,
+				"aria-pressed": multi ? selected : void 0,
+				"aria-keyshortcuts": keyLetter(index).toLowerCase(),
+				onClick: () => choose(option.label),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "dvui-key",
+						"aria-hidden": "true",
+						children: keyLetter(index)
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "dvui-option-body",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "dvui-option-label",
+							children: option.label
+						}), option.description ? /* @__PURE__ */ jsx("span", {
+							className: "dvui-option-desc",
+							children: option.description
+						}) : null]
+					}),
+					selected ? /* @__PURE__ */ jsx("span", {
+						className: "dvui-check",
+						children: /* @__PURE__ */ jsx(CheckIcon, {})
+					}) : null
+				]
+			}, option.label);
+		})
+	}), multi ? /* @__PURE__ */ jsx("div", {
+		className: "dvui-actions",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "dvui-submit",
+			disabled: ctx.answerLocked || picked.length === 0,
+			onClick: () => ctx.onSubmit?.(node.id, { selected: picked }),
+			children: t("Submit")
+		})
+	}) : null] });
+}
+function SettledOptions({ node, answer, t }) {
+	const selected = answerValues(answer, node)?.selected;
+	const chosen = Array.isArray(selected) ? selected : [];
+	return /* @__PURE__ */ jsx("div", {
+		className: "dvui-options",
+		role: "group",
+		"aria-label": t("Your answer"),
+		children: optionsOf(node).map((option) => /* @__PURE__ */ jsxs("div", {
+			className: "dvui-option",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "dvui-option-body",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "dvui-option-label",
+					children: option.label
+				}), option.description ? /* @__PURE__ */ jsx("span", {
+					className: "dvui-option-desc",
+					children: option.description
+				}) : null]
+			}), chosen.includes(option.label) ? /* @__PURE__ */ jsx("span", {
+				className: "dvui-check",
+				role: "img",
+				"aria-label": t("Selected"),
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			}) : null]
+		}, option.label))
+	});
+}
+function ConfirmInput({ node, ctx, t }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-actions",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "dvui-button",
+			disabled: ctx.answerLocked,
+			onClick: () => ctx.onSubmit?.(node.id, { confirmed: false }),
+			children: node.cancelLabel ?? t("Cancel")
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "dvui-submit",
+			disabled: ctx.answerLocked,
+			onClick: () => ctx.onSubmit?.(node.id, { confirmed: true }),
+			children: node.confirmLabel ?? t("Confirm")
+		})]
+	});
+}
+function SettledConfirm({ node, answer, t }) {
+	const confirmed = answerValues(answer, node)?.confirmed;
+	if (typeof confirmed !== "boolean") return /* @__PURE__ */ jsx(ConfirmInput, {
+		node,
+		ctx: { answerLocked: true },
+		t
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "dvui-badge",
+		children: confirmed ? node.confirmLabel ?? t("Confirm") : node.cancelLabel ?? t("Cancel")
+	});
+}
+function FormInput({ node, ctx, t }) {
+	const fields = fieldsOf(node);
+	const [draft, setDraft] = useState({});
+	const submit = () => {
+		if (!ctx.answerLocked) ctx.onSubmit?.(node.id, { fields: Object.fromEntries(fields.map((field) => [field.id, draft[field.id] ?? ""])) });
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "dvui-form",
+		onSubmit: (event) => {
+			event.preventDefault();
+			submit();
+		},
+		children: [fields.map((field) => /* @__PURE__ */ jsxs("label", {
+			className: "dvui-field",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "dvui-field-label",
+				children: field.label
+			}), /* @__PURE__ */ jsx("input", {
+				className: "dvui-input",
+				type: "text",
+				value: draft[field.id] ?? "",
+				autoComplete: "off",
+				spellCheck: false,
+				readOnly: ctx.answerLocked,
+				"aria-label": field.label,
+				placeholder: field.placeholder,
+				onChange: (event) => setDraft((current) => ({
+					...current,
+					[field.id]: event.target.value
+				}))
+			})]
+		}, field.id)), /* @__PURE__ */ jsx("div", {
+			className: "dvui-actions",
+			children: /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				className: "dvui-submit",
+				disabled: ctx.answerLocked,
+				children: node.submitLabel ?? t("Submit")
+			})
+		})]
+	});
+}
+function SettledForm({ node, answer }) {
+	const fields = answerValues(answer, node)?.fields;
+	const values = fields !== null && typeof fields === "object" ? fields : {};
+	return /* @__PURE__ */ jsx("div", {
+		className: "dvui-form",
+		children: fieldsOf(node).map((field) => /* @__PURE__ */ jsxs("label", {
+			className: "dvui-field",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "dvui-field-label",
+				children: field.label
+			}), /* @__PURE__ */ jsx("input", {
+				className: "dvui-input",
+				value: String(values[field.id] ?? ""),
+				disabled: true,
+				readOnly: true,
+				"aria-label": field.label
+			})]
+		}, field.id))
+	});
+}
+function WidgetTable({ node, lookup }) {
+	const columns = Array.isArray(node.columns) ? node.columns : [];
+	const rows = (Array.isArray(node.rows) ? node.rows : []).map((row) => (Array.isArray(row) ? row : []).map((cell) => resolve(cell, lookup, "")));
+	const numeric = columns.map((_, index) => {
+		const cells = rows.map((row) => row[index]).filter((cell) => cell !== void 0 && cell !== "");
+		return cells.length > 0 && cells.every((cell) => typeof cell === "number" || typeof cell === "string" && NUMERIC_CELL.test(cell.trim()));
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "dvui-table",
+		children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx("th", {
+			scope: "col",
+			className: numeric[index] ? "dvui-num" : void 0,
+			children: column.label
+		}, column.key ?? index)) }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx("td", {
+			className: numeric[index] ? "dvui-num" : void 0,
+			children: cellText(row[index])
+		}, column.key ?? index)) }, rowIndex)) })] })
+	});
+}
+function WidgetProgress({ node, lookup, t }) {
+	let percent;
+	if (node.percent !== void 0) percent = Number(resolve(node.percent, lookup, 0));
+	else {
+		const max = Number(resolve(node.max, lookup, 0));
+		percent = max > 0 ? Number(resolve(node.value, lookup, 0)) / max * 100 : 0;
+	}
+	percent = Math.max(0, Math.min(100, Number.isFinite(percent) ? percent : 0));
+	const tone = resolve(node.tone, lookup);
+	const right = node.valueLabel !== void 0 ? asText(resolve(node.valueLabel, lookup, "")) : `${Math.round(percent)}%`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-progress",
+		"data-tone": TONES.includes(String(tone)) ? String(tone) : void 0,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "dvui-progress-label",
+			children: [/* @__PURE__ */ jsx("span", { children: node.label }), /* @__PURE__ */ jsx("span", { children: right })]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "dvui-progress-track",
+			role: "progressbar",
+			"aria-valuenow": Math.round(percent),
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-label": node.label ?? t("Progress"),
+			"aria-valuetext": right,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "dvui-progress-fill",
+				style: { width: `${percent}%` }
+			})
+		})]
+	});
+}
+function WidgetMetric({ node, lookup }) {
+	const tone = resolve(node.tone, lookup);
+	const caption = node.caption === void 0 ? "" : asText(resolve(node.caption, lookup, ""));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-metric",
+		"data-tone": TONES.includes(String(tone)) ? String(tone) : void 0,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "dvui-metric-label",
+				children: node.label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "dvui-metric-value",
+				children: asText(resolve(node.value, lookup, "—"))
+			}),
+			caption !== "" ? /* @__PURE__ */ jsx("span", {
+				className: "dvui-caption",
+				children: caption
+			}) : null
+		]
+	});
+}
+function WidgetCallout({ node, lookup, Markdown, labels }) {
+	const tone = resolve(node.tone, lookup);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-callout",
+		"data-tone": CALLOUT_TONES.includes(String(tone)) ? String(tone) : "info",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "dvui-callout-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(InfoIcon, {})
+		}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Markdown, {
+			text: asText(resolve(node.text, lookup, "")),
+			labels,
+			variant: "compact"
+		}) })]
+	});
+}
+function WidgetSources({ node, t }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "dvui-sources",
+		role: "list",
+		"aria-label": t("Sources"),
+		children: (node.items ?? []).map((item, index) => /* @__PURE__ */ jsxs("a", {
+			role: "listitem",
+			className: "dvui-source",
+			href: item.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			title: item.url,
+			children: [/* @__PURE__ */ jsx(LinkIcon, {}), item.label]
+		}, `${item.url}-${index}`))
+	});
+}
+function InputHead({ id, label, value }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-input-head",
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: id,
+			className: "dvui-input-label",
+			children: label
+		}), value !== void 0 ? /* @__PURE__ */ jsx("output", {
+			htmlFor: id,
+			className: "dvui-input-value",
+			children: value
+		}) : null]
+	});
+}
+const numericBound = (bound) => typeof bound === "number" && Number.isFinite(bound) ? bound : typeof bound === "string" && bound.trim() !== "" && Number.isFinite(Number(bound)) ? Number(bound) : void 0;
+function SliderInput({ node, ctx }) {
+	const id = useId();
+	const value = Number(ctx.values[node.id]);
+	const min = numericBound(resolve(node.min, ctx.lookup, void 0));
+	const max = numericBound(resolve(node.max, ctx.lookup, void 0));
+	const percent = min !== void 0 && max !== void 0 && max > min ? (value - min) / (max - min) * 100 : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-input-row",
+		children: [/* @__PURE__ */ jsx(InputHead, {
+			id,
+			label: node.label,
+			value: withUnit(grouped(value), node.unit)
+		}), /* @__PURE__ */ jsx("input", {
+			id,
+			type: "range",
+			className: "dvui-range",
+			min,
+			max,
+			step: node.step ?? "any",
+			value,
+			disabled: ctx.locked,
+			style: { "--_dvui-fill": `${percent}%` },
+			onChange: (event) => ctx.setInput(node.id, Number(event.target.value))
+		})]
+	});
+}
+function NumberInput({ node, ctx }) {
+	const id = useId();
+	const [draft, setDraft] = useState(null);
+	const value = ctx.values[node.id];
+	const min = numericBound(resolve(node.min, ctx.lookup, void 0));
+	const max = numericBound(resolve(node.max, ctx.lookup, void 0));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-input-row",
+		children: [/* @__PURE__ */ jsx(InputHead, {
+			id,
+			label: node.label
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "dvui-number",
+			children: [/* @__PURE__ */ jsx("input", {
+				id,
+				className: "dvui-input",
+				type: "number",
+				inputMode: "decimal",
+				value: draft ?? asText(value),
+				min,
+				max,
+				step: node.step ?? "any",
+				disabled: ctx.locked,
+				onChange: (event) => {
+					const raw = event.target.value;
+					setDraft(raw);
+					const next = Number(raw);
+					if (raw.trim() === "" || !Number.isFinite(next) || min !== void 0 && next < min || max !== void 0 && next > max) return;
+					ctx.setInput(node.id, next);
+				},
+				onBlur: () => setDraft(null)
+			}), node.unit ? /* @__PURE__ */ jsx("span", {
+				className: "dvui-unit",
+				children: node.unit
+			}) : null]
+		})]
+	});
+}
+function ChoiceInput({ node, ctx }) {
+	const labelId = useId();
+	const options = optionsOf(node);
+	const current = ctx.values[node.id];
+	const side = options.length <= 4 && options.every((option) => [...option.label].length <= 14);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-input-row",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "dvui-input-label",
+			id: labelId,
+			children: node.label
+		}), side ? /* @__PURE__ */ jsx(Segmented, {
+			label: node.label ?? "",
+			value: options.findIndex((option) => choiceValue(option) === current),
+			className: "dvui-choice-seg",
+			children: options.map((option) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-pressed": choiceValue(option) === current,
+				disabled: ctx.locked,
+				onClick: () => ctx.setInput(node.id, choiceValue(option)),
+				children: option.label
+			}, option.label))
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "dvui-radios",
+			role: "radiogroup",
+			"aria-labelledby": labelId,
+			children: options.map((option) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "radio",
+				className: "dvui-radio",
+				"aria-checked": choiceValue(option) === current,
+				disabled: ctx.locked,
+				onClick: () => ctx.setInput(node.id, choiceValue(option)),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "dvui-radio-dot",
+					"aria-hidden": "true"
+				}), option.label]
+			}, option.label))
+		})]
+	});
+}
+function ToggleInput({ node, ctx }) {
+	const on = ctx.values[node.id] === true;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dvui-toggle",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "dvui-input-label",
+			children: node.label
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "switch",
+			className: "dvui-switch",
+			"aria-checked": on,
+			"aria-label": node.label,
+			disabled: ctx.locked,
+			onClick: () => ctx.setInput(node.id, !on),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "dvui-switch-knob",
+				"aria-hidden": "true"
+			})
+		})]
+	});
+}
+function WidgetNode({ node, ctx, Markdown, labels, t }) {
+	const { lookup } = ctx;
+	switch (node.type) {
+		case "stack":
+		case "row": return /* @__PURE__ */ jsx("div", {
+			className: node.type === "row" ? "dvui-row" : "dvui-stack",
+			children: (node.children ?? []).map((child, index) => /* @__PURE__ */ jsx(WidgetNode, {
+				node: child,
+				ctx,
+				Markdown,
+				labels,
+				t
+			}, child.id ?? `${child.type}-${index}`))
+		});
+		case "text": {
+			const text = /* @__PURE__ */ jsx(Markdown, {
+				text: asText(resolve(node.text, lookup, "")),
+				labels,
+				variant: "compact"
+			});
+			return node.tone === "muted" ? /* @__PURE__ */ jsx("div", {
+				className: "dvui-muted",
+				children: text
+			}) : text;
+		}
+		case "metric": return /* @__PURE__ */ jsx(WidgetMetric, {
+			node,
+			lookup
+		});
+		case "table": return /* @__PURE__ */ jsx(WidgetTable, {
+			node,
+			lookup
+		});
+		case "chart": return /* @__PURE__ */ jsx(WidgetChart, {
+			node,
+			lookup,
+			registerChart: ctx.registerChart,
+			refreshCharts: ctx.refreshCharts,
+			t
+		});
+		case "progress": return /* @__PURE__ */ jsx(WidgetProgress, {
+			node,
+			lookup,
+			t
+		});
+		case "callout": return /* @__PURE__ */ jsx(WidgetCallout, {
+			node,
+			lookup,
+			Markdown,
+			labels
+		});
+		case "sources": return /* @__PURE__ */ jsx(WidgetSources, {
+			node,
+			t
+		});
+		case "slider": return /* @__PURE__ */ jsx(SliderInput, {
+			node,
+			ctx
+		});
+		case "number": return /* @__PURE__ */ jsx(NumberInput, {
+			node,
+			ctx
+		});
+		case "choice": return /* @__PURE__ */ jsx(ChoiceInput, {
+			node,
+			ctx
+		});
+		case "toggle": return /* @__PURE__ */ jsx(ToggleInput, {
+			node,
+			ctx
+		});
+		case "submit": return ctx.settled ? null : /* @__PURE__ */ jsx("div", {
+			className: "dvui-actions",
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "dvui-submit",
+				disabled: ctx.answerLocked,
+				onClick: () => ctx.onSubmit?.(node.id, {}),
+				children: node.label || t("Send")
+			})
+		});
+		case "options": return ctx.settled ? /* @__PURE__ */ jsx(SettledOptions, {
+			node,
+			answer: ctx.answer,
+			t
+		}) : /* @__PURE__ */ jsx(OptionsInput, {
+			node,
+			ctx,
+			t
+		});
+		case "confirm": return ctx.settled ? /* @__PURE__ */ jsx(SettledConfirm, {
+			node,
+			answer: ctx.answer,
+			t
+		}) : /* @__PURE__ */ jsx(ConfirmInput, {
+			node,
+			ctx,
+			t
+		});
+		case "form": return ctx.settled ? /* @__PURE__ */ jsx(SettledForm, {
+			node,
+			answer: ctx.answer
+		}) : /* @__PURE__ */ jsx(FormInput, {
+			node,
+			ctx,
+			t
+		});
+		default: return null;
+	}
+}
+function WidgetView({ view, onSubmit, settled = false, answer = null, busy = false, registerChart, refreshCharts, t = english, labels = {
+	code: {
+		copyLabel: "Copy",
+		copiedLabel: "Copied"
+	},
+	footnotes: "Footnotes"
+}, Markdown = FallbackMarkdown }) {
+	const inputs = viewInputs(view);
+	const [values, setValues] = useState(() => Object.fromEntries(inputs.map((node) => [node.id, inputDefault(node)])));
+	const sent = answer?.values?.inputs;
+	const current = settled && sent !== null && typeof sent === "object" ? {
+		...values,
+		...sent
+	} : values;
+	const submit = (action, extra) => onSubmit?.(action, inputs.length > 0 ? {
+		...extra,
+		inputs: current
+	} : extra);
+	const ctx = {
+		onSubmit: submit,
+		settled,
+		answer,
+		busy,
+		lookup: viewScope(view, current),
+		values: current,
+		locked: settled || busy,
+		answerLocked: settled || busy || onSubmit === void 0,
+		setInput: (id, value) => setValues((before) => ({
+			...before,
+			[id]: value
+		})),
+		registerChart,
+		refreshCharts
+	};
+	return /* @__PURE__ */ jsx(WidgetNode, {
+		node: view,
+		ctx,
+		Markdown,
+		labels,
+		t
+	});
+}
+function useChartHandles() {
+	const [, bump] = useState(0);
+	const charts = useRef(/* @__PURE__ */ new Map());
+	const refreshCharts = useCallback(() => bump((value) => value + 1), []);
+	const registerChart = useCallback((key, handle) => {
+		charts.current.set(key, handle);
+		refreshCharts();
+		return () => {
+			charts.current.delete(key);
+			refreshCharts();
+		};
+	}, [refreshCharts]);
+	return {
+		charts: [...charts.current.values()],
+		registerChart,
+		refreshCharts
+	};
+}
+function ViewMenu({ charts, t }) {
+	const [open, setOpen] = useState(false);
+	const root = useRef(null);
+	useEffect(() => {
+		if (!open) return void 0;
+		const away = (event) => {
+			if (!root.current?.contains(event.target)) setOpen(false);
+		};
+		const key = (event) => {
+			if (event.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("pointerdown", away, true);
+		document.addEventListener("keydown", key);
+		return () => {
+			document.removeEventListener("pointerdown", away, true);
+			document.removeEventListener("keydown", key);
+		};
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "dvui-tools",
+		"data-open": open ? "" : void 0,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "dvui-more",
+			"aria-label": t("Chart options"),
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			onClick: () => setOpen((value) => !value),
+			children: /* @__PURE__ */ jsx(DotsIcon, {})
+		}), open ? /* @__PURE__ */ jsx("div", {
+			className: "dvui-menu",
+			role: "menu",
+			children: charts.map((chart, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				charts.length > 1 ? /* @__PURE__ */ jsx("div", {
+					className: "dvui-menu-label",
+					children: chart.label ?? t("Chart {n}", { n: index + 1 })
+				}) : null,
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitem",
+					onClick: () => {
+						setOpen(false);
+						chart.toggleTable();
+					},
+					children: [/* @__PURE__ */ jsx(TableIcon, {}), chart.asTable ? t("View as chart") : t("View as table")]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitem",
+					onClick: () => {
+						setOpen(false);
+						chart.copy();
+					},
+					children: [/* @__PURE__ */ jsx(CopyIcon, {}), t("Copy data")]
+				})
+			] }, `${chart.label}-${index}`))
+		}) : null]
+	});
+}
+function WidgetCard({ title = "", view, onSubmit, onDismiss, busy = false, settled = false, answer = null, t = english, labels, Markdown, localOnly = false }) {
+	const titleId = useId();
+	const { charts, registerChart, refreshCharts } = useChartHandles();
+	const framed = hasType(view, /* @__PURE__ */ new Set([
+		"slider",
+		"number",
+		"choice",
+		"toggle",
+		"options",
+		"confirm",
+		"form",
+		"submit"
+	]));
+	return /* @__PURE__ */ jsxs("div", {
+		className: `dvui-view ${framed ? "dvui-framed" : "dvui-bare"}${settled ? " dvui-settled" : ""}`,
+		role: "group",
+		"aria-labelledby": title ? titleId : void 0,
+		"aria-label": title ? void 0 : t("View"),
+		"aria-busy": busy || void 0,
+		children: [
+			title || onDismiss || charts.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "dvui-head",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "dvui-title",
+						id: titleId,
+						children: title
+					}),
+					charts.length > 0 ? /* @__PURE__ */ jsx(ViewMenu, {
+						charts,
+						t
+					}) : null,
+					onDismiss ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "dvui-dismiss",
+						"aria-label": t("Dismiss view"),
+						onClick: onDismiss,
+						disabled: busy,
+						children: "×"
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "dvui-body",
+				children: /* @__PURE__ */ jsx(WidgetView, {
+					view,
+					onSubmit,
+					settled,
+					answer,
+					busy,
+					registerChart,
+					refreshCharts,
+					t,
+					labels,
+					Markdown
+				})
+			}),
+			localOnly && hasType(view, /* @__PURE__ */ new Set([
+				"options",
+				"confirm",
+				"form",
+				"submit"
+			])) ? /* @__PURE__ */ jsx("p", {
+				className: "dvui-local-note",
+				role: "note",
+				children: t("Local preview only; this card does not send an answer.")
+			}) : null
+		]
+	});
+}
+//#endregion
+export { WidgetCard, WidgetView };
+
+//# sourceMappingURL=widget.js.map